/* Footdoku · tactics board look: one narrow column, the board in the middle */
:root{
  --bg:#EDEFE8; --board:#FAFBF6; --ink:#16201A; --muted:#5B675E; --hair:#C9CFC4; --line:#16201A;
  --accent:#1E6A44; --accent-ink:#FFFFFF; --wrong:#B93A26; --yellow:#E9B90C; --red:#C8321F;
  --z-GK:#FAF1CC; --z-DF:#DEE9F5; --z-MF:#DFEFD8; --z-FW:#F8E0DA;
  --c-GK:#E3B505; --c-DF:#2F6DB5; --c-MF:#2E8540; --c-FW:#C8402F; --c-GK-ink:#2A2104;
  --chip:#16201A; --chip-ink:#FAFBF6;
  --pitch-line:rgba(60,72,64,.42);
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111612; --board:#1A211C; --ink:#E6ECE4; --muted:#98A69B; --hair:#36413A; --line:#E6ECE4;
  --accent:#4FB884; --accent-ink:#0D1A12; --wrong:#F07A63; --yellow:#F2C531; --red:#F0644E;
  --z-GK:#38321A; --z-DF:#1E2A38; --z-MF:#1F3020; --z-FW:#3A2320;
  --c-GK:#E8C03A; --c-DF:#5A93D6; --c-MF:#4FAE62; --c-FW:#E0634F; --c-GK-ink:#2A2104;
  --chip:#E6ECE4; --chip-ink:#111612; --pitch-line:rgba(210,220,212,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111612; --board:#1A211C; --ink:#E6ECE4; --muted:#98A69B; --hair:#36413A; --line:#E6ECE4;
  --accent:#4FB884; --accent-ink:#0D1A12; --wrong:#F07A63; --yellow:#F2C531; --red:#F0644E;
  --z-GK:#38321A; --z-DF:#1E2A38; --z-MF:#1F3020; --z-FW:#3A2320;
  --c-GK:#E8C03A; --c-DF:#5A93D6; --c-MF:#4FAE62; --c-FW:#E0634F; --c-GK-ink:#2A2104;
  --chip:#E6ECE4; --chip-ink:#111612; --pitch-line:rgba(210,220,212,.3); color-scheme:dark}

*{box-sizing:border-box}
/* always keep the scrollbar's space, so pages don't shift sideways when one is taller than the window */
html{scrollbar-gutter:stable;overflow-y:scroll}
@supports (scrollbar-gutter:stable){html{overflow-y:auto}}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:max(20px,env(safe-area-inset-top,0px)) calc(76px + env(safe-area-inset-bottom,0px))}
a{color:inherit}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
main{display:flex;flex-direction:column;gap:16px}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{font-family:var(--f-display);font-weight:700;font-size:40px;line-height:1;margin:0;letter-spacing:.01em;text-transform:uppercase}
.top-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:17px;cursor:pointer;padding:0}
.icon-btn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.langs{display:flex;gap:6px}
.flag{width:34px;height:24px;padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;opacity:.45;display:flex}
.flag svg{width:100%;height:100%;border-radius:2px;display:block}
.flag[aria-pressed="true"]{opacity:1;border-color:var(--ink)}
.flag:hover{opacity:1}
.flag:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.after{display:flex;gap:8px;flex-wrap:wrap}
.eyebrow{margin:0;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.match h2{font-family:var(--f-display);font-weight:700;font-size:30px;margin:0;text-transform:uppercase;letter-spacing:.01em;line-height:1.1;text-wrap:balance}
.match p:last-child{margin:2px 0 0;color:var(--muted);font-size:14px}
.section-title{font-family:var(--f-display);font-weight:700;font-size:26px;margin:0;text-transform:uppercase}

.status{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);gap:12px;font-variant-numeric:tabular-nums}
.cards{display:flex;gap:6px;align-items:center;min-height:18px}
.card{width:13px;height:18px;border-radius:2px;border:1.5px solid var(--hair)}
.card.y{background:var(--yellow);border-color:var(--yellow)}
.card.r{background:var(--red);border-color:var(--red)}

.board{position:relative;display:grid;grid-template-columns:repeat(var(--n,7),1fr);touch-action:none;user-select:none;-webkit-user-select:none}
.cell{aspect-ratio:1;position:relative;border:0;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 .5px var(--hair);font:inherit;color:var(--ink);touch-action:none;-webkit-tap-highlight-color:transparent}
.cell:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:2}
/* zone tint: lower --zone-tint = more transparent */
.board{--zone-tint:65%}
.z-GK{background:color-mix(in srgb,var(--z-GK) var(--zone-tint),var(--board))} .z-DF{background:color-mix(in srgb,var(--z-DF) var(--zone-tint),var(--board))}
.z-MF{background:color-mix(in srgb,var(--z-MF) var(--zone-tint),var(--board))} .z-FW{background:color-mix(in srgb,var(--z-FW) var(--zone-tint),var(--board))}
.bt{border-top:3px solid var(--line)} .bb{border-bottom:3px solid var(--line)} .bl{border-left:3px solid var(--line)} .br{border-right:3px solid var(--line)}
.zl{z-index:2;position:absolute;inset:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--f-display);font-weight:600;line-height:1.05;opacity:.62;pointer-events:none;overflow:hidden}
.zl b{font-weight:700;font-size:11px;letter-spacing:.06em}
.zl .h{margin-top:2px;font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.x{position:relative;z-index:2;width:52%;aspect-ratio:1;display:flex}
.x svg{width:100%;height:100%;overflow:visible}
.x path{fill:none;stroke-linecap:round}
.x .x-edge{stroke:var(--x-edge,#3A463D);stroke-width:6.5}
.x .x-core{stroke:#fff;stroke-width:3.5}
.chip{position:relative;z-index:2;width:78%;aspect-ratio:1;border-radius:50%;background:var(--chip);color:var(--chip-ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:clamp(10px,2.6vw,13px);letter-spacing:.03em}
 .chip.p-GK{background:var(--c-GK);color:var(--c-GK-ink)} .chip.p-DF{background:var(--c-DF);color:#fff}
.chip.p-MF{background:var(--c-MF);color:#fff} .chip.p-FW{background:var(--c-FW);color:#fff}
.chip.given{box-shadow:0 0 0 2px var(--board),0 0 0 3.5px var(--ink)}
.chip.unk{background:var(--board);color:var(--ink);border:2.5px solid var(--pc,var(--ink))}
.chip.sel{outline:3px solid var(--accent);outline-offset:2px}
.chip.bad{box-shadow:none}
.cell.wrong::after{content:"";position:absolute;z-index:3;inset:2%;border-radius:50%;border:3px solid var(--wrong);box-shadow:inset 0 0 0 2.5px var(--board),0 0 0 1.5px var(--board);pointer-events:none}
@media (prefers-reduced-motion: no-preference){.cell.wrong::after{animation:ring-in .35s ease-out}
  @keyframes ring-in{from{transform:scale(1.35);opacity:0}to{transform:none;opacity:1}}}
.chip.ghost{background:transparent;color:var(--ink);border:2.5px dashed var(--pc,var(--ink))}

.play{display:grid;grid-template-columns:minmax(0,1fr) clamp(112px,31vw,200px);gap:12px;align-items:start}
.board-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.squad h3{margin-bottom:6px}
/* phones: the board takes the whole width and the squad goes underneath, in two columns */
@media (max-width:600px){
  .play{grid-template-columns:1fr}
  .play .players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
/* 9x9 and up: the board takes the full width and the squad goes underneath */
.play.wide{grid-template-columns:1fr}
.play.wide .players{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.board.big .bt{border-top-width:2px} .board.big .bb{border-bottom-width:2px} .board.big .bl{border-left-width:2px} .board.big .br{border-right-width:2px}
.board.big .zl b{font-size:9px;letter-spacing:.03em} .board.big .zl .h{font-size:10px;margin-top:1px;padding:0 1px}
.board.big .chip{width:84%;font-size:clamp(8px,2.3vw,11px);letter-spacing:0}
.board.big .x{width:56%}
.board.big .x .x-edge{stroke-width:7} .board.big .x .x-core{stroke-width:3.8}
.pitch{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.pitch *{fill:none;stroke:var(--pitch-line);stroke-width:1.6;vector-effect:non-scaling-stroke}
.pitch .spot{fill:var(--pitch-line);stroke:none}
h1 .ball{display:inline-block;font-size:.74em;line-height:1;vertical-align:.06em;margin:0 .02em}
.msg{min-height:22px;font-size:14px;margin:0}
.msg.err{color:var(--wrong)} .msg.win{color:var(--accent);font-weight:600}

.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{font-family:var(--f-body);font-weight:600;font-size:14px;border:1.5px solid var(--hair);background:transparent;color:var(--ink);border-radius:999px;padding:4px 12px;cursor:pointer}
.opt[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.opt.rm{border-style:dashed;color:var(--muted)}

h3{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.players{display:flex;flex-direction:column;gap:4px}
.pl{display:grid;grid-template-columns:10px minmax(0,1fr);align-items:center;gap:4px 5px;border:1px solid var(--hair);background:var(--board);border-radius:6px;padding:2px 7px;min-width:0;line-height:1.35}
.pl.done{border-color:var(--ink)}
.tick{font-size:11px;color:var(--accent);font-weight:700}
.nm{font-weight:600;font-size:12.5px;line-height:1.2;padding:2px 0;overflow-wrap:break-word;hyphens:auto;min-width:0}
.attrs{grid-column:2;display:flex;gap:5px;font-family:var(--f-display);font-size:11.5px;color:var(--muted);align-items:center}
.pl .pos{display:inline-block;font-size:10px;line-height:15px;padding:0 3px;min-width:26px;text-align:center;margin-right:3px;vertical-align:1px}
.pos{font-family:var(--f-display);font-weight:700;font-size:11px;letter-spacing:.04em;border-radius:3px;padding:0 4px;line-height:17px;color:#fff}
.pos.c-GK{background:var(--c-GK);color:var(--c-GK-ink)} .pos.c-DF{background:var(--c-DF)} .pos.c-MF{background:var(--c-MF)} .pos.c-FW{background:var(--c-FW)}

.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.03em;border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:6px 14px;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn:focus-visible,.tab:focus-visible,.opt:focus-visible,.item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.rules{margin:0;font-size:14px;padding-left:18px;display:flex;flex-direction:column;gap:6px;max-width:62ch}
.loading{color:var(--muted)}
@media (prefers-reduced-motion: no-preference){.chip{transition:background-color .15s}}

/* ---- shell: brand, tab bar ---- */
.brand{font-family:var(--f-display);font-weight:700;font-size:40px;line-height:1;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.brand .ball{display:inline-block;font-size:.74em;line-height:1;vertical-align:.06em;margin:0 .02em}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;background:var(--board);border-top:1.5px solid var(--hair);
  padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));z-index:5}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;color:var(--muted);font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;min-width:64px;padding:2px 6px;border-radius:8px}
.tabbar a .ico{font-size:18px;line-height:1.1}
.tabbar a[aria-current="page"]{color:var(--ink)}
.tabbar a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tabbar a{flex:1;max-width:200px}
@media (min-width:672px){.tabbar{left:50%;right:auto;width:640px;transform:translateX(-50%);border:1.5px solid var(--hair);border-bottom:0;border-radius:12px 12px 0 0}}

/* ---- home ---- */
.hero{display:block;text-decoration:none;color:var(--ink);background:var(--board);border:2px solid var(--ink);border-radius:14px;padding:14px 16px}
.hero h2{font-family:var(--f-display);font-weight:700;font-size:32px;margin:2px 0 0;text-transform:uppercase;line-height:1.05}
.hero .sub,.tile .sub,.match .sub,p.sub{margin:4px 0 0;color:var(--muted);font-size:14px}
.hero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px}
.streak{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--muted)}
.tile{display:block;text-decoration:none;color:var(--ink);background:var(--board);border:1.5px solid var(--hair);border-radius:12px;padding:12px 14px}
.tile:hover{border-color:var(--ink)}
.tile-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tile-head b{font-family:var(--f-display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.01em}
.tile-head span{font-size:13px;color:var(--muted)}
.bar{height:6px;background:var(--bg);border-radius:3px;margin-top:8px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:3px}
.row-between{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.stars-total{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--muted)}
.lbl{margin:6px 0 0;font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-f{font-family:var(--f-body);font-weight:600;font-size:13px;border:1.5px solid var(--hair);background:transparent;color:var(--ink);border-radius:999px;padding:3px 11px;cursor:pointer}
.chip-f[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.chip-f.ro{cursor:default;color:var(--muted)}
.chip-f:focus-visible,select:focus-visible,.setting input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
select{font:inherit;font-size:14px;color:var(--ink);background:var(--board);border:1.5px solid var(--hair);border-radius:8px;padding:6px 10px;max-width:100%}

/* ---- story ---- */
.chapter{border:1.5px solid var(--hair);background:var(--board);border-radius:12px;padding:12px 14px;margin-top:12px}
.chapter.locked{opacity:.85}
.chapter-head{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.chapter-head b{font-family:var(--f-display);font-weight:700;font-size:20px;text-transform:uppercase}
.chapter-head span{font-size:13px;color:var(--muted);white-space:nowrap}
.chapter .sub{margin:2px 0 10px}
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:12px 8px;margin-top:12px}
.lvl{aspect-ratio:1;border-radius:50%;border:2px solid var(--hair);background:transparent;color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;position:relative}
.lvl.done{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lvl.red{background:var(--wrong);border-color:var(--wrong);color:#fff}
.lvl.cur{border-color:var(--ink)}
.lvl.locked{color:var(--muted);background:var(--hair);border-color:var(--hair);opacity:.55;cursor:default;pointer-events:none}
.lvl.locked{opacity:1;color:color-mix(in srgb,var(--muted) 70%,transparent)}
.lvl .lock{position:absolute;top:-4px;right:-4px;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--muted);color:var(--board);box-shadow:0 0 0 2px var(--board)}
.lvl.sel{box-shadow:0 0 0 2px var(--board),0 0 0 4px var(--ink)}
.lvl{font-family:var(--f-display)}
.lvl .st{position:absolute;bottom:-9px;font-size:9px;letter-spacing:-1px;color:var(--star,#C99400)}
.lvl:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.level-info{margin-top:12px;background:var(--bg);border-radius:8px;padding:8px 10px;font-size:14px}
.level-info b{font-family:var(--f-display);font-weight:700;font-size:16px;text-transform:uppercase}

/* ---- profile ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.stat{background:var(--board);border:1.5px solid var(--hair);border-radius:10px;padding:8px 10px}
.stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}
.collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.coll{border:1.5px solid var(--hair);border-radius:10px;padding:8px 10px;background:var(--board);min-width:0}
.coll b{display:block;font-family:var(--f-display);font-weight:700;font-size:16px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coll span{font-size:12px;color:var(--muted)}
.coll .dots{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--hair)}
.dot.clean{background:var(--accent);border-color:var(--accent)} .dot.yellow,.dot.yellow2{background:var(--yellow);border-color:var(--yellow)} .dot.red{background:var(--red);border-color:var(--red)}
.setting{display:flex;align-items:center;gap:10px;font-size:14px}
.setting input{width:18px;height:18px;accent-color:var(--accent)}

/* ---- game extras ---- */
.result-line{font-family:var(--f-display);font-weight:700;font-size:22px;text-transform:uppercase;margin-bottom:8px}
.x.auto{opacity:.4}
@media (prefers-reduced-motion: no-preference){
  .x.new{animation:x-pop .22s cubic-bezier(.3,1.6,.5,1)}
  @keyframes x-pop{from{transform:scale(.2) rotate(-45deg);opacity:0}to{transform:none;opacity:1}}
  .modal:not([hidden]) .sheet{animation:sheet-in .18s ease-out}
  @keyframes sheet-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
}

/* ---- rule cards above the board, rules under it ---- */
.rule-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rule-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--board);border:1.5px solid var(--hair);border-radius:10px;padding:8px 6px;font-size:12.5px;font-weight:600;line-height:1.25}
.rule-card svg{width:30px;height:30px}
.howto{border-top:1.5px solid var(--hair);padding-top:14px}
.b-ico{margin-right:6px}
.board-actions{justify-content:center;gap:6px}
.board-actions .btn{font-size:clamp(13px,3.6vw,14px);padding:5px 8px;white-space:nowrap}
.board-actions .b-ico{margin-right:3px}
.board-actions #give-up{flex-basis:100%;border:0;background:none;padding:2px;font-family:var(--f-body);font-weight:500;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.btn:disabled{opacity:.4;cursor:default}

/* ---- side ads: only where there is empty space on both sides of the 640px column ---- */
.side-ad{display:none;line-height:0;position:fixed;top:50%;transform:translateY(calc(-50% - 30px));z-index:4}
.side-ad.left{right:calc(50% + 320px + 24px)}
.side-ad.right{left:calc(50% + 320px + 24px)}
.side-slot{display:inline-block;width:160px;height:600px}
@media (min-width:1080px) and (min-height:720px){.side-ad.on{display:block}}
@media (min-width:1360px) and (min-height:720px){.side-slot{width:300px}}
body.ads-debug .side-slot{outline:2px dashed var(--muted);background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(128,128,128,.08) 10px 20px)}

/* ---- name picker modal ---- */
.modal{position:fixed;inset:0;z-index:20;background:rgba(10,16,12,.45);display:flex;align-items:flex-end;justify-content:center;padding:16px}
@media (min-width:560px){.modal{align-items:center}}
.sheet{width:100%;max-width:440px;max-height:80vh;overflow:auto;background:var(--board);border:1.5px solid var(--ink);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;margin-bottom:env(safe-area-inset-bottom,0px)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sheet-head p{margin:0;font-weight:600;font-size:15px}
.sheet-head .pos{margin-right:4px;vertical-align:1px}
.sheet .opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.sheet .opt{border-radius:8px;padding:8px 12px;text-align:left}
.sheet .opt.rm{grid-column:1/-1;text-align:center}
.sheet .opt .pos{display:inline-block;font-size:10px;line-height:15px;padding:0 3px;min-width:26px;text-align:center;margin-right:6px;vertical-align:1px}
.sheet .opt[aria-pressed="true"] .pos{box-shadow:0 0 0 1.5px var(--bg)}
.loading{color:var(--muted)}