/* Heart of the Cards: Play (GOAT duel). Builds on /assets/site.css tokens. */
:root{
  --felt-a:#E7EDF6; --felt-b:#D5DFEC; --felt-c:#C4D1E3; --felt-opp:rgba(150,90,140,.07);
  --zline:rgba(27,34,51,.16); --zfill:rgba(255,255,255,.35); --zlabel:rgba(27,34,51,.38);
  --plate:rgba(255,255,255,.82); --plate-line:rgba(27,34,51,.1);
  --sheet:rgba(255,255,255,.92); --sheet-line:rgba(27,34,51,.1);
  --hl:#D4962A; --hl-soft:rgba(212,150,42,.35); --target:#E0505A; --ok:#2EA06B;
  --t-move:.42s; --ease:cubic-bezier(.2,.8,.2,1);
  --hdr:68px;
}
:root[data-theme="dark"]{
  --felt-a:#1A2A47; --felt-b:#0F1A2E; --felt-c:#070C18; --felt-opp:rgba(170,90,150,.06);
  --zline:rgba(233,180,90,.2); --zfill:rgba(255,255,255,.022); --zlabel:rgba(233,180,90,.42);
  --plate:rgba(14,20,36,.78); --plate-line:rgba(255,255,255,.08);
  --sheet:rgba(16,22,38,.9); --sheet-line:rgba(255,255,255,.09);
  --hl:#E9B45A; --hl-soft:rgba(233,180,90,.38); --target:#FF6B74; --ok:#6FD3A0;
}
body.playpage{min-height:100dvh}
body.playpage.in-duel{overflow:hidden;height:100dvh}
body.in-duel .top .wrap{height:52px}
body.in-duel{--hdr:52px}
[hidden]{display:none!important}

/* ================= lobby (Oct 2026: mode, two deck pickers, options + Start; tools behind small buttons) ================= */
.lobby{padding-top:18px;padding-bottom:48px}
.lb-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.lb-top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.lb-txt{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0;flex:1}
.lb-status{display:flex;align-items:center;gap:8px;margin:0;font-size:.84rem;color:var(--muted)}
.lb-status i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold);animation:pulse 1.4s infinite;flex:none}
.lb-status.ok i{background:var(--good);animation:none}
.lb-status.bad{color:var(--red)}
.lb-status.bad i{background:var(--red);animation:none}
#lobby .lb-txt .pwa-install{margin:0;min-height:36px;padding:6px 12px;font-size:.74rem}
#lobby .lb-txt .pwa-tip{flex-basis:100%;margin:0}
.lb-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.lb-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;font:600 .8rem/1 var(--font);color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;background:var(--surface);white-space:nowrap;cursor:pointer}
.lb-link:hover{border-color:var(--gold)}
.lb-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.lb-txt .lb-sound{width:36px;height:36px;border-radius:999px}
/* mode: one segmented control */
.modes{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.mode{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 20px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 .95rem/1 var(--font);cursor:pointer;white-space:nowrap}
.mode svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mode:hover{color:var(--ink)}
.mode[aria-checked="true"]{background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233}
/* decks: yours and the computer's side by side */
.lb-decks{margin-top:16px}
.players{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pl{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow);min-width:0}
.pname{display:flex;align-items:center;gap:10px;min-height:42px;margin-bottom:8px}
.pname span{font:600 .7rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.cpuhead{justify-content:space-between}
.cpuhead .seg{box-shadow:none;padding:3px}
.cpuhead .seg button{padding:7px 13px;font-size:.84rem}
.dsel{position:relative;display:block;height:214px;padding:14px 18px;border-radius:16px;background:var(--surface-2);margin-bottom:12px;overflow:hidden}
.dsel:empty{display:none}
.dsel:has(details[open]){height:auto;min-height:214px}
.dsel .dart{position:absolute;inset:0;background-size:cover;background-position:center 28%;background-repeat:no-repeat}
.dsel .dart.full{background-position:center 30%}
.dsel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,19,34,.97) 32%,rgba(13,19,34,.72) 58%,rgba(13,19,34,.25))}
.dsinfo{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-width:0;max-width:66%}
.dsinfo b{font:500 1.7rem/1.05 var(--serif);color:#fff;overflow-wrap:anywhere}
.dsinfo .dpitch{margin:0;font-size:.84rem;line-height:1.4;color:#C9CFDC;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dkeys.kcs{gap:4px;margin-top:2px;}
.dkeys.kcs .kc{font:500 .72rem/1.2 var(--font);background:rgba(255,255,255,.1);border:0;color:#E9E4DA;padding:5px 10px;border-radius:999px;box-shadow:none;text-decoration:none}
.dkeys.kcs .kc:hover,.dkeys.kcs .kc:focus-visible{background:rgba(255,255,255,.18);outline:none}
.dtabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.dtabs button{flex:none;padding:6px 0 10px;border:0;background:none;font:600 .82rem/1 var(--font);color:var(--muted);cursor:pointer;border-radius:0;white-space:nowrap}
.dtabs button i{font-style:normal;opacity:.7;margin-left:2px}
.dtabs button[aria-selected="true"]{color:var(--ink);box-shadow:0 2px 0 var(--gold)}
.dtabs button:hover{color:var(--ink)}
.dtabs:empty{display:none}
.dsinfo small{font:600 .64rem/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.dmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dmeta:empty{display:none}
.dmeta em{font:600 .7rem/1 var(--font);font-style:normal;padding:4px 8px;border-radius:999px;white-space:nowrap}
.dmeta .dchip{color:var(--ink);background:color-mix(in srgb,var(--gold) 22%,transparent);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.dmeta .dlvl{color:var(--muted);border:1px solid var(--line)}
.dmeta .dlvl.easy{color:var(--good)}.dmeta .dlvl.hard{color:var(--red)}
.dabout summary{display:inline-flex;align-items:center;gap:6px;min-height:28px;font:600 .76rem/1 var(--font);color:var(--muted);cursor:pointer;list-style:none;border-radius:6px}
.dabout summary::-webkit-details-marker{display:none}
.dabout summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.dabout[open] summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.dabout summary:hover{color:var(--ink)}
.dguide{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.dsinfo p{margin:0;font-size:.84rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.dsinfo p.dsize{font:600 .64rem/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.dsinfo p i,.dkeys i{display:block;font:700 .62rem/1.3 var(--font);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.75;margin-bottom:1px}
.dkeys{display:flex;flex-wrap:wrap;gap:5px}
.dkeys i{flex-basis:100%;margin:0}
.dprob{margin:0;padding-left:16px;color:var(--red);font-size:.82rem}
.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px 10px;max-height:300px;overflow-y:auto;overflow-x:hidden;padding:6px 8px 8px 4px;margin:-6px -4px -8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.deck{position:relative;width:auto;text-align:center;padding:0;border:0;background:none;cursor:pointer;transition:transform .2s;min-width:0;align-self:start}
.deck .dart{display:block;aspect-ratio:1;border-radius:14px;border:1px solid var(--line);background-size:136% auto;background-position:50% 38%;background-repeat:no-repeat;box-shadow:0 14px 30px -14px #000;filter:saturate(.9) brightness(.9);transition:filter .2s,box-shadow .2s,transform .2s}
.deck .dname{margin-top:7px;font:500 .82rem/1.15 var(--serif);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.deck small{display:block;margin-top:2px;font:500 .62rem/1 var(--font);color:var(--muted);text-transform:capitalize}
.deck small:empty{display:none}
.deck:hover .dart{filter:none;transform:translateY(-3px)}
.deck[aria-checked="true"] .dart{filter:none;box-shadow:0 0 0 2px var(--bg),0 0 0 2.5px var(--gold);transform:translateY(-3px)}
.deck:focus-visible{outline:none}.deck:focus-visible .dart{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--teal)}
/* options + Start in one row */
.lb-step{margin-top:16px}
.tossrow{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.tossrow .seg{box-shadow:none;padding:3px}
.tossrow .seg button{padding:8px 14px;font-size:.86rem}
.tossrow #startBtn{margin-left:auto}
.btn.big{padding:17px 30px;font-size:.9rem;background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233;box-shadow:0 10px 26px -10px rgba(212,150,42,.8)}
.lb-note{margin-top:12px}
/* online: the name field sits with the room */
.lb-name{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lb-name span{font:600 .7rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);white-space:nowrap}
.lb-name input{width:min(240px,100%);min-height:40px;font:600 1rem/1.2 var(--font);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.lb-name input:focus{outline:none;border-color:var(--gold)}
@media (max-width:860px){.players{grid-template-columns:1fr}}
@media (max-width:520px){.decks{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;max-height:260px}.dsel{height:176px;padding:14px}.dsinfo{max-width:80%}.dsinfo b{font-size:1.4rem}}

/* ================= duel layout ================= */
.duel{position:fixed;left:0;right:0;bottom:0;top:calc(var(--hdr) + env(safe-area-inset-top,0px));display:grid;grid-template-columns:270px minmax(0,1fr) 290px;gap:0;background:var(--felt-c)}
.d-left,.d-right{min-width:0;min-height:0;display:flex;flex-direction:column;background:color-mix(in srgb,var(--bg) 88%,transparent);border-right:1px solid var(--line)}
.d-right{border-right:0;border-left:1px solid var(--line)}
.d-center{position:relative;min-width:0;min-height:0}
.table{position:absolute;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;
  background:
   radial-gradient(ellipse 70% 55% at 50% 50%,color-mix(in srgb,var(--felt-a) 100%,transparent),transparent 72%),
   radial-gradient(ellipse at 50% 50%,var(--felt-b),var(--felt-c) 100%);}
.table::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.table .emblem{position:absolute;pointer-events:none;opacity:.07;width:140px;height:140px;transform:translate(-50%,-50%)}
.table .oppband{position:absolute;pointer-events:none;background:var(--felt-opp);border-radius:22px}

/* zones */
.z{position:absolute;border-radius:9px;border:1px solid var(--zline);background:var(--zfill);box-shadow:inset 0 0 18px rgba(0,0,0,.12);transition:box-shadow .2s,border-color .2s,background .2s}
.z .zl{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:600 calc(var(--cw) * .1)/1.1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--zlabel);pointer-events:none}
.z.pile{cursor:pointer}
.z .cnt{position:absolute;right:-6px;bottom:-7px;z-index:400;min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:grid;place-items:center;font:700 .7rem/1 var(--font);color:#1B2233;background:linear-gradient(135deg,#F6CD6B,#D4962A);box-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none}
.z .cnt:empty{display:none}
.z.drop{border-color:var(--hl);background:color-mix(in srgb,var(--hl) 14%,transparent);box-shadow:0 0 0 1px var(--hl),0 0 22px -2px var(--hl-soft),inset 0 0 18px rgba(0,0,0,.1)}
.z.drop.over{background:color-mix(in srgb,var(--hl) 30%,transparent)}
.z.pick{border-color:var(--hl);cursor:pointer;animation:zpulse 1.2s ease-in-out infinite}
.z.pick.on{background:color-mix(in srgb,var(--hl) 40%,transparent)}
@keyframes zpulse{50%{box-shadow:0 0 0 2px var(--hl),0 0 26px 0 var(--hl-soft)}}
.z.glowpile{box-shadow:0 0 0 2px var(--hl),0 0 20px var(--hl-soft)}
.deckstack{position:absolute;inset:0;border-radius:6px;background:#2a1a0c url(/img/back.jpg) center/cover;box-shadow:1px 1px 0 #6b4a22,2px 2px 0 #4a3216,3px 3px 0 #6b4a22,4px 4px 0 #3a260f,0 10px 18px -6px rgba(0,0,0,.7)}
.deckstack.thin{box-shadow:1px 1px 0 #4a3216,0 6px 12px -6px rgba(0,0,0,.7)}

/* cards */
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);will-change:transform;transition:transform var(--t-move) var(--ease),opacity .3s,filter .3s;transform-origin:50% 50%;z-index:10;cursor:default}
.card.notrans,.card.notrans .in{transition:none!important}
.card .in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.card.fd .in{transform:rotateY(180deg)}
.card .f{position:absolute;inset:0;border-radius:calc(var(--cw) * .05);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 4px rgba(0,0,0,.35),0 8px 16px -8px rgba(0,0,0,.6);background:#1b1b22}
.card .f img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.card .b{transform:rotateY(180deg);background:#2a1a0c url(/img/back.jpg) center/cover}
.card .peek{position:absolute;right:5%;bottom:4%;width:46%;border-radius:3px;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(0,0,0,.6);opacity:.95;pointer-events:none}
.card .ctr{position:absolute;left:4%;top:4%;z-index:3;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#5B3FD0;color:#fff;font:700 .66rem/20px var(--font);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.card .rev{position:absolute;left:50%;top:-8px;transform:translateX(-50%);z-index:3;font:700 .52rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;background:var(--hl);color:#1B2233;padding:3px 5px;border-radius:4px;white-space:nowrap}
.card.can{cursor:pointer}
.card.can .f{box-shadow:0 0 0 2px var(--hl),0 0 18px 2px var(--hl-soft),0 8px 16px -8px rgba(0,0,0,.6)}
.card.can::after{content:"";position:absolute;inset:-3px;border-radius:calc(var(--cw) * .07);pointer-events:none;box-shadow:0 0 14px 2px var(--hl-soft);animation:canpulse 1.6s ease-in-out infinite}
@keyframes canpulse{0%,100%{opacity:.35}50%{opacity:1}}
.card.pick{cursor:pointer}
.card.pick .f{box-shadow:0 0 0 2px var(--target),0 0 20px 3px color-mix(in srgb,var(--target) 45%,transparent)}
.card.pick.on .f{box-shadow:0 0 0 3px var(--ok),0 0 24px 4px color-mix(in srgb,var(--ok) 55%,transparent)}
.card.pick.on::before{content:"\2713";position:absolute;right:-8px;top:-8px;z-index:5;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;font:700 .8rem/1 var(--font);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.card.hand{cursor:pointer;touch-action:none;display:block;margin:0;min-height:0} /* reset site.css .hand (practice page: flex, margin-top 6px, min-height 1.15 card): it pushed hand cards 6px down and made them 15% taller */
.card.hand.me:hover:not(.dragging){z-index:300!important}
.card.dragging{transition:none!important;z-index:1000!important;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.card.focus .f{outline:2px solid #fff;outline-offset:2px}
.card.tgt::after{content:"";position:absolute;inset:-10%;border-radius:50%;border:2px solid var(--target);animation:reticle .7s ease-out 2;pointer-events:none}
@keyframes reticle{0%{transform:scale(1.5);opacity:0}60%{opacity:1}100%{transform:scale(.9);opacity:0}}
.card.act .f{animation:actglow 1s ease-out}
@keyframes actglow{0%{box-shadow:0 0 0 0 var(--hl),0 0 0 0 var(--hl-soft)}30%{box-shadow:0 0 0 3px var(--hl),0 0 34px 10px var(--hl-soft)}100%{box-shadow:0 0 0 0 transparent,0 8px 16px -8px rgba(0,0,0,.6)}}
.card.solving .f{box-shadow:0 0 0 3px #fff,0 0 30px 8px var(--hl-soft)}
.card.dim{filter:brightness(.55) saturate(.6)}

/* tokens and placeholders */
.tokface{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:8%;color:#fff;text-align:center;background:radial-gradient(circle at 50% 35%,#A9B4C6,#5C6678 70%);border:2px solid #2E3442;border-radius:inherit}
.tokface.spell{background:radial-gradient(circle at 50% 35%,#4FC3B0,#1D7A6C 70%)}
.tokface.trap{background:radial-gradient(circle at 50% 35%,#D46BA6,#8A2E62 70%)}
.tokface.effect{background:radial-gradient(circle at 50% 35%,#E6A35C,#9A5A1E 70%)}
.tokface.normal{background:radial-gradient(circle at 50% 35%,#E8D28E,#A8893A 70%)}
.tokface.fusion{background:radial-gradient(circle at 50% 35%,#A684D6,#5B3C8E 70%)}
.tokface b{font:700 calc(var(--cw) * .12)/1.1 var(--font)}
.tokface span{font:700 calc(var(--cw) * .11)/1 var(--font);opacity:.9}
.tokface svg{width:46%;margin:0 auto;opacity:.8;fill:#fff}

/* monster stats */
.stat{position:absolute;z-index:250;transform:translate(-50%,0);pointer-events:none;display:flex;gap:1px;font:700 calc(var(--cw) * .13)/1 var(--font);font-variant-numeric:tabular-nums;border-radius:999px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.5);white-space:nowrap;transition:opacity .25s}
.stat span{padding:3px 6px;background:rgba(10,14,26,.86);color:#F3EEE4}
.stat span.on{background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233}
.stat span.up{color:#7CE3A8}.stat span.down{color:#FF8A8A}
.stat span.on.up{color:#0F5A33}.stat span.on.down{color:#8A1414}

/* LP plates */
.plate{position:absolute;z-index:320;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:999px;background:var(--plate);border:1px solid var(--plate-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px -12px rgba(0,0,0,.6);transition:box-shadow .3s}
.plate .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 1.1rem/1 var(--serif);color:#1B2233;background:linear-gradient(135deg,#F6CD6B,#D4962A);flex:none}
.plate.opp .av{background:linear-gradient(135deg,#C9B6F0,#7C62C9);color:#fff}
.plate .nm{display:flex;flex-direction:column;min-width:0}
.plate .nm b{font:600 1rem/1.1 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.plate .nm small{font:600 .62rem/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plate .lp{font:700 1.45rem/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink);margin-left:6px;letter-spacing:-.01em;transition:color .3s}
.plate .lp::before{content:"LP";font-size:.55rem;letter-spacing:.12em;color:var(--hl);margin-right:5px;vertical-align:.45em}
.plate.hit{animation:hit .55s}
.plate.hit .lp{color:var(--red)}
.plate.heal .lp{color:var(--good)}
.plate.turn{box-shadow:0 0 0 1.5px var(--hl),0 10px 30px -12px rgba(0,0,0,.6),0 0 24px -4px var(--hl-soft)}
@keyframes hit{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.dmgfloat{position:absolute;z-index:900;white-space:nowrap;pointer-events:none;font:700 1.8rem/1 var(--serif);color:var(--red);text-shadow:0 2px 12px rgba(0,0,0,.6);animation:floatup 1.2s var(--ease) forwards}
.dmgfloat.heal{color:var(--good)}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
.redflash{position:absolute;inset:0;z-index:850;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(255,40,40,.35),transparent 60%);animation:rf .6s forwards}
.redflash.top{background:radial-gradient(ellipse at 50% 0%,rgba(255,40,40,.35),transparent 60%)}
@keyframes rf{from{opacity:1}to{opacity:0}}

/* phase bar */
.phasebar{position:absolute;z-index:330;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%)}
.turnchip{font:600 .66rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 10px;white-space:nowrap}
.turnchip b{color:var(--hl);font-weight:700}
.phases{display:flex;gap:3px;padding:4px;border-radius:999px;background:var(--plate);border:1px solid var(--plate-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.ph{position:relative;border:0;background:transparent;color:var(--faint);font:700 .7rem/1 var(--font);letter-spacing:.08em;padding:8px 11px;border-radius:999px;cursor:default;white-space:nowrap;transition:color .2s,background .2s}
.ph .long{display:none}
.ph.cur{background:var(--ink);color:var(--bg)}
.ph.go{color:var(--ink);cursor:pointer;background:color-mix(in srgb,var(--hl) 22%,transparent);box-shadow:inset 0 0 0 1px var(--hl)}
.ph.go:hover{background:var(--hl);color:#1B2233}
.ph.past{color:color-mix(in srgb,var(--faint) 70%,transparent)}
.endturn{border:0;cursor:pointer;font:700 .7rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233;box-shadow:0 6px 16px -6px rgba(212,150,42,.8);white-space:nowrap}
.endturn[disabled]{display:none}
.statusline{position:absolute;z-index:330;transform:translate(-50%,0);font:500 .8rem/1.2 var(--font);color:var(--muted);white-space:nowrap;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.statusline b{color:var(--ink)}

/* chain stack */
.chainstack{position:absolute;z-index:600;display:flex;flex-direction:column;gap:6px;pointer-events:auto}
.chainstack .ch-title{font:700 .62rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--hl);text-align:center;margin-bottom:2px}
.link{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:12px;background:var(--plate);border:1px solid var(--plate-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 20px -10px rgba(0,0,0,.7);animation:linkin .35s var(--ease);cursor:pointer;max-width:220px}
.link img{width:34px;border-radius:3px;display:block;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.link .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#F6CD6B,#D4962A);color:#1B2233;font:700 .74rem/1 var(--font);flex:none}
.link.opp .n{background:linear-gradient(135deg,#C9B6F0,#7C62C9);color:#fff}
.link span{font:600 .82rem/1.15 var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link.solving{box-shadow:0 0 0 2px var(--hl),0 0 24px -4px var(--hl-soft)}
.link.negated{opacity:.55}
.link.negated span{text-decoration:line-through;text-decoration-color:var(--red)}
.link.out{animation:linkout .3s forwards}
@keyframes linkin{from{opacity:0;transform:translateX(20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes linkout{to{opacity:0;transform:translateX(20px) scale(.9)}}

/* activation splash, turn banner */
.splash{position:absolute;z-index:800;left:50%;top:50%;pointer-events:none;display:flex;align-items:center;gap:18px;transform:translate(-50%,-50%);animation:splash var(--splash,.95s) var(--ease) forwards}
.splash img,.splash .tokwrap{width:calc(var(--cw) * 1.9);max-width:190px;min-width:96px;border-radius:10px;box-shadow:0 0 0 2px var(--hl),0 0 60px 10px var(--hl-soft),0 30px 60px -20px rgba(0,0,0,.8)}
.splash .tokwrap{position:relative;aspect-ratio:240/350;--cw:100px}
.splash{--sa:#E9B45A}
.splash.opp{--sa:#B7A2F2}
.splash .lbl{position:relative;display:flex;flex-direction:column;gap:7px;padding:13px 20px 15px;border-radius:12px;background:linear-gradient(180deg,#17223D,#0A1020);border:1px solid color-mix(in srgb,var(--sa) 40%,transparent);box-shadow:0 24px 48px -20px rgba(0,0,0,.9)}
.splash.opp .lbl{background:linear-gradient(180deg,#211D41,#0D0C1F)}
.splash .lbl::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--sa),transparent)}
.splash .lbl small{font:600 .68rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--sa)}
.splash .lbl b{font:600 clamp(1.35rem,2.8vw,2.1rem)/1.05 var(--serif);color:#F3EEE4;max-width:12em}
.splash .cl{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#F6CD6B,#D4962A);color:#1B2233;font:700 1.2rem/1 var(--font);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.splash.opp .cl{background:linear-gradient(135deg,#C9B6F0,#7C62C9);color:#fff}
@keyframes splash{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}}
/* turn / phase ribbon: solid navy, gold hairlines, crisp serif; the opponent's turn is violet */
.turnbanner{--acc:#E9B45A;--acc2:#F6CD6B;--bms:1200ms;position:absolute;z-index:820;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,18px);padding:12px 24px 13px;color:#F3EEE4;
  background:linear-gradient(180deg,#17223D 0%,#0C1324 55%,#0A1020 100%);box-shadow:0 22px 44px -22px rgba(0,0,0,.9);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  animation:bannerin var(--bms) var(--ease) forwards}
.turnbanner::before,.turnbanner::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,var(--acc) 34%,var(--acc2) 50%,var(--acc) 66%,transparent 90%)}
.turnbanner::before{top:0}.turnbanner::after{bottom:0;opacity:.7}
.turnbanner>*{animation:bannertx var(--bms) var(--ease) both}
.turnbanner b{display:block;font:600 clamp(1.55rem,3.2vw,2.35rem)/1.05 var(--serif);color:#F3EEE4;letter-spacing:-.005em;white-space:nowrap}
.turnbanner b em{font-style:italic;padding-right:.06em;background:linear-gradient(100deg,#C8871F,#F2C462 55%,#D4962A);-webkit-background-clip:text;background-clip:text;color:transparent}
.turnbanner i{width:6px;height:6px;flex:none;transform:rotate(45deg);background:var(--acc);box-shadow:0 0 10px var(--acc)}
.turnbanner small{display:block;font:600 .7rem/1 var(--font);letter-spacing:.26em;text-transform:uppercase;color:var(--acc);white-space:nowrap;font-variant-numeric:lining-nums}
.turnbanner.opp{--acc:#B7A2F2;--acc2:#DCD0FB;background:linear-gradient(180deg,#211D41 0%,#110F26 55%,#0D0C1F 100%)}
.turnbanner.opp b em{background:linear-gradient(100deg,#9077E2,#DCD0FB 55%,#A690EC);-webkit-background-clip:text;background-clip:text}
.turnbanner.phase{padding:8px 24px 9px}
.turnbanner.phase b{font-size:clamp(1.25rem,2.4vw,1.7rem)}
:root[data-theme="light"] .turnbanner b{color:#F3EEE4}
@keyframes bannerin{0%{opacity:0;clip-path:inset(0 50% 0 50%)}20%{opacity:1;clip-path:inset(0 0 0 0)}80%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes bannertx{0%,8%{opacity:0;transform:translateX(-10px)}32%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateX(8px)}}
@keyframes bannerfade{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* attack arrow */
.fx{position:absolute;inset:0;z-index:700;pointer-events:none;overflow:visible}
.fx .arrow{fill:none;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,80,80,.7))}
.fx .arrow.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:drawline .45s var(--ease) forwards}
.fx .head{fill:#FF4D5A;stroke:#FFE1D6;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(255,80,80,.9))}
.fx .ring{fill:none;stroke:#FF6B74;stroke-width:2.5;stroke-dasharray:6 6;filter:drop-shadow(0 0 6px rgba(255,80,80,.8));transform-box:fill-box;transform-origin:center;animation:ringspin 4s linear infinite}
@keyframes ringspin{to{transform:rotate(1turn)}}
@keyframes drawline{to{stroke-dashoffset:0}}
.shard{position:absolute;z-index:750;pointer-events:none;background-size:cover;border-radius:3px;animation:shard .7s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes shard{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.8)}}
.burst{position:absolute;z-index:740;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);animation:burst .7s ease-out forwards}
.burst.sp{background:radial-gradient(circle,rgba(255,220,140,.95),rgba(233,180,90,.4) 35%,transparent 70%)}
.burst.ns{background:radial-gradient(circle,rgba(255,255,255,.8),rgba(160,200,255,.3) 35%,transparent 70%)}
.burst.ban{background:radial-gradient(circle,rgba(200,150,255,.9),rgba(120,70,220,.4) 35%,transparent 70%)}
@keyframes burst{0%{opacity:0;width:20px;height:20px}25%{opacity:1}100%{opacity:0;width:calc(var(--cw) * 3.2);height:calc(var(--cw) * 3.2)}}
.lunge{animation:lunge .5s var(--ease)}

/* prompt sheet (dock inside the table) */
.sheet2{position:absolute;z-index:900;left:50%;bottom:10px;transform:translate(-50%,0);width:min(640px,calc(100% - 20px));max-height:min(50%,440px);display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--sheet-line);border-radius:22px;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 30px 70px -20px rgba(0,0,0,.75);animation:sheetin .32s var(--ease);color:var(--ink)}
.sheet2.min{max-height:60px;overflow:hidden}
.sheet2.min .sh-body,.sheet2.min .sh-foot{display:none}
@keyframes sheetin{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.sh-head{display:flex;align-items:center;gap:12px;padding:12px 16px 8px}
.sh-head .src{width:44px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer;flex:none}
.sh-head .t{flex:1;min-width:0}
.sh-head .t b{display:block;font:600 1.28rem/1.15 var(--serif)}
.sh-head .t span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.sh-min{border:0;background:var(--surface-2);color:var(--muted);width:34px;height:34px;border-radius:50%;cursor:pointer;flex:none;font:700 1rem/1 var(--font)}
.timer{height:3px;margin:0 16px;border-radius:3px;background:color-mix(in srgb,var(--muted) 25%,transparent);overflow:hidden}
.timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),var(--hl));transform-origin:left;animation:timer linear forwards}
@keyframes timer{to{transform:scaleX(0)}}
.sh-body{padding:6px 16px 8px;overflow:auto;min-height:0}
.sh-foot{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:8px 16px 12px;border-top:1px solid var(--sheet-line);flex-wrap:wrap}
.sh-foot .note{margin-right:auto;font-size:.8rem;color:var(--muted)}
.sbtn{border:1px solid var(--sheet-line);background:var(--surface);color:var(--ink);font:700 .76rem/1 var(--font);letter-spacing:.07em;text-transform:uppercase;padding:12px 18px;border-radius:999px;cursor:pointer;white-space:nowrap}
.sbtn.pri{background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233;border-color:transparent;box-shadow:0 6px 16px -8px rgba(212,150,42,.9)}
.sbtn.pri:disabled{opacity:.4;box-shadow:none;cursor:default}
.sbtn:hover:not(:disabled){filter:brightness(1.06)}
.opts{display:grid;gap:8px}
.opt2{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;text-align:left;padding:7px 12px 7px 8px;border-radius:14px;border:1px solid var(--sheet-line);background:color-mix(in srgb,var(--surface) 70%,transparent);cursor:pointer;color:var(--ink)}
.opt2:hover{border-color:var(--hl);background:color-mix(in srgb,var(--hl) 10%,var(--surface))}
.opt2 img{width:34px;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.opt2 b{display:block;font:600 1.05rem/1.2 var(--serif)}
.opt2 small{display:block;font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:2px}
.opt2.plain{grid-template-columns:1fr;text-align:center;font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.pc{position:relative;padding:0;border:0;background:none;cursor:pointer;text-align:center;color:var(--ink)}
.pc .im{position:relative;aspect-ratio:240/350;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s;--cw:86px}
.pc .im img{width:100%;height:100%;object-fit:cover;display:block}
.pc .im.back{background:#2a1a0c url(/img/back.jpg) center/cover}
.pc small{display:block;font:600 .7rem/1.2 var(--font);margin-top:5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc .where{position:absolute;left:4px;top:4px;font:700 .55rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;background:rgba(10,14,26,.8);color:#fff;padding:3px 5px;border-radius:4px}
.pc .val{position:absolute;right:4px;top:4px;font:700 .66rem/1 var(--font);background:var(--hl);color:#1B2233;padding:3px 6px;border-radius:999px}
.pc:hover .im{transform:translateY(-2px)}
.pc.on .im{box-shadow:0 0 0 3px var(--ok),0 0 18px 2px color-mix(in srgb,var(--ok) 50%,transparent)}
.pc.on::after{content:"\2713";position:absolute;right:-4px;top:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;font:700 .8rem/1 var(--font)}
.pc.must .im{box-shadow:0 0 0 3px var(--hl)}
.pc .ord{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--hl);color:#1B2233;font:700 1rem/1 var(--font);box-shadow:0 4px 12px rgba(0,0,0,.5)}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chip2{border:1px solid var(--sheet-line);background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:999px;font:600 .86rem/1 var(--font);cursor:pointer}
.chip2.on{background:var(--hl);color:#1B2233;border-color:transparent}
.posgrid{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:8px 0}
.posbtn{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--sheet-line);background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:16px;padding:14px 18px;cursor:pointer;color:var(--ink);min-width:130px}
.posbtn:hover{border-color:var(--hl)}
.posbtn .pv{width:96px;height:96px;display:grid;place-items:center}
.posbtn .pv div{width:62px;aspect-ratio:240/350;border-radius:4px;background-size:cover;background-position:center;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.posbtn .pv div.def{transform:rotate(90deg)}
.posbtn b{font:600 .95rem/1.2 var(--font)}
.rpsrow{display:flex;gap:16px;justify-content:center;padding:6px 0 4px}
.rpsbtn{display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid var(--sheet-line);background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:20px;padding:16px 22px;cursor:pointer;color:var(--ink);font:600 .95rem/1 var(--font)}
.rpsbtn:hover{border-color:var(--hl);transform:translateY(-2px)}
.rpsbtn span{font-size:2.4rem;line-height:1}
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.cnt-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:6px 0}
.cnt-row img{width:44px;border-radius:3px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:32px;height:32px;border-radius:50%;border:1px solid var(--sheet-line);background:var(--surface);color:var(--ink);font:700 1rem/1 var(--font);cursor:pointer}
.stepper b{min-width:24px;text-align:center;font-variant-numeric:tabular-nums}
.search2{width:100%;font:inherit;padding:11px 16px;border-radius:999px;border:1px solid var(--sheet-line);background:var(--surface);color:var(--ink);margin-bottom:10px}
.sumbar{display:flex;align-items:center;gap:10px;font:600 .9rem/1 var(--font)}
.sumbar b{font-size:1.2rem;color:var(--hl)}
.bigcard{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start}
.bigcard img{width:110px;border-radius:7px;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.bigcard p{font-size:.92rem;line-height:1.5}
.bigcard .q{font:italic 500 1.08rem/1.4 var(--serif);border-left:3px solid var(--hl);padding:4px 0 4px 12px;margin-top:8px;color:var(--ink)}

/* action menu */
.menu{position:absolute;z-index:950;min-width:190px;max-width:280px;padding:6px;border-radius:16px;background:var(--sheet);border:1px solid var(--sheet-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 50px -16px rgba(0,0,0,.8);animation:menuin .18s var(--ease)}
@keyframes menuin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.menu .mh{padding:8px 10px 6px;font:600 1.02rem/1.2 var(--serif);color:var(--ink);border-bottom:1px solid var(--sheet-line);margin-bottom:4px}
.menu button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;font:600 .9rem/1.2 var(--font)}
.menu button small{font-weight:400;font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.3}
.menu button:hover,.menu button:focus-visible{background:color-mix(in srgb,var(--hl) 18%,transparent)}
.menu button.info{color:var(--muted);font-weight:500}

/* overlays */
.overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px;text-align:center}
.overlay>div{max-width:520px}
.handoff{z-index:1100;background:radial-gradient(ellipse at 50% 40%,#1A2A47,#070C18 75%);color:#F3EEE4;top:calc(var(--hdr) + env(safe-area-inset-top,0px))}
.handoff .seal{width:86px;height:86px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#F6CD6B,#D4962A);box-shadow:0 0 0 8px rgba(233,180,90,.15),0 20px 40px -10px rgba(0,0,0,.8);font:700 2.2rem/1 var(--serif);color:#1B2233}
.handoff .seal.p1{background:linear-gradient(135deg,#C9B6F0,#7C62C9);color:#fff;box-shadow:0 0 0 8px rgba(160,130,230,.15),0 20px 40px -10px rgba(0,0,0,.8)}
.handoff small{display:block;font:700 .72rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#E9B45A}
.handoff h2{font-size:clamp(2rem,5vw,3.2rem);margin:12px 0 10px;color:#F3EEE4}
.handoff p{color:#A8AFBD;margin:0 auto 26px;max-width:40ch}
.handoff .btn{background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233}
.endscreen{z-index:1150;background:rgba(5,8,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#F3EEE4}
.endscreen .crest{font:700 .74rem/1 var(--font);letter-spacing:.24em;text-transform:uppercase;color:#E9B45A}
.endscreen h2{font-size:clamp(2.4rem,7vw,4.6rem);margin:14px 0 8px;color:#F3EEE4}
.endscreen h2 em{font-style:italic;background:linear-gradient(100deg,#C8871F,#F2C462 55%,#D4962A);-webkit-background-clip:text;background-clip:text;color:transparent}
.endscreen p{color:#C8CDD8;margin-bottom:26px}
.endscreen .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.endscreen .btn.ghost{background:transparent;color:#F3EEE4;border-color:rgba(255,255,255,.3)}
.endscreen .rays{position:fixed;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(233,180,90,.08) 0deg 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.stuck{z-index:1300;background:rgba(5,8,16,.8);backdrop-filter:blur(6px);color:#F3EEE4}
.stuck .box2,.modal .box2{background:var(--sheet);color:var(--ink);border:1px solid var(--sheet-line);border-radius:24px;padding:28px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);text-align:left;max-width:460px}
.stuck h2,.modal h2{font-size:1.9rem;margin-bottom:10px}
.stuck p{color:var(--muted);margin-bottom:20px}
.modal{z-index:1250;background:rgba(5,8,16,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal .box2{width:min(560px,100%);max-height:86vh;overflow:auto;position:relative}
.modal .x{position:absolute;right:14px;top:14px;border:0;background:var(--surface-2);color:var(--ink);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.1rem}
.optrow{display:grid;gap:8px;margin-top:16px}
.optrow>span{font:600 .7rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.optrow .seg{box-shadow:none}
.optrow p{font-size:.82rem;color:var(--muted)}
.modal .grid2{max-height:60vh;overflow:auto;padding:4px}
.rotate{display:none;z-index:1400;background:#0D1322;color:#F3EEE4}
.rotate svg{width:84px;height:84px;fill:none;stroke:#E9B45A;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px;animation:rot 2.2s ease-in-out infinite}
.rotate h2{color:#F3EEE4;margin-bottom:8px}
.rotate .btn{margin-top:20px}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
/* the old "turn your phone sideways" overlay is gone: portrait has its own layout (see the end of this file) */
.toast{position:fixed;left:50%;bottom:24px;z-index:1500;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:linear-gradient(180deg,#17223D,#0A1020);color:#F3EEE4;border:1px solid rgba(233,180,90,.38);font:500 .88rem/1.3 var(--font);padding:11px 20px;border-radius:999px;box-shadow:0 16px 34px -12px rgba(0,0,0,.7);transition:opacity .25s,transform .25s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* coin + rps (pre-duel) */
.coin{width:128px;height:128px;margin:0 auto 26px;position:relative;transform-style:preserve-3d;animation:coinflip 1.6s cubic-bezier(.3,.7,.3,1) forwards}
/* coin edge: two inner discs give the flip a real thickness */
.coin::before,.coin::after{content:"";position:absolute;inset:1px;border-radius:50%;background:repeating-conic-gradient(#6E4A0E 0 3deg,#B98A2E 3deg 6deg)}
.coin::before{transform:translateZ(-2px)}
.coin::after{transform:translateZ(2px)}
.coin i{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font:700 3rem/1 var(--serif);font-style:normal;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transform:translateZ(4px)}
/* reeded rim */
.coin i::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(0,0,0,.38) 0 1.5deg,rgba(255,255,255,.22) 1.5deg 3deg);-webkit-mask:radial-gradient(closest-side,transparent 88%,#000 89%);mask:radial-gradient(closest-side,transparent 88%,#000 89%)}
/* light sweep */
.coin i::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(118deg,transparent 28%,rgba(255,255,255,.55) 44%,rgba(255,255,255,0) 58%);mix-blend-mode:soft-light;pointer-events:none}
.coin i:first-child{color:#7A4F0C;text-shadow:0 1px 0 rgba(255,244,210,.85),0 -1px 0 rgba(70,40,0,.55),0 0 1px rgba(70,40,0,.4);
  background:radial-gradient(closest-side,transparent 70%,rgba(110,70,8,.55) 71%,transparent 73%),radial-gradient(circle at 34% 28%,rgba(255,250,225,.75),transparent 46%),conic-gradient(from 210deg,#B07A1C,#FFE39A,#C48A22,#FFF0BF,#A8701A,#F5D27A,#B07A1C);
  box-shadow:inset 0 0 0 9px rgba(160,105,20,.35),inset 0 0 0 10px rgba(90,55,5,.55),inset 0 2px 2px 10px rgba(255,240,190,.35),inset 0 -6px 14px rgba(90,55,5,.45)}
.coin i:last-child{color:#4A5260;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(30,36,46,.55),0 0 1px rgba(30,36,46,.4);transform:rotateY(180deg) translateZ(4px);
  background:radial-gradient(closest-side,transparent 70%,rgba(60,68,80,.5) 71%,transparent 73%),radial-gradient(circle at 34% 28%,rgba(255,255,255,.8),transparent 46%),conic-gradient(from 210deg,#8A93A3,#F4F6FA,#9CA4B2,#FFFFFF,#7D8696,#E3E7EE,#8A93A3);
  box-shadow:inset 0 0 0 9px rgba(110,120,135,.35),inset 0 0 0 10px rgba(50,58,70,.5),inset 0 2px 2px 10px rgba(255,255,255,.35),inset 0 -6px 14px rgba(40,46,58,.4)}
.coin.still{animation:none;transform:rotateY(var(--turns))}
@keyframes coinflip{from{transform:rotateY(0) translateY(0)}50%{transform:rotateY(calc(var(--turns) * .5)) translateY(-60px)}to{transform:rotateY(var(--turns)) translateY(0)}}

/* side panels */
.detail-panel{flex:1;overflow:auto;padding:16px}
.dp-empty{color:var(--faint);font-size:.86rem;text-align:center;margin-top:40%}
.dp-empty svg{width:48px;height:48px;opacity:.4;display:block;margin:0 auto 12px;fill:none;stroke:currentColor;stroke-width:1.5}
.dp-img{position:relative;width:100%;max-width:240px;margin:0 auto;display:block;border-radius:11px;box-shadow:0 22px 44px -16px rgba(0,0,0,.8);aspect-ratio:240/350;overflow:hidden;--cw:240px}
.dp-img img{width:100%;height:100%;display:block;object-fit:cover}
.dp-name{font:700 1.5rem/1.1 var(--serif);margin-top:14px}
.dp-type{font:600 .68rem/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-top:6px}
.dp-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dp-stats span{font:700 .74rem/1 var(--font);padding:5px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink)}
.dp-stats span.mod{background:color-mix(in srgb,var(--hl) 25%,var(--surface-2))}
.dp-stats.dp-stats2,.mdetail .dp-stats.dp-stats2{margin-top:6px}
.dp-text{white-space:pre-wrap;font-size:.84rem;line-height:1.55;color:var(--ink);background:var(--surface-2);border-radius:12px;padding:12px 14px;margin-top:12px}
.dp-hidden{font:italic 500 1.1rem/1.4 var(--serif);color:var(--muted);text-align:center;margin-top:14px}
.tools{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.trow{display:flex;gap:6px}
.trow.view{position:relative}
.trow.act .tbtn{flex:1;width:auto;height:36px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 10px}
.trow.act .tbtn .tl{display:block;font:600 .78rem/1 var(--font);letter-spacing:.02em}
.trow.act .tbtn svg{width:16px;height:16px}
.trow.act .tbtn[hidden]{display:none}
.trow.act .tbtn:disabled{opacity:.42;cursor:default;border-color:var(--line)}
@media (hover:hover){#btnConcede:hover{border-color:var(--danger,#D9534F);color:var(--danger,#D9534F)}}
/* the volume popover under the speaker */
.volpop{position:absolute;left:0;top:calc(100% + 8px);z-index:5;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 16px 34px -14px rgba(0,0,0,.7);min-width:min(260px,70vw)}
.volpop[hidden]{display:none}
.volpop .tbtn{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.07)}
.volpop .tbtn:hover{background:rgba(255,255,255,.14)}
.volpop input{flex:1;min-width:120px;height:22px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;--p:80%}
.volpop input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--gold) var(--p),rgba(255,255,255,.14) var(--p))}
.volpop input::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.volpop input::-moz-range-progress{height:4px;border-radius:999px;background:var(--gold)}
.volpop input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .15s}
.volpop input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.volpop input:hover::-webkit-slider-thumb,.volpop input:focus-visible::-webkit-slider-thumb{transform:scale(1.15)}
.volpop input:focus-visible{outline:none}
.volpct{font:500 .72rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:var(--muted);min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums}
.tbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.tbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tbtn:hover{border-color:var(--gold)}
.tbtn.sm{width:30px;height:30px;font-size:1.1rem;display:none}
.logbox{flex:1;min-height:0;display:flex;flex-direction:column}
.loghead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 4px}
.loghead .eyebrow{margin:0}
.log{list-style:none;margin:0;padding:6px 10px 16px;overflow:auto;flex:1;font-size:.82rem;line-height:1.45}
.log li{padding:6px 8px;border-radius:9px;color:var(--ink);animation:logline .3s var(--ease)}
.log li.opp{color:color-mix(in srgb,var(--ink) 78%,var(--muted))}
.log li.sys{color:var(--muted);font-size:.76rem}
.log li.turn{margin-top:10px;padding:8px;font:700 .66rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--hl);border-top:1px solid var(--line);border-radius:0}
.log li.key{background:color-mix(in srgb,var(--hl) 9%,transparent)}
.log li.dmg{color:var(--red)}
.log li .who{font-weight:700}
.log .cn{font-weight:650;cursor:pointer;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 55%,transparent);text-underline-offset:3px}
@keyframes logline{from{opacity:0;transform:translateY(4px)}}
.fab{display:none;position:absolute;z-index:500;border:1px solid var(--plate-line);background:var(--plate);color:var(--ink);border-radius:999px;height:36px;padding:0 12px;align-items:center;gap:6px;font:700 .68rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.peekcard{position:fixed;z-index:1000;width:min(260px,40vw);pointer-events:none;border-radius:11px;overflow:hidden;box-shadow:0 30px 60px -16px rgba(0,0,0,.85);animation:menuin .15s}
.peekcard img{width:100%;display:block}

/* narrower screens: panels collapse */
@media (max-width:1180px){
  .duel{grid-template-columns:minmax(0,1fr) 270px}
  .d-left{display:none}
  .d-center{grid-column:1;grid-row:1}
  .d-right{grid-column:2;grid-row:1}
}
@media (max-width:900px), (max-height:560px){
  .duel{grid-template-columns:minmax(0,1fr)}
  .d-center{grid-column:1;grid-row:1}
  body.in-duel .top{display:none}
  body.in-duel{--hdr:0px}
  .d-left{display:none}
  .d-right{position:absolute;right:0;top:0;bottom:0;width:min(320px,80vw);z-index:1000;transform:translateX(105%);transition:transform .3s var(--ease);box-shadow:-20px 0 40px -10px rgba(0,0,0,.6)}
  .d-right.open{transform:none}
  .tbtn.sm{display:grid}
  .fab{display:flex}
  .plate{padding:4px 10px 4px 4px;gap:6px}
  .plate .av{width:28px;height:28px;font-size:.9rem}
  .plate .nm b{font-size:.86rem;max-width:90px}
  .plate .nm small{display:none}
  .plate .lp{font-size:1.1rem}
  .ph{padding:5px 6px;font-size:.56rem}
  .phases{padding:3px;gap:2px}
  .ph.endturn{padding:5px 8px;font-size:.56rem}
  .turnchip{display:none}
  .sheet2{max-height:72%;bottom:6px;border-radius:18px}
  .sh-head{padding:10px 12px 6px}.sh-head .t b{font-size:1.08rem}
  .sh-body{padding:4px 12px 6px}.sh-foot{padding:8px 12px 10px}
  .sbtn{padding:10px 14px}
  .grid2{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .splash img{max-width:120px}
}
@media (prefers-reduced-motion:reduce){
  :root{--t-move:.01s}
  .card,.card .in{transition-duration:.01s!important}
  .card.can::after,.z.pick,.lb-status i,.endscreen .rays,.rotate svg{animation:none}
  .splash,.shard,.burst,.dmgfloat,.link,.sheet2,.menu,.dropask,.coin{animation-duration:.01s!important}
  .turnbanner,.turnbanner>*{animation-name:bannerfade!important}
  .splash{animation:none;opacity:0}
}
.modal .box2:has(.mdetail){width:min(1000px,94vw);max-width:none;padding:32px 36px}
.mdetail{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:32px;align-items:start}
.mdetail .dp-img{max-width:340px;margin:0;--cw:340px}
.mdetail .dp-name{margin-top:0;padding-right:44px;font-size:2.3rem}
.mdetail .dp-type{font-size:.86rem;margin-top:8px}
.mdetail .dp-stats{gap:8px;margin-top:12px}
.mdetail .dp-stats span{font-size:.95rem;padding:7px 12px}
.mdetail .dp-text{font-size:1.12rem;line-height:1.65;padding:18px 22px;margin-top:16px}
@media (max-width:900px){.mdetail{grid-template-columns:minmax(0,240px) 1fr;gap:22px}.mdetail .dp-img{--cw:240px}.mdetail .dp-name{font-size:1.9rem}.mdetail .dp-text{font-size:1.02rem}}
@media (max-height:560px){.mdetail{grid-template-columns:170px 1fr;gap:16px}.mdetail .dp-img{--cw:170px}.mdetail .dp-text{font-size:.92rem}}

/* plates docked in the left panel */
.dock{padding:12px 12px 0}
.dock#dockMe{padding:0 12px 12px}
.plate.docked{position:relative;left:auto;top:auto;bottom:auto;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:6px;padding:12px 14px;border-radius:18px;width:100%}
.plate.docked .av{width:44px;height:44px;font-size:1.3rem;grid-row:span 1}
.plate.docked .lp{grid-column:1 / -1;margin:0;font-size:2.3rem;letter-spacing:-.02em;line-height:1}
.plate.docked .nm b{max-width:none;font-size:1.15rem}
.plate .dmgfloat{position:absolute;left:62%;top:-8px}
.plate .dmgfloat.down{top:auto;bottom:-30px}
.plate.docked .dmgfloat{top:30%;left:70%}
.plate.docked .dmgfloat.down{top:30%;bottom:auto}

/* chain docked in the right panel */
.chaindock{padding:0 12px}
.chaindock:empty{display:none}
.chainstack.docked{position:static;transform:none!important;padding:12px 0 4px}
.chainstack.docked .ch-title{text-align:left}
.chainstack.docked .link{max-width:none}
.chainstack:empty{display:none}

/* phone landscape rail */
.table.rail .sheet2{left:var(--rail-x);width:var(--rail-w);top:132px;bottom:52px;max-height:none;transform:none;animation-name:sheetinR;border-radius:16px}
.table.rail .sheet2.min{top:auto;max-height:56px}
@keyframes sheetinR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.table.rail .statusline{text-align:left;font-size:.72rem}
.table.rail .chainstack{right:8px}
.rotate .btn{background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233}
.menu button:focus-visible,.sheet2 button:focus-visible{outline:2px solid var(--hl);outline-offset:1px}
.detail-panel,.log,.sh-body,.modal .box2{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 40%,transparent) transparent}
.splash{isolation:isolate}
.splash::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:520px;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(5,8,16,.42),rgba(5,8,16,.14) 60%,transparent)}
.card.hand.me:not(.fd):hover .in{transform:translateY(-16%) scale(1.05)}
.card.hand.me .in{transition:transform .22s var(--ease)}
.handoff h2,.endscreen h2,.plate .nm b,.dsinfo b,.pname input,.sh-head .t b,.turnbanner b,.splash .lbl b{font-variant-numeric:lining-nums;font-feature-settings:"lnum","kern","liga"}
body.playpage:has(#lobby:not([hidden])):has(.overlay.handoff){overflow:hidden}
:root{--zcorner:rgba(27,34,51,.3)}
:root[data-theme="dark"]{--zcorner:rgba(233,180,90,.5)}
.z::before{content:"";position:absolute;inset:5px;pointer-events:none;opacity:.7;
  background:
   linear-gradient(var(--zcorner),var(--zcorner)) left top/10px 1.5px no-repeat,
   linear-gradient(var(--zcorner),var(--zcorner)) left top/1.5px 10px no-repeat,
   linear-gradient(var(--zcorner),var(--zcorner)) right top/10px 1.5px no-repeat,
   linear-gradient(var(--zcorner),var(--zcorner)) right top/1.5px 10px no-repeat,
   linear-gradient(var(--zcorner),var(--zcorner)) left bottom/10px 1.5px no-repeat,
   linear-gradient(var(--zcorner),var(--zcorner)) left bottom/1.5px 10px no-repeat,
   linear-gradient(var(--zcorner),var(--zcorner)) right bottom/10px 1.5px no-repeat,
   linear-gradient(var(--zcorner),var(--zcorner)) right bottom/1.5px 10px no-repeat}
.z.pile::before{display:none}
.z[data-kind="m"]{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--zfill) 100%,transparent),transparent 75%),var(--zfill)}
@media (prefers-reduced-motion:reduce){.fx .ring{animation:none}}
.card .f img.peek{width:44%;height:auto;object-fit:contain}
@media (max-width:1180px) and (min-width:901px){.plate:not(.docked){padding:4px 12px 4px 4px;gap:8px}.plate:not(.docked) .av{width:32px;height:32px;font-size:.95rem}.plate:not(.docked) .lp{font-size:1.2rem}}
.kc{font:600 .78rem/1.2 var(--font);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer;text-align:left;max-width:100%;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 55%,transparent);text-underline-offset:3px}
.kc:hover,.kc:focus-visible{border-color:var(--gold);outline:none}
.kcpeek{position:fixed;z-index:60;width:168px;height:245px;border-radius:8px;box-shadow:0 18px 40px -10px rgba(0,0,0,.75);pointer-events:none}

/* ================= online (stage 3) ================= */
#stepOnline{display:none}
body.online-mode #stepOnline{display:block}
body.online-mode #stepLocal,body.online-mode .pl[data-p="1"]{display:none}
body.online-mode .players{grid-template-columns:minmax(0,1fr)}
body.online-mode .decks{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.mode.busy{pointer-events:none}
.deck .yours{position:absolute;left:6px;top:6px;z-index:1;font:700 .56rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:#1B2233;background:linear-gradient(135deg,#F6CD6B,#D4962A);padding:4px 6px;border-radius:999px}
.dsinfo i.bad{font-style:normal;color:var(--red)}
.dprob{margin:2px 0 0;padding-left:18px;font-size:.8rem;line-height:1.4;color:var(--red)}
.room-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.rs-card{min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.rs-card b{font:600 1.3rem/1.2 var(--serif)}
.rs-card span{color:var(--muted);font-size:.9rem;line-height:1.45}
.rs-card .btn{margin-top:auto}
.rs-join{display:flex;gap:8px;margin-top:auto;width:100%}
/* Find a match: the queue card across both columns (presence.js find / app.js paintFind) */
.rs-find[hidden]{display:none}
.rs-find{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px;border-color:rgba(233,180,90,.45);background:linear-gradient(120deg,rgba(233,180,90,.10),transparent 60%),var(--surface)}
.rs-find .rf-head{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px}
.rs-find .rf-opts,.rs-find .rf-wait{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rs-find .rf-opts[hidden],.rs-find .rf-wait[hidden]{display:none}
.rs-find .btn{margin-top:0}
.rs-find .rf-count{flex-basis:100%;color:var(--muted);font-size:.85rem}
.rs-find .rf-count:empty{display:none}
.rf-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(233,180,90,.25);border-top-color:var(--gold);animation:spin 1s linear infinite;flex:none}
.rf-time{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.rs-find.is-searching{box-shadow:var(--shadow),0 0 0 1px rgba(233,180,90,.35)}
@media (max-width:560px){.rs-find .rf-opts .btn,.rs-find .rf-wait .btn{flex:1 1 100%}}
.rs-join input,.rl-share input{flex:1;min-width:0;width:100%;font:600 1.2rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.rs-join input:focus,.rl-share input:focus{outline:none;border-color:var(--gold)}
.room-live{padding:18px 20px;border-radius:20px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.rl-top{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.rl-code small{display:block;font:700 .66rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.rl-code b{display:block;margin-top:6px;font:700 2.4rem/1 var(--serif);letter-spacing:.14em;font-variant-numeric:lining-nums}
.rl-share{display:flex;gap:8px;flex:1;min-width:240px}
.rl-share input{font-size:.86rem;letter-spacing:0;text-transform:none}
.room-live .lb-status{margin-top:14px}
.rl-players{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:14px}
.rl-vs{font:italic 600 1.3rem/1 var(--serif);color:var(--muted)}
.rl-p{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--surface-2);min-width:0}
.rl-p .av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#F6CD6B,#D4962A);color:#1B2233;font:700 1.3rem/1 var(--serif)}
#rlOpp .av{background:linear-gradient(135deg,#C9B6F0,#7C62C9);color:#fff}
.rl-p .rlx{display:flex;flex-direction:column;gap:3px;min-width:0}
.rl-p small{font:700 .62rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.rl-p b{font:600 1.15rem/1.15 var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-p .rlx span{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-p .rdy{font:700 .62rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;font-style:normal;padding:6px 9px;border-radius:999px;background:var(--surface);color:var(--muted);white-space:nowrap}
.rl-p .rdy.on{background:var(--good);color:#fff}
.rl-problems{margin:10px 0 0;padding-left:18px;color:var(--red);font-size:.86rem}
.rl-problems:empty{display:none}
.rl-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.rl-toss{display:flex;flex-direction:column;gap:6px;margin-right:auto}
.rl-toss small{color:var(--muted);font-size:.78rem}
.rl-toss .seg button:disabled{cursor:default}
.rematchnote{margin-top:14px!important;min-height:1.2em;color:#E9B45A!important;font-weight:600}
.netpill{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:7px;max-width:min(60vw,420px);padding:5px 12px;border-radius:999px;background:var(--plate);border:1px solid var(--plate-line);font:600 .72rem/1.2 var(--font);color:var(--ink);pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.netpill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.netpill i{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.netpill.ok i{background:var(--good)}
.netpill.bad i{background:var(--red)}
.netpill.ok{display:none}
.d-center{position:relative}
.netwait{z-index:1250;background:rgba(5,8,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#F3EEE4}
.netwait .box2{background:var(--sheet);color:var(--ink);border:1px solid var(--sheet-line);border-radius:24px;padding:28px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);text-align:left;max-width:460px}
.netwait h2{font-size:1.8rem;margin-bottom:10px}
.netwait p{color:var(--muted);margin-bottom:14px}
.netwait .cd b{font:700 2rem/1 var(--serif);color:var(--ink)}
@media (max-width:860px){.room-start,.rl-players{grid-template-columns:minmax(0,1fr)}.rl-vs{display:none}}

/* ---- computer opponent: the Random deck tile */
.deck.rnd .dart,.dsel .rndart{display:grid;place-items:center;filter:none;background:radial-gradient(circle at 30% 25%,#3b4c7a,#141b2e 70%)}
.deck.rnd .dart b,.dsel .rndart b{font:700 2rem/1 var(--serif);color:#F6CD6B;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.dsel .rndart b{font-size:3rem}
.firstov .row2{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.firstov .firstx{margin-top:14px}

/* ======================================================================= phones, portrait
   board.js lays the table out top to bottom (.table.portrait). Everything you tap is at least 44 px. */
.d-center .table{inset:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.cardfab{display:none!important}
.table.portrait .fab,.table.portrait .cardfab{display:flex!important;height:44px;min-width:44px;padding:0 12px;justify-content:center}
.table.portrait .plate{height:44px;padding:3px 12px 3px 3px;gap:6px}
.table.portrait .plate .av{width:36px;height:36px;font-size:1rem}
.table.portrait .plate .nm{display:none}
.table.portrait .plate .lp{font-size:1.15rem;margin-left:2px}
.table.portrait .plate .lp::before{font-size:.5rem;margin-right:3px}
.table.portrait .phases{padding:3px;gap:2px}
.table.portrait .ph{min-height:38px;min-width:42px;padding:0 8px;font-size:.66rem;display:grid;place-items:center}
.table.portrait .ph.endturn{padding:0 12px;font-size:.66rem}
.table.portrait .statusline{font-size:.76rem;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
.table.portrait .statusline a{display:inline-block;padding:8px 4px;margin:-8px 0}
.table.portrait .turnchip{display:none}
.table.portrait .z .cnt{right:-5px;bottom:-6px;min-width:20px;height:20px;font-size:.66rem}
.table.portrait .z .zl{font-size:.5rem;letter-spacing:.06em}
.table.portrait .chainstack .link{max-width:150px;font-size:.7rem}
/* prompts: a bottom sheet across the full width (or at the top when the cards it asks about are at the bottom) */
.table.portrait .sheet2{left:0;right:0;width:auto;bottom:0;transform:none;max-height:48%;border-radius:20px 20px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);animation-name:sheetup}
.table.portrait .sheet2.attop{bottom:auto;top:0;border-radius:0 0 20px 20px;border-top:0;border-bottom:1px solid var(--sheet-line);padding-bottom:0;animation-name:sheetdown}
.table.portrait .sheet2.min{max-height:64px}
.table.portrait .sh-head{padding:8px 10px 6px 14px}
.table.portrait .sh-head .t b{font-size:1.05rem}
.table.portrait .sh-head .t span{font-size:.76rem}
.table.portrait .sh-min{width:44px;height:44px;flex:none}
.table.portrait .sbtn{min-height:44px;padding:0 16px}
.table.portrait .opt2{min-height:48px}
.table.portrait .grid2{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
@keyframes sheetup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes sheetdown{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.table.portrait .menu{max-width:min(280px,calc(100% - 12px))}
.table.portrait .menu button{min-height:46px;justify-content:center}
.table.portrait .splash img{max-width:110px;min-width:80px}
.table.portrait .splash .lbl b{font-size:1.3rem}
.table.portrait .turnbanner{padding:10px 16px 11px;gap:11px}
.table.portrait .turnbanner b{font-size:1.45rem}
.table.portrait .turnbanner.phase b{font-size:1.2rem}
/* the log (with the tools) and card text open as bottom sheets */
@media (orientation:portrait) and (max-width:759px){
  .d-right{grid-column:1;grid-row:1;left:0;right:0;top:auto;bottom:0;width:auto;height:min(74dvh,640px);transform:translateY(105%);border-left:0;border-top:1px solid var(--line);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -20px 40px -10px rgba(0,0,0,.6)}
  .d-right.open{transform:none}
  .tbtn{width:44px;height:44px}
  .tbtn.sm{width:44px;height:44px}
  .modal{place-items:end center;padding:0}
  .modal .box2{width:100%;max-height:82dvh;border-radius:20px 20px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .modal .x{width:44px;height:44px}
  .modal .box2:has(.mdetail){width:100%;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .mdetail{grid-template-columns:1fr;gap:14px}
  .mdetail .dp-img{max-width:min(230px,58vw);margin:0 auto;--cw:230px}
  .mdetail .dp-name{font-size:1.7rem;padding-right:48px}
  .mdetail .dp-text{font-size:1rem;line-height:1.6;padding:14px 16px}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);text-align:center}
  .handoff .btn,.endscreen .btn{min-height:48px}
  .rpsbtn{padding:14px 16px;min-width:88px}
}
/* touch screens in landscape: bigger phase buttons and menu rows */
@media (pointer:coarse){
  .ph{min-height:34px}
  .menu button{min-height:44px}
  .sbtn{min-height:42px}
  .tbtn{width:44px;height:44px}
}
/* lobby on phones */
@media (max-width:620px){
  .lb-link{min-height:44px;display:inline-flex;align-items:center}
  .seg button{min-height:44px}
  .lobby .btn.big{min-height:52px}
  .tossrow{flex-direction:column;align-items:stretch}
  .tossrow .seg{display:flex;width:100%}
  .tossrow .seg button{flex:1}
  .decks{max-height:240px}
  .modes{display:flex;width:100%}
  .mode{flex:1;justify-content:center;min-height:44px}
  .lb-tools{margin-left:0;gap:5px}
  .lb-tools .lb-link{padding:0 11px}
  .lb-tools .lb-link svg{display:none}
  .lb-txt .lb-sound{width:44px;height:44px}
  .lb-txt{order:3;flex:0 1 auto}
  .cpuhead .seg button{min-height:40px;padding:7px 10px}
  .lb-name input{flex:1;width:auto;min-height:44px}
}
.table.portrait .fab,.table.portrait .cardfab{font-size:0;gap:0;padding:0;width:44px}
.table.portrait .fab svg{width:20px;height:20px}
.table.portrait .z[data-kind="ban"] .zl{font-size:0}
.table.portrait .z[data-kind="ban"] .zl::after{content:"Ban";font-size:.5rem}
@media (pointer:coarse){.lb-link{min-height:44px;display:inline-flex;align-items:center}.seg button{min-height:44px}.lb-txt .lb-sound{width:44px;height:44px}#lobby .lb-txt .pwa-install{min-height:44px}.resumebox .btn{min-height:44px}.dabout .kc{min-height:40px}.dabout summary{min-height:40px}}
@media (max-width:620px){
  /* the start button stays in reach at the bottom of the screen */
  .lobby{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  #stepLocal #startBtn{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;box-shadow:0 14px 30px -10px rgba(0,0,0,.7)}
  body.in-duel #stepLocal #startBtn{display:none}
}

/* drop chooser: Attack or Set, Activate or Set, right at the zone a card was dropped on */
.dropask{position:absolute;z-index:960;padding:10px 10px 4px;border-radius:16px;background:linear-gradient(180deg,#17223D,#0A1020);border:1px solid rgba(233,180,90,.38);box-shadow:0 26px 54px -18px rgba(0,0,0,.9);color:#F3EEE4;animation:menuin .18s var(--ease)}
.dropask::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#F6CD6B,transparent)}
.dropask .dh{font:600 .64rem/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#E9B45A;text-align:center;padding:3px 6px 10px;max-width:250px;margin:0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropask .row{display:flex;gap:8px}
.dropask .ch{display:flex;flex-direction:column;align-items:center;gap:7px;width:118px;padding:10px 8px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);color:#F3EEE4;cursor:pointer;font:600 1.12rem/1.05 var(--serif);transition:background .15s,border-color .15s,transform .15s}
.dropask .ch:hover,.dropask .ch:focus-visible{background:rgba(233,180,90,.14);border-color:rgba(233,180,90,.6);outline:0;transform:translateY(-1px)}
.dropask .pv{height:80px;width:80px;display:grid;place-items:center}
.dropask .pv img{width:54px;border-radius:4px;box-shadow:0 10px 20px -8px rgba(0,0,0,.85)}
.dropask .pv img.def{transform:rotate(-90deg)}
.dropask .ch small{font:500 .66rem/1.3 var(--font);color:#A8AFBD;letter-spacing:.01em;text-align:center}
.dropask .cancel{display:block;margin:4px auto 0;min-height:32px;padding:6px 14px;border:0;background:none;color:#A8AFBD;font:600 .64rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border-radius:999px}
.dropask .cancel:hover,.dropask .cancel:focus-visible{color:#F3EEE4;outline:0}
.table.portrait .dropask .ch{width:112px}
.table.portrait .dropask .cancel{min-height:40px}

/* sound (ui/sound.js): speaker buttons and the volume row in Options */
.tbtn[aria-pressed="false"]#btnSound,.tbtn[aria-pressed="false"].lb-sound{color:var(--muted)}
.volrow{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--muted)}
.volrow input{flex:1;max-width:260px;accent-color:var(--gold)}

/* in-place card picking (ui/prompts.js _bar): the candidates glow on the table, the rest dims, a compact bar
   carries the title, counter and buttons. Hand candidates lift (the `translate` property composes with the
   inline transform), selected ones get the tick or their order number. */
.card{transition:transform var(--t-move) var(--ease),translate .22s var(--ease),opacity .3s,filter .3s}
.table.inplace .card:not(.pick):not(.dragging){filter:brightness(.56) saturate(.7)}
.table.inplace .card.pick .f{box-shadow:0 0 0 2px var(--hl),0 0 22px 4px var(--hl-soft),0 10px 18px -8px rgba(0,0,0,.6)}
.table.inplace .card.pick::after{content:"";position:absolute;inset:-3px;border-radius:calc(var(--cw) * .07);pointer-events:none;box-shadow:0 0 16px 3px var(--hl-soft);animation:canpulse 1.6s ease-in-out infinite}
.table.inplace .card.pick.on .f{box-shadow:0 0 0 3px var(--ok),0 0 24px 4px color-mix(in srgb,var(--ok) 55%,transparent)}
.table.inplace .card.pick.on::after{animation:none;opacity:0}
.table.inplace .card.hand.me.pick{translate:0 -8%}
.table.inplace .card.hand.me.pick.on{translate:0 -13%}
.table.inplace .card.hand.me.pick:hover .in{transform:translateY(-5%) scale(1.04)}
.card.pick.on[data-ord]::before{content:attr(data-ord);background:var(--hl);color:#1B2233}
.card .pval{position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:5;font:700 .66rem/1 var(--font);background:var(--hl);color:#1B2233;padding:3px 7px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.45);pointer-events:none}
.pickbar{position:absolute;z-index:880;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:16px;background:var(--sheet);border:1px solid color-mix(in srgb,var(--hl) 40%,var(--sheet-line));backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 18px 40px -14px rgba(0,0,0,.7);color:var(--ink);animation:pbin .28s var(--ease);transition:top .25s var(--ease),left .25s var(--ease)}
.pickbar::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--hl) 30%,#F6CD6B 50%,var(--hl) 70%,transparent);pointer-events:none}
.pickbar.again{animation:none}
@keyframes pbin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pickbar .src{width:32px;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.5);cursor:pointer;flex:none}
.pickbar .t{flex:1;min-width:0}
.pickbar .t>b{display:block;font:600 1.12rem/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums}
.pickbar .t>b em{font-style:normal;font-weight:700;padding:0 .04em;background:linear-gradient(100deg,#C8871F,#F2C462 55%,#D4962A);-webkit-background-clip:text;background-clip:text;color:transparent}
.pickbar .t>span{display:flex;align-items:baseline;gap:6px;margin-top:3px;font:600 .62rem/1.25 var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden}
.pickbar .t>span i{font-style:normal;color:var(--hl);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.pickbar .t>span i::after{content:"\00B7";margin-left:6px;color:var(--muted)}
.pickbar .t>span em{display:inline-block;font-style:normal;flex:none;font-variant-numeric:lining-nums tabular-nums}
.pickbar .t>span em b{color:var(--ink);font-weight:800}
.pickbar .t>span em.bump{animation:pbbump .38s ease}
@keyframes pbbump{25%{transform:translateX(-3px);color:var(--target)}60%{transform:translateX(3px);color:var(--target)}}
.pickbar .pb-btns{display:flex;gap:6px;flex:none;align-items:center}
.pickbar .sbtn{padding:10px 14px;font-size:.68rem}
.pickbar .pb-list{background:transparent;color:var(--muted);padding:10px 11px}
.pickbar .sbtn:focus-visible{outline:2px solid var(--hl);outline-offset:1px}
.pickbar.railed{flex-wrap:wrap}
.pickbar.railed .pb-btns{flex-basis:100%;justify-content:flex-end}
.table.portrait .pickbar{padding:7px 6px 7px 10px;gap:8px;border-radius:14px}
.table.portrait .pickbar .src{width:28px}
.table.portrait .pickbar .t>b{font-size:1rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.table.portrait .pickbar .sbtn{padding:10px 11px;font-size:.62rem;letter-spacing:.05em;min-height:40px}
.table.portrait .pickbar .pb-list{padding:10px 8px}
@media (prefers-reduced-motion:reduce){
  .table.inplace .card.pick::after{animation:none;opacity:.7}
  .pickbar,.pickbar .t>span em.bump{animation-duration:.01s!important}
}
.handfade{position:absolute;z-index:160;width:34px;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s}
.handfade.l{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--felt-c) 92%,transparent),transparent)}
.handfade.r{right:0;background:linear-gradient(270deg,color-mix(in srgb,var(--felt-c) 92%,transparent),transparent)}
.handfade::before{content:"";width:9px;height:9px;border:solid var(--hl);border-width:2.5px 2.5px 0 0;transform:rotate(45deg);filter:drop-shadow(0 0 6px var(--hl-soft))}
.handfade.l::before{transform:rotate(-135deg)}
.handfade.show{opacity:1}

/* ===== Best of 3 matches, side decking, history (Oct 2026, ui/match.js) ===== */
button.lb-link{cursor:pointer}
#matchOnlineRow{margin-right:0}
.plate .nm b .mpips{margin-left:6px}
.mpips{display:inline-flex;gap:4px;vertical-align:middle}
.mpips i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--hl);background:transparent;box-sizing:border-box}
.mpips i.on{background:var(--hl);box-shadow:0 0 6px var(--hl-soft)}
.endscreen .mscore{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 18px;font:700 1rem/1.2 var(--font);color:#F3EEE4}
.endscreen .mscore .mpips i{width:12px;height:12px;border-color:#E9B45A}
.endscreen .mscore .mpips i.on{background:#E9B45A}
.endscreen .mscore .side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:90px}
.endscreen .mscore .side small{font:600 .74rem/1.2 var(--font);color:#C8CDD8;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.endscreen .mscore .dash{font:600 2rem/1 var(--serif);color:#E9B45A;font-variant-numeric:lining-nums}
.endscreen .gamenote{font-size:.86rem;margin-top:-14px}
.endscreen [data-decline]{background:transparent;color:#F3EEE4;border-color:rgba(255,255,255,.3)}
.sidestep{z-index:1160;background:rgba(5,8,16,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:16px;align-items:stretch}
.sidebox{width:min(1000px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;display:flex;flex-direction:column;background:var(--sheet);color:var(--ink);border:1px solid var(--sheet-line);border-radius:24px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);text-align:left;overflow:hidden}
.sdhead{padding:20px 22px 10px}
.sdhead .crest{font:700 .72rem/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--hl)}
.sdhead h2{font-size:clamp(1.5rem,4vw,2.2rem);margin:8px 0 4px}
.sdhead h2 em{font-style:italic;color:var(--hl)}
.sdhead .sdscore{font:600 .9rem/1.3 var(--font);color:var(--muted);margin-bottom:4px}
.sdhelp{font-size:.84rem;color:var(--muted);margin:4px 0 0;max-width:70ch}
.sdbody{flex:1;overflow:auto;padding:4px 22px 10px;scrollbar-width:thin}
.sdbody section{margin-top:10px}
.sdbody h3{font:700 .74rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px;display:flex;gap:8px;align-items:center}
.sdbody h3 b{color:var(--ink);font-size:.9rem;letter-spacing:0;font-variant-numeric:lining-nums tabular-nums}
.sdbody h3 b.bad{color:var(--target)}
.sdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
.sdc{position:relative;padding:0;border:0;background:none;cursor:pointer;border-radius:5px;aspect-ratio:59/86;overflow:visible;transition:transform .12s}
.sdc img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.sdc.sel{transform:translateY(-4px)}
.sdc.sel img{outline:3px solid var(--hl);outline-offset:1px;box-shadow:0 0 14px var(--hl-soft)}
.sdc.in::after{content:"";position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--sheet)}
.sdc:focus-visible img{outline:2px solid var(--hl)}
.sidestep.waiting .sdc{cursor:default;opacity:.75}
.sdbar{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 22px;border-top:1px solid var(--sheet-line)}
.sdbar .sdsel{flex:1;min-width:0;font-size:.86rem;overflow:hidden;text-overflow:ellipsis}
.sdbar .sdsel small{color:var(--muted)}
.sdprob{list-style:none;margin:0;padding:0 22px;color:var(--target);font-size:.84rem}
.sdprob li{margin:2px 0}
.sdfoot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:10px 22px calc(16px + env(safe-area-inset-bottom,0px))}
.hs-empty{padding:18px 0 6px;color:var(--muted)}
.modal .box2 h2 em{font-style:italic;color:var(--hl)}
.hs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0 6px}
.hs-stat{border:1px solid var(--sheet-line);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.hs-stat b{display:block;font:700 1.15rem/1.2 var(--font);font-variant-numeric:lining-nums tabular-nums}
.hs-stat.gold b{color:var(--hl);font-size:1.5rem}
.hs-stat small{color:var(--muted);font-size:.76rem}
.hs-h{font:700 .72rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.hs-rows{display:flex;flex-direction:column;border:1px solid var(--sheet-line);border-radius:12px;overflow:hidden}
.hs-row{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:.86rem}
.hs-row+.hs-row{border-top:1px solid var(--sheet-line)}
.hs-k{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hs-v{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hs-r{width:42px;text-align:right;font-weight:700;color:var(--hl);font-variant-numeric:tabular-nums}
.hs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hs-g{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--sheet-line);border-radius:12px}
.hs-res{flex:none;width:46px;text-align:center;font:700 .66rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;font-style:normal;padding:6px 0;border-radius:999px;background:color-mix(in srgb,var(--muted) 18%,transparent)}
.hs-res.win{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.hs-res.loss{background:color-mix(in srgb,var(--target) 18%,transparent);color:var(--target)}
.hs-gx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hs-gx b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-gx small,.hs-gm small{color:var(--muted);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-m{font-size:.7rem;color:var(--hl);font-weight:600}
.hs-gm{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.hs-foot{display:flex;justify-content:flex-end;margin-top:16px}
@media (max-width:640px){
  .sidestep{padding:0}
  .sidebox{max-height:100dvh;height:100dvh;border-radius:0;width:100vw}
  .sdhead{padding:14px 16px 6px}
  .sdbody{padding:2px 16px 8px}
  .sdgrid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px}
  .sdbar{padding:6px 16px}
  .sdprob{padding:0 16px}
  .sdfoot{padding:8px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .sdfoot .btn{flex:1;min-height:48px}
  .sdbar .sbtn{min-height:44px}
  .hs-g{padding:8px 10px;gap:8px}
}

/* resume an unfinished duel after a reload (ui/resume.js): a slim bar under the lobby top row */
.resumebox{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin:12px 0 0;padding:8px 8px 8px 16px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));background:linear-gradient(135deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}
.resumebox>div:first-child{min-width:0}
.resumebox b{font:600 .9rem/1.3 var(--font);margin-right:8px}
.resumebox span{color:var(--muted);font-size:.84rem}
.resumebox .row{display:flex;gap:8px;flex-wrap:wrap}
.resumebox .btn{padding:10px 16px;font-size:.8rem}
@media (max-width:620px){.resumebox .row{width:100%}.resumebox .btn{flex:1;min-height:44px}}
/* Millennium Puzzle coin faces */
.coin i svg{position:relative;width:74%;height:74%;overflow:visible;filter:drop-shadow(0 1px 0 rgba(255,250,230,.7)) drop-shadow(0 -1px 0 rgba(40,25,0,.45))}
.coin i svg .cp{fill:currentColor;opacity:.16;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
.coin i svg .cl{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.coin i svg .cf{fill:currentColor}
.coin i svg .ci{font:700 15px/1 var(--serif);fill:currentColor}
/* pile window (GY, banished, Fusion Deck): hovered card details in a side pane on wide screens */
.modal .box2:has(.pilewrap){width:min(1040px,94vw);max-width:none}
.pilewrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.pilewrap .pilemain{min-width:0}
.piledet{position:sticky;top:0;margin-top:34px;border-left:1px solid var(--sheet-line);padding-left:24px;max-height:72vh;overflow:auto}
.piledet .dp-img{max-width:190px;margin:0 auto}
.piledet .dp-name{font-size:1.45rem;margin-top:14px}
.piledet .dp-text{font-size:.95rem;line-height:1.6}
@media (max-width:760px), (pointer:coarse) and (max-width:1000px){.pilewrap{grid-template-columns:1fr}.piledet{display:none}.modal .box2:has(.pilewrap){width:min(560px,100%)}}
.hs-sc{font:700 1rem/1.1 var(--font);font-variant-numeric:lining-nums tabular-nums}
/* my pile count badges on top when the hand sits right under the piles (board.js, landscape hand) */
.z.cnt-top .cnt{bottom:auto;top:-7px}
.table.portrait .z.cnt-top .cnt{top:auto;bottom:-6px}
/* a lifted Deck badge would sit on the GY badge just above it (phone landscape): it takes the Deck's top left corner */
.table:not(.portrait) .z[data-kind="deck"].cnt-top .cnt{right:auto;left:-6px}
/* ===== BOARD LOOK v2 (Oct 2026): playmats, colour coded zones, centre divider, phase bar, turn banner =====
   Overrides the older table / zone / phase bar / banner rules above. Original art only (CSS gradients + inline SVG masks).
   board.js adds .mat.op (the old .oppband) and .mat.me, and sets --mid (the y of the centre line) on .table. */
:root{
  --felt-a:#FBF6E9; --felt-b:#EFE5CC; --felt-c:#DDCFAE;
  --side-op:rgba(176,60,86,.10); --side-me:rgba(60,100,170,.10); --vign:rgba(110,80,30,.20);
  --mat-op-a:rgba(196,92,112,.16); --mat-op-b:rgba(255,248,236,.55); --mat-me-a:rgba(92,130,196,.16); --mat-me-b:rgba(255,250,240,.55);
  --mat-edge:rgba(150,110,45,.34); --motif:#8C6420; --motif-op:.10; --divider:#B9842A; --divider-glow:rgba(212,150,42,.45);
  --z-bg:rgba(255,252,244,.62); --z-inner:rgba(90,60,20,.20);
  --c-m:#C2601A; --c-s:#0F8C7E; --c-field:#2C8C55; --c-gy:#6F655B; --c-ban:#6A4CC8; --c-deck:#8E6A2E; --c-extra:#A33AA6;
  --ico-op:.42; --cnt-ring:rgba(255,255,255,.85);
}
:root[data-theme="dark"]{
  --felt-a:#1E2756; --felt-b:#0E1332; --felt-c:#05071A;
  --side-op:rgba(120,18,52,.30); --side-me:rgba(22,64,156,.28); --vign:rgba(0,0,8,.55);
  --mat-op-a:rgba(150,30,70,.30); --mat-op-b:rgba(30,8,30,.50); --mat-me-a:rgba(40,86,190,.30); --mat-me-b:rgba(6,16,46,.55);
  --mat-edge:rgba(233,180,90,.24); --motif:#E9B45A; --motif-op:.075; --divider:#E9B45A; --divider-glow:rgba(233,180,90,.55);
  --z-bg:rgba(3,5,16,.46); --z-inner:rgba(0,0,0,.6);
  --c-m:#EE8A44; --c-s:#3FC7B4; --c-field:#62D39A; --c-gy:#A89F96; --c-ban:#A487F5; --c-deck:#D6B06E; --c-extra:#DA7ED8;
  --ico-op:.34; --cnt-ring:rgba(8,10,26,.7);
}
/* table: deep field, the opponent's half warm crimson, mine cool blue, vignette, soft light on the centre line */
.table{background:
   radial-gradient(ellipse 85% 75% at 50% var(--mid,50%),transparent 55%,var(--vign) 100%),
   linear-gradient(180deg,var(--side-op) 0,transparent calc(var(--mid,50%) - 1px),transparent calc(var(--mid,50%) + 1px),var(--side-me) 100%),
   radial-gradient(ellipse 70% 42% at 50% var(--mid,50%),var(--felt-a),transparent 78%),
   radial-gradient(ellipse 130% 95% at 50% 50%,var(--felt-b),var(--felt-c))}
.table .emblem{display:none}
.table::after{content:"";position:absolute;left:0;right:0;top:var(--mid,50%);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 2%,color-mix(in srgb,var(--divider) 55%,transparent) 22%,var(--divider) 50%,color-mix(in srgb,var(--divider) 55%,transparent) 78%,transparent 98%);
  box-shadow:0 0 10px 1px var(--divider-glow);animation:midglow 5s ease-in-out infinite}
@keyframes midglow{50%{opacity:.55}}
/* playmats */
.table .mat{position:absolute;pointer-events:none;border-radius:20px;border:1px solid var(--mat-edge);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),inset 0 0 70px rgba(0,0,0,.28),0 24px 50px -32px rgba(0,0,0,.75)}
.table .mat.op{background:radial-gradient(ellipse 65% 85% at 50% 100%,var(--mat-op-a),transparent 72%),linear-gradient(180deg,var(--mat-op-b),color-mix(in srgb,var(--mat-op-a) 40%,transparent))}
.table .mat.me{background:radial-gradient(ellipse 65% 85% at 50% 0%,var(--mat-me-a),transparent 72%),linear-gradient(0deg,var(--mat-me-b),color-mix(in srgb,var(--mat-me-a) 40%,transparent))}
.table .mat::before{content:"";position:absolute;inset:3% 0;background:var(--motif);opacity:var(--motif-op);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Ccircle cx='100' cy='100' r='97'/%3E%3Ccircle cx='100' cy='100' r='86'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3Ccircle cx='100' cy='100' r='28' stroke-width='.8'/%3E%3Cpath d='M100 14L174.5 143H25.5zM100 186L25.5 57h149z' stroke-width='.9'/%3E%3Cpath d='M189.0 100.0L195.0 100.0M186.0 123.0L188.9 123.8M177.1 144.5L182.3 147.5M162.9 162.9L165.1 165.1M144.5 177.1L147.5 182.3M123.0 186.0L123.8 188.9M100.0 189.0L100.0 195.0M77.0 186.0L76.2 188.9M55.5 177.1L52.5 182.3M37.1 162.9L34.9 165.1M22.9 144.5L17.7 147.5M14.0 123.0L11.1 123.8M11.0 100.0L5.0 100.0M14.0 77.0L11.1 76.2M22.9 55.5L17.7 52.5M37.1 37.1L34.9 34.9M55.5 22.9L52.5 17.7M77.0 14.0L76.2 11.1M100.0 11.0L100.0 5.0M123.0 14.0L123.8 11.1M144.5 22.9L147.5 17.7M162.9 37.1L165.1 34.9M177.1 55.5L182.3 52.5M186.0 77.0L188.9 76.2' stroke-width='1.4'/%3E%3Cpath d='M76 100c9-9 16-12 24-12s15 3 24 12c-9 9-16 12-24 12s-15-3-24-12z' stroke-width='1.3'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='6' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Ccircle cx='100' cy='100' r='97'/%3E%3Ccircle cx='100' cy='100' r='86'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3Ccircle cx='100' cy='100' r='28' stroke-width='.8'/%3E%3Cpath d='M100 14L174.5 143H25.5zM100 186L25.5 57h149z' stroke-width='.9'/%3E%3Cpath d='M189.0 100.0L195.0 100.0M186.0 123.0L188.9 123.8M177.1 144.5L182.3 147.5M162.9 162.9L165.1 165.1M144.5 177.1L147.5 182.3M123.0 186.0L123.8 188.9M100.0 189.0L100.0 195.0M77.0 186.0L76.2 188.9M55.5 177.1L52.5 182.3M37.1 162.9L34.9 165.1M22.9 144.5L17.7 147.5M14.0 123.0L11.1 123.8M11.0 100.0L5.0 100.0M14.0 77.0L11.1 76.2M22.9 55.5L17.7 52.5M37.1 37.1L34.9 34.9M55.5 22.9L52.5 17.7M77.0 14.0L76.2 11.1M100.0 11.0L100.0 5.0M123.0 14.0L123.8 11.1M144.5 22.9L147.5 17.7M162.9 37.1L165.1 34.9M177.1 55.5L182.3 52.5M186.0 77.0L188.9 76.2' stroke-width='1.4'/%3E%3Cpath d='M76 100c9-9 16-12 24-12s15 3 24 12c-9 9-16 12-24 12s-15-3-24-12z' stroke-width='1.3'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='6' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.table .mat::after{content:"";position:absolute;inset:5px;border-radius:15px;border:1px solid color-mix(in srgb,var(--mat-edge) 55%,transparent)}
/* zones: inset slots, framed in their zone colour, a small engraved icon */
.table .z{--zc:var(--c-m);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 4.5L9 15M19.5 4.5h-4M19.5 4.5v4M6.5 12.5l5 5M9 15l-4.5 4.5'/%3E%3C/g%3E%3C/svg%3E");border:1px solid color-mix(in srgb,var(--zc) 42%,transparent);border-radius:calc(var(--cw) * .085);
  background:radial-gradient(ellipse 85% 70% at 50% 42%,color-mix(in srgb,var(--zc) 10%,transparent),transparent 78%),var(--z-bg);
  box-shadow:inset 0 2px 12px var(--z-inner),inset 0 0 0 1px rgba(255,255,255,.025),0 1px 0 rgba(255,255,255,.05)}
.table .z[data-kind="s"]{--zc:var(--c-s);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5c2.7-1 5.4-.8 8 .9 2.6-1.7 5.3-1.9 8-.9v13c-2.7-1-5.4-.8-8 .9-2.6-1.7-5.3-1.9-8-.9zM12 6.4v13.5'/%3E%3C/g%3E%3C/svg%3E")}
.table .z[data-kind="field"]{--zc:var(--c-field);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19l5.5-8.5 3.5 5 2.5-3.5L20.5 19zM3 19h17.5'/%3E%3C/g%3E%3Ccircle cx='17' cy='6' r='2' fill='black'/%3E%3C/svg%3E")}
.table .z[data-kind="gy"]{--zc:var(--c-gy);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20v-9.5a5 5 0 0 1 10 0V20zM4.5 20h15M12 10.5v5M10 12.5h4'/%3E%3C/g%3E%3C/svg%3E")}
.table .z[data-kind="ban"]{--zc:var(--c-ban);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 .01 0M12 8a4 4 0 1 0 .01 0M12 3.5v4.5M12 16v4.5M3.5 12H8M16 12h4.5'/%3E%3C/g%3E%3C/svg%3E")}
.table .z[data-kind="deck"]{--zc:var(--c-deck);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.5h10.5v15H8zM5.5 6v14.5H16'/%3E%3C/g%3E%3C/svg%3E")}
.table .z[data-kind="extra"]{--zc:var(--c-extra);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a5 5 0 1 0 10 0a5 5 0 1 0-10 0M10.5 12a5 5 0 1 0 10 0a5 5 0 1 0-10 0'/%3E%3C/g%3E%3C/svg%3E")}
.table .z::before,.table .z.pile::before{display:block;content:"";position:absolute;inset:3px;pointer-events:none;border-radius:calc(var(--cw) * .06);
  border:1px solid color-mix(in srgb,var(--zc) 14%,transparent);opacity:.6;
  background:
   linear-gradient(var(--zc),var(--zc)) left top/7px 1px no-repeat,linear-gradient(var(--zc),var(--zc)) left top/1px 7px no-repeat,
   linear-gradient(var(--zc),var(--zc)) right top/7px 1px no-repeat,linear-gradient(var(--zc),var(--zc)) right top/1px 7px no-repeat,
   linear-gradient(var(--zc),var(--zc)) left bottom/7px 1px no-repeat,linear-gradient(var(--zc),var(--zc)) left bottom/1px 7px no-repeat,
   linear-gradient(var(--zc),var(--zc)) right bottom/7px 1px no-repeat,linear-gradient(var(--zc),var(--zc)) right bottom/1px 7px no-repeat}
.table .z::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--cw) * .32);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:var(--zc);opacity:var(--ico-op);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;transition:opacity .2s,background .2s}
.table .z:has(.zl)::after{top:42%}
.table .z .zl{top:auto;bottom:calc(var(--cw) * .11);transform:none;font:700 max(7px,calc(var(--cw) * .072))/1 var(--font);letter-spacing:.22em;padding-left:.22em;color:color-mix(in srgb,var(--zc) 80%,transparent)}
.table.portrait .z.pile::before,.table.portrait .z[data-kind="field"]::before{background:none}
.table.portrait .z.pile::after{width:calc(var(--cw) * .24)}
.table.portrait .z .zl{font-size:7px;letter-spacing:.14em;bottom:5px}
.table.portrait .z[data-kind="ban"] .zl{font-size:0}
.table.portrait .z[data-kind="ban"] .zl::after{content:"Ban";font-size:7px}
.table .z .deckstack{z-index:1}
.table .z .cnt{box-shadow:0 0 0 1.5px var(--cnt-ring),0 3px 9px rgba(0,0,0,.45)}
/* interactive states stay on top of the new frames */
.table .z.drop{border-color:var(--hl);background:color-mix(in srgb,var(--hl) 18%,var(--z-bg));box-shadow:0 0 0 1px var(--hl),0 0 22px -2px var(--hl-soft),inset 0 0 18px rgba(0,0,0,.2)}
.table .z.drop.over{background:color-mix(in srgb,var(--hl) 36%,transparent)}
.table .z.pick{border-color:var(--hl);background:color-mix(in srgb,var(--hl) 14%,var(--z-bg));box-shadow:0 0 0 1px var(--hl),0 0 16px -2px var(--hl-soft)}
.table .z.pick.on{background:color-mix(in srgb,var(--hl) 42%,transparent)}
.table .z.glowpile{border-color:var(--hl);box-shadow:0 0 0 2px var(--hl),0 0 22px var(--hl-soft)}
.table .z.pick::after,.table .z.drop::after,.table .z.glowpile::after{background:var(--hl);opacity:.85}
.table .z.pick::before,.table .z.drop::before{--zc:var(--hl);opacity:.85}

/* centre row: turn label, phase bar, status */
.table .phases{gap:2px;padding:3px;border-radius:999px;background:linear-gradient(180deg,rgba(22,26,56,.94),rgba(8,10,26,.96));border:1px solid rgba(233,180,90,.32);
  box-shadow:0 0 0 4px rgba(5,7,20,.32),0 12px 26px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.table .ph{color:rgba(226,220,204,.62);letter-spacing:.12em;box-shadow:none;background:transparent;transition:color .18s,background .18s,box-shadow .18s,transform .12s}
.table .ph.past{color:rgba(226,220,204,.26)}
.table .ph.go{color:#F3EEE4;cursor:pointer;background:rgba(255,255,255,.055);box-shadow:none}
.table .ph.go::after{content:"";position:absolute;left:50%;bottom:2px;width:3px;height:3px;border-radius:50%;background:var(--hl);transform:translateX(-50%);opacity:.9}
.table .ph.go:hover{background:rgba(233,180,90,.2);color:#FBE3A6}
.table .ph.go:active{transform:scale(.95)}
.table .ph:focus-visible{outline:2px solid var(--hl);outline-offset:1px}
.table .ph.cur,.table .ph.cur.go{color:#FFE6A8;background:radial-gradient(ellipse 90% 110% at 50% 115%,rgba(246,205,107,.5),rgba(233,180,90,.14) 72%);
  box-shadow:inset 0 0 0 1px rgba(246,205,107,.8),0 0 14px -2px rgba(233,180,90,.75);text-shadow:0 0 8px rgba(246,205,107,.55)}
.table .ph.cur::after{display:none}
.table .ph.endturn{margin-left:5px;color:#1C1407;background:linear-gradient(180deg,#FBD978,#D99A2B);text-shadow:none;letter-spacing:.12em;
  box-shadow:inset 0 0 0 1px rgba(255,236,180,.7),inset 0 -2px 0 rgba(120,70,0,.25),0 6px 16px -6px rgba(212,150,42,.95)}
.table .ph.endturn::after{display:none}
.table .ph.endturn:hover{background:linear-gradient(180deg,#FFE596,#E5A73A);color:#1C1407}
.table .turnchip{font:600 .6rem/14px var(--font);letter-spacing:.24em;color:color-mix(in srgb,var(--muted) 90%,transparent);padding:0 10px 0 8px;border-radius:999px;
  background:linear-gradient(90deg,var(--felt-b) 70%,transparent)}
.table .turnchip::before{content:"";display:inline-block;width:5px;height:5px;margin:0 9px 1px 0;transform:rotate(45deg);background:var(--hl);box-shadow:0 0 6px var(--hl-soft)}
.table .turnchip:empty{display:none}
.table .statusline:not(.turnchip){font:500 .74rem/14px var(--font);letter-spacing:.02em;padding:0 8px 0 14px;border-radius:999px;background:linear-gradient(270deg,var(--felt-b) 70%,transparent)}
.table .statusline:not(.turnchip):empty{background:none}
.table.portrait .statusline:not(.turnchip){padding:0 14px;background:radial-gradient(ellipse 60% 100% at 50% 50%,var(--felt-b) 55%,transparent 100%);line-height:18px}
.table.rail .statusline:not(.turnchip){background:none;padding:0}
:root[data-theme="light"] .table .phases{background:linear-gradient(180deg,#FFFDF7,#F3E9D2);border-color:rgba(150,110,40,.38);box-shadow:0 0 0 4px rgba(255,250,236,.5),0 10px 22px -14px rgba(90,60,10,.5),inset 0 1px 0 #fff}
:root[data-theme="light"] .table .ph{color:rgba(60,45,20,.6)}
:root[data-theme="light"] .table .ph.past{color:rgba(60,45,20,.28)}
:root[data-theme="light"] .table .ph.go{color:#2A2010;background:rgba(120,90,30,.07)}
:root[data-theme="light"] .table .ph.go:hover{background:rgba(212,150,42,.24);color:#2A2010}
:root[data-theme="light"] .table .ph.cur,:root[data-theme="light"] .table .ph.cur.go{color:#73470A;background:radial-gradient(ellipse 90% 110% at 50% 115%,rgba(233,170,60,.45),rgba(233,180,90,.12) 72%);box-shadow:inset 0 0 0 1px rgba(190,130,30,.75),0 0 12px -3px rgba(212,150,42,.7);text-shadow:none}
:root[data-theme="light"] .table .ph.endturn{color:#1C1407;background:linear-gradient(180deg,#FBD978,#D99A2B);box-shadow:inset 0 0 0 1px rgba(255,236,180,.7),inset 0 -2px 0 rgba(120,70,0,.25),0 6px 14px -6px rgba(180,120,20,.8)}
:root[data-theme="light"] .table .ph.endturn:hover{background:linear-gradient(180deg,#FFE596,#E5A73A)}
:root[data-theme="light"] .table .statusline{text-shadow:none}

/* turn banner: a quick cinematic strip, light streak, crest, bold title, turn medallion; mine blue and gold, the opponent's crimson */
.table .turnbanner{--acc:#F6CD6B;--acc2:#FFF1C8;--streak:rgba(170,210,255,.55);--glow:rgba(70,130,255,.6);--crest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15c5-6 9-8 13-8s8 2 13 8c-5 6-9 8-13 8s-8-2-13-8zM16 23v6M12 22.5l-3.5 6M16 1.5v3M8.5 3.5l1.8 2.8M23.5 3.5l-1.8 2.8'/%3E%3C/g%3E%3Ccircle cx='16' cy='15' r='4.2' fill='black'/%3E%3C/svg%3E");
  top:var(--mid,50%);padding:15px 24px 16px;gap:16px;overflow:hidden;box-shadow:none;-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(90deg,transparent 0,rgba(8,22,62,.88) 16%,rgba(14,38,96,.96) 50%,rgba(8,22,62,.88) 84%,transparent 100%);
  animation:tbin var(--bms) cubic-bezier(.2,.9,.25,1) forwards}
.table .turnbanner::before{content:"";position:absolute;top:0;bottom:0;left:0;right:auto;width:34%;height:auto;opacity:0;
  background:linear-gradient(100deg,transparent 15%,var(--streak) 50%,transparent 85%);transform:translateX(-110%) skewX(-22deg);animation:tbstreak var(--bms) ease-out forwards}
.table .turnbanner::after{content:"";position:absolute;inset:0;height:auto;opacity:1;
  background:linear-gradient(90deg,transparent 6%,var(--acc) 30%,var(--acc2) 50%,var(--acc) 70%,transparent 94%) top/100% 1px no-repeat,
   linear-gradient(90deg,transparent 14%,var(--acc) 36%,var(--acc) 64%,transparent 86%) bottom/100% 1px no-repeat}
.table .turnbanner>*{position:relative;animation:tbtx var(--bms) cubic-bezier(.2,.9,.25,1) both}
.table .turnbanner b{font:700 clamp(1.45rem,3vw,2.25rem)/1 var(--serif);text-transform:uppercase;letter-spacing:.09em;color:#F4F7FF;text-shadow:0 0 18px var(--glow),0 2px 0 rgba(0,0,0,.45)}
.table .turnbanner b::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin:0 .45em 0 0;vertical-align:-.16em;background:var(--acc);-webkit-mask:var(--crest) center/contain no-repeat;mask:var(--crest) center/contain no-repeat}
.table .turnbanner b em{font-style:normal;padding:0;background:linear-gradient(180deg,#FFF0C2,#F2C462 45%,#C8871F);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(246,205,107,.45))}
.table .turnbanner i{width:1px;height:30px;transform:none;background:linear-gradient(transparent,var(--acc),transparent);box-shadow:none}
.table .turnbanner small{font:800 .64rem/1 var(--font);letter-spacing:.2em;padding:8px 11px 8px 13px;border-radius:999px;color:#22170A;
  background:radial-gradient(circle at 50% 25%,#FFEDB8,#E3A93E 62%,#A86E16);box-shadow:inset 0 0 0 1px rgba(255,244,210,.75),0 0 0 3px rgba(233,180,90,.22),0 0 18px rgba(246,205,107,.45)}
.table .turnbanner.opp{--acc:#FF9A9A;--acc2:#FFE1DA;--streak:rgba(255,190,190,.5);--glow:rgba(255,60,90,.6);
  background:linear-gradient(90deg,transparent 0,rgba(64,6,22,.9) 16%,rgba(112,14,40,.96) 50%,rgba(64,6,22,.9) 84%,transparent 100%)}
.table .turnbanner.opp b em{background:linear-gradient(180deg,#FFE6DE,#FF8E8E 50%,#D2364F);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 10px rgba(255,90,110,.5))}
.table .turnbanner.opp small{color:#fff;background:radial-gradient(circle at 50% 25%,#FFB9B9,#D0334A 62%,#7A0F22);box-shadow:inset 0 0 0 1px rgba(255,220,220,.6),0 0 0 3px rgba(220,60,80,.22),0 0 18px rgba(255,90,110,.45)}
.table .turnbanner.phase{--crest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 5L13 19M27 5h-6M27 5v6M8.5 14.5l9 9M11 21l-6 6M5 5l14 14M5 5h6M5 5v6M23.5 14.5l-9 9M21 21l6 6'/%3E%3C/g%3E%3C/svg%3E");padding:10px 24px 11px}
.table .turnbanner.phase b{font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:.12em}
.table.portrait .turnbanner{padding:11px 12px 12px;gap:10px}
.table.portrait .turnbanner b{font-size:1.3rem;letter-spacing:.06em}
.table.portrait .turnbanner.phase b{font-size:1.1rem}
.table.portrait .turnbanner small{padding:7px 9px 7px 11px;font-size:.58rem}
@keyframes tbin{0%{opacity:0;transform:translateY(-50%) scaleY(.12)}18%{opacity:1;transform:translateY(-50%) scaleY(1)}84%{opacity:1;transform:translateY(-50%) scaleY(1)}100%{opacity:0;transform:translateY(-50%) scaleY(.7)}}
@keyframes tbtx{0%,6%{opacity:0;transform:translateX(-26px)}24%{opacity:1;transform:none}84%{opacity:1;transform:none}100%{opacity:0;transform:translateX(18px)}}
@keyframes tbstreak{0%{opacity:0;transform:translateX(-110%) skewX(-22deg)}6%{opacity:1}42%{opacity:.9}52%,100%{opacity:0;transform:translateX(320%) skewX(-22deg)}}
@media (prefers-reduced-motion:reduce){
  .table::after{animation:none}
  .table .turnbanner::before{display:none}
  .table .turnbanner,.table .turnbanner>*{animation-name:bannerfade!important}
}
/* ===== END BOARD LOOK v2 ===== */

/* ===== PHONE PASS + MOTION (Oct 2026) =====
   Phones: the opponent's plate and hand in the top bar, the field in the middle, whose turn / phase and a hint in the
   middle band, my hand, then a bottom strip with my LP plate and the phase buttons (only the phases you can go to,
   as big labelled buttons, while you can act). Tapping a card opens a tray of big action buttons above the hand.
   Motion: draw flips, summon landings with an impact ring and dust, activation rings, attack lunges and hit
   flashes, shards that stream into the GY, a violet swirl for banishing, LP pops, a sliding phase highlight.
   Effects scale with --fxk (Fast animations) and are skipped with reduced motion. */
.ph .long{display:none}
.ph.endturn .s{display:none}
.ph.endturn .long{display:inline}
.ph:disabled{cursor:default}
.phases{position:relative}
.table .ph{z-index:1}
.table .phhl{position:absolute;z-index:0;left:0;top:3px;bottom:3px;width:0;border-radius:999px;pointer-events:none;
  background:radial-gradient(ellipse 90% 110% at 50% 115%,rgba(246,205,107,.5),rgba(233,180,90,.14) 72%);
  box-shadow:inset 0 0 0 1px rgba(246,205,107,.8),0 0 14px -2px rgba(233,180,90,.75);
  transition:transform .38s var(--ease),width .38s var(--ease),opacity .2s}
.table .ph.cur,.table .ph.cur.go{background:transparent!important;box-shadow:none!important}
:root[data-theme="light"] .table .phhl{background:radial-gradient(ellipse 90% 110% at 50% 115%,rgba(233,170,60,.45),rgba(233,180,90,.12) 72%);box-shadow:inset 0 0 0 1px rgba(190,130,30,.75),0 0 12px -3px rgba(212,150,42,.7)}

/* bottom action strip (portrait) */
.pstrip{position:absolute;left:0;right:0;z-index:300;pointer-events:none;display:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--felt-c) 40%,transparent),color-mix(in srgb,var(--felt-c) 92%,transparent) 40%,var(--felt-c));
  border-top:1px solid color-mix(in srgb,var(--hl) 24%,transparent);box-shadow:0 -10px 24px -18px rgba(0,0,0,.8)}
.table.portrait .pstrip{display:block}
.table.portrait .plate{height:46px;padding:3px 12px 3px 3px;gap:7px}
.table.portrait .plate .av{width:38px;height:38px}
.table.portrait .plate .lp{font-size:1.42rem;letter-spacing:-.02em}
.table.portrait .cardfab{display:none!important}
.table.portrait .ph{min-height:34px;min-width:30px;padding:0 6px;font-size:.6rem}
.table.portrait .ph.endturn{padding:0 10px;font-size:.6rem}
/* acting: only the phases you can go to, big and labelled (portrait strip and the landscape rail) */
.table.portrait .phasebar.acting .ph:not(.go),.table.rail .phasebar.acting .ph:not(.go){display:none}
.table.portrait .phasebar.acting .phases,.table.rail .phasebar.acting .phases{background:none;border:0;box-shadow:none;padding:0;gap:8px;backdrop-filter:none;-webkit-backdrop-filter:none}
.table.portrait .phasebar.acting .ph.go,.table.rail .phasebar.acting .ph.go{min-height:48px;min-width:80px;padding:0 14px;border-radius:14px;font:800 .72rem/1 var(--font);letter-spacing:.09em;text-transform:uppercase;
  color:#F3EEE4;background:linear-gradient(180deg,rgba(28,34,70,.96),rgba(10,12,30,.98));box-shadow:inset 0 0 0 1px rgba(233,180,90,.5),0 8px 18px -10px rgba(0,0,0,.9);text-shadow:none}
.table.portrait .phasebar.acting .ph.go::after,.table.rail .phasebar.acting .ph.go::after{display:none}
.table.portrait .phasebar.acting .ph.go .s,.table.rail .phasebar.acting .ph.go .s{display:none}
.table.portrait .phasebar.acting .ph.go .long,.table.rail .phasebar.acting .ph.go .long{display:inline}
.table.portrait .phasebar.acting .ph[data-ph="8"].go,.table.rail .phasebar.acting .ph[data-ph="8"].go{color:#FFD7D3;box-shadow:inset 0 0 0 1px rgba(255,120,120,.65),0 8px 18px -10px rgba(0,0,0,.9)}
.table.portrait .phasebar.acting .ph.endturn,.table.rail .phasebar.acting .ph.endturn{min-width:104px;color:#1C1407;background:linear-gradient(180deg,#FBD978,#D99A2B);box-shadow:inset 0 0 0 1px rgba(255,236,180,.7),inset 0 -2px 0 rgba(120,70,0,.25),0 8px 18px -8px rgba(212,150,42,.95)}
:root[data-theme="light"] .table.portrait .phasebar.acting .ph.go:not(.endturn),:root[data-theme="light"] .table.rail .phasebar.acting .ph.go:not(.endturn){color:#2A2010;background:linear-gradient(180deg,#FFFDF7,#F3E9D2);box-shadow:inset 0 0 0 1px rgba(150,110,40,.5),0 8px 16px -10px rgba(90,60,10,.5)}
:root[data-theme="light"] .table.portrait .phasebar.acting .ph[data-ph="8"].go,:root[data-theme="light"] .table.rail .phasebar.acting .ph[data-ph="8"].go{color:#8A1E2A;box-shadow:inset 0 0 0 1px rgba(200,60,70,.6),0 8px 16px -10px rgba(90,60,10,.5)}
.table.rail .ph{min-height:34px}
/* thumb row (6 Oct 2026, second phone pass): the current phase stays readable beside the buttons as a passive
   label (the sliding gold ring sits on it); the buttons are a little narrower so plate + label + two buttons fit
   in 390 px. Board._fitStrip() adds .striptight (plate drops its avatar / name) and .stripnarrow (label goes)
   when the row would still touch the plate. Landscape: the bar sits at the bottom of the rail, not its top. */
.table.portrait .phasebar.acting .phases,.table.rail .phasebar.acting .phases{gap:6px}
.table.portrait .phasebar.acting .ph.go,.table.rail .phasebar.acting .ph.go{min-width:72px;padding:0 11px}
.table.portrait .phasebar.acting .ph.endturn,.table.rail .phasebar.acting .ph.endturn{min-width:96px}
.table.portrait .phasebar.acting .ph.cur:not(.go),.table.rail .phasebar.acting .ph.cur:not(.go){display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:44px;padding:0 8px;
  font:800 .72rem/1 var(--font);letter-spacing:.06em;color:var(--hl);opacity:1;pointer-events:none}
:root[data-theme="light"] .table.portrait .phasebar.acting .ph.cur:not(.go),:root[data-theme="light"] .table.rail .phasebar.acting .ph.cur:not(.go){color:#7A4E0C}
.table.stripnarrow .phasebar.acting .ph.cur:not(.go){display:none}
.table.portrait.striptight .plate.me .av{display:none}
.table.portrait.striptight .plate.me{padding-left:12px}
.table.rail.striptight .plate.me .nm{display:none}
.table.rail .sheet2{bottom:58px}
.table.portrait .phasebar.acting .ph.go:active,.table.rail .phasebar.acting .ph.go:active{transform:scale(.95)}
/* middle band: whose turn + phase (left), the hint (rest) */
:is(.table.portrait,.table.rail) .turnchip{display:flex!important;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;pointer-events:none;
  font:800 .58rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#1C1407;background:linear-gradient(180deg,#FBD978,#D99A2B);
  box-shadow:inset 0 0 0 1px rgba(255,236,180,.6),0 4px 12px -4px rgba(212,150,42,.8)}
:is(.table.portrait,.table.rail) .turnchip:empty{display:none!important}
:is(.table.portrait,.table.rail) .turnchip::before{display:none}
:is(.table.portrait,.table.rail) .turnchip b{color:inherit;font-weight:800}
:is(.table.portrait,.table.rail) .turnchip span{opacity:.72}
:is(.table.portrait,.table.rail) .turnchip.theirs{color:#fff;background:linear-gradient(180deg,#E26C80,#9C2340);box-shadow:inset 0 0 0 1px rgba(255,200,200,.45),0 4px 12px -4px rgba(200,40,70,.7)}
:is(.table.portrait,.table.rail) .turnchip.tick{animation:chiptick .45s var(--ease)}
@keyframes chiptick{0%{transform:translateY(-50%) scale(.82);opacity:.3}60%{transform:translateY(-50%) scale(1.07);opacity:1}100%{transform:translateY(-50%) scale(1)}}
.table.portrait .statusline:not(.turnchip){text-align:center;font-size:.78rem;line-height:22px;padding:0 6px}
.table.portrait .statusline:not(.turnchip):empty{background:none}
/* chain list on phones: number + picture only (the names are on the cards and in the log) */
.table.portrait .chainstack{gap:4px}
.table.portrait .chainstack .link{padding:4px;gap:5px;min-height:44px;max-width:none}
.table.portrait .chainstack .link span:not(.n){display:none}
.table.portrait .chainstack .link img{width:30px}
.table.portrait .chainstack .ch-title{font-size:.52rem;margin:0}
/* a card that is a link in the current chain wears its number */
.card .chainno{position:absolute;right:-9px;top:-9px;z-index:6;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 .74rem/1 var(--font);color:#1B2233;
  background:linear-gradient(135deg,#F6CD6B,#D4962A);box-shadow:0 0 0 2px rgba(10,14,26,.85),0 0 14px rgba(246,205,107,.8);animation:cnpop .4s var(--ease)}
.card .chainno.opp{color:#fff;background:linear-gradient(135deg,#C9B6F0,#7C62C9);box-shadow:0 0 0 2px rgba(10,14,26,.85),0 0 14px rgba(180,150,255,.8)}
@keyframes cnpop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}

/* action tray (phones, touch): big buttons near the thumb; the card stands up out of the hand */
.menu.tray{min-width:0;max-width:none;padding:10px;border-radius:18px;z-index:960;background:linear-gradient(180deg,#17223D,#0A1020);border:1px solid rgba(233,180,90,.4);color:#F3EEE4;
  box-shadow:0 26px 54px -18px rgba(0,0,0,.95);animation:trayin .22s var(--ease)}
.table.portrait .menu.tray{max-width:none}
.menu.tray::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#F6CD6B,transparent)}
.tray .trh{display:flex;align-items:center;gap:8px;padding:0 0 8px 4px}
.tray .trt{flex:1;min-width:0}
.tray .trt b{display:block;font:600 1.15rem/1.15 var(--serif);color:#F3EEE4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums}
.tray .trt small{display:block;margin-top:3px;font:700 .58rem/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:#E9B45A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu.tray .trx{width:44px;height:44px;min-height:44px;flex:none;display:grid;place-items:center;padding:0;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#F3EEE4}
.tray .trx svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tray .trb{display:flex;flex-wrap:wrap;gap:8px}
.menu.tray .ta{flex:1 1 140px;width:auto;min-width:0;min-height:60px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:8px 10px;border-radius:14px;
  border:1px solid rgba(233,180,90,.32);background:rgba(255,255,255,.045);color:#F3EEE4;text-align:left;transition:transform .12s,background .15s,border-color .15s}
.menu.tray .ta:first-child{background:linear-gradient(180deg,rgba(246,205,107,.24),rgba(212,150,42,.1));border-color:rgba(246,205,107,.75)}
.menu.tray .ta:hover,.menu.tray .ta:focus-visible{background:rgba(233,180,90,.18);border-color:#F6CD6B;outline:0}
.menu.tray .ta.attack{border-color:rgba(255,120,120,.75);background:linear-gradient(180deg,rgba(224,80,90,.34),rgba(224,80,90,.12))}
.tray .ta .pv{width:34px;height:48px;flex:none;display:grid;place-items:center}
.tray .ta .pv:empty{display:none}
.tray .ta .pv img{width:32px;border-radius:3px;box-shadow:0 6px 14px -6px rgba(0,0,0,.9)}
.tray .ta .pv img.def{transform:rotate(-90deg)}
.tray .ta .pv svg{width:26px;height:26px;fill:none;stroke:#F6CD6B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tray .ta.attack .pv svg{stroke:#FF9A9A}
.tray .tl{min-width:0}
.tray .tl b{display:block;font:700 .95rem/1.15 var(--font);color:#F3EEE4}
.tray .tl small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font:500 .7rem/1.25 var(--font);color:#A8AFBD}
@keyframes trayin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card.raised{translate:0 -6%}
.card.hand.me.raised{translate:0 -20%}
.card.raised .f{box-shadow:0 0 0 3px var(--hl),0 0 26px 6px var(--hl-soft),0 14px 24px -10px rgba(0,0,0,.7)}
/* the in-place bar's reason line ("Equip only to a Spellcaster-Type monster") */
.pickbar .t .why{display:block;margin-top:3px;font:600 .72rem/1.25 var(--font);color:color-mix(in srgb,var(--target) 75%,var(--ink));white-space:normal}
/* the drawer: tools with labels on phones */
.tbtn .tl{display:none}
@media (max-width:900px),(max-height:560px){
  .d-right .tools{gap:10px;padding:12px}
  .d-right .trow.view{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .d-right .trow.view .tbtn{width:auto;height:auto;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:14px;padding:6px 2px}
  .d-right .trow.view .tbtn .tl{display:block;font:600 .62rem/1.1 var(--font);letter-spacing:.02em;color:var(--muted);white-space:nowrap}
  .d-right .trow.act .tbtn{min-height:44px}
  .d-right .volpop{position:static;grid-column:1/-1;min-width:0;margin-top:2px}
  .tbtn.sm{width:44px;height:44px}
  .fab{height:44px;min-width:44px}
}
/* touch: every target at least 44 px */
@media (pointer:coarse){
  .sbtn{min-height:44px}
  .sh-min,.modal .x{width:44px;height:44px}
  .chip2{min-height:44px}
  .stepper button{width:44px;height:44px}
  .pickbar .sbtn,.table.portrait .pickbar .sbtn{min-height:44px;min-width:44px}
  body.playpage .top .brand{min-height:44px;display:inline-flex;align-items:center}
  .dropask .cancel,.table.portrait .dropask .cancel{min-height:44px}
  body.playpage .top nav a{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center}
  .duel button,.sheet2 button,.overlay button{touch-action:manipulation}
}
@media (hover:none){.card.hand.me:not(.fd):hover .in{transform:none}}
/* no pull to refresh or rubber band scrolling while duelling */
html:has(body.in-duel),body.in-duel{overscroll-behavior:none}
/* toasts stay off my hand during a duel */
body.in-duel .toast{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 60px);transform:translate(-50%,-12px)}
body.in-duel .toast.show{transform:translate(-50%,0)}

/* ---- motion ---- */
.table{--fxk:1}
.plate .lp{display:inline-block}
.plate.hit .lp,.plate.heal .lp{animation:lppop .55s var(--ease)}
@keyframes lppop{0%{transform:scale(1)}28%{transform:scale(1.2)}100%{transform:scale(1)}}
.table.portrait .dmgfloat{font-size:2.3rem}
/* hand: playable cards breathe, new cards pop in once they arrive */
.card.hand.me.can:not(.raised):not(.dragging) .in{animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{translate:0 0}50%{translate:0 -3%}}
.card.hand.me.newin.newin .in{animation:popin .5s .32s var(--ease) both}
@keyframes popin{0%{scale:1}45%{scale:1.1}100%{scale:1}}
/* summon / set landing, struck card */
.card.landing .in{animation:land calc(.5s * var(--fxk)) cubic-bezier(.3,1.4,.5,1)}
@keyframes land{0%{scale:1.34;opacity:.35;filter:brightness(1.7)}55%{scale:.95;opacity:1}100%{scale:1;filter:none}}
.card.landsoft .in{animation:landsoft calc(.4s * var(--fxk)) var(--ease)}
@keyframes landsoft{0%{scale:1.12}100%{scale:1}}
.card.struck .in{animation:struck calc(.45s * var(--fxk)) ease-out}
@keyframes struck{0%{translate:0 0;filter:brightness(2) saturate(.4)}20%{translate:-7% 0}40%{translate:6% 0;filter:brightness(1.4)}60%{translate:-4% 0}80%{translate:2% 0}100%{translate:0 0;filter:none}}
.impact,.actring,.hitflash,.swirl{position:absolute;z-index:745;width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);border-radius:50%;pointer-events:none}
.impact{border:3px solid rgba(255,244,214,.95);background:radial-gradient(circle,rgba(255,230,170,.32),transparent 66%);box-shadow:0 0 18px rgba(255,220,140,.85),inset 0 0 14px rgba(255,220,140,.6);animation:ringout calc(.6s * var(--fxk)) ease-out forwards}
.impact.sp{border-width:4px;border-color:#FFE7A6;box-shadow:0 0 30px rgba(246,205,107,.95),inset 0 0 22px rgba(246,205,107,.7)}
@keyframes ringout{0%{transform:scale(.25);opacity:1}100%{transform:scale(1);opacity:0}}
.dust{position:absolute;z-index:744;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,240,215,.95),rgba(220,190,140,0) 70%);animation:dust calc(.62s * var(--fxk)) ease-out forwards}
@keyframes dust{0%{transform:translate(0,0) scale(var(--ds));opacity:.95}100%{transform:translate(var(--dx),var(--dy)) scale(calc(var(--ds) * 2.4));opacity:0}}
.actring::before,.actring::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;border:2px solid #F6CD6B;box-shadow:0 0 22px rgba(246,205,107,.75),inset 0 0 18px rgba(246,205,107,.45);animation:ringout calc(.8s * var(--fxk)) ease-out forwards}
.actring::after{animation-delay:calc(.18s * var(--fxk))}
.actring.opp::before,.actring.opp::after{border-color:#C9B6FF;box-shadow:0 0 22px rgba(180,150,255,.75),inset 0 0 18px rgba(180,150,255,.45)}
.hitflash{background:radial-gradient(circle,#fff 0,rgba(255,226,190,.9) 18%,rgba(255,110,80,.45) 45%,transparent 70%);mix-blend-mode:screen;animation:hitflash calc(.5s * var(--fxk)) ease-out forwards}
@keyframes hitflash{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.15);opacity:0}}
.swirl{background:conic-gradient(from 0deg,transparent,rgba(170,120,255,.85),transparent 35%,rgba(120,70,230,.75),transparent 70%,rgba(200,160,255,.85),transparent);
  -webkit-mask:radial-gradient(circle,transparent 26%,#000 30%,#000 58%,transparent 70%);mask:radial-gradient(circle,transparent 26%,#000 30%,#000 58%,transparent 70%);
  filter:drop-shadow(0 0 10px rgba(160,110,255,.8));animation:swirl calc(.9s * var(--fxk)) ease-in forwards}
@keyframes swirl{0%{transform:scale(.4) rotate(0);opacity:0}20%{opacity:1}100%{transform:scale(1.25) rotate(540deg);opacity:0}}
.shard{animation:shard2 calc(.85s * var(--fxk,1)) cubic-bezier(.3,.6,.4,1) both}
.shard.ban{filter:hue-rotate(220deg) saturate(1.6) brightness(1.15)}
@keyframes shard2{0%{opacity:1;transform:translate(0,0) rotate(0)}38%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}100%{opacity:0;transform:translate(var(--gx),var(--gy)) rotate(calc(var(--rot) * 2)) scale(.2)}}
.table.shake{animation:tshake calc(.32s * var(--fxk))}
.table.shake2{animation:tshake2 calc(.42s * var(--fxk))}
@keyframes tshake{0%,100%{translate:0 0}25%{translate:-3px 2px}50%{translate:3px -2px}75%{translate:-2px 1px}}
@keyframes tshake2{0%,100%{translate:0 0}15%{translate:-6px 3px}35%{translate:6px -3px}55%{translate:-4px 2px}75%{translate:3px -1px}}
.fx .aim{fill:none;stroke:#FF8A8A;stroke-width:2.5;stroke-dasharray:7 7;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,80,80,.7));animation:aimdash .8s linear infinite}
.fx .aimhead{fill:#FF6B74;stroke:none;stroke-dasharray:none;animation:none}
@keyframes aimdash{to{stroke-dashoffset:-14}}
/* lobby and menus: soft entrances, press feedback */
@media (prefers-reduced-motion:no-preference){
  #lobby:not([hidden])>*{animation:rise .5s var(--ease) both}
  /* the section holding the fixed Start button (phones) only fades: a transform would make the button scroll with it */
  #lobby:not([hidden])>#stepLocal{animation-name:fadein}
  #lobby>*:nth-child(2){animation-delay:.05s}
  #lobby>*:nth-child(3){animation-delay:.1s}
  #lobby>*:nth-child(4){animation-delay:.15s}
  #lobby>*:nth-child(n+5){animation-delay:.2s}
  .modal .box2{animation:boxin .26s var(--ease)}
  .endscreen>div:not(.rays){animation:endin .6s var(--ease) both}
  .btn,.sbtn,.tbtn,.mode,.seg button,.chip2,.opt2,.lb-link{transition:transform .12s var(--ease),filter .15s,background .15s,border-color .15s,box-shadow .2s}
  .btn:active,.sbtn:active:not(:disabled),.tbtn:active,.mode:active,.seg button:active,.chip2:active,.opt2:active,.deck:active,.lb-link:active,.dropask .ch:active,.menu.tray .ta:active,.fab:active,.pc:active .im,.sdc:active{transform:scale(.96)}
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes boxin{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@keyframes endin{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .card.hand.me.can .in,.card.hand.me.newin .in,.card.landing .in,.card.landsoft .in,.card.struck .in,.table.shake,.table.shake2,.table.portrait .turnchip.tick,.card .chainno,.menu.tray{animation:none!important}
  .impact,.dust,.actring,.hitflash,.swirl,.shard{display:none}
  .fx .aim{animation:none}
  .table .phhl{transition:none}
}
/* landscape phones: the chain as a compact row on the centre line; toasts at the very top */
.table.rail .chainstack{flex-direction:row;align-items:center;gap:4px}
.table.rail .chainstack .link{padding:3px;gap:4px;min-height:44px;max-width:none}
.table.rail .chainstack .link span:not(.n){display:none}
.table.rail .chainstack .link img{width:26px}
.table.rail .chainstack .ch-title{display:none}
@media (max-height:560px){body.in-duel .toast{top:calc(env(safe-area-inset-top,0px) + 8px)}}
/* landscape rail sheet: a slimmer head and no foot note, so the choices get the room */
.table.rail .sh-head{padding:8px 10px 4px 12px}
.table.rail .sh-head .src{width:32px}
.table.rail .sh-head .t b{font-size:1rem}
.table.rail .sh-head .t span{font-size:.74rem}
.table.rail .sh-foot{padding:6px 10px 8px}
.table.rail .sh-foot .note{display:none}
/* ===== END PHONE PASS + MOTION ===== */

/* response sheet: "Not this turn" menu (ui/prompts.js _chain), Options "Never ask about" list */
.mutemenu{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 16px;border-top:1px solid var(--sheet-line);max-height:40vh;overflow:auto}
.mutemenu b{width:100%;font-size:.78rem;color:var(--muted);font-weight:600}
.mutemenu button{border:1px solid var(--sheet-line);background:var(--surface);color:var(--ink);font:600 .82rem/1.2 var(--font);padding:9px 12px;border-radius:999px;cursor:pointer;text-align:left}
.mutemenu button:focus-visible{outline:2px solid var(--hl);outline-offset:2px}
@media (pointer:coarse){.mutemenu button{min-height:44px}}
.neverlist{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.neverlist .sbtn.nv{text-transform:none;letter-spacing:0;padding:8px 12px;font-weight:600}
@media (pointer:coarse){.neverlist .sbtn.nv{min-height:44px}}


/* cards I can play: a clear warm glow that breathes (the shadow rule above would otherwise mute it) */
.table .card.can .f{box-shadow:0 0 0 1.5px #FFD66E,0 0 8px 2px rgba(255,205,90,.6),0 0 18px 4px rgba(255,190,60,.22),0 10px 16px -8px rgba(0,0,0,.7)}
@property --cana{syntax:"<angle>";inherits:false;initial-value:0deg}
.table .card.can::after{inset:-3px;padding:2px;border-radius:calc(var(--cw) * .08);opacity:1;
  background:conic-gradient(from var(--cana),rgba(255,214,110,.15) 0 55%,#FFD66E 72%,#FFFFFF 80%,#FFD66E 86%,rgba(255,214,110,.15) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  box-shadow:none;filter:drop-shadow(0 0 3px rgba(255,210,100,.6));animation:canrun 2.2s linear infinite}
.table .card.can .f{animation:canbreathe 1.8s ease-in-out infinite}
@keyframes canrun{to{--cana:360deg}}
@keyframes canbreathe{50%{box-shadow:0 0 0 1.5px #FFE08A,0 0 12px 3px rgba(255,205,90,.7),0 0 24px 6px rgba(255,190,60,.28),0 10px 16px -8px rgba(0,0,0,.7)}}
@media (prefers-reduced-motion:reduce){.table .card.can::after,.table .card.can .f{animation:none}}
.table .card.pick .f{box-shadow:0 0 0 2px var(--target),0 0 20px 3px color-mix(in srgb,var(--target) 45%,transparent)}
.table .card.pick.on .f{box-shadow:0 0 0 3px var(--ok),0 0 24px 4px color-mix(in srgb,var(--ok) 55%,transparent)}
.table .card.solving .f{box-shadow:0 0 0 3px #fff,0 0 30px 8px var(--hl-soft)}

/* ===== MODERN FIELD (Oct 2026, Genesys and Advanced): Extra Monster Zones, Xyz materials, Link arrows, Pendulum scales =====
   Same visual language as BOARD LOOK v2: framed zones in a zone colour with an engraved icon, gold count badges. board.js
   adds the .z[data-kind="emz"] zones (Advanced only) and the .matstack / .mats / .larr / .scl marks on cards, and a .fu
   badge on the Extra Deck pile (face-up Pendulum Monsters). */
.table .z[data-kind="emz"]{--zc:var(--c-extra);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.8 4.5v9L12 21l-7.8-4.5v-9z'/%3E%3Cpath d='M12 8l3.5 2v4L12 16l-3.5-2v-4z'/%3E%3C/g%3E%3C/svg%3E")}
/* Xyz materials: the edges of the cards under the monster, and how many (tap: the list) */
.card .matstack{position:absolute;inset:0;z-index:-1;pointer-events:none}
.card .matstack i{position:absolute;inset:0;border-radius:calc(var(--cw) * .05);background:#2a1a0c url(/img/back.jpg) center/cover;box-shadow:0 0 0 1px rgba(233,180,90,.6),0 2px 6px rgba(0,0,0,.5)}
.card .matstack i:nth-child(1){transform:translate(6%,4%)}
.card .matstack i:nth-child(2){transform:translate(11%,7.5%)}
.card .matstack i:nth-child(3){transform:translate(16%,11%)}
.card .mats{position:absolute;right:-10px;top:24%;z-index:6;min-width:24px;height:24px;padding:0 7px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font:800 .7rem/1 var(--font);color:#1B2233;background:linear-gradient(135deg,#F6CD6B,#D4962A);box-shadow:0 0 0 1.5px var(--cnt-ring),0 3px 9px rgba(0,0,0,.45)}
.card .mats::before{content:"";width:7px;height:9px;margin-right:4px;border-radius:2px;border:1.5px solid currentColor;box-shadow:2px -2px 0 -.5px currentColor}
@media (pointer:coarse){.card .mats::after{content:"";position:absolute;inset:-10px}}
/* Link arrows: one small arrowhead per printed Link Arrow, on that edge or corner (turned for the opponent's monsters) */
.card .larr{position:absolute;inset:0;z-index:4;pointer-events:none}
.card .larr.opp{transform:rotate(180deg)}
.card .larr i{position:absolute;width:calc(var(--cw) * .2);height:calc(var(--cw) * .12);clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#FFB27A,#E2382E 70%);filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.card .larr i.t{left:50%;top:0;transform:translate(-50%,-50%) translateY(-30%)}
.card .larr i.b{left:50%;top:100%;transform:translate(-50%,-50%) rotate(180deg) translateY(-30%)}
.card .larr i.l{left:0;top:50%;transform:translate(-50%,-50%) rotate(-90deg) translateY(-30%)}
.card .larr i.r{left:100%;top:50%;transform:translate(-50%,-50%) rotate(90deg) translateY(-30%)}
.card .larr i.tl{left:0;top:0;transform:translate(-50%,-50%) rotate(-45deg) translateY(-15%)}
.card .larr i.tr{left:100%;top:0;transform:translate(-50%,-50%) rotate(45deg) translateY(-15%)}
.card .larr i.bl{left:0;top:100%;transform:translate(-50%,-50%) rotate(-135deg) translateY(-15%)}
.card .larr i.br{left:100%;top:100%;transform:translate(-50%,-50%) rotate(135deg) translateY(-15%)}
.stat span.lk{background:linear-gradient(135deg,#4E8FD6,#1D4F8E);color:#fff;letter-spacing:.04em}
/* Pendulum scales on a card in a Pendulum Zone: left scale blue, right scale red */
.card .scl{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:4;display:flex;gap:1px;border-radius:999px;overflow:hidden;pointer-events:none;
  font:800 max(9px,calc(var(--cw) * .12))/1 var(--font);font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px rgba(233,180,90,.7),0 2px 6px rgba(0,0,0,.55)}
.card .scl i{font-style:normal;padding:3px 6px;color:#fff}
.card .scl i:first-child{background:linear-gradient(135deg,#4E8FD6,#2458A8)}
.card .scl i:last-child{background:linear-gradient(135deg,#E0605A,#A8282E)}
.card .scl i:first-child::before{content:"\25C2";margin-right:3px;opacity:.8}
.card .scl i:last-child::after{content:"\25B8";margin-left:3px;opacity:.8}
/* face-up cards in the Extra Deck (Pendulum Monsters): their count on the pile */
.z .fu{position:absolute;left:-6px;top:-7px;z-index:400;min-width:22px;height:22px;padding:0 6px;border-radius:11px;display:grid;place-items:center;pointer-events:none;
  font:700 .66rem/1 var(--font);color:#fff;background:linear-gradient(135deg,#3FC7B4,#2458A8);box-shadow:0 0 0 1.5px var(--cnt-ring),0 3px 9px rgba(0,0,0,.45)}
.table.portrait .z .fu{left:-5px;top:-6px;min-width:20px;height:20px;font-size:.62rem}
/* the Pendulum label on Spell & Trap Zones 1 and 5 fits the narrow phone zones */
.table.rail .z[data-kind="s"] .zl,.table.portrait .z[data-kind="s"] .zl,.table.rail .z[data-kind="emz"] .zl{letter-spacing:.04em;padding-left:.04em;font-size:6.5px}
/* Card details: Xyz materials and Pendulum scales lines */
.dp-mats{margin-top:8px;font-size:.8rem;color:var(--muted)}
.dp-mats b{color:var(--ink);font-weight:700}
.dp-loading{color:var(--muted);font-style:italic}
/* Linked zones (Advanced): zones a face-up Link Monster points to glow in the Link Arrow colour (board.js _linked);
   brighter for my Link Monsters, dimmer for the opponent's */
.table .z[data-lk]:not(.pick):not(.drop){border-color:#FF5A44;background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(255,74,58,.22),transparent 80%),var(--z-bg);
  box-shadow:inset 0 0 0 1px rgba(255,120,90,.55),inset 0 0 calc(var(--cw) * .3) rgba(255,60,40,.3),0 0 14px rgba(255,60,40,.45)}
.table .z[data-lk="op"]:not(.pick):not(.drop){border-color:rgba(255,90,68,.6);background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(255,74,58,.12),transparent 80%),var(--z-bg);
  box-shadow:inset 0 0 calc(var(--cw) * .22) rgba(255,60,40,.2)}
/* ===== END MODERN FIELD ===== */
/* pile window: one fixed size whatever card is shown (Oct 2026). The box keeps its width and height; the card grid
   and the detail panel scroll inside it, and the detail picture has a fixed size, so tapping cards never resizes it. */
@media (min-width:761px){
  .modal .box2:has(.pilewrap){height:min(86vh,680px);overflow:hidden;display:flex;flex-direction:column}
  .modal .box2:has(.pilewrap) .pilewrap{flex:1;min-height:0;align-items:stretch}
  .modal .box2:has(.pilewrap) .pilemain{overflow:auto;min-height:0}
  .modal .box2:has(.pilewrap) .piledet{position:static;max-height:none;min-height:0;overflow:auto;margin-top:0;padding-top:34px}
  .modal .box2:has(.pilewrap) .piledet .dp-img{width:190px;max-width:190px}
}
/* the other card windows keep one size too: the card detail (text scrolls beside the fixed picture) and Xyz materials */
@media (min-width:761px){
  .modal .box2:has(.mdetail){height:min(86vh,600px);overflow:hidden}
  .modal .box2:has(.mdetail) .mdetail{height:100%;align-items:stretch}
  .modal .box2:has(.mdetail) .dp-info{overflow:auto;min-height:0;padding-right:6px}
  .modal .box2:has(.matwrap){width:min(1040px,94vw);max-width:none;height:min(86vh,680px);overflow:auto}
}

/* room view cleanup */
.room-live{padding:20px 22px}
.rl-top{align-items:center;gap:16px}
.rl-code b{font-size:2rem;margin-top:4px}
.rl-share{align-items:center}
.rl-share input{min-height:44px;padding:0 14px;border-radius:12px}
.room-live .lb-status{margin-top:12px;font-size:.86rem}
.rl-players{margin-top:16px}
.rl-p{border-radius:16px;background:var(--surface-2)}
.rl-actions{display:grid;grid-template-columns:auto auto 1fr;gap:14px 24px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:1100px){.rl-actions{grid-template-columns:minmax(0,1fr)}.rl-toss .seg{flex-wrap:wrap}}
.rl-toss{margin-right:0;gap:8px}
.rl-toss::before{content:attr(data-label);font:700 .62rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.rl-toss .seg{align-self:flex-start}
.rl-toss small{font-size:.76rem;line-height:1.35}
.rl-go{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:18px}
.rl-note{margin-top:12px;font-size:.76rem}
#roomChat.rchat{margin:12px 0 0;justify-content:flex-end}
@media (max-width:520px){.rl-go{flex-direction:column-reverse;align-items:stretch}.rl-go .btn{width:100%}}

/* replay (watch a recorded duel): a bar over the table, no Concede / Leave */
.replaybar{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 34px -14px rgba(0,0,0,.8);font:500 .8rem/1 var(--font);color:var(--muted);max-width:min(96vw,760px)}
.replaybar b{font:700 .66rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.replaybar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.replaybar .seg{display:flex;gap:2px}.replaybar .seg button{border:1px solid var(--line);background:transparent;color:var(--muted);font:600 .72rem/1 var(--font);padding:7px 9px;border-radius:999px;cursor:pointer}
.replaybar .seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--gold)}
.replaybar a.sbtn{text-decoration:none;display:inline-flex;align-items:center}
body.replaying .trow.act,body.replaying #volPop{display:none}
@media (max-width:760px){.replaybar{top:auto;bottom:10px;left:8px;right:8px;transform:none;max-width:none;border-radius:16px;flex-wrap:wrap}}
/* options panel: the segmented rows wrap on narrow screens instead of running off the edge */
.optrow .seg{flex-wrap:wrap}
/* deck picker v2 (13 Oct 2026): card tiles with sans names under the art, pill tabs, no scroll box inside the page
   (two rows, then "Show all"), the banner grows to fit its chips */
.dtabs{gap:6px;border-bottom:0;margin:2px 0 12px;padding:2px}
.dtabs button{padding:8px 14px;min-height:36px;border-radius:999px;border:1px solid var(--line);font:600 .8rem/1 var(--font);color:var(--muted);background:transparent;box-shadow:none}
.dtabs button[aria-selected="true"]{color:#141414;background:#F2EEE4;border-color:#F2EEE4;box-shadow:none}
.dtabs button[aria-selected="true"] i{opacity:.55}
.dtabs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.decks{max-height:none;overflow:visible;padding:0;margin:0;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.deck{align-self:stretch;display:flex;flex-direction:column;text-align:left;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;transition:border-color .15s,transform .15s}
.deck .dart{border:0;border-radius:0;box-shadow:none;aspect-ratio:4/3;background-size:142% auto;background-position:50% 36%;filter:none;transform:none!important}
.deck .dname{margin:0;padding:8px 10px 0;font:600 .8rem/1.25 var(--font);color:var(--ink);min-height:calc(2 * 1.25em + 8px)}
.deck small{margin:0;padding:3px 10px 10px;font:500 .68rem/1.2 var(--font);color:var(--muted)}
.deck small:empty{display:block;padding-top:0}
.deck:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));transform:translateY(-2px)}
.deck:hover .dart{transform:none}
.deck[aria-checked="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.deck[aria-checked="true"] .dart{box-shadow:none}
.deck:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.deck:focus-visible .dart{box-shadow:none}
.deck.dx{display:none}
.decks.all .deck.dx:not([hidden]){display:flex}
.deck.rnd .dart b{font-size:2.2rem}
.dmore{display:block;width:100%;margin-top:10px;min-height:40px;border-radius:12px;border:1px dashed var(--line);background:none;color:var(--muted);font:600 .8rem/1 var(--font);cursor:pointer}
.dmore:hover{color:var(--ink);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.dmore[hidden]{display:none}
.dsel{height:auto;min-height:180px;padding:18px 20px}
.dsel:has(details[open]){min-height:180px}
.dsinfo{max-width:68%;gap:8px}
.dsinfo .dpitch{color:#DDE2EC;font-size:.88rem}
.dkeys.kcs .kc{font-size:.74rem;background:rgba(10,14,24,.55);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.14)}
@media (max-width:520px){
  .decks{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:none}
  .deck .dname{font-size:.76rem;padding:7px 8px 0}
  .deck small{padding:2px 8px 8px;font-size:.64rem}
  .dsel{height:auto;min-height:0;padding:16px}
  .dsinfo{max-width:100%}
  .dsel::after{background:linear-gradient(90deg,rgba(13,19,34,.96) 45%,rgba(13,19,34,.7) 75%,rgba(13,19,34,.45))}
  .dkeys.kcs{display:none}
}
@media (max-width:760px){.decks{max-height:none}}
.deck .dart.full{background-size:cover;background-position:50% 20%}
.dsel:has(.rndart){min-height:0}.dsel .rndart b{font-size:2.4rem;opacity:.5;justify-self:end;margin-right:32px}
@media (max-width:620px){main.lobby{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}} /* room under the fixed Start button (an earlier lobby rule reset it to 40px) */

/* History: your recorded duels with Watch (app.js myReplaysHTML) */
.hist-h{margin:4px 0 8px;font:600 .9rem/1.2 var(--font)}
.hist-watch{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.hist-watch li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.hist-watch li span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.84rem}
.hist-watch small{color:var(--muted);font-size:.72rem}

/* live spectators (ui/watch.js): the "N watching" chip players see, the viewer's Live bar */
.watchchip{position:absolute;left:10px;top:6px;z-index:1000;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--plate);border:1px solid var(--plate-line);font:600 .72rem/1.2 var(--font);color:var(--ink);pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.watchchip svg,.watchbar .wcount svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.watchchip[hidden]{display:none}
.watchbar b{color:#e5484d}
.watchbar b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;animation:wlive 1.6s ease-in-out infinite}
@keyframes wlive{50%{opacity:.35}}
.watchbar .wcount{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font:600 .72rem/1 var(--font)}
body.watching .trow.act,body.watching #volPop{display:none}
@media (prefers-reduced-motion:reduce){.watchbar b::before{animation:none}}
@media (max-width:760px){
  /* above the bottom player's plate and phase bar (they stay readable), over the hand (card backs for a spectator) */
  .watchbar{flex-wrap:nowrap;gap:8px;padding:6px 6px 6px 12px;border-radius:999px;font-size:.74rem;bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .watchbar span{flex:1;min-width:0}
  .watchbar .sbtn.small{padding:6px 12px}
}

/* tray: why a monster can only be Set (app.js summonBlockNote) */
.menu.tray .trnote{margin:8px 4px 2px;font:500 .8rem/1.35 var(--font);color:var(--muted)}
/* small menu (mouse): why an Equip Spell has no Activate (app.js spellBlockNote) */
.menu:not(.tray) .trnote{margin:4px 12px 6px;font:500 .76rem/1.35 var(--font);color:var(--muted)}

/* colour-blind safe (profile setting): win/loss, LP hits and Easy/Hard labels in blue/orange, with words kept */
html.a11y-cb .plate.hit .lp{color:#F59E0B}
html.a11y-cb .r-win{color:#7FB0FF}html.a11y-cb .r-loss{color:#FBBF5A}
/* ---------- languages (assets/i18n.js): zone labels are longer than GY / Banished in every other language ---------- */
html:not([lang="en"]) .table.rail .z .zl{font-size:max(6px,calc(var(--cw) * .06))}
html:not([lang="en"]) .table .z .zl{letter-spacing:.03em;padding-left:.03em;left:2px;right:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html:not([lang="en"]) .table.portrait .z .zl{font-size:6.5px;letter-spacing:.02em}
html:not([lang="en"]) .table.portrait .z[data-kind="ban"] .zl{font-size:6.5px}
html:not([lang="en"]) .table.portrait .z[data-kind="ban"] .zl::after{content:none}

/* Exodia reveal (app.js showReveal): five pieces, head in the middle; on phones the label sits above the row */
@media (max-width:600px){.splash.exodia{gap:6px!important;flex-wrap:nowrap}.splash.exodia .lbl{position:absolute;left:50%;top:-30px;transform:translateX(-50%);margin:0}}

/* response sheet, cleaner (Laith, 14 Oct 2026): sans card rows with an Activate tag, a quiet "Stop asking" link, the
   mute choices as a plain list instead of pill chips */
.opt2.act{grid-template-columns:auto 1fr auto;padding:8px 10px 8px 8px}
.opt2.act b{font:600 .98rem/1.25 var(--font)}
.opt2.act .go{font:700 .66rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--hl);border:1px solid color-mix(in srgb,var(--hl) 45%,transparent);border-radius:999px;padding:7px 11px}
.opt2.act:hover .go{background:color-mix(in srgb,var(--hl) 16%,transparent)}
.mutelink{margin-right:auto;display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:8px 4px;color:var(--muted);font:500 .84rem/1 var(--font);cursor:pointer}
.mutelink:hover{color:var(--ink)}
.mutelink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.mutelink[aria-expanded="false"] svg{transform:rotate(180deg)}
.mutelink:focus-visible{outline:2px solid var(--hl);outline-offset:2px;border-radius:6px}
.sh-foot .note + .mutelink{margin-right:0}
.mutemenu{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;padding:6px 8px}
.mutemenu button{display:block;width:100%;border:0;background:transparent;border-radius:10px;padding:9px 10px;text-align:left}
.mutemenu button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.mutemenu button b{display:block;font:600 .9rem/1.25 var(--font);color:var(--ink);width:auto}
.mutemenu button small{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}

/* Life Points plate: a picture in the avatar circle (profile picture, character portrait or deck art), the initial
   underneath as the fallback; a thin ring in the player's colour keeps gold (you) and violet (opponent) readable */
.plate .av{position:relative;overflow:hidden}
.plate .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:50%}
.plate .av.pic{box-shadow:0 0 0 2px #E9B44C}
.plate.opp .av.pic{box-shadow:0 0 0 2px #9C83DD}

/* duel log, easier to follow (Laith, 14 Oct 2026): a thin side bar says whose line it is (gold you, violet opponent)
   so names need no bold everywhere, card names are bold without underlines, repeats fold into one line with x3,
   phases are small dividers, Chain and LP are chips, and the turn header sticks to the top while you scroll */
.log{font-size:.84rem;line-height:1.4;padding:0 8px 16px}
.log li{position:relative;padding:4px 8px 4px 14px;margin:1px 0;border-radius:8px;background:none}
.log li.mine::before,.log li.opp::before{content:"";position:absolute;left:4px;top:7px;bottom:7px;width:3px;border-radius:2px;background:#E9B44C;opacity:.45}
.log li.opp::before{background:#9C83DD}
.log li.key::before{opacity:1}
.log li.key{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.log li.opp{color:var(--ink)}
.log li .who{font-weight:600;color:#E9B44C}
.log li.opp .who{color:#B9A3EE}
.log .cn{font-weight:650;text-decoration:none;color:var(--ink)}
.log .cn:hover{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 70%,transparent);text-underline-offset:3px}
.log li.dmg{color:var(--ink)}
.log li.dmg::before{background:var(--red);opacity:1}
.log .lchip{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font:600 .68rem/1.5 var(--font);letter-spacing:.02em;color:var(--muted);background:color-mix(in srgb,var(--ink) 8%,transparent);vertical-align:1px;white-space:nowrap}
.log li.dmg .lchip.lp{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.log .lx{margin-left:6px;font:700 .7rem/1 var(--font);color:var(--muted)}
.log li.phase{display:flex;align-items:center;gap:8px;padding:8px 8px 4px 14px;font:600 .62rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.log li.phase::after{content:"";flex:1;height:1px;background:var(--line)}
.log li.sys{padding-left:14px}
.log li.turn{position:sticky;top:0;z-index:1;margin:8px -8px 2px;padding:10px 16px 8px;background:var(--bg);border-top:1px solid var(--line);border-radius:0}
.log li.turn:first-child{margin-top:0}

/* sheets: always reserve the scrollbar's room (Laith, 14 Oct 2026: the card pick sheet flickered). The card tiles
   size to the sheet's width, so a scrollbar that came and went changed their height, which brought it back again. */
.sh-body{scrollbar-gutter:stable;overflow-x:hidden}

/* a big reveal (whole hand or Deck): one panel instead of a row across the board */
.revealbox{position:absolute;z-index:820;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100% - 24px));max-height:min(70%,560px);display:flex;flex-direction:column;border-radius:18px;border:1px solid color-mix(in srgb,#E9B44C 35%,var(--sheet-line));background:linear-gradient(180deg,#17223D,#0A1020);box-shadow:0 30px 70px -20px rgba(0,0,0,.85);animation:sheetin .25s var(--ease);color:var(--ink)}
.revealbox.opp{border-color:color-mix(in srgb,#B7A2F2 40%,var(--sheet-line));background:linear-gradient(180deg,#211D41,#0D0C1F)}
.revealbox.out{opacity:0;transition:opacity .2s}
.rv-head{display:flex;align-items:baseline;gap:10px;padding:12px 10px 8px 18px}
.rv-head small{font:700 .64rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#E9B44C}
.revealbox.opp .rv-head small{color:#B7A2F2}
.rv-head b{flex:1;font:600 .95rem/1.2 var(--font)}
.rv-x{width:34px;height:34px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;align-self:center}
.rv-x:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.rv-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;padding:4px 16px 16px;overflow:auto;scrollbar-gutter:stable}
.rv-grid img{width:100%;aspect-ratio:240/350;object-fit:cover;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer}
.rv-grid img:hover{outline:2px solid #E9B44C;outline-offset:1px}
@media (max-width:600px){.rv-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;padding:4px 10px 12px}}
/* coin tosses and die rolls from card effects (app.js tossFx): 3D coins / dice thrown over the table */
.tossfx{--sa:#D9DEE8;position:absolute;z-index:800;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 28px 18px;width:max-content;max-width:calc(100% - 20px);border-radius:16px;
  background:linear-gradient(180deg,#17223D,#0A1020);border:1px solid color-mix(in srgb,var(--sa) 42%,transparent);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 54px -12px color-mix(in srgb,var(--sa) 40%,transparent);
  animation:tfin .28s var(--ease) backwards;transition:opacity .25s}
.tossfx::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:560px;max-width:100vw;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(5,8,16,.45),rgba(5,8,16,.15) 60%,transparent)}
.tossfx::after{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--sa),transparent)}
.tossfx.me{--sa:#E9B44C}
.tossfx.opp{--sa:#B7A2F2;background:linear-gradient(180deg,#211D41,#0D0C1F)}
.tossfx.out{opacity:0}
@keyframes tfin{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%)}}
.tf-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tf-head small{font:600 .66rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--sa)}
.tf-t{font:600 clamp(1.05rem,2.2vw,1.45rem)/1.15 var(--serif);color:#F3EEE4;max-width:18em;font-variant-numeric:lining-nums}
.tf-t em{font-style:normal;color:var(--sa)}
.tf-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px clamp(14px,2.6vw,28px);padding-top:44px}
.tf-item{--cs:92px;--arc:-40px;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.tossfx.many .tf-item{--cs:78px}
/* the throw: up, over and down with a small bounce; the shadow shrinks while it is in the air */
.tf-stage{position:relative;width:var(--cs);height:var(--cs);perspective:700px;animation:tfarc var(--fly) linear var(--d) backwards}
@keyframes tfarc{
  0%{opacity:0;transform:translateY(60px) scale(.55);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  8%{opacity:1}
  46%{transform:translateY(var(--arc)) scale(1.12);animation-timing-function:cubic-bezier(.6,0,.85,.45)}
  80%{transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  89%{transform:translateY(-9px) scale(1.01);animation-timing-function:cubic-bezier(.6,0,.85,.45)}
  100%{opacity:1;transform:none}}
.tf-shadow{position:absolute;top:calc(var(--cs) - 4px);left:calc(50% - var(--cs) * .42);width:calc(var(--cs) * .84);height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);animation:tfshadow var(--fly) linear var(--d) backwards}
@keyframes tfshadow{0%{opacity:0;transform:scale(.3)}46%{opacity:.3;transform:scale(.5)}80%,100%{opacity:1;transform:none}}
/* the landing flash, in the owner's colour */
.tf-item::before{content:"";position:absolute;top:0;left:calc(50% - var(--cs) / 2);width:var(--cs);height:var(--cs);border-radius:50%;box-shadow:0 0 0 2px var(--sa),0 0 30px 8px color-mix(in srgb,var(--sa) 55%,transparent);opacity:0;animation:tfglow .7s ease-out var(--l) forwards}
.dice .tf-item::before{border-radius:22%}
@keyframes tfglow{0%{opacity:.95;transform:scale(.85)}100%{opacity:0;transform:scale(1.4)}}
/* coin: the Millennium coin (.coin faces), flipping end over end */
.tcoin.coin{width:100%;height:100%;margin:0;transform:rotateX(var(--rx));animation:tcoinspin var(--fly) cubic-bezier(.12,.5,.3,1) var(--d) backwards}
.tcoin.coin i:last-child{transform:rotateX(180deg) translateZ(4px)}
@keyframes tcoinspin{from{transform:rotateX(0)}to{transform:rotateX(var(--rx))}}
/* die: an ivory cube, seen a little from above and the right, tumbling onto its result */
.tf-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-16deg)}
.tdie{--ds:calc(var(--cs) * .66);position:absolute;left:50%;top:50%;width:var(--ds);height:var(--ds);margin:calc(var(--ds) / -2) 0 0 calc(var(--ds) / -2);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));animation:tdiespin var(--fly) cubic-bezier(.15,.55,.3,1) var(--d) backwards}
@keyframes tdiespin{from{transform:rotateX(0) rotateY(0) rotateZ(0)}to{transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))}}
.tdie i{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;border-radius:13%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 30% 24%,#FFFDF7,#F1EADB 55%,#D9CDB3);box-shadow:inset 0 0 0 1px rgba(120,95,50,.35),inset 0 -5px 10px rgba(120,95,50,.28),inset 0 3px 4px rgba(255,255,255,.7)}
.tdie i b{place-self:center;width:74%;height:74%;border-radius:50%}
.tdie i b.on{background:radial-gradient(circle at 35% 30%,#46516E,#0E1424 70%);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.7)}
.tdie i.f1 b.on{width:115%;height:115%;background:radial-gradient(circle at 35% 30%,#E8665C,#8E1A16 72%)}
.tdie .f1{transform:translateZ(calc(var(--ds) / 2))}
.tdie .f2{transform:rotateY(90deg) translateZ(calc(var(--ds) / 2))}
.tdie .f3{transform:rotateX(90deg) translateZ(calc(var(--ds) / 2))}
.tdie .f4{transform:rotateX(-90deg) translateZ(calc(var(--ds) / 2))}
.tdie .f5{transform:rotateY(-90deg) translateZ(calc(var(--ds) / 2))}
.tdie .f6{transform:rotateY(180deg) translateZ(calc(var(--ds) / 2))}
/* the result under each, then the summary */
.tf-res{font:700 .74rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--sa);padding:6px 11px 5px;border-radius:999px;background:color-mix(in srgb,var(--sa) 14%,transparent);border:1px solid color-mix(in srgb,var(--sa) 42%,transparent);animation:tfres .32s var(--ease) var(--l) backwards}
.dice .tf-res{font-size:1rem;letter-spacing:0;min-width:2.1em;text-align:center;font-variant-numeric:lining-nums tabular-nums}
.tf-sum{font:600 .92rem/1.2 var(--font);color:#F3EEE4;animation:tfres .32s var(--ease) var(--sum) backwards}
@keyframes tfres{from{opacity:0;transform:translateY(-6px) scale(.8)}}
/* Calm motion / reduced motion: the result at once */
.tossfx.calm,.tossfx.calm *,.tossfx.calm *::before{animation:none!important}
.tossfx.calm .tf-row{padding-top:8px}
@media (prefers-reduced-motion:reduce){.tossfx,.tossfx *,.tossfx *::before{animation:none!important}}
@media (max-width:600px){
  .tossfx{padding:13px 16px 15px;gap:10px}
  .tf-item{--cs:70px}
  .tossfx.many .tf-item{--cs:58px}
  .tf-row{padding-top:38px}
  .tf-item{--arc:-34px}
}
@media (max-height:500px){
  .tossfx{padding:10px 18px 12px;gap:8px}
  .tf-item,.tossfx.many .tf-item{--cs:56px;gap:8px}
  .tf-row{padding-top:22px}
  .tf-item,.tossfx.many .tf-item{--arc:-18px}
}

/* Undo next to End turn, shown only while your last move can be taken back */
.phasebar .phundo{position:absolute;left:calc(100% + 8px);top:50%;margin-top:-14px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,#E9B44C 55%,transparent);background:color-mix(in srgb,#0B0F1A 80%,transparent);color:#F2C462;font:700 .6rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;animation:sheetin .25s var(--ease)}
.phasebar .phundo[hidden]{display:none}
.phasebar .phundo:hover{background:color-mix(in srgb,#E9B44C 16%,#0B0F1A)}
.phasebar .phundo svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.table.portrait .phasebar .phundo span,.table.rail .phasebar .phundo span{display:none}
.table.portrait .phasebar .phundo,.table.rail .phasebar .phundo{position:static;margin:0;padding:0;width:30px;height:30px;justify-content:center}

/* the result face reads first: the other faces are shaded (the tilted top and side used to be read as the result) */
.tdie i:not(.res){filter:brightness(.62) saturate(.8)}
.tdie i.res{box-shadow:inset 0 0 0 1px rgba(120,95,50,.35),inset 0 -5px 10px rgba(120,95,50,.28),inset 0 3px 4px rgba(255,255,255,.7),0 0 0 2px rgba(233,180,76,.0)}

/* ================= Wild Card (admin preview, ui/app.js paintWild, /assets/wildcard.js) ================= */
.wild-bar{position:relative;display:flex;align-items:center;gap:14px 18px;margin:0 0 18px;padding:12px 14px 12px 12px;border-radius:18px;border:1px solid #D4962A;background:linear-gradient(120deg,rgba(233,180,90,.16),rgba(233,180,90,.03) 55%),var(--surface);box-shadow:var(--shadow);overflow:hidden}
.wild-bar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(233,180,90,.05) 0 2px,transparent 2px 14px);pointer-events:none}
.wb-art{flex:none;width:64px;height:64px;border-radius:12px;background:#111 center 30%/cover;box-shadow:0 0 0 2px rgba(233,180,90,.5),0 8px 20px -8px rgba(0,0,0,.6);transform:rotate(-4deg)}
.wb-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.wb-tx .eyebrow{color:var(--gold)}
.wb-tx b{font:500 1.45rem/1.05 var(--serif)}
.wb-tx>span:last-child{color:var(--muted);font-size:.9rem}
.wb-pips{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:.78rem;color:var(--muted);white-space:nowrap}
.wb-pips>span:last-child{display:flex;gap:5px}
.wb-pips i{width:14px;height:20px;border-radius:3px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.wb-pips i.on{background:linear-gradient(135deg,#F6CD6B,#D4962A);border-color:transparent;box-shadow:0 0 10px rgba(233,180,90,.45)}
.wb-off{flex:none;height:36px;padding:0 14px;font-size:.84rem}
body.wild-dealt .players .dsel,body.wild-dealt .players .dtabs,body.wild-dealt .players .decks{opacity:.4;pointer-events:none}
.wildnote{color:var(--gold)!important;font-weight:600}
@media (max-width:640px){.wild-bar{flex-wrap:wrap}.wb-art{width:52px;height:52px}.wb-tx b{font-size:1.2rem}.wb-pips{flex-direction:row;align-items:center}.wb-off{margin-left:auto}}
/* polish pass 29 Oct 2026: on narrow phones the four modes size to their words ("Computer" was cut in an equal slot) */
@media (max-width:420px){.mode{flex:1 1 auto;padding:8px 6px;gap:5px;font-size:.88rem}.mode svg{width:15px;height:15px}}
/* Wild Card box on phones (Laith, 29 Oct 2026: "huge stupid box"): picture + text on top, wins and Turn off on one row below, tighter */
@media (max-width:640px){.wild-bar{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"art tx tx" "pips pips off";gap:10px 12px;align-items:start;padding:14px}.wb-art{grid-area:art;width:44px;height:44px;border-radius:9px}.wb-tx{grid-area:tx;gap:2px}.wb-tx .eyebrow{font-size:.62rem;letter-spacing:.12em;line-height:1.3}.wb-tx b{font-size:1.15rem}.wb-tx>span:last-child{font-size:.82rem;line-height:1.4}.wb-pips{grid-area:pips;flex-direction:row;align-items:center;align-self:center;gap:8px}.wb-pips i{width:11px;height:16px}.wb-off{grid-area:off;margin:0;height:32px;padding:0 12px;font-size:.74rem;min-width:0}}

/* Wild Card lobby (29 Oct 2026, Laith: "just let me pick the decks"): no mode tabs, tools, difficulty or match options */
#lobby.wild-on .lb-top,#lobby.wild-on #cpuLevel,#lobby.wild-on #matchMode,#lobby.wild-on #verMode,#lobby.wild-on #tossMode{display:none}
/* html.wild-pre: the address asks for the Wild Card, so the full lobby never flashes before app.js loads */
html.wild-pre #lobby .lb-top,html.wild-pre #cpuLevel,html.wild-pre #matchMode,html.wild-pre #verMode,html.wild-pre #tossMode{display:none}
#lobby.wild-on .tossrow{justify-content:flex-end}
@media (max-width:640px){.wild-bar{grid-template-areas:"art tx tx" "pips pips pips"}}