:root{color-scheme:dark;--mint:#b5f56b;--ink:#0b191a;--muted:#95aca5}
body{background:radial-gradient(ellipse at 20% 10%,#21413b,transparent 55%),#081113;font-family:Inter,"Segoe UI",sans-serif;color:#eef6ee}
#app{width:min(100vw,460px);height:100dvh;max-height:980px;background:#101f22;box-shadow:0 30px 100px #0009}
.home-top{padding:26px 16px 20px;background:linear-gradient(150deg,#234b3b,#10282a 75%);border-bottom:1px solid #395449}
.edition{font-size:9px;letter-spacing:2.6px;color:var(--mint);margin-bottom:12px}.home-title{font-size:64px;letter-spacing:-4px;color:#f6f5dc;line-height:1}.home-sub{font-size:9px;letter-spacing:2px;margin-top:12px;color:#baccc2}.home-glow{display:none}.home-stats{margin:18px 0}.home-stat-val{color:#eaf7d8}
#play-btn{background:var(--mint);color:var(--ink);box-shadow:none;border:0;border-radius:7px;font-size:14px;letter-spacing:1px;animation:none;min-height:48px}.intro{font-size:11px;color:#bbccc4;margin-top:13px;text-align:center}.home-tabs{background:#101f22}.tab-btn.active{color:var(--mint);border-color:var(--mint)}.home-content{background:#101f22}.quick-guide{border:1px solid #38514a;padding:15px;border-radius:10px;margin-bottom:20px;background:#19312d}.quick-guide b{font-size:16px}.quick-guide p{font-size:12px;line-height:1.65;color:#bbcec3;margin:8px 0}.quick-guide small{font-size:10px;color:var(--mint)}
.match-heading{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:9px;letter-spacing:1px;background:#102627}.match-heading b{margin:0 10px;color:#b7cabc}button{font:inherit;cursor:pointer}#pause-btn{background:#233d39;border:1px solid #486359;border-radius:5px;color:#dce9dd;padding:7px;font-size:10px}#score-bar{background:#102627;border:0;padding:8px 28px}.team-score{font-size:32px}#timer{background:#213b35;color:var(--mint);font-variant-numeric:tabular-nums}#field-wrap{background:#112d27;display:flex;align-items:center;justify-content:center}#field-canvas{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:390/650;object-fit:contain;touch-action:none}
#bottom-bar{background:#102627;border-top:1px solid #385248;padding:8px 8px max(10px,env(safe-area-inset-bottom))}#order-feedback{font-size:10px;color:#b7ccbc;text-align:center;min-height:24px;padding:0 0 6px}.player-card{flex:1;min-width:0;width:auto;height:78px;border-radius:8px!important;background:#243c36}.card-avatar-canvas{height:54px;width:54px;left:50%;transform:translateX(-50%)}.card-name{display:block;position:absolute;bottom:13px;font-size:9px;background:#102627dd;width:100%;text-align:center;white-space:nowrap;overflow:hidden}.card-role{display:block;position:absolute;bottom:2px;font-size:8px;letter-spacing:1px;color:#c4dcbd}.team-shape-btn{width:55px;height:78px}.cmd-btn{height:58px;font-size:11px;border-radius:8px}.cmd-btn:focus-visible,.player-card:focus-visible,button:focus-visible{outline:3px solid white;outline-offset:2px}
#pause-cover{position:absolute;top:16%;left:10%;right:10%;padding:20px;background:#102627ed;border:1px solid #b5f56b;border-radius:10px;text-align:center;pointer-events:none;display:grid;gap:8px}#pause-cover span{font-size:12px;color:#afc7b9}[hidden]{display:none!important}#result-panel{position:absolute;inset:10% 6%;z-index:70;background:#102627f5;border:1px solid #66845f;border-radius:16px;padding:28px 20px;display:flex;flex-direction:column;justify-content:center;gap:18px;text-align:center}#result-panel>span{font-size:10px;letter-spacing:3px;color:var(--mint)}#result-panel h2{font-size:24px}#result-score{font-size:64px}#result-panel p{font-size:12px;line-height:1.6;color:#c3d2c5}#result-panel button{padding:14px;background:var(--mint);border:0;border-radius:7px;color:#102627;font-weight:bold}#result-panel #home-btn{background:#28443b;color:white}#goal-flash{font-size:40px}
@media(min-width:700px){#app{height:96dvh;margin:2dvh 0;border:1px solid #3a544c;border-radius:18px}}@media(max-height:700px){.home-top{padding:12px}.home-title{font-size:44px}.home-stats{margin:10px 0}.quick-guide{padding:10px}.match-heading{padding:5px 10px}.player-card,.team-shape-btn{height:66px}}
@media(max-width:699px){
  body{height:100dvh;min-height:0;align-items:flex-start;overflow:hidden}
  #app{width:100%;height:100dvh;max-height:none}
  .home-top{padding-top:max(26px,env(safe-area-inset-top))}
  #score-bar{gap:4px;padding-top:max(6px,env(safe-area-inset-top))!important;padding-left:max(8px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important}
  .team-score{min-width:0;font-size:clamp(20px,7vw,32px);gap:4px}
  .team-score small{max-width:50px;overflow:hidden;text-overflow:ellipsis}
  #bottom-bar{padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .home-content{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #cards-row{gap:5px}
  #ga-card{gap:6px;padding:5px}
  #ga-face{width:42px;height:42px}
  #ga-name{font-size:11px}
  #form-btn,#team-shape-btn,#go-btn{width:48px;min-width:48px}
  #form-pop{max-width:calc(100vw - 16px)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Club controls and contract reveal */
#play-btn{position:relative;min-height:58px;font-size:22px;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,#d5ff94,#92db46);border-radius:14px;box-shadow:0 5px 0 #507c27,0 10px 26px #0005;transition:transform .15s,box-shadow .15s}
#play-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #507c27}
#pvp-btn{display:block;width:100%;margin-top:14px;padding:12px;border:1px solid #7fa78d;border-radius:12px;background:#173b33;color:#d5ff94;font-size:14px;font-weight:700}
.formation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.formation-card{position:relative;flex-direction:column;padding:12px 8px;gap:8px;text-align:center;min-width:0}.formation-check{position:absolute;top:6px;right:6px}.formation-tags{justify-content:center;flex-wrap:wrap}.formation-info{min-width:0}.formation-field{flex-shrink:0}
#result-panel{inset:3% 4%;overflow-y:auto;justify-content:flex-start;gap:12px;padding:20px 14px}#result-score{font-size:44px}#result-panel>button{flex-shrink:0}.contract{width:100%;display:flex;align-items:center;flex-direction:column;gap:9px!important;padding:20px!important;min-height:170px;border:1px solid #d5d099!important;color:#f5efd1!important;background:linear-gradient(140deg,#3f4b36,#182a25)!important;border-radius:14px!important;overflow:hidden}.contract small{letter-spacing:2px;font-size:11px}.contract strong{font-size:20px}.contract span{font-size:12px}.contract .contract-seal{font-size:42px;color:#d5ff94}.contract.ready{animation:contractPulse 1.6s ease-in-out infinite}.contract.revealed{border-color:var(--rarity)!important;box-shadow:inset 0 0 30px color-mix(in srgb,var(--rarity),transparent 80%);animation:contractReveal .55s ease-out}.contract-prompt{color:#d5ff94}
@keyframes contractPulse{50%{box-shadow:0 0 20px #b5f56b55;transform:translateY(-2px)}}@keyframes contractReveal{0%{transform:scale(.88) rotateY(70deg);filter:brightness(2)}100%{transform:scale(1) rotateY(0);filter:brightness(1)}}
#pvp-dialog{width:min(94vw,420px);max-height:90dvh;overflow:auto;margin:auto;padding:24px;background:#102627;color:#eef6ee;border:1px solid #7fa78d;border-radius:18px}#pvp-dialog::backdrop{background:#000b}#pvp-dialog h2{margin:0 0 10px}#pvp-dialog p{font-size:14px;line-height:1.5}#pvp-dialog button{padding:12px;margin:6px 3px;border-radius:8px;border:0;background:#b5f56b;color:#102627;font-weight:700}#pvp-dialog textarea{display:block;width:100%;box-sizing:border-box;min-height:90px;margin:10px 0;background:#081916;color:white;border:1px solid #618675;border-radius:8px;padding:10px}#pvp-status{color:#d5ff94;min-height:40px}#pvp-exit{position:static;background:#244739;color:white;border:1px solid #9dbe97;border-radius:5px;padding:3px 8px;font-size:9px;letter-spacing:.08em}

.squad-slot.has-portrait{gap:1px!important;padding:3px!important}.squad-portrait{width:36px;height:36px;flex-shrink:0;image-rendering:pixelated;border-radius:5px;pointer-events:none}.squad-slot.has-portrait>div:nth-of-type(1){font-size:8px!important}.squad-slot.has-portrait>div:nth-of-type(2){font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.squad-slot.has-portrait>div:nth-of-type(3){font-size:7px!important}

#club-contract-dialog{box-sizing:border-box;width:min(92vw,380px);max-height:90dvh;overflow-y:auto;margin:auto;padding:24px 18px;background:#102627;color:#eef6ee;border:1px solid #87ad6e;border-radius:20px;text-align:center;box-shadow:0 20px 80px #0008}#club-contract-dialog::backdrop{background:#030b09da}#club-contract-dialog h2{font-size:24px;margin:0 0 8px}#club-contract-dialog>p{font-size:14px;color:#b5c8ba;margin:0 0 20px}#club-contract-dialog .contract{cursor:pointer}#club-contract-dialog .contract-continue{width:100%;margin-top:18px;padding:14px;border:0;border-radius:10px;background:#b5f56b;color:#102627;font-weight:800;font-size:15px}#club-contract-dialog .contract-continue:disabled{opacity:.35;cursor:default}

#pvp-search{display:block;width:100%;font-size:18px;min-height:52px;margin:12px 0!important}#pvp-code{display:block;box-sizing:border-box;width:100%;padding:14px;margin:10px 0;font-size:24px;font-weight:bold;letter-spacing:6px;text-align:center;text-transform:uppercase;border:1px solid #618675;border-radius:9px;background:#081916;color:white}#pvp-output{display:block;font-size:36px;letter-spacing:6px;padding:18px 0;color:#d5ff94;user-select:all}#pvp-dialog button:disabled{opacity:.45;cursor:default}

html,body{overscroll-behavior-x:none}
#field-wrap,#field-canvas{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Squad: equal columns, larger names, details available by tapping. */
#tab-team{padding:16px 12px}
#roster-view{width:100%;max-width:440px;margin-inline:auto;box-sizing:border-box}
.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#roster-view .collection-card{width:100%!important;height:auto!important;min-height:178px;padding:8px 5px!important;opacity:1!important;gap:7px!important}
#roster-view .collection-card.is-locked{opacity:.65!important}
#roster-view .collection-name{font-size:14px!important;line-height:1.25!important;color:#fff!important;overflow-wrap:anywhere}
#roster-view .mini-stats{width:100%;gap:5px 4px}
#roster-view .mini-stats span,#roster-view .mini-stats i{font-size:12px}
#roster-view .collection-status{font-size:12px!important;color:#ceddd0!important;letter-spacing:0!important}
#roster-view .collection-heading,#roster-view .squad-status{font-size:14px!important;letter-spacing:0!important;color:#c9dacd!important}
#roster-view .squad-slot{width:90px!important;height:100px!important;gap:3px!important}
#roster-view .squad-portrait{width:44px;height:44px}
#roster-view .squad-slot>div:nth-of-type(1){font-size:12px!important}
#roster-view .squad-slot>div:nth-of-type(2){font-size:14px!important;white-space:normal;line-height:1.2}
#roster-view .squad-slot>div:nth-of-type(3){display:none}
@media(max-width:350px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#subs-panel .subs-condition{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;padding:7px 9px;border:1px solid #496857;border-radius:7px;background:#102627;font-size:14px;color:#eef6ee}
#subs-panel .subs-condition b{font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}

.lg-division-heading{font-size:18px;font-weight:800;color:#b5f56b;margin-bottom:12px}.lg-divisions{display:flex;gap:6px}.lg-divisions button{flex:1;min-height:44px;border:1px solid #496857;border-radius:8px;background:#19312d;color:#fff;font-size:14px}.lg-divisions button.on{background:#b5f56b;color:#102627;font-weight:800}.lg-rules,.lg-movements{font-size:13px;line-height:1.5;color:#c9dacd;margin:10px 0}.lg-promote td:first-child{box-shadow:inset 3px 0 #b5f56b}.lg-relegate td:first-child{box-shadow:inset 3px 0 #ff826c}
/* Unsupported orientation locks retain the playable portrait proportions. */
.portrait-fallback #app{position:fixed;left:50%;top:50%;width:var(--portrait-width)!important;height:var(--portrait-height)!important;max-height:none!important;margin:0!important;border-radius:0;transform:translate(-50%,-50%) scale(var(--portrait-scale));transform-origin:center}