:root{color-scheme:dark;--bg:#11171c;--panel:#1b252d;--line:#34434d;--ink:#eef1ed;--muted:#a8b4b9;--gold:#e1b66c;--green:#8bbd9c;--Red:#e6958a;--Green:#90c8a1;--Blue:#92b7df;--Yellow:#e4ca7e;--Purple:#bba0d6;--Colorless:#c7cbd0;--Manager:#c4b59f;font:15px/1.45 system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;background:#26353f;color:var(--ink);border:1px solid #50616b;border-radius:6px;padding:.6rem .9rem}button:hover:not(:disabled){background:#354c59}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:default}input,select{background:#101a20;color:var(--ink);border:1px solid #53636d;border-radius:5px;padding:.6rem;max-width:100%}header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.35rem 2rem 1rem;border-bottom:1px solid var(--line)}h1{font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.04em;line-height:1.1;margin:.2rem 0}h2{font-size:1.15rem;margin:0 0 .7rem}.eyebrow{font-size:.68rem;letter-spacing:.16em;font-weight:750;color:var(--gold);margin:0 0 .5rem}.toolbar{display:flex;gap:.5rem;flex-wrap:wrap}.draft-note{padding:.5rem 2rem;background:#22281f;color:#b9c8ae;font-size:.8rem}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:1.4rem;padding:1.4rem 2rem;max-width:1800px;margin:auto}.table-area{min-width:0}.event-banner{border-left:4px solid var(--gold);padding:1rem 1.2rem;background:#252b2c;min-height:95px;margin-bottom:1rem}.event-banner h2{margin:.2rem 0 .4rem;font-size:1.3rem}.event-banner p{margin:0;color:#c2c9c9}.badge{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gold)}.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;margin:0 0 1rem}.player{border:1px solid var(--line);border-radius:7px;padding:.8rem;background:var(--panel)}.player.you{border-color:#728c78}.player h3{font-size:.95rem;margin:0 0 .35rem}.player p{margin:.1rem 0;font-size:.78rem;color:var(--muted)}.player strong{color:var(--gold)}.ring,.collection,.goal-panel,.history,.decision,.inspection{background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-bottom:1rem;padding:1rem}.ring{background:radial-gradient(ellipse at center,#243a35,#192b2b 75%);min-height:175px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}.section-heading h2{margin:0}.match-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem}.match-lane{border:1px solid #49615d;border-radius:6px;padding:.7rem;background:#132320b3}.match-lane h3{font-size:.85rem;margin:0 0 .5rem}.match-lane p{margin:.3rem 0;font-size:.85rem}.concealed{height:58px;border:1px dashed #7b9990;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#a0b8ae;font-size:.8rem}.tabs{display:flex;gap:.3rem;flex-wrap:wrap}.tabs button{border-color:transparent;background:transparent;padding:.45rem .6rem;font-size:.85rem}.tabs button[aria-selected=true]{color:var(--gold);border-bottom:2px solid var(--gold);border-radius:0}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}.card{--card-color:var(--Colorless);display:flex;flex-direction:column;text-align:left;min-height:246px;padding:0;overflow:hidden;border:1px solid var(--card-color);border-top:5px solid var(--card-color);border-radius:8px;background:#142027;color:var(--ink)}.card:hover:not(:disabled){background:#20313c;transform:translateY(-2px)}.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.75rem .8rem .4rem}.card-name{font-size:.95rem;font-weight:750;line-height:1.2}.power{font-size:1.3rem;font-weight:800;color:var(--card-color);white-space:nowrap}.card-identity{font-size:.68rem;color:var(--card-color);padding:0 .8rem .65rem}.card-art{background:linear-gradient(130deg,#ffffff05,#ffffff0e);min-height:46px;padding:.7rem .8rem;display:flex;align-items:center;justify-content:space-between;border-block:1px solid #ffffff0d}.class-mark{font-size:1.5rem;color:var(--card-color);font-weight:850;line-height:1}.role-tag{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.card-rules{font-size:.76rem;line-height:1.45;white-space:pre-line;padding:.75rem .8rem;flex:1;margin:0}.card-foot{font-size:.6rem;letter-spacing:.08em;color:#8d9aa1;padding:.4rem .8rem;border-top:1px solid #ffffff0d}.empty{color:var(--muted);font-size:.9rem;padding:.7rem 0}.decision-area{min-width:0}.decision{position:sticky;top:1rem}.decision h2{font-size:1.1rem}.bot-control{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:.8rem 0;font-size:.75rem;color:var(--muted)}.bot-control button{font-size:.75rem;padding:.3rem .5rem}.bot-control input{accent-color:var(--gold)}.search-label{display:block;color:var(--muted);font-size:.75rem;margin:.5rem 0 .3rem}#filter{width:100%}.choices{max-height:350px;overflow:auto;display:grid;gap:.45rem;margin:.8rem 0;padding:3px}.choice{text-align:left;font-size:.82rem;white-space:pre-line;padding:.7rem;border-color:#41535e}.choice[aria-pressed=true]{border-color:var(--gold);background:#3b3930}.primary{background:var(--gold);color:#1c231e;border-color:var(--gold);font-weight:750}.primary:hover:not(:disabled){background:#f2ce93;color:#18201a}#confirm{width:100%}.inspection{font-size:.85rem}.inspection pre{font:inherit;white-space:pre-wrap;line-height:1.6;margin:0}.inspection h3{margin:.4rem 0}.goal-panel h2{color:var(--gold);font-size:1rem}.goal-panel p{margin:.4rem 0}.score-preview{font-size:.8rem;color:var(--muted)}.history{font-size:.8rem}.history summary{cursor:pointer;color:var(--muted)}.history ol{max-height:330px;overflow:auto;padding-left:1.6rem}.history li{margin:.6rem 0}.score-table{border-collapse:collapse;width:100%;font-size:.85rem}.score-table td,.score-table th{padding:.5rem;text-align:left;border-bottom:1px solid #4a6059}.score-detail{margin-top:1rem}.score-detail summary{cursor:pointer;color:var(--gold)}.score-detail p{font-size:.8rem}.winner{color:var(--gold);font-weight:750}#error{margin:1rem 2rem;padding:.8rem 1rem;background:#4b2927;border:1px solid #a36c60;border-radius:6px}dialog{background:var(--panel);color:var(--ink);border:1px solid #6c7a7e;border-radius:12px;max-width:min(640px,92vw);max-height:85vh;padding:1.5rem}dialog::backdrop{background:#061014c9}dialog label:not(.check){display:grid;gap:.35rem;margin:1rem 0}.dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.5rem}.muted{color:var(--muted);font-size:.85rem}.check{font-size:.85rem}.rules-block{margin:1rem 0}.rules-block h3{font-size:.95rem;margin:.3rem 0}.rules-block p{font-size:.9rem;color:#ccd3d4;margin:.4rem 0}footer{max-width:1800px;margin:auto;padding:0 2rem 1.5rem;font-size:.75rem;color:var(--muted)}[hidden]{display:none!important}
.flow-panel{border:1px solid var(--line);border-radius:7px;padding:.7rem .9rem;margin-bottom:1rem;background:#172229}.flow-panel ol{display:flex;flex-wrap:wrap;gap:.5rem 1rem;list-style:none;padding:0;margin:0 0 .4rem;font-size:.75rem;color:var(--muted)}.flow-panel li[aria-current=step]{color:var(--gold);font-weight:750}.flow-panel p{margin:.2rem 0;font-size:.8rem}#latest-action{color:var(--muted)}#acting{font-weight:650}
#catalog-dialog{max-width:min(1250px,94vw);width:1250px}.reference-filters{display:flex;gap:1rem;align-items:end}.reference-filters label{flex:1}.reference-filters label:first-child{flex:0 0 180px}
@media(min-width:1450px){main{grid-template-columns:minmax(0,1fr) 390px}.cards{grid-template-columns:repeat(auto-fill,minmax(195px,1fr))}}
@media(max-width:1000px){header{padding:1rem;align-items:flex-start}main{grid-template-columns:1fr;padding:1rem}.draft-note{padding:.5rem 1rem}.decision-area{display:grid;grid-template-columns:1fr 1fr;gap:1rem;grid-row:1}.decision{position:static;margin:0}.inspection{margin:0}.table-area{grid-row:2}.choices{max-height:230px}.cards{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}}
@media(max-width:600px){header{display:block}.toolbar{margin-top:1rem}.decision-area{display:block}.inspection{margin-top:1rem}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.card-name{font-size:.85rem}.card-rules{font-size:.72rem}.card-head{padding:.6rem}.card-identity{padding-inline:.6rem}.card-art{min-height:36px}.players{grid-template-columns:1fr 1fr}.player{padding:.6rem}.choices{max-height:200px}}

/* SDPW play surface */
:root{--bg:#101119;--panel:#1b1d29;--line:#363848;--ink:#f4f0e8;--muted:#b3b3c1;--gold:#f1bc66;--green:#a2ddc1}
body{background:radial-gradient(ellipse at 42% 4%,#2c263e 0,transparent 55%),var(--bg)}
header{padding:.9rem clamp(1rem,3vw,2.3rem);background:#10111be8}
header h1{font-size:clamp(1.25rem,2.3vw,1.9rem);font-weight:850}
.toolbar button{background:#1d1e2b;border-color:var(--line);padding:.45rem .75rem}
main{gap:1rem;padding:1rem clamp(1rem,3vw,2.3rem);grid-template-columns:minmax(0,1fr) minmax(260px,305px)}
.event-banner{position:relative;isolation:isolate;overflow:hidden;min-height:0;padding:.75rem 1rem;margin-bottom:.65rem;border-radius:8px;background:#222332}
.event-banner h2{font-size:1.35rem;margin:.15rem 0}
.event-banner p{max-width:70ch;font-size:.84rem}
.event-art{position:absolute;inset:0 0 0 auto;width:35%;height:100%;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000);opacity:.4;z-index:-1}
.flow-panel{padding:.45rem .75rem;margin-bottom:.65rem;background:#191b27}
.flow-panel ol{margin-bottom:.1rem}
#latest-action{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players{margin-bottom:.65rem}
.player{padding:.5rem .7rem}
.player.active-seat{border-color:var(--gold);box-shadow:inset 3px 0 var(--gold)}
.ring{min-height:0;background:radial-gradient(ellipse at center,#33304a,#1d2031 75%);padding:.7rem;margin-bottom:.65rem}
.ring .section-heading{margin-bottom:.45rem}
.match-lane{background:#151824bd;border-color:#4a4866;padding:.45rem .6rem}
.concealed{height:32px}
.play-zone{display:flex;align-items:center;gap:.75rem;min-height:66px;margin-bottom:.65rem;padding:.55rem .75rem;border:1px solid var(--line);border-radius:8px;background:#171925}
.play-zone[data-zone]:not([data-zone=""]){border:1px dashed #9d8058;background:#282335}
.play-zone.drop-ready{border-color:var(--gold);box-shadow:0 0 12px #f1bc6644}
.play-zone.drop-hover{background:#4b3b44}
.play-zone p{margin:0}
#zone-hint{font-size:.75rem;color:var(--muted)}
#staged{display:flex;gap:.3rem;overflow:auto;flex:1}
.faction-chip{min-width:38px;max-width:92px;height:38px;padding:0 .3rem;overflow:hidden;font-size:.68rem;line-height:1;background:#292a3b}
.chip-art{height:100%;max-width:42px;object-fit:contain;vertical-align:bottom}
.collection{padding:.65rem}
.collection .section-heading{margin-bottom:.4rem}
#cards{display:flex;overflow-x:auto;gap:.55rem;min-height:172px;padding:.3rem .25rem .55rem;scrollbar-color:#575069 #191b27}
#cards .card{flex:0 0 clamp(108px,12vw,148px);min-height:155px}
.card{position:relative;background:#212131;border-top-width:3px}
.card:hover:not(:disabled){background:#2d2b40}
.card-head{width:100%;min-width:0;padding:.42rem .5rem .25rem;gap:.25rem}
.card-head .card-name{flex:1;min-width:0;overflow-wrap:anywhere}
.card-head .power{flex:none}
.card-timing{display:none;position:absolute;inset:auto .2rem .2rem auto;z-index:2;max-width:100%;flex-wrap:wrap;justify-content:flex-end;gap:2px}
.card-timing span{border:1px solid #dcb36c;border-radius:3px;padding:1px 3px;background:#171626;color:#ffe7b2;font-size:.65rem;font-weight:800;line-height:1.1}
#cards .card-timing,.mini-card .card-timing{display:flex}
.mini-card .card-timing{right:1px;bottom:1px}
.mini-card .card-timing span{padding:1px 2px;font-size:.54rem}
.card-name{font-size:.83rem}
.power{font-size:1.12rem}
.card-identity{padding:0 .5rem .3rem;font-size:.64rem}
.card-art{position:relative;width:100%;flex:1}
.card-art.with-art{isolation:isolate;padding:0;min-height:102px;overflow:hidden;background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--card-color),#292437 76%),#191925)}
.portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.card-art.with-art .role-tag{position:absolute;bottom:.2rem;left:.3rem;padding:.15rem .25rem;border-radius:3px;background:#141420dd;color:#fff}
#cards .card-rules,#cards .card-foot{display:none}
#cards .card.playable{box-shadow:inset 0 0 0 1px var(--card-color);cursor:grab}
#cards .card.staged{outline:2px solid var(--gold);outline-offset:1px}
.decision-area .decision,.decision-area .inspection{padding:.8rem;margin-bottom:.65rem}
.decision{position:static}
.decision h2{margin-bottom:.3rem}
.bot-settings{font-size:.75rem;color:var(--muted)}
.choices{max-height:245px}
.goal-panel{overflow:hidden}
.goal-art{width:105px;height:65px;object-fit:contain;float:right;margin-left:.6rem}
@media(max-width:1000px){main{grid-template-columns:1fr}.table-area,.decision-area{grid-row:auto}.decision-area{display:grid}.decision-area .decision,.decision-area .inspection{margin:0}}
@media(max-width:600px){.decision-area{display:block}.decision-area .inspection{margin-top:.65rem}.play-zone{flex-wrap:wrap}.event-art{width:45%}}

.turn-actions{display:flex;gap:.5rem}
.turn-actions #confirm{flex:1;width:auto}
#end-turn{white-space:nowrap}
#cards .card.playable::after{content:"";position:absolute;top:0;left:0;width:9px;height:9px;background:var(--card-color);clip-path:polygon(0 0,100% 0,0 100%);pointer-events:none}

.room-mode:not(.hosted-mode) #new,.room-mode #save,.room-mode #load,.room-mode .bot-settings{display:none}
#room-status{margin:.6rem clamp(1rem,3vw,2.3rem) 0;color:var(--green);font-size:.8rem}
#join-dialog{width:min(440px,92vw)}
#join-dialog input{width:100%}
#join-error{color:#ffc0ae}

.card[data-type="stipulation"]{--card-color:#82bfff!important}
.card[data-type="opening_bell"]{--card-color:#d8e4f5!important}
.card[data-type="blow_off"]{--card-color:#ff8a80!important}
.card[data-type="gimmick"]{--card-color:#efc566!important}
.card[data-type="objective"]{--card-color:#c9a8ef!important}
.card[data-type] .card-head{padding:.65rem .65rem .25rem}
.card[data-type] .card-identity{padding-inline:.65rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.card .symbol-art{display:grid;place-items:center;min-height:112px;padding:.6rem;background:repeating-linear-gradient(-36deg,#ffffff04 0 2px,transparent 2px 9px),radial-gradient(ellipse at center,color-mix(in srgb,var(--card-color),#252337 79%),#171923 74%)}
.event-emblem{width:66px;height:66px;fill:none;stroke:var(--card-color,var(--gold));stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(2px 3px 0 #0e1020)}
.event-banner>.event-emblem{float:right;width:48px;height:48px;margin-left:1rem;opacity:.85}
.card-rules strong{display:block;color:var(--card-color);text-transform:uppercase;font-size:.63rem;letter-spacing:.09em}
.card-rules p{margin:.15rem 0 .45rem}
.token-count{display:flex;align-items:center;gap:.3rem}
.token-icon{width:20px;height:20px;object-fit:contain}
#reference-cards .card[data-type]{min-height:272px}

.card .symbol-art{justify-content:center;flex:0 0 112px}
.card[data-type="objective"] .card-art{flex:0 0 112px}
.gallery-token{display:flex;align-items:center;gap:.45rem}
.gallery-token .token-icon{width:32px;height:32px}

/* Full card layers on the table and in the gallery */
.card{isolation:isolate;position:relative}
.card.framed{border-color:transparent;padding:9px}
.frame-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.arena-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.card-art .portrait{z-index:1}
.card-art .role-tag{z-index:2}
.card .card-rules{width:100%;color:#2a201e;background:radial-gradient(ellipse,#f9ebd0,#d9b689);border-top:1px solid #b8966c}
.card-rules strong{color:#6b2928}
#cards .card{min-height:220px;flex-basis:clamp(128px,13vw,160px)}
#cards .card-rules{display:block;min-height:48px;max-height:53px;overflow:hidden;padding:.35rem .45rem;font-size:.58rem;line-height:1.18}
#cards .card-art.with-art{min-height:91px}
#cards .card.unavailable{filter:saturate(.6)}
#cards .availability{font-size:.62rem;line-height:1.2;color:#f8e3ba;background:#302a31;padding:.2rem .4rem;width:100%}
.card-back{width:32px;height:45px;object-fit:contain}
.concealed:has(.card-back){height:49px;gap:.25rem}
.roster-actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem;min-height:36px}
.roster-actions p{margin:0;font-size:.77rem}
.ring.drop-ready,.decision.drop-ready{outline:2px dashed var(--gold);outline-offset:-2px}
.ring.drop-hover,.decision.drop-hover{background:#4b3b44}

#cards .card.playable{box-shadow:inset 0 0 0 1px var(--gold),0 0 10px #f1bc6638}
#cards .card.playable:active{cursor:grabbing}

/* Arena-first board */
body{background:linear-gradient(180deg,#101119ec 3%,#12132180 48%,#101119f7 96%),url('/art/card-arena') center 32%/cover fixed,#101119}
.arena-board{display:flex;flex-direction:column;gap:.65rem;max-width:1520px;padding:.65rem clamp(.8rem,3vw,2rem)}
.arena-board section,.arena-board details{margin-bottom:0}
.arena-top{display:grid;grid-template-columns:1.35fr 1fr;gap:.65rem}
.arena-top .event-banner,.arena-top .flow-panel{height:100%;background:#1c1b2be8}
.arena-top .flow-panel{display:grid;align-content:center}
.arena-board .players{margin:0;grid-template-columns:repeat(auto-fit,minmax(136px,1fr))}
.arena-board .player{background:#171827d9}
.seat-label{display:flex;justify-content:space-between;align-items:center;gap:.3rem}
.seat-label h3{margin:0}
.seat-label .token-count{color:var(--gold);font-weight:800}
.seat-faction{display:flex;align-items:center;gap:.28rem;overflow:auto;min-height:34px}
.seat-faction .empty{font-size:.69rem;padding:.25rem 0}
.seat-card{height:34px;min-width:29px;padding:0 .15rem;background:#34314a;font-size:.65rem;overflow:hidden}
.seat-card .chip-art{height:32px}
.arena-center{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,290px);gap:.65rem}
.arena-ring-side{display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:.55rem;align-items:stretch}
.arena-board .ring{background:linear-gradient(155deg,#312d49e8,#171828ec);min-height:105px}
.table-decks{display:flex;flex-direction:column;gap:.25rem}
.pile{border:1px solid #525068;border-radius:6px;background:#1d1b2be8;color:var(--ink);min-height:27px;display:flex;align-items:center;justify-content:space-between;gap:.3rem;padding:.2rem .4rem;font-size:.69rem;text-align:left}
.pile strong{color:var(--gold)}
.pile-back{height:20px;width:14px;object-fit:contain}
.arena-center .decision-area{display:block}
.arena-center .decision{background:#1c1b2bf2;padding:.55rem .7rem}
.arena-center .decision .eyebrow{margin-bottom:.2rem}
.arena-center .decision h2{font-size:1rem}
.arena-center .choices{max-height:126px;margin:.35rem 0;gap:.25rem}
.arena-center .choice{padding:.35rem .5rem}
.arena-center .inspection{margin-top:.3rem;padding:.4rem .65rem;background:#171827ed}
.arena-center .inspection summary{color:var(--gold);cursor:pointer}
.arena-board .play-zone{margin:0;min-height:47px;background:#1c1b2be6}
.arena-board .collection{background:linear-gradient(180deg,#1718299c,#141522f7);padding:.45rem .75rem}
.arena-board #cards{min-height:188px}
#cards.roster-hand{align-items:end;padding-top:16px}
#cards.roster-hand .card{min-height:190px;flex-basis:clamp(126px,12vw,154px);transition:transform 120ms ease}
#cards.roster-hand .card:nth-child(odd){transform:translateY(4px) rotate(-2deg)}
#cards.roster-hand .card:nth-child(even){transform:translateY(4px) rotate(2deg)}
#cards.roster-hand .card:hover,#cards.roster-hand .card:focus-visible{z-index:4;transform:translateY(-8px)}
#cards.roster-hand .card:not(:first-child){margin-left:-.25rem}
.arena-footer{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.arena-footer .history{align-self:start}
@media(max-width:740px){
  .arena-top,.arena-center,.arena-footer{grid-template-columns:1fr}
  .arena-ring-side{grid-template-columns:minmax(0,1fr) 118px}
  .arena-center .choices{max-height:150px}
  #cards.roster-hand .card:nth-child(n){transform:none;margin-left:0}
}
@media(prefers-reduced-motion:reduce){#cards.roster-hand .card{transition:none}}

/* Keep the hand fixed when a click opens card details. */
.arena-center .inspection{position:relative;z-index:5}
.arena-center .inspection #inspect{position:absolute;left:-1px;right:-1px;top:100%;padding:.65rem;background:#1b1d29;border:1px solid #525068;border-radius:0 0 8px 8px;box-shadow:0 8px 24px #080810ab;max-height:260px;overflow:auto}
.arena-center .inspection #inspect h3{margin-top:0}

.arena-board .ring{background:linear-gradient(155deg,#27253adb,#17182897)}
.arena-ring-side{align-self:start}
.arena-board #cards.roster-hand{justify-content:safe center}
.arena-board .play-zone .faction-chip{height:44px}
.arena-board .play-zone .chip-art{max-width:47px}
@media(max-width:740px){.arena-board #cards.roster-hand{justify-content:start}}

/* Fixed seats around the table. Empty opponent areas reveal the arena. */
.tabletop{
  display:grid;
  grid-template-columns:minmax(145px,1fr) minmax(360px,3fr) minmax(145px,1fr);
  grid-template-rows:auto auto minmax(200px,1fr) auto auto;
  grid-template-areas:"flow flow flow" ". north ." "west center east" "own hand bank" "log log log";
  min-height:calc(100dvh - 88px);align-items:stretch;
}
.tabletop .flow-panel{grid-area:flow;display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin:0;background:#181824dc}
.tabletop .flow-panel ol{margin:0}
.tabletop #latest-action{display:none}
.tabletop #acting{white-space:nowrap}
.tabletop .players{display:contents}
.tabletop .seat-north{grid-area:north}
.tabletop .seat-west{grid-area:west}
.tabletop .seat-east{grid-area:east}
.tabletop .player{align-self:start;min-width:0}
.tabletop .table-center{grid-area:center;display:grid;grid-template-columns:104px minmax(0,1fr);gap:.55rem;min-width:0}
.tabletop .event-rail{display:flex;flex-direction:column;gap:.4rem}
.tabletop .event-banner{border:0;padding:0;background:none;overflow:visible}
.tabletop #table-decks{grid-area:east;align-self:end;justify-self:stretch;margin-top:132px}
.tabletop #play-zone{grid-area:own;display:flex;flex-direction:column;align-items:stretch;gap:.25rem;min-width:0}
.tabletop #play-zone h2,.player-bank h2{font-size:.86rem;margin:0}
#my-roster{font-size:.72rem;color:var(--muted);white-space:nowrap}
.tabletop .collection{grid-area:hand;min-width:0}
.tabletop .player-bank{grid-area:bank;min-width:0;padding:.5rem;border:1px solid var(--line);border-radius:8px;background:#171827df}
.bank-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.my-goal{margin-top:.45rem;font-size:.72rem;color:var(--muted)}
.my-goal summary,.history summary{cursor:pointer}
#goal h2{font-size:.82rem;margin:.25rem 0}
#goal p{margin:.25rem 0}
#goal .goal-art{width:58px;height:37px}
.tabletop .history{grid-area:log;padding:.35rem .65rem}
.tabletop .ring{min-height:124px}
.tabletop .decision{margin-top:.4rem;padding:.45rem .6rem;background:#1b1b2bf0}
.tabletop .decision h2{font-size:.92rem;margin-bottom:.2rem}
.tabletop .choices{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0;max-height:94px}
.tabletop .choice{padding:.28rem .48rem;font-size:.74rem}
.tabletop .decision .eyebrow{display:none}
.tabletop .decision .bot-settings{float:right;margin-left:.4rem}
.tabletop .seat-faction,#match-staged{display:flex;gap:.28rem;overflow:auto;min-height:76px;align-items:flex-start;padding:.22rem .1rem}
.tabletop .mini-card{flex:0 0 66px;min-width:0;min-height:0;padding:2px;aspect-ratio:5/7}
.tabletop .mini-card .card-head{padding:.13rem .18rem;gap:.08rem;align-items:center}
.tabletop .mini-card .card-name{font-size:.57rem;line-height:1.02;overflow-wrap:anywhere}
.tabletop .mini-card .power{font-size:.67rem;line-height:1}
.tabletop .mini-card .card-identity,.tabletop .mini-card .card-rules,.tabletop .mini-card .role-tag{display:none}
.tabletop .mini-card .card-art{flex:1;min-height:0}
.tabletop .mini-card .event-emblem{width:29px;height:29px}
.tabletop .event-banner .mini-card{width:100%;aspect-ratio:5/7}
.tabletop .event-banner .card-name{font-size:.68rem}
.tabletop .event-banner .event-emblem{width:36px;height:36px}
.tabletop .mini-card.playable{outline:1px solid var(--gold);cursor:grab}
.tabletop #match-staging{display:flex;align-items:center;gap:.5rem}
.tabletop #match-staging[hidden]{display:none}
#card-hover{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:max-content;max-width:min(320px,calc(100vw - 8px));max-height:calc(100dvh - 8px);overflow:auto;padding:.65rem .8rem;border:1px solid var(--gold);border-radius:8px;background:#1a1d29;color:var(--ink);box-shadow:0 6px 20px #0009;font-size:.85rem;line-height:1.45;white-space:pre-line}
#card-hover strong{display:block;color:#ffe7b2;margin-bottom:.25rem}
#card-hover p{margin:.15rem 0 .45rem}
#inspect-dialog{width:min(370px,92vw);padding:.7rem}
#inspect-dialog #inspect{touch-action:pan-y pinch-zoom}
#inspect-dialog #inspect .card{width:100%;min-height:390px;opacity:1;pointer-events:none}
#inspect-navigation:not([hidden]){display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;margin-top:.5rem;text-align:center}
#inspect-navigation button{min-width:44px;min-height:44px}
#inspect-position{font-size:.83rem;color:#e9dec8}
#inspect-dialog #inspect .card.framed{padding:21px}
#inspect-dialog #inspect .card-art{min-height:175px}
#inspect-dialog #inspect .card-rules{font-size:.93rem}
#inspect-dialog form{display:flex;justify-content:flex-end;margin-top:.5rem}
@media(max-width:850px){
  .tabletop{grid-template-columns:minmax(105px,1fr) minmax(200px,2.5fr) minmax(105px,1fr)}
  .tabletop .table-center{grid-template-columns:76px minmax(0,1fr)}
}
@media(max-width:620px){
  .tabletop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"flow flow" "north north" "west east" "center center" "own bank" "hand hand" "log log"}
  .tabletop .flow-panel{flex-wrap:wrap}
  .tabletop #table-decks{grid-area:auto;grid-row:5;grid-column:1/-1;display:none}
}

@media(max-width:620px){
  .tabletop{grid-template-areas:"flow flow" "north north" "west east" "center center" "piles piles" "own bank" "hand hand" "log log"}
  .tabletop #table-decks{grid-area:piles;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
  .tabletop .arena-board,.tabletop .play-zone{min-width:0}
  .tabletop #my-roster{font-size:.66rem}
  .tabletop #acting{white-space:normal}
}

/* Arena scene: the ring, seats and physical stacks are the play surface. */
body:has(.arena-scene){background:radial-gradient(ellipse at 50% 41%,#11152220 0,#080a14b0 65%,#090a13f0 100%),url('/art/card-arena') center 38%/cover fixed,#101119}
body:has(.arena-scene)>header{padding:.48rem clamp(.7rem,2vw,1.6rem);background:#0a0c16cc}
body:has(.arena-scene)>header .eyebrow{display:none}
body:has(.arena-scene)>header h1{font-size:clamp(.95rem,2.2vw,1.4rem)}
body:has(.arena-scene) .toolbar button{background:#191b2bc9;border-color:#404459;padding:.3rem .5rem;font-size:.75rem}
.arena-scene{grid-template-rows:auto auto minmax(220px,1fr) auto auto;min-height:calc(100dvh - 57px);gap:.3rem .6rem}
.arena-scene .flow-panel{background:transparent;border:0;padding:.12rem .3rem}
.arena-scene #round-flow{gap:.35rem .65rem;font-size:.67rem}
.arena-scene #acting{color:#f6e5ca;font-size:.73rem;text-shadow:0 2px #080812}
.arena-scene .player,.arena-scene #play-zone,.arena-scene .player-bank,.arena-scene .collection,.arena-scene .history{background:transparent;border:0;box-shadow:none}
.arena-scene .player{justify-self:center;width:min(100%,290px);padding:.25rem .35rem}
.arena-scene .seat-north{width:min(100%,560px)}
.arena-scene .seat-north .seat-label,.arena-scene .seat-north>p{max-width:200px;margin-inline:auto}
.arena-scene .seat-north .seat-faction{justify-content:safe center}
.arena-scene .seat-label{padding:.21rem .4rem;background:linear-gradient(120deg,#25283cd9,#131628e6);border-radius:5px;border:1px solid #555873}
.arena-scene .active-seat .seat-label{border-color:#f1bc66;box-shadow:0 0 13px #edb75b52}
.arena-scene .player>p{margin:.15rem .25rem;color:#e5dfd7;text-shadow:0 2px #10101b}
.arena-scene .player .seat-faction:empty{min-height:8px;padding:0}
.arena-scene .seat-west .seat-faction,.arena-scene .seat-east .seat-faction{max-height:150px}
.arena-scene .table-center{grid-template-columns:78px minmax(0,1fr);align-self:center;align-items:center;gap:.1rem}
.arena-scene .event-rail{align-items:center;z-index:2}
.arena-scene #event{width:100%}
.arena-scene .ring{position:relative;isolation:isolate;background:none;border:0;padding:0;min-height:0;aspect-ratio:900/390;overflow:visible}
.ring-scenery{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:-1;filter:drop-shadow(0 12px 17px #04050adb)}
.arena-scene .ring>.section-heading{position:absolute;top:3%;left:15%;right:15%;justify-content:center;margin:0;text-shadow:0 2px #10101c}
.arena-scene #match-heading{display:none}
.arena-scene #match-phase{background:#18192acd;padding:.2rem .45rem;border-radius:12px}
.arena-scene #match{position:absolute;top:32%;left:17%;right:17%;max-height:56%;overflow:auto;text-align:center}
.arena-scene .match-lanes{display:flex;align-items:flex-start;justify-content:center;gap:.35rem}
.arena-scene .match-lane{display:flex;flex-direction:column;align-items:center;gap:.14rem;min-width:0;padding:.12rem .25rem;border:0;border-radius:4px;background:#171a2da0}
.arena-scene .match-lane.won-match{box-shadow:0 0 0 1px #f1bc66,0 0 12px #efbd66bb}
.arena-scene .match-lane h3,.arena-scene .match-lane p{font-size:.59rem;line-height:1.1;margin:0}
.arena-scene .match-lane .mini-card{width:48px;flex:none}
.arena-scene .match-lane .mini-card .card-name{font-size:.43rem}
.arena-scene .match-lane .mini-card .power{font-size:.56rem}
.arena-scene .match-lane .concealed{height:38px;min-width:32px;font-size:.48rem}
.arena-scene .match-lane .card-back{height:35px;width:24px}
.arena-scene #match-staging{position:absolute;inset:auto 12% 1%;justify-content:center;z-index:2}
.arena-scene #match-staged{min-height:0}
.arena-scene #match-staged .mini-card{flex-basis:42px}
.arena-scene .ring.drop-ready{outline:0;filter:drop-shadow(0 0 8px #ffdd82a0)}
.arena-scene .ring.drop-hover{background:transparent;filter:drop-shadow(0 0 14px #ffdd82)}
.arena-scene[data-scene=finished] .ring{min-height:205px;aspect-ratio:auto}
.arena-scene[data-scene=finished] #match{position:relative;inset:auto;max-height:none;background:#121524e6;border-radius:8px;padding:.45rem}
.arena-scene .decision{position:relative;background:#121525c9;border:0;border-radius:14px;padding:.18rem .6rem;margin:.12rem auto 0;width:max-content;max-width:100%;text-align:center}
.arena-scene .decision h2{font-size:.77rem;display:inline;margin:0}
.arena-scene .decision .choices{justify-content:center;max-height:75px}
.arena-scene .choice,.arena-scene #toggle-actions{background:#212840;border-color:#626988;padding:.19rem .38rem;font-size:.67rem}
.arena-scene .decision .bot-settings{display:none}
.arena-scene #toggle-actions{margin-left:.3rem}
.arena-scene .decision.drop-ready{box-shadow:0 0 15px #edb75b7a}
.arena-scene #table-decks{flex-direction:row;justify-content:center;margin:0;flex-wrap:wrap;align-items:end}
.arena-scene .card-stack{display:grid;justify-items:center;justify-content:center;min-width:43px;gap:.25rem;border:0;background:transparent;padding:.12rem}
.stack-art{position:relative;display:grid;place-items:center;width:38px;aspect-ratio:5/7;border-radius:4px;background:#1b1e30;box-shadow:2px 2px 0 #535669,4px 4px 0 #202339,0 5px 10px #080a15}
.stack-art.empty-stack{background:#12142190;border:1px dashed #74758b;box-shadow:none}
.stack-art .pile-back,.stack-face{width:100%;height:100%;object-fit:contain;border-radius:4px}
.stack-face{background:#30364a}
.stack-count{position:absolute;right:-4px;bottom:-3px;background:#151523;border:1px solid #e8bc72;border-radius:9px;padding:0 .24rem}
.stack-label{white-space:nowrap;text-shadow:0 2px #10111c;font-size:.61rem}
.arena-scene #play-zone,.arena-scene .player-bank{align-self:start;padding:.3rem}
.arena-scene #play-zone[data-zone=faction]{border:1px dashed #c7a4708c;background:#211c3166}
.arena-scene #play-zone.drop-hover{background:#4b3b44c9}
.arena-scene .collection{align-self:end;padding:.2rem .4rem}
.arena-scene .collection .section-heading{margin:0}
.arena-scene #cards.roster-hand{padding-top:15px}
.arena-scene #cards.roster-hand .card{flex-basis:clamp(100px,10vw,146px)}
.arena-scene #cards.roster-hand .card:not(:first-child){margin-left:-.45rem}
.arena-scene .roster-actions{min-height:32px}
.arena-scene .history{justify-self:start}
@media(max-width:850px){
  .arena-scene .table-center{grid-template-columns:62px minmax(0,1fr)}
  .arena-scene .ring{min-height:150px}
}
@media(max-width:620px){
  .arena-scene{grid-template-rows:auto}
  .arena-scene #table-decks{display:flex}
  .arena-scene .table-center{grid-template-columns:58px minmax(0,1fr)}
  .arena-scene .match-lane .mini-card{width:30px}
  .arena-scene .match-lane h3,.arena-scene .match-lane p{font-size:.53rem}
  .arena-scene #cards.roster-hand .card:not(:first-child){margin-left:0}
}

.arena-scene #cards.roster-hand .card{flex-basis:clamp(92px,calc((100% + (var(--hand-count) - 1) * .45rem) / var(--hand-count)),146px)}
.arena-scene .seat-north>p{text-align:center}
.arena-scene .history .bot-settings{margin-top:.3rem}
@media(max-width:620px){.arena-scene #cards.roster-hand .card{flex-basis:112px}}

/* Card treatment and foreground fan */
.card .card-identity{display:flex;flex-wrap:wrap;gap:.17rem;align-items:center}
.trait-badge{display:inline-flex;align-items:center;gap:.13rem;border-radius:3px;padding:.08rem .18rem;background:#171724;border:1px solid #656174;color:#eee5d7;font-size:.59rem}
.trait-badge b{font-size:.74rem;line-height:1}
.class-trait{border-color:var(--card-color);color:var(--card-color)}
.persona-trait{background:#493b30;color:#ffe6af}
.alignment-trait.face{background:#1e4262;color:#deefff}
.alignment-trait.heel{background:#662c39;color:#ffe4e7}
.alignment-trait.tweener{background:#5b4a26;color:#fff0c7}
.card .power{display:grid;place-items:center;min-width:1.55em;aspect-ratio:1;background:#171522;border:1px solid var(--card-color);border-radius:35% 35% 48% 48%;line-height:1}
.card-blurb{color:#f1dcb4;font-size:.7rem;font-style:italic;padding:.28rem .45rem;margin:0;background:#242033;width:100%}
.mini-card .card-blurb{display:none}
#cards .card-blurb{max-height:27px;overflow:hidden;font-size:.56rem;padding:.15rem .35rem}
.inspect-select{width:100%;margin-top:.6rem}
#inspect-dialog #inspect .card-identity{font-size:.83rem}
#inspect-dialog .trait-badge{font-size:.73rem}
#inspect-dialog .card-blurb{font-size:.86rem}
.stip-rule{background:#282033;border:1px solid #ba8f53;border-left:4px solid var(--gold);border-radius:8px;padding:.45rem .65rem;color:#f5eee1}
.stip-rule .event-heading{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.stip-rule .event-heading span{color:#f2ca8e;font-size:.69rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.stip-rule strong{font-size:clamp(.93rem,1.5vw,1.12rem)}
.stip-rule p{font-size:clamp(.82rem,1.2vw,.96rem);line-height:1.35;margin:.18rem 0 0}
.arena-scene{grid-template-columns:minmax(150px,1fr) minmax(380px,3.65fr) minmax(150px,1fr);max-width:1660px}
.arena-scene .seat-faction:has(.role-slots),.arena-scene #staged{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;overflow:visible
}
.arena-scene .role-slots{display:flex;gap:.3rem;align-items:start}
.role-slot{display:grid;justify-items:center;gap:.1rem;min-width:57px;min-height:52px;border:1px dashed #a5a7bd70;border-radius:5px;background:#171a29b5;padding:.18rem}
.role-slot-label{color:#e3d5b7;font-size:.57rem;text-transform:uppercase;letter-spacing:.07em}
.arena-scene .role-slot .mini-card{width:52px}
.worker-line{display:flex;gap:.22rem;overflow:auto;padding:.14rem;min-width:0}
.faction-brand{display:flex;align-items:center;gap:.3rem;background:#181a29d4;border:0;padding:.14rem .25rem;font-size:.7rem;text-align:left}
.faction-logo{width:54px;height:35px;object-fit:contain}
.arena-scene .seat-north .seat-faction{display:flex;flex-wrap:wrap;align-items:center}
.arena-scene .seat-north .worker-line{flex:1}
.arena-scene .seat-west .seat-faction,.arena-scene .seat-east .seat-faction{max-height:205px;overflow:auto}
.arena-scene .seat-east:has(.faction-brand)~#table-decks{margin-top:190px}
.arena-scene #cards.roster-hand{min-height:245px;align-items:start;padding:13px 14px 26px;justify-content:safe center}
.arena-scene #cards.roster-hand .card{
  position:relative;flex:0 0 clamp(121px,12vw,163px);height:226px;min-height:226px;
  z-index:var(--fan-order);transform-origin:50% 94%;transform:translateY(var(--fan-drop)) rotate(var(--fan-angle));
}
.arena-scene #cards.roster-hand .card:not(:first-child){margin-left:calc(-1 * clamp(30px,(var(--hand-count) - 2) * 10px,78px))}
.arena-scene #cards.roster-hand .card:hover,.arena-scene #cards.roster-hand .card:focus-visible{
  z-index:20;transform:translateY(-7px) rotate(0);
}
.arena-scene[data-scene=finished] .table-center{grid-column:1/-1;grid-row:3;z-index:3}
.arena-scene[data-scene=finished] #match{max-height:62vh;overflow:auto}
.arena-scene[data-scene=finished] .score-table th,.arena-scene[data-scene=finished] .score-table td{font-size:.75rem}
.score-card{padding:.13rem .25rem;font-size:inherit}
.score-detail small{display:block;color:var(--muted)}
@media(max-width:850px){
  .arena-scene{grid-template-columns:minmax(105px,1fr) minmax(210px,2.6fr) minmax(105px,1fr)}
}
@media(max-width:620px){
  .arena-scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .arena-scene #cards.roster-hand{justify-content:start}
  .arena-scene #cards.roster-hand .card{flex-basis:122px}
  .arena-scene #cards.roster-hand .card:not(:first-child){margin-left:-35px}
}

.arena-scene #cards.roster-hand{padding-inline:43px}
.arena-scene #cards.roster-hand .card{flex-basis:clamp(121px,11vw,155px)}
.arena-scene .collection .section-heading #end-turn{padding:.36rem .66rem}
.arena-scene .seat-north .seat-faction{justify-content:center}
.arena-scene .seat-north .worker-line:empty{display:none}
@media(max-width:620px){.arena-scene #cards.roster-hand{padding-inline:23px}}

/* Scale the whole play surface, leaving dialogs at readable browser size. */
:root{--Red:#ff6978;--Green:#65e49b;--Blue:#53bcff;--Yellow:#ffd458;--Purple:#d492ff;--Colorless:#e1e9f1;--Manager:#e7bd83}
.card.framed{border-color:var(--card-color)}
.frame-layer{filter:saturate(1.45) contrast(1.08)}
.card .class-trait{background:color-mix(in srgb,var(--card-color) 25%,#171724)}
.card .power{background:color-mix(in srgb,var(--card-color) 19%,#171522)}
.arena-scene.fit-board{
  width:var(--board-width,1100px);max-width:none;min-height:0;
  grid-template-columns:minmax(145px,1fr) minmax(430px,3.65fr) minmax(145px,1fr);
  grid-template-rows:auto auto minmax(190px,1fr) auto;
  grid-template-areas:"flow flow flow" ". north ." "west center east" "own hand bank";
  padding:.25rem .75rem .45rem;
}
.arena-scene.fit-board #table-decks{grid-area:east;display:flex;flex-wrap:wrap;margin:0}
.arena-scene.fit-board .table-center{grid-template-columns:72px minmax(0,1fr)}
.arena-scene.fit-board .ring{min-height:0;max-height:290px}
.arena-scene.fit-board[data-scene=finished] .ring{max-height:none}
.arena-scene.fit-board #cards.roster-hand{
  min-height:248px;max-height:275px;padding:11px 46px 33px;
  justify-content:safe center;
}
.arena-scene.fit-board #cards.roster-hand .card{flex-basis:clamp(112px,14%,155px);height:207px;min-height:207px}
.arena-scene.fit-board #cards.roster-hand .card:not(:first-child){margin-left:calc(-1 * clamp(26px,(var(--hand-count) - 2) * 9px,70px))}
.arena-scene.fit-board #cards.roster-hand .card-art.with-art{min-height:70px}
.arena-scene.fit-board #cards:not(.roster-hand){max-height:240px;overflow:auto}
.arena-scene.fit-board .player-bank #end-turn{width:100%;margin-top:.4rem}
.arena-scene.fit-board .player-bank #play-help{margin:.25rem 0;font-size:.68rem}
#open-bank{background:#1519299c;border-color:#525771;font-weight:750;padding:.24rem .45rem}
#log-dialog{width:min(680px,92vw)}
.log-actions{display:flex;flex-wrap:wrap;gap:.5rem}
#bug-report-dialog{width:min(580px,92vw)}
#bug-report-text{box-sizing:border-box;width:100%;min-height:8rem;max-height:44dvh;resize:vertical;background:#101a20;color:var(--ink);border:1px solid #53636d;border-radius:5px;padding:.6rem;font:inherit;font-size:.85rem}
#bug-report-status{font-size:.85rem;color:var(--gold)}
#log-dialog ol{max-height:52vh;overflow:auto;padding-left:1.45rem}
#log-dialog li{margin-bottom:.4rem}

#faction-picker{width:min(690px,94vw);padding:clamp(.75rem,3vw,1.4rem);border-color:#94714d}
#faction-picker h2{margin:0;color:#f5e7cc}
#faction-picker .muted{margin:.35rem 0 .9rem}
#faction-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.faction-option{
  display:grid;align-content:start;justify-items:center;gap:.4rem;padding:.7rem;
  text-align:center;border:1px solid #6b5688;border-radius:9px;
  background:radial-gradient(ellipse at 50% 28%,#382b50,#1d2032 72%);
}
.faction-option:hover:not(:disabled){background:#352a4a;border-color:var(--gold)}
.faction-option-logo{width:100%;height:clamp(74px,18vw,145px);object-fit:contain}
.faction-option strong{color:#fff0d1;font-size:1rem}
.faction-option span{color:#eee5d6;font-size:.81rem;line-height:1.35}
#faction-picker-error{margin:.65rem 0 0;color:#ffb7af}

/* Fit every hand card within the same foreground area, even after recruiting. */
.arena-scene.fit-board .collection{container-type:inline-size}
.arena-scene.fit-board #cards.roster-hand{
  position:relative;display:block;overflow:hidden;height:252px;min-height:252px;
  max-height:none;padding:0;
  --fan-step:min(118px,max(0px,calc((100cqw - 210px) / var(--hand-gaps))));
}
.arena-scene.fit-board #cards.roster-hand .card{
  position:absolute;top:10px;left:calc(50% + var(--fan-index) * var(--fan-step));
  width:144px;height:207px;min-height:207px;
  margin:0;transform:translate(-50%,var(--fan-drop)) rotate(var(--fan-angle));
}
.arena-scene.fit-board #cards.roster-hand .card:not(:first-child){margin:0}
.arena-scene.fit-board #cards.roster-hand .card:hover,
.arena-scene.fit-board #cards.roster-hand .card:focus-visible{
  transform:translate(-50%,-3px) rotate(0);
}
#collection-dialog,#choice-picker{width:min(900px,94vw)}
#collection-cards{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.65rem}
#choice-event-rule{position:sticky;top:0;z-index:5;margin-bottom:.65rem}
#choice-picker-cards{display:flex;justify-content:center;flex-wrap:wrap;gap:.65rem}
#choice-picker-cards .pick-tile,#choice-picker-cards .pick-group>.card{width:min(100%,240px);flex:none}
#choice-picker-cards .pick-tile>.card{width:100%}
#choice-picker-cards .card{aspect-ratio:5/7;min-height:0;flex:none}
#choice-picker-cards .card.framed{padding:12px}
#choice-picker:has(#choice-picker-cards > .pick-tile:only-child){width:max-content}
#choice-picker-cards .card-art{flex:0 0 35%;min-height:0}
#choice-picker-cards .card-rules{min-height:0;overflow:auto;padding:.4rem .5rem;font-size:.8rem}
#choice-picker .card:disabled{opacity:.82}
.pick-status{display:block;margin-top:.25rem;padding:.4rem .55rem;border-radius:5px;background:#302a40;color:#f4ddb1;font-size:.78rem;width:100%}
#choice-picker-error{color:#ffb7af}

.arena-scene.fit-board #cards.roster-hand{
  height:280px;min-height:280px;
  --fan-step:min(118px,max(0px,calc((100cqw - 286px) / var(--hand-gaps))));
}

/* Faction cards extend downward beside the ring. */
.arena-scene .worker-line{
  flex-direction:column;align-items:stretch;gap:.24rem;
  width:100%;max-height:190px;overflow-y:auto;overflow-x:hidden;
}
.arena-scene .worker-line .mini-card{
  display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;
  flex:none;width:100%;height:42px;aspect-ratio:auto;padding:0;border:1px solid var(--card-color);
}
.arena-scene .worker-line .mini-card .card-art{
  grid-column:1;grid-row:1;height:100%;overflow:hidden;padding:0;
}
.arena-scene .worker-line .mini-card .card-head{grid-column:2;grid-row:1;padding:.22rem;gap:.2rem}
.arena-scene .worker-line .mini-card .card-name{font-size:.71rem}
.arena-scene .worker-line .mini-card .frame-layer{display:none}
.arena-scene .seat-north .seat-faction:has(.role-slots){
  display:grid;grid-template-columns:max-content minmax(0,215px);justify-content:center;align-items:start;
}
.arena-scene .seat-north .faction-brand{grid-column:1/-1;justify-self:center}
.arena-scene .seat-north .worker-line{max-height:135px}
.arena-scene .seat-west .seat-faction,.arena-scene .seat-east .seat-faction{max-height:none}
.arena-scene .role-slot{min-width:0;flex:1}
.arena-scene .match-lane .clock-entry{display:block;margin:.25rem auto;padding:.25rem .4rem;font-size:.76rem;border-color:var(--card-color);white-space:normal}
#partner-hint{max-width:100px;font-size:.65rem;line-height:1.15;background:#161929ea;border-radius:5px;padding:.23rem .4rem}
#choice-picker-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.6rem}
#choice-picker-actions:empty{display:none}
.pick-group{width:100%;display:flex;justify-content:center;align-items:stretch;gap:.45rem;flex-wrap:wrap}
.pick-group>.primary{align-self:center}

.card .featured-role{
  flex:none;align-self:stretch;display:flex;align-items:center;justify-content:center;
  gap:.28em;min-width:0;margin:.12rem .2rem 0;padding:.16rem .2rem;
  border:1px solid #bd9550;border-radius:4px;text-transform:uppercase;
  font-size:.71rem;font-weight:900;letter-spacing:.09em;line-height:1.15;
}
.card .featured-role .event-emblem{
  width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:none;
}
.card[data-role=leader] .featured-role{
  background:linear-gradient(145deg,#fff0b7,#dbaa4d);color:#2b1b0d;
}
.card[data-role=manager]{
  border:4px solid #08090c;padding:5px;
  background:#15161a;box-shadow:inset 0 0 0 1px #d2d9df,inset 0 0 0 3px #8e723e;
}
.card[data-role=manager] .featured-role{
  color:#ffdb87;background:linear-gradient(145deg,#303138,#111216 72%);
  border-color:#b4bac2;
}
.card.mini-card .featured-role{
  font-size:.44rem;letter-spacing:0;margin:0;padding:.12rem 0;gap:.12em;
}
.card.mini-card[data-role=manager]{border-width:2px;padding:2px}

/* Keep the ring, Factions, and hand in stable positions for every seat count. */
.arena-scene.fit-board{
  width:100%;max-width:1720px;height:var(--board-height,720px);
  grid-template-columns:clamp(185px,20vw,300px) minmax(0,1fr) clamp(155px,16vw,240px);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"flow flow flow" "opponents center ringside" "opponents hand ringside";
  gap:.5rem .8rem;padding:.25rem .8rem .45rem;
}
.arena-scene.fit-board #players{
  grid-area:opponents;display:flex;flex-direction:column;gap:.4rem;
  min-height:0;margin:0;overflow:auto;scrollbar-gutter:stable;
}
.arena-scene.fit-board #players .player{
  width:100%;margin:0;padding:.2rem .35rem;background:#121623b3;border:1px solid #464a60;border-radius:8px;
}
.arena-scene.fit-board #players .seat-label,.arena-scene.fit-board #players .player>p{
  max-width:none;text-align:left;
}
.arena-scene.fit-board #players .seat-faction:has(.role-slots){
  display:grid;grid-template-columns:minmax(0,1fr);min-height:0;
}
.arena-scene.fit-board #players .faction-brand{justify-self:stretch}
.arena-scene.fit-board :is(#players,#play-zone) .worker-line{max-height:none;overflow:visible}
.opponent-faction>summary{cursor:pointer;color:#e7d8bd;font-size:.72rem;padding:.2rem .25rem}
.arena-scene.fit-board .table-center{display:block;align-self:stretch;min-height:0;overflow:auto}
.arena-scene.fit-board .center-play{display:flex;flex-direction:column;min-height:100%;min-width:0}
.arena-scene.fit-board .ring{flex:1;min-height:172px;max-height:none;aspect-ratio:auto;margin:0}
.arena-scene.fit-board .ring-scenery{object-fit:fill}
.arena-scene.fit-board #match{left:11%;right:11%;top:26%;max-height:64%}
.arena-scene.fit-board .match-lanes{gap:.45rem;flex-wrap:wrap}
.arena-scene.fit-board .match-lane{min-width:68px;max-width:100%;padding:.28rem .4rem}
.arena-scene.fit-board .match-lane h3,.arena-scene.fit-board .match-lane p{font-size:.73rem}
.match-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem}
.match-lane .allied{color:#9dd1ff}
.arena-scene.fit-board .decision{margin:.15rem 0 0;width:100%;border-radius:8px}
.arena-scene.fit-board .decision .choices{max-height:92px}
.arena-scene.fit-board .decision{padding:.5rem .65rem;border:1px solid #38394b}
.arena-scene.fit-board .decision.decision-ready{border-color:#c99b55;background:#211c24}
.arena-scene.fit-board .decision h2{display:block;font-size:clamp(.95rem,1.65vw,1.28rem);line-height:1.2;margin:0 0 .2rem}
.decision-ready #prompt-title{color:#ffe7b2}
#effects-on-you,#gimmick-opportunities{margin:.35rem 0;padding:.35rem .5rem;border:1px solid;border-radius:6px;text-align:left;font-size:.8rem}
#effects-on-you{background:#472b30;border-color:#ed928d;color:#fff1ef}
#effects-on-you.entrance-canceled{padding:.65rem .8rem;border-width:2px;font-size:.95rem}
#effects-on-you.entrance-canceled>strong{font-size:1.1rem}
#effect-notices{margin:.2rem 0;padding-left:1.15rem}
#dismiss-effects{font-size:.72rem;padding:.18rem .4rem}
#gimmick-opportunities{background:#30253e;border-color:#c59dd9;color:#f1defa}
#gimmick-actions{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem;max-height:7rem;overflow:auto}
#gimmick-actions button{font-size:.75rem;padding:.25rem .45rem}
#decision-tip,.decision-tip,#entrance-note{color:#e9dec8;font-size:.8rem;line-height:1.4;margin:.3rem 0}
#entrance-note summary{cursor:pointer;color:#ffdc91}
#entrance-note p{margin:.25rem 0}
.decision #end-turn:not(.primary){font-size:.72rem;padding:.2rem .5rem;background:transparent}
#goal progress{display:block;width:100%;height:.7rem;margin:.35rem 0;accent-color:var(--gold)}
.goal-milestones{display:flex;gap:.25rem;flex-wrap:wrap;list-style:none;padding:0;margin:.4rem 0}
.goal-milestones li{border:1px solid #665574;border-radius:4px;padding:.1rem .26rem;color:#ddd0e4}
.goal-milestones li.reached{border-color:#d7b36b;color:#ffe3a1}
.arena-scene.fit-board .ringside{
  grid-area:ringside;min-width:0;min-height:0;overflow:auto;
  display:flex;flex-direction:column;gap:.35rem;padding:.35rem;
  background:#121623b3;border:1px solid #464a60;border-radius:8px;
}
.arena-scene.fit-board .ringside #event{width:75px;margin:0;min-height:0}
.arena-scene.fit-board .ringside .piles{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;align-items:end;
}
.arena-scene.fit-board .ringside #table-decks,.arena-scene.fit-board .ringside #gimmick-discard{display:contents}
.arena-scene.fit-board .ringside .player-bank{width:100%}
.arena-scene.fit-board #play-zone{width:100%;flex:1 0 auto;background:#121623b3;border:1px solid #464a60;border-radius:8px}
.arena-scene.fit-board #play-zone[data-zone=faction]{border-color:#e1b86d}
.arena-scene.fit-board .collection{margin:0;align-self:end}
.arena-scene.fit-board #cards.roster-hand{
  height:250px;min-height:250px;--fan-step:min(132px,max(0px,calc((100cqw - 250px) / var(--hand-gaps))));
}
.arena-scene.fit-board #cards.roster-hand :is(.card-rules,.card-blurb){display:none}
.arena-scene.fit-board[data-scene=finished]{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"flow" "center";
}
.arena-scene[data-scene=finished] :is(#players,.ringside,.collection,.ring-scenery){display:none}
.arena-scene[data-scene=finished] .table-center{grid-area:center}
.arena-scene.fit-board[data-scene=finished] .ring{min-height:200px;background:#121524}
.arena-scene.fit-board[data-scene=finished] #match{inset:auto;max-height:none}
@media(max-width:820px){
  .arena-scene.fit-board{
    height:auto;grid-template-columns:minmax(0,1fr) minmax(138px,29vw);
    grid-template-rows:auto auto minmax(220px,auto) auto;
    grid-template-areas:"flow flow" "opponents opponents" "center ringside" "hand ringside";
    padding:.25rem .4rem;
  }
  .arena-scene.fit-board #players{flex-direction:row}
  .arena-scene.fit-board #players .player{min-width:125px}
  .arena-scene.fit-board #players .seat-faction{max-height:min(220px,30dvh);overflow:auto}
  .arena-scene.fit-board .ring{min-height:220px}
  .arena-scene.fit-board #cards.roster-hand{--fan-step:min(115px,max(0px,calc((100cqw - 230px) / var(--hand-gaps))))}
}
@media(max-width:490px){
  .arena-scene.fit-board{grid-template-columns:minmax(0,1fr);grid-template-areas:"flow" "opponents" "center" "hand" "ringside"}
  .arena-scene.fit-board .ringside{max-height:none}
  .arena-scene.fit-board #cards.roster-hand .card{width:122px}
}
.hosted-landing-open>header{display:none}
#hosted-landing{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);
  min-height:100dvh;background:#10131c;
}
.landing-hero{
  isolation:isolate;position:relative;overflow:hidden;min-height:650px;
  display:grid;grid-template-rows:auto 1fr;
  background:linear-gradient(180deg,#090d1bec 4%,#11152477 50%,#10131c 100%),
             url('/art/card-arena') center/cover;
  border-right:1px solid #856845;
}
#splash-theme-toggle{margin-top:.75rem;font-size:.8rem}
.landing-brand{position:relative;z-index:2;text-align:center;padding:clamp(1.4rem,5vw,4rem) 1rem 0}
.landing-brand img{display:block;width:min(84%,540px);max-height:31dvh;object-fit:contain;margin:auto;filter:drop-shadow(0 10px 14px #03040b)}
.landing-lineup{position:relative;min-height:360px;align-self:end;height:clamp(380px,60vh,660px)}
.landing-lineup img{position:absolute;bottom:-5%;height:85%;width:32%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 6px 18px #08090d)}
.landing-lineup .lineup-avalanche{left:1%;height:78%}
.landing-lineup .lineup-donna{left:14%;height:92%;z-index:1}
.landing-lineup .lineup-brocephus{left:27%;height:92%;z-index:2}
.landing-lineup .lineup-oh{left:42%;height:81%;z-index:1}
.landing-lineup .lineup-daya{left:56%;height:96%}
.landing-lineup .lineup-thunderdog{right:0;height:78%}
.landing-panel{
  align-self:center;width:100%;max-width:520px;margin:auto;padding:clamp(1.5rem,4vw,4rem);
}
.landing-panel h1{font-size:clamp(2rem,4vw,3.65rem);margin:0 0 1.4rem}
.landing-panel label{display:grid;gap:.4rem;margin:.95rem 0;color:#e9dfcf;font-size:.9rem}
.landing-panel input,.landing-panel select{width:100%;background:#1a1e2b;border-color:#53576b}
.landing-tutorial{margin:.85rem 0}
.landing-tutorial button{border-color:#c99b55;color:#ffe7b2}
.landing-tutorial p{margin:.35rem 0;color:#e9dec8;font-size:.8rem}
#tutorial-step{margin:.15rem 0;padding:.25rem .5rem;color:#f6cb80;font-size:.75rem;font-weight:700}
#tutorial-lesson{width:min(560px,92vw)}
#tutorial-lesson .dialog-actions{flex-wrap:wrap}
#tutorial-lesson-content p,#tutorial-faction-tip{line-height:1.5}
#tutorial-faction-tip strong{color:var(--gold)}
.landing-actions,.landing-invite{display:flex;flex-wrap:wrap;gap:.6rem}
.landing-invite{margin-top:1.3rem;padding-top:.35rem;border-top:1px solid #3b3d4d}
.landing-invite label{flex-basis:100%;margin-bottom:0}
#hosted-seat-controls{margin-top:.7rem}
#public-lobbies,#hosted-members,#chat-messages{padding-left:0;list-style:none}
#public-lobbies li,#hosted-members li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.35rem 0;overflow-wrap:anywhere}
#chat-unread{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;margin-left:.2rem;padding:0 .25rem;border-radius:999px;background:#edbe74;color:#171521;font-size:.73rem;font-weight:800;vertical-align:middle}
#chat-dialog{width:min(520px,92vw)}
#lobby-chat-mount{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--line)}
#lobby-chat-mount #chat-messages{height:clamp(100px,20dvh,190px)}
#lobby-chat-mount #chat-form label{margin:.4rem 0}
#chat-messages{height:min(35dvh,280px);overflow:auto;overflow-wrap:anywhere;background:#101a20;border-radius:6px;padding:.6rem;margin:.6rem 0}
#chat-messages li{padding:.3rem 0}
.chat-actions{display:flex;gap:.5rem;flex-wrap:wrap}
#chat-message{flex:1;min-width:0}
.landing-panel #hosted-error{color:#ffb7af}
#match-result-dialog,#round-event-dialog{width:min(500px,92vw)}
#round-event-rules{line-height:1.5}
#choice-picker-cards .pick-tile>.primary{width:100%;margin-top:.35rem}
body:has(#match-result-dialog[open]) .ring .match-lanes{visibility:hidden}
#match-winning-title{font-size:.9rem;margin:.5rem 0}
#match-winning-card-list{display:flex;flex-wrap:wrap;gap:.5rem}
#match-winning-card-list .mini-card{width:min(115px,42%);aspect-ratio:5/7;min-height:0;padding:5px}
#match-winning-card-list .card-art{min-height:0}
#match-winning-card-list :is(.card-identity,.card-rules){display:none}
#match-result-entries .winning-entry strong{color:var(--gold)}
#match-result-entries{list-style:none;margin:.6rem 0;padding:0}
#match-result-entries li{padding:.55rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
#match-result-entries .recap-printed-power,#match-result-entries .match-power-total{display:block;margin-top:.2rem;color:#e9dec8;font-size:.9rem}
@media(max-width:720px){
  #hosted-landing{grid-template-columns:minmax(0,1fr)}
  .landing-hero{min-height:0;border-right:0;border-bottom:1px solid #856845}
  .landing-brand img{max-height:150px}
  .landing-lineup{min-height:0;height:clamp(170px,38vw,280px)}
}

.feedback-actions{align-items:center;margin-top:.7rem}
#feedback-dialog{width:min(520px,92vw)}
#feedback-message{width:100%;resize:vertical;background:#101a20;color:var(--ink);border:1px solid #53636b;border-radius:5px;padding:.6rem;font:inherit}
#feedback-dialog .dialog-actions{flex-wrap:wrap}


.studio-logo{--studio-size:clamp(54px,7vw,96px);position:absolute;width:var(--studio-size);height:auto;object-fit:contain;pointer-events:none}
.landing-hero>.studio-logo{left:.45rem;bottom:.45rem;z-index:3}
.arena-scene{position:relative}
.arena-scene>.studio-logo{left:.55rem;bottom:.45rem;z-index:0}
.arena-scene.fit-board #players{position:relative;z-index:1}
.arena-scene.fit-board[data-scene=finished]{padding-bottom:calc(clamp(54px,7vw,96px) + .6rem)}

/* Give the waiting lobby its own viewport-sized layout. */
#hosted-landing:has(#hosted-lobby:not([hidden])){
  height:100dvh;min-height:0;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);overflow:hidden;
}
#hosted-landing:has(#hosted-lobby:not([hidden])) .landing-hero{min-height:0}
#hosted-landing:has(#hosted-lobby:not([hidden])) .landing-panel{
  align-self:stretch;min-height:0;max-width:880px;margin:0 auto;padding:clamp(.65rem,2vw,1.6rem);overflow:auto;
}
#hosted-landing:has(#hosted-lobby:not([hidden])) .landing-panel h1{font-size:clamp(1.45rem,3vw,2.5rem);margin:0 0 .55rem}
#hosted-lobby:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
#hosted-lobby button{padding:.36rem .5rem;font-size:.8rem}
#hosted-lobby .landing-actions{gap:.35rem}
#hosted-lobby label{margin:0;gap:.2rem}
.lobby-invite{display:flex;align-items:end;gap:.35rem}
.lobby-invite label{flex:1;min-width:0}
#hosted-lobby input{padding:.36rem .5rem}
#hosted-seat-controls{margin-top:.45rem}
#hosted-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;margin:.45rem 0}
#hosted-members li{margin:0;padding:.2rem .25rem;min-height:1.85rem;border:1px solid var(--line);border-radius:5px;font-size:.78rem;gap:.25rem}
#hosted-members li button{padding:.2rem .3rem;flex-shrink:0;font-size:.72rem}
#hosted-status{margin:.35rem 0 .5rem}
#lobby-chat-mount{min-width:0;margin:0;padding:0 0 0 .6rem;border:0;border-left:1px solid var(--line)}
#lobby-chat-title{margin:0;font-size:1rem}
#lobby-chat-mount #chat-messages{height:clamp(55px,25dvh,225px);margin:.3rem 0}
#lobby-chat-mount #chat-form label{margin:.2rem 0}
#lobby-chat-mount .chat-actions{gap:.3rem}
#lobby-chat-mount #chat-status:empty{display:none}
@media(max-width:820px){
  .arena-scene.fit-board{padding-bottom:calc(clamp(54px,7vw,96px) + .6rem)}
  #hosted-landing:has(#hosted-lobby:not([hidden])){grid-template-columns:minmax(0,1fr)}
  #hosted-landing:has(#hosted-lobby:not([hidden])) .landing-hero{display:none}
}
@media(max-width:520px){
  #hosted-lobby:not([hidden]){grid-template-columns:minmax(0,1fr);gap:.55rem}
  #lobby-chat-mount{padding:.45rem 0 0;border-left:0;border-top:1px solid var(--line)}
  #lobby-chat-mount #chat-messages{height:clamp(55px,17dvh,145px)}
}
@media(max-height:680px){
  #lobby-chat-mount #chat-messages{height:clamp(48px,12dvh,82px)}
  #hosted-landing:has(#hosted-lobby:not([hidden])) .feedback-actions{margin-top:.45rem}
}
@media(max-height:500px){
  #hosted-landing:has(#hosted-lobby:not([hidden])){grid-template-columns:minmax(0,1fr)}
  #hosted-landing:has(#hosted-lobby:not([hidden])) .landing-hero{display:none}
  #hosted-landing:has(#hosted-lobby:not([hidden])) .landing-panel{padding:.5rem .75rem}
}
@media(max-height:500px){
  #hosted-landing:has(#hosted-lobby:not([hidden])) .landing-panel>.eyebrow{display:none}
}

#champion-dialog{width:min(1050px,96vw);max-width:none;max-height:calc(100dvh - 1rem);padding:clamp(.65rem,2vw,1.5rem);text-align:center;border-color:var(--gold);background:radial-gradient(ellipse at top,#443228,var(--panel) 70%)}
#champion-title{font-size:clamp(1.6rem,5vw,2.7rem);color:var(--gold);text-transform:uppercase}
#champion-winners,.final-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem}
.champion-winner{display:grid;justify-items:center;gap:.35rem;min-width:110px;overflow-wrap:anywhere}
.champion-winner strong{font-size:1.2rem}
.champion-logo{width:min(150px,30vw);height:100px;object-fit:contain}
#champion-dialog .dialog-actions{justify-content:center;flex-wrap:wrap}
.final-actions{margin:.5rem 0 1rem}
@media (prefers-reduced-motion:no-preference){
  .match-reveal .match-revealed-cards{animation:match-card-reveal .4s ease-out both}
  .match-reveal .match-power-total{animation:match-result-fade .3s .6s both}
  .match-reveal #match-result-title,.match-reveal #match-winning-cards,
  .match-reveal #match-reward-note{animation:match-result-fade .35s 1.25s both}
  .match-reveal .winning-entry strong{animation:match-winner-color .2s 1.25s both}
}
@keyframes match-card-reveal{from{opacity:0;transform:perspective(450px) rotateX(-70deg)}to{opacity:1;transform:none}}
@keyframes match-result-fade{from{opacity:0}to{opacity:1}}
@keyframes match-winner-color{from{color:var(--ink)}to{color:var(--gold)}}

.card.wildcard-card{
  --card-color:#e4b7ff!important;
  border:3px double transparent;
  background:linear-gradient(155deg,#2a1b37,#11101c) padding-box,
    conic-gradient(from 35deg,#b380d8,#e5dbf5,#604077,#e6c98a,#7b4c9e,#f7dfff,#b380d8) border-box;
  box-shadow:inset 0 0 0 1px #402651;
}
.card.wildcard-card .class-trait{color:#e4b7ff;border-color:#bb8be0}


/* Frame full-length cutouts around the face and upper body on small cards. */
.portrait:is([data-portrait="benny-bollocks"],[data-portrait="big-joe"],
  [data-portrait="devil-noboru"],[data-portrait="hard-way-hajay"],[data-portrait="the-mighty-mite"]){
  object-position:center top;transform-origin:center top;transform:scale(1.32);
}
.portrait[data-portrait="benny-bollocks"]{transform:scale(1.6)}
.portrait[data-portrait="big-joe"]{transform:scale(1.38)}
.card:not(#inspect .card) .portrait:is([data-portrait="danger-dragon"],[data-portrait="sikwiddit"],[data-portrait="el-gilberto"]){
  object-position:center top;transform-origin:center top;
  transform:translateX(var(--portrait-shift,-8%)) scale(1.55);
}
.portrait[data-portrait="sikwiddit"]{--portrait-shift:4%}

.inspect-table{margin-top:.75rem}
.champion-belt{display:block;width:min(360px,90%);height:clamp(64px,15dvh,128px);object-fit:contain;margin:.25rem auto .75rem}

.match-effect-card{color:var(--gold);text-decoration:underline;padding:.15rem .35rem}
#match-result-effect-list{padding-left:1.25rem}
#match-result-effect-list li{margin:.25rem 0}

#final-bell-icon .event-emblem{width:42px;height:42px;margin-bottom:.35rem}
#stackies{margin-top:1rem}
#stackies h3{color:var(--gold);margin:0 0 .5rem}
#stackies-awards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:.5rem}
.stackies-award{display:grid;justify-items:center;align-content:start;gap:.2rem;min-width:0;padding:.4rem;border:1px solid var(--line);border-radius:.6rem;overflow-wrap:anywhere}
.stackies-award span{font-size:.85rem}
.stackies-trophy{width:56px;height:56px;object-fit:contain}

.first-player-badge {
  display:inline-block;
  margin-inline:.4rem;
  padding:.12rem .35rem;
  border:1px solid #d9a94f;
  border-radius:.35rem;
  color:#ffda8d;
  font-size:.72rem;
  white-space:nowrap;
}
#faction-play {
  position:absolute;
  z-index:3;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  display:grid;
  justify-items:center;
  gap:.35rem;
  width:max-content;
  max-width:90%;
  pointer-events:none;
}
#faction-play[hidden] {display:none}
#faction-play-label {
  margin:0;
  padding:.3rem .6rem;
  border-radius:.4rem;
  background:#171a29;
  text-align:center;
}
#faction-play-card {pointer-events:auto}
#faction-play-card .card {animation:faction-card-enter .22s ease-out}
@keyframes faction-card-enter {
  from {opacity:0;transform:translateY(12px) scale(.94)}
  to {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce) {
  #faction-play-card .card {animation:none}
}

.arena-scene[data-scene=match]:not(.showing-faction-play) #faction-play {
  inset:auto .4rem .4rem auto;
  transform:none;
}

#acting {display:flex;align-items:center;justify-content:flex-end;gap:.45rem;flex-wrap:wrap;margin-inline-start:auto}
#faction-play:not(.settled) .card {width:clamp(80px,12vw,130px)}
#faction-play.settled {
  inset:auto .4rem .4rem auto;
  transform:none;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
#faction-play.settled .card {width:46px}
#faction-play.settled .card-name {font-size:.48rem}

.match-partners {display:flex;flex-wrap:wrap;gap:.25rem;max-height:6rem;overflow:auto}
.match-partners button {font-size:.73rem;padding:.25rem .4rem}
.arena-scene .match-lane .mini-card {width:clamp(42px,7vw,94px)}
#hand-discard {display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.25rem}
.arena-scene.fit-board #cards.roster-hand.discard-hand {
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:.25rem;align-items:end;padding:.3rem;overflow:visible;
}
.discard-slot {display:grid;min-width:0;justify-items:center;gap:.25rem}
.arena-scene.fit-board #cards.roster-hand.discard-hand .card {
  position:static;width:min(100%,125px);height:auto;min-height:0;aspect-ratio:5/7;transform:none;
}
.discard-tag {font-size:.72rem;padding:.25rem .4rem}
.discard-tagged {outline:3px solid #ffbc61;outline-offset:-3px}
.role-progress {color:var(--gold);font-size:.66rem;text-align:center}
#match-result-entries {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.55rem}
#match-result-dialog {width:min(860px,94vw)}
.recap-card-row {display:flex;gap:.2rem;justify-content:center}
.recap-card-slot {position:relative;flex:1;max-width:105px;min-width:0;perspective:500px;text-align:center}
.recap-card-slot .card {width:100%;aspect-ratio:5/7;min-height:0}
.recap-card-back {position:absolute;inset:0;width:100%;aspect-ratio:5/7;object-fit:contain;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference) {
  .match-reveal #match-result-entries .match-revealed-cards {animation:none}
  .match-reveal .recap-card-slot .card {animation:recap-face .42s var(--flip-delay) both}
  .match-reveal .recap-card-back {animation:recap-back .42s var(--flip-delay) both}
  .match-reveal :is(#match-result-title,#match-winning-cards,#match-tiebreak,#match-result-effects,.match-power-total) {
    animation:match-result-fade .3s var(--summary-delay) both;
  }
}
@keyframes recap-face {0%,45% {opacity:0;transform:rotateY(90deg)} 46% {opacity:1} 100% {opacity:1;transform:none}}
@keyframes recap-back {0% {visibility:visible;transform:none} 48% {visibility:visible;transform:rotateY(90deg)} 49%,100% {visibility:hidden}}

.tabletop .flow-panel {flex-wrap:wrap}
#turn-order {flex:1 0 100%}
#turn-order-label {color:var(--muted);font-size:.72rem;font-weight:700}
#seat-order {
  display:flex;flex-wrap:wrap;gap:.25rem .5rem;
  counter-reset:turn-seat;
}
#seat-order li {color:var(--ink);counter-increment:turn-seat;padding:.15rem .35rem;border-radius:.3rem;background:#202436}
#seat-order li::before {content:counter(turn-seat) ". ";color:var(--gold)}
#seat-order .current {outline:1px solid var(--gold);background:#443825}
#faction-recent {
  position:absolute;z-index:2;inset:auto .4rem .35rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.3rem;
  background:#141727ee;border-radius:.4rem;font-size:.72rem;
}
#faction-recent {justify-content:center;text-align:center}
.faction-recent-entries {display:flex;flex:1 1 100%;justify-content:safe center;gap:.4rem;overflow-x:auto;padding:.15rem}
.faction-recent-entry {display:grid;justify-items:center;align-content:start;gap:.2rem;flex:0 0 clamp(64px,7vw,99px);min-width:0}
.faction-recent-entry > span {overflow-wrap:anywhere}
.faction-recent-entry .mini-card {width:clamp(52px,5vw,75px);flex:none}
.faction-recent-entry .card-art {min-height:0}
.arena-scene #faction-play.settled {display:none}
#ring-reveal {
  position:absolute;z-index:5;inset:0;display:grid;align-content:center;gap:.4rem;
  padding:.5rem;background:#151827f2;border-radius:.45rem;text-align:center;
}
.ring-reveal-lanes {display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}
.ring-reveal-lane {min-width:0;max-width:30%;font-size:.7rem}
#ring-reveal .recap-card-slot {width:clamp(34px,6vw,85px)}
@media (prefers-reduced-motion:no-preference) {
  #ring-reveal .recap-card-slot .card {animation:recap-face .42s var(--flip-delay) both}
  #ring-reveal .recap-card-back {animation:recap-back .42s var(--flip-delay) both}
}

.recap-card-slot .card-art {min-height:0}
.recap-card-slot .card-head {padding:.18rem .25rem;gap:.15rem}
.recap-card-slot .card-name {font-size:.67rem}
.recap-card-slot :is(.card-identity,.card-rules,.card-blurb) {display:none}
#match-prize-tokens {display:flex;align-items:center;gap:.6rem}
#match-prize-tokens .token-count {font-size:1.25rem}
#match-prize-tokens .token-icon {width:44px;height:44px}
#match-prize-cards {display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0}
#match-prize-cards .card {width:clamp(138px,32vw,190px)}

.reference-group + .reference-group {margin-top:1.25rem}
.reference-group h3 {margin:0 0 .6rem;color:var(--gold)}

.owner-page {min-height:100dvh}
#owner-dashboard {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);
  gap:1rem 1.5rem;width:calc(100% - clamp(1rem,5vw,6rem));max-width:1800px;
  margin:clamp(.5rem,2vw,2rem) auto;padding:clamp(.75rem,2vw,1.65rem);
  background:#151827ee;border:1px solid var(--line);border-radius:12px;
}
#owner-form {display:flex;align-items:end;gap:.6rem;flex-wrap:wrap}
#owner-form label {display:grid;gap:.3rem;flex:1;min-width:10rem}
#owner-form input {width:100%;min-width:0}
#owner-status,#owner-counts,.owner-back {grid-column:1/-1;margin:0}
#owner-status:empty {display:none}
#owner-counts {display:grid;grid-template-columns:minmax(16rem,1fr) minmax(0,1.65fr) minmax(14rem,1fr);gap:1rem;align-items:start}
.owner-panel {min-width:0;padding:clamp(.65rem,1.4vw,1.2rem);background:#1b1e2c;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere}
.owner-panel h2 {color:var(--gold)}
.owner-panel details {border-top:1px solid var(--line);padding:.6rem 0}
.owner-panel details details {margin-top:.5rem}
.owner-panel summary {cursor:pointer}
.owner-panel ul,.owner-panel ol {padding-inline-start:1.35rem}
.owner-panel li + li {margin-top:.35rem}
@media(max-width:1000px){
  #owner-counts {grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .owner-panel:last-child {grid-column:1/-1}
}
@media(max-width:680px){
  #owner-dashboard,#owner-counts {grid-template-columns:minmax(0,1fr)}
}

@media(max-height:740px){
  #champion-title{font-size:clamp(1.3rem,4vw,2rem);margin-bottom:.35rem}
  .champion-belt{height:clamp(38px,10dvh,74px);margin:.15rem auto .35rem}
  .champion-logo{height:clamp(28px,8dvh,60px)}
  .champion-winner{gap:.15rem}
  #stackies{margin-top:.5rem}
  .stackies-trophy{width:38px;height:38px}
  #champion-dialog .dialog-actions{margin-top:.65rem;gap:.35rem}
}

.arena-scene .match-lane .concealed:has(.card-back) {height:auto;min-height:0;display:flex;flex-wrap:wrap}
.arena-scene .match-lane .card-back {width:clamp(42px,7vw,94px);height:auto;aspect-ratio:5/7}
.arena-scene.fit-board #cards.roster-hand.discard-hand {
  grid-auto-columns:minmax(92px,1fr);overflow-x:auto;overflow-y:hidden;
}
#hand-discard {flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference) {
  .clock-reveal .match-cards {animation:faction-card-enter .24s var(--clock-delay) both}
}

.private-event-preview {display:grid;justify-items:center;gap:.25rem;margin-top:.4rem}