/* ══ ESTATE RAIDS · THE FRAME ══════════════════════════════════════════════════════════
   The screens around the fight: the ink intro, the title, how to play, the roster book, the
   face-off before a raid and the results after it. Every rule sits under .fx so none of it
   can reach the game's own sheets and bar. Colours are the page's :root tokens. */
.fx{ position:fixed; inset:0; z-index:30; display:none; overflow:hidden; background:var(--paper); color:var(--ink); }
.fx.on{ display:block; }
.fx button{ font:inherit; cursor:pointer; }
.fx .arc{ font-family:Archivo,Impact,sans-serif; font-weight:900; font-stretch:112%; text-transform:uppercase; }   /* beats the button reset above */
.fx .btn{ white-space:nowrap; height:56px; padding:0 30px; border-radius:999px; border:3px solid var(--ink); background:var(--ink); color:var(--white); font-size:20px; }
.fx .btn.gold{ background:var(--gold); color:var(--ink); }
.fx .btn.ghost{ background:var(--white); color:var(--ink); }
.fx .btn:disabled{ opacity:.45; cursor:progress; }
.fx .chip{ display:inline-flex; align-items:center; gap:6px; border:2px solid var(--ink); border-radius:999px; background:var(--white); padding:4px 12px; font:700 12px Inter,sans-serif; }
.fx .x{ position:absolute; z-index:41; right:14px; top:calc(12px + var(--sat)); width:42px; height:42px; border-radius:50%; border:2px solid var(--ink); background:var(--white); font:900 18px Archivo,sans-serif; }

/* a piece played from its sheet: the strip stepped by CSS; a piece with no sheet is its still body */
.fx .spr{ background-repeat:no-repeat; animation:fx-strip var(--dur) steps(var(--n)) infinite; }
.fx .spr.once{ animation-iteration-count:1; animation-fill-mode:forwards; }
.fx img.still{ display:block; object-fit:contain; }
@keyframes fx-strip{ to{ background-position-x:var(--end); } }
.fx .flip{ scale:-1 1; }           /* its own property, so an entrance tween on transform never unflips it */

/* ── the intro: a manga panel pushing in, the narrator typing ── */
#fx-intro{ background:#0d0b09; }
#fx-intro .pan{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s; transform-origin:60% 40%; }
#fx-intro .pan.on{ opacity:1; animation:fx-push 9s ease-out forwards; }
@keyframes fx-push{ from{ transform:scale(1.02); } to{ transform:scale(1.14) translate(-2%,1%); } }
#fx-intro .bars::before, #fx-intro .bars::after{ content:''; position:absolute; left:0; right:0; height:9dvh; background:#0d0b09; z-index:2; }
#fx-intro .bars::before{ top:0; } #fx-intro .bars::after{ bottom:0; }
#fx-intro .cap{ position:absolute; z-index:3; left:6vw; bottom:14dvh; max-width:min(560px,88vw); background:var(--white); border:3px solid var(--ink);
  padding:16px 20px; box-shadow:8px 8px 0 var(--ink); font:600 clamp(16px,2.2vw,21px)/1.35 Inter,sans-serif; min-height:3.2em; }
#fx-intro .cap b{ display:block; font:900 12px Archivo,sans-serif; letter-spacing:.2em; color:var(--gold); margin-bottom:4px; }
#fx-intro .skip{ position:absolute; z-index:3; right:4vw; top:calc(9dvh + 16px); cursor:pointer; }
#fx-intro .num{ position:absolute; z-index:3; right:4vw; bottom:calc(9dvh + 18px); color:#fff; font:900 14px Archivo,sans-serif; letter-spacing:.2em; }
/* 27 Sep: on a portrait phone the wide art was cropped to its middle 40% (and then pushed in further). Now it sits
   a little smaller and pans end to end across the panel's time, so every part of the picture passes by. */
@media (max-aspect-ratio:3/4){
  #fx-intro .pan{ background-size:auto 50dvh; background-repeat:no-repeat; background-position:0% 34%; transform:none; }
  #fx-intro .pan.on{ animation:fx-pan 7.6s cubic-bezier(.45,.05,.55,.95) forwards; }
  #fx-intro .cap{ left:4vw; right:4vw; bottom:12dvh; }
  #fx-intro .num{ left:4vw; right:auto; top:calc(9dvh + 22px); bottom:auto; }   /* it sat behind the caption */
}
@keyframes fx-pan{ from{ background-position:0% 34%; } to{ background-position:100% 34%; } }
@media (max-aspect-ratio:3/4) and (prefers-reduced-motion:reduce){ #fx-intro .pan{ background-size:100vw auto; background-position:center 34%; } #fx-intro .pan.on{ animation:none; } }

/* ── the title: a column (title, band, buttons) so a short window never stacks them ── */
#fx-title.on{ display:flex; flex-direction:column; align-items:center; }
#fx-title .sun{ position:absolute; left:50%; top:46%; width:150vmax; height:150vmax; transform:translate(-50%,-50%); pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(28,23,18,.07) 0 5deg, transparent 5deg 12deg); animation:fx-turn 90s linear infinite; }
@keyframes fx-turn{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
#fx-title h1{ position:relative; margin:max(58px,7dvh) 0 0; text-align:center; font-size:clamp(46px,min(11vw,13dvh),150px); line-height:.82; text-shadow:6px 6px 0 var(--gold); }
#fx-title h1 small{ display:block; font:700 clamp(10px,1.3vw,14px) Inter,sans-serif; letter-spacing:.42em; color:var(--ink2); text-shadow:none; margin-top:14px; }
#fx-title .band{ position:relative; flex:1; min-height:0; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:clamp(8px,3vw,48px); padding-top:10px; }
#fx-title .band::after{ content:''; position:absolute; left:50%; bottom:-14px; width:min(820px,94vw); height:42px; transform:translateX(-50%); z-index:-1;
  background:radial-gradient(ellipse at center, rgba(28,23,18,.3), transparent 70%); }
#fx-title .band .mid{ z-index:2; }
#fx-title .go{ position:relative; display:flex; gap:10px; align-items:center; margin:30px 12px calc(max(30px,5dvh) + var(--sab)); flex-wrap:wrap; justify-content:center; }
#fx-title .go .main{ height:64px; font-size:24px; padding:0 42px; box-shadow:6px 6px 0 var(--gold); }
#fx-title .go .ghost{ font-size:16px; height:52px; }
#fx-title .meta{ position:absolute; left:14px; right:14px; top:calc(14px + var(--sat)); display:flex; justify-content:space-between; gap:8px; z-index:3; }
@media (max-width:520px){ #fx-title .go .main{ order:-1; width:100%; } #fx-title .go{ margin-bottom:calc(22px + var(--sab)); } }

/* ── how to play: story cards, each with a live demo ── */
#fx-how{ background:rgba(28,23,18,.62); }
#fx-how.on{ display:grid; place-items:center; overflow:auto; }
#fx-how .deck{ position:relative; width:min(860px,94vw); background:var(--white); border:3px solid var(--ink); border-radius:26px; box-shadow:12px 12px 0 var(--ink);
  display:grid; grid-template-columns:1.05fr 1fr; overflow:hidden; min-height:420px; margin:20px 0; }
#fx-how .stage{ position:relative; background:var(--paper2); border-right:3px solid var(--ink); overflow:hidden; }
#fx-how .stage::after{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(28,23,18,.04) 22px 24px); }
#fx-how .txt{ padding:30px 30px 22px; display:flex; flex-direction:column; }
#fx-how .k{ font:900 12px Archivo,sans-serif; letter-spacing:.24em; color:var(--gold); }
#fx-how h2{ margin:6px 0 10px; font-size:clamp(34px,4.4vw,52px); line-height:.9; }
#fx-how p{ margin:0 0 10px; color:var(--ink2); font-size:15px; }
#fx-how .nav{ margin-top:auto; display:flex; align-items:center; gap:10px; }
#fx-how .nav .btn{ height:46px; font-size:15px; }
#fx-how .dots{ display:flex; gap:7px; margin-right:auto; } #fx-how .dots i{ width:10px; height:10px; border:2px solid var(--ink); transform:rotate(45deg); }
#fx-how .dots i.on{ background:var(--gold); }
#fx-how .demo{ position:absolute; inset:0; display:none; } #fx-how .demo.on{ display:block; }
#fx-how .who{ position:absolute; left:50%; bottom:40px; transform:translateX(-50%); }
#fx-how .ring{ position:absolute; left:50%; top:44%; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%; border:4px solid var(--gold); z-index:2; }
#fx-how .ring::before{ content:''; position:absolute; inset:-4px; border-radius:50%; border:7px solid var(--ink); animation:fx-close 1.6s cubic-bezier(.45,0,.9,.6) infinite; }
#fx-how .ring.red{ border-color:var(--red); }
@keyframes fx-close{ 0%{ transform:scale(3.4); opacity:0; } 12%{ opacity:1; } 62%{ transform:scale(1); opacity:1; } 70%,100%{ transform:scale(1); opacity:0; } }
#fx-how .pop{ position:absolute; left:50%; top:18%; transform:translateX(-50%); font-size:40px; color:var(--gold); -webkit-text-stroke:2px var(--ink); opacity:0; animation:fx-pop 1.6s infinite; z-index:2; }
#fx-how .pop.red{ color:var(--white); }
@keyframes fx-pop{ 0%,60%{ opacity:0; transform:translateX(-50%) scale(1.8); } 66%{ opacity:1; transform:translateX(-50%) scale(1); } 90%{ opacity:1; } 100%{ opacity:0; } }
#fx-how .tap{ position:absolute; right:14%; top:60%; width:46px; height:46px; border-radius:50%; background:rgba(28,23,18,.12); border:2px solid var(--ink); animation:fx-tap 1.6s infinite; z-index:2; }
@keyframes fx-tap{ 0%,55%{ transform:scale(1); } 62%{ transform:scale(.7); background:var(--gold); } 72%,100%{ transform:scale(1); } }
#fx-how .gems{ position:absolute; left:50%; top:26px; transform:translateX(-50%); display:flex; gap:10px; background:var(--white); border:2px solid var(--ink); border-radius:999px; padding:9px 14px; z-index:2; }
#fx-how .gems i{ width:16px; height:16px; border:2px solid var(--ink); transform:rotate(45deg); }
#fx-how .gems i:nth-child(1){ animation:fx-fill 3s infinite; } #fx-how .gems i:nth-child(2){ animation:fx-fill 3s .6s infinite; } #fx-how .gems i:nth-child(3){ animation:fx-fill 3s 1.2s infinite; }
@keyframes fx-fill{ 0%,15%{ background:transparent; } 20%,100%{ background:var(--gold); } }
#fx-how .sbtn{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); height:46px; padding:0 22px; border-radius:999px; border:3px solid var(--ink); background:var(--gold);
  font:900 16px Archivo,sans-serif; text-transform:uppercase; display:grid; place-items:center; animation:fx-pulse 1s ease-in-out infinite; white-space:nowrap; z-index:2; }
@keyframes fx-pulse{ 50%{ transform:translateX(-50%) scale(1.07); } }
#fx-how .fortdemo img{ position:absolute; }
@media (max-width:760px){ #fx-how .deck{ grid-template-columns:1fr; min-height:0; } #fx-how .stage{ height:250px; border-right:0; border-bottom:3px solid var(--ink); } #fx-how .txt{ padding:20px; } }
/* 27 Sep: on a phone the column grew to its widest line (the heading, and the Back + To the Holdfast buttons that
   never wrap) and the card cut off its right side. The column now keeps to the card, the heading to the phone,
   the buttons share the row and the dots take a line of their own. */
@media (max-width:760px){ #fx-how .deck{ grid-template-columns:minmax(0,1fr); max-height:calc(100dvh - 24px); overflow-y:auto; } #fx-how .txt{ min-width:0; }
  #fx-how h2{ font-size:clamp(26px,8.4vw,40px); overflow-wrap:anywhere; } #fx-how .stage{ height:min(250px,30dvh); }
  #fx-how .nav{ flex-wrap:wrap; } #fx-how .dots{ width:100%; margin:0 0 4px; } #fx-how .nav .btn{ flex:1 1 0; min-width:0; padding:0 12px; } #fx-how .nav .btn:last-child{ flex-grow:2; } }

/* ── the roster book ── */
#fx-roster.on{ display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,640px); }   /* the page stops growing on a wide screen */
#fx-roster .list{ border-right:3px solid var(--ink); background:var(--white); overflow:auto; padding:14px 10px 20px; display:flex; flex-direction:column; gap:10px; }
#fx-roster .list button{ border:2px solid var(--ink); border-radius:14px; background:var(--paper2); height:84px; padding:0; overflow:hidden; position:relative; flex:none; }
#fx-roster .list button img{ width:100%; height:190%; object-fit:cover; object-position:50% 4%; }
#fx-roster .list button.on{ outline:4px solid var(--gold); outline-offset:-3px; }
#fx-roster .list button span{ position:absolute; left:6px; bottom:4px; font:900 11px Archivo,sans-serif; color:#fff; text-shadow:0 1px 3px #000; }
#fx-roster .hero{ position:relative; overflow:hidden; background:linear-gradient(transparent 70%, rgba(28,23,18,.06) 70%); }
#fx-roster .ghostnum{ position:absolute; left:3vw; top:2dvh; font-size:clamp(90px,14vw,210px); line-height:.8; color:transparent; -webkit-text-stroke:2px rgba(28,23,18,.16); }
#fx-roster .stand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); }       /* centred in its column */
#fx-roster .stand::after{ content:''; position:absolute; left:50%; bottom:-26px; width:min(300px,80%); min-width:220px; height:62px; transform:translateX(-50%); z-index:-1;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:rgba(106,95,82,.22); }   /* its hex, under its feet wherever it stands */
#fx-roster .hex{ display:none; position:absolute; left:50%; bottom:calc(8dvh - 30px); width:340px; height:70px; transform:translateX(-50%);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:var(--ink2); opacity:.22; }
#fx-roster .page{ padding:max(30px,8dvh) 64px 30px 10px; overflow:auto; }
#fx-roster h2{ margin:0; font-size:clamp(34px,4.2vw,58px); line-height:.9; }
#fx-roster .row{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
.fx .lvl{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; margin:6px 0 16px; }
.fx .lvl b{ background:var(--ink); color:#fff; border-radius:999px; padding:4px 12px; font:900 14px Archivo,sans-serif; }
.fx .mbar{ height:12px; border:2px solid var(--ink); border-radius:999px; background:var(--white); overflow:hidden; }
.fx .mbar u{ display:block; height:100%; background:var(--gold); width:0; transition:width 1.2s cubic-bezier(.2,.8,.2,1); }
.fx .stats{ display:grid; gap:9px; margin-bottom:18px; }
.fx .stat{ display:grid; grid-template-columns:78px 1fr 34px; gap:10px; align-items:center; font:700 12px Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.fx .stat .mbar u{ background:var(--ink); } .fx .stat em{ font:900 15px Archivo,sans-serif; font-style:normal; text-align:right; }
.fx .move{ border:3px solid var(--ink); border-radius:18px; padding:14px 16px; background:var(--white); box-shadow:6px 6px 0 var(--gold); margin-bottom:18px; }
.fx .move .arc{ font-size:26px; } .fx .move p{ margin:4px 0 10px; color:var(--ink2); } .fx .move .btn{ height:44px; font-size:15px; }
.fx .traits{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fx .traits div{ border:2px solid var(--ink); border-radius:12px; padding:6px 10px; font-size:12.5px; background:var(--white); }
.fx .traits small{ display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); }
.fx .traits i{ font-style:normal; color:var(--ink2); font-size:11px; }
.fx .traits .rare{ background:#fbe7cf; }
@media (max-width:760px){
  #fx-roster.on{ grid-template-columns:1fr; grid-template-rows:auto 52dvh auto; overflow:auto; }
  #fx-roster .list{ flex-direction:row; border-right:0; border-bottom:3px solid var(--ink); padding:10px 64px 10px 10px; }
  #fx-roster .list button{ width:64px; height:72px; }
  #fx-roster .page{ padding:16px 18px calc(30px + var(--sab)); overflow:visible; }
}

/* ── the face-off: your band against theirs, a split and a stamp ── */
#fx-vs{ background:var(--ink); }
#fx-vs .side{ position:absolute; top:0; bottom:0; width:58%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:17dvh; }
#fx-vs .l{ left:0; background:var(--paper); clip-path:polygon(0 0,100% 0,72% 100%,0 100%); }
#fx-vs .r{ right:0; background:#2a231c; clip-path:polygon(28% 0,100% 0,100% 100%,0 100%); }
#fx-vs .team{ display:flex; align-items:flex-end; position:relative; }
#fx-vs .team > *{ margin:0 -1.2vw; }
#fx-vs .l .team{ margin-right:14%; } #fx-vs .r .team{ margin-left:14%; }
#fx-vs .name{ position:absolute; top:calc(9dvh + var(--sat)); font-size:clamp(28px,4.4vw,62px); line-height:.9; max-width:40vw; }
#fx-vs .l .name{ left:5vw; } #fx-vs .r .name{ right:5vw; color:#fff; text-align:right; }
#fx-vs .name small{ display:block; font:700 12px Inter,sans-serif; letter-spacing:.24em; color:var(--gold); margin-bottom:8px; }
#fx-vs .stamp{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-8deg); font-size:clamp(90px,16vw,210px); color:var(--gold);
  -webkit-text-stroke:5px var(--ink); text-shadow:8px 8px 0 var(--ink); z-index:4; pointer-events:none; }
#fx-vs .foot{ position:absolute; left:0; right:0; bottom:calc(5dvh + var(--sab)); display:flex; justify-content:center; gap:10px; z-index:5; }
#fx-vs .foot .gold{ height:60px; font-size:22px; padding:0 44px; box-shadow:6px 6px 0 var(--white); }
#fx-vs .foot .ghost{ height:48px; font-size:15px; align-self:center; }
#fx-vs .sets{ position:absolute; left:4vw; bottom:calc(5dvh + var(--sab)); display:flex; flex-direction:column; align-items:flex-start; gap:6px; z-index:5; }
/* an upright phone: one column, theirs on top, the stamp, yours below, then the buttons */
@media (max-aspect-ratio:3/4){
  #fx-vs.on{ display:flex; flex-direction:column; }
  #fx-vs .side{ position:relative; top:auto; bottom:auto; left:auto; right:auto; width:100%; flex:1 1 0; min-height:0; clip-path:none;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 0 12px; }
  #fx-vs .r{ order:1; padding-top:calc(10px + var(--sat)); }
  #fx-vs .l{ order:3; justify-content:flex-start; padding:26px 0 6px; }
  #fx-vs .l .team{ order:1; } #fx-vs .l .name{ order:2; }
  #fx-vs .l .team, #fx-vs .r .team{ margin:0; }
  #fx-vs .team > *{ margin:0 -1.5vw; }
  #fx-vs .name, #fx-vs .l .name, #fx-vs .r .name{ position:static; max-width:none; text-align:center; font-size:clamp(24px,8vw,38px); margin:6px 12px; }
  #fx-vs .r .name{ margin-bottom:auto; }
  #fx-vs .stamp{ position:relative; order:2; left:auto; top:auto; transform:rotate(-8deg); align-self:center; margin:-38px 0; font-size:clamp(76px,24vw,120px); line-height:.8; }
  #fx-vs .sets{ position:static; order:4; align-items:center; padding:0 12px 10px; background:var(--paper); }
  #fx-vs .foot{ position:static; order:5; padding:0 0 calc(16px + var(--sab)); background:var(--paper); }
}

/* ── the results ── */
#fx-results{ overflow:auto; }
#fx-results.on{ display:grid; grid-template-columns:1.25fr 1fr; align-content:start; }
#fx-results .top{ grid-column:1 / -1; text-align:center; padding:calc(30px + var(--sat)) 12px 6px; }
#fx-results .word{ font-size:clamp(64px,11vw,160px); line-height:.8; color:var(--gold); -webkit-text-stroke:4px var(--ink); text-shadow:8px 8px 0 var(--ink); display:inline-block; }
#fx-results .word.lost{ color:var(--red); }
#fx-results .top p{ margin:14px 0 0; color:var(--ink2); font-weight:600; }
#fx-results .col{ padding:18px 26px; }
#fx-results h3{ margin:0 0 10px; font:900 14px Archivo,sans-serif; letter-spacing:.14em; }
.fx .pr{ display:grid; grid-template-columns:62px 1fr auto; gap:12px; align-items:center; border:2px solid var(--ink); border-radius:16px; padding:8px 12px; background:var(--white); margin-bottom:9px; position:relative; }
.fx .pr .face{ width:62px; height:62px; overflow:hidden; border-radius:12px; background:var(--paper2); border:2px solid var(--ink); }
.fx .pr .face img{ display:block; width:190%; height:auto; margin:-3px 0 0 -45%; }        /* head and shoulders from the full body */
.fx .pr .nm{ font:900 17px Archivo,sans-serif; display:flex; gap:8px; align-items:center; } .fx .pr small{ color:var(--ink2); font-size:12px; }
.fx .pr .xp{ font:900 18px Archivo,sans-serif; color:var(--gold); -webkit-text-stroke:1px var(--ink); }
.fx .pr .up{ position:absolute; right:-8px; top:-12px; background:var(--gold); border:2px solid var(--ink); border-radius:999px; padding:2px 10px; font:900 12px Archivo,sans-serif;
  transform:rotate(6deg) scale(0); transition:transform .35s cubic-bezier(.3,1.8,.5,1); } .fx .pr .up.on{ transform:rotate(6deg) scale(1); }
.fx .tally{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.fx .tal{ border:2px solid var(--ink); border-radius:16px; padding:10px 14px; background:var(--white); }
.fx .tal small{ display:block; font:700 10.5px Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2); }
.fx .tal b{ font:900 34px Archivo,sans-serif; } .fx .tal .rk{ display:flex; align-items:baseline; gap:8px; } .fx .tal .rk i{ font-style:normal; font:900 16px Archivo,sans-serif; }
.fx .mis{ display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:center; border:2px solid var(--ink); border-radius:12px; padding:7px 10px; margin-bottom:6px; background:var(--white); font-size:13px; }
.fx .mis .box{ width:20px; height:20px; border:2px solid var(--ink); border-radius:6px; display:grid; place-items:center; font:900 14px Archivo; }
.fx .mis.done .box{ background:var(--gold); } .fx .mis.done{ background:#f7efdc; }
.fx .note2{ font-size:12px; color:var(--ink2); margin-top:10px; }
#fx-results .acts{ grid-column:1 / -1; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:4px 12px calc(34px + var(--sab)); }
@media (max-width:760px){ #fx-results.on{ grid-template-columns:1fr; } #fx-results .col{ padding:10px 16px; } }

/* ── the share card's sheet, over the results ── */
.fx .fx-card{ position:fixed; inset:0; z-index:45; background:rgba(28,23,18,.62); display:grid; place-items:center; padding:16px; overflow:auto; }
.fx .fx-card .box{ position:relative; width:min(900px,100%); background:var(--white); border:3px solid var(--ink); border-radius:22px; padding:14px; box-shadow:10px 10px 0 var(--ink); }
.fx .fx-card img{ display:block; width:100%; height:auto; border-radius:12px; border:2px solid var(--paper2); }
.fx .fx-card .row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.fx .fx-card .row .btn{ height:48px; font-size:16px; padding:0 22px; display:inline-grid; place-items:center; text-decoration:none; }
.fx .fx-card p{ margin:8px 0 0; text-align:center; color:var(--ink2); font-size:12.5px; }
.fx .fx-card p:empty{ display:none; }
.fx .fx-card .link{ display:block; width:100%; box-sizing:border-box; margin-top:10px; padding:9px 12px; font:600 13px Inter,sans-serif; color:var(--ink); background:var(--paper2, #f4efe3); border:2px solid var(--ink); border-radius:12px; text-align:center; }   /* the card's link, to long-press and copy where Copy link cannot */
.fx .fx-card .x{ position:absolute; right:-12px; top:-14px; }
/* a character to post (27 Sep): its video, every move, stickers */
.fx .party .sharechar{ margin-top:10px; }
.fx .fx-card.charshare .box{ width:min(520px,100%); }
.fx .fx-card.charshare video{ display:block; width:100%; aspect-ratio:1; border-radius:12px; border:2px solid var(--paper2); background:#213a33; }
.fx .fx-card.charshare .k{ margin:14px 0 0; text-align:center; font:900 11px Archivo,sans-serif; letter-spacing:.2em; color:var(--ink2); }
.fx .fx-card.charshare .row.moves{ margin-top:8px; }
.fx .fx-card.charshare .row.moves .btn.sm{ height:36px; font-size:13px; padding:0 14px; }
.fx .fx-card.charshare .wait{ padding:40px 10px; text-align:center; }

/* ── PHONES (25 Sep): nothing cut off, the main button always in reach ── */
@media (max-width:760px){
  /* the results: its buttons pinned to the bottom while the rest scrolls behind */
  #fx-results .acts{ position:sticky; bottom:0; z-index:2; background:linear-gradient(to top, var(--paper) 72%, rgba(239,233,219,0)); padding:18px 12px calc(14px + var(--sab)); margin-top:8px; }
  /* the roster: the row of piece tabs keeps its height and scrolls sideways */
  #fx-roster.on{ grid-template-rows:auto 44dvh auto; }
  #fx-roster .list{ min-height:94px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  #fx-roster .list::-webkit-scrollbar{ display:none; }
  /* nothing wider than the phone: a grid column never grows to fit a giant word */
  #fx-results.on{ grid-template-columns:minmax(0,1fr); overflow-x:hidden; }
  #fx-results .word{ font-size:clamp(40px,14.5vw,160px); -webkit-text-stroke:3px var(--ink); text-shadow:5px 5px 0 var(--ink); }
  #fx-results .top p{ font-size:13px; padding:0 8px; }
  .fx{ overflow-x:hidden; }
}

/* ══ 26 SEP: THE GAME'S OWN TABS ════════════════════════════════════════════════════════════
   Band and Season are screens of their own with the bar at the bottom (#nav, raid.html) over them,
   so everything here leaves the bar its room. */
#fx-title .go .note{ flex-basis:100%; text-align:center; margin:4px 0 0; color:var(--ink2); font:600 13px Inter,sans-serif; }

/* ── the Band: the roster book's layout, with who raids, who is still being made, and a door to recruit ── */
#fx-band.on{ display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,640px); padding-bottom:calc(78px + var(--sab)); }
#fx-band .list{ border-right:3px solid var(--ink); background:var(--white); overflow:auto; padding:calc(64px + var(--sat)) 10px 20px; display:flex; flex-direction:column; gap:10px; }
#fx-band .list button{ border:2px solid var(--ink); border-radius:14px; background:var(--paper2); height:84px; padding:0; overflow:hidden; position:relative; flex:none; }
#fx-band .list button img{ width:100%; height:190%; object-fit:cover; object-position:50% 4%; }
#fx-band .list button.wait img{ height:100%; object-position:50% 30%; filter:grayscale(.7) opacity(.7); }
#fx-band .list button.on{ outline:4px solid var(--gold); outline-offset:-3px; }
#fx-band .list button span{ position:absolute; left:6px; bottom:4px; font:900 11px Archivo,sans-serif; color:#fff; text-shadow:0 1px 3px #000; }
#fx-band .list button em{ position:absolute; right:4px; top:4px; font:900 8.5px Inter,sans-serif; font-style:normal; letter-spacing:.06em; border-radius:6px; padding:1px 5px; background:var(--gold); color:var(--ink); border:1.5px solid var(--ink); }
#fx-band .list button.wait em{ background:var(--white); }
#fx-band .list button.add{ border-style:dashed; background:var(--white); display:grid; place-items:center; align-content:center; gap:0; }
#fx-band .list button.add b{ font-size:34px; line-height:.9; } #fx-band .list button.add span{ position:static; color:var(--ink); text-shadow:none; }
#fx-band .hero{ position:relative; overflow:hidden; background:linear-gradient(transparent 70%, rgba(28,23,18,.06) 70%); }
#fx-band .ghostnum{ position:absolute; left:3vw; top:calc(62px + var(--sat)); font-size:clamp(90px,14vw,210px); line-height:.8; color:transparent; -webkit-text-stroke:2px rgba(28,23,18,.16); }
#fx-band .stand{ position:absolute; left:50%; top:52%; transform:translate(-50%,-46%); }
#fx-band .stand::after{ content:''; position:absolute; left:50%; bottom:-26px; width:min(300px,80%); min-width:220px; height:62px; transform:translateX(-50%); z-index:-1;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); background:rgba(106,95,82,.22); }
#fx-band .stand img.pend{ border-radius:24px; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); }
#fx-band .page{ padding:calc(70px + var(--sat)) 30px 30px 10px; overflow:auto; }
#fx-band h2{ margin:4px 0 0; font-size:clamp(34px,4.2vw,58px); line-height:.9; }
#fx-band .row{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.fx .k{ font:900 12px Archivo,sans-serif; letter-spacing:.24em; color:var(--gold); }
.fx .lede{ color:var(--ink2); font-size:15px; margin:10px 0; max-width:52ch; }
.fx a.btn{ display:inline-grid; place-items:center; text-decoration:none; }
.fx .chip.wait{ background:var(--paper2); }
#fx-band .party{ display:grid; gap:6px; margin:4px 0 16px; justify-items:start; }
#fx-band .party .btn{ height:48px; font-size:17px; padding:0 24px; }
#fx-band .party small{ color:var(--ink2); font-size:12.5px; } #fx-band .party small.bad{ color:var(--red); font-weight:700; }
#fx-band .reveal{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--ink); color:#fff; border-radius:18px; padding:10px 10px 10px 16px; margin-bottom:12px; box-shadow:5px 5px 0 var(--gold); }
#fx-band .reveal b{ font-size:17px; letter-spacing:.04em; } #fx-band .reveal .btn{ height:44px; font-size:16px; padding:0 22px; }
@media (max-width:760px){
  #fx-band.on{ grid-template-columns:1fr; grid-template-rows:auto 40dvh auto; overflow:auto; }
  #fx-band .list{ flex-direction:row; border-right:0; border-bottom:3px solid var(--ink); padding:calc(62px + var(--sat)) 12px 10px; min-height:94px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  #fx-band .list::-webkit-scrollbar{ display:none; }
  #fx-band .list button{ width:64px; height:72px; }
  #fx-band .ghostnum{ top:10px; }
  #fx-band .page{ padding:14px 18px 30px; overflow:visible; }
}

/* ── the Season: one readable column ── */
#fx-season{ overflow:auto; }
#fx-season .wrap{ max-width:760px; margin:0 auto; padding:calc(70px + var(--sat)) 18px calc(100px + var(--sab)); }
#fx-season .head h1{ margin:6px 0 4px; font-size:clamp(46px,9vw,92px); line-height:.85; text-shadow:5px 5px 0 var(--gold); }
#fx-season .head p{ color:var(--ink2); margin:8px 0 16px; font-weight:600; }
#fx-season .tally{ grid-template-columns:repeat(4,1fr); }
#fx-season h3{ margin:22px 0 10px; font:900 14px Archivo,sans-serif; letter-spacing:.14em; }
#fx-season .fine{ color:var(--ink2); font-size:12.5px; margin:6px 0 0; }
#fx-season .board, #fx-season .hist{ display:grid; gap:6px; }
#fx-season .br, #fx-season .hr{ display:grid; grid-template-columns:34px 1fr auto auto; gap:10px; align-items:center; border:2px solid var(--ink); border-radius:12px; padding:7px 12px; background:var(--white); }
#fx-season .br b{ font-size:18px; } #fx-season .br small{ color:var(--ink2); font-size:12px; } #fx-season .br em{ font-style:normal; font-size:18px; }
#fx-season .br.me{ background:#fbe7cf; box-shadow:4px 4px 0 var(--gold); }
#fx-season .hr{ grid-template-columns:96px 1fr auto; } #fx-season .hr b{ font-size:14px; } #fx-season .hr em{ font-style:normal; font-weight:700; font-size:13px; color:var(--ink2); }
#fx-season .hr.won b{ color:#2f7d3a; } #fx-season .hr.lost b{ color:var(--red); }
#fx-season .rules{ margin:0; padding-left:18px; color:var(--ink2); font-size:14px; line-height:1.5; } #fx-season .rules li{ margin-bottom:6px; }
@media (max-width:600px){ #fx-season .tally{ grid-template-columns:1fr 1fr; } #fx-season .br{ grid-template-columns:28px 1fr auto; } #fx-season .br small{ display:none; } }

/* rules v2 (26 Sep): the stat line on the roster card, and each piece's move under the face-off */
.fx .statsays{ margin:-6px 0 16px; font:500 13px/1.45 Inter,sans-serif; color:#5a5046; }
.fx .fomoves{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
/* under the band itself, so it follows the band wherever the screen puts it */
#fx-vs .team .fomoves{ position:absolute; top:100%; left:-4vw; right:-4vw; margin-top:10px; z-index:3; }
@media (max-aspect-ratio:3/4){ #fx-vs .team .fomoves{ margin-top:6px; gap:4px; flex-wrap:nowrap; left:-6vw; right:-6vw; } #fx-vs .fomoves span{ font-size:10px; padding:4px 6px; border-left-width:6px; } #fx-vs .l .name{ margin-top:34px; } #fx-vs .r .team{ margin-bottom:30px; } }
.fx .fomoves span{ font:700 11px/1 Inter,sans-serif; background:var(--white); color:var(--ink); border:2px solid var(--ink); border-left:8px solid var(--mv, var(--ink)); border-radius:10px; padding:5px 9px; white-space:nowrap; }
.fx .fomoves b{ font-weight:900; margin-right:2px; }

/* 27 Sep audit: on an upright phone the stamp sat on the defenders' move chips; give the chips room above it */
@media (max-aspect-ratio:3/4){ #fx-vs .r .team{ margin-bottom:46px; } #fx-vs .stamp{ margin:-22px 0 -30px; font-size:clamp(64px,20vw,100px); z-index:2; } }