/* =================================================================
   CARDFIGHT!! VANGUARD ONLINE - UNIFIED MASTER STYLES
   Compiled & bundled for 100% offline high-fidelity UI rendering
   ================================================================= */

/* --- Begin: theme.css --- */
/* Master palette. All active UI styles reference these tokens. Card artwork is unchanged. */
:root {
  color-scheme: dark;
  --ui-bg: #13151a;
  --ui-surface: #20232b;
  --ui-raised: #2b303a;
  --ui-border: #444b59;
  --ui-muted: #aeb5c2;
  --ui-text: #f5f6f8;
  --ui-accent: #ff8979;
  --ui-accent-soft: #ffc3ba;
  --ui-on-accent: #201817;
  --ui-shadow: #000000;
  --surface: var(--ui-surface);
  --line: var(--ui-border);
  --muted: var(--ui-muted);
  --gold: var(--ui-accent);
  --green: var(--ui-text);
  --red: var(--ui-accent);
}
html,body{background-color:var(--ui-bg);color:var(--ui-text)}
button,input,select,summary,a{ -webkit-tap-highlight-color:transparent }
:focus-visible{outline-color:var(--ui-accent)!important}
input[type=checkbox]{accent-color:var(--ui-accent)}
.menu-label strong,.menu-heading h1,.lobby h1,.library h1{color:var(--ui-text)}
.library-button.primary,.button-primary,.in-match .action-button.primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent)}
.menu-button.featured,.menu-button.selected{background:var(--ui-raised);border-color:var(--ui-accent)}
.menu-trail,.head-step,.kicker{color:var(--ui-accent)}
.lobby-screen{background:radial-gradient(ellipse at 50% 25%,var(--ui-raised),var(--ui-bg) 75%)}
.in-match{background:var(--ui-bg)}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Real card Symbol assets keep their original colors and proportions. */
.card-symbol{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;line-height:1.4;white-space:nowrap}
body .symbol-icon{display:inline-block;width:26px;height:26px;min-width:26px;max-width:26px;flex:0 0 26px;object-fit:contain;vertical-align:middle;margin:0;align-self:center;border:0;border-radius:0;background:none;box-shadow:none}
.card-identity{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;color:var(--ui-muted)}
.card-caption .card-symbol{white-space:normal;font-size:12px}
.symbol-filter-preview:empty{display:none}
.symbol-filter-preview{display:block;margin-top:5px;font-size:12px}
.skill-text{white-space:pre-wrap;line-height:1.8}
@media(max-width:600px){body .symbol-icon{width:24px;height:24px;min-width:24px;max-width:24px;flex-basis:24px}}

/* --- End: theme.css ---
 */

/* --- Begin: styles.css --- */
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 70% 0,var(--ui-raised),var(--ui-bg) 65%);min-height:100dvh}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:var(--ui-text);border:1px solid var(--ui-border);background:var(--ui-surface);border-radius:12px;padding:9px 17px;transition:background .15s,transform .15s}button:hover{background:var(--ui-raised)}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent);font-weight:700}a{color:var(--ui-accent-soft)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}.topbar{height:70px;display:flex;align-items:center;gap:20px;padding:10px max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--ui-border)}.back{display:flex;color:var(--ui-text)}.logo{width:100px;height:44px;object-fit:contain}.edition{font-size:11px;letter-spacing:3px;color:var(--ui-muted)}.language{margin-left:auto;display:flex;gap:4px}.language button{font-size:12px;padding:7px 11px}.language button[aria-pressed=true]{background:var(--ui-accent);color:var(--ui-on-accent);border-color:var(--ui-accent)}.tabs{display:flex;gap:8px;max-width:1200px;margin:20px auto 0;padding:0 24px}.tabs button{border:none;background:transparent;color:var(--ui-muted);border-radius:0;border-bottom:2px solid transparent}.tabs button[aria-current=true]{color:var(--ui-text);border-bottom-color:var(--ui-accent)}main{max-width:1200px;padding:24px;margin:auto}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(25px,3vw,40px);letter-spacing:-1px;margin-bottom:8px}h2{font-size:22px}.muted{color:var(--ui-muted)}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--ui-accent)}.intro{margin-bottom:26px}.starter-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.starter-tile{position:relative;display:flex;align-items:center;gap:24px;padding:26px;border:1px solid var(--ui-border);border-radius:24px;background:linear-gradient(135deg,var(--ui-raised),var(--ui-surface));overflow:hidden}.starter-tile.chosen{border-color:var(--ui-accent)}.hero-card{width:145px;aspect-ratio:5/7;object-fit:contain;transform:rotate(-5deg);filter:drop-shadow(0 14px 14px #0008)}.starter-copy{flex:1;min-width:0}.starter-copy h2{margin:8px 0}.starter-copy p{font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.chosen-label{color:var(--ui-accent-soft);font-size:12px;font-weight:700}.active-summary{margin-top:24px;border:1px solid var(--ui-border);border-radius:18px;padding:20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.active-summary p{margin:0}.notice{font-size:12px;color:var(--ui-muted);margin-top:22px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}input,select{border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);border-radius:10px;padding:9px 12px}input[type=search]{flex:1;min-width:140px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px}.card-cell{min-width:0;position:relative}.card-open{display:block;padding:0;border:0;background:none!important;width:100%;text-align:left}.card-open img{width:100%;aspect-ratio:5/7;object-fit:contain;border-radius:7px;transition:transform .15s}.card-open:hover img{transform:translateY(-4px)}.card-caption{display:block;font-size:12px;margin-top:5px;min-height:36px}.card-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ui-muted)}.counter{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:4px;background:var(--ui-surface);border-radius:10px}.counter button{border:0;padding:4px 13px;font-size:21px}.counter output{font-weight:700}.deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.deck-entry{padding:20px;border-radius:18px;background:var(--ui-surface);border:1px solid var(--ui-border)}.deck-entry h2{font-size:18px;margin:8px 0}.deck-entry p{font-size:12px}.deck-entry .actions button{font-size:12px}.editor-head{position:sticky;top:0;z-index:5;background:var(--ui-bg);padding:14px 0;border-bottom:1px solid var(--ui-border);margin-bottom:18px}.editor-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.editor-line input{flex:1;min-width:150px}.stats{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin:12px 0 5px}.stats strong{color:var(--ui-accent-soft)}.errors{color:var(--ui-accent-soft);font-size:12px;margin:10px 0 0}.valid{font-size:12px;color:var(--ui-text);margin:10px 0 0}.source-link{font-size:12px}.empty{padding:30px;text-align:center;color:var(--ui-muted)}dialog{color:var(--ui-text);background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:20px;padding:0;width:min(780px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#000c;backdrop-filter:blur(4px)}.dialog-head{position:sticky;top:0;z-index:2;background:var(--ui-surface);display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--ui-border)}.dialog-head span{font-size:10px;letter-spacing:2px;color:var(--ui-muted)}.close{font-size:25px;line-height:1;padding:3px 10px}.detail-grid{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:24px}.detail-image{width:100%;object-fit:contain;align-self:start}.detail-grid h2{font-size:21px;margin:6px 0}.detail-stats{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;margin:16px 0}.detail-stats b{display:block;font-size:17px}.skill{white-space:pre-wrap;line-height:1.75;font-size:14px}.detail-note{font-size:11px;color:var(--ui-muted)}.glossary{font-size:12px;color:var(--ui-muted);margin-top:18px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ui-text);color:var(--ui-bg);padding:10px 20px;border-radius:12px;z-index:30;display:none}@media(max-width:900px){.topbar{height:54px;gap:12px}.logo{height:36px;width:85px}.tabs{margin-top:8px;padding:0 16px}.tabs button{padding:6px 12px}main{padding:16px}.starter-grid{gap:14px}.starter-tile{gap:15px;padding:18px;border-radius:18px}.hero-card{width:100px}.starter-copy h2{font-size:18px}.starter-copy button{font-size:12px;padding:7px 10px}.intro{margin-bottom:16px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px}.detail-grid{grid-template-columns:170px 1fr;gap:18px;padding:18px}.editor-head{padding:10px 0}.editor-line button{padding:7px 12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep the featured card separate from the full-width collection card buttons. */
[hidden]{display:none!important}.play-entry .actions{flex-shrink:0}.play-entry .actions button{min-height:44px}
.starter-tile .hero-card{width:145px;flex:0 0 145px}
@media(max-width:900px){.starter-tile .hero-card{width:100px;flex-basis:100px}}


/* Portrait is a normal playable layout, including lobby and dialogs. */
@media(max-width:600px) and (orientation:portrait){
  .topbar{gap:9px;padding-inline:12px}.edition{font-size:9px;letter-spacing:1px}
  .tabs{gap:0;padding-inline:12px}.tabs button{flex:1;font-size:12px;padding:9px 5px}
  .starter-grid{grid-template-columns:1fr}.starter-tile{padding:16px;gap:16px}
  .play-entry{padding:16px;gap:12px;flex-wrap:wrap}.play-entry button{width:100%;padding:12px}
  .active-summary{padding:16px}.card-grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:16px}
  .dialog-head{padding:10px 12px;gap:6px}.dialog-head span{letter-spacing:1px}
  .detail-grid{grid-template-columns:1fr;padding:14px;gap:14px}.detail-image{width:150px;justify-self:center}
  .printed-info{min-width:0}.room-form{padding:18px}.room-form select{width:100%;min-width:0}
}

.pending-call-card{display:flex;align-items:center;gap:12px;margin:12px 0;padding:10px;border:1px solid #83cce566;border-radius:12px;background:#102638}.pending-call-card button{padding:0;flex:none;background:transparent;border:0}.pending-call-card img{display:block;width:78px;height:114px;object-fit:contain}.pending-call-card span{font-size:12px;line-height:1.6}.pending-call-card strong{display:block;color:#ffe1a8;font-size:14px}.pending-call-card small{display:block;color:#afcce1}

.trigger-source.has-call-preview{display:block}.pending-call-card{width:100%;min-width:0}.pending-call-card span{min-width:0;overflow-wrap:anywhere}
/* Card album (2026-10-16): cards not owned yet stay visible in grey so the collection can be completed. */
.card-cell.unowned .foil-card img{filter:grayscale(1) brightness(.5) contrast(.9)}.card-cell.unowned .card-caption,.card-cell.unowned .card-meta{opacity:.55}.card-cell.unowned .owned-note{color:#8fa3b8}.card-cell.unowned .foil-shine{display:none}
.album-progress{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 14px;padding:10px 14px;border:1px solid #2d5b86;border-radius:10px;background:#0c1d33;overflow:hidden}.album-progress>span{position:relative;z-index:1}.album-progress>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#1f4f8066,#3aa86b55);transition:width .4s ease}
.album-filters{margin-top:-6px}.album-more{grid-column:1/-1;justify-self:center;margin:8px 0;padding:10px 22px}

/* --- End: styles.css ---
 */

/* --- Begin: card-ui.css --- */
.printed-info{color:#29272c}.printed-info .eyebrow{color:#6b5961;letter-spacing:1px}.printed-name{padding:12px 15px!important;border:2px solid #b6a799;border-radius:8px;background:linear-gradient(100deg,#fff9df,#f8ecd3);box-shadow:inset 0 0 0 2px #fffbef;color:#29222b;font-weight:800}.printed-type{font-size:12px;color:#675e66}.printed-info .detail-stats{margin:12px 0;background:#f0e9db;border-radius:9px;padding:12px;justify-content:space-between}.ability-frame{border:2px solid #b8aba1;background:#fffdf5;border-radius:10px;box-shadow:inset 0 0 0 3px #f1e8d9;overflow:hidden}.ability-frame h3{padding:9px 14px;margin:0;background:#e8dfcf;border-bottom:1px solid #b8aba1;font-size:13px}.ability-block{padding:12px 14px;margin:0!important;font-size:14px;line-height:1.85;white-space:pre-wrap;border-bottom:1px solid #e1d8c8}.ability-block:last-child{border-bottom:0}.skill-symbol{display:inline-block;width:auto!important;height:19px;vertical-align:middle;object-fit:contain;margin:0 2px;max-width:90px}.symbol-counter-blast,.symbol-soul-blast,.symbol-counter-charge,.symbol-soul-charge{height:23px}.symbol-vc,.symbol-rc,.symbol-gc{height:22px}.symbol-once{height:16px}.printed-info .detail-note{color:#74666a;margin:12px 0 0;font-size:11px}.symbol-legend{font-size:11px;margin:14px 0 0;color:#72686e}.printed-info{background:#f5f0e5;border-radius:12px;padding:16px}.room-form{display:grid;gap:13px;padding:24px}.room-form label{display:grid;gap:5px}.room-form button{min-height:43px}.room-form .split-line{border-top:1px solid var(--ui-border);padding-top:16px}.room-form input{width:100%}.room-form #room-code{text-transform:uppercase}.room-error{color:var(--ui-accent-soft);min-height:20px;font-size:12px;margin:0}.play-entry{display:flex;gap:18px;align-items:center;justify-content:space-between;margin:22px 0;padding:22px;border:1px solid var(--ui-accent);border-radius:20px;background:var(--ui-surface)}.play-entry h2{margin:0 0 5px}.play-entry p{margin:0;font-size:13px;color:var(--ui-muted)}.play-entry button{padding:14px 24px}.dialog-head .close{flex:none}@media(max-height:500px){.room-form{gap:7px;padding:15px}.play-entry{padding:16px}.ability-block{font-size:12px}.printed-info{padding:12px}}
.ability-status{color:#fff2d7!important;background:#b06e1a24;border:1px solid #f4d49a66;border-radius:6px;padding:9px 12px;font-size:12px;line-height:1.6}
.detail-art{min-width:0;align-self:start}.detail-art-preview{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in}.detail-art-preview .detail-image{display:block;width:100%;height:auto}.detail-art-preview>span{display:grid;place-items:center;min-width:48px;min-height:36px;padding:4px 12px;border:1px solid #ffffff50;border-radius:24px;background:#ffffff12;color:#f4f4f2;font-size:13px;letter-spacing:1px}.detail-art-preview:focus-visible{outline:2px solid #fff9;outline-offset:5px;border-radius:10px}
.collector-viewer[open]{display:flex;position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;box-sizing:border-box;overflow:hidden;border:0!important;border-radius:0;background:transparent!important;color:#f6f6f3;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.collector-viewer::backdrop{background:transparent;backdrop-filter:none}
.collector-open>dialog[open]:not(.collector-viewer){visibility:hidden}.collector-open>dialog[open]:not(.collector-viewer)::backdrop{visibility:hidden;background:transparent;backdrop-filter:none}
.collector-close{position:fixed;z-index:20;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));display:grid;place-items:center;width:48px;height:48px;padding:10px;border:1px solid #ffffff88;border-radius:50%;background:#151b2dcc;color:inherit;touch-action:manipulation;pointer-events:auto}.collector-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;pointer-events:none}
.collector-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;position:relative;z-index:0;isolation:isolate;perspective:1400px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;background:transparent}.collector-card{cursor:grab}.collector-stage.dragging,.collector-stage.dragging .collector-card{cursor:grabbing}
.collector-card{--card-ratio:.686;position:relative;height:min(620px,calc(var(--stage-height,70dvh) - 24px),calc((100vw - 70px) / var(--card-ratio)));aspect-ratio:var(--card-ratio);flex:none;transform-style:preserve-3d;will-change:transform}
.collector-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:3% / 2%;box-shadow:0 18px 35px #0006;background:#18212a}.collector-front{transform:translateZ(1px)}.collector-back{transform:rotateY(180deg) translateZ(1px)}.collector-face>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.collector-gloss{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--gloss-x,50%) var(--gloss-y,50%),#ffffff20,transparent 60%);mix-blend-mode:screen}.collector-foil .collector-gloss{background:linear-gradient(125deg,transparent 20%,#a8eaff25 35%,#fff4b445 48%,#ffb8e12b 60%,transparent 76%);background-size:220% 220%;background-position:var(--gloss-x,50%) var(--gloss-y,50%);opacity:.65}.collector-edge{position:absolute;left:0;top:0;width:2px;height:100%;background:linear-gradient(90deg,#b5b1a5,#f4eee0);transform:rotateY(90deg);transform-origin:left;backface-visibility:visible}
.collector-viewer button:focus-visible{outline:2px solid #fff9;outline-offset:3px}
@media(max-width:600px){.collector-card{height:min(620px,calc(var(--stage-height,70dvh) - 24px),calc((100vw - 48px) / var(--card-ratio)))}.detail-art-preview>span{min-height:40px}}
@media(max-height:450px){.collector-card{height:min(620px,calc(var(--stage-height,70dvh) - 16px),calc((100vw - 48px) / var(--card-ratio)))}}
@media(prefers-reduced-motion:reduce){.collector-card{transition:none!important}}
/* Blast/Charge cost icons: the number sits in the round slot on the right (22.7% of the icon). */
.skill-cost{position:relative;display:inline-block;height:19px;vertical-align:middle;margin:0 2px;line-height:0}.skill-cost img{height:100%;width:auto;display:block}.skill-cost b{position:absolute;top:0;bottom:0;right:0;width:22.7%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 13px/1 sans-serif}
#card-detail.compact-card .skill-cost{height:15px}#card-detail.compact-card .skill-cost b{font-size:10px}.notice-skill .skill-cost{height:12px}.notice-skill .skill-cost b{font-size:8px}

/* --- End: card-ui.css ---
 */

/* --- Begin: card-corners.css --- */
/* Shared card corner cut: applies to the artwork, not surrounding action buttons.
   Equal physical corner radius at the standard 350 x 510 card proportion. */
:root{--vg-card-corners:5% / 3.5%}
:is(img[src*="/assets/cards/"],img[src*="/card-back."],.detail-image,.collector-face>img,.builder-card-face>img,.card-open>img,.hero-card,.deck-entry-art,.shop-deck>img,.shop-deck-detail-grid img,.welcome-art img,.favorite-decks img,.foil-card>img,.foil-preview>img,.foil-choice>img,.sleeve-choice>img,.reveal-back,.result-card>img,.unit-art>img,.unit-slot>img,.hand-card>img,.choice>img,.damage-stack button>img,.pile>img,.soul-stack>img,#opponent-hand>img,.guard-draft button>img,.guard-reveals img,.guard-versus>img,.trigger-source>img,.mechanic-faces>img,.mechanic-card-ghost img,.action-notice>img,#zone-cards>button>img,.flying-card,.shuffle-packet,.deck-drag-ghost):not(.ride-fx):not(.call-fx){border-radius:var(--vg-card-corners)!important;clip-path:inset(0 round var(--vg-card-corners))}
/* Foil and the printed face use the same cut; labels stay outside the cut. */
:is(.foil-card,.foil-preview,.detail-art-face,.collector-face,.unit-art,.hand-card,.foil-finish){border-radius:var(--vg-card-corners)!important}
.foil-finish{clip-path:inset(0 round var(--vg-card-corners))}
/* Fit the actual card to fixed-height search rows. Clipping a wider letterbox
   would leave the bitmap's own corners square. Keep the existing row height. */
.fight-page .card-browser .card-strip>.choice img{width:auto!important;max-width:100%;flex:none}
#zone-cards>button>img{width:auto;max-width:100%;margin-inline:auto}

/* --- End: card-corners.css ---
 */

/* --- Begin: card-browser.css --- */
.fight-page.browsing-cards .setup-layer{inset:0 0 12px}
.fight-page .setup-panel.card-browser-panel{box-sizing:border-box;width:min(720px,calc(100% - 24px));max-width:720px;max-height:min(calc(100% - 24px),calc(100dvh - 90px));padding:16px;border-radius:18px;overflow:auto}
.card-browser-panel h2{font-size:17px;line-height:1.4}
.card-browser{min-width:0;max-width:100%}
.declare-card-tools{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start}
.declare-card-tools label{display:grid;gap:6px;font-size:13px}.declare-card-tools input{box-sizing:border-box;width:100%;padding:10px;border:1px solid #75caff80;border-radius:9px;background:#0d192b;color:#fff;font:inherit}
.declare-grade-filters{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}.declare-grade-filters button{padding:7px 12px;border-radius:8px}.declare-grade-filters button[aria-pressed=true]{background:#28486a;border-color:#9cecff}
.fight-page .card-browser .card-strip>[data-declared-card][hidden]{display:none!important}
.card-browser-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#bad7ef;font-size:12px}
.card-browser-tools button{width:40px;height:36px;padding:0;font-size:26px;flex:none;border-radius:9px}
.fight-page .card-browser .card-strip{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start;align-items:stretch;gap:10px;overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important;padding:5px 3px 10px;margin:8px 0;scroll-snap-type:x proximity;touch-action:pan-x;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#75caff #172739}
.fight-page .card-browser .card-strip>.choice{box-sizing:border-box;flex:0 0 116px;width:116px;max-width:none;min-width:0;scroll-snap-align:start;padding:7px;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:11px;border:1px solid #75caff70;background:#13263a;color:#e5f1ff}
.fight-page .card-browser .card-strip>.choice img{display:block;width:100%!important;height:145px!important;aspect-ratio:auto;object-fit:contain;border-radius:5px}
.fight-page .card-browser .card-strip>.choice span{font-size:11px;line-height:1.3;width:100%;white-space:normal;overflow-wrap:anywhere}
.fight-page .card-browser .card-strip>.choice:disabled{opacity:1;border-color:#66748680;background:#1b2633;color:#a9b7c8}
.fight-page .card-browser .card-strip>.choice:disabled img{opacity:.72;filter:saturate(.5)}
.fight-page .card-browser .card-strip>.choice[aria-pressed=true]{border-color:#9cecff;outline:2px solid #9cecff;box-shadow:0 0 12px #63ddff40}
.card-browser-panel [data-confirm-choice]{width:100%;min-height:44px;margin-top:8px;position:sticky!important;bottom:0;z-index:2;box-shadow:0 -8px 12px #12151ee6}
#zone-cards{display:flex;flex-wrap:nowrap;align-items:flex-start;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior:contain;scroll-snap-type:x proximity;scrollbar-width:thin;max-height:none}
#zone-cards>button{flex:0 0 120px;scroll-snap-align:start;overflow-wrap:anywhere}
#zone-cards>button img{height:174px;object-fit:contain}
@media(max-width:600px),(max-height:600px){.fight-page .setup-panel.card-browser-panel{padding:12px}.card-browser-panel h2{font-size:14px}.card-browser-tools{font-size:11px}.fight-page .card-browser .card-strip>.choice{flex-basis:96px;width:96px;padding:5px}.fight-page .card-browser .card-strip>.choice img{height:124px!important}.fight-page .card-browser .card-strip>.choice span{font-size:10px}}
@media(max-height:420px) and (orientation:landscape){.fight-page .setup-panel.card-browser-panel{padding:8px;max-height:min(calc(100% - 24px),calc(100dvh - 48px))}.card-browser-panel p{margin:4px 0;font-size:10px}.card-browser-panel h2{margin:0}.card-browser-panel .skill-preview{min-height:28px!important;padding:4px 8px!important;font-size:10px!important}.card-browser-tools button{height:40px;min-height:40px!important}.fight-page .card-browser .card-strip{margin:3px 0;padding-bottom:6px}.fight-page .card-browser .card-strip>.choice img{height:85px!important}.card-browser-panel [data-confirm-choice]{min-height:44px;margin-top:4px}}

/* --- End: card-browser.css ---
 */

/* --- Begin: mobile-ui.css --- */
/* Shared glass panels: transparency without full-screen blur layers. */
:root{--vg-glass:rgba(31,28,37,.76);--vg-glass-strong:rgba(31,28,37,.94);--vg-glass-line:rgba(216,195,210,.25)}
.starter-tile,.active-summary,.deck-entry,.play-entry{background:var(--vg-glass);border-color:var(--vg-glass-line)}
.starter-tile.chosen,.play-entry{border-color:#e7817280}
.topbar,.fight-header{background:rgba(20,21,28,.72)}
dialog{background:var(--vg-glass-strong)}
dialog::backdrop{background:#100e1b66;backdrop-filter:none}
.dialog-head,.card-actions{background:var(--vg-glass-strong)}
.setup-panel,.prompt-dock,.log-panel{background:var(--vg-glass);border-color:var(--vg-glass-line);backdrop-filter:none}
.editor-head{background:var(--vg-glass-strong)}
input,select{min-width:0;max-width:100%}
select option{background:#211d29;color:#f6edf3}
.dialog-head>span{min-width:0;overflow-wrap:anywhere}
.dialog-head .language{flex:none}
.printed-name,.card-caption,.deck-entry h2,.ability-block{overflow-wrap:anywhere}
#toast{max-width:calc(100vw - 24px);width:max-content;text-align:center;overflow-wrap:anywhere;bottom:calc(20px + env(safe-area-inset-bottom))}
.control-bar label{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.control-bar input[type=checkbox]{width:20px;height:20px}
.prompt-panel [data-confirm-choice],.prompt-dock [data-confirm-choice]{position:sticky;bottom:0;margin-top:10px;z-index:2}
@media(max-width:900px),(pointer:coarse){
  button:not(.unit-slot):not(.pile):not(.hand-card):not(.damage-card):not(.card-open):not(.notice-card):not(.check-preview),.back{min-height:44px}
  .back{min-width:44px;align-items:center;justify-content:center}
  .language button,.close,.notice-close{min-width:44px;min-height:44px}
  .active-summary>a,.dialog-head>a,.setup-panel>a,.control-bar>a{display:inline-flex;align-items:center;min-height:44px}
  .toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .toolbar #search,.toolbar #set-filter{grid-column:1/-1;width:100%}
  .toolbar input,.toolbar select{width:100%;min-height:44px;font-size:16px}
  input,select{font-size:16px} /* Avoid Safari's automatic input zoom. */
  .editor-head{position:static;padding:12px;border-radius:14px}
  .editor-line{gap:8px;min-width:0}
  .editor-line:first-child{display:grid;grid-template-columns:1fr 1fr}
  .editor-line #deck-name{grid-column:1/-1;grid-row:1;min-width:0;width:100%}
  .editor-line #first-vanguard{flex:1;min-width:0}
  .stats{gap:8px 14px}
  .counter button{min-width:44px;padding:3px 9px}
  .card-meta{flex-wrap:wrap;gap:4px}
  #card-detail:not(.compact-card) .detail-grid{display:block}
  #card-detail:not(.compact-card) .detail-image{display:none}
  #card-detail:not(.compact-card) .printed-info{padding:12px}
  #card-detail:not(.compact-card) .ability-block{font-size:13px}
  .dialog-head{gap:6px;padding:8px 10px}
  .dialog-head>span{font-size:9px;letter-spacing:.6px}
  .room-form{padding:16px;gap:10px}
  .starter-tile .hero-card{filter:drop-shadow(0 4px 5px #0006)}
  #card-detail.compact-card,.ability-notice,.intro-banner{backdrop-filter:none}
  #card-detail.compact-card{background:rgba(31,26,38,.9)}
  .ability-notice{background:rgba(37,32,45,.9)}
  .notice-close{top:2px;right:2px;padding:10px!important}
  .notice-stage{padding-right:36px}.notice-copy h3{margin-right:34px}
  .unit-slot img,.hand-card,.opponent-hand img,.guardian-stack img,.notice-card img{filter:none}
  .unit-slot.targetable,.pile.draw-ready{animation:none}
  .fight-board{box-shadow:0 6px 18px #0005}
  .choice{min-width:0;overflow-wrap:anywhere;font-size:12px}
  .prompt-dock h2{font-size:14px}.prompt-dock p{font-size:12px}
  .choice-field{display:block}
  #zone-cards{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;padding:14px}
  .setup-panel{max-height:calc(100% - 16px);overflow:auto;overscroll-behavior:contain}
  .prompt-dock{max-height:calc(100% - 44px);overflow:auto;overscroll-behavior:contain}
  .choice-grid{overscroll-behavior:contain}
  .log-panel{font-size:12px;overscroll-behavior:contain}
}
@media(max-width:600px){
  .topbar{gap:5px;padding-inline:max(8px,env(safe-area-inset-left))}
  .logo{width:74px}.edition{letter-spacing:1px;font-size:9px}
  .language{gap:2px}.language button{padding-inline:8px}
  .starter-grid{grid-template-columns:1fr}
  .starter-tile{padding:14px;gap:12px}.starter-tile .hero-card{width:82px;flex-basis:82px}
  .active-summary{gap:12px}
  .deck-list{grid-template-columns:minmax(0,1fr)}
  .deck-entry{padding:16px}
  .tabs{gap:0;padding-inline:12px}.tabs button{flex:1;padding-inline:4px;font-size:12px}
  .play-entry{flex-wrap:wrap}.play-entry button{width:100%}
  .fight-header button{padding-inline:6px}
  .fight-header #log-toggle .button-label,.fight-header #zoom .button-label{display:none}
  .control-bar .hint{flex:1 1 140px;min-width:0}
}
@media(max-width:900px) and (max-height:600px) and (orientation:landscape){
  .fight-header{height:48px;padding-block:2px;padding-right:max(8px,env(safe-area-inset-right))}
  .fight-table{height:calc(100dvh - 48px)}
  .fight-header #log-toggle .button-label,.fight-header #zoom .button-label{display:none}
  .control-bar{min-height:44px;max-width:100%;padding-inline:8px}
  .control-bar .hint{max-width:65vw;font-size:10px}
  .fight-board{width:min(calc((100dvh - 188px)*.982318),92vw)}
  .setup-layer{bottom:130px}
  .setup-panel{padding:12px;margin:8px;width:min(510px,calc(100% - 16px))}
  .setup-panel .coin-wrap{width:48px;height:48px}
  .coin-pair{margin:6px}
  .prompt-dock{top:28px;width:min(320px,40vw);max-width:none;max-height:calc(100% - 36px)}
  .choice-grid{max-height:110px!important}
  .setup-panel .choice-grid{max-height:110px!important}
  .ability-notices{top:58px}
}

/* --- End: mobile-ui.css ---
 */

/* --- Begin: mobile-v3.css --- */
/* V0.0.9 · Mobile V3 Beta. The board and G actions share one scroll surface. */
body.battle-v3{--battle-header:48px;--battle-hand:28px;--battle-controls:0px;--field-half-ratio:2000/1018;--field-table-ratio:.982318;--field-unit-width:11.8%;--field-pile-width:10.1%}
body.battle-v3 .fight-header{height:48px;min-height:48px;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:4px 6px;scrollbar-width:none}
body.battle-v3 .fight-header>img{width:54px;flex-shrink:0}body.battle-v3 .fight-header button{flex-shrink:0}body.battle-v3 #phases,body.battle-v3 #zoom{display:none}
body.battle-v3 .fight-table{height:calc(100dvh - 48px);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
body.battle-v3 #board-window{height:auto;min-height:0;flex:1;display:block;padding:90px 0 8px;overflow:auto;overscroll-behavior:contain;perspective:none;scrollbar-width:none;touch-action:pan-x pan-y}
body.battle-v3 #mobile-v3-stage{position:relative;width:max(128vw,calc((100dvh - 180px)*.982318));max-width:none;margin:0;flex:none;isolation:isolate}
body.battle-v3 #board{position:relative;width:100%!important;max-width:none!important;height:auto;display:block;aspect-ratio:auto;margin:0;transform:none;transform-style:flat;border-radius:4px;border:1px solid #ffffff25;overflow:hidden}
body.battle-v3 .board-half{height:auto;aspect-ratio:2000/1018}
body.battle-v3 .unit-slot,body.battle-v3 .soul-stack{width:11.8%}body.battle-v3 .pile{width:10.1%}
body.battle-v3 #control,body.battle-v3 .fight-table.guarding #control{position:absolute;left:58%;top:50%;right:auto;bottom:auto;transform:translateY(-50%);width:min(140px,32vw);max-width:none;min-height:0;height:auto;max-height:150px;overflow:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:4px;background:#0d1924bd;border:1px solid #ffffff24;border-radius:8px;z-index:9;touch-action:pan-y}
body.battle-v3 #control .hint{font-size:10px;line-height:1.4;text-align:left;max-height:3em;overflow:hidden}body.battle-v3 #control button{min-height:40px;padding:6px;font-size:11px;white-space:normal}
body.battle-v3 #control button.primary{background:#ff8b78;color:#211a24;border-color:#ffa99c}
body.battle-v3 #hand-dock,body.battle-v3 #hand-dock.hand-open{height:28px;min-height:28px;--hand-open-height:110px;flex:none;overflow:visible;z-index:12}
body.battle-v3 #hand-dock #hand-toggle{height:28px;min-height:28px;font-size:11px;padding:0 12px;inset:0;opacity:1;pointer-events:auto;background:#111c2ddd!important}
body.battle-v3 #hand-dock #hand-toggle::before{content:'⌃  มือการ์ด';position:absolute;left:12px;font-size:11px}
body.battle-v3 #hand-dock.hand-open #hand-toggle{top:-110px;height:24px;min-height:24px;background:#142638ed!important}
body.battle-v3 #hand-dock.hand-open #hand-toggle::before{content:'⌄  เก็บมือ'}
body.battle-v3 #hand-dock>#hand,body.battle-v3 #hand-dock>#hand.hand-row{height:110px;padding:5px 8px;background:#0a1522f2;transform:translateY(90px);transition:transform .18s;touch-action:pan-x;align-items:flex-end}
body.battle-v3 #hand-dock.hand-open>#hand{transform:none}
body.battle-v3 #hand .hand-card,body.battle-v3 #hand.hand-row .hand-card{width:62px;flex-basis:62px;bottom:0;touch-action:pan-x}
body.battle-v3 .battle-phase{left:8px;top:27px;min-width:70px;padding:3px 7px}body.battle-v3 .battle-phase>strong{font-size:18px}body.battle-v3 .battle-phase small{font-size:8px}
body.battle-v3 .battle-player{top:28px;bottom:auto;width:42vw;max-width:190px;padding:4px 6px}body.battle-v3 .player-own{left:6px}body.battle-v3 .player-opponent{right:6px}
body.battle-v3 .battle-phase{display:none}body.battle-v3 .battle-player>strong{font-size:11px}body.battle-v3 .battle-counts{font-size:8px;gap:5px}body.battle-v3 .battle-counts b{font-size:11px}
body.battle-match.battle-v3 #status{top:2px;font-size:9px;max-width:96%;pointer-events:none}body.battle-v3 #opponent-hand{top:66px;right:8px;max-width:28vw}body.battle-v3 #opponent-hand img{height:21px}
body.battle-v3 #setup{inset:0 0 28px;pointer-events:none}body.battle-v3 #setup .setup-panel,body.battle-v3 #setup .prompt-dock{pointer-events:auto}
/* Setup must fit above the persistent hand, including short landscape screens. */
body.battle-v3 #setup{bottom:136px}body.battle-v3 #setup .setup-panel{max-height:calc(100% - 16px);margin:8px;overflow:auto}
body.battle-v3 .mulligan-note{display:none}
body.battle-v3 #cfv-match-server{font-size:10px;min-height:18px}
@media(min-width:800px){body.battle-v3 #mobile-v3-stage{width:max(105vw,calc((100dvh - 180px)*.982318))}}
@media(orientation:landscape) and (max-height:600px){body.battle-v3 #board-window{padding-top:76px}body.battle-v3 #mobile-v3-stage{width:100vw}body.battle-v3 #hand-dock,body.battle-v3 #hand-dock.hand-open{--hand-open-height:92px}body.battle-v3 #hand-dock>#hand{height:92px;transform:translateY(72px)}body.battle-v3 #hand-dock.hand-open>#hand{transform:none}body.battle-v3 #hand-dock.hand-open #hand-toggle{top:-92px}}
@media(prefers-reduced-motion:reduce){body.battle-v3 #hand-dock>#hand{transition:none}}
body.fight-page.battle-v3{display:flex;flex-direction:column;height:100dvh}
body.battle-v3 .fight-header,body.battle-v3 #cfv-match-server{flex:none}
body.battle-v3 .fight-table{flex:1;min-height:0;height:auto!important}
body.battle-v3 .fx-card-edge{display:none}
body.battle-match.battle-v3 #status{top:2px!important;bottom:auto;max-width:96vw!important}
body.battle-v3 #hand-dock>#hand,body.battle-v3 #hand-dock>#hand.hand-row{transform:translateY(72px)}
body.battle-v3 #hand-dock.hand-open{height:110px;min-height:110px}
body.battle-v3 #hand-dock.hand-open>#hand{transform:none}
body.battle-v3 #hand-dock #hand-toggle{background:transparent!important}
body.battle-v3 #hand-dock #hand-toggle::before{background:#102239ed;padding:2px 6px;border-radius:5px}
body.battle-v3 #hand-dock.hand-open #hand-toggle{top:-24px}
@media(orientation:landscape) and (max-height:600px){body.battle-v3 #hand-dock.hand-open{height:92px;min-height:92px}body.battle-v3 #hand-dock>#hand,body.battle-v3 #hand-dock>#hand.hand-row{height:92px;transform:translateY(54px)}body.battle-v3 #hand-dock.hand-open>#hand{transform:none}body.battle-v3 #hand-dock.hand-open #hand-toggle{top:-24px}}
body.battle-match.battle-v3 .battle-player{top:26px;bottom:auto}
/* Persistent compact hand and always reachable zone controls. */
body.battle-v3 #hand-dock,body.battle-v3 #hand-dock.hand-open{height:136px;min-height:136px;--hand-open-height:100px}
body.battle-v3 #hand-dock #hand-toggle{display:none}
body.battle-v3 #hand-dock>#hand,body.battle-v3 #hand-dock>#hand.hand-row{height:100px;padding:3px 8px 5px;transform:none;pointer-events:auto}
body.battle-v3 #v3-hand-tools{position:absolute;top:0;left:0;width:100%;height:36px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 8px;background:#101d30;border-bottom:1px solid #476483;color:#a9bed7;font-size:10px}
body.battle-v3 #v3-hand-tools button{pointer-events:auto;min-height:32px;min-width:114px;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 8px;background:linear-gradient(#234361,#142a42);border:1px solid #75b9e8;border-bottom-width:3px;border-radius:0;color:#f0f9ff;font-size:11px;font-weight:800;letter-spacing:.025em}
body.battle-v3 #v3-hand-tools button:last-child{border-color:#e98a9b;background:linear-gradient(#543040,#331f30)}
body.battle-v3 #v3-hand-tools b{min-width:18px;color:#fff;font-size:13px}
/* Geometric action buttons beside G, with a strong frame and pressed state. */
body.battle-v3 #control{padding:5px;border-radius:0;background:#081625e8;border:1px solid #5c8db5;box-shadow:3px 3px 0 #030a12b3;max-height:180px}
body.battle-v3 #control button{min-height:46px;border:2px solid #7ed4ff;border-bottom:4px solid #296b9d;border-radius:0;background:linear-gradient(135deg,#235a83,#13334f);color:#f2fbff;font-size:12px;font-weight:800;line-height:1.4;letter-spacing:.02em;text-shadow:0 1px #06101f;box-shadow:inset 0 1px #ffffff38}
body.battle-v3 #control button.primary{border-color:#ffe5a6;border-bottom-color:#b98330;background:linear-gradient(135deg,#f6d584,#dfaa4d);color:#152238;text-shadow:none}
body.battle-v3 #control button:active,body.battle-v3 #v3-hand-tools button:active{filter:brightness(1.2);box-shadow:inset 0 2px 4px #0005}
body.battle-v3 #control button:focus-visible,body.battle-v3 #v3-hand-tools button:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.battle-v3 #control button:disabled{filter:saturate(.35);opacity:.6}
/* Fit the actual toolbar height after switching; keep controls and hand within the viewport. */
@media(max-width:600px){
 body.fight-page.battle-match{display:flex;flex-direction:column;height:100dvh}
 body.battle-match .fight-header,body.battle-match #cfv-match-server{flex:none}
 body.battle-match .fight-table{flex:1;min-height:0;height:auto!important}
}

/* --- End: mobile-v3.css ---
 */

/* --- Begin: lobby.css --- */
/* Beveled game controls; the surrounding illustration stays visible. */
.lobby-page{min-height:100dvh;background:#0d1220;color:#f2f4fc;isolation:isolate}
.lobby-page::before{content:'';position:fixed;inset:0;z-index:-2;background-image:url('/vanguard/assets/lobby/v-aichi.webp'),url('/vanguard/assets/lobby/v-kai.webp'),url('/vanguard/assets/lobby/v-ren.webp'),url('/vanguard/assets/lobby/v-space.webp');background-size:auto min(84dvh,839px),auto min(90dvh,974px),auto min(90dvh,1021px),cover;background-position:left 14% bottom,left 1% bottom,right 1% bottom,center;background-repeat:no-repeat;pointer-events:none}
.lobby-page::after{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 48%,#0d142bd9 0,#0b11264a 70%),linear-gradient(0deg,#090e20ed,transparent 85%);pointer-events:none}
.lobby-page:not([data-page=lobby])::after{background:linear-gradient(0deg,#0d1220e8,#101322ad)}
.lobby-page .topbar{background:#0c142866;border-bottom-color:#ffffff14;backdrop-filter:blur(8px)}
.lobby-page .topbar button{border-radius:4px;font-size:12px;background:#0e1736b0;border-color:#bed0f044}
.lobby-page .topbar .language button[aria-pressed=true]{background:#ef8272;color:#171a2b}
.lobby-page[data-page=lobby] .tabs{display:none}
.lobby-page[data-page=lobby] #content{display:grid;place-items:center;min-height:calc(100dvh - 70px);max-width:none;padding:28px 20px}
.game-hub{width:min(540px,100%);padding:0 12px;background:none;border:0;box-shadow:none}
.hub-title{display:flex;align-items:center;gap:14px;padding:0 4px 19px;border-bottom:1px solid #c0d2ef47;margin-bottom:19px}
.hub-title .eyebrow{font-size:10px;font-weight:600;letter-spacing:1.5px;color:#c1cee9}.hub-title h1{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:0;margin:5px 0 0;color:#fff;text-shadow:0 2px 5px #0008}
.hub-mark{font-size:48px;line-height:1;font-weight:700;color:#ff8d7b;font-style:italic;text-shadow:3px 2px #301529}
.hub-series{font-size:9px;letter-spacing:1.5px;color:#a6b6d3;margin-left:auto;border-left:2px solid #ee8a7855;padding-left:10px;white-space:nowrap}
.hub-group{margin-top:17px}.hub-group h2{font-size:11px;font-weight:600;letter-spacing:.5px;margin:0 4px 7px;color:#aabbd6;display:flex;align-items:center;gap:12px}.hub-group h2::after{content:'';height:1px;background:#c3d6ff26;flex:1}
.hub-grid,.hub-play{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hub-play{grid-template-columns:1.35fr 1fr}
.hub-button{--bevel:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-width:0;min-height:77px;width:100%;border:0;border-radius:0;background:none!important;padding:13px 16px;color:#f4f7ff;text-align:left;transition:transform .14s,color .14s;filter:drop-shadow(0 3px 2px #0004)}
.hub-button::before,.hub-button::after{content:'';position:absolute;clip-path:var(--bevel);pointer-events:none;z-index:-1;transition:background .14s}
.hub-button::before{inset:0;background:linear-gradient(120deg,#bbd0f575,#52698a55)}
.hub-button::after{inset:1px;background:linear-gradient(115deg,#233753f2,#141e36ee);border-left:3px solid #90a7cb55}
.hub-button:hover{transform:translateX(3px)}.hub-button:hover::before{background:#d2e5ff}.hub-button:hover::after{background:linear-gradient(115deg,#344d6bf5,#1d2b4bee)}.hub-button:active{transform:translateY(2px) scale(.98)}.hub-button:focus-visible,.deck-pick:focus-visible{outline:3px solid #ffb19f;outline-offset:4px}
.hub-button span{display:flex;flex-direction:column;gap:4px;min-width:0}.hub-button b{font-size:17px;line-height:1.35;font-weight:700}.hub-button small{font-size:10px;font-weight:400;color:#aebfd9;line-height:1.4}
.hub-icon{width:30px;height:38px;display:grid;place-items:center;flex:none;font-style:normal;color:#adc5e8}.hub-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.hub-icon img{height:40px;width:29px;object-fit:contain;transform:rotate(-9deg);filter:drop-shadow(2px 2px 1px #0006)}.hub-cards{position:relative}.hub-cards::before{content:'';position:absolute;width:23px;height:33px;background:#457196;border:1px solid #9fbcdf;transform:translate(-3px,-2px) rotate(-20deg);z-index:-1}
.hub-button>svg{width:12px;height:18px;margin-left:auto;opacity:.55;flex:none}
.hub-primary{color:#fff}.hub-primary::before{background:linear-gradient(110deg,#ffd8a1,#fb8373)}.hub-primary::after{border-left-color:#ffd2ae;background:linear-gradient(120deg,#c24e3bf5,#85273ff5)}.hub-primary b{font-size:20px}.hub-primary small,.hub-primary .hub-icon{color:#ffe2d3}.hub-primary:hover::after{background:linear-gradient(120deg,#df6247,#a63749)}
.hub-booster::after{border-left-color:#ffc39977}.hub-booster .hub-icon img{width:24px;height:43px}
.hub-active{margin-top:22px;display:flex;align-items:center;gap:12px;border-top:1px solid #d3e1ff26;padding:15px 4px 0}.hub-active>img{width:41px;height:58px;object-fit:contain;transform:rotate(-6deg);filter:drop-shadow(0 3px 3px #0006)}.hub-active>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.hub-active small{font-size:10px;color:#acbdd9}.hub-active b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-active span{font-size:11px;color:#b2bdd2}.hub-active button{font-size:12px;min-height:44px;padding:8px 13px;border-radius:3px;background:#182840a8;border-color:#96b3d450;flex:none}
#deck-picker{width:min(640px,calc(100vw - 24px))}.deck-picker-grid{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.deck-pick{display:flex;align-items:center;gap:12px;text-align:left;background:#ffffff0c;border:1px solid #ffffff20;border-radius:10px;padding:12px;min-width:0}.deck-pick img{height:85px;width:58px;object-fit:contain;flex:none}.deck-pick span{display:flex;flex-direction:column;gap:6px;min-width:0}.deck-pick b{font-size:13px;overflow-wrap:anywhere}.deck-pick small{font-size:10px;color:#c2c7d3}.deck-pick.selected{border-color:#ffb19f;background:#ec968317}
.lobby-page[data-page=shop] #content{max-width:1000px}.lobby-page[data-page=shop] .pack-page{background:#111b3266;backdrop-filter:blur(10px);border-radius:12px;padding:25px 20px}
.pack-actions{flex-wrap:wrap}.pack-actions button{border-radius:4px;font-weight:600;background:#243b58;border-color:#6b88ab;padding:10px 24px}.pack-actions .primary{background:#c95043;border-color:#ffad87;color:#fff}.pack-actions #open-ten-packs{position:relative;min-width:185px}.pack-actions button small{display:block;font-size:10px;font-weight:400;opacity:.85}.pack-progress{display:flex;align-items:center;justify-content:center;gap:10px;color:#c6d5ee;font-size:12px;margin:0 0 15px}.pack-progress strong{color:#ffbaa6}.pack-progress progress{width:110px;height:4px;accent-color:#ffad87}.pack-batch-badge{position:absolute;bottom:12%;right:-14px;padding:6px 14px;font-weight:700;font-size:20px;background:#bf4f40;color:#fff;transform:rotate(-7deg);box-shadow:0 2px 6px #0005}.pack-results{width:100%}.pack-results h2{margin-bottom:4px}.pack-results>p{font-size:12px;color:#adbedb;margin-bottom:24px}.pack-results .result-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 10px}.pack-results .result-card{position:relative;font-size:10px}.pack-results .result-card>span{line-height:1.35}.result-card .rarity-label{position:absolute;top:2px;right:2px;padding:2px 6px;font-size:9px;background:#152744e8;border-radius:2px;color:#c7d8ef}.result-card.rarity-RRR .rarity-label,.result-card.rarity-VR .rarity-label{background:#985631e8;color:#fff0cd}
@media(max-width:600px){.lobby-page::before{background-size:auto 83dvh,auto 90dvh,auto 90dvh,cover;background-position:left 4% bottom 80px,left -110px bottom,right -145px bottom,center}.lobby-page[data-page=lobby] #content{min-height:calc(100dvh - 54px);padding:28px 10px}.game-hub{padding:0 3px;max-width:440px}.hub-title{gap:10px;padding-bottom:16px;margin-bottom:18px}.hub-title h1{font-size:27px}.hub-mark{font-size:43px}.hub-title .eyebrow{font-size:9px;letter-spacing:1px}.hub-series{font-size:8px;letter-spacing:.5px}.hub-button{min-height:76px;padding:12px 11px;gap:9px}.hub-button b{font-size:15px}.hub-primary b{font-size:18px}.hub-button small{font-size:10px}.hub-button>svg{display:none}.hub-icon{width:26px}.hub-icon svg{width:25px;height:25px}.hub-play{grid-template-columns:1.2fr 1fr}.hub-group{margin-top:18px}.hub-active{gap:10px}.hub-active b{font-size:12px}.hub-active span{font-size:10px}.deck-picker-grid{padding:15px;grid-template-columns:1fr}.lobby-page[data-page=shop] .pack-page{padding:22px 8px;border-radius:10px}.pack-page h1{font-size:27px}.pack-actions{gap:8px}.pack-actions button{min-width:110px;padding:10px 16px}.pack-actions #open-ten-packs{min-width:155px}.pack-results .result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.pack-results h2{font-size:22px}}
@media(max-width:350px){.hub-title h1{font-size:23px}.hub-series{display:none}.hub-button b{font-size:14px}.hub-primary b{font-size:16px}.hub-button small{font-size:9px}.hub-active button{padding:8px}.hub-active b{font-size:11px}}
@media(max-height:550px) and (orientation:landscape){.lobby-page[data-page=lobby] #content{padding:15px 20px;min-height:calc(100dvh - 54px)}.game-hub{width:min(850px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0}.hub-title{grid-column:1/-1;margin:0;padding:0 4px 10px;gap:10px}.hub-title h1{font-size:23px;margin-top:3px}.hub-mark{font-size:37px}.hub-series{font-size:9px}.hub-group{margin-top:0}.hub-grid,.hub-play{grid-template-columns:1fr;gap:7px}.hub-button{min-height:55px;padding:9px 12px}.hub-button b,.hub-primary b{font-size:15px}.hub-button small{font-size:9px}.hub-button>svg{display:none}.hub-icon,.hub-icon img{height:31px}.hub-active{grid-column:1/-1;margin:0;padding-top:10px}.hub-active>img{height:44px;width:30px}.pack-results .result-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.hub-button,.hub-button::before,.hub-button::after{transition:none}.hub-button:hover,.hub-button:active{transform:none}}
.hub-watch{grid-column:1/-1;min-height:58px}.hub-watch::after{background:linear-gradient(115deg,#254557c4,#142237bb);border-left-color:#92dcc1}
.watch-page{max-width:900px;margin:20px auto;padding:20px;background:#14203370;border:1px solid #ffffff25;border-radius:12px;backdrop-filter:blur(8px)}
.watch-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.watch-heading h1{margin:5px 0;font-size:28px}.watch-heading button{min-height:44px}.watch-note,#watch-status{font-size:13px;color:#d6e1ef}.watch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.watch-match{padding:18px;background:#e3efff09;border:1px solid #ffffff30;border-radius:8px}.watch-match-meta{display:flex;align-items:center;gap:10px;font-size:10px;color:#b8c9e0;flex-wrap:wrap}.live-badge{color:#a6f1cf;letter-spacing:1px;font-weight:700}.live-badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px}
.watch-mode{padding:4px 8px;border:1px solid currentColor;border-radius:6px;font-size:12px;font-weight:700}.watch-mode.ranked{color:#edcf83;background:#edcf8310}.watch-mode.training{color:#d0acff;background:#d0acff10}.watch-mode.casual{color:#83caff;background:#83caff10}
.daily-login-reward{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:14px 18px;border:1px solid #e6c47777;border-radius:12px;background:linear-gradient(110deg,#e6c47718,#5898ff0d)}.daily-login-reward b{color:#ffe1a0}.daily-login-reward small{display:block;margin-top:4px;color:#b8c9e0;font-size:12px}.daily-login-reward>span{color:#ffe1a0;font-weight:700;white-space:nowrap}
.watch-versus{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:20px 0}.watch-player{min-width:0;display:flex;flex-direction:column;gap:5px}.watch-player strong{font-size:17px;overflow-wrap:anywhere}.watch-player small{font-size:11px;color:#c6d2e6;line-height:1.6}.watch-vs{color:#ffb8a7;font-size:12px;font-style:italic;font-weight:700}
.watch-enter{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;background:#b5dcff13;border:1px solid #ffffff30;border-radius:4px;color:#fff;text-decoration:none;font-size:14px}.watch-enter svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.watch-enter svg:last-child{margin-left:auto;width:12px}.watch-enter:hover{background:#b5dcff28}.watch-enter:focus-visible{outline:2px solid #ffb19f;outline-offset:3px}
@media(max-width:600px){.watch-page{margin:10px auto;padding:16px 12px}.watch-list{grid-template-columns:1fr;gap:12px}.watch-heading h1{font-size:25px}.watch-player strong{font-size:16px}.watch-note{line-height:1.7}}

.ranked-lineup{display:grid;gap:12px;width:min(100%,530px);margin:18px auto;text-align:left}.ranked-lineup label{display:grid;gap:5px;font-size:12px;color:#a4e9f1}.ranked-lineup select{width:100%;margin:0}.ranked-lineup p,.ranked-lineup>small{font-size:12px;text-align:center}
.watch-search-label{display:block;margin:18px 0 8px;color:#c6d2e6;font-size:14px}.watch-page #watch-search{box-sizing:border-box;width:100%;min-height:46px}.watch-pages{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:20px}.watch-pages button{min-height:44px}.room-form .room-watch-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border:1px solid #ffffff30;border-radius:8px}.room-form .room-watch-toggle[hidden]{display:none}.room-watch-toggle small{display:block;color:#b8c9e0;font-size:12px;margin-top:5px}.room-watch-toggle input{width:22px;height:22px;flex:0 0 22px;accent-color:#ff8d7c}

.room-watch-toggle input[role="switch"]{appearance:none;-webkit-appearance:none;position:relative;width:44px;height:26px;flex-basis:44px;min-height:26px;padding:0;border:1px solid #748099;border-radius:20px;background:#344058;cursor:pointer}.room-watch-toggle input[role="switch"]::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:transform .15s}.room-watch-toggle input[role="switch"]:checked{background:#c9584a;border-color:#ffb19f}.room-watch-toggle input[role="switch"]:checked::before{transform:translateX(18px)}.room-watch-toggle input[role="switch"]:focus-visible{outline:2px solid #ffb19f;outline-offset:3px}

html:not(:has(.banpick-page)):not(:has(.fight-page)){height:auto!important;min-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important}
body.lobby-page{height:auto!important;min-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;display:block!important}


/* --- End: lobby.css ---
 */

/* --- Begin: collection.css --- */
@font-face{font-family:'Chakra Petch';src:url('/vanguard/assets/fonts/ChakraPetch-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('/vanguard/assets/fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('/vanguard/assets/fonts/ChakraPetch-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
body{font-family:'Chakra Petch','Segoe UI',sans-serif}
/* A single light glass surface per overlay. No nested panel frames. */
:root{--vg-glass:rgba(28,27,39,.56);--vg-glass-strong:rgba(28,27,39,.64)}
dialog,.setup-panel,.prompt-dock,.prompt-peek,.ability-notice,.check-display,.log-panel{background:var(--vg-glass-strong)!important;border:1px solid #ffffff24!important;backdrop-filter:blur(12px);box-shadow:0 12px 36px #0004}
dialog::backdrop{background:#10101c45;backdrop-filter:none}
.dialog-head,.card-actions,.printed-info,.ability-frame,.printed-name{background:transparent!important;box-shadow:none!important;border:0!important}
.dialog-head{border-bottom:1px solid #ffffff18!important}
.audio-settings{display:grid;gap:17px;padding:24px}.audio-settings label{display:flex;justify-content:space-between;align-items:center;font-size:14px}.audio-settings output{font-variant-numeric:tabular-nums;color:#f4b2a3}.audio-settings input[type=range]{width:100%;min-height:44px;accent-color:#e78172;cursor:pointer}.audio-settings small{font-size:11px;color:#c8c4d3;line-height:1.6}#audio-dialog{width:min(410px,calc(100vw - 24px))}#audio-dialog .dialog-head h2{font-size:17px;margin:0}#sound.audio-muted{opacity:.5}.room-unavailable a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:22px;padding:10px 22px;text-decoration:none;background:#e78172;color:#231c25}
.printed-name{padding-inline:0!important}.ability-frame{padding-inline:0!important}
.printed-info{color:#f2f4fc!important;background:#1018279e!important;border:1px solid #ffffff38!important;box-shadow:none!important;padding:16px;border-radius:10px}
.printed-info .eyebrow,.printed-info .printed-type,.printed-info .detail-note,.printed-info .symbol-legend{color:#c5ccdc}
.printed-info .printed-name{color:#fff;font-weight:700;padding:8px 0!important}
.printed-info .detail-stats{background:#ffffff08;border:0;border-bottom:1px solid #ffffff29;border-radius:0;padding:10px 0 14px;color:#f4f6ff}
.printed-info .ability-frame{border:1px solid #ffffff38!important;border-radius:7px;background:#10152238!important;box-shadow:none!important;color:#f2f4fc}
.printed-info .ability-frame h3{color:#e7edfa!important;background:#ffffff12!important;border-bottom:1px solid #ffffff29;font-weight:600}
.printed-info .ability-block{color:#f2f4fc!important;border-bottom-color:#ffffff29}
.result-card img{height:auto}
.unit-slot[data-drag-field]{cursor:grab}.unit-slot[data-drag-field]::after{position:absolute;top:-16%;left:50%;transform:translateX(-50%);padding:1px 5px;border:1px solid #d6e8ff77;border-radius:3px;background:#172f47e8;color:#fff;font-size:clamp(7px,.8vw,10px);font-weight:600;white-space:nowrap;pointer-events:none}
.unit-slot[data-drag-field=attack]::after{content:'ตี'}.unit-slot[data-drag-field=boost]::after{content:'บูสต์'}.unit-slot[data-drag-field=intercept]::after{content:'Intercept → G'}
.attack-preview{font-size:14px;color:#ffbc9e}.attack-preview small{font-size:9px;color:#c5ccdc;font-weight:400}
.hand-card.guard-staged{opacity:.45}.guard-controls{height:auto!important;min-height:0!important;width:min(540px,calc(100vw - 16px));padding:5px 0!important;flex:none}
.guarding .board-window{flex:1;min-height:0;height:auto!important}.guard-preview{width:100%;border:1px solid #ffffff38;border-radius:9px;background:#101a2bd9;padding:8px 10px;color:#f1f5ff;box-shadow:0 4px 14px #0004}
.guard-versus{display:flex;align-items:center;justify-content:center;gap:10px}.guard-versus>img{width:29px;height:41px;object-fit:contain;border-radius:3px}.guard-versus div{display:flex;flex-direction:column;text-align:center;min-width:0}.guard-versus small{font-size:9px;color:#c6d0e4}.guard-versus b{font-size:23px;line-height:1.1;font-variant-numeric:tabular-nums}.guard-versus>span{font-size:12px;font-weight:700;color:#f49c88}.guard-preview.enough .guard-versus div:last-of-type b{color:#b1d3f0}.guard-preview.short .guard-versus div:last-of-type b{color:#ffb09f}
.guard-draft{display:flex;align-items:center;gap:7px;min-height:52px;margin:7px 0 5px;padding:4px 7px;background:#ffffff06;border:1px dashed #a5c6ed7a;border-radius:6px;flex-wrap:wrap}.guard-draft>b{font-size:22px;font-style:italic;color:#bcd6f5}.guard-draft>span{font-size:10px;color:#cad6ec}.guard-draft>strong{font-size:11px;margin-left:auto;max-width:180px;font-weight:600}.guard-draft button{position:relative;width:29px;height:41px;min-height:0!important;padding:0!important;background:none!important;border:0;border-radius:3px;touch-action:none;flex:none}.guard-draft button img{height:100%;width:100%;object-fit:contain;pointer-events:none}.guard-draft button span{position:absolute;bottom:0;left:0;right:0;font-size:8px;text-align:center;color:#fff;background:#142035e0;pointer-events:none}
.guard-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}.guard-actions small{margin-right:auto;font-size:9px;color:#c3cee2;max-width:180px}.guard-actions button{font-size:11px;min-height:36px!important;padding:6px 12px!important;border-radius:5px}.guard-actions .primary{background:#dc7868;border-color:#ffc0a3;color:#171d2b}
@media(max-width:600px){.guard-preview{padding:7px}.guard-versus{gap:8px}.guard-versus b{font-size:21px}.guard-draft>strong{font-size:10px;max-width:155px}.guard-actions small{font-size:8px;max-width:120px}.guard-actions button{padding:6px 10px!important;min-height:40px!important}}
@media(max-height:550px) and (orientation:landscape){.guarding .guard-controls{position:absolute;right:10px;top:42px;width:min(370px,44vw);max-width:none}.guarding .fight-board{margin-left:8px;width:min(calc(100dvh - 100px),50vw)}.guarding .board-window{width:100%;height:calc(100% - 100px)!important;flex:none;justify-content:flex-start}.guard-versus b{font-size:20px}.guard-draft>strong{max-width:145px}.guard-actions small{font-size:8px;max-width:120px}}
.tabs{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.tabs button{flex-shrink:0}
#account-button{font-size:12px;padding:8px 12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-form{display:flex;flex-direction:column;gap:14px;padding:24px}.account-form label{display:flex;flex-direction:column;gap:5px}.account-form p{margin:0;font-size:12px}.account-form .actions{display:flex}.account-form .actions button{flex:1}
.owned-note{font-size:11px;color:#c4bdd1;display:block;margin-top:3px}.owned-note.missing{opacity:.5}
.zone-switch{grid-column:1/-1!important;min-height:40px}
.card-cell.unowned img{opacity:.45;filter:grayscale(.7)}
.pack-page{text-align:center;max-width:800px;margin:auto}.pack-stage{min-height:380px;display:grid;place-items:center;perspective:1200px;padding:25px 0}
.sealed-pack{position:relative;display:block;border:0;background:none!important;padding:0;width:230px;aspect-ratio:260/430;touch-action:none;cursor:grab;filter:drop-shadow(0 14px 14px #0007);animation:pack-idle 5s ease-in-out infinite;overflow:visible}
.sealed-pack{aspect-ratio:460/894;overflow:hidden;border-radius:2px}.sealed-pack>img{width:100%;height:100%;object-fit:cover}.pack-tip{position:absolute;top:9%;left:3%;right:3%;padding:7px;color:white;background:#111b;border-radius:10px;font-size:11px;display:flex;gap:8px;justify-content:center;align-items:center}
.tear-cap{position:absolute;top:0;left:0;right:0;height:8%;background:linear-gradient(100deg,#ffffff00,#fff8,#ffffff00);border-bottom:2px dashed #ffffff8c;transform:translateX(var(--tear,0));transform-origin:100% 100%}
.sealed-pack.torn{animation:pack-open .65s forwards}.sealed-pack.torn .tear-cap{animation:tear-away .65s forwards}
.pack-actions{display:flex;justify-content:center;gap:10px;min-height:48px}.pack-actions button{min-height:46px;min-width:120px}.pack-rates{font-size:12px;color:#c5bdcd;margin:24px auto;max-width:520px}.pack-rates summary{cursor:pointer;min-height:44px;display:grid;place-items:center}.pack-rates p{line-height:1.8}
.pack-preview-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:12px;font-size:12px}.pack-preview-button svg{width:19px;height:19px}
#pack-catalog[open]{display:flex;flex-direction:column;width:min(900px,calc(100vw - 24px));height:min(800px,calc(100dvh - 24px));overflow:hidden}#pack-catalog .dialog-head{flex:none}#pack-catalog .close{min-width:44px;min-height:44px}#pack-catalog-note{font-size:12px;color:#c5ccdc;margin:0;padding:12px 18px 6px}.pack-catalog-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px 18px 14px;border-bottom:1px solid #ffffff24;flex:none}.pack-catalog-toolbar button{font-size:11px;min-height:44px;padding:7px 12px;border-radius:6px}.pack-catalog-toolbar button[aria-pressed=true]{color:#fff;border-color:#ffb6a0;background:#e8877124}.pack-catalog-list{overflow:auto;overscroll-behavior:contain;min-height:0;padding:18px}.pack-card-clan+.pack-card-clan{margin-top:28px}.pack-card-clan h2{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:17px;border-bottom:1px solid #ffffff24;padding-bottom:9px;margin-bottom:14px}.pack-card-clan h2 small{font-size:11px;font-weight:400;color:#c5ccdc}.pack-catalog-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 12px}.pack-catalog-grid .result-card{min-width:0;font-size:11px;overflow-wrap:anywhere}.pack-catalog-grid .result-card small{font-size:9px}.pack-catalog-grid img{height:auto;border-radius:5px}
@media(max-width:600px){#pack-catalog-note{font-size:10px;padding:10px 12px 4px}.pack-catalog-toolbar{padding:6px 12px 10px;gap:5px}.pack-catalog-toolbar button{font-size:10px;padding:6px 9px}.pack-catalog-list{padding:12px}.pack-catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.pack-card-clan h2{font-size:15px}.pack-catalog-grid .result-card{font-size:10px}}
.reveal-card{position:relative;width:210px;aspect-ratio:350/510;border:0;padding:0;background:none!important;perspective:1000px;transform-style:preserve-3d}.reveal-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.65,.2,1)}.reveal-card.flipped .reveal-inner{transform:rotateY(180deg)}.reveal-back,.reveal-front{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;border-radius:9px}.reveal-front{transform:rotateY(180deg)}.reveal-back{object-fit:contain}.reveal-stack p{font-size:13px;margin:15px 0 0;max-width:320px}
.foil-card{display:block;position:relative;isolation:isolate;border-radius:7px;overflow:hidden}.foil-card img{width:100%;height:100%;object-fit:contain;display:block}.foil-shine{pointer-events:none;position:absolute;inset:0;opacity:0;background:linear-gradient(115deg,transparent 15%,#b9d9ff22 30%,#f9bfff66 38%,#ffe1a9aa 42%,#c7fff266 46%,transparent 60%);background-size:280% 100%;mix-blend-mode:screen}.foil-active .foil-shine{opacity:.55;animation:foil-sweep 5s ease-in-out infinite}
.rarity-VR.flipped{filter:drop-shadow(0 0 16px #b8c5ff66)}.rarity-RRR.flipped{filter:drop-shadow(0 0 12px #ffe5b466)}
.rarity-LIR.flipped{filter:drop-shadow(0 0 18px #ffd5b88a)}.rarity-LIR .rarity-label{background:#ffe3b5;color:#38291d}
.result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.result-card{padding:0;border:0;background:none!important;display:flex;flex-direction:column;text-align:left;font-size:12px;gap:5px}.result-card img{width:100%;aspect-ratio:350/510;object-fit:contain}.result-card small{color:#c5bdcd}
.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.field-choice{padding:0;background:none!important;border:0;text-align:left;position:relative}.field-choice img{width:100%;display:block;border-radius:12px;aspect-ratio:2/1;object-fit:cover}.field-choice span{display:block;font-size:12px;padding:7px 2px}.field-choice.selected img,.art-choice.selected .foil-card{outline:3px solid var(--ui-accent);outline-offset:3px}.foil-settings{margin-top:35px}.foil-settings label{display:flex;align-items:center;gap:10px;min-height:44px}.foil-settings input{width:22px;height:22px}.art-grid{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px}.art-choice{width:140px;border:0;background:none!important;padding:0;text-align:left;font-size:11px}.art-choice .foil-card{aspect-ratio:350/510}.art-choice>span:last-child{display:block;padding-top:8px;overflow-wrap:anywhere}
.sleeve-settings{margin:24px 0 36px}.sleeve-settings>p{font-size:12px}.sleeve-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 16px}.sleeve-choice{position:relative;min-width:0;border:0;background:none!important;padding:0;text-align:left;font-size:12px}.sleeve-choice img{display:block;width:100%;height:auto;aspect-ratio:350/510;object-fit:contain;border-radius:7px}.sleeve-choice>span{display:block;padding-top:9px;overflow-wrap:anywhere}.sleeve-choice.selected img{outline:3px solid var(--ui-accent);outline-offset:3px}.sleeve-active{position:absolute;top:7px;right:7px;padding:3px 8px;font-size:10px;color:#1c202a;background:#f1a78d;border-radius:4px}
.announcer-setting{display:flex;align-items:center;gap:12px;margin:12px 0 20px}.announcer-setting select{min-height:42px;padding:8px 36px 8px 12px;border:1px solid #496780;border-radius:9px;background:#111c2b;color:#eef7ff}
@media(max-width:600px){.sleeve-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}.sleeve-choice{font-size:10px}.sleeve-active{font-size:9px;top:5px;right:5px;padding:2px 6px}}
.board-half.custom-field{background-image:var(--selected-field)!important}.custom-field .unit-slot.empty{border:1px dashed #fff5;border-radius:50%;background:#17142333!important}.unit-slot.foil-active::before,.hand-card.foil-active::before{content:'';pointer-events:none;position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(115deg,transparent 20%,#fff5 45%,#b0dcff66 50%,transparent 65%);background-size:280% 100%;mix-blend-mode:screen;animation:foil-sweep 5s ease-in-out infinite}.gift-badge{white-space:nowrap}
.board-half.has-accel{background-size:100% 100%;background-repeat:no-repeat}.has-accel .nameplate{top:60.5%}.unit-slot.accel-slot{width:var(--accel-width,8%)}.accel-slot .unit-stat{bottom:0}.accel-slot .gift-badge{left:50%;top:1%;transform:translateX(-50%)}.opponent .accel-slot .gift-badge{transform:translateX(-50%) rotate(180deg)}.unit-slot.accel-slot.empty{border:1px dashed #dca5ff99;border-radius:50%;background:#b998cf18!important}.gift-badge{border-radius:6px;font-size:clamp(6px,.7vw,9px);padding:1px 3px}#zone-cards button[aria-pressed=true]{outline:3px solid var(--ui-accent);border-radius:6px}#confirm-group-guard{grid-column:1/-1;min-height:44px}
.trigger-source{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0}.trigger-source>img{width:38px;height:55px;object-fit:contain;flex:none}.trigger-source h2{margin:0}.prompt-dock .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:35dvh}.prompt-dock .choice{min-width:0;width:100%;padding:5px;align-self:start}.prompt-dock .choice span{font-size:10px;overflow-wrap:anywhere}.prompt-dock .choice img{width:60px;height:86px}.unit-slot.rest.foil-active::before{transform:rotate(90deg)}
@media(max-width:900px){.choosing-trigger .check-display{display:none!important}.prompt-dock .choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:30dvh}.trigger-source h2{font-size:13px}.prompt-dock .choice{padding:4px}.prompt-dock .choice img{width:58px;height:83px}}
@media(max-height:550px) and (orientation:landscape){.prompt-dock{max-height:calc(100dvh - 90px);width:min(310px,38vw);max-width:none;top:24px}.prompt-dock .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:35dvh}.trigger-source{margin:4px 0}.trigger-source>img{width:25px;height:36px}.prompt-dock .choice img{width:40px;height:57px}.trigger-source h2{font-size:10px}.prompt-dock p{margin:6px 0}}
@keyframes pack-idle{50%{transform:translateY(-7px) rotate(1deg)}}@keyframes pack-open{50%{transform:scale(1.05) rotate(-4deg);opacity:1}100%{transform:translateY(40px) scale(.92);opacity:0}}@keyframes tear-away{to{transform:translateX(190px) rotate(35deg);opacity:0}}@keyframes foil-sweep{0%,100%{background-position:100% 50%}50%{background-position:0 50%}}
@media(max-width:600px){.topbar{gap:5px}.edition{display:none}.tabs{padding-inline:6px;gap:2px}.tabs button{flex:0 0 auto;padding:8px;font-size:11px!important}.pack-stage{min-height:330px;padding:18px 0}.sealed-pack{width:185px}.reveal-card{width:180px}.result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.art-grid{gap:15px}.art-choice{width:100px}.account-form{padding:18px}.starter-grid{gap:12px}}
@media(max-height:550px) and (orientation:landscape){.pack-stage{min-height:240px}.sealed-pack{width:145px}.reveal-card{width:130px}.result-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.foil-shine,.sealed-pack,.unit-slot::before,.hand-card::before{animation:none!important}.reveal-inner{transition:none}.sealed-pack.torn{opacity:0}}

.v2-field-grid .field-choice img{aspect-ratio:32/9;object-fit:contain;border-radius:5px}

.auth-captcha{display:grid;gap:7px;width:100%;min-width:0;margin:14px 0}.auth-captcha small{color:#aac5dc;font-size:12px;line-height:1.5}#auth-captcha-widget{width:100%;min-width:0}#account-dialog{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}#account-form button:disabled{opacity:.55;cursor:wait}
#redeem-dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;border:1px solid #7ab8ed80;border-radius:16px;background:linear-gradient(145deg,#182942,#0f182b);box-shadow:0 20px 70px #0009,0 0 28px #57b3ff20}#redeem-status{min-height:1.5em;line-height:1.7;color:#b6e1ff;overflow-wrap:anywhere}#redeem-form input{font-size:16px;min-width:0;width:100%;box-sizing:border-box}#redeem-form button{min-height:44px}#redeem-form button:disabled{opacity:.55;cursor:wait}
.sleeve-upload-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 24px}.sleeve-upload-tools button{min-height:44px;border:1px solid #71c9ff80;border-radius:10px;background:linear-gradient(135deg,#224165,#142439);color:#d4eeff;padding:10px 18px}.sleeve-upload-tools small{color:#aebfd4}.sleeve-upload-dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:20px;border:1px solid #71c9ff80;border-radius:18px;background:linear-gradient(145deg,#182942,#0e1726);color:#edf4ff;box-shadow:0 24px 80px #000a}.sleeve-upload-dialog::backdrop{background:#050a14c9}.sleeve-upload-dialog h2{margin:0;font-size:22px}.sleeve-upload-dialog p{font-size:13px;color:#b6c7dd}.sleeve-upload-dialog canvas{display:block;width:145px;max-width:100%;height:auto;margin:14px auto;border-radius:9px;box-shadow:0 12px 30px #0009,0 0 0 1px #71c9ff60}.sleeve-upload-dialog label{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:12px;margin:8px 0;font-size:14px}.sleeve-upload-dialog input{width:100%;min-width:0;accent-color:#71c9ff;min-height:32px}.sleeve-upload-actions{display:flex;justify-content:flex-end;gap:10px}.sleeve-upload-dialog button{min-height:44px;padding:8px 14px;border-radius:9px}.sleeve-upload-actions [data-sleeve-save]{background:linear-gradient(135deg,#2764a1,#204166);border:1px solid #71c9ff;color:#e8f5ff}.sleeve-upload-dialog [data-sleeve-status]{min-height:1.5em;color:#a8dfff}.sleeve-upload-dialog button:disabled{opacity:.55;cursor:wait}@media(max-height:600px){.sleeve-upload-dialog canvas{width:95px;margin:8px auto}.sleeve-upload-dialog{padding:14px}.sleeve-upload-dialog label{margin:2px 0}}

.product-total{display:block;font-size:11px;line-height:1.6;color:#93c9e5;margin:5px 0;overflow-wrap:anywhere}.shop-pack-grid>button{position:relative}.shop-pack-grid .pack-new{position:absolute;top:12px;right:12px;z-index:1;padding:4px 11px;border:1px solid #a9ffe0;border-radius:9px;background:linear-gradient(130deg,#176d58,#123b49);color:#d0fff0;font-size:12px;font-weight:800;letter-spacing:1px;box-shadow:0 0 14px #70ffc56b;text-shadow:0 0 8px #70ffc5;animation:pack-new-glow 2.2s ease-in-out infinite;pointer-events:none}.shop-pack-grid .product-total{font-size:12px;margin:2px 0 8px}@keyframes pack-new-glow{50%{box-shadow:0 0 22px #70ffc5aa,0 0 6px #baffea80;text-shadow:0 0 12px #baffea}}@media(prefers-reduced-motion:reduce){.shop-pack-grid .pack-new{animation:none}}
/* Shop clan filter (2026-10-16). */
.shop-clan-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 4px;padding:10px 12px;border:1px solid #2d5b86;border-radius:10px;background:#0c1d33}.shop-clan-filter label{font-weight:600}.shop-clan-filter select{min-width:200px}.shop-clan-filter span{color:#9fbad5;font-size:13px}.shop-empty{color:#9fbad5;padding:16px 0}

/* --- End: collection.css ---
 */

/* --- Begin: deck-builder.css --- */
body[data-page=editor] #content{max-width:1440px;padding:14px 24px}
.lobby-page[data-page=editor]::after{background:linear-gradient(0deg,#09101ceb,#09101cd9)}
.builder-header{display:grid;gap:8px;margin-bottom:10px}.builder-header .editor-line{display:flex;flex-wrap:nowrap;gap:8px}.builder-header #deck-name{min-width:0;width:100%;font-size:18px;background:#17213866;border-radius:5px}.builder-header button{border-radius:5px;white-space:nowrap}.builder-header .stats{gap:14px;margin:0;font-size:11px}.builder-header .errors,.builder-header .valid{margin:0;font-size:11px}.builder-header details{font-size:11px;color:#c9d4e8}.builder-header summary{cursor:pointer;min-height:26px}.builder-header .first-picker{display:flex;gap:8px;align-items:center}.first-picker select{min-width:0;max-width:100%;font-size:12px}
.deck-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;height:calc(100dvh - 265px);min-height:400px}
.deck-pane,.inventory-pane{min-width:0;display:flex;flex-direction:column;background:#14203935;border:1px solid #ffffff25;border-radius:8px;overflow:hidden;transition:border-color .12s,background .12s}
.deck-scroll,.inventory-scroll{touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:auto!important;scrollbar-color:#78bdffa8 #0d172a66!important;scrollbar-gutter:stable}
.deck-scroll::-webkit-scrollbar,.inventory-scroll::-webkit-scrollbar{width:12px;height:12px}
.deck-scroll::-webkit-scrollbar-thumb,.inventory-scroll::-webkit-scrollbar-thumb{border:2px solid #142039;border-radius:12px;background:#78bdffaa;min-height:40px}
.deck-scroll::-webkit-scrollbar-track,.inventory-scroll::-webkit-scrollbar-track{background:#0d172a66}
.deck-scroll:focus-visible,.inventory-scroll:focus-visible{outline:2px solid #78bdff;outline-offset:-2px}
.builder-card-face img{border-radius:3% / 2%}
.pane-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;border-bottom:1px solid #ffffff20}.pane-title h2{font-size:18px;margin:0}.pane-title small{font-size:10px;color:#bac8e0}.pane-title>span{font-size:13px;color:#ffc1af}.deck-scroll,.inventory-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:14px;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.deck-empty{min-height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#c3cce0;text-align:center;padding:10px;gap:12px}.deck-empty svg{width:78px;height:100px;stroke:#d8e3ff80;stroke-width:1}.deck-empty b{font-size:16px}.deck-empty p{font-size:11px;max-width:250px;margin:0;line-height:1.7}.deck-grade h3,.inventory-clan h3{font-size:11px;letter-spacing:1px;font-weight:600;color:#c4cfe5;margin:6px 0 12px;display:flex;justify-content:space-between;border-bottom:1px solid #ffffff1a;padding-bottom:6px}.builder-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px}.deck-grade+.deck-grade,.inventory-clan+.inventory-clan{margin-top:20px}
.builder-card{position:relative;min-width:0}.builder-card>.builder-card-face{padding:0;background:none!important;border:0;border-radius:5px;display:block;width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}.builder-card-face img{width:100%;aspect-ratio:350/510;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 5px #0005)}.builder-card-face>span{display:block;text-align:left;font-size:10px;line-height:1.35;min-height:27px;margin-top:4px;color:#eef3ff;overflow-wrap:anywhere}.builder-card small{display:block;font-size:10px;color:#bac8e0;margin-top:3px}.builder-card .quantity{position:absolute;top:5px;left:5px;background:#172036ed;border:1px solid #ffffff4a;border-radius:4px;padding:1px 6px;font-size:12px;color:#fff;pointer-events:none}.builder-card .starting-label{position:absolute;bottom:49px;left:3px;background:#ffc3a5;color:#152037;font-size:8px;padding:1px 5px;border-radius:3px;pointer-events:none}.builder-card .remove-card{position:absolute;top:0;right:0;width:32px;height:32px;min-height:32px;padding:6px;border:1px solid #ffffff60;background:#1c253deb;border-radius:4px}.remove-card svg{width:18px;height:18px}.builder-card.unavailable .builder-card-face img{opacity:.5}.builder-card.foreign .builder-card-face img{opacity:.6}.builder-card.unavailable small{color:#eab4a8}
.builder-filters{padding:10px 14px;border-bottom:1px solid #ffffff20}.builder-filters>input,.builder-filters>select{display:block;width:100%;min-width:0;font-size:12px;margin-bottom:7px;border-radius:5px;background:#15213b77}.builder-filters details{font-size:11px;color:#c9d4e8}.builder-filters summary{cursor:pointer;min-height:26px}.builder-filters .advanced-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px}.advanced-filters select{min-width:0;width:100%;font-size:11px;padding:7px 5px;border-radius:4px}.advanced-filters #set-filter{grid-column:1/-1}.drop-ready{border-color:#ffc3ae;background:#e8877122}.deck-drag-ghost{position:fixed;z-index:100;pointer-events:none;transform:translate(-50%,-55%) rotate(-6deg);width:90px;height:auto;filter:drop-shadow(0 9px 10px #0009)}.editor-detail-actions{position:sticky;bottom:0;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#152039db;border-top:1px solid #ffffff30}.editor-detail-actions small{font-size:12px}.editor-detail-actions button{min-height:44px;border-radius:5px}
.booster-picker{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}.booster-picker button{border-radius:5px;text-align:left;max-width:280px;flex:1;min-width:140px;padding:12px;font-size:12px}.booster-picker b,.booster-picker small{display:block}.booster-picker small{margin-top:4px;color:#bdcbe3;font-size:10px}.booster-picker button[aria-pressed=true]{border-color:#ffb6a0;background:#e8877124}.booster-picker button:disabled{opacity:.6}.booster-pack-art{max-height:390px;object-fit:contain}
.booster-picker:has(select){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;text-align:left;width:100%}.booster-picker label{font-size:13px;font-weight:600}.booster-picker label small{font-weight:400}.booster-picker select{min-width:0;width:100%;padding:12px;color:#f3f5ff;background:#182131ad;border:1px solid #ffffff35;border-radius:6px;font:inherit;font-size:13px}.booster-picker optgroup,.booster-picker option{background:#182131;color:#f3f5ff}.booster-picker select:disabled{opacity:.55}@media(max-width:450px){.booster-picker:has(select){grid-template-columns:1fr;gap:6px}.booster-picker label small{display:inline;margin-left:7px}.booster-picker select{font-size:12px}}
/* Mobile segmented tab switcher & compact collapsible extra options */
.mobile-editor-tabs{display:none}
.builder-details-toggle{display:none}
.builder-validation{display:contents}
.deck-extra-options{background:#0e1b2f;border:1px solid #2d5584;border-radius:8px;padding:4px 10px;font-size:11px;color:#c9d4e8}
.deck-extra-options summary{cursor:pointer;min-height:22px;font-weight:600;color:#9ec5ed;user-select:none;display:inline-flex;align-items:center;gap:6px;list-style:none}
.deck-extra-options summary::-webkit-details-marker{display:none}
.deck-extra-options summary:hover{color:#e2f0ff}
.deck-extra-body{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 4px 4px;border-top:1px dashed #ffffff1a;margin-top:4px}

@media(max-width:768px){
  body[data-page=editor] #content{padding:8px 8px 4px}
  .builder-header{gap:6px;margin-bottom:6px}
  .builder-header .editor-line{gap:6px}
  .builder-header #deck-name{font-size:14px;padding:7px 8px}
  .builder-header .editor-line button{font-size:11px;padding:6px 9px;min-height:36px}
  .builder-header .errors,.builder-header .valid{font-size:10px}

  /* Single-row horizontal scroll deck meter */
  .builder-header .deck-meter{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;gap:6px}
  .builder-header .deck-meter::-webkit-scrollbar{display:none}
  .builder-header .meter-total{min-width:96px;padding:4px 8px;gap:4px;font-size:11px}
  .builder-header .meter-chip{padding:3px 8px;font-size:10px;white-space:nowrap}
  .builder-header .meter-chip small{font-size:9px}
  .builder-header .grade-curve{padding:2px 6px;gap:3px;flex:none}
  .builder-header .grade-curve>span{width:16px;height:38px;font-size:8px}
  .builder-header .grade-curve i{width:9px}

  /* Mobile Tabs Switcher */
  .mobile-editor-tabs{display:flex;gap:6px;margin:4px 0 2px;background:#091322;padding:3px;border-radius:8px;border:1px solid #1e3a5f}
  .mobile-tab-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;font-size:12px;font-weight:700;color:#94a3b8;background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:all .16s ease}
  .mobile-tab-btn svg{stroke:currentColor;fill:none}
  .mobile-tab-btn.active{color:#ffffff;background:linear-gradient(180deg,#164e63 0%,#0e7490 100%);border-color:#38bdf8;box-shadow:0 0 10px #0284c755;text-shadow:0 1px 2px #000}

  /* Single full-width pane toggle */
  .deck-workspace{display:flex;flex-direction:column;gap:0;height:auto;min-height:0;flex:1}
  .deck-workspace[data-mobile-tab=deck] .inventory-pane{display:none!important}
  .deck-workspace[data-mobile-tab=deck] .deck-pane{display:flex!important;flex:1;min-height:0;width:100%}
  .deck-workspace[data-mobile-tab=inventory] .deck-pane{display:none!important}
  .deck-workspace[data-mobile-tab=inventory] .inventory-pane{display:flex!important;flex:1;min-height:0;width:100%}

  /* Generous 3-column card grid: card art is large (~115px), clear, easy to tap */
  .deck-pane .builder-card-grid,
  .inventory-pane .builder-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px 8px!important}
  .builder-card-face>span{font-size:9.5px;min-height:24px;line-height:1.25}
  .builder-card small{font-size:8.5px}

  /* Remove card button: sleek circular corner badge so it never obscures card art */
  .builder-card .remove-card,
  .deck-stack .remove-card{width:24px!important;height:24px!important;min-height:24px!important;padding:3px!important;border-radius:50%!important;background:#1e293bee!important;border:1px solid #ef4444aa!important;top:-4px!important;right:-4px!important;z-index:12}
  .builder-card .remove-card svg,
  .deck-stack .remove-card svg{width:14px;height:14px;stroke:#fca5a5}

  .pane-title{padding:8px 10px;gap:6px}
  .pane-title h2{font-size:14px}
  .pane-title small{font-size:9.5px}
  .pane-title>span{font-size:11px}
  .deck-scroll,.inventory-scroll{padding:8px}

  .builder-filters{padding:8px}
  .builder-filters>input,.builder-filters>select{font-size:11px;padding:7px 6px;margin-bottom:5px}

  .editor-detail-actions{padding:10px 14px;flex-wrap:wrap}
  .editor-detail-actions small{font-size:11px}
  .editor-detail-actions button{font-size:12px}
}
@media(max-height:550px) and (orientation:landscape){
  .deck-workspace{height:calc(100dvh - 200px);min-height:250px;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important}
  .deck-workspace .deck-pane,.deck-workspace .inventory-pane{display:flex!important}
  .mobile-editor-tabs{display:none!important}
  .builder-header .stats{font-size:9px}
  .builder-header details{display:none}
}
/* Deck Editor Focused HUD Layout: slim topbar, no lobby shortcuts clutter, generous card workspace */
.lobby-page[data-page=editor]{height:100dvh!important;max-height:100dvh!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
.lobby-page[data-page=editor] .topbar{flex:none!important;height:42px!important;min-height:42px!important;padding:4px 18px!important}
.lobby-page[data-page=editor] .topbar .logo{height:28px!important;width:76px!important}
.lobby-page[data-page=editor] .topbar .header-shortcuts{display:none!important}
.lobby-page[data-page=editor] .tabs{display:none!important}
.lobby-page[data-page=editor] #content{width:100%!important;max-width:1600px!important;margin:0 auto!important;flex:1 1 0!important;min-height:0!important;height:calc(100dvh - 42px)!important;max-height:calc(100dvh - 42px)!important;display:flex!important;flex-direction:column!important;padding:8px 18px 10px!important;box-sizing:border-box!important;overflow:hidden!important}
.lobby-page[data-page=editor] .builder-header{flex:none!important;gap:6px!important;margin-bottom:8px!important}
.lobby-page[data-page=editor] .deck-workspace{flex:1 1 0!important;height:100%!important;min-height:0!important;max-height:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px!important;overflow:hidden!important}
.lobby-page[data-page=editor] .deck-pane,
.lobby-page[data-page=editor] .inventory-pane{min-width:0!important;height:100%!important;min-height:0!important;max-height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.lobby-page[data-page=editor] .pane-title,
.lobby-page[data-page=editor] .builder-filters{flex:none!important}
.lobby-page[data-page=editor] .deck-scroll,
.lobby-page[data-page=editor] .inventory-scroll{flex:1 1 0!important;height:100%!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;padding:12px!important;box-sizing:border-box!important}

.editor-subline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.builder-header .errors{margin:2px 0 0;font-size:11px;color:#ff9b9d;background:#2b1115;border-left:3px solid #e4525e;padding:4px 10px;border-radius:4px}
.builder-header .valid{display:none!important}
.ranked-restrictions.valid{display:none!important}
.ranked-restrictions{margin:4px 0 0;padding:6px 12px;border-radius:6px;font-size:11px}
.ranked-restrictions ul{margin:4px 0;padding-left:18px}
@media(max-height:550px) and (orientation:landscape){
  .lobby-page[data-page=editor] .topbar{height:38px;padding:4px 14px}.lobby-page[data-page=editor] .logo{height:26px;width:70px}.lobby-page[data-page=editor] #content{padding:8px 14px}
  .builder-header{gap:4px;margin-bottom:6px}.builder-header #deck-name{padding:6px 9px;font-size:13px}.builder-header .editor-line button{font-size:11px;min-height:32px;padding:6px 10px}.builder-header .errors,.builder-header .valid{font-size:9px}
  .pane-title{padding:5px 10px}.pane-title h2{font-size:13px}.pane-title small{display:none}.deck-scroll,.inventory-scroll{padding:8px}.builder-card-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:9px}.builder-card-face>span{font-size:9px;min-height:24px}.builder-card small{font-size:9px}
  .builder-filters{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px 8px}.builder-filters>input,.builder-filters>select{margin:0;padding:6px 7px;font-size:11px}.builder-filters>details{grid-column:1/-1;font-size:9px}.builder-filters summary{min-height:18px}
}

/* A cosmetic cover chosen from the cards in this deck. */
.deck-cover-picker{display:flex;align-items:center;gap:10px;min-width:0}.deck-cover-picker>img{width:34px;height:auto;flex:none}.deck-cover-picker>div{min-width:0;max-width:520px;flex:1}.deck-cover-picker label{display:block;font-size:11px;color:#c9d4e8;margin-bottom:4px}.deck-cover-picker select{display:block;width:100%;min-width:0;font-size:12px;padding:6px 9px;border-radius:6px;background:#172138}
@media(max-height:550px) and (orientation:landscape){.deck-cover-picker>img{width:23px}.deck-cover-picker label{font-size:9px;margin-bottom:2px}.deck-cover-picker select{font-size:10px;padding:3px 6px}}
/* Deck summary (2026-10-16): rule chips and a grade curve instead of a plain text line. */
.deck-meter{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}.deck-meter .meter-total{position:relative;display:flex;align-items:center;gap:6px;min-width:120px;padding:6px 12px;border:1px solid #2d5b86;border-radius:8px;background:#0c1d33;overflow:hidden}.deck-meter .meter-total i{position:absolute;inset:auto 0 0 0;height:3px;background:#78bdff}.deck-meter .meter-total.ok i{background:#3aa86b}.deck-meter .meter-total.over i{background:#e4525e}
.deck-meter .meter-chip{display:flex;flex-direction:column;justify-content:center;padding:4px 10px;border:1px solid #2d5b86;border-radius:8px;background:#0c1d33;line-height:1.15}.deck-meter .meter-chip small{font-size:10px;color:#9fbad5}.deck-meter .meter-chip.ok{border-color:#3aa86b}.deck-meter .meter-chip.ok strong{color:#7fe0a6}.deck-meter .meter-chip.over{border-color:#e4525e}.deck-meter .meter-chip.over strong{color:#ff9b9d}
.deck-meter .grade-curve{display:flex;align-items:flex-end;gap:4px;padding:4px 8px;border:1px solid #2d5b86;border-radius:8px;background:#0c1d33}.deck-meter .grade-curve>span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:22px;height:54px;font-size:10px}.deck-meter .grade-curve i{display:block;width:12px;min-height:2px;border-radius:3px 3px 0 0;background:#78bdff}.deck-meter .grade-curve b{font-size:11px}.deck-meter .grade-curve small{color:#8fa3b8;font-size:9px}
/* Portrait phones: keep card space available, with optional rules and tools. */
@media(max-width:600px) and (min-height:650px) and (orientation:portrait){
  .lobby-page[data-page=editor] #content{padding:6px 8px!important}
  .lobby-page[data-page=editor] .builder-header{gap:5px;margin-bottom:5px;max-height:52dvh;overflow-y:auto;overscroll-behavior:contain}
  .builder-header .editor-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5px}
  .builder-header .editor-line #deck-name{grid-column:2;grid-row:1;min-width:0;width:100%;padding:7px;font-size:13px}
  .builder-header #editor-back{grid-column:1;grid-row:1}
  .builder-header .editor-line button{min-height:38px;padding:6px 9px}
  .builder-header #save-deck{grid-column:3;grid-row:1}
  .builder-header #share-deck,.builder-header #editor-import{grid-row:2}
  .builder-header:not(.details-open) #share-deck,.builder-header:not(.details-open) #editor-import,
  .builder-header:not(.details-open) .grade-curve,.builder-header:not(.details-open) .deck-extra-options,
  .builder-header:not(.details-open) .builder-validation{display:none}
  .builder-header .builder-details-toggle{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:32px;padding:5px 8px;font-size:10px;color:#a9d5fa;background:#102338;border:1px solid #325677}
  .builder-header .builder-details-toggle>span:last-child{color:#ffc3a5}
  .builder-header .editor-subline{min-width:0;gap:5px}
  .builder-header .deck-meter{width:100%;margin:0;gap:4px;padding:0 0 2px;flex-wrap:nowrap;overflow-x:auto}
  .builder-header .meter-total{min-width:78px;padding:4px 6px;font-size:11px;flex:none}
  .builder-header .meter-chip{padding:3px 6px;font-size:10px;flex:none}
  .builder-header .meter-chip small{font-size:9px}
  .builder-header.details-open .deck-meter{flex-wrap:wrap}
  .builder-header.details-open .builder-validation{display:block}
  .builder-header.details-open .deck-extra-options{width:100%}
  .builder-header .mobile-editor-tabs{margin:0;padding:2px;gap:3px}
  .builder-header .mobile-tab-btn{min-height:38px;padding:6px;font-size:11px}
  .deck-workspace .pane-title{display:none}
  .builder-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;padding:6px}
  .builder-filters>input,.builder-filters>select{min-width:0;margin:0;width:100%;min-height:36px}
  .builder-filters>details{grid-column:1/-1;max-height:24dvh;overflow-y:auto}
  .builder-filters summary{min-height:25px;display:flex;align-items:center}
}
/* Deck Canvas Stack V2 */
.deck-pane .builder-card-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:16px 14px}
.deck-stack{position:relative;min-width:0;transition:transform .18s ease}
.deck-stack:hover{transform:translateY(-4px)}
.deck-stack .builder-card-face{position:relative;width:100%;margin-bottom:0}
.deck-stack .builder-card-face>span{display:block;text-align:left;font-size:10px;line-height:1.3;margin-top:4px;color:#eef3ff;overflow-wrap:anywhere}
.deck-stack .stack-art{position:relative;width:76%;aspect-ratio:63/88}
.deck-stack .stack-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px;box-shadow:0 4px 10px #0009}
.deck-stack .quantity{position:absolute;top:-6px;left:-6px;z-index:9;background:#0d1b2e;border:1px solid #89ceff;border-radius:12px;padding:1px 7px;font-size:11px;font-weight:700;color:#fff;pointer-events:none}
.deck-stack .remove-card{z-index:10;top:-6px;right:0}
.deck-stack .starting-label{z-index:10;bottom:30px}
.deck-stack .ranked-card-warning{z-index:10;bottom:16px}
.deck-stack.missing .stack-art img:last-of-type{outline:3px solid #e4525e;filter:saturate(.6)}
.deck-stack .missing-label{display:block;text-align:center;font-size:10px;color:#ff9b9d;font-weight:600;margin-top:2px;white-space:nowrap}
@media(max-width:760px){
  .deck-pane .builder-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
}

/* Deck Selection Card Enhancements - Sci-Fi Game Buttons */
.deck-entry .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px;margin-top:14px}
.deck-entry .actions button{
  position:relative;
  border:none;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  min-height:38px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  text-shadow:0 1px 2px #000b;
  text-transform:uppercase;
  transition:all .18s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
  user-select:none;
}
.deck-entry .actions button:active{transform:scale(.97)}

/* 1. จัดเด็ค / คัดลอกและจัดเด็ค (Tech Cobalt) */
.deck-entry .actions button[data-edit]{
  background:linear-gradient(180deg, #1e3f66 0%, #10253f 100%);
  color:#d5ebff;
  filter:drop-shadow(0 0 1px #38bdf8) drop-shadow(0 2px 5px #000a);
}
.deck-entry .actions button[data-edit]:hover{
  background:linear-gradient(180deg, #2b568a 0%, #17375e 100%);
  color:#fff;
  filter:drop-shadow(0 0 3px #38bdf8) drop-shadow(0 0 10px #38bdf888);
  transform:translateY(-2px);
}

/* 2. แชร์เด็ค (Matrix Cyan / Teal) */
.deck-entry .actions button[data-share-deck]{
  background:linear-gradient(180deg, #154e4a 0%, #0d2b28 100%);
  color:#a7f3d0;
  filter:drop-shadow(0 0 1px #2dd4bf) drop-shadow(0 2px 5px #000a);
}
.deck-entry .actions button[data-share-deck]:hover{
  background:linear-gradient(180deg, #1f6b65 0%, #123d3a 100%);
  color:#fff;
  filter:drop-shadow(0 0 3px #2dd4bf) drop-shadow(0 0 10px #2dd4bf88);
  transform:translateY(-2px);
}

/* 3. ใช้เด็คนี้ (Vanguard Burst Flare) */
.deck-entry .actions button.primary[data-use]{
  background:linear-gradient(180deg, #f97316 0%, #c2410c 100%);
  color:#fff;
  filter:drop-shadow(0 0 1px #ffedd5) drop-shadow(0 0 8px #ea580c88);
}
.deck-entry .actions button.primary[data-use]:hover:not(:disabled){
  background:linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 14px #ea580caa);
  transform:translateY(-2px);
}
.deck-entry .actions button.primary[data-use]:disabled{
  background:#1e2738;
  color:#64748b;
  filter:none;
  opacity:.5;
  cursor:default;
}

/* 4. ลบ (Hazard Ruby) */
.deck-entry .actions button[data-delete]{
  background:linear-gradient(180deg, #3d141e 0%, #240a11 100%);
  color:#fda4af;
  filter:drop-shadow(0 0 1px #f43f5e) drop-shadow(0 2px 5px #000a);
}
.deck-entry .actions button[data-delete]:hover{
  background:linear-gradient(180deg, #571c2b 0%, #350f19 100%);
  color:#fff;
  filter:drop-shadow(0 0 3px #f43f5e) drop-shadow(0 0 10px #f43f5e88);
  transform:translateY(-2px);
}

/* Toolbar Sci-Fi Buttons */
.toolbar #new-deck{
  position:relative;
  border:none;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  min-height:38px;
  padding:8px 16px;
  background:linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%);
  color:#eff6ff;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  filter:drop-shadow(0 0 1px #60a5fa) drop-shadow(0 2px 6px #0008);
  transition:all .18s cubic-bezier(.2,.8,.2,1);
  text-shadow:0 1px 2px #000b;
}
.toolbar #new-deck:hover{
  background:linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  filter:drop-shadow(0 0 3px #93c5fd) drop-shadow(0 0 12px #3b82f6aa);
  transform:translateY(-2px);
}
.toolbar #import-deck{
  position:relative;
  border:none;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  min-height:38px;
  padding:8px 16px;
  background:linear-gradient(180deg, #d97706 0%, #78350f 100%);
  color:#fef3c7;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  filter:drop-shadow(0 0 1px #f59e0b) drop-shadow(0 2px 6px #0008);
  transition:all .18s cubic-bezier(.2,.8,.2,1);
  text-shadow:0 1px 2px #000b;
}
.toolbar #import-deck:hover{
  background:linear-gradient(180deg, #f59e0b 0%, #92400e 100%);
  filter:drop-shadow(0 0 3px #fde68a) drop-shadow(0 0 12px #f59e0baa);
  transform:translateY(-2px);
}

/* Deck share & import dialogs */
dialog#deck-share-dialog{width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;background:#0c1524;border:1px solid #2b4570;border-radius:18px;box-shadow:0 18px 48px #000c;color:#eef3ff}
.share-dialog-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px}
.share-header-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-bottom:12px;border-bottom:1px solid #ffffff1a}
.share-deck-info h2{margin:0 0 6px;font-size:19px;color:#fff}
.share-deck-meta{display:flex;gap:8px;flex-wrap:wrap}
.share-deck-meta .meta-tag{font-size:11px;padding:2px 8px;border-radius:6px;background:#152238;border:1px solid #2c4266;color:#9fc1ea}
.share-deck-meta .meta-tag.clan{background:#2a1b12;border-color:#7d4520;color:#ffbe98;font-weight:600}
.share-deck-meta .meta-tag.count{background:#112a1d;border-color:#2a6644;color:#7be2a6}
.share-code-box{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.share-code-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#8fa3b8}
.share-code-pill{display:flex;align-items:center;gap:10px;background:#07101d;border:1px solid #2d5584;border-radius:10px;padding:3px 4px 3px 12px}
.share-code-pill .share-code{font:700 24px/1 ui-monospace,monospace;letter-spacing:.25em;color:#ffbe98;user-select:all;margin:0;padding:0;background:transparent;border:none}
.share-code-pill button#copy-share-code{
  border:none;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  padding:8px 14px;
  background:linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  color:#fff;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  filter:drop-shadow(0 0 1px #38bdf8) drop-shadow(0 0 8px #0284c766);
  transition:all .18s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  text-shadow:0 1px 2px #000;
}
.share-code-pill button#copy-share-code:hover{
  background:linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  filter:drop-shadow(0 0 3px #7dd3fc) drop-shadow(0 0 14px #0284c7aa);
  transform:translateY(-1px);
}
.share-expiry-text{margin:0;font-size:11px;color:#8fa3b8;text-align:right}
.share-board-container{overflow-y:auto;overscroll-behavior:contain;max-height:calc(100dvh - 225px);padding:4px 2px;scrollbar-width:thin;scrollbar-color:#78bdff66 transparent}
.share-board-container::-webkit-scrollbar{width:8px}
.share-board-container::-webkit-scrollbar-thumb{background:#78bdff66;border-radius:8px}
.share-deck-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 14px}
.share-stack{position:relative}
.share-stack .builder-card-face{position:relative;width:100%;cursor:pointer}
.share-stack .stack-art{position:relative;width:76%;aspect-ratio:63/88}
.share-stack .stack-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px;box-shadow:0 4px 10px #0009}
.share-stack .share-stack-caption{display:block;text-align:left;font-size:10px;line-height:1.25;margin-top:4px;color:#d8e5f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-stack .grade-pill{position:absolute;top:-6px;right:0;z-index:9;background:#152238;border:1px solid #3d5e8c;border-radius:10px;padding:1px 6px;font-size:9px;font-weight:700;color:#cde0f7;pointer-events:none}
.share-stack .grade-pill.critical{border-color:#e4525e;color:#ff9b9d;background:#2b1115}
.share-stack .grade-pill.draw{border-color:#c8861e;color:#ffd182;background:#2b1e0d}
.share-stack .grade-pill.front{border-color:#b468ff;color:#e1bdff;background:#22102f}
.share-stack .grade-pill.heal{border-color:#3aa86b;color:#7fe0a6;background:#0d281a}
@media(max-width:760px){
  .share-header-bar{flex-direction:column;align-items:stretch}
  .share-code-box{align-items:stretch}
  .share-expiry-text{text-align:left}
  .share-deck-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
}
.codein{width:100%;font:700 24px ui-monospace,monospace;letter-spacing:.25em;text-transform:uppercase;text-align:center;padding:10px 12px;background:#08121f;border:1px solid #2d5b86;color:#e2f0ff;border-radius:10px;margin:8px 0}
.codein:focus{outline:2px solid #78bdff}
/* Mobile deck editor (2026-10-16): the fixed-height top bar must not wrap over the editor header, and the header row and
   deck summary wrap instead of running past the right edge. */
@media(max-width:768px){.lobby-page[data-page=editor] .topbar .header-discord,.lobby-page[data-page=editor] .topbar .header-about,.lobby-page[data-page=editor] .topbar .language,.lobby-page[data-page=editor] .topbar .edition,.lobby-page[data-page=editor] .topbar .install-app{display:none!important}.lobby-page[data-page=editor] .topbar{flex-wrap:nowrap;overflow:hidden}.lobby-page[data-page=editor] .topbar .header-right{margin-left:auto;flex-wrap:nowrap}
.lobby-page[data-page=editor] .builder-header .editor-line{flex-wrap:wrap;gap:6px}.lobby-page[data-page=editor] .builder-header #deck-name{flex:1 1 100%;order:-1;min-width:0}.lobby-page[data-page=editor] .builder-header .editor-line button{flex:1 1 0;min-width:0;white-space:nowrap}
.lobby-page[data-page=editor] .deck-meter{flex-wrap:wrap;max-width:100%}}

/* --- End: deck-builder.css ---
 */

/* --- Begin: economy.css --- */
.deck-entry{position:relative;min-height:200px;padding-left:130px!important;overflow:hidden;background:linear-gradient(135deg,#172b45eb,#101726f2)!important;border:1px solid #70b9ff55!important;border-radius:18px!important}
.deck-entry-art{position:absolute;left:16px;top:20px;width:96px;aspect-ratio:350/510;object-fit:contain;border-radius:5px;filter:drop-shadow(0 10px 15px #0008)}
.storefront{margin:0 auto 32px;max-width:1200px}.storefront header{display:flex;align-items:center;justify-content:space-between;gap:16px}.storefront h1{font-size:32px;margin:8px 0}.storefront h2{font-size:20px;letter-spacing:.1em;margin:24px 0 10px}.storefront p{font-size:14px;color:#b9cce1}.ticket-wallet,.welcome-ticket{display:inline-block;padding:12px 18px;border:1px solid #f6d68d66;border-radius:12px;background:linear-gradient(120deg,#71502250,#201d31);color:#ffe0a1;font-weight:700;white-space:nowrap}
.shop-deck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.shop-deck{display:flex!important;text-align:left!important;align-items:center;gap:16px;padding:14px!important;background:linear-gradient(130deg,#192f48e8,#121c30eb)!important;border:1px solid #8cc8ff55!important;border-radius:14px!important;min-width:0;box-shadow:0 8px 20px #0003}.shop-deck>img{width:70px;aspect-ratio:350/510;object-fit:contain;border-radius:4px}.shop-deck>span{display:grid;gap:8px}.shop-deck b{font-size:17px}.shop-deck small{color:#82c1ff}.shop-deck em{font-style:normal;font-size:12px;color:#b5c8dd}.shop-deck:hover{border-color:#87c8ff!important;box-shadow:0 6px 26px #70b9ff20}
.shop-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.shop-pack-grid>button{display:grid;place-items:center;gap:10px;min-width:0;padding:22px!important;border:1px solid #a18afb55!important;border-radius:18px!important;background:linear-gradient(145deg,#25203ce0,#0e1b2fe8)!important}.shop-pack-grid img{height:190px;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #0008)}.shop-pack-grid b{font-size:16px}.shop-pack-grid small{color:#ffdea0;font-size:14px}
#shop-deck-detail{width:min(1000px,calc(100vw - 24px));max-height:90dvh;overflow:auto;background:#111d30;color:#f0f6ff;border:1px solid #7bbfff;border-radius:16px;padding:0}#shop-deck-detail .dialog-head{position:sticky;top:0;background:#101c2f;z-index:2}.shop-deck-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;padding:20px}.shop-deck-detail-grid button{position:relative;border:0!important;background:transparent!important;padding:0!important;display:grid;gap:6px}.shop-deck-detail-grid img{width:100%;border-radius:4px}.shop-deck-detail-grid b{position:absolute;right:5px;top:5px;background:#061324e8;border:1px solid #9bceff;border-radius:6px;padding:3px 8px;font-size:18px}.shop-deck-detail-grid small{font-size:12px}
#starter-welcome{width:min(1120px,calc(100vw - 24px));height:min(860px,calc(100dvh - 24px));max-width:none;max-height:none;padding:0;border:1px solid #83c5ff99;border-radius:24px;background:radial-gradient(ellipse at 50% 0,#25446a,#0d182c 66%);color:#f0f6ff;box-shadow:0 22px 80px #000a;overflow:hidden}#starter-welcome[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}#starter-welcome::backdrop{background:#050d1de8;backdrop-filter:blur(8px)}.welcome-heading{text-align:center;padding:24px 20px 16px}.welcome-heading h1{font-size:clamp(24px,4vw,36px);margin:8px 0;line-height:1.25}.welcome-heading p{font-size:16px;color:#c4d8ec;margin:10px 0}.welcome-heading .eyebrow{letter-spacing:.25em;color:#8ecbff}.welcome-ticket{font-size:12px;padding:7px 14px;margin-top:4px}.welcome-decks{overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:12px 28px 24px;align-content:start}.welcome-deck{position:relative;display:grid;justify-items:center;gap:5px;min-width:0;padding:16px!important;text-align:center;border:1px solid color-mix(in srgb,var(--deck-color) 35%,transparent)!important;border-radius:18px!important;background:linear-gradient(150deg,#21385088,#112037dd)!important;transition:transform .22s,box-shadow .22s,border-color .22s;transform-style:preserve-3d}.welcome-art{display:block;perspective:900px;width:100%;height:160px}.welcome-art img{height:100%;max-width:100%;object-fit:contain;border-radius:4px;transform:rotateY(-13deg) rotateZ(-3deg);filter:drop-shadow(12px 13px 10px #0008);transition:transform .3s}.welcome-deck:hover .welcome-art img,.welcome-deck[aria-pressed=true] .welcome-art img{transform:rotateY(0) rotateZ(0) translateY(-5px)}.welcome-deck[aria-pressed=true]{border-color:var(--deck-color)!important;box-shadow:0 0 25px color-mix(in srgb,var(--deck-color) 23%,transparent),inset 0 0 20px #94c9ff10;background:linear-gradient(150deg,#375e8180,#142841)!important}.welcome-deck small{color:var(--deck-color);font-size:12px}.welcome-deck b{font-size:17px}.welcome-deck>span:last-child{font-size:12px;color:#bdd0e3}.welcome-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid #85b9ee33;background:#0c172aee}.welcome-footer p{margin:0;color:#bbd1e7;font-size:14px}.welcome-footer button{min-height:48px;min-width:170px;border:1px solid #8dd0ff!important;border-radius:10px!important;background:linear-gradient(135deg,#32628d,#20405d)!important;font-size:17px!important;color:white}.welcome-footer button:disabled{opacity:.4}
@media(max-width:760px){.shop-deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-deck{gap:10px;padding:10px!important}.shop-deck>img{width:54px}.shop-deck b{font-size:14px}.shop-pack-grid img{height:130px}.shop-pack-grid>button{padding:12px!important}.shop-pack-grid b{font-size:13px}.welcome-decks{gap:12px;padding:10px 16px 20px}.welcome-art{height:135px}}
@media(max-width:500px){.shop-deck-grid{grid-template-columns:1fr}.shop-pack-grid{grid-template-columns:1fr}.shop-pack-grid>button{grid-template-columns:70px 1fr;text-align:left;justify-items:start}.shop-pack-grid img{grid-row:1 / span 2;height:105px;width:70px}.deck-entry{padding-left:104px!important}.deck-entry-art{width:72px;left:14px}.storefront header{align-items:flex-start}.ticket-wallet{font-size:12px;padding:10px}.welcome-heading{padding:20px 14px 10px}.welcome-heading p{font-size:13px}.welcome-decks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 12px 16px}.welcome-deck{padding:12px 8px!important}.welcome-art{height:145px}.welcome-deck b{font-size:14px}.welcome-footer{padding:12px;flex-direction:column;gap:8px}.welcome-footer p{font-size:12px;text-align:center}.welcome-footer button{width:100%}#starter-welcome{border-radius:16px}.shop-deck-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}}
@media(max-height:550px){.welcome-heading{padding:10px}.welcome-heading h1{font-size:22px;margin:3px}.welcome-heading p{margin:3px;font-size:12px}.welcome-ticket{display:none}.welcome-art{height:120px}.welcome-footer{padding:8px 16px}.welcome-footer button{min-height:40px}}
@media(prefers-reduced-motion:reduce){.welcome-art img,.welcome-deck{transition:none;transform:none}}

.ticket-wallet small{display:block;text-align:right;font-size:12px;color:#bdd0e3;margin-top:5px}.shop-deck-purchase{padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid #85b9ee33}.shop-deck-purchase p{flex-basis:100%;margin:0;color:#ff998c}.shop-deck-purchase button{margin-left:auto;border-radius:8px!important;min-height:44px}.pack-readiness{color:#ffda93;font-size:14px}
.tabs[hidden],#account-dialog [hidden]{display:none!important}.login-welcome{text-align:center;margin:12vh auto;color:#c8def3}.login-required #account-dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #83c5ff99;border-radius:20px;background:linear-gradient(145deg,#20364f,#0d182b);color:#f0f6ff;box-shadow:0 18px 70px #0009}.login-required #account-dialog::backdrop{background:#050d1ddc;backdrop-filter:blur(7px)}.login-required .account-form h2{margin:0;font-size:26px}.login-required .account-form p{font-size:14px;color:#bcd3e9}.login-required .account-form input{min-height:44px}.login-required .account-form button{min-height:44px;border-radius:8px}


.community-heading{text-align:center;padding:24px 12px}.community-heading h1{font-size:clamp(26px,4vw,40px);margin:8px}.community-heading p,.profile-note{color:#bfd2e7;font-size:14px}.ranked-page,.fighter-profile{max-width:1120px;margin:auto}.ranked-arena{max-width:620px;margin:auto;text-align:center;padding:32px;border:1px solid #82c8ff66;border-radius:24px;background:radial-gradient(ellipse at 50% 0,#244c6d99,#101a2eee);box-shadow:0 20px 55px #0005;position:relative;overflow:hidden}.ranked-arena::before{content:"";position:absolute;inset:8px;border:1px solid #8dcfff22;clip-path:polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));pointer-events:none}.rank-orbit{width:170px;aspect-ratio:1;margin:auto;position:relative}.rank-orbit img{width:100%;filter:drop-shadow(0 0 18px #8bcfff55);animation:rank-float 5s ease-in-out infinite}.rank-orbit::after{content:"";position:absolute;inset:5px;border:1px dashed #89c7ff55;border-radius:50%;animation:rank-spin 28s linear infinite;pointer-events:none}.ranked-arena h2{margin:8px 0}.ranked-arena>strong{font-size:28px;color:#8ed3ff}.ranked-arena p{color:#c6d8eb}.ranked-arena label{display:block;text-align:left;margin:22px 0 8px}.ranked-arena select{width:100%;min-height:48px}.ranked-actions{display:flex;gap:12px;justify-content:center;margin:20px 0}.ranked-actions button{min-height:50px;border-radius:10px!important;min-width:160px}.ranked-arena small{color:#a5bdd4;line-height:1.8}#ranked-status{min-height:24px;color:#9bdfff}#ranked-cancel[hidden],#ranked-status-strip[hidden]{display:none!important}#ranked-status-strip{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:16px;align-items:center;border:1px solid #8dd7ff;border-radius:14px;padding:12px 18px;background:#101f35f5;box-shadow:0 0 26px #70caff33;max-width:calc(100vw - 20px);font-size:14px;white-space:nowrap}.profile-hero{display:flex;gap:28px;align-items:center;padding:28px;border:1px solid #92bbff55;border-radius:24px;background:linear-gradient(140deg,#203a55ee,#131a2cee);box-shadow:0 12px 40px #0004}.profile-hero .rank-orbit{margin:0;flex-shrink:0}.profile-hero h1{font-size:clamp(24px,4vw,38px);overflow-wrap:anywhere;margin:8px 0}.profile-hero h2{font-size:20px;margin:8px 0}.profile-hero progress{width:min(300px,100%);height:8px;accent-color:#82caff}.profile-hero p{color:#bcd2e6;font-size:13px}.profile-actions{margin-left:auto;display:grid;gap:10px}.profile-actions button{min-height:44px;border-radius:9px!important;white-space:nowrap}.profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}.profile-stats article{display:grid;gap:9px;padding:20px;border:1px solid #86bbff44;border-radius:14px;background:linear-gradient(130deg,#20354fe0,#101d30ed);min-width:0}.profile-stats strong{font-size:clamp(20px,3vw,30px);color:#ade0ff}.profile-stats span{color:#b8cee4;font-size:14px}.fighter-profile section{margin-top:28px}.fighter-profile h2{font-size:22px}.rarity-summary{display:flex;gap:12px;flex-wrap:wrap}.rarity-summary>span{background:#17263fe8;border:1px solid #adbcff55;padding:10px 18px;border-radius:10px;color:#e4d8ff}.favorite-decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.favorite-decks article{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid #75bfff44;background:#14243bed;border-radius:14px;min-width:0}.favorite-decks img{width:60px;border-radius:4px}.favorite-decks article>div{display:grid;gap:7px;min-width:0;overflow-wrap:anywhere}.favorite-decks small,.favorite-decks span{color:#b8cee4;font-size:13px}.profile-history{display:grid;gap:10px}.profile-history article{display:flex;align-items:center;gap:20px;padding:16px;background:#152137eb;border:1px solid #73c7ff44;border-left:3px solid #63ceac;border-radius:10px}.profile-history article.lost{border-left-color:#ff8c85}.profile-history article>div{display:grid;gap:5px}.profile-history small,.profile-history time{font-size:12px;color:#bcd0e6}.profile-history time{margin-left:auto}.rank-showcase{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:32px 0}.rank-showcase figure{margin:0;text-align:center}.rank-showcase img{width:100%;max-width:120px;filter:drop-shadow(0 0 12px #86bfff33)}.rank-showcase figcaption{font-size:11px;letter-spacing:.08em;color:#c3d4eb}.hub-ranked{border-color:#9cceff!important;background:linear-gradient(110deg,#204c69,#342348)!important}.hub-ranked{display:grid;grid-template-columns:44px minmax(0,1fr) 12px;gap:12px;align-items:center}.hub-ranked>.hub-icon{width:44px;height:44px;align-self:center}.hub-ranked>.hub-icon img{display:block;width:100%;height:100%;object-fit:contain;transform:none}.hub-ranked>span{align-items:flex-start;text-align:left}.hub-ranked>svg{margin-left:0;justify-self:end;align-self:center}
@keyframes rank-float{50%{transform:translateY(-5px)}}@keyframes rank-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.profile-hero{flex-wrap:wrap;padding:18px;gap:14px}.profile-hero .rank-orbit{width:110px}.profile-hero>div:nth-child(2){flex:1;min-width:0}.profile-actions{width:100%;grid-template-columns:1fr 1fr}.profile-stats article{padding:14px}.rank-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}.ranked-arena{padding:24px 16px}.profile-history article{flex-wrap:wrap;gap:10px}.profile-history time{width:100%;margin-left:0}.favorite-decks{grid-template-columns:1fr}}
@media(max-width:500px){.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-stats span{font-size:12px}.ranked-actions{flex-direction:column}.ranked-actions button{width:100%}#ranked-status-strip{gap:8px;padding:10px;font-size:12px}.profile-hero h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.rank-orbit img,.rank-orbit::after{animation:none}}

@media(max-height:550px) and (orientation:landscape){.hub-ranked{grid-template-columns:36px minmax(0,1fr);gap:10px}.hub-ranked>.hub-icon{width:36px;height:36px}}
.booster-picker{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;width:100%;gap:10px;margin-bottom:24px;text-align:left}.booster-picker>span{color:#b8cfe7;font-size:14px}.booster-picker details{border:1px solid #79bfff70;background:#13233be8;border-radius:12px;overflow:hidden}.booster-picker summary{cursor:pointer;padding:16px;display:grid;gap:12px;list-style:none}.booster-picker summary::-webkit-details-marker{display:none}.booster-picker strong{font-size:15px;overflow-wrap:anywhere}.picker-hint{font-size:12px;color:#bdd8ed}.booster-options{max-height:440px;overflow:auto;overscroll-behavior:contain;padding:0 12px 16px;scrollbar-width:thin}.booster-options h3{font-size:12px;letter-spacing:.14em;color:#a4bcd4;margin:16px 4px 8px}.booster-options button{display:grid;gap:10px;width:100%;max-width:none;min-width:0;text-align:left;min-height:72px;border-radius:9px!important;margin:6px 0;padding:12px;background:#0e192dcc;border:1px solid #7799bc3b}.booster-options button[aria-pressed=true]{border-color:#75c7ff;background:#24486a80}.booster-options button:hover{border-color:#afd9ff;background:#234362}.set-clans{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.clan-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid color-mix(in srgb,var(--clan-color) 50%,transparent);border-radius:7px;color:var(--clan-color);background:color-mix(in srgb,var(--clan-color) 10%,#0d192b);font-size:11px;line-height:1.4;text-shadow:0 0 9px color-mix(in srgb,var(--clan-color) 35%,transparent)}.clan-tag::before{content:'';width:5px;height:5px;flex:none;border-radius:50%;background:var(--clan-color);box-shadow:0 0 7px var(--clan-color)}.shop-pack-grid .set-clans{justify-content:center}.shop-pack-grid .clan-tag{font-size:10px}.booster-picker summary:focus-visible{outline:2px solid #a9daff;outline-offset:-3px}#bot-offline-dialog{max-width:460px}#bot-offline-dialog h2{font-size:21px;color:#ffb1a4;line-height:1.5}
@media(max-width:500px){.booster-options{max-height:55dvh}.booster-picker summary{padding:12px}.clan-tag{font-size:10px}}

.display-name-form{display:grid;gap:9px;padding:18px;margin:16px 0;border:1px solid #69bdff44;border-radius:12px;background:#10223999}.display-name-form>div{display:flex;gap:10px}.display-name-form input{min-width:0;flex:1;max-width:420px}.display-name-form small{color:#b2cce0}.profile-hero h1{overflow-wrap:anywhere}@media(max-width:500px){.display-name-form>div{flex-wrap:wrap}.display-name-form input{width:100%}}

.game-offline-notice{padding:14px 18px;border:1px solid #69bdff66;border-radius:12px;background:#142942;color:#c7e8ff;line-height:1.6}



/* Scrollable deck choices must size rows from their content, not available viewport space. */
#starter-welcome{--welcome-art-height:160px;max-height:calc(100dvh - 24px);min-height:0}
#starter-welcome .welcome-decks{min-height:0;min-width:0;grid-auto-rows:max-content;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
#starter-welcome .welcome-deck{align-self:start;grid-template-rows:var(--welcome-art-height) max-content max-content max-content;min-height:calc(var(--welcome-art-height) + 108px);height:auto;overflow:hidden;align-content:start}
#starter-welcome .welcome-art{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:var(--welcome-art-height);min-height:0;min-width:0;padding:8px;overflow:hidden}
#starter-welcome .welcome-art img{display:block;flex:none;width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain}
#starter-welcome .welcome-deck b,#starter-welcome .welcome-deck>span:last-child{max-width:100%;overflow-wrap:anywhere;line-height:1.4}
#starter-welcome .welcome-footer{min-width:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.shop-deck>img{flex:none;max-width:100%;height:auto}
.shop-deck>span{min-width:0;overflow-wrap:anywhere}
.shop-deck-detail-grid,.pack-catalog-grid{grid-auto-rows:max-content;align-items:start}
.shop-deck-detail-grid>button{min-width:0;align-content:start;overflow-wrap:anywhere}
.shop-deck-detail-grid img{display:block;height:auto;aspect-ratio:350/510;object-fit:contain}
@media(max-width:760px){#starter-welcome{--welcome-art-height:135px}}
@media(max-width:500px){#starter-welcome{--welcome-art-height:132px}.welcome-heading{padding-top:16px}.welcome-heading h1{font-size:24px}.welcome-deck small{font-size:11px}}
@media(max-height:550px){#starter-welcome{--welcome-art-height:100px}.welcome-heading .eyebrow{font-size:10px}.welcome-heading h1{font-size:20px}.welcome-heading p{line-height:1.35}.welcome-footer p{font-size:11px}}

/* Keep all pack labels in the text column when the store switches to a compact row. */
@media(max-width:500px){
 .shop-pack-grid>button{grid-template-columns:76px minmax(0,1fr);grid-template-rows:repeat(4,auto);align-items:start}
 .shop-pack-grid>button>img{grid-column:1;grid-row:1 / span 4;width:76px;height:112px;align-self:center}
 .shop-pack-grid>button>b{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere}
 .shop-pack-grid>button>.product-total{grid-column:2;grid-row:2}
 .shop-pack-grid>button>.set-clans{grid-column:2;grid-row:3;min-width:0;justify-content:flex-start}
 .shop-pack-grid>button>small{grid-column:2;grid-row:4;white-space:normal}
 .shop-pack-grid>button:has(.pack-new)>b{padding-right:42px}
 .shop-pack-grid .pack-new{top:10px;right:10px;font-size:10px;padding:3px 7px}
}

/* Star ranks (2026-10-15): division stars under the emblem. */
.ranked-arena .rank-stars{display:block;font-size:24px;letter-spacing:.18em;color:#ffd75e;text-shadow:0 0 10px #ffb80080}
.match-rank small{color:#ffd75e;letter-spacing:.08em}
.ranked-arena .rank-stars .off{color:#ffffff2e;text-shadow:none}

/* --- End: economy.css ---
 */

/* --- Begin: social-hub.css --- */
/* Community home: one shared space, with navigation and matches around it. */
.community-discord{display:flex;align-items:center;gap:12px;flex:none;min-height:56px;margin:0 14px 12px;padding:10px 12px;border:1px solid #929fff66;border-radius:13px;background:linear-gradient(115deg,#5865f23b,#5865f215);color:#eef0ff;text-decoration:none;transition:background .15s,border-color .15s}.community-discord:hover{background:#5865f244;border-color:#a6afff}.community-discord:focus-visible{outline:2px solid #bcc3ff;outline-offset:3px}.community-discord>svg{width:25px;height:25px;flex:none;color:#b7c0ff}.community-discord>span{min-width:0;flex:1}.community-discord strong,.community-discord small{display:block;overflow-wrap:anywhere}.community-discord strong{font-size:14px;line-height:1.5}.community-discord small{font-size:11px;color:#b9c6e9}.community-discord>.discord-arrow{width:18px;height:18px}@media(max-width:600px){.community-discord{margin-inline:12px;gap:10px}}
.lobby-page .topbar{height:auto;min-height:76px;padding:12px 24px;gap:16px;flex-wrap:wrap;background:#0a1222e8}
.header-shortcuts{display:flex;align-items:center;gap:5px;flex:1}.header-shortcuts button{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px!important;border:0!important;background:transparent!important;color:#c8d8ec;font-size:14px!important;border-radius:10px!important}
.header-shortcuts button[aria-current=true]{background:#65b5ff20!important;color:#8bcaff}.header-shortcuts svg{width:21px;height:21px;flex:none}.header-right{display:flex;gap:8px;margin-left:auto}.lobby-page .header-right button{border-radius:10px;min-height:44px;padding:8px 14px;font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-page #account-button{border-color:#87baff66;background:#162e49}.lobby-page .topbar .language{margin-left:0}.lobby-page .edition{display:none}
.lobby-page .tabs{display:none!important}.lobby-page[data-page=lobby] #content{display:block;min-height:0;width:100%;max-width:1500px;margin:auto;padding:28px 24px}.social-home{width:100%;min-width:0}.home-welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.home-welcome h1{font-size:clamp(23px,2.4vw,32px);margin:6px 0 4px;letter-spacing:0}.home-welcome p{color:#aebfd5;font-size:14px;margin:0}.home-wallet{text-align:right;flex:none}.home-wallet strong{display:block;font-size:24px;color:#f8dc97}.home-wallet strong small{font-size:12px}.home-wallet>span{color:#bdbba9;font-size:11px}
.social-layout{display:grid;grid-template-columns:250px minmax(280px,1fr) 285px;gap:24px;align-items:start}.social-layout>*{min-width:0}.hub-online,.hub-community,.hub-fight{background:linear-gradient(145deg,#14253af2,#0b1627f2);border:1px solid #9abfe124;border-radius:20px;box-shadow:0 15px 35px #0003}.hub-online{padding:18px 14px;max-height:calc(100dvh - 190px);overflow:auto}.social-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.social-section-title h2{font-size:18px;margin:0}.social-section-title #online-count{color:#76dbc1;padding:3px 9px;background:#6ae2ba10;border-radius:20px;font-size:13px}.social-hint{font-size:11px;color:#a5bbd3;line-height:1.6;margin:9px 0 12px}.online-fighter{display:flex;align-items:center;gap:7px;padding:11px 0;border-bottom:1px solid #b6d2ed13}.online-fighter:last-child{border:0}.online-fighter>img{width:31px;height:38px;object-fit:contain}.online-name{padding:0;background:none!important;border:0!important;min-width:0;flex:1;text-align:left}.online-name:disabled{opacity:1}.online-name b{display:block;font-size:12px;color:#e0edf9;overflow-wrap:anywhere}.online-name small{font-size:10px;color:#9cbbc9}.invite-fighter{font-size:11px;padding:6px 8px;border-radius:8px;border-color:#72c9c250;background:#183c43}.community-live{color:#70dab9;font-size:10px;letter-spacing:1px}.community-live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#70dab9;margin-right:5px;box-shadow:0 0 10px #70dab9}
.hub-fight{padding:22px 18px}.hub-fight>.eyebrow{font-size:10px;letter-spacing:1.5px;color:#efbea2}.hub-fight h2{font-size:20px;margin:5px 0 18px}.fight-feature{display:flex;align-items:center;gap:9px;width:100%;text-align:left;min-height:94px;background:linear-gradient(120deg,#344464,#2e223f);border-color:#dba97e62;border-radius:14px;padding:14px 10px}.fight-feature>img{width:45px;height:54px;object-fit:contain}.fight-feature span,.fight-link span{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}.fight-feature b{font-size:16px}.fight-feature small{font-size:11px;color:#debd98}.fight-feature>svg,.fight-link>svg:last-child{width:13px;flex:none;opacity:.7}.fight-link{display:flex;align-items:center;gap:12px;padding:18px 3px;border:0;border-bottom:1px solid #b7d3ef1c;border-radius:0;background:none!important;width:100%;text-align:left}.fight-link>svg:first-child{width:24px;color:#7eb8de;flex:none}.fight-link b{font-size:14px}.fight-link small{font-size:10px;color:#a1b6cf}.home-note{margin-top:25px;font-size:11px;color:#8fa8c1}.home-note p{margin:4px 0}.home-note button{padding:0;color:#a9c2df;background:none!important;border:0;font-size:11px}
#incoming-invite{position:fixed;right:20px;bottom:20px;z-index:40;width:min(330px,calc(100vw - 30px));background:#142840;border:1px solid #81c8ea;border-radius:16px;padding:18px;box-shadow:0 0 35px #3a9ac233}#incoming-invite b,#incoming-invite small{display:block;overflow-wrap:anywhere}#incoming-invite small{color:#a6bdd6;margin:5px 0 12px}#incoming-invite>div{display:flex;gap:10px}#incoming-invite a{padding:8px 15px;border-radius:10px;background:#265c76;text-decoration:none;color:#f0f9ff}#incoming-invite button{font-size:12px}
#release-dialog{width:min(660px,calc(100vw - 28px));border-radius:22px;border-color:#81b6d765;background:linear-gradient(140deg,#182d46,#101829)}#release-dialog[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 28px);overflow:hidden}#release-dialog .dialog-head{flex:none}#release-dialog .close{min-width:44px;min-height:44px}.release-body{padding:26px;overflow-y:auto;overscroll-behavior:contain;min-height:0}.release-body h2{font-size:27px;margin:7px 0 12px}.release-body p,.release-body li{font-size:13px;color:#bccfe4;line-height:1.8}.release-body h3{font-size:16px;margin-top:20px}.release-body ul{padding-left:21px}.release-cards{display:flex;gap:16px;justify-content:center}.release-cards figure{width:28%;margin:0;min-width:0;text-align:center}.release-cards img{width:80%;aspect-ratio:350/510;object-fit:contain;border-radius:5px;box-shadow:0 8px 18px #0006}.release-cards figcaption{font-size:10px;color:#b7cee7;margin-top:7px;overflow-wrap:anywhere}.release-footer{flex:none;padding:10px 22px 16px;border-top:1px solid #81b6d735;background:#101829}.release-dismiss{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;color:#d4e6f8;cursor:pointer}.release-dismiss input{width:18px;height:18px;min-height:18px;flex:none;margin:0;padding:0;accent-color:#81b6d7}.release-footer>.primary{width:100%;min-height:44px;margin-top:6px;border-radius:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.release-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.release-feature{margin:0;padding:12px;border:1px solid #81b6d74a;border-radius:16px;background:#09142280;display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;min-width:0}.release-feature img{width:92px;aspect-ratio:350/510;object-fit:cover;object-position:top;border-radius:8px;box-shadow:0 9px 22px #0008}.release-feature figcaption{min-width:0}.release-feature b{display:block;margin:5px 0;color:#f4f8ff;font-size:14px;line-height:1.35}.release-feature p{margin:0;font-size:11px;line-height:1.55}.release-audio-path{margin:14px 0;padding:13px 15px;border-radius:14px;border:1px solid #dd9cff5c;background:linear-gradient(120deg,#342349aa,#17253daa)}.release-audio-path b{display:block;margin:4px 0;color:#fff}.release-audio-path p{margin:0}
@media(max-width:1190px){.social-layout{grid-template-columns:210px minmax(250px,1fr) 245px;gap:15px}.lobby-page .topbar{gap:10px;padding:10px 16px}.header-shortcuts button{padding:9px!important;font-size:12px!important}.header-shortcuts button svg{width:19px}.lobby-page .header-right button{font-size:12px;padding:8px 10px}.lobby-page .logo{width:80px}.lobby-page .topbar .language{display:none}.hub-fight{padding:18px 14px}.fight-feature b{font-size:14px}}
@media(max-width:950px){.social-layout{grid-template-columns:210px minmax(0,1fr)}.hub-fight{grid-column:1/-1;display:flex;align-items:center;gap:15px;flex-wrap:wrap}.hub-fight>.eyebrow,.hub-fight>h2,.home-note{display:none}.fight-feature{flex:1.2;min-width:180px;min-height:74px}.fight-link{flex:1;min-width:140px;border:0}.home-welcome{align-items:start}.lobby-page .topbar{gap:8px}.header-shortcuts{order:3;flex-basis:100%;justify-content:center}.header-right{margin-left:auto}.lobby-page .topbar .language{display:flex}.hub-community{height:clamp(460px,calc(100dvh - 270px),680px)}.hub-online{max-height:calc(100dvh - 270px)}}
@media(max-width:600px){.lobby-page .topbar{padding:8px 12px;gap:8px;min-height:0}.lobby-page .logo{width:69px;height:32px}.lobby-page .back{display:none}.lobby-page .header-right button{font-size:11px;padding:7px 8px;min-height:38px;max-width:135px}.lobby-page .topbar .language{display:none}.header-shortcuts{gap:2px;justify-content:space-between}.header-shortcuts button{padding:7px!important;font-size:11px!important;gap:4px;min-height:37px}.header-shortcuts svg{width:17px!important}.lobby-page[data-page=lobby] #content{padding:18px 12px}.home-welcome{gap:10px;flex-wrap:wrap;margin-bottom:16px}.home-welcome .eyebrow{font-size:8px;letter-spacing:1px}.home-welcome h1{font-size:23px}.home-welcome p{font-size:12px}.home-wallet{text-align:left;display:flex;align-items:center;gap:12px}.home-wallet strong{font-size:18px}.home-wallet>span{font-size:10px}.social-layout{grid-template-columns:minmax(0,1fr);gap:14px}.hub-online{max-height:210px;padding:14px;order:2}.hub-community{height:560px;max-height:80dvh;min-height:360px;order:1;border-radius:16px}.hub-fight{order:0;padding:13px;gap:10px;display:grid;grid-template-columns:1fr 1fr}.fight-feature{min-width:0;min-height:74px;padding:9px;gap:6px}.fight-feature>img{width:30px;height:40px}.fight-feature b{font-size:13px}.fight-feature small{font-size:10px}.fight-link{min-width:0;padding:9px 3px;gap:7px}.fight-link>svg:first-child{width:20px}.fight-link b{font-size:12px}.fight-link small{font-size:9px}.fight-link>svg:last-child{display:none}.hub-community>.social-section-title{padding:16px 16px 12px}.chat-channels{padding:0 10px 10px;gap:4px}.chat-channels button{font-size:11px;padding:7px 10px}.dm-selector{padding:8px 12px}.chat-messages{padding:14px}.chat-compose{padding:10px 10px 5px}.chat-input-row{gap:6px}.chat-input-row input{font-size:13px;padding:10px}.release-body{padding:20px}.release-body h2{font-size:23px}.release-feature-grid{gap:8px}.release-feature{display:block;padding:9px}.release-feature img{width:100%;height:150px;aspect-ratio:auto;object-fit:cover}.release-feature b{font-size:12px}.release-feature p{font-size:10px}}
@media(max-width:600px){.header-shortcuts button{flex-direction:column;flex:1;min-width:0;padding:5px 2px!important;font-size:10px!important;gap:3px}.header-shortcuts button span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.header-right #account-button{max-width:120px}.home-wallet{flex-wrap:wrap}}
/* Match modes are the main focus; community stays in the right column. */
@media(min-width:951px){.social-layout{grid-template-columns:220px minmax(280px,1fr) minmax(320px,420px)}.hub-fight{padding:26px;min-height:490px}.hub-fight h2{font-size:24px}.fight-feature{min-height:155px;padding:20px 15px;background:radial-gradient(ellipse at 10% 50%,#8c693c44,transparent 65%),linear-gradient(120deg,#344464,#241f38);gap:16px}.fight-feature>img{width:73px;height:90px}.fight-feature b{font-size:22px}.fight-feature small{font-size:13px}.fight-link{padding:21px 3px}.fight-link b{font-size:16px}.fight-link small{font-size:12px}.home-note{margin-top:20px}.hub-community{height:clamp(460px,calc(100dvh - 250px),760px)}}
@media(min-width:951px) and (max-width:1190px){.social-layout{grid-template-columns:190px minmax(270px,1fr) 320px}.hub-fight{padding:20px}.fight-feature{gap:9px;padding:14px 8px}.fight-feature>img{width:53px;height:74px}.fight-feature b{font-size:18px}.fight-link b{font-size:14px}.fight-link small{font-size:11px}.hub-community>.social-section-title{padding-inline:15px}.chat-messages{padding-inline:15px}.dm-selector{padding-inline:12px}.chat-channels{padding-inline:10px;gap:3px}.chat-channels button{font-size:11px;padding:7px 9px}}
@media(min-width:601px) and (max-width:950px){.social-layout{grid-template-columns:190px minmax(0,1fr)}.hub-fight{grid-column:2;display:block;min-height:430px}.hub-fight>.eyebrow,.hub-fight>h2,.home-note{display:block}.fight-feature{min-height:120px}.fight-feature b{font-size:19px}.fight-link{border-bottom:1px solid #b7d3ef1c}.hub-community{grid-column:1/-1;height:460px}.hub-online{max-height:430px}}
@media(min-width:951px){.hub-fight{padding:22px;min-height:460px}.fight-feature{min-height:135px}.fight-link{padding:14px 3px}.fight-link b{font-size:15px}.fight-link small{font-size:11px}.hub-fight .home-note{display:none}}
.online-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:951px){.hub-fight,.hub-community{height:clamp(480px,calc(100dvh - 250px),650px)}.hub-fight{display:flex;flex-direction:column}.hub-fight>.eyebrow,.hub-fight>h2,.fight-feature{flex:none}.hub-fight .fight-link{flex:1;min-height:60px}}
@media(min-width:951px) and (max-width:1190px){.social-layout{grid-template-columns:220px minmax(270px,1fr) 320px}}

/* Lightweight chat emotes replace uploads. */
#online-refresh[data-wait]:not([data-wait=""]) svg{display:none}#online-refresh[data-wait]:not([data-wait=""])::after{content:attr(data-wait);display:inline-block;width:17px;line-height:17px;font-size:11px;color:#b8d6ee}
.online-tools{display:flex;align-items:center;gap:6px}#online-refresh{padding:5px;border-radius:8px;line-height:0;background:#17334b;border-color:#83b9db44}#online-refresh svg{width:17px;height:17px}.community-live{white-space:nowrap;font-size:9px;letter-spacing:0}

/* Presence, ranked profiles and Discord replace lobby chat. */
.social-tabs{display:flex;gap:5px;margin-bottom:15px}.social-tabs button{flex:1;min-width:0;padding:8px 5px;font-size:11px;min-height:42px;border-color:#81b6d735}.social-tabs button[aria-selected=true]{color:#9bdcff;background:#214a6d;border-color:#81b6d7}.leader-position{font-size:12px;color:#ffdc91;min-width:18px}.hub-discord{padding:24px;background:linear-gradient(145deg,#14253af2,#0b1627f2);border:1px solid #9abfe124;border-radius:20px;box-shadow:0 15px 35px #0003}.hub-discord h2{font-size:22px;margin:9px 0}.hub-discord>p{color:#aebfd5;font-size:13px;line-height:1.8}.hub-discord .community-discord{margin:20px 0 0}.online-fighter img{flex:none}.online-fighter small{display:block;overflow-wrap:anywhere}.hub-online #social-status{margin-bottom:0}
#fighter-public-dialog{width:min(840px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#182c45,#0d182a)}#fighter-public-dialog[open]{display:flex;flex-direction:column}#fighter-public-dialog .dialog-head{flex:none}#fighter-public-dialog .close{min-width:44px;min-height:44px}.public-fighter-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px}.public-fighter-head{display:flex;align-items:center;gap:18px}.public-fighter-head>img{width:76px;height:90px;object-fit:contain}.public-fighter-head h2{margin:0 0 5px;font-size:26px;overflow-wrap:anywhere}.public-fighter-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}.public-fighter-stats>span{background:#91caff0c;border:1px solid #91caff30;border-radius:12px;padding:12px;font-size:11px;color:#b3c9df}.public-fighter-stats b{display:block;color:#edf6ff;font-size:20px;margin-top:5px}.public-deck-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:12px}.public-deck-tabs button{flex:none;max-width:220px;min-height:50px;font-size:12px;white-space:normal;text-align:left}.public-deck-tabs small{display:block;font-size:10px;color:#aebfd5;margin-top:4px}.public-deck-tabs button[aria-pressed=true]{border-color:#81d8ff;background:#245073}.public-deck-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0}.public-deck-head span{min-width:0;overflow-wrap:anywhere}.public-deck-head small{display:block;color:#aebfd5;margin-top:4px}.public-deck-head button{flex:none;min-height:44px;font-size:12px}.public-deck-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 10px}.public-deck-cards figure{min-width:0;margin:0}.public-deck-cards img{width:100%;aspect-ratio:350/510;object-fit:contain;border-radius:7px}.public-deck-cards figcaption{font-size:10px;overflow-wrap:anywhere;line-height:1.5;color:#c7d9e9}.public-deck-cards figcaption b{display:block;font-size:12px;color:#8ad8ff;margin-top:3px}
@media(min-width:951px){.social-layout{grid-template-columns:250px minmax(280px,1fr) minmax(220px,330px)}}
@media(min-width:601px) and (max-width:950px){.hub-discord{grid-column:1/-1}}
@media(max-width:600px){.hub-discord{order:3;padding:18px}.hub-online{max-height:360px}.public-fighter-body{padding:16px}.public-fighter-head>img{width:55px;height:68px}.public-fighter-head h2{font-size:21px}.public-fighter-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.public-deck-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.public-deck-head{align-items:start;flex-direction:column}.public-deck-head button{width:100%}}

.ranked-waiting{width:100%;margin:18px 0;text-align:left;border-top:1px solid #8bcfff30;padding-top:12px}.ranked-waiting h3{font-size:14px;margin:0 0 10px;color:#cce8ff}#ranked-waiting-players{display:grid;gap:8px;max-height:220px;overflow:auto}#ranked-waiting-players>article{display:flex;align-items:center;gap:10px;background:#8bcfff0b;border:1px solid #8bcfff20;border-radius:12px;padding:10px}#ranked-waiting-players img{width:32px;height:40px;object-fit:contain}#ranked-waiting-players span{min-width:0;overflow-wrap:anywhere}#ranked-waiting-players b{font-size:13px}#ranked-waiting-players small{display:block;color:#a8bbd1;font-size:11px;margin-top:4px}#ranked-waiting-players>p{font-size:12px;color:#a8bbd1;margin:0}

#release-dialog .release-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}#release-dialog .release-packs figure{margin:0;min-width:0;text-align:center}#release-dialog .release-packs img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;filter:drop-shadow(0 7px 10px #0006)}#release-dialog .release-packs figcaption{display:grid;gap:5px;margin-top:10px;font-size:12px;color:#c7dcf0;overflow-wrap:anywhere}#release-dialog .release-packs b{color:#f1ce8d;font-size:14px}#release-dialog .release-packs small{color:#8eabc5}@media(max-width:420px){#release-dialog .release-packs{gap:8px}#release-dialog .release-packs figcaption{font-size:10px}#release-dialog .release-packs b{font-size:12px}}


.lobby-page .header-discord{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px;border:1px solid #929fff66;border-radius:10px;background:#5865f226;color:#eef0ff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.lobby-page .header-discord:hover{background:#5865f244}.header-discord:focus-visible{outline:2px solid #bcc3ff;outline-offset:3px}.header-discord svg{width:18px;height:18px;flex:none}
@media(min-width:601px){.social-layout{grid-template-columns:250px minmax(280px,1fr)}}
@media(min-width:601px) and (max-width:950px){.social-layout{grid-template-columns:190px minmax(0,1fr)}}
@media(max-width:600px){.lobby-page .header-right{flex-basis:100%;justify-content:space-between;gap:6px}.lobby-page .header-discord{min-height:38px;padding:7px 8px;font-size:11px;gap:5px}}

/* V0.0.4 announcement: styles stay inside the release dialog. */
#release-dialog{width:min(760px,calc(100vw - 24px))}
#release-dialog .release-intro{margin:0 0 20px;color:#e2eafa}
#release-dialog .release-highlights{display:grid;gap:12px}
#release-dialog .release-highlight{padding:17px 18px;border:1px solid #e6b96877;border-radius:14px;background:linear-gradient(120deg,#61472155,#21304988)}
#release-dialog .release-highlight h3{margin:7px 0 8px;font-size:19px;color:#ffe0a2;line-height:1.5}
#release-dialog .release-highlight p{margin:6px 0;color:#e0e8f3}
#release-dialog .release-highlight small{color:#c6d6e9;line-height:1.7;display:block}
#release-dialog .release-rank{border-color:#64c6d780;background:#153a4655}
#release-dialog .release-rank h3{color:#97e8ee}
#release-dialog .release-section-title{padding-top:18px;border-top:1px solid #8cb3d42b;margin-top:24px}
#release-dialog .release-special{grid-template-columns:repeat(2,minmax(0,1fr))}
#release-dialog .release-decks img{height:190px;aspect-ratio:auto;object-fit:contain}
#release-dialog .release-changes li{margin:8px 0}
@media(max-width:480px){#release-dialog .release-body{padding:18px}#release-dialog .release-body h2{font-size:25px}#release-dialog .release-highlight{padding:13px}#release-dialog .release-highlight h3{font-size:17px}#release-dialog .release-decks img{height:126px}#release-dialog .release-footer{padding:8px 16px 12px}}
@media(max-height:480px){#release-dialog .release-body{padding:16px 22px}#release-dialog .release-footer{padding:4px 16px 8px}#release-dialog .release-dismiss{min-height:32px}}

#release-dialog .release-card-fixes strong{color:#ffe0a2;font-size:14px}
#release-dialog .release-card-fixes li{margin:14px 0}
#release-dialog .release-card-fixes strong,#release-dialog .release-card-fixes small{display:block}#release-dialog .release-card-fixes small{margin:2px 0 4px;color:#8fb4d2;font-size:11px;letter-spacing:.2px}
#release-dialog .release-warning .release-report-instruction{color:#ff9b9b;font-weight:700}
#release-dialog .release-capacity-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;color:#d9e8f6}#release-dialog .release-capacity-table caption{text-align:left;margin-bottom:10px;font-size:12px;color:#a9c5de}#release-dialog .release-capacity-table th,#release-dialog .release-capacity-table td{padding:12px 6px;text-align:center;border:1px solid #8cb3d43b;line-height:1.5}#release-dialog .release-capacity-table th:first-child{width:36%;text-align:left}#release-dialog .release-capacity-table thead{background:#17283c;color:#a7c9e4}#release-dialog .release-capacity-table tbody tr:first-child{background:#16463b55}#release-dialog .release-capacity-table tbody tr:first-child td{color:#a6f4cc;font-weight:700}#release-dialog .release-capacity-table tbody tr:last-child{background:#59372c55}#release-dialog .release-capacity-table tbody tr:last-child td{color:#ffcd9e;font-weight:700}#release-dialog .release-capacity-note{padding:10px 12px;border-left:3px solid #e6b968;background:#493b2455;color:#f0d7a6;font-size:12px}
#release-dialog .release-previous{margin:24px 0 4px;border:1px solid #8cb3d43b;border-radius:10px;padding:0 12px}#release-dialog .release-previous>summary{padding:14px 0;min-height:44px;cursor:pointer;color:#a7dfff;font-size:14px;font-weight:700}#release-dialog .release-previous>.release-category:first-of-type{margin-top:0}
@media(max-width:480px){#release-dialog .release-capacity-table{font-size:12px}#release-dialog .release-capacity-table th,#release-dialog .release-capacity-table td{padding:9px 4px}#release-dialog .release-capacity-table th:first-child{width:35%}#release-dialog .release-warning{padding:12px}#release-dialog .release-warning b{font-size:15px}}

/* V0.0.6 announcement: red bug-report notice. */
#release-dialog .release-warning{margin:0 0 16px;padding:14px 16px;border:1px solid #ff6b6bb3;border-radius:14px;background:linear-gradient(120deg,#6b1d2a99,#3a142099);color:#ffe3e3}#release-dialog .release-warning b{display:block;font-size:16px;color:#ff9b9b}#release-dialog .release-warning p{margin:6px 0 10px;color:#ffe3e3}#release-dialog .release-warning a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:10px;background:#d93a4a;color:#fff;font-weight:700;text-decoration:none}#release-dialog .release-warning a:focus-visible{outline:2px solid #ffd0d0;outline-offset:3px}

/* V0.0.7 announcement: rank emblem row */
#release-dialog .release-rank-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0}#release-dialog .release-rank-row img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 0 8px #ffffff40)}

/* Keep release artwork secondary to each category's text, including on phones. */
#release-dialog .release-body{overflow-x:hidden;overflow-wrap:anywhere}
#release-dialog .release-category{margin:20px 0;padding-top:16px;border-top:1px solid #8cb3d42b;min-width:0}
#release-dialog .release-category h3{margin:0 0 12px;color:#efbea2;font-size:15px}
#release-dialog .release-feature{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;margin:0;padding:12px;min-width:0}
#release-dialog .release-feature>img{display:block;width:80px;height:116px;max-width:100%;object-fit:contain;border-radius:6px}
#release-dialog .release-feature b{font-size:15px;line-height:1.5}
#release-dialog .release-feature p{font-size:13px;line-height:1.7}
#release-dialog .release-changes{margin:0;padding-left:20px}
#release-dialog .release-card-warning{padding:12px;border:1px solid #ff5966;border-radius:8px;background:#4c1725;color:#ff939c;font-size:13px;font-weight:700;line-height:1.7}#release-dialog .release-card-warning a{color:#ffb4ba;text-decoration:underline}#release-dialog .release-howto{padding:8px 10px;background:#17374b;border-left:3px solid #7bc8ff;border-radius:4px;list-style:none;margin-left:-16px;color:#c5eaff}#release-dialog .release-guide{margin-top:12px;font-size:13px}#release-dialog .release-guide summary{cursor:pointer;min-height:40px;padding:8px;color:#9cd9ff}#release-dialog .release-rank-row{gap:4px}#release-dialog .release-rank-row img{width:44px;height:52px}
@media(max-width:480px){#release-dialog .release-feature{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:10px}#release-dialog .release-feature>img{width:64px;height:93px}#release-dialog .release-feature b{font-size:13px}#release-dialog .release-feature p{font-size:12px}}
#ranked-auto-protect{width:20px;height:20px;accent-color:#ff887c;flex:none}.ranked-auto-protect{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:14px}#ranked-star-allowance{font-size:13px;color:#c6deef;overflow-wrap:anywhere}
.online-fighter>img{width:44px;height:54px}.online-name .fighter-list-rank{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;margin:4px 0;font-size:11px;color:#e1d5ad}.fighter-list-rank .rank-stars-row{font-size:11px}.public-fighter-rank{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}.public-fighter-rank .rank-stars-row{font-size:18px}

/* Bugfix2 keeps historical notes collapsed below the current fixes. */
#release-dialog .release-history{margin:24px 0 4px;padding:0 12px;border:1px solid #8cb3d43b;border-radius:10px}
#release-dialog .release-history>summary{min-height:44px;padding:14px 0;cursor:pointer;color:#a7dfff;font-size:14px;font-weight:700}
#release-dialog .release-checked{padding:12px;border-left:3px solid #81b9d8;background:#17374b55;border-radius:6px}

/* --- End: social-hub.css ---
 */

/* --- Begin: stickers.css --- */
.sticker-art{width:100%;height:auto;fill:none;stroke-width:3;overflow:visible}
#sticker-toggle{padding:6px;min-width:36px;border-radius:10px}#sticker-toggle svg{width:24px;height:26px;display:block}
#sticker-palette{position:fixed;right:24px;top:76px;z-index:90;width:min(280px,calc(100vw - 24px));padding:12px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:1px solid #80b5df75;background:#14243af5;border-radius:16px;box-shadow:0 15px 40px #0008;backdrop-filter:blur(12px)}#sticker-palette:not([hidden]){display:grid}#sticker-palette button{padding:5px;background:#8fc5fa08;border-color:#a7cdeb1f;border-radius:12px}#sticker-palette button:hover{background:#8fc5fa25}
#sticker-floats{position:fixed;inset:16% 12% 12%;z-index:85;pointer-events:none;overflow:hidden;contain:layout paint}.match-sticker{position:absolute;width:clamp(85px,10vw,125px);bottom:25%;left:28%;display:flex;align-items:center;flex-direction:column;animation:sticker-float 3.2s both;filter:drop-shadow(0 6px 10px #0009)}.match-sticker.theirs{left:auto;right:22%;bottom:55%}.match-sticker>span{font-size:11px;color:white;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#172b48db;padding:3px 9px;border-radius:10px;border:1px solid #77c3ec55;max-width:100%}
@keyframes sticker-float{0%{opacity:0;transform:translateY(25px) scale(.4) rotate(-12deg)}12%{opacity:1;transform:translateY(0) scale(1.1) rotate(5deg)}25%{transform:translateY(-5px) scale(1) rotate(-3deg)}78%{opacity:1;transform:translateY(-36px) rotate(3deg)}100%{opacity:0;transform:translateY(-75px) scale(.85)}}
@media(max-width:600px){#sticker-palette{right:12px;top:64px}#sticker-floats{inset:15% 5% 12%}.match-sticker{width:90px;left:18%}.match-sticker.theirs{right:16%}}
@media(prefers-reduced-motion:reduce){.match-sticker{animation:none;opacity:1}}

/* The head pack stays inside the existing palette and transient layer. */
img.sticker-art{display:block;aspect-ratio:1;object-fit:contain;overflow:hidden}
#sticker-palette{grid-template-columns:repeat(4,minmax(0,1fr));max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
#sticker-palette button{aspect-ratio:1;min-width:0}

/* --- End: stickers.css ---
 */

/* --- Begin: ranked-restrictions.css --- */
.ranked-restrictions{border-left:3px solid #f27676;padding:10px 14px;background:#391d2a;color:#ffced2;overflow-wrap:anywhere}
.ranked-restrictions ul{padding-left:20px;margin:8px 0}
.ranked-restrictions li+li{margin-top:5px}
.ranked-restrictions.valid{border-color:#65d4ae;background:#13312e;color:#a4f1d8}
.builder-card.ranked-restricted{outline:2px solid #ff7979;outline-offset:-2px}
.ranked-card-warning{display:block;color:#ffb4b4;font-size:11px;padding:3px 5px;background:#3b1b27}
.ranked-page .ranked-restrictions{text-align:left;max-width:640px;margin:14px auto}
.banlist-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto!important;min-height:42px;padding:10px 18px!important;margin:8px 6px 12px 0;border:1px solid #ff7b87!important;border-radius:9px;background:linear-gradient(135deg,#b6203a,#68182e)!important;color:#fff!important;font-weight:800;box-shadow:0 0 16px #f33d552c;cursor:pointer}
.banlist-button:hover,.banlist-button:focus-visible{background:#d72f49!important;outline:2px solid #ffb7c0;outline-offset:3px}
#banlist-dialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #ef536c;border-radius:14px;background:#111925;color:#edf3ff;overflow:hidden}
#banlist-dialog::backdrop{background:#030711cc}
#banlist-dialog .dialog-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#4b1527;border-bottom:1px solid #a83750}
#banlist-dialog h2{margin:0;color:#ffb9c4}
#banlist-dialog .close{min-width:40px;min-height:40px}
.banlist-body{padding:6px 20px 20px;max-height:calc(100dvh - 118px);overflow:auto;overflow-wrap:anywhere;line-height:1.65}
.banlist-body h3{color:#ff8c9c;margin:18px 0 6px}.banlist-body ul{padding-left:20px}.banlist-body li+li{margin-top:10px}

/* --- End: ranked-restrictions.css ---
 */

/* --- Begin: rank-stars.css --- */
/* Star ranks (2026-10-15): emblem card, division numeral, SVG star slots and win/loss animations. */
.rank-stars-row{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.rank-star{width:1.15em;height:1.15em;overflow:visible}
.rank-star path{stroke-width:1.4;stroke-linejoin:round}
.rank-star.on path{fill:#ffcf3f;stroke:#8a5a00;filter:drop-shadow(0 0 3px #ffbf2a99)}
.rank-star.off path{fill:#0c1426;stroke:#5f6f92;stroke-dasharray:2.4 1.6}
.rank-stars-row.legend b{margin-left:4px;color:#ffd75e;font-size:.95em}
.rank-card{display:grid;justify-items:center;gap:4px;text-align:center}
.rank-card{--glow:#ffffff33;--glow-r:4px;--float:2px;--float-dur:4.6s;--glow-dur:3.4s}
/* Idle life: a gentle float and a breathing glow that grow with the tier (owner request 2026-10-15). */
.rank-bronze{--glow:#e2a27a66;--glow-r:3px;--float:1.5px}
.rank-silver{--glow:#dbe8f599;--glow-r:6px;--float:2px}
.rank-gold{--glow:#ffd366b0;--glow-r:9px;--float:2.5px;--glow-dur:3s}
.rank-platinum{--glow:#67e7ddbb;--glow-r:12px;--float:3px;--glow-dur:2.8s}
.rank-diamond{--glow:#9fb8ffd0;--glow-r:15px;--float:3.5px;--glow-dur:2.5s}
.rank-legend{--glow:#ff8fb0e6;--glow-r:20px;--float:4px;--glow-dur:2.2s;--float-dur:4s}
.rank-card .rank-emblem{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 0 var(--glow-r) var(--glow)) drop-shadow(0 6px 14px #0008);
  animation:rank-float var(--float-dur) ease-in-out infinite,rank-glow var(--glow-dur) ease-in-out infinite}
.rank-card{position:relative}
.rank-legend .rank-emblem{animation:rank-float var(--float-dur) ease-in-out infinite,rank-glow var(--glow-dur) ease-in-out infinite,rank-hue 6s ease-in-out infinite}
@keyframes rank-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(var(--float) * -1)) rotate(.6deg)}}
@keyframes rank-glow{0%,100%{filter:drop-shadow(0 0 var(--glow-r) var(--glow)) drop-shadow(0 6px 14px #0008)}50%{filter:drop-shadow(0 0 calc(var(--glow-r) * 1.9) var(--glow)) drop-shadow(0 6px 14px #0008) brightness(1.08)}}
@keyframes rank-hue{0%,100%{filter:drop-shadow(0 0 var(--glow-r) var(--glow)) drop-shadow(0 6px 14px #0008)}50%{filter:drop-shadow(0 0 calc(var(--glow-r) * 2) #ffd27a) drop-shadow(0 6px 14px #0008) brightness(1.12) saturate(1.15)}}
/* small badges (lobby tile, match header): static glow by tier colour */
.match-rank img{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rank-color) 55%,transparent))}
.rank-card-name{font-weight:800;letter-spacing:.04em;font-size:18px}
.rank-card .rank-division{display:inline-block;min-width:1.6em;padding:0 6px;border-radius:6px;background:#ffffff14;border:1px solid #ffffff33;color:#ffe9a8;font-size:.95em}
.rank-card .rank-stars-row{font-size:22px;gap:5px}
.rank-card-note{margin:6px 0 0;font-size:12px;color:#c7d3ea}
.rank-bronze .rank-tier{color:#e2a27a}.rank-silver .rank-tier{color:#d9e6f2}.rank-gold .rank-tier{color:#ffd366}
.rank-platinum .rank-tier{color:#67e7dd}.rank-diamond .rank-tier{color:#9fb8ff}.rank-legend .rank-tier{color:#ff9ab3}
/* Animations: a gained star pops in with a ring; a lost star shakes and breaks; division changes flip the emblem. */
.rank-star.gain{animation:rank-star-gain .6s cubic-bezier(.2,.9,.3,1.3) both}
.rank-star.gain path{filter:drop-shadow(0 0 8px #ffd54a)}
.rank-star.lose{animation:rank-star-lose .52s ease-in both}
.rank-promote .rank-emblem{animation:rank-promote .8s cubic-bezier(.2,.8,.3,1) both}
.rank-demote .rank-emblem{animation:rank-demote .7s ease-out both}
@keyframes rank-star-gain{0%{transform:scale(0) rotate(-120deg);opacity:0}60%{transform:scale(1.45) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes rank-star-lose{0%{transform:translateX(0)}20%{transform:translateX(-3px) rotate(-8deg)}40%{transform:translateX(3px) rotate(8deg)}60%{transform:scale(1.1);opacity:1}100%{transform:scale(.4) translateY(8px) rotate(25deg);opacity:0;filter:grayscale(1)}}
@keyframes rank-promote{0%{transform:scale(.6) rotateY(90deg);filter:brightness(2.4) drop-shadow(0 0 22px #fff)}100%{transform:scale(1) rotateY(0)}}
@keyframes rank-demote{0%{transform:translateY(-10px) scale(1.05);filter:brightness(.5) grayscale(.6)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.rank-card .rank-emblem,.rank-legend .rank-emblem{animation:none}.rank-star.gain,.rank-star.lose,.rank-promote .rank-emblem,.rank-demote .rank-emblem{animation:none}}
/* Ranked result panel */
.rank-result{margin:10px auto 6px;min-height:178px}

/* Star rows sit inside other components whose span rules stack children (e.g. .fight-feature span): keep them one row. */
span.rank-stars-row,.fight-feature span.rank-stars-row,.fight-link span.rank-stars-row{display:inline-flex!important;flex-direction:row!important;flex:none!important;align-items:center;gap:2px;width:auto;min-width:0}
.fight-feature small .rank-stars-row{font-size:12px;margin-left:4px;vertical-align:-2px}
.fight-feature small{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.rank-celestial{--glow:#ffe076e6;--glow-r:22px;--float:4px;--glow-dur:2.2s}.rank-celestial .rank-tier{color:#ffe076}.rank-showcase{grid-template-columns:repeat(7,minmax(0,1fr))}@media(max-width:760px){.rank-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}}
.profile-rank-guide{margin-top:28px}.profile-rank-guide .rank-showcase{gap:10px}.rank-showcase .rank-guide-card{min-width:0;margin:0;padding:14px 6px;background:#ffffff05;border:1px solid #b7d7ff26;border-radius:12px;text-align:center}.rank-guide-card img{display:block;width:100%;height:110px;object-fit:contain;margin:0 auto 10px}.rank-guide-card figcaption b,.rank-guide-card figcaption span,.rank-guide-card figcaption small{display:block}.rank-guide-card figcaption b{font-size:13px}.rank-guide-card figcaption span{margin:7px 0 3px;color:#f4e4b6;font-size:12px}.rank-guide-card figcaption small{color:#adc3d9;font-size:11px;line-height:1.5}

/* --- End: rank-stars.css ---
 */

/* --- Begin: rank-result.css --- */
#rank-result-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
#rank-result-dialog::backdrop{background:radial-gradient(circle at 50% 44%,#102e50e8,#020711f7 68%);backdrop-filter:blur(7px)}
.rank-result-card{--rank-glow:#d89b69;position:relative;display:grid;place-items:center;align-content:center;width:100%;height:100%;box-sizing:border-box;padding:22px;text-align:center;isolation:isolate}
.rank-result-emblem::before{content:"";position:absolute;left:50%;top:50%;width:min(70vw,640px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--rank-glow) 0,transparent 64%);opacity:.12;filter:blur(18px);z-index:-2;transform:translate(-50%,-50%) scale(.45)}
.rank-result-rays{position:absolute;left:50%;top:50%;width:min(82vw,760px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--rank-glow) 0 1deg,transparent 1deg 13deg);mask:radial-gradient(circle,transparent 0 31%,#000 52%,transparent 74%);opacity:0;z-index:-1;transform:translate(-50%,-50%)}
.rank-result-kicker{margin:0 0 2px;color:#d7e9ff;font-size:12px;font-weight:900;letter-spacing:.35em;opacity:0}
.rank-result-emblem{position:relative;width:min(42vw,300px);aspect-ratio:1;display:grid;place-items:center;margin:0 0 -5px;isolation:isolate}
.rank-sprite{position:relative;display:block;overflow:hidden;isolation:isolate}.rank-sprite>img{position:absolute;z-index:1;display:block;max-width:none;width:var(--rank-sheet-width);height:auto;left:var(--rank-sheet-left);top:var(--rank-sheet-top)}
.rank-emblem-complete{position:absolute;left:50%;top:50%;height:100%;width:auto;aspect-ratio:var(--rank-aspect);opacity:0;transform:translate(-50%,-50%) scale(.25);filter:drop-shadow(0 0 20px color-mix(in srgb,var(--rank-glow) 70%,transparent))}
.rank-impact-ring{position:absolute;width:76%;aspect-ratio:1;border:3px solid var(--rank-glow);border-radius:50%;opacity:0;box-shadow:0 0 18px var(--rank-glow),inset 0 0 18px var(--rank-glow)}
.rank-result-title{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;opacity:0;transform:translateY(8px)}
.rank-result-name{font-family:Georgia,serif;font-size:clamp(22px,4vw,34px);letter-spacing:.11em;color:#fff;text-shadow:0 0 20px var(--rank-glow)}
.rank-result-division{display:grid;place-items:center;width:38px;height:38px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(145deg,#fff,var(--rank-glow) 26%,#102039 68%,var(--rank-glow));font:900 17px Georgia,serif;text-shadow:0 1px 4px #000;filter:drop-shadow(0 0 8px var(--rank-glow))}
.rank-result-division[hidden]{display:none}
.rank-star-track{display:flex;justify-content:center;gap:10px;margin:10px 0 3px;opacity:0;transform:translateY(12px)}
 .rank-star-slot{position:relative;display:grid;place-items:center;width:50px;height:50px;filter:drop-shadow(0 3px 4px #0009)}
.rank-star-slot svg{display:block;width:100%;height:100%;overflow:visible}
.rank-star-slot path{fill:#172338;stroke:#687a95;stroke-width:1.25;stroke-linejoin:round}
.rank-star-slot.is-filled path{fill:#ffd42a;stroke:#fff4a3;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #ffc400) drop-shadow(0 0 17px #ff8a00)}
.rank-star-slot.is-new{animation:rank-new-star .75s cubic-bezier(.15,.85,.2,1.2) both}
.rank-result-progress{margin:3px 0 14px;color:#dce9ff;font-size:14px;font-weight:800;letter-spacing:.18em;opacity:0}
.rank-result-card button{min-width:150px;min-height:46px;border:1px solid color-mix(in srgb,var(--rank-glow) 70%,white)!important;border-radius:12px!important;background:#102039dd!important;color:#fff!important;font-weight:800;opacity:0;transform:translateY(10px)}
.rank-result-particles{position:absolute;left:50%;top:50%;width:1px;height:1px;z-index:-1}.rank-result-particles i{--a:0deg;--r:90px;--d:0s;position:absolute;width:7px;height:7px;background:#fff;border-radius:50%;box-shadow:0 0 8px 2px var(--rank-glow);opacity:0;transform:rotate(var(--a)) translateX(0) scale(.2);animation-delay:var(--d)}
.rank-result-enter .rank-result-emblem::before{animation:rank-aura-in .7s ease-out forwards}.rank-result-enter .rank-result-rays{animation:rank-rays 10s linear .18s infinite}.rank-result-enter .rank-result-kicker{animation:rank-copy-in .3s ease-out .12s forwards}.rank-result-enter .rank-emblem-complete{animation:rank-badge-in .7s cubic-bezier(.2,.9,.15,1.15) .08s forwards}.rank-result-enter .rank-impact-ring{animation:rank-ring .6s ease-out .56s forwards}.rank-result-enter .rank-result-title,.rank-result-enter .rank-star-track,.rank-result-enter .rank-result-progress{animation:rank-copy-in .35s ease-out .72s forwards}.rank-result-enter .rank-result-card button{animation:rank-copy-in .35s ease-out 1.25s forwards}.rank-result-enter .rank-result-particles i{animation:rank-particle 1.15s ease-out .55s forwards}
.rank-star-land .rank-star-track{filter:drop-shadow(0 0 10px var(--rank-glow))}.rank-promoted .rank-emblem-complete{animation:rank-fx-promote .85s cubic-bezier(.15,.9,.2,1) .02s forwards}.rank-promoted .rank-result-rays{opacity:.26;animation-duration:4s}
.rank-tier-silver .rank-result-card{--rank-glow:#b9d7ef}.rank-tier-gold .rank-result-card{--rank-glow:#ffbd32}.rank-tier-platinum .rank-result-card{--rank-glow:#2cf4ff}.rank-tier-diamond .rank-result-card{--rank-glow:#6576ff}.rank-tier-legend .rank-result-card{--rank-glow:#ff3fc4}.rank-tier-celestial .rank-result-card{--rank-glow:#ffe076}
.rank-tier-bronze .rank-result-rays,.rank-tier-silver .rank-result-rays{display:none}.rank-tier-bronze .rank-result-particles i{width:5px;height:5px}.rank-tier-silver .rank-result-particles i{width:6px;height:6px}.rank-tier-gold .rank-result-rays{opacity:.08}.rank-tier-platinum .rank-result-rays{opacity:.12}.rank-tier-diamond .rank-result-rays,.rank-tier-legend .rank-result-rays,.rank-tier-celestial .rank-result-rays{opacity:.18}
@keyframes rank-aura-in{to{opacity:.28;transform:translate(-50%,-50%) scale(1)}}@keyframes rank-copy-in{to{opacity:1;transform:none}}@keyframes rank-rays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rank-badge-in{70%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes rank-ring{35%{opacity:1}to{opacity:0;transform:scale(1.6)}}
@keyframes rank-particle{35%{opacity:1}to{opacity:0;transform:rotate(var(--a)) translateX(var(--r)) scale(1)}}@keyframes rank-new-star{0%{opacity:0;transform:translateY(-34vh) rotate(55deg) scale(2.2)}65%{opacity:1;transform:translateY(5px) rotate(-4deg) scale(1.2)}to{opacity:1;transform:none}}@keyframes rank-fx-promote{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-9deg);filter:brightness(3)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.16);filter:brightness(2.2) drop-shadow(0 0 48px var(--rank-glow))}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 22px var(--rank-glow))}}
@media(max-width:600px){.rank-result-emblem{width:min(66vw,270px)}.rank-result-card{padding:16px}.rank-star-slot{width:45px;height:45px}.rank-result-card button{width:min(80vw,280px)}}
@media(prefers-reduced-motion:reduce){.rank-result-emblem::before,.rank-result-rays,.rank-emblem-complete,.rank-impact-ring,.rank-result-particles i,.rank-result-card button,.rank-result-title,.rank-star-track,.rank-result-progress,.rank-result-kicker{animation:none!important;transition:none!important}.rank-emblem-complete{opacity:1;transform:translate(-50%,-50%)}.rank-result-card button,.rank-result-title,.rank-star-track,.rank-result-progress,.rank-result-kicker{opacity:1;transform:none}.rank-result-particles,.rank-result-rays{display:none}}
@media(prefers-reduced-motion:reduce){.rank-star-slot.is-new{animation:none!important}}

/* --- End: rank-result.css ---
 */

/* --- Begin: match-ui.css --- */
.match-rank{display:inline-flex;align-items:center;gap:6px;color:var(--rank-color);font-size:12px;line-height:1.25;min-width:0}.match-rank img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--rank-color) 35%,transparent))}.match-rank small{font-size:10px;color:#b9cce3;margin-left:5px}.battle-player .match-rank{margin:3px 0}.battle-player .match-rank img{width:23px;height:23px}.match-versus[open]{position:fixed;inset:0;transform:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(16px,4vw,48px);border:0;border-radius:0;color:#f1f7ff;background:radial-gradient(ellipse at 20% 50%,#17416d88,transparent 55%),radial-gradient(ellipse at 80% 50%,#79282f77,transparent 55%),#091322;overflow:auto;font-family:'Chakra Petch',sans-serif}.match-versus::backdrop{background:#091322}.match-versus header{text-align:center}.match-versus header>span{font-size:12px;letter-spacing:.22em;color:#abc6e4}.match-versus h1{font-size:clamp(22px,3vw,34px);margin:10px 0}.versus-fighters{display:grid;grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);align-items:center;max-width:1000px;width:100%;margin:auto;gap:20px}.versus-fighter{text-align:center;min-width:0;animation:versus-enter .6s ease both}.versus-enemy{animation-delay:.15s}.versus-fighter>small{display:block;color:#80cbff;font-size:12px;letter-spacing:.12em;margin-top:10px}.versus-enemy>small{color:#ff9b9d}.versus-fighter h2{font-size:clamp(19px,2.5vw,30px);overflow-wrap:anywhere;margin:8px 0}.versus-art{display:flex;align-items:center;justify-content:center;min-height:0;height:clamp(120px,32dvh,300px);perspective:700px}.versus-art img{display:block;width:auto;height:100%;max-height:100%;min-height:0;max-width:90%;object-fit:contain;border-radius:8px;transform:rotateY(10deg) rotate(-5deg);filter:drop-shadow(0 0 20px #57b6ff66)}.versus-enemy .versus-art img{transform:rotateY(-10deg) rotate(5deg);filter:drop-shadow(0 0 20px #ff687c66)}.versus-art>span{font-size:100px;color:#82c8ff}.versus-fighter .match-rank{font-size:16px}.versus-fighter .match-rank img{width:46px;height:46px}.versus-fighter p{color:#aac4dc;font-size:14px;line-height:1.6;margin:8px 0}.versus-stats{font-size:12px;color:#8eaac6}.versus-mark{font-size:clamp(44px,7vw,80px);font-style:italic;text-align:center;color:#e4c288;text-shadow:0 0 30px #ffc17a55}.match-versus footer{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:16px;color:#a6bfd6;font-size:13px}.match-versus footer button{border:1px solid #89ceff;background:#173657;color:#e2f4ff;border-radius:8px;padding:12px 24px;min-height:44px}.match-bot{color:#efaa80}
@keyframes versus-enter{from{transform:translateY(20px)}to{transform:none}}
@media(max-width:600px){.match-versus[open]{padding:18px 12px}.versus-fighters{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:6px}.versus-art{height:24dvh}.versus-fighter .match-rank{font-size:12px;gap:3px}.versus-fighter .match-rank img{width:30px;height:30px}.versus-fighter .match-rank small{display:block;margin-left:0}.versus-fighter p{font-size:11px}.versus-stats{font-size:10px}.match-versus footer{flex-direction:column;gap:8px}.battle-player .match-rank{font-size:10px}.battle-player .match-rank img{width:20px;height:20px}}
@media(max-height:500px) and (orientation:landscape){.match-versus[open]{padding:10px 24px}.match-versus h1{font-size:18px;margin:3px 0}.versus-art{height:110px}.versus-fighter h2{font-size:18px;margin:3px 0}.versus-fighter>small,.versus-stats{display:none}.versus-fighter .match-rank img{width:28px;height:28px}.versus-fighter p{font-size:11px;margin:3px}.match-versus footer{margin-top:4px}.match-versus footer button{padding:7px 16px}}
@media(prefers-reduced-motion:reduce){.versus-fighter{animation:none}.versus-art img{transform:none}}
/* Static server leader medals stay beside their owner's name. */
.fighter-name-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}.fighter-name-line>h1,.fighter-name-line>h2{margin:0;min-width:0;overflow-wrap:anywhere}.versus-fighter .fighter-name-line{justify-content:center;margin:8px 0}
.server-top-tag{--top-color:#ffe398;--top-dark:#715021;display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 9px;max-width:100%;border:1px solid var(--top-color);border-radius:8px;background:linear-gradient(125deg,#111624 0%,var(--top-dark) 38%,#273348 48%,#121927 65%);color:var(--top-color);box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 0 #0008,0 2px 7px #0006;vertical-align:middle;white-space:nowrap;font:700 11px 'Chakra Petch',sans-serif;line-height:1.2}
.server-top-tag svg{width:25px;height:25px;fill:var(--top-dark);stroke:var(--top-color);stroke-width:1.5}.server-top-tag b{color:var(--top-color)!important;font-size:inherit!important;display:inline!important}.server-top-tag small{font-size:8px!important;letter-spacing:.08em;color:var(--top-color)!important;display:inline!important}
.server-top-tag[data-top="1"]{border-width:2px;box-shadow:inset 0 1px 0 #fff9,0 0 9px #f6c55b30,0 3px 8px #0006}.server-top-tag[data-top="2"]{--top-color:#dceaff;--top-dark:#516477}.server-top-tag[data-top="3"]{--top-color:#ffd0ab;--top-dark:#77472a}.server-top-tag[data-top="4"]{--top-color:#9eecff;--top-dark:#1c556c}.server-top-tag[data-top="5"]{--top-color:#d9beff;--top-dark:#4b2d73}
.battle-fighter-name{gap:4px}.battle-fighter-name>strong{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis}.battle-fighter-clan{display:block;font-size:10px;color:#c2cde1}.battle-player .server-top-tag{padding:2px 4px;font-size:9px;border-width:1px}.battle-player .server-top-tag svg{width:16px;height:16px}.battle-player .server-top-tag small{font-size:6px!important}
@media(max-width:600px){.battle-fighter-name>strong{font-size:10px}.battle-fighter-clan{font-size:8px}.versus-fighter .server-top-tag{padding:3px 5px;font-size:9px}.versus-fighter .server-top-tag svg{width:18px;height:18px}.versus-fighter .server-top-tag small{font-size:6px!important}}
.versus-load{position:relative;height:18px;max-width:260px;margin:8px auto 0;border:1px solid #2d5b86;border-radius:9px;background:#0c1d33;overflow:hidden}.versus-load i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2f7fd0,#6cc7ff);transition:width .3s ease}.versus-enemy .versus-load i{background:linear-gradient(90deg,#b5414f,#ff8a8f)}.versus-load.done i{background:linear-gradient(90deg,#3aa86b,#7fe0a6)}.versus-load span{position:relative;display:block;font-size:11px;line-height:16px;color:#f1f7ff;letter-spacing:.05em}
#match-chat{position:fixed;right:12px;top:56px;z-index:40;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-family:inherit}.fight-header .chat-toggle{position:relative;border:1px solid #3c6a96;background:#12263fcc;color:#e2f4ff;border-radius:18px;padding:6px 14px;min-height:36px}.chat-toggle .chat-unread{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:#e4525e;color:#fff;font-size:11px;line-height:18px;text-align:center;padding:0 4px}#match-chat .chat-panel{width:min(300px,calc(100vw - 24px));background:#0d1b2ef2;border:1px solid #2d5b86;border-radius:10px;padding:8px;color:#dbe9f7;box-shadow:0 8px 24px #0008}#match-chat header{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#9fbad5;margin-bottom:6px}#match-chat .chat-list{list-style:none;margin:0;padding:0;max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}#match-chat .chat-list li{max-width:85%;padding:5px 9px;border-radius:10px;font-size:13px;line-height:1.35;overflow-wrap:anywhere}#match-chat .chat-list li.mine{align-self:flex-end;background:#1f4f80}#match-chat .chat-list li.theirs{align-self:flex-start;background:#3a2430}#match-chat .chat-form{display:flex;gap:6px;margin-top:6px}#match-chat .chat-input{flex:1;min-width:0;border:1px solid #2d5b86;background:#08121f;color:#e2f4ff;border-radius:6px;padding:6px 8px;font-size:14px}#match-chat .chat-form button{border:1px solid #89ceff;background:#173657;color:#e2f4ff;border-radius:6px;padding:6px 10px}#match-chat .chat-note{margin:6px 0 0;font-size:11px;color:#7f9bb8}body.spectator #match-chat{display:none}

#match-chat[hidden]{display:none}.fight-header .chat-toggle{flex:none;white-space:nowrap}.chat-toggle .chat-unread[hidden]{display:none}#match-chat .chat-panel{max-height:min(calc(100dvh - 80px),var(--chat-space,calc(100dvh - 80px)));overflow:auto}#match-chat .chat-close{min-width:30px;min-height:30px;padding:2px 6px;border:0;background:transparent;color:inherit;font-size:22px}body.spectator .chat-toggle{display:none}
/* Measured against the actual hand and controls, including mobile layout changes. */
.setup-layer .mulligan-note{position:fixed;bottom:auto;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;visibility:hidden;pointer-events:none}
/* V0.0.9: a visible toolbar entry and a short, non-interactive message preview. */
.fight-header button.chat-toggle{order:-1;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:13px;min-width:68px;min-height:40px;padding:6px 10px;border:1px solid #73bffc;background:#173d63;color:#f2f9ff;font-weight:800;border-radius:10px}
.fight-header button.chat-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.fight-header button.chat-toggle.has-unread{border-color:#ff7c82;background:#542735}
#match-chat-notice{position:fixed;z-index:39;top:56px;right:12px;width:max-content;max-width:min(280px,calc(100vw - 24px));box-sizing:border-box;padding:8px 12px;border:1px solid #ff8a8e;border-radius:12px 12px 4px 12px;background:#281e2df2;color:#fff;box-shadow:0 5px 16px #0005;pointer-events:none;animation:chat-notice-float 3.2s ease both;font-size:13px;line-height:1.4}
#match-chat-notice strong{display:block;color:#ffb1b4;font-size:10px;margin-bottom:2px}
#match-chat-notice span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;white-space:normal}
#match-chat-notice.mine{border-color:#80c9ff;background:#142b43f2}#match-chat-notice.mine strong{color:#a6dbff}
#match-chat-notice[hidden],body.spectator #match-chat-notice{display:none}
@keyframes chat-notice-float{0%{opacity:0;transform:translateY(7px)}10%,82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){#match-chat-notice{animation:none}}

.fight-header button.chat-toggle .chat-unread{top:3px;right:3px;min-width:16px;height:16px;line-height:16px;padding:0 3px}

/* --- End: match-ui.css ---
 */

/* --- Begin: play.css --- */
/* Complete VM release 2026-10-14. */
.fight-page{height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 20%,#302d33,#111218 80%)}.fight-header{height:48px;display:flex;align-items:center;gap:8px;padding:6px max(12px,env(safe-area-inset-left));background:#14151c;border-bottom:1px solid #3c3841}.fight-header img{width:72px;height:32px;object-fit:contain}.fight-header button{font-size:11px;padding:5px 9px}.fight-header button svg{height:17px;width:17px}.fight-header #room-label{font-size:10px;color:#b7aeba}.fight-header #phases{display:flex;gap:3px;flex:1;justify-content:center}.phase{font-size:10px;color:#aaa1ad;padding:4px 9px;border-radius:12px}.phase.current{background:#e78172;color:#221e24;font-weight:800}.fight-table{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:none;height:calc(100dvh - 48px);padding:0;overflow:hidden}.fight-table #status{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:11px;z-index:5;background:#14151ce8;color:#e9d7d3;padding:4px 14px;border-radius:20px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}#server-wait{position:absolute;left:50%;top:42px;z-index:45;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid #79cfff;background:#071725e8;color:#dff6ff;border-radius:18px;box-shadow:0 0 18px #52bfff40;font-size:11px;font-weight:700;pointer-events:none}#server-wait[hidden]{display:none}#server-wait span{width:9px;height:9px;border:2px solid #9ee8ff;border-right-color:transparent;border-radius:50%;animation:server-wait-spin .65s linear infinite}@keyframes server-wait-spin{to{transform:rotate(360deg)}}.board-window{height:calc(100% - 142px);width:100%;overflow:auto;scrollbar-width:none;position:relative;display:flex;justify-content:center}.fight-board{width:min(calc(100dvh - 192px),94vw);flex:none;position:relative;margin:0 auto;align-self:flex-start;box-shadow:0 24px 90px #000c;border-radius:6px;overflow:hidden}.board-half{position:relative;aspect-ratio:2000/1018;background-image:url('/vanguard/board/assets/playmat.png');background-size:100% 100%;isolation:isolate}.board-half.opponent{transform:rotate(180deg)}.unit-slot{position:absolute;width:11.8%;aspect-ratio:350/510;border:0;background:none!important;padding:0;transform:translate(-50%,-50%);border-radius:8px;z-index:2;outline:0 solid transparent;transition:outline .2s}.unit-slot:hover,.unit-slot:active{transform:translate(-50%,-50%)}.unit-slot img{width:100%;height:100%;object-fit:contain;display:block;border-radius:4px;filter:drop-shadow(0 3px 3px #000c);transition:transform .25s}.unit-slot.rest img{transform:rotate(90deg)}.unit-slot .unit-stat{position:absolute;bottom:-6%;left:-10%;width:120%;padding:1px 0;font-size:clamp(8px,1vw,12px);font-weight:800;white-space:nowrap;border-radius:5px;background:#17151ce8;color:#eee;text-align:center;line-height:1.3}.opponent .unit-stat,.opponent .pile-caption,.opponent .nameplate,.opponent .gift-badge{transform:rotate(180deg)}.unit-slot .rest-tag{position:absolute;top:40%;left:-7%;width:114%;background:#793c3bef;font-size:9px;color:#fff;border-radius:4px}.opponent .rest-tag{transform:rotate(180deg)}.unit-slot.targetable{outline:3px solid #efc482;box-shadow:0 0 12px #ffc67660;animation:target-breathe 1.5s infinite}.unit-slot.chosen-target{outline:4px solid #fff;box-shadow:0 0 15px #ffc676a0}.unit-slot.empty.targetable{background:#efc48230!important}.gift-badge{position:absolute;left:-13%;top:-12%;background:#c4a06b;color:#211c22;padding:2px 5px;border:1px solid #ffdfaa;border-radius:50%;font-size:9px;font-weight:800}.pile{position:absolute;width:10.1%;aspect-ratio:350/510;border:0;padding:0;background:#17141c;border-radius:5px;transform:translate(-50%,-50%);box-shadow:2px 2px 0 #94909b,4px 4px 0 #35303a,6px 6px 0 #938793,8px 8px 12px #0007}.pile:hover,.pile:active{transform:translate(-50%,-50%)}.pile img{width:100%;height:100%;object-fit:contain;border-radius:4px;display:block}.pile-caption{position:absolute;left:-8%;bottom:-9%;width:116%;border-radius:6px;background:#131019ef;color:#fff;font-size:clamp(8px,1vw,12px);font-weight:700;line-height:1.5}.pile.draw-ready{outline:3px solid #f0c184;box-shadow:0 0 22px #f0bd7380,6px 6px 0 #7d7278;animation:draw-breathe 1.6s infinite;cursor:grab}.pile.draw-ready::after{content:'หยิบการ์ด';position:absolute;left:-45%;top:-28%;width:190%;background:#e2bd80;color:#251c1f;border-radius:20px;font-size:11px;font-weight:700;padding:3px;pointer-events:none}.pile.draw-ready:active{cursor:grabbing}.damage-stack{position:absolute;left:5.4%;top:46.5%;width:15.3%;height:49%;display:flex;flex-direction:column;align-items:center}.damage-card{position:relative;width:78%;height:16%;padding:0;border:0;border-radius:3px;background:none;flex:none}.damage-card img{position:absolute;left:0;top:0;width:100%;height:280%;object-fit:cover;object-position:top;border-radius:4px;box-shadow:0 1px 4px #000c;pointer-events:none}.damage-card .spent{position:absolute;left:3%;top:0;color:white;font-size:9px;background:#222b;border-radius:3px}.damage-card:hover,.damage-card:active{transform:none;z-index:3}.nameplate{position:absolute;left:21%;top:5%;font-size:10px;padding:2px 5px;border-radius:5px;color:#e5d6d9;background:#131019c9;z-index:4}.opponent-hand{position:absolute;top:16px;right:18px;display:flex;z-index:4;pointer-events:none;max-width:22vw;overflow:hidden}.opponent-hand img{height:40px;width:auto;margin-left:-14px;transform:rotate(4deg);filter:drop-shadow(0 2px 2px #000a)}.opponent-hand span{font-size:10px;background:#211b26;padding:3px 8px;align-self:center;z-index:2;border-radius:7px}.hand-fan{position:relative;width:100%;height:115px;flex:none;margin-top:8px;display:flex;justify-content:center;align-items:flex-end;perspective:1100px;isolation:isolate;overflow:visible;z-index:7;touch-action:none}.hand-card{position:absolute;bottom:-22px;width:100px;aspect-ratio:350/510;padding:0;border:0;background:none!important;border-radius:7px;transform-origin:50% 120%;transform:translateX(var(--x)) rotate(var(--angle));filter:drop-shadow(0 6px 7px #0009);transition:transform .18s;touch-action:none;cursor:grab}.hand-card img{width:100%;height:100%;object-fit:contain;display:block;border-radius:7px;pointer-events:none}.hand-card:hover,.hand-card.selected,.hand-card:focus-visible{transform:translateX(var(--x)) translateY(-27px) rotate(0deg);z-index:30!important;outline:2px solid #efc482}.hand-card.mulligan-selected{transform:translateX(var(--x)) translateY(-24px) rotate(var(--angle));outline:3px solid #f1c88c}.hand-card small{position:absolute;left:0;right:0;bottom:3px;background:#221a27ec;color:#fff;font-size:8px;border-radius:3px}.control-bar{height:27px;flex:none;display:flex;align-items:center;justify-content:center;gap:8px;z-index:8;max-width:95vw}.control-bar button{font-size:11px;padding:5px 14px}.control-bar .hint{font-size:11px;color:#cbbdc7}.control-bar label{font-size:11px;white-space:nowrap}.setup-layer{position:absolute;inset:0 0 145px;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none}.setup-layer:empty{display:none}.setup-panel{max-width:680px;max-height:90%;overflow:auto;background:#1b1821f2;box-shadow:0 15px 70px #0008;border:1px solid #65535e;border-radius:24px;padding:25px;text-align:center;pointer-events:auto;backdrop-filter:blur(8px);margin:12px}.setup-panel h2{font-size:22px;margin:0 0 8px}.setup-panel p{font-size:12px;color:#c6b6c3;margin:8px 0 14px}.setup-panel .actions{justify-content:center}.coin-pair{display:flex;justify-content:center;gap:65px;margin:18px}.coin-case{text-align:center}.coin-case b{display:block;font-size:11px;margin-top:13px;color:#e1d1db}.coin-wrap{width:115px;height:115px;perspective:1000px}.coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.2,.8,.4,1.2)}.coin-front,.coin-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#f9d487,#aa7838);border-radius:50%;border:4px ridge #ddb56e;box-shadow:0 10px 20px #0006}.coin-front{transform:rotateY(0deg)}.coin-back{transform:rotateY(180deg)}.coin img{width:75%;height:75%}.coin.heads{transform:rotateY(1800deg)}.coin.tails{transform:rotateY(1980deg)}.coin.not-rolled{opacity:.35}.prompt-panel{max-width:460px}.choice-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-height:210px;overflow:auto;margin:12px 0}.choice{padding:7px 10px;font-size:12px;max-width:200px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}.choice img{width:64px;height:90px;object-fit:contain;border-radius:4px}.choice[aria-pressed=true]{border-color:#f1c88c;outline:2px solid #f1c88c}.choice-field{font-size:10px}.prompt-dock{position:absolute;left:12px;top:40px;max-width:230px;max-height:calc(100% - 190px);overflow:auto;border:1px solid #7e6159;background:#19161ff5;border-radius:15px;padding:14px;text-align:center;pointer-events:auto}.prompt-dock h2{font-size:14px}.prompt-dock p{font-size:11px}.prompt-dock button{font-size:11px;padding:6px 10px}.prompt-dock .choice-grid{max-height:90px}.log-panel{position:absolute;left:12px;top:32px;bottom:160px;width:min(290px,40vw);overflow:auto;padding:15px;background:#17141cf0;border:1px solid #61505e;border-radius:12px;z-index:20;font-size:11px}.log-panel div{border-bottom:1px solid #3b2c3a;padding:6px 0}.card-actions{display:flex;gap:8px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--ui-border);position:sticky;bottom:0;background:var(--ui-surface);z-index:4}.card-actions button{font-size:12px}.card-actions label{display:flex;align-items:center;font-size:12px;gap:6px}#zone-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:12px;padding:20px}#zone-cards button{padding:0;background:none;border:none;font-size:11px}#zone-cards img{display:block;width:100%;border-radius:5px;margin-bottom:5px}#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:60}.flying-card{position:fixed;object-fit:contain;filter:drop-shadow(0 9px 8px #0009);border-radius:5px;pointer-events:none;transform-style:preserve-3d}.ride-fx{position:fixed;object-fit:contain;pointer-events:none;mix-blend-mode:screen}.battle-line{position:fixed;height:3px;background:linear-gradient(90deg,transparent,#efc58d,white);box-shadow:0 0 8px #e98772;transform-origin:0 50%;border-radius:4px}.fight-board.close-view{width:min(90vw,calc((100dvh - 190px)*1.85));}.shuffle-packet{position:fixed;width:60px;aspect-ratio:350/510;object-fit:contain;border-radius:4px}.finished-result{font-size:32px;font-weight:900;color:#f0c88c}.join-error{color:#e78172}#zone-dialog{width:min(750px,95vw)}@keyframes draw-breathe{50%{outline-color:#ffefd2;box-shadow:0 0 30px #f4c77d99,6px 6px 0 #7d7278}}@keyframes target-breathe{50%{outline-color:#fff5dd}}@media(max-height:600px){.fight-header{height:36px;gap:5px;padding:3px 8px}.fight-header img{width:51px;height:25px}.fight-header button{font-size:9px;padding:4px 7px}.fight-header #room-label{display:none}.phase{font-size:8px;padding:3px 5px}.fight-table{height:calc(100dvh - 36px)}.fight-table #status{font-size:9px;padding:3px 10px;top:3px}.board-window{height:calc(100% - 94px)}.fight-board{width:min(calc(100dvh - 130px),92vw)}.fight-board.close-view{width:min(76vw,calc((100dvh - 130px)*1.9))}.hand-fan{height:68px;margin-top:3px}.hand-card{width:65px;bottom:-22px}.control-bar{height:23px;gap:5px}.control-bar button{font-size:10px;padding:3px 10px}.control-bar .hint{font-size:9px}.unit-stat{font-size:9px!important}.rest-tag{font-size:8px!important}.nameplate{font-size:8px}.setup-layer{bottom:96px}.setup-panel{padding:15px;max-height:95%;border-radius:17px}.setup-panel h2{font-size:17px}.setup-panel p{font-size:10px;margin:5px 0 9px}.coin-wrap{width:65px;height:65px}.coin-pair{gap:35px;margin:9px}.coin-case b{font-size:10px;margin-top:5px}.opponent-hand{right:10px;top:8px}.opponent-hand img{height:27px;margin-left:-10px}.prompt-dock{left:7px;top:24px;max-width:180px;max-height:calc(100% - 114px);padding:9px}.prompt-dock h2{font-size:11px}.choice-grid{max-height:95px}.choice img{width:40px;height:58px}.choice{font-size:10px;padding:4px 6px}.card-actions{padding:10px 18px}.pile.draw-ready::after{font-size:8px}.log-panel{bottom:100px}.detail-grid{grid-template-columns:140px 1fr}.detail-grid h2{font-size:17px}}
/* Keep the whole hand inside the viewport; the board uses the remaining height. */
/* Placement rings sit under the card; Call uses a yellow ring. */
.unit-slot>img:not(.ride-fx){position:relative;z-index:1}.unit-slot>.unit-stat,.unit-slot>.rest-tag,.unit-slot>.gift-badge,.unit-slot>.lock-tag,.unit-slot>.delete-tag{z-index:2}.unit-slot>img.ride-fx{position:absolute;left:-100%;top:-45%;width:300%;height:190%;z-index:0;transform:none;transition:none;filter:none;border-radius:0;mix-blend-mode:normal}.unit-slot>img.call-fx{filter:grayscale(1) sepia(1) saturate(5)}
.board-window{height:auto;flex:1;min-height:0}.hand-fan{height:135px;margin-top:2px}.hand-card{width:90px;bottom:1px}.mulligan-note{position:absolute;bottom:12px;background:#19141ee8;padding:8px 16px;border:1px solid #66535d;border-radius:12px;font-size:11px;text-align:center;color:#decdd6}.waiting-prompt{position:absolute;bottom:15px;background:#19141ee8;padding:6px 14px;border-radius:12px;font-size:11px}.guardian-stack{position:absolute;top:0;left:42%;display:flex;max-width:30%;z-index:3}.guardian-stack img{width:28%;margin-left:-8px;filter:drop-shadow(0 2px 4px #0009)}.check-preview{position:fixed;right:24px;top:100px;width:110px;padding:0;background:#211a25;z-index:6;overflow:hidden;box-shadow:0 10px 30px #0008}.check-preview img{display:block;width:100%;border-radius:6px}.check-preview span{display:block;font-size:9px;padding:4px}.skill-preview{font-size:11px!important;padding:5px 10px!important}.board-half .damage-card img{object-fit:contain;object-position:top}.choice img{pointer-events:none}@media(max-height:600px){.hand-fan{height:82px;margin-top:1px}.hand-card{width:62px;bottom:-4px}.check-preview{right:8px;top:62px;width:62px}.check-preview span{font-size:7px}.mulligan-note{font-size:9px;bottom:4px;padding:4px 9px}.guardian-stack img{width:28%}.prompt-dock .choice-grid{max-height:74px}}@media(prefers-reduced-motion:reduce){.pile.draw-ready,.unit-slot.targetable{animation:none}}
.fight-board{width:min(calc((100dvh - 216px)*.982318),94vw)}.fight-board.close-view{width:min(90vw,calc((100dvh - 216px)*1.85))}@media(max-height:600px){.fight-board{width:min(calc((100dvh - 146px)*.982318),92vw)}.fight-board.close-view{width:min(76vw,calc((100dvh - 146px)*1.9))}}
/* In-match selection is a small translucent popover, not a full-screen card page. */
#card-detail.compact-card{position:fixed;inset:auto max(14px,env(safe-area-inset-right)) 146px auto;margin:0;width:min(380px,calc(100vw - 28px));max-height:calc(100dvh - 70px);z-index:45;background:#211c288c;border-color:#c2b1bc66;backdrop-filter:blur(12px);box-shadow:0 12px 35px #0006;border-radius:15px;overflow:hidden}#card-detail.compact-card .dialog-head{padding:7px 11px;background:#20192455;border-color:#d2bfca30}#card-detail.compact-card .dialog-head span{font-size:9px;letter-spacing:1px}#card-detail.compact-card .dialog-head button{padding:3px 7px}#card-detail.compact-card #detail-content{max-height:min(315px,calc(100dvh - 155px));overflow:auto}#card-detail.compact-card .detail-grid{grid-template-columns:62px 1fr;gap:10px;padding:12px}#card-detail.compact-card .printed-info{padding:0;background:transparent;color:#f6edf3}#card-detail.compact-card .printed-name{padding:6px 9px!important;background:#fce5c322;color:#fff4e1;font-size:14px!important;border:1px solid #cdb29355;box-shadow:none;margin-top:2px}#card-detail.compact-card .printed-info .eyebrow{color:#e2cad5;font-size:8px}#card-detail.compact-card .printed-type{color:#c7b7c4;font-size:10px;margin:3px 0}#card-detail.compact-card .detail-stats{background:#160f204d;padding:5px 8px;margin:7px 0;font-size:9px;gap:9px}#card-detail.compact-card .detail-stats b{font-size:12px}#card-detail.compact-card .ability-frame{background:#fff8e9dd;border:1px solid #c9b8a999;box-shadow:none;border-radius:7px}#card-detail.compact-card .ability-frame h3{font-size:10px;padding:4px 8px;background:#e2d7c699;color:#32252c}#card-detail.compact-card .ability-block{font-size:11px;color:#30262e;padding:7px 8px;line-height:1.7}#card-detail.compact-card .skill-symbol{height:15px}#card-detail.compact-card .detail-note,#card-detail.compact-card .symbol-legend{display:none}#card-detail.compact-card .card-actions{padding:8px 11px;background:#20192455;border-color:#d2bfca30;gap:5px}#card-detail.compact-card .card-actions button{font-size:10px;padding:6px 9px;background:#29213180}#card-detail.compact-card .card-actions button.primary{background:#e78172d9;color:#20171c}#card-detail.compact-card::backdrop{background:transparent;backdrop-filter:none}@media(max-height:600px){#card-detail.compact-card{bottom:100px;width:min(340px,45vw);max-height:calc(100dvh - 55px)}#card-detail.compact-card #detail-content{max-height:calc(100dvh - 143px)}#card-detail.compact-card .detail-grid{grid-template-columns:45px 1fr;padding:8px;gap:8px}#card-detail.compact-card .printed-name{font-size:12px!important}#card-detail.compact-card .ability-block{font-size:10px;line-height:1.65}}
#card-detail.compact-card[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(410px,calc(100dvh - 205px));max-height:min(410px,calc(100dvh - 205px))}#card-detail.compact-card .dialog-head,#card-detail.compact-card .card-actions{flex-shrink:0}#card-detail.compact-card #detail-content{flex:1;min-height:0;max-height:none}@media(max-height:600px){#card-detail.compact-card[open]{max-height:calc(100dvh - 146px)}#card-detail.compact-card #detail-content{max-height:none}}
/* Public ability announcements do not block play. */
.ability-notices{position:fixed;top:76px;left:max(14px,env(safe-area-inset-left));width:min(370px,calc(100vw - 28px));z-index:40;display:flex;flex-direction:column;gap:8px;pointer-events:none}.ability-notice{position:relative;display:grid;grid-template-columns:66px 1fr;gap:11px;padding:13px;background:#25202d9c;border:1px solid #cdb8c45c;border-radius:16px;backdrop-filter:blur(12px);box-shadow:0 10px 30px #0005;pointer-events:auto;color:#f8edf1}.notice-card{padding:0!important;border:0!important;background:none!important;align-self:start}.notice-card img{display:block;width:100%;border-radius:5px;filter:drop-shadow(0 3px 4px #0006)}.notice-copy{min-width:0}.notice-stage{display:block;font-size:10px;color:#efb3a5;padding-right:25px}.notice-copy h3{margin:5px 23px 7px 0;font-size:14px;line-height:1.3}.notice-skill{max-height:150px;overflow:auto;overscroll-behavior:contain}.notice-skill .ability-block{padding:0;margin:0 0 6px;font-size:11px;line-height:1.65;color:#f1e3e9}.notice-skill .skill-symbol{height:15px}.notice-close{position:absolute;right:7px;top:7px;padding:4px!important;background:#1b152355!important;border:0!important;width:30px;height:30px;display:grid;place-items:center}.notice-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}.fight-intro{position:fixed;inset:0;z-index:60;pointer-events:none;display:grid;place-items:center;background:radial-gradient(ellipse,#211a2a55,transparent 70%)}.fight-intro[hidden]{display:none}.intro-banner{width:100%;padding:22px 16px;text-align:center;background:linear-gradient(90deg,transparent,#28202ac7 22%,#28202ac7 78%,transparent);border-block:1px solid #f2c5b73d;backdrop-filter:blur(4px);filter:drop-shadow(0 8px 18px #0008)}.intro-banner img{display:block;width:100px;margin:0 auto 8px}.intro-banner span{display:block;font-size:clamp(16px,3vw,34px);letter-spacing:.22em;font-weight:900;color:#ffd5c9}.intro-banner strong{display:block;font-size:clamp(36px,7vw,88px);font-style:italic;line-height:1.1;font-weight:900;color:#fff2e9;text-shadow:3px 4px 0 #9e5c5799}.intro-banner small{display:block;margin-top:10px;font-size:12px;color:#e2c8cd}@media(max-height:600px){.ability-notices{top:48px;left:8px;width:min(320px,40vw);gap:5px;max-height:calc(100dvh - 148px);overflow:auto}.ability-notice{grid-template-columns:48px 1fr;gap:8px;padding:9px;border-radius:12px}.notice-stage{font-size:8px}.notice-copy h3{font-size:11px}.notice-skill{max-height:75px}.notice-skill .ability-block{font-size:9px}.notice-skill .skill-symbol{height:12px}.notice-close{width:25px;height:25px;right:4px;top:4px}.intro-banner{padding:10px 12px}.intro-banner img{width:62px;margin-bottom:3px}.intro-banner small{font-size:9px;margin-top:6px}}

/* Keep the two real playmats at their original aspect ratio in both orientations. */
@media(max-width:600px) and (orientation:portrait){
  .fight-header{height:76px;display:flex;flex-wrap:wrap;gap:5px;padding:5px 8px;align-content:center}
  .fight-header img{width:52px;height:27px}.fight-header button{font-size:10px;padding:6px 8px}
  .fight-header #room-label{display:none}.fight-header #phases{order:10;flex:0 0 100%;gap:4px}
  .phase{font-size:10px;padding:3px 7px}.fight-header #leave{margin-left:auto}
  .fight-table{height:calc(100dvh - 76px);padding-bottom:env(safe-area-inset-bottom)}
  .board-window{display:flex;flex-direction:column;align-items:center;justify-content:safe center;overscroll-behavior:contain;padding-top:30px}
  .fight-board{width:min(100%,calc((100dvh - 258px)*.982318));align-self:center;border-radius:0;box-shadow:0 8px 30px #0006}
  .fight-board.close-view{width:140%;max-width:none;margin-left:0;align-self:flex-start}
  .fight-table #status{top:4px;font-size:10px;padding:3px 10px;max-width:96%}
  .opponent-hand{top:40px;right:8px;max-width:24vw}.opponent-hand img{height:25px;margin-left:-10px}
  .hand-fan{height:118px;margin-top:7px}.hand-card{width:72px;bottom:4px}
  .hand-card:hover,.hand-card.selected,.hand-card:focus-visible{transform:translateX(var(--x)) translateY(-16px) rotate(0deg)}
  .control-bar{height:auto;min-height:36px;max-width:100%;width:100%;gap:5px;padding:5px 10px;flex-wrap:wrap}
  .control-bar .hint{font-size:10px;text-align:center}.control-bar button{padding:7px 12px;min-height:34px}
  .setup-layer{bottom:164px}.setup-panel{width:calc(100% - 24px);margin:12px;padding:18px;max-height:95%}
  .setup-panel h2{font-size:19px}.setup-panel .coin-wrap{width:85px;height:85px}.coin-pair{gap:20px}
  .prompt-dock{left:8px;top:35px;width:calc(100% - 16px);max-width:none;max-height:calc(100% - 190px)}
  .prompt-dock .choice-grid{max-height:120px}.log-panel{left:8px;top:34px;bottom:165px;width:min(320px,calc(100vw - 16px))}
  #card-detail.compact-card{right:10px;bottom:calc(160px + env(safe-area-inset-bottom));width:calc(100vw - 20px)}
  #card-detail.compact-card[open]{max-height:min(410px,calc(100dvh - 282px))}
  #card-detail.compact-card .detail-grid{grid-template-columns:58px 1fr;padding:10px;gap:10px}
  #card-detail.compact-card .detail-image{width:100%}.card-actions{padding:10px 12px}
  .ability-notices{top:112px;left:10px;width:calc(100vw - 20px);max-height:calc(100dvh - 272px);overflow:auto}
  .ability-notice{grid-template-columns:52px 1fr;padding:10px;gap:9px}.notice-copy h3{font-size:12px}
  .check-preview{right:10px;top:114px;width:70px}
}

.fight-header button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
@media(max-width:600px) and (orientation:portrait){
  .fight-header{height:86px}.fight-header button{min-height:44px;min-width:44px;padding:6px 8px}
  .fight-header #log-toggle .button-label,.fight-header #zoom .button-label{display:none}
  .fight-header button svg{width:20px;height:20px}.fight-header #invite{font-size:11px}
  .fight-table{height:calc(100dvh - 86px)}.fight-board{width:min(100%,calc((100dvh - 306px)*.982318))}
  .control-bar button{min-height:44px}
  #card-detail.compact-card .dialog-head .close{min-width:44px;min-height:44px}
  #card-detail.compact-card .card-actions button{min-height:40px}
  .ability-notices{top:122px}.check-preview{top:124px}
}
@media(max-height:600px) and (orientation:landscape){
  .fight-header{height:44px}.fight-header button{min-height:36px;min-width:36px}
  .fight-table{height:calc(100dvh - 44px);padding-bottom:env(safe-area-inset-bottom)}
  .control-bar{height:auto;min-height:32px}.control-bar button{min-height:32px}
  .ability-notices{top:54px}.check-preview{top:54px}
}

@media(max-width:600px) and (orientation:portrait){#card-detail.compact-card{bottom:calc(184px + env(safe-area-inset-bottom))}}

@media(max-width:350px) and (orientation:portrait){.fight-header img{width:36px}.fight-header #invite{font-size:10px;padding-inline:6px}}
@media(max-height:600px) and (orientation:landscape){.fight-board{width:min(calc((100dvh - 172px)*.982318),92vw)}}

/* An explicit dialog height keeps the scrollable body from collapsing on mobile Safari. */
#card-detail.compact-card #card-actions:empty{display:none}
@media(max-width:900px){
  #card-detail.compact-card .detail-grid{display:block;padding:12px}
  #card-detail.compact-card .detail-image{display:none}
  #card-detail.compact-card .printed-info{min-width:0}
  #card-detail.compact-card .printed-name{font-size:16px!important;overflow-wrap:anywhere}
  #card-detail.compact-card .detail-stats{font-size:11px;gap:16px;padding:8px 10px}
  #card-detail.compact-card .detail-stats b{font-size:15px}
  #card-detail.compact-card .ability-block{font-size:13px;line-height:1.8}
  #card-detail.compact-card .ability-frame h3{font-size:12px}
  #card-detail.compact-card #detail-content{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
@media(max-width:600px) and (orientation:portrait){
  #card-detail.compact-card[open]{height:min(410px,calc(100dvh - 282px))}
}
@media(max-width:900px) and (max-height:600px){
  #card-detail.compact-card[open]{height:calc(100dvh - 146px)}
  #card-detail.compact-card .ability-block{font-size:12px}
}

.unit-slot[data-drag-field]{touch-action:none;cursor:grab}
.unit-slot[data-drag-field]:active{cursor:grabbing}
.unit-slot.attack-ready{outline:3px solid #efd2a4}
.unit-slot.boost-ready{outline:3px solid #a8c9df;background:#a8c9df16!important}
.unit-slot.boost-ready::after{content:'BOOST';position:absolute;bottom:-24%;left:-15%;width:130%;font-size:10px;font-weight:800;background:#253442eb;color:#e2f1ff;border-radius:5px}
#sound[aria-pressed=false]{opacity:.5}

/* Match the printed classic zone; rotated card bounds stay inside all six slots. */
.damage-stack{left:5.19%;top:46.8%;width:15.625%;height:50.25%;display:block}
.damage-card{position:absolute;left:0;top:calc(var(--damage-index)*20%);translate:0 calc(var(--damage-index)*-20%);width:100%;height:auto;aspect-ratio:510/350;overflow:visible}
.damage-card img{position:absolute;left:50%;top:50%;width:68.627%;height:auto;aspect-ratio:350/510;transform:translate(-50%,-50%) rotate(90deg);object-fit:contain}
.arriving{visibility:hidden!important}
.check-display{position:fixed;z-index:59;left:50%;top:48%;transform:translate(-50%,-50%);width:190px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(24,25,35,.88);border:1px solid #ead4b0a6;border-radius:16px;box-shadow:0 8px 32px #0008;color:#fff;pointer-events:none;text-align:center}
.check-display[hidden]{display:none}
.check-display>small{font-size:11px;color:#e5d4b6;font-weight:800}
.check-face{width:142px;aspect-ratio:350/510;object-fit:contain;border-radius:5px}
.check-display>strong{font-size:14px;line-height:1.2}
.check-trigger{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:800;color:#d5d5df}
.check-trigger.has-trigger{color:#ffe0a0}
.check-trigger img{width:20px;height:20px;image-rendering:auto}
.check-bonus{font-size:10px;color:#ffecce}
.check-display.read{left:auto;right:12px;top:40%;transform:translateY(-50%);width:110px;padding:8px;opacity:.92}
.check-display.read .check-face{width:70px}
.check-display.read>strong,.check-display.read>small,.check-display.read .check-trigger{font-size:9px}
.check-display.read .check-bonus{display:none}
.trigger-bonus{position:fixed;transform:translate(-50%,-100%);padding:5px 8px;border:1px solid #f5d2a0;background:#2b2235ed;color:#fff0cf;border-radius:7px;font-size:13px;font-weight:800;white-space:nowrap;pointer-events:none}
.prompt-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.prompt-tools button{display:inline-flex;align-items:center;gap:6px}
.prompt-tools svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.trigger-timer{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:#ffe0ac;min-width:40px}
.prompt-peek{position:absolute;left:12px;top:40px;pointer-events:auto;background:#181722da;border:1px solid #8e776c;border-radius:12px;padding:8px 12px}
.prompt-peek .prompt-tools{margin:0}
.prompt-dock .choice{width:88px;max-width:110px;padding:6px}
.prompt-dock .choice img{width:60px;height:86px;object-fit:contain}
.prompt-dock .choice span{font-size:10px;line-height:1.3}
.prompt-dock .choice-grid{max-height:250px}
@media(max-width:600px){
 .check-display{width:158px;padding:10px;top:46%}.check-face{width:118px}
 .check-display.read{width:88px;right:7px}.check-display.read .check-face{width:54px}
 .check-display.read .check-trigger img{width:15px;height:15px}
 .prompt-dock .choice-grid{max-height:160px}
}
@media(max-height:500px) and (orientation:landscape){
 .check-display{width:150px;top:50%;gap:3px;padding:8px}.check-face{width:92px}
 .check-display>strong{font-size:11px}.check-display>small{font-size:9px}
 .check-display.read{top:48%;width:92px}.check-display.read .check-face{width:52px}
}

.all-guard-targets{display:flex;gap:.4rem;flex-wrap:wrap}.all-guard-targets button[aria-pressed="true"]{outline:2px solid #f2c986}

/* Soul remains upright under the Vanguard, including when the Vanguard rests. */
.soul-stack{position:absolute;width:11.8%;aspect-ratio:350/510;min-height:0!important;padding:0;border:0;background:none!important;transform:translate(-50%,-50%);z-index:1;overflow:visible;touch-action:manipulation}.soul-stack:hover,.soul-stack:active{transform:translate(-50%,-50%)}.soul-stack>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translate(var(--soul-offset),var(--soul-offset));border:1px solid #b6bccb80;border-radius:4px;box-shadow:1px 2px 3px #0008;cursor:pointer}.soul-count{position:absolute;left:calc(100% + 3px);top:77%;font-size:clamp(8px,1vw,11px);line-height:1.2;font-weight:600;white-space:nowrap;padding:4px 6px;border:1px solid #ffffff55;border-radius:5px;color:#fff;background:#161d2de8;box-shadow:0 2px 5px #0005;cursor:pointer}.opponent .soul-count{transform:rotate(180deg)}

.unit-slot.locked-card{filter:saturate(.55)}.lock-tag{position:absolute;left:5%;right:5%;top:42%;padding:5% 0;border:1px solid #ffffff70;background:#171921dc;color:#fff;font-size:clamp(8px,1.4vw,13px);font-weight:800;letter-spacing:.12em;border-radius:4px}.opponent .lock-tag{transform:rotate(180deg)}

/* Guard draft stays reversible until the confirmation in the side panel. */
.field-guard-circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(110px,34%,300px);min-height:62px;padding:9px 28px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border:1px solid #cbdfff70;border-radius:50%;background:#162e526e;box-shadow:inset 0 0 18px #9cd3ff20;z-index:4;transition:background .12s,box-shadow .12s}
.field-guard-circle>b{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:20px;color:#daedff}
.field-guard-circle>div{display:flex;justify-content:center;min-height:26px}.field-guard-circle button{width:34px;aspect-ratio:350/510;padding:0;border:0;background:none;margin-left:-8px;touch-action:none}.field-guard-circle img{display:block;width:100%;border-radius:3px}.field-guard-circle span{font-size:10px;color:#eef7ff;pointer-events:none;white-space:nowrap}
.field-guard-circle.guard-drop-hover,.guard-draft.guard-drop-hover{background:#276096b0;box-shadow:0 0 22px #98d4ff80;border-color:#d8f0ff}
.hand-card{touch-action:pan-x}.drag-card{pointer-events:none}
.map-editor-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;margin:8px 0;color:#c5e2ff;border:1px solid #ffffff35;border-radius:5px;background:#92c5ff0c;font-size:12px}
@media(max-width:600px){.field-guard-circle{min-height:56px;padding:7px 24px}.field-guard-circle button{width:29px}.field-guard-circle>b{font-size:17px}}
/* A server change invalidates the match without reporting a win or loss. */
.match-void-dialog{width:min(480px,calc(100vw - 32px));padding:28px;border:1px solid #78caff;border-radius:18px;background:#121a2b;color:#e7f5ff;text-align:center;box-shadow:0 0 50px #45aaff20}
.match-void-dialog::backdrop{background:#050b17d9}
.match-void-dialog a{display:block;margin-top:22px;padding:14px;border-radius:10px;background:#2a6a99;color:white;text-decoration:none}

/* --- End: play.css ---
 */

/* --- Begin: battle-layout.css --- */
/* Both field shapes share the match HUD, commands, hand and announcements. */
.battle-hud{display:none}
.match-clocks{display:grid;gap:4px;margin-top:7px;max-width:230px;transform:skewX(6deg)}.match-clock-row{display:flex;align-items:center;gap:7px;padding:3px 6px;border:1px solid #78baff66;border-radius:7px;background:#0a1625e6;color:#d6eaff}.match-clock-row span{font-size:10px;white-space:nowrap}.match-clock-row b{font-size:16px;margin-left:auto;font-variant-numeric:tabular-nums;line-height:1.2}.match-clock-row em{font-size:8px;font-style:normal;color:#b0bed3}.match-clock-row.clock-warning{border-color:#ffca72;color:#ffe0a3}.match-clock-row.clock-urgent{border-color:#ff7373;color:#ffa5a5;box-shadow:0 0 10px #ff555530}@media(max-width:600px){.match-clocks{gap:3px;margin-top:4px;max-width:170px}.match-clock-row{padding:2px 4px;gap:4px}.match-clock-row span{font-size:9px}.match-clock-row b{font-size:14px}}
.critical-stat{display:inline-flex;align-items:center;gap:2px;vertical-align:baseline}
.critical-stat img,.unit-slot .critical-stat img{display:inline-block;width:1em;height:1em;object-fit:contain;transform:none;filter:none;border-radius:0;transition:none}
.layout-options>strong{font-size:13px}.layout-options>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.layout-options button{padding:12px 8px;background:#131b2c66;border:1px solid #ffffff38;font-weight:700}
.layout-options button[aria-pressed=true]{border-color:#b8d8ff;background:#739bdc30;color:#fff}
.layout-options button small{font-size:10px;font-weight:400}.fight-header #battle-layout{font-weight:800;letter-spacing:.06em;min-width:36px}
.battle-match{--battle-header:46px;--battle-hand:46px;--battle-controls:44px;--field-table-ratio:1.777778;--field-half-ratio:32/9;--field-unit-width:7.6%;--field-pile-width:6.6%;background:radial-gradient(ellipse at 50% 40%,#302746,#101521 78%)}
.battle-match .fight-header{height:var(--battle-header);padding:4px max(12px,env(safe-area-inset-left));gap:6px;background:#0d142080;border-color:#ffffff24}
.battle-match .fight-header #phases{justify-content:flex-end;padding-right:8px}
.battle-match .fight-header #log-toggle .button-label,.battle-match .fight-header #zoom .button-label{display:none}
.battle-match .fight-header button{min-width:36px;min-height:36px;background:#ffffff09;border-color:#ffffff28;border-radius:7px}
.battle-match .phase{border-radius:3px;padding:4px 7px;letter-spacing:.04em}
.battle-match .phase.current{background:#dbeaff;color:#16223b}
.battle-match .fight-table{height:calc(100dvh - var(--battle-header));padding-bottom:env(safe-area-inset-bottom)}
.battle-match .board-window{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:safe center;align-items:center;padding:25px 0 6px;overflow:auto}
.battle-match .fight-board{width:min(96vw,calc((100dvh - var(--battle-header) - var(--battle-hand) - var(--battle-controls) - 31px - env(safe-area-inset-bottom))*var(--field-table-ratio)));margin:0 auto;align-self:center;flex:none;overflow:hidden;border:1px solid #ffffff36;border-radius:14px;box-shadow:0 12px 40px #0006}
.battle-match .board-half{aspect-ratio:var(--field-half-ratio)}
.battle-match .unit-slot{width:var(--field-unit-width);border-radius:5px}
.battle-match .unit-slot.accel-slot{width:var(--accel-width,8%)}
.battle-match .unit-slot .unit-stat{font-family:'Chakra Petch',sans-serif;font-size:clamp(9px,1.25vw,15px);bottom:-5%;color:#ffe6a7;background:#171321ed;border-radius:3px;line-height:1.15;text-shadow:1px 1px #000}
.battle-match .pile{width:var(--field-pile-width);box-shadow:2px 2px 0 #c1b3cc,4px 4px 0 #4b3a61,6px 6px 10px #0008}
.battle-match .nameplate{display:none}
.battle-match .soul-stack{width:var(--field-unit-width)}
.battle-match .damage-card{width:100%}
.battle-match.battle-v2 .native-v2-field .damage-stack{left:3.5%;width:14.5%;top:37%;height:50%}
.native-v2-field .unit-slot.empty:not(.targetable){background:none!important;border:0}
.battle-match .battle-hud{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;font-family:'Chakra Petch',sans-serif}
.battle-phase{position:absolute;left:max(12px,env(safe-area-inset-left));top:8px;min-width:125px;padding:8px 13px;background:linear-gradient(110deg,#152746e3,#312140a6);border-left:3px solid #d8e9ff;border-bottom:1px solid #ffffff59;border-radius:4px 4px 18px 4px;transform:skewX(-6deg)}
.battle-phase small{display:block;font-size:9px;letter-spacing:.08em;color:#c8dbff}.battle-phase small b{font-size:18px;margin-left:5px;color:#fff}.battle-phase>strong{display:block;font-size:clamp(21px,3vw,35px);font-style:italic;line-height:1.1;letter-spacing:.04em;color:#fff;text-shadow:0 2px #000}
.battle-player{position:absolute;width:min(255px,25vw);padding:7px 11px;background:linear-gradient(100deg,#111a2de0,#2820399c);border:1px solid #ffffff38;border-radius:6px;color:#e8efff;min-width:0}
.player-own{left:max(12px,env(safe-area-inset-left));bottom:calc(var(--battle-hand) + var(--battle-controls) + 6px)}
.player-opponent{right:max(12px,env(safe-area-inset-right));top:7px}
.battle-player>strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-player>strong small{font-weight:400;font-size:10px;color:#c2cde1;margin-left:6px}
.battle-counts{display:flex;gap:10px;align-items:center;margin-top:3px;font-size:8px;white-space:nowrap;color:#c4d1e8}.battle-counts b{font-size:13px;color:#fff;padding-left:3px}
.damage-meter{display:flex;gap:4px;margin-top:5px}.damage-meter i{width:20px;height:3px;background:#d6e3ff25;border-radius:2px}.damage-meter .filled{background:#f19586;box-shadow:0 0 5px #dc6d5050}
.battle-match .fight-table #status{top:4px;font-size:10px;max-width:48vw;background:#111827bb;border:1px solid #ffffff20;border-radius:5px;padding:3px 10px}
.battle-match .opponent-hand{top:76px;right:16px;max-width:22vw}.battle-match .opponent-hand img{height:35px}
.battle-match .hand-fan{height:var(--battle-hand);margin:0;padding:5px 12px;flex:none;width:100%;background:linear-gradient(0deg,#10131fe8,transparent);overflow:visible}
.battle-match .hand-fan.hand-row{height:var(--battle-hand);overflow-x:auto;overflow-y:hidden;gap:7px;padding:4px 12px 6px}
.battle-match .hand-row .hand-card{width:68px;flex-basis:68px}.battle-match .hand-card{width:68px;bottom:4px}
.battle-match .control-bar{height:auto;min-height:var(--battle-controls);width:100%;max-width:100%;padding:3px 14px;gap:8px;flex-wrap:wrap;background:#131a2ba3;border-top:1px solid #ffffff24}
.battle-match .control-bar button{min-height:36px;border-radius:5px}.battle-match .control-bar .hint{font-size:11px}
.battle-match .setup-layer{inset:0 0 calc(var(--battle-hand) + var(--battle-controls))}
.battle-match .log-panel{bottom:calc(var(--battle-hand) + var(--battle-controls));top:95px}
.battle-match .fight-board.close-view{width:min(145vw,calc((100dvh - var(--battle-header) - var(--battle-hand) - var(--battle-controls))*2.9));max-width:none;align-self:flex-start;margin:0 auto}
.battle-match #card-detail.compact-card{bottom:calc(var(--battle-hand) + var(--battle-controls) + 12px)}
.battle-match .action-notices{top:165px}.battle-match .ability-notices{top:148px}
@media(max-height:600px) and (orientation:landscape){
  .battle-match{--battle-header:44px;--battle-hand:46px;--battle-controls:44px}
  .battle-match .fight-header{padding:0 max(8px,env(safe-area-inset-left));gap:4px}.battle-match .fight-header #room-label{display:none}
  .battle-match .fight-header button{min-width:40px;min-height:40px}.battle-match .fight-header img{width:50px}
  .battle-match .board-window{padding:7px 0 3px}
  .battle-match .fight-board{width:min(96vw,calc((100dvh - 148px - env(safe-area-inset-bottom))*var(--field-table-ratio)))}
  .battle-match .hand-card,.battle-match .hand-row .hand-card{width:43px;flex-basis:43px}
  .battle-phase{min-width:100px;padding:4px 9px;top:4px}.battle-phase>strong{font-size:22px}.battle-phase small{font-size:8px}.battle-phase small b{font-size:13px}
  .battle-player{width:min(185px,24vw);padding:5px 7px}.battle-player>strong{font-size:10px}.battle-player>strong small{font-size:8px}.battle-counts{gap:6px;font-size:7px}.battle-counts b{font-size:10px}
  .damage-meter{margin-top:3px}.player-opponent{top:4px}.player-own{bottom:96px}
  .battle-match .opponent-hand{top:58px;right:10px}.battle-match .opponent-hand img{height:23px}
  .battle-match .unit-slot .unit-stat{font-size:10px!important}.battle-match .action-notices{top:130px}.battle-match .ability-notices{top:112px}
}
@media(max-width:600px) and (orientation:portrait){
  .battle-match{--battle-header:90px;--battle-hand:46px;--battle-controls:54px}
  .battle-match .fight-header{height:var(--battle-header);gap:3px;padding:3px 6px;flex-wrap:wrap;align-content:center}
  .battle-match .fight-header button{min-width:40px;min-height:42px;padding:5px}.battle-match .fight-header img{width:42px}
  .battle-match .fight-header #phases{order:10;flex:0 0 100%;justify-content:center;padding:0}
  .battle-match .board-window{padding-top:64px;justify-content:flex-start}
  .battle-match .fight-board{width:100%;border-radius:6px}
  .battle-match .board-half{aspect-ratio:2000/1018}
  .battle-match .unit-slot,.battle-match .soul-stack{width:11.8%}.battle-match .pile{width:10.1%}
  .battle-phase{left:7px;top:26px;min-width:91px;padding:4px 7px}.battle-phase>strong{font-size:20px}.battle-phase small{font-size:7px}.battle-phase small b{font-size:12px}
  .battle-player{width:185px;max-width:55vw;padding:4px 7px}.battle-player>strong{font-size:10px}.battle-player>strong small{font-size:8px}.battle-counts{font-size:7px;gap:7px}.battle-counts b{font-size:10px}
  .player-opponent{top:27px;right:7px}.player-own{left:7px;bottom:calc(var(--battle-hand) + var(--battle-controls) + 3px)}
  .battle-match .opponent-hand{top:81px;right:7px;max-width:27vw}.battle-match .opponent-hand img{height:22px}
  .battle-match .fight-table #status{max-width:96vw;width:max-content;font-size:9px}
  .battle-match .control-bar{min-height:var(--battle-controls);gap:5px;padding:4px 8px}.battle-match .control-bar button{min-height:44px}
  .battle-match .hand-card,.battle-match .hand-row .hand-card{width:76px;flex-basis:76px}
  .battle-match .action-notices{top:175px}.battle-match .ability-notices{top:174px}
  .battle-match .fight-board.close-view{width:175%;max-width:none}
}
/* Hover on desktop, tap on touch: cards open over the table without resizing it. */
.hand-dock{--hand-open-height:150px;position:relative;width:100%;height:46px;flex:none;z-index:8;overflow:visible;background:linear-gradient(0deg,#10131fe8,#171d2c66);border-top:1px solid #ffffff24}
.hand-dock #hand-toggle{position:absolute;inset:0;z-index:35;width:100%;height:46px;min-height:46px;min-width:0;padding:0 16px;background:transparent!important;border:0!important;border-radius:0;box-shadow:none;text-align:right;font-size:10px;letter-spacing:.08em;color:#cfdbef;text-shadow:0 1px 3px #000;cursor:pointer}
.hand-dock #hand-toggle:focus-visible{outline:1px solid #c0dfff;outline-offset:-3px}
.hand-dock.hand-open #hand-toggle{opacity:0;pointer-events:none}
.hand-dock>#hand,.battle-match .hand-dock>#hand{position:absolute;bottom:0;left:0;width:100%;height:var(--hand-open-height);margin:0;padding:8px 12px;background:linear-gradient(0deg,#10131ffa,#171d2cc9 70%,transparent);visibility:visible;opacity:1;pointer-events:none;transform:translateY(96px);transition:transform .2s}
.hand-dock.hand-open>#hand,.battle-match .hand-dock.hand-open>#hand{pointer-events:auto;transform:none}
.hand-dock>#hand.hand-row,.battle-match .hand-dock>#hand.hand-row{height:var(--hand-open-height);padding:8px 12px}
.hand-dock .hand-row .hand-card,.battle-match .hand-dock .hand-row .hand-card{width:86px;flex-basis:86px}
.battle-match .hand-dock .hand-card{width:86px}
.skill-preview-mode .hand-dock{display:contents}.skill-preview-mode #hand-toggle{display:none}
.skill-preview-mode .hand-dock>#hand{visibility:visible;opacity:1;transform:none}
@media(max-height:600px) and (orientation:landscape){.hand-dock{--hand-open-height:110px}.hand-dock>#hand,.battle-match .hand-dock>#hand{transform:translateY(60px)}.hand-dock.hand-open>#hand,.battle-match .hand-dock.hand-open>#hand{transform:none}.hand-dock .hand-row .hand-card,.battle-match .hand-dock .hand-row .hand-card,.battle-match .hand-dock .hand-card{width:63px;flex-basis:63px}}
@media(max-width:600px) and (orientation:portrait){.hand-dock{--hand-open-height:134px}.hand-dock>#hand,.hand-dock>#hand.hand-row,.battle-match .hand-dock>#hand,.battle-match .hand-dock>#hand.hand-row{padding:8px 12px}.hand-dock>#hand,.battle-match .hand-dock>#hand{transform:translateY(76px)}.hand-dock.hand-open>#hand,.battle-match .hand-dock.hand-open>#hand{transform:none}.hand-dock .hand-row .hand-card,.battle-match .hand-dock .hand-row .hand-card,.battle-match .hand-dock .hand-card{width:72px;flex-basis:72px}}
.battle-match .fight-header button{background:transparent;border-color:transparent}.battle-match .fight-header button:hover{background:#ffffff14;border-color:#ffffff30}
.battle-match .control-bar button{background:#ffffff08;border-color:#ffffff26;border-radius:2px;box-shadow:none;color:#e8efff}
.battle-match .control-bar button.primary{background:#f29c8240;border-color:#efac8d85;color:#fff3e8}
@media(prefers-reduced-motion:reduce){.hand-dock>#hand{transition:none}}
/* Commands sit beside the field; the cropped hand keeps the bottom edge. */
.battle-match .crowded-front .unit-slot:is([data-slot="FL"],[data-slot="VC"],[data-slot="FR"]){width:var(--front-width)}
@media(min-width:601px){
  .battle-match{--battle-controls:0px}
  .battle-match .board-window{padding-left:12px;padding-right:144px}
  .battle-match .fight-board{width:min(calc(100vw - 168px),calc((100dvh - var(--battle-header) - var(--battle-hand) - 31px - env(safe-area-inset-bottom))*var(--field-table-ratio)))}
  .battle-match .control-bar{position:absolute;right:max(10px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);width:118px;max-width:118px;max-height:65%;min-height:0;height:auto;overflow:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:6px 0;background:transparent;border:0}
  .battle-match .control-bar .hint{font-size:10px;text-align:right;line-height:1.5}
  .battle-match .control-bar button{min-height:44px;padding:7px 8px}
  .battle-match .player-own{bottom:calc(var(--battle-hand) + 6px)}
  .battle-match .fight-board.close-view{width:145vw;max-width:none}
}
@media(min-width:601px) and (max-height:600px) and (orientation:landscape){
  .battle-match .fight-board{width:min(calc(100vw - 148px),calc((100dvh - 104px - env(safe-area-inset-bottom))*var(--field-table-ratio)))}
  .battle-match .board-window{padding-right:124px;padding-left:8px}
  .battle-match .control-bar{width:105px;max-width:105px;max-height:68%;gap:5px}
}
@media(max-width:600px) and (orientation:portrait){.battle-match .control-bar{justify-content:flex-end}.battle-match .control-bar .hint{flex:1;text-align:left}}
@media(min-width:601px){
  .battle-match .fight-table.guarding .board-window{padding-right:326px;flex:1;height:auto!important;justify-content:center}
  .battle-match .fight-table.guarding .fight-board:not(.close-view){width:min(calc(100vw - 350px),calc((100dvh - var(--battle-header) - var(--battle-hand) - 31px)*var(--field-table-ratio)));margin:0 auto}
  .battle-match .fight-table.guarding .control-bar{width:300px;max-width:300px;overflow-x:hidden;max-height:calc(100% - 120px)}
  .battle-match .guard-controls .guard-versus{gap:6px}
  .battle-match .guard-controls .guard-versus b{font-size:20px}
  .battle-match .guard-controls .guard-actions{flex-wrap:wrap}
  .battle-match .guard-controls .guard-actions small{flex:0 0 100%;max-width:none}
  .battle-match .guard-controls .guard-actions button{flex:1}
}

/* V1 keeps the taller field; the interface is shared with V2. */
.battle-match.battle-v1{--field-table-ratio:.982318;--field-half-ratio:2000/1018;--field-unit-width:11.8%;--field-pile-width:10.1%}
.player-own,.battle-phase.turn-own{--side-accent:#70b9ff;--side-border:#70b9ff88;--side-fill:#103669c9}
.player-opponent,.battle-phase.turn-opponent{--side-accent:#ff8b94;--side-border:#ff8b9488;--side-fill:#63222fc9}
.battle-match .battle-player{background:linear-gradient(110deg,var(--side-fill),#111a2d90);border-color:var(--side-border);border-left:3px solid var(--side-accent)}
.battle-match .battle-player>strong{color:var(--side-accent)}
.battle-match .battle-phase{background:linear-gradient(110deg,var(--side-fill),#111a2d90);border-left-color:var(--side-accent);border-bottom-color:var(--side-border)}
.battle-match .battle-phase small{color:var(--side-accent)}
.battle-match .damage-meter .filled{background:var(--side-accent);box-shadow:none}

/* Spectators keep the field and public counters; no hand dock or play controls. */
.spectator.battle-match{--battle-hand:0px}
.spectator #hand-dock{display:none!important}
.spectator #control{justify-content:center}
.spectator #control .hint{color:#c9e8dc}

/* Expanded view fits one complete half and scrolls vertically to the other. */
.battle-match .fight-board.close-view{
  width:min(100%,calc((100dvh - var(--battle-header) - var(--battle-hand) - var(--battle-controls) - 31px - env(safe-area-inset-bottom))*var(--field-table-ratio)*2));
  max-width:100%;align-self:center;margin:0 auto;
}
.battle-match .board-window:has(.close-view){justify-content:flex-start}
.battle-match .field-guard-circle{top:54%}

/* Header items can be positioned inside their own toolbar by Admin Map. */
.battle-match .fight-header{position:relative}

/* G positions saved in Admin Map; coordinates are relative to the board. */
.battle-match.battle-v1[data-map-profile="desktop"] .field-guard-circle{
  left:50.207983%;top:49.982689%;width:18.415965%;height:16.965379%;
  min-width:0;max-width:none;min-height:0;max-height:none;
}
.battle-match.battle-v1[data-map-profile="mobile"] .field-guard-circle{
  left:49.5%;top:51%;width:18.855369%;height:18.745847%;
  min-width:0;max-width:none;min-height:0;max-height:none;
}
@media (min-width:1101px) and (min-height:601px) and (pointer:fine),
       (min-width:1101px) and (min-height:601px) and (pointer:none),
       (min-width:1101px) and (min-height:1101px){
  .battle-match.battle-v1:not([data-map-profile]) .field-guard-circle{
    left:50.207983%;top:49.982689%;width:18.415965%;height:16.965379%;
    min-width:0;max-width:none;min-height:0;max-height:none;
  }
}
@media (max-width:600px),(max-height:600px){
  .battle-match.battle-v1:not([data-map-profile]) .field-guard-circle{
    left:49.5%;top:51%;width:18.855369%;height:18.745847%;
    min-width:0;max-width:none;min-height:0;max-height:none;
  }
}

/* --- End: battle-layout.css ---
 */

/* --- Begin: match-feedback.css --- */
/* Transient glass announcements never intercept a field gesture. */
.guard-display,.phase-announcement{position:fixed;left:50%;transform:translateX(-50%);pointer-events:none;z-index:62;color:#fff;max-width:calc(100vw - 24px)}
.guard-display[hidden],.phase-announcement[hidden]{display:none}
.guard-display{top:17%;width:min(600px,calc(100vw - 24px));padding:16px 20px;text-align:center;background:linear-gradient(115deg,#26313db8,#151b27aa);border-block:1px solid #ffffff8a;border-radius:18px;backdrop-filter:blur(8px);box-shadow:0 12px 36px #0005}
.guard-display small{display:block;font-size:12px;color:#e1eaff}.guard-display h2{margin:3px 0 10px;font-size:clamp(20px,4vw,36px);font-style:italic;letter-spacing:.12em}
.guard-reveals{display:flex;justify-content:center;gap:12px}.guard-reveals figure{margin:0;min-width:0;flex:0 1 110px}.guard-reveals img{display:block;width:100%;max-height:160px;object-fit:contain;border-radius:5px}.guard-reveals figcaption{font-size:11px;line-height:1.4;margin-top:6px}.guard-reveals b{display:block;color:#bfe4ff}.guard-versus{margin:12px 0 0;font-size:13px;color:#f7f3f8}
.phase-announcement{top:38%;width:min(570px,94vw);text-align:center;padding:13px 22px;background:linear-gradient(90deg,transparent,#151c2cc9 18%,#151c2cc9 82%,transparent);border-block:1px solid #ffffff5c;backdrop-filter:blur(3px)}
.phase-announcement small{font-size:11px;color:#dedfe9}.phase-announcement strong{display:block;font-size:clamp(24px,5vw,48px);font-style:italic;font-weight:900;letter-spacing:.1em}
.action-notices{position:fixed;right:max(12px,env(safe-area-inset-right));top:80px;z-index:39;width:min(235px,25vw);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.action-notice{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid #ffffff59;border-radius:11px;background:#1b2332a8;backdrop-filter:blur(6px);color:#fff;box-shadow:0 4px 14px #0003}.action-notice img{width:34px;height:48px;object-fit:contain;border-radius:3px}.action-notice div{min-width:0}.action-notice small{display:block;font-size:9px;color:#d9deed}.action-notice strong{font-size:12px;letter-spacing:.08em}.action-notice span{display:block;font-size:10px;line-height:1.35;overflow-wrap:anywhere;color:#edf1f9}
#view-dialog{width:min(430px,calc(100vw - 24px));background:#202536c9;border:1px solid #ffffff70;backdrop-filter:blur(10px)}.view-options{padding:18px 22px;display:grid;gap:18px}.view-options label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;font-size:14px}.view-options small{display:block;color:#d1d8e5;font-size:11px;margin-top:5px}.view-options input{width:22px;height:22px;accent-color:#e98778}.view-options p{font-size:11px;color:#d5dbea;margin:0}
#music-track{font-size:12px;color:#edf2ff}.music-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.music-controls button{font-size:12px}
.board-window{perspective:1100px}.fight-board{transform-style:preserve-3d}.pile.check-focus{outline:2px solid #fff1c8;box-shadow:0 0 20px #ffe5a46b}
.attack-arrow{position:fixed;inset:0;width:100vw;height:100dvh;overflow:visible;pointer-events:none;--arrow-color:#ffd2a2}.attack-arrow.boost-arrow{--arrow-color:#b9e2ff}.attack-arrow.invalid-arrow{--arrow-color:#d58a8a}.attack-arrow path{fill:none;stroke:var(--arrow-color);stroke-width:4;stroke-linecap:round}.attack-arrow .arrow-shadow{stroke:#14171fbb;stroke-width:9}.attack-arrow marker path{fill:var(--arrow-color);stroke:none}.attack-arrow.committed .arrow-line{stroke-dasharray:16 7;animation:arrow-travel .45s linear infinite}
.unit-slot.attack-ready::before{content:'ATTACK';position:absolute;top:-22%;left:-15%;width:130%;font-size:9px;font-weight:800;padding:2px 0;background:#3b3026ed;color:#ffedcd;border:1px solid #ffdeb380;border-radius:4px;z-index:4}.unit-slot.boost-ready::after{border:1px solid #b9e2ff80;z-index:4}
.hand-fan.hand-row{display:flex;justify-content:safe center;align-items:flex-end;gap:9px;height:145px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:10px 16px 8px;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#a6a5b66b transparent}
#hand.hand-row{gap:4px}
.hand-row .hand-card{position:relative;inset:auto;flex:0 0 86px;width:86px;transform:none!important;transition:box-shadow .12s,border-color .12s;touch-action:pan-x;z-index:1!important}.hand-row .hand-card img{width:100%;display:block;pointer-events:none}.hand-row .hand-card:hover,.hand-row .hand-card:focus-visible{outline:2px solid #f3d6ab;outline-offset:2px;box-shadow:none}.hand-row .hand-card.mulligan-selected{outline:3px solid #f3d6ab;filter:none}.hand-row .hand-card small{position:absolute;bottom:4px;left:0;right:0;font-size:9px}
@keyframes arrow-travel{to{stroke-dashoffset:-46}}
@media(max-width:600px){.action-notices{top:108px;width:155px;right:8px}.action-notice{gap:6px;padding:6px 8px}.action-notice img{width:26px;height:36px}.action-notice strong{font-size:10px}.action-notice small{font-size:8px}.action-notice span{font-size:9px}.guard-display{top:23%;padding:12px}.guard-reveals{gap:7px}.guard-reveals img{max-height:140px}.guard-reveals figcaption{font-size:9px}.guard-versus{font-size:11px}.hand-fan.hand-row{height:120px;gap:8px;padding-inline:12px}.hand-row .hand-card{flex-basis:68px;width:68px}.phase-announcement{top:39%}}
@media(max-height:600px){.action-notices{top:58px;width:180px;max-width:25vw}.action-notice{padding:5px 8px}.action-notice img{width:25px;height:35px}.guard-display{top:15%;width:min(500px,75vw);padding:8px 14px}.guard-display h2{font-size:20px;margin:0 0 6px}.guard-display small{font-size:9px}.guard-reveals figure{flex-basis:65px}.guard-reveals img{max-height:85px}.guard-reveals figcaption{font-size:8px;margin-top:3px}.guard-versus{margin-top:6px;font-size:10px}.phase-announcement{padding:7px 16px}.phase-announcement strong{font-size:25px}.hand-fan.hand-row{height:84px;padding:6px 14px;gap:7px}.hand-row .hand-card{flex-basis:47px;width:47px}}
@media(prefers-reduced-motion:reduce){.attack-arrow.committed .arrow-line{animation:none}.fight-board{transform-style:flat}}

/* Short announcements and card motion for costs, gifts and card states. */
.mechanic-display{position:fixed;z-index:61;left:50%;top:39%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 24px);padding:12px 18px;border-block:1px solid #ffffff80;border-radius:14px;background:linear-gradient(110deg,#243044bd,#172131a8);backdrop-filter:blur(5px);color:#fff;pointer-events:none;box-shadow:0 8px 24px #0004}
.mechanic-display[hidden]{display:none}.mechanic-display>div:last-child{min-width:0}.mechanic-display small,.mechanic-display span{display:block;font-size:11px;line-height:1.5}.mechanic-display small{color:#d8e5f9}.mechanic-display strong{display:flex;align-items:center;gap:7px;margin:4px 0;font-size:clamp(16px,2.5vw,24px);font-style:italic}.mechanic-icon{width:20px;height:20px;object-fit:contain}.mechanic-faces{display:flex;gap:5px;flex:none}.mechanic-faces>img{width:64px;max-height:94px;object-fit:contain;border-radius:3px}.mechanic-display[data-effect=gift] .mechanic-faces>img{width:90px;max-height:132px}
.mechanic-faces>img+img{margin-left:-38px}
.mechanic-card-ghost{position:fixed;pointer-events:none;transform-origin:center}.mechanic-card-ghost img{position:absolute;left:50%;top:50%;object-fit:contain;border-radius:3px;max-width:none}
.bind-marker{position:absolute;left:88.8%;top:12%;transform:translate(-50%,-50%);padding:4px 7px;min-height:0!important;font-size:clamp(8px,1vw,11px);border:1px solid #ffffff80;background:#202735cc;color:#fff;border-radius:5px;z-index:3}.opponent .bind-marker{transform:translate(-50%,-50%) rotate(180deg)}
.delete-tag{position:absolute;left:0;right:0;top:40%;padding:3px 0;border:1px solid #ffffff80;background:#252535de;color:#fff;font-weight:800;font-size:clamp(8px,1.2vw,12px);letter-spacing:.06em}.opponent .delete-tag{transform:rotate(180deg)}
@media(max-width:600px){.mechanic-display{padding:10px 12px;gap:10px}.mechanic-faces>img{width:43px;max-height:64px}.mechanic-display[data-effect=gift] .mechanic-faces>img{width:65px;max-height:95px}.mechanic-display span,.mechanic-display small{font-size:10px}.mechanic-display strong{font-size:16px}}
@media(max-width:600px){.mechanic-faces>img+img{margin-left:-28px}}
@media(max-height:500px){.mechanic-display{top:45%;padding:8px 12px;gap:10px}.mechanic-faces>img{width:38px;max-height:56px}.mechanic-display[data-effect=gift] .mechanic-faces>img{width:56px;max-height:82px}.mechanic-display strong{font-size:16px}.mechanic-display span,.mechanic-display small{font-size:10px}}

/* --- End: match-feedback.css ---
 */

/* --- Begin: ragnarok-ui.css --- */
/* Public Ragnarok Order Zone. This overlay does not change V1 field geometry. */
.order-zone-stack{position:absolute;left:12.8%;top:20%;width:10.1%;aspect-ratio:350/510;min-height:0!important;padding:0;border:1px solid #bfe9ff70;border-radius:5px;background:#081824b8!important;transform:translate(-50%,-50%);z-index:3;overflow:visible;box-shadow:0 0 12px #3ac8ff42,inset 0 0 12px #1aa7d729;touch-action:manipulation}
.order-zone-stack:hover,.order-zone-stack:active{transform:translate(-50%,-50%)}
.order-zone-stack>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:4px;transform:translate(var(--order-offset),calc(var(--order-offset)*-.35));filter:drop-shadow(0 2px 3px #000a)}
.order-zone-count{position:absolute;left:-12%;bottom:-13%;width:124%;padding:2px 1px;border:1px solid #bfe9ff6e;border-radius:5px;background:#081824ed;color:#e6f8ff;font-size:clamp(7px,.85vw,10px);font-weight:800;line-height:1.25;white-space:nowrap;text-align:center;box-shadow:0 2px 5px #0008}
.order-zone-stack>small{position:absolute;right:-16%;top:-12%;padding:2px 4px;border:1px solid #ffe39b99;border-radius:5px;background:#39250bed;color:#ffe9ae;font-size:clamp(6px,.7vw,9px);font-weight:900;line-height:1.2;white-space:nowrap}
.opponent .order-zone-count,.opponent .order-zone-stack>small{transform:rotate(180deg)}
.battle-v2 .order-zone-stack{left:12.5%;top:19%;width:9.4%}
@media(max-width:600px) and (orientation:portrait){.order-zone-stack{left:13%;top:18.5%;width:9.4%}.order-zone-count{font-size:7px}.order-zone-stack>small{font-size:6px}}
@media(max-height:600px) and (orientation:landscape){.order-zone-stack{left:12.3%;top:18.5%;width:9.2%}.order-zone-count{bottom:-12%;font-size:7px}.order-zone-stack>small{font-size:6px}}
@media(prefers-reduced-motion:reduce){.order-zone-stack{transition:none}}

/* --- End: ragnarok-ui.css ---
 */

/* --- Begin: g-assist.css --- */
/* Show all private top-five choices together in a compact panel. */
/* Card pickers and public hand reveals use a single horizontal strip. */
.fight-page.choosing-g-assist .setup-layer{inset:0 0 12px}
.fight-page .setup-panel.g-assist-panel{box-sizing:border-box;width:min(640px,calc(100% - 24px));max-width:640px;max-height:calc(100dvh - 100px);padding:16px;margin:12px;border-radius:18px;border-color:#72bff08a;background:linear-gradient(145deg,#182b41f5,#0c1728f5);box-shadow:0 12px 45px #0008;overscroll-behavior:contain}
.g-assist-panel h2{font-size:17px;line-height:1.45}
.g-assist-panel p{font-size:12px;margin:8px 0}
.fight-page .g-assist-panel .choice-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-height:none!important;overflow:visible;margin:12px 0}
.fight-page .g-assist-panel .choice{box-sizing:border-box;width:100%;max-width:none;min-width:0;padding:6px;gap:5px;border:1px solid #76c8f080;background:#12263b;border-radius:10px;color:#e9f5ff}
.fight-page .g-assist-panel .choice:disabled{opacity:1;background:#182230;border-color:#64748b80;color:#9cabbc}
.fight-page .g-assist-panel .choice:disabled img{filter:saturate(.5);opacity:.72}
.fight-page .g-assist-panel .choice[aria-pressed=true]{border-color:#97ecff;outline:2px solid #97ecff;box-shadow:0 0 18px #6adfff40}
.fight-page .g-assist-panel .choice img{display:block;width:100%;height:auto;aspect-ratio:350/510;object-fit:contain;border-radius:5px}
.g-assist-index{font-size:11px;line-height:1.3;white-space:nowrap}
.g-assist-panel .choice>span{font-size:10px;line-height:1.3;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-assist-panel [data-confirm-choice]{position:static!important;width:100%;min-height:44px;font-size:13px;margin-top:4px!important;border-radius:10px}
@media(max-width:600px) and (orientation:portrait){.fight-page .setup-panel.g-assist-panel{width:min(390px,calc(100% - 20px));padding:12px}.fight-page .g-assist-panel .choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.g-assist-panel h2{font-size:15px}}
@media(max-height:600px) and (orientation:landscape){.fight-page .setup-panel.g-assist-panel{width:min(550px,calc(100% - 20px));padding:10px;max-height:calc(100dvh - 78px)}.g-assist-panel h2{font-size:13px;margin:0}.g-assist-panel p{font-size:10px;margin:4px 0}.fight-page .g-assist-panel .choice-grid{margin:6px 0}.fight-page .g-assist-panel .choice{padding:4px;gap:3px}.fight-page .g-assist-panel .choice img{height:min(96px,27dvh);width:auto;max-width:100%}.g-assist-index{font-size:10px}.g-assist-panel [data-confirm-choice]{font-size:12px}}

/* --- End: g-assist.css ---
 */

/* --- Begin: deck-animation.css --- */
.deck3d-overlay{position:fixed;inset:0;overflow:hidden;pointer-events:none!important;z-index:61;isolation:isolate}.deck3d-overlay *{pointer-events:none!important;box-sizing:border-box}.deck3d-scene{position:absolute;width:0;height:0;perspective:750px;transform-style:preserve-3d}.deck3d-packet{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}.deck3d-face,.deck3d-back{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:3px;backface-visibility:hidden}.deck3d-face{transform:translateZ(var(--packet-depth));box-shadow:0 1px 2px #0008}.deck3d-back{transform:rotateY(180deg);background:#172434}.deck3d-edge{position:absolute;background:repeating-linear-gradient(0deg,#c4c9d0 0 1px,#515d6b 1px 2px);backface-visibility:visible}.deck3d-edge-right{left:100%;top:0;width:var(--packet-depth);height:100%;transform-origin:0 50%;transform:rotateY(-90deg)}.deck3d-edge-bottom{left:0;top:100%;width:100%;height:var(--packet-depth);transform-origin:50% 0;transform:rotateX(90deg);background:repeating-linear-gradient(180deg,#d8dce1 0 1px,#697582 1px 2px)}.deck3d-shadow{position:absolute;border-radius:35%;background:#000;filter:blur(8px)}.deck3d-source{visibility:hidden!important}

/* --- End: deck-animation.css ---
 */

/* --- Begin: foil-effects.css --- */
.shop-menu{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 28px}.shop-menu button{padding:12px 20px;border:1px solid #8dd5ff55;border-radius:14px}.shop-menu button[aria-pressed=true]{background:linear-gradient(120deg,#396699,#433873);border-color:#a9e4ff;box-shadow:0 0 20px #74caff33}
.skin-note{color:#b9cae4;font-size:14px;line-height:1.7}
.foil-workbench{display:grid;grid-template-columns:minmax(210px,310px) minmax(0,1fr);gap:30px;padding:26px;border:1px solid #98baff55;border-radius:24px;background:radial-gradient(ellipse at 10% 20%,#685bad44,transparent 60%),#111c30;margin-bottom:24px;min-width:0}
.foil-display{max-width:260px;width:100%;margin:auto}.foil-preview{aspect-ratio:350/510;box-shadow:0 0 0 1px #d2deee55,0 12px 35px #0008}.foil-preview>img{height:100%;object-fit:contain}.foil-display small{display:block;text-align:center;margin-top:10px;color:#b7c8e2}
.foil-controls{min-width:0}.foil-controls h2{overflow-wrap:anywhere}.foil-chance{font-size:40px;color:#bcddff;margin:12px 0}.foil-controls button{min-height:48px;width:100%}.foil-controls p{line-height:1.7}.foil-result{min-height:25px;color:#ffdc8a}.foil-result.success{color:#9effd4}.foil-workbench.foil-won .foil-preview{animation:foil-celebrate .8s ease-out}
.foil-search{display:grid;gap:7px;margin:20px 0}.foil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:14px}.foil-choice{min-width:0;overflow:hidden;padding:10px;border-radius:14px}.foil-choice>img{display:block;width:100%;aspect-ratio:350/510;object-fit:contain;border-radius:7px}.foil-choice b,.foil-choice small{display:block;overflow-wrap:anywhere;margin-top:7px}.foil-choice[aria-pressed=true]{outline:2px solid #90d5ff}


@keyframes foil-celebrate{0%{transform:scale(.98)}50%{transform:scale(1.015)}100%{transform:scale(1)}}
@media(max-width:600px){.detail-art-preview.foil-active::before,.detail-art-preview.foil-active::after{bottom:48px}.foil-workbench{grid-template-columns:1fr;gap:18px;padding:18px}.foil-display{max-width:165px}.foil-chance{font-size:30px}.foil-controls h2{font-size:18px}.foil-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.foil-choice{padding:6px;font-size:11px}.shop-menu{gap:6px}.shop-menu button{padding:10px 12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.foil-active::before,.foil-active::after,.collector-front::before,.collector-front::after,.foil-preview::before,.foil-preview::after,.foil-workbench.foil-won .foil-preview{animation:none!important}}

.foil-modes{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px}.foil-modes button{border-radius:12px;border:1px solid #a9dfff55;padding:11px 18px}.foil-modes button[aria-pressed=true]{background:linear-gradient(120deg,#315b81,#49416b);border-color:#acdfff}
.foil-deck-picker{display:grid;gap:8px;margin:20px 0;max-width:700px}.foil-deck-picker select{min-width:0;width:100%;font:inherit;background:#172138;color:#fff;border:1px solid #a9dfff55;border-radius:10px;padding:12px}.foil-deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
@media(max-width:600px){.foil-modes{gap:7px}.foil-modes button{flex:1;padding:11px 8px;font-size:12px}.foil-deck-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}


/* Border ownership is separate from the new holographic surface. Original artwork stays untouched. */
.foil-finish,.foil-shine,.collector-gloss{display:none!important}
.foil-card,.detail-art-face,.foil-preview{display:block;position:relative;isolation:isolate;border-radius:3.4% / 2.3%}
.foil-card>img,.foil-preview>img{display:block;width:100%;height:auto;border-radius:inherit}
.unit-art{position:absolute!important;inset:0;display:block;border-radius:inherit;pointer-events:none;transition:transform .25s}
.unit-slot.rest .unit-art{transform:rotate(90deg)}.unit-slot.rest .unit-art>img{transform:none}
.unit-slot .unit-stat,.unit-slot .gift-badge,.damage-card .spent{z-index:3}
.cfv-clan-glow{position:absolute;box-sizing:border-box;inset:0;border:2px solid rgba(var(--core-rgb),.9);border-radius:inherit;pointer-events:none;z-index:2;box-shadow:0 0 10px 2px rgba(var(--glow-rgb),.7),0 0 3px 1px rgba(var(--core-rgb),.9),inset 0 0 7px 1px rgba(var(--core-rgb),.35);animation:cfv-clan-breathe 3.5s ease-in-out infinite}
@keyframes cfv-clan-breathe{0%,100%{opacity:.85;filter:drop-shadow(0 0 2px rgba(var(--glow-rgb),.5))}50%{opacity:1;filter:drop-shadow(0 0 7px rgba(var(--glow-rgb),.9))}}
.damage-card,.damage-card.cfv-holo-surface,.damage-card.foil-card,.damage-card.foil-active,.damage-card.holo-active{position:absolute!important;border-radius:var(--vg-card-corners,6px)}
.damage-card>.cfv-clan-glow,.damage-card>.cfv-holo-sheen,.damage-card>.cfv-holo-glare{inset:0;border-radius:inherit}
.foil-modes button{flex:1 1 200px}.foil-controls small{overflow-wrap:anywhere}
.card-effect-settings{padding:18px;background:#162b4420;border:1px solid #58799a66;border-radius:12px;margin:16px 0}.card-effect-settings label{display:inline-flex;align-items:center;gap:8px;margin:6px 18px 6px 0;min-height:44px}.card-effect-settings input{width:20px;height:20px;accent-color:#ff8b78}.card-effect-settings p{font-size:12px;margin:8px 0 0}

/* --- End: foil-effects.css ---
 */

/* --- Begin: vanguard-holo-fx.css --- */
/* Sheen, glare and vivid colours from the supplied Vanguard Holo reference. */
@property --gloss-x{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --gloss-y{syntax:'<percentage>';inherits:true;initial-value:35%}
@property --gl-angle{syntax:'<angle>';inherits:true;initial-value:125deg}
.cfv-holo-surface{position:relative;isolation:isolate;border-radius:inherit;--gl-x:var(--gloss-x,50%);--gl-y:var(--gloss-y,35%)}
.cfv-holo-vivid{filter:contrast(118%) saturate(125%) brightness(104%)!important}
.cfv-holo-sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;opacity:var(--holo-intensity,.72);mix-blend-mode:color-dodge;background:repeating-linear-gradient(var(--gl-angle,120deg),rgba(255,60,140,.45) 0%,rgba(255,170,20,.5) 12%,rgba(255,235,40,.5) 24%,rgba(50,240,140,.5) 36%,rgba(0,225,255,.55) 48%,rgba(150,90,255,.5) 60%,rgba(255,60,200,.45) 72%,rgba(255,60,140,.45) 84%),radial-gradient(circle at var(--gl-x,50%) var(--gl-y,35%),rgba(255,255,255,.85) 0%,rgba(255,255,255,.2) 18%,transparent 42%);background-size:200% 200%,160% 160%;animation:cfv-prismatic-sweep 6s ease-in-out infinite;contain:paint}
.cfv-holo-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;mix-blend-mode:screen;opacity:var(--glare-opacity,.6);background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.08) 32%,rgba(255,255,255,.6) 47%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.6) 53%,rgba(255,255,255,.08) 68%,transparent 85%),radial-gradient(circle at var(--gl-x,50%) var(--gl-y,35%),rgba(255,255,255,.9) 0%,rgba(255,255,255,.25) 20%,transparent 48%);background-size:260% 260%,140% 140%;animation:cfv-specular-sweep 4.5s ease-in-out infinite}
.cfv-holo-interactive{transform:perspective(1000px) rotateX(var(--holo-rx,0deg)) rotateY(var(--holo-ry,0deg));transition:transform .1s ease-out;transform-style:preserve-3d}
.foil-preview.holo-active{cursor:grab;touch-action:pan-y;transform-style:preserve-3d}
.collector-card:not(.foil-manual){animation:cfv-full-orbit 9s ease-in-out infinite}
.collector-stage{overflow:visible}
.foil-motion-paused .collector-card,.foil-motion-paused .cfv-holo-sheen,.foil-motion-paused .cfv-holo-glare,.foil-motion-paused .cfv-clan-glow{animation-play-state:paused!important}
.collector-gloss,.foil-shine,.foil-finish{display:none!important}
@keyframes cfv-full-orbit{0%,100%{transform:rotateX(-6deg) rotateY(-30deg);--gloss-x:12%;--gloss-y:32%;--gl-angle:90deg}50%{transform:rotateX(6deg) rotateY(30deg);--gloss-x:88%;--gloss-y:68%;--gl-angle:150deg}}
@keyframes cfv-prismatic-sweep{0%,100%{background-position:0% 20%,30% 30%}50%{background-position:100% 80%,70% 70%}}
@keyframes cfv-specular-sweep{0%{background-position:-80% 0%,50% 35%}50%{background-position:180% 100%,50% 35%}100%{background-position:-80% 0%,50% 35%}}
@media(prefers-reduced-motion:reduce){.collector-card:not(.foil-manual),.cfv-holo-sheen,.cfv-holo-glare,.cfv-clan-glow{animation:none!important}.cfv-holo-interactive{transition:none}}
.collector-front.cfv-holo-surface,.damage-card.cfv-holo-surface,.damage-card.foil-card,.damage-card.foil-active,.damage-card.holo-active{position:absolute!important}.collector-gyro{position:absolute;left:12px;bottom:12px;z-index:5;font-size:12px;padding:8px 12px}.damage-card>.cfv-clan-glow,.damage-card>.cfv-holo-sheen,.damage-card>.cfv-holo-glare{inset:0;border-radius:inherit}

/* --- End: vanguard-holo-fx.css ---
 */

/* --- Begin: drive-check-fx.css --- */
/* Drive Check presentation (2026-10-15). Works on both battle layouts (body.drive-check-fx is set by play.js).
   The revealed card sits at the screen edge, tilted, with trigger-coloured light: rotating rays behind it,
   one light sweep across the face, a shock ring on reveal and the card-template trigger sticker. */
body.drive-check-fx{--dc-card:158px;--dc-sticker:168px}

/* Camera: real 3D while the deck is in focus. */
body.drive-check-fx.check-camera-active #board-window{perspective:900px;perspective-origin:50% 44%}
body.drive-check-fx.check-camera-active #board{transform-style:preserve-3d;will-change:transform}
body.drive-check-fx .check-focus{outline:2px solid #fff8ca;box-shadow:0 0 9px #fff,0 0 28px var(--dc-glow,#ffd65a),7px 10px 13px #000d}

/* Panel: no box, just the card and its light. Own checks on the right, the opponent's on the left. */
body.drive-check-fx .check-display,body.drive-check-fx .check-display.read{
  --dc-glow:#d8e7fa;--dc-soft:#8bb9ef42;
  left:auto;right:22px;top:auto;bottom:13%;width:184px;padding:0;display:block;overflow:visible;isolation:isolate;
  pointer-events:none;border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none;
  color:#fff;text-align:center;opacity:1;transform:rotate(-6deg);transition:transform .35s cubic-bezier(.2,.8,.25,1)}
body.drive-check-fx .check-display[hidden]{display:none}
body.drive-check-fx .check-display.check-opponent,body.drive-check-fx .check-display.read.check-opponent{left:22px;right:auto;top:13%;bottom:auto;transform:rotate(6deg)}
body.drive-check-fx .check-display[data-trigger="critical"]{--dc-glow:#ffd436;--dc-soft:#ffb3005c}
body.drive-check-fx .check-display[data-trigger="draw"]{--dc-glow:#ff7548;--dc-soft:#ff4b284f}
body.drive-check-fx .check-display[data-trigger="heal"]{--dc-glow:#57ef8a;--dc-soft:#20d96350}
body.drive-check-fx .check-display[data-trigger="front"]{--dc-glow:#ff5aa8;--dc-soft:#f2268b4f}
body.drive-check-fx .check-display[data-trigger="none"]{--dc-glow:#c6d8ef;--dc-soft:#82a6c329}

/* Light behind the card: a soft aura, plus rotating rays once a trigger is revealed. */
body.drive-check-fx .check-display::before{content:"";position:absolute;z-index:-2;left:50%;top:44%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  background:radial-gradient(circle,var(--dc-soft) 0 26%,transparent 68%);filter:blur(10px);animation:dc-aura 1s ease-in-out infinite alternate}
body.drive-check-fx .check-display.revealed::before{
  background:radial-gradient(circle,var(--dc-soft) 0 24%,transparent 66%),
    repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--dc-glow) 70%,transparent) 0 6deg,transparent 6deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);
  filter:blur(1px);animation:dc-rays 9s linear infinite,dc-aura 1s ease-in-out infinite alternate}
/* Shock ring on reveal. */
body.drive-check-fx .check-display.revealed::after{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  border:3px solid var(--dc-glow);box-shadow:0 0 18px var(--dc-glow),inset 0 0 14px var(--dc-glow);opacity:0;animation:dc-ring .7s cubic-bezier(.2,.8,.3,1) 1 both}
body.drive-check-fx .check-display.preparing::before,body.drive-check-fx .check-display.preparing::after{display:none}

/* Owner · DRIVE CHECK tag: slanted, game style. */
body.drive-check-fx .check-display>small,body.drive-check-fx .check-display.read>small{
  position:absolute;z-index:4;left:-14px;right:-14px;top:-26px;padding:5px 12px;overflow:hidden;text-overflow:ellipsis;
  border:1px solid color-mix(in srgb,var(--dc-glow) 70%,white);background:#07101ee6;box-shadow:0 0 12px var(--dc-soft);
  color:#fff;font-size:10px;font-weight:900;font-style:italic;letter-spacing:.06em;line-height:1;white-space:nowrap;text-transform:uppercase;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
body.drive-check-fx .check-display.preparing>small{visibility:hidden}

/* The card face, with one light sweep after the flip. */
body.drive-check-fx .check-face-wrap{position:relative;z-index:3;display:block;width:var(--dc-card);margin:0 auto;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 1px #fffc,0 0 10px #fff,0 0 34px var(--dc-glow),0 16px 30px #000e}
body.drive-check-fx .check-display .check-face,body.drive-check-fx .check-display.read .check-face{display:block;width:100%;max-height:none;margin:0;aspect-ratio:350/510;object-fit:cover;border:0;border-radius:0}
body.drive-check-fx .check-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffffb8 48%,#ffffff40 54%,transparent 64%);transform:translateX(-120%);pointer-events:none}
body.drive-check-fx .check-display.revealed .check-shine{animation:dc-shine .75s .08s ease-out 1 both}
body.drive-check-fx .check-display>strong,body.drive-check-fx .check-display.read>strong{display:none}

/* Trigger sticker: overlaps the inner edge of the card so the field stays readable. */
body.drive-check-fx .check-display .check-trigger,body.drive-check-fx .check-display.read .check-trigger{
  position:absolute;z-index:4;right:118px;top:30px;width:var(--dc-sticker);height:auto;padding:0;background:none;border:0;
  transform:rotate(-8deg);transform-origin:75% 50%;filter:drop-shadow(0 0 6px #fff9) drop-shadow(0 0 22px var(--dc-glow))}
body.drive-check-fx .check-display.check-opponent .check-trigger,body.drive-check-fx .check-display.read.check-opponent .check-trigger{left:118px;right:auto;transform:rotate(8deg);transform-origin:25% 50%}
body.drive-check-fx .check-display .check-trigger[hidden]{display:none}
body.drive-check-fx .check-display .check-trigger-icon,body.drive-check-fx .check-display .check-trigger-label{display:none}
body.drive-check-fx .check-display .check-trigger-sticker{display:block;width:100%;height:auto;object-fit:contain}
/* No sticker art (e.g. an unknown trigger): fall back to the icon and label. */
body.drive-check-fx .check-display .check-trigger:not(:has(.check-trigger-sticker)) .check-trigger-icon,
body.drive-check-fx .check-display .check-trigger:not(:has(.check-trigger-sticker)) .check-trigger-label{display:inline-block}

/* Bonus under the card. */
body.drive-check-fx .check-display .check-bonus{position:relative;z-index:4;display:inline-block;margin-top:8px;padding:4px 12px;
  background:color-mix(in srgb,var(--dc-glow) 22%,#07101e);border:1px solid var(--dc-glow);color:#fff;font-size:10px;font-weight:800;font-style:italic;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);text-shadow:0 1px 2px #000}
body.drive-check-fx .check-display.preparing .check-bonus{visibility:hidden}

/* After the reveal the card waits for the power choice as a smaller side card. */
body.drive-check-fx .check-display.read{transform:rotate(-6deg) scale(.72);transform-origin:100% 100%}
body.drive-check-fx .check-display.read.check-opponent{transform:rotate(6deg) scale(.72);transform-origin:0 0}
body.drive-check-fx .check-display.read::before{animation:none;opacity:.55}

@media(max-width:600px) and (orientation:portrait){
  body.drive-check-fx{--dc-card:128px;--dc-sticker:138px}
  body.drive-check-fx .check-display,body.drive-check-fx .check-display.read{right:6px;bottom:15%;width:150px}
  body.drive-check-fx .check-display.check-opponent,body.drive-check-fx .check-display.read.check-opponent{left:6px;right:auto;top:15%;bottom:auto}
  body.drive-check-fx .check-display .check-trigger{right:94px;top:22px}
  body.drive-check-fx .check-display.check-opponent .check-trigger{left:94px;right:auto}
  body.drive-check-fx .check-display>small{top:-22px;font-size:8px;padding:4px 7px}
  body.drive-check-fx .check-display::before{width:260px;height:260px;margin:-130px 0 0 -130px}
}
@media(prefers-reduced-motion:reduce){
  body.drive-check-fx .check-display::before,body.drive-check-fx .check-display.revealed::before{animation:none}
  body.drive-check-fx .check-display.revealed::after,body.drive-check-fx .check-display.revealed .check-shine{animation:none;opacity:0}
}
@keyframes dc-aura{from{opacity:.6;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
@keyframes dc-rays{to{rotate:360deg}}
@keyframes dc-ring{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
@keyframes dc-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

/* 2026-10-15 owner: nothing shows until the card back has flown in and flipped (no early empty frame),
   and only a revealed trigger glows; a non-trigger card keeps a plain shadow. */
body.drive-check-fx .check-display.preparing{visibility:hidden}
body.drive-check-fx .check-display .check-face-wrap{box-shadow:0 0 0 1px #fffc,0 16px 30px #000e;transition:box-shadow .3s ease-out}
body.drive-check-fx .check-display.revealed .check-face-wrap{box-shadow:0 0 0 1px #fffc,0 0 10px #fff,0 0 34px var(--dc-glow),0 16px 30px #000e}
body.drive-check-fx .check-display:not(.revealed)::before{display:none}

/* --- End: drive-check-fx.css ---
 */

/* --- Begin: final-turn-effects.css --- */
.final-turn-shelf{margin:28px 0}.final-turn-product{display:block;width:min(100%,430px);padding:0;overflow:hidden;text-align:left;border:1px solid #ff9b6d55;border-radius:16px;background:linear-gradient(145deg,#251d2f,#141b2c);color:#f7f4ef}.final-turn-cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center}.final-turn-product-info{display:grid;gap:9px;padding:18px}.final-turn-product-info>b{font-size:1.65rem}.final-turn-product-info>strong{color:#ffc687}.final-turn-product-info>small{color:#b8bfd0}.final-turn-store{width:min(940px,calc(100vw - 28px));max-height:90dvh;padding:24px;border-radius:18px;background:#141c2c;color:#edf2ff;border:1px solid #586984}.final-turn-store-head{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center}.final-turn-store-head>img{border-radius:12px}.final-turn-store-head h3{font-size:1.5rem;margin:10px 0}.final-turn-store-head p{color:#c3ccdc}.final-turn-store .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.final-turn-store .dialog-head h2{margin:0 0 18px}.final-turn-store button:disabled{opacity:.5;cursor:default}.final-turn-result{min-height:1.6em;color:#ffd491!important}.final-turn-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.final-turn-cards>button{display:flex;flex-direction:column;align-items:center;gap:8px;background:#1a2538;border:1px solid #54627c;padding:14px 12px;border-radius:12px;color:inherit}.final-turn-cards img{width:min(100%,135px);aspect-ratio:350/510;object-fit:contain}.final-turn-cards b{font-size:.95rem}.final-turn-cards small{color:#b9c6dc}.final-turn-cards span{color:#ffc789}.final-turn-preview{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;overflow:hidden;background:#000;color:#fff;border:0;border-radius:0}.final-turn-preview::backdrop{background:#000}.final-turn-preview video{display:block;width:100%;height:100%;object-fit:cover}.final-turn-preview>.close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:42px;height:42px;padding:0;border:1px solid #ffffff55;border-radius:50%;background:#10172488;color:#fff;font-size:20px}.final-turn-preview-status,.final-turn-preview-retry{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.final-turn-preview-status{margin:0;pointer-events:none}.final-turn-preview-retry{padding:14px 22px;border:1px solid #ffffff66;border-radius:12px;background:#182033;color:#fff}.final-turn-preview [hidden]{display:none!important}.final-turn-settings{padding:20px;margin:22px 0;border:1px solid #dca16766;border-radius:14px;background:linear-gradient(110deg,#2a2230,#172336)}.final-turn-settings h2{margin:0 0 16px}.final-turn-settings label{display:flex;align-items:center;gap:10px;margin:12px 0}.final-turn-settings select{max-width:100%;width:570px}.final-turn-settings p{color:#c6d0e0}.final-turn-owned-preview{margin:4px 8px 4px 0;font-size:.85rem}.final-turn-cinematic[hidden]{display:none!important}.final-turn-cinematic{position:fixed;inset:0;width:100vw;height:100dvh;z-index:2147483000;display:grid;place-items:center;background:#000;contain:layout paint}.final-turn-cinematic video{width:100%;height:100%;object-fit:cover;transform:translateZ(0)}body.final-turn-cinematic-active{overflow:hidden}body.final-turn-cinematic-active>.fight-header,body.final-turn-cinematic-active>.fight-table,body.final-turn-cinematic-active>#cfv-cache-report{visibility:hidden}body.final-turn-cinematic-active .fight-table *{animation-play-state:paused!important}@media(max-width:600px){.final-turn-store{padding:16px}.final-turn-store-head{grid-template-columns:1fr;gap:16px}.final-turn-store-head>img{max-height:150px}.final-turn-cards{gap:7px}.final-turn-cards>button{padding:9px 5px}.final-turn-cards b{font-size:.76rem}.final-turn-cards small{font-size:.7rem}.final-turn-settings{padding:16px}.final-turn-store-head h3{font-size:1.25rem}}

/* --- End: final-turn-effects.css ---
 */

/* --- Begin: match-fx-source.css --- */
/* Display rules extracted from the supplied mockup; controls stay native. */
.fx-layer{position:fixed;inset:0;z-index:80;overflow:hidden;pointer-events:none}.fx-sprite{position:fixed;object-fit:contain;transform-origin:center;mix-blend-mode:screen;pointer-events:none;filter:drop-shadow(0 0 9px #73dfff)}.fx-warm{filter:sepia(1) saturate(3) drop-shadow(0 0 10px #ffde70)}.fx-card-flight{position:fixed;width:50px;height:72px;object-fit:cover;border-radius:5px;border:1px solid #d7f5ff;box-shadow:0 0 19px #76dfff90;transform-origin:center;z-index:2}.fx-toast{position:fixed;transform:translate(-50%,-50%);padding:8px 15px;background:linear-gradient(120deg,#102c43ed,#071222ef);border:1px solid #88dfff;border-radius:9px;color:#eafdff;font-family:system-ui,sans-serif;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 0 22px #67dfff55;text-align:center;max-width:90vw}.fx-toast.gold{border-color:#ffdf82;background:linear-gradient(120deg,#453015ed,#121526ef);color:#fff0ac;box-shadow:0 0 25px #ffcf6640}.fx-toast small{display:block;color:#99bfd7;font-size:10px;margin-top:4px;font-weight:400}.fx-ability-badges{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:flex;gap:3px;z-index:10;white-space:nowrap;pointer-events:none}.opponent .fx-ability-badges{top:auto;bottom:-17px;transform:translateX(-50%) rotate(180deg)}.fx-ability-badges span{display:flex;align-items:center;gap:3px;background:#083546f2;border:1px solid #72e9ff;color:#b5f5ff;padding:2px 5px;border-radius:5px;font-size:9px;box-shadow:0 0 10px #76dcff55}.fx-ability-badges img{width:12px;height:12px;object-fit:contain}.fx-counting{color:#eeffff!important;text-shadow:0 0 7px #61dbff}@media(prefers-reduced-motion:reduce){.fx-sprite{mix-blend-mode:normal}.fx-counting{text-shadow:none}}
.fx-ability-badges .fx-boost-icon{width:18px;height:18px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}.fx-ability-badges .fx-boost-icon img{width:18px;height:18px;filter:drop-shadow(0 0 3px #6ce8ff)}.fx-power-value{font-variant-numeric:tabular-nums}.fx-counting{font-size:14px!important;z-index:15;outline:1px solid #78e9ff;box-shadow:0 0 12px #62d7ff70}.fx-critical-reel{display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom;line-height:1.2em;min-width:.7em}.fx-critical-digits{display:block;line-height:1.2em}.fx-critical-digits>span{display:block;height:1.2em}.fx-critical-value{color:#ffe58d}.fx-active-attack{opacity:1!important;animation:none!important}.fx-active-attack .arrow-line{stroke:#ffdf83!important;stroke-width:5!important;stroke-dasharray:none!important;filter:drop-shadow(0 0 4px #ffc566)}.fx-active-attack .arrow-shadow{stroke:#152136!important;stroke-width:9!important}
.match-fx.fx-perspective .board-half{transform-style:preserve-3d;isolation:auto;overflow:visible}
.match-fx.fx-perspective .board-half.own{border-top:2px solid #5de0fa88}
.match-fx.fx-perspective .board-half.opponent{transform:rotateZ(180deg)}
.match-fx.fx-perspective .unit-art{box-shadow:3px 5px 3px #000b,0 0 1px 1px #bddcf688}
.match-fx.fx-perspective .unit-slot{transform:translate(-50%,-50%) translateZ(3px);transform-style:preserve-3d}
.match-fx .deck-pile{overflow:visible!important;isolation:isolate;box-shadow:none!important;transform-style:preserve-3d}
.match-fx .deck-pile img{position:relative;z-index:2;border:1px solid #adbacb;border-radius:5%;box-shadow:0 0 1px #fff}
.match-fx .fx-deck-edge{position:absolute;inset:0;z-index:0;border-radius:5%;border:1px solid #687d91;background:linear-gradient(90deg,#bac2cd,#f1f1e9 55%,#b2bfcc);transform:translate(calc(var(--edge)*.65px),calc(var(--edge)*1.65px));pointer-events:none;box-shadow:1px 2px 2px #0006}
.match-fx.fx-perspective .deck-pile{transform:translate(-50%,-50%) translateZ(7px)}
.match-fx .deck-pile .pile-caption{z-index:3;bottom:calc(-20px - var(--stack-height,0px))}
.match-fx.fx-perspective .deck-pile{isolation:auto}
.match-fx.fx-perspective .deck-pile img{transform:translateZ(calc(var(--stack-height)*1.3));box-shadow:2px 4px 5px #0009}
.match-fx.fx-perspective .fx-deck-edge{transform:translate(calc(var(--edge)*.45px),calc(var(--edge)*.8px)) translateZ(calc((var(--stack-height) - var(--edge)*1px)*1.3));box-shadow:0 1px 0 #ffffffb3,1px 2px 1px #0008}
.match-fx.battle-v2 .native-v2-field .damage-stack{left:3.5%!important;width:14.5%!important;top:24%!important;height:70%!important}
.match-fx.fx-perspective .unit-art{isolation:auto!important;transform-style:preserve-3d;transform:translateZ(2px);box-shadow:2px 5px 4px #000b,0 0 1px 1px #b7d6ec}
.match-fx.fx-perspective .unit-slot.rest .unit-art{transform:translateZ(2px) rotateZ(90deg)}
.match-fx .fx-card-edge{position:absolute;inset:0;display:block;border:1px solid #9caab8;border-radius:inherit;background:linear-gradient(90deg,#8d9eae,#e1e5e5 50%,#7b8d9f);transform:translate(.6px,1.6px) translateZ(-1.4px);box-shadow:1px 2px 2px #0009;pointer-events:none}
.match-fx.fx-perspective .unit-art>img{position:relative;z-index:2;transform:translateZ(.5px)!important;box-shadow:inset 0 0 1px #fff,0 0 0 .5px #d2dfeb88;border:1px solid #bed1df88}
.match-fx.fx-perspective .unit-slot.empty{transform:translate(-50%,-50%) translateZ(3px)}
.match-fx #hand .hand-card>img{box-shadow:1px 2px 0 #c0c6cc,2px 4px 5px #000a;border:1px solid #d0d9e377}

.match-fx.fx-perspective .unit-slot .unit-stat{transform:translateZ(8px);z-index:8}
.match-fx.fx-perspective .soul-stack{transform:translate(-50%,-50%) translateZ(1px);transform-style:preserve-3d}
.match-fx.fx-perspective .nameplate{transform:translateZ(6px)}
.match-fx.fx-perspective .opponent .unit-slot .unit-stat{transform:rotateZ(180deg) translateZ(8px)}
.match-fx.fx-perspective .opponent .nameplate{transform:rotateZ(180deg) translateZ(6px)}

/* Skill state labels sit below the power readout, outside foil artwork. */
.match-fx .fx-skill-tags{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%) translateZ(9px);z-index:9;display:flex;gap:3px;white-space:nowrap;pointer-events:none}
.match-fx .fx-skill-tags>span{font-size:11px;font-weight:800;line-height:1.1;padding:2px 4px;border-radius:3px;background:#2b0d15f5;border:1px solid #e86778;color:#ffb4be;box-shadow:0 1px 2px #0008}
.match-fx .fx-skill-tags>.fx-skill-tag-act{background:#071e3cf5;color:#a8d8ff;border-color:#559deb}
.match-fx .opponent .fx-skill-tags{transform:translateX(-50%) rotateZ(180deg) translateZ(9px)}
.match-fx #detail-content.fx-focused-detail .ability-block{opacity:.64}
.match-fx #detail-content.fx-focused-detail .fx-focused-ability{opacity:1;border:2px solid #4295ed;border-radius:8px;background:#17395566;padding:10px;margin:8px 0;position:relative}
.match-fx .fx-focused-ability::before{content:attr(data-focus-label);display:block;width:fit-content;font-size:11px;font-weight:800;color:#a9d7ff;margin-bottom:7px}
.match-fx #detail-content .fx-focused-ability[data-focus-type="CONT"]{border-color:#e06478;background:#4b1b2b55}
.match-fx .fx-focused-ability[data-focus-type="CONT"]::before{color:#ffaabc}
.match-fx #detail-content .fx-focused-ability[data-focus-type="AUTO"]{border-color:#53ba91;background:#133b2c55}
.match-fx .fx-focused-ability[data-focus-type="AUTO"]::before{color:#9ee7c6}
.match-fx .fx-skill-tags,.match-fx .fx-skill-tags span{pointer-events:none!important;cursor:default}
.match-fx .board-half{background-size:100% 100%!important;position:relative}
.match-fx .fx-circuit-motion{position:absolute;inset:0;z-index:0;pointer-events:none!important;overflow:hidden;border-radius:inherit;color:#078b9e}
.match-fx .board-half[data-field-theme="dark"] .fx-circuit-motion{color:#68e9ff;filter:drop-shadow(0 0 3px #36c8e866)}
.match-fx .fx-circuit-motion svg{display:block;width:100%;height:100%;overflow:visible}
.match-fx .fx-ion-traces{fill:none;stroke:currentColor;stroke-width:4;stroke-dasharray:45 980;animation:fx-trace-flow 12s linear infinite;opacity:.7}
.match-fx .fx-ion-traces path+path{animation:fx-circuit-fade 5s ease-in-out infinite}
.match-fx .fx-core-spin{fill:none;stroke:currentColor;stroke-width:5;stroke-dasharray:70 25 12 25;animation:fx-ring-orbit 36s linear infinite;opacity:.8}
.match-fx .fx-core-counter{stroke-width:2;stroke-dasharray:8 22;animation:fx-ring-orbit 24s linear infinite reverse}
.match-fx .fx-socket-pulse{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:28 150;animation:fx-circuit-fade 6s ease-in-out infinite;opacity:.6}
.match-fx .fx-scan-line{fill:none;stroke:currentColor;stroke-width:2;opacity:.1;animation:fx-field-scan 10s linear infinite}
.match-fx .unit-slot.empty{border-color:transparent!important;background:transparent!important}
.match-fx .board-window{background:radial-gradient(ellipse at 50% 40%,#132e43 0%,#050d16 70%)}
.match-fx .fx-field-paused .fx-circuit-motion *,.match-fx.fx-field-paused .fx-circuit-motion *,.match-fx.fx-field-hidden .fx-circuit-motion *{animation-play-state:paused!important}
@keyframes fx-trace-flow{to{stroke-dashoffset:-2050}}
@keyframes fx-ring-orbit{to{transform:rotate(360deg)}}
@keyframes fx-circuit-fade{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes fx-field-scan{from{transform:translateY(-10px)}to{transform:translateY(988px)}}
@media(prefers-reduced-motion:reduce){.match-fx .fx-circuit-motion *{animation:none!important}}

.match-fx .fx-socket-orbit{animation:fx-ring-orbit 32s linear infinite}.match-fx .fx-socket-orbit:nth-child(even){animation-direction:reverse}
@media(prefers-reduced-motion:reduce){.match-fx .fx-socket-orbit{animation:none!important}}

/* Nine variants share real field positions, including new Accel circles. */
.match-fx .board-half[data-field-color="cyan"]{--field-accent:#51dfef;--field-ink:#07899b}
.match-fx .board-half[data-field-color="violet"]{--field-accent:#bf9dff;--field-ink:#8050b6}
.match-fx .board-half[data-field-color="amber"]{--field-accent:#ffcf73;--field-ink:#a07919}
.match-fx .fx-circuit-motion{color:var(--field-accent);filter:drop-shadow(0 0 2px color-mix(in srgb,var(--field-accent),transparent 65%))}
.match-fx .board-half[data-field-style="mecha"] .fx-circuit-motion{color:var(--field-ink);filter:none}
.match-fx .fx-static-socket{fill:none;stroke:currentColor;stroke-width:2;opacity:.85}
.match-fx .fx-ring-fill{fill:#0b2032;fill-opacity:.88;stroke-width:2}
.match-fx .board-half[data-field-style="mecha"] .fx-ring-fill{fill:#e5edef;fill-opacity:.8}
.match-fx .fx-static-socket text{fill:currentColor;stroke:none;font:24px Arial,sans-serif;letter-spacing:3px}
.match-fx .fx-socket-orbit{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:40 70;opacity:.6}
.match-fx .board-half[data-field-style="holo"] .fx-socket-orbit{stroke-width:5;stroke-dasharray:80 190;animation-duration:20s}
.match-fx .board-half[data-field-style="forge"] .fx-socket-orbit{stroke-dasharray:10 26;animation-duration:46s}
.match-fx .fx-accel-outline{stroke-width:5;stroke-dasharray:18 7}
.match-fx .fx-summon{position:absolute;pointer-events:none;mix-blend-mode:screen;filter:drop-shadow(0 0 5px currentColor);z-index:5}
.match-fx .fx-summon svg{width:100%;height:100%;overflow:visible}
.match-fx .fx-summon-rotate{transform-origin:160px 160px;animation:fx-ring-orbit 3s linear infinite}
.match-fx .fx-summon-reverse{transform-origin:160px 160px;animation:fx-ring-orbit 2s linear infinite reverse}
.match-fx .fx-summon-impact{transform-origin:160px 183px;animation:fx-summon-shock 1.2s ease-out infinite}
.match-fx .fx-summon[data-held="true"] *{animation-play-state:paused!important}
.match-fx .fx-summon-plane{inset:0;width:100%;height:100%;z-index:1;transform:translateZ(.2px);mix-blend-mode:normal;filter:drop-shadow(0 0 3px currentColor);overflow:hidden}
.match-fx .unit-slot{z-index:2}
.match-fx .fx-await-land{visibility:hidden!important}
.match-fx .fx-landing-card{position:absolute;aspect-ratio:350/510;transform:translate(-50%,-50%) translateZ(65px) scale(1.08);transform-style:preserve-3d;z-index:8;pointer-events:none;filter:drop-shadow(0 18px 12px #0005)}
.match-fx .fx-landing-card>img{display:block;width:100%;height:100%;object-fit:contain;border-radius:7%;border:1px solid #d1dbe6aa;box-shadow:1px 2px 0 #aebac8}
.fx-placement-flight{border-color:#d1dbe6aa;box-shadow:0 8px 16px #0007!important}
.match-fx .fx-summon-plane .fx-summon-rotate,.match-fx .fx-summon-plane .fx-summon-reverse,.match-fx .fx-summon-plane .fx-summon-impact{transform-origin:0 0}
.match-fx .soul-stack>img:nth-of-type(1){--soul-offset:6%!important}
.match-fx .soul-stack>img:nth-of-type(2){--soul-offset:4%!important}
.match-fx .soul-stack>img:nth-of-type(3){--soul-offset:2%!important}
.match-fx .soul-stack>img:nth-of-type(n+4){display:none}
@keyframes fx-summon-shock{from{transform:scale(.5);opacity:1}to{transform:scale(1.9);opacity:0}}
@keyframes fx-summon-particle{0%{opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes fx-summon-pillar{0%{transform:translateY(25px);opacity:0}20%{transform:translateY(0);opacity:1}100%{transform:translateY(-25px);opacity:0}}
@media(prefers-reduced-motion:reduce){.match-fx .fx-summon *{animation:none!important}.match-fx .fx-summon-column,.match-fx .fx-summon-sparks{display:none}}
.match-fx .gift-badge{z-index:15;white-space:nowrap;font-size:9px;box-shadow:0 2px 8px #0007}

/* --- End: match-fx-source.css ---
 */

/* --- Begin: match-fx-live.css --- */
/* Geometry adapted from the supplied fullscreen V2 mockup; the native game controls remain active. */
.match-fx{--field-unit-width:11.8%;--field-pile-width:11.8%;--field-half-ratio:1920/988;--field-table-ratio:.982318}
.match-fx.battle-v2 .board-window{perspective:1100px;perspective-origin:50% 58%;padding:20px 0 16px;overflow:auto}
.match-fx.battle-v2 .fight-board{width:min(74vw,calc((100dvh - 180px)*1.02));max-width:none!important;align-self:flex-start;transform:rotateX(var(--camera-tilt));transform-origin:50% 50%;transform-style:preserve-3d;overflow:visible;border:1px solid #44bedd88;border-radius:12px;box-shadow:0 28px 12px #0009,0 35px 90px #000c,0 0 36px #36c4ea26}
.match-fx.battle-v2 .fight-board.close-view{width:min(96vw,calc((100dvh - 180px)*2.04))}
.match-fx.battle-v1 .fight-board{transform:none!important;transform-style:flat}
.match-fx.battle-v1 .board-window{perspective:none}
.match-fx.battle-v1 .fx-card-edge{display:none}
.match-fx.battle-v2 .board-half{aspect-ratio:1920/988}
.match-fx .board-half{background-image:var(--selected-field)!important}
.match-fx .unit-slot,.match-fx .soul-stack,.match-fx .pile{overflow:visible!important}
.match-fx .unit-art{border-radius:7%;overflow:visible}
.match-fx .unit-art>img{border-radius:7%;object-fit:contain}
.match-fx .unit-slot .unit-stat{font-size:clamp(9px,1.2vw,13px);bottom:-4%;left:-7%;width:114%;min-width:0!important;background:#071222ed!important;border:1px solid #5ab9e3;color:#e8f7ff}
.match-fx .opponent .unit-slot .unit-stat{transform:rotateZ(180deg)}
.match-fx .pile-caption{font-size:10px;min-width:0;white-space:nowrap}
.match-fx.battle-v2 .board-half:not([data-printed-zones="true"]) .damage-stack{left:3.5%!important;width:14.5%!important;top:24%!important;height:70%!important}
.match-fx.battle-v2 .board-half[data-printed-zones="true"] .damage-stack{left:5.19%!important;top:46.8%!important;width:15.625%!important;height:50.25%!important}
.match-fx.battle-v2 .board-half[data-printed-zones="true"] .deck-pile{left:88.8%!important;top:42.3%!important}
.match-fx.battle-v2 .board-half[data-printed-zones="true"] [data-zone="drop"]{left:88.8%!important;top:77.8%!important}
.match-fx #match-fx-layer{z-index:45}
.match-fx .fx-circuit-motion{border-radius:inherit}
.match-fx .fx-active-attack{animation:none!important;opacity:1}
.match-fx .fx-skill-tags{top:calc(100% + 9px)}
.match-fx .field-guard-circle{pointer-events:auto}
.match-fx .fight-table.guarding .hand-row .hand-card{touch-action:pan-x}
.match-fx .fx-ability-badges{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:flex;gap:3px;z-index:10;white-space:nowrap;pointer-events:none}
.match-fx .opponent .fx-ability-badges{top:auto;bottom:-17px;transform:translateX(-50%) rotate(180deg)}
.match-fx .fx-ability-badges span{background:#083546f2;border:1px solid #72e9ff;color:#b5f5ff;padding:2px 5px;border-radius:5px;font-size:9px}
.match-fx .fx-ability-badges .fx-boost-icon{background:none;border:0;padding:0}
.match-fx .fx-boost-icon img{width:18px;height:18px}
.match-fx .unit-slot.targetable{border:2px solid #72edff!important;background:#51e5fa16!important}
.match-fx #card-detail.compact-card[open]{inset:auto!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%);margin:0;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);z-index:130}
.match-fx .hand-row .hand-card{touch-action:pan-x}
.match-fx.match-fx-mobile{--battle-header:44px;--battle-hand:64px;--battle-controls:44px;--hand-open-height:96px}
.match-fx.match-fx-mobile .fight-header{height:auto;min-height:44px;flex-wrap:nowrap;overflow-x:auto}
.match-fx.match-fx-mobile .fight-header button{min-width:40px;min-height:40px;flex-shrink:0}
.match-fx.match-fx-mobile .fight-header>img{width:65px;flex-shrink:0}
.match-fx.match-fx-mobile .fight-table{height:calc(100dvh - 44px)}
.match-fx.match-fx-mobile .board-window{flex:1;min-height:0;height:auto}
.match-fx.match-fx-mobile .hand-dock{--hand-open-height:96px}
.match-fx.match-fx-mobile .hand-dock.hand-open{height:var(--hand-open-height)}
.match-fx.match-fx-mobile #phases{display:none}
.match-fx.match-fx-mobile.battle-v2 .board-window{padding:38px 8px 8px;perspective:max(1800px,600vw);perspective-origin:50% 50%}
.match-fx.match-fx-mobile.battle-v2 .fight-board{width:calc(100vw - 34px)!important;height:100%;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:minmax(0,1fr);min-height:0;aspect-ratio:auto;margin:0 auto;transform:rotateX(42deg);transform-origin:50% 50%;border-radius:7px}
.match-fx.match-fx-mobile.battle-v2 .board-half{height:100%;width:100%;min-width:0;min-height:0;aspect-ratio:auto}
.match-fx.match-fx-mobile.battle-v2 .fight-board.close-view{height:200%}
.match-fx.match-fx-mobile.battle-v2 .pile{width:13%!important}
.match-fx.match-fx-mobile .soul-count,.match-fx.match-fx-mobile .pile-caption{font-size:9px}
.match-fx.match-fx-mobile .unit-slot .unit-stat{font-size:10px!important;left:-11%;width:122%;padding:1px 0}
.match-fx.match-fx-mobile .fx-skill-tags>span{font-size:9px}
.match-fx.match-fx-mobile .gift-badge{font-size:8px;padding:1px 2px}
.match-fx.match-fx-mobile .battle-player{max-width:36vw;padding:3px 6px;top:3px;bottom:auto;font-size:9px}
.match-fx.match-fx-mobile .battle-player>strong{font-size:10px}
.match-fx.match-fx-mobile .battle-player>strong small,.match-fx.match-fx-mobile .damage-meter{display:none}
.match-fx.match-fx-mobile .battle-counts{font-size:7px;gap:4px}
.match-fx.match-fx-mobile .battle-counts b{font-size:10px}
.match-fx.match-fx-mobile .battle-phase{display:none}
.match-fx.match-fx-mobile #status{top:auto!important;bottom:calc(var(--battle-hand) + var(--battle-controls));max-width:90vw!important;left:50%;transform:translateX(-50%);font-size:9px!important}
.match-fx.match-fx-mobile .opponent-hand{top:66px;right:10px;max-width:24vw}
.match-fx.match-fx-mobile .opponent-hand img{height:22px}
.match-fx.match-fx-mobile .hand-row .hand-card{width:58px;flex-basis:58px}
.match-fx.match-fx-mobile .control-bar{position:static;transform:none;flex-direction:row;flex-wrap:nowrap;align-items:center;width:100%;max-width:100%;max-height:none;height:48px;min-height:48px;padding:2px 6px;gap:4px}
.match-fx.match-fx-mobile .control-bar>.hint{flex:1;min-width:0;text-align:left}
.match-fx.match-fx-mobile .control-bar>button{width:auto;flex:none}
.match-fx.match-fx-mobile .fight-table.guarding .control-bar{position:static;width:100%;max-width:100%;height:auto;min-height:48px;max-height:none;overflow:visible;flex:none}
.match-fx.match-fx-mobile .guard-controls .guard-actions button{min-height:44px!important}
.match-fx.match-fx-mobile .fight-table.guarding .board-window{padding-right:8px;padding-left:8px}
.match-fx.match-fx-mobile .control-bar button{min-height:40px;padding:6px 9px}
.match-fx.match-fx-mobile .setup-panel,.match-fx.match-fx-mobile .prompt-dock{max-width:calc(100vw - 20px);max-height:65dvh;overflow:auto}
.match-fx.match-fx-mobile #card-detail .dialog-head button,.match-fx.match-fx-mobile #setup button{min-height:44px;min-width:44px}
@media(orientation:landscape){
 .match-fx.match-fx-mobile{--hand-open-height:70px;--battle-hand:46px;--battle-controls:40px}
 .match-fx.match-fx-mobile .hand-dock{--hand-open-height:70px}
 .match-fx.match-fx-mobile.battle-v2 .board-window{padding:28px max(8px,env(safe-area-inset-right)) 5px}
 .match-fx.match-fx-mobile.battle-v2 .fight-board{width:calc(100vw - 32px)!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr}
 .match-fx.match-fx-mobile.battle-v2 .board-half.own{border-top:0;border-left:2px solid #5de0fa88}
 .match-fx.match-fx-mobile.battle-v2 .fight-board.close-view{height:100%;width:calc((100vw - 32px)*2)!important}
 .match-fx.match-fx-mobile .unit-slot .unit-stat{font-size:9px!important}
 .match-fx.match-fx-mobile .hand-row .hand-card{width:44px;flex-basis:44px}
 .match-fx.match-fx-mobile .pile-caption{font-size:8px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet).battle-v1 .board-window{container-type:size;justify-content:safe center;padding:8px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet).battle-v1 .fight-board{width:min(calc(100vw - 24px),calc(100cqh * .98))!important}
 .match-fx.match-fx-mobile:not(.match-fx-tablet).battle-v1 .fight-board.close-view{width:min(calc(100vw - 24px),calc(100cqh * 1.96))!important}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;padding:5px 8px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-versus{margin:0;gap:4px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-versus b{font-size:16px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-versus>img{width:22px;height:32px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-draft{margin:0;min-height:44px;padding:3px 5px;gap:4px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-draft>span{display:none}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-draft>strong{font-size:9px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-actions{flex-wrap:wrap;gap:4px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-actions small{flex:0 0 100%;max-width:none;font-size:8px}
 .match-fx.match-fx-mobile:not(.match-fx-tablet) .guard-actions button{flex:1;min-width:0;min-height:36px!important;padding:4px!important;font-size:10px}
}
.match-fx.match-fx-tablet .fight-header{height:54px;min-height:54px}
.match-fx.match-fx-tablet .fight-table{height:calc(100dvh - 54px)}
.match-fx.match-fx-tablet .fight-header button{min-width:44px;min-height:44px}
.match-fx.match-fx-tablet .fight-header #battle-layout,.match-fx.match-fx-tablet .fight-header #sticker-toggle{min-width:44px;min-height:44px}
.match-fx.match-fx-tablet .hand-dock{--hand-open-height:122px}
.match-fx.match-fx-tablet .hand-dock .hand-row .hand-card{width:72px;flex-basis:72px}
.match-fx.match-fx-tablet .battle-player{font-size:12px}
.match-fx.match-fx-tablet .battle-player>strong{font-size:13px}
.match-fx.match-fx-tablet .battle-counts{font-size:11px;gap:8px}
.match-fx.match-fx-tablet .battle-counts b{font-size:12px}
.match-fx.match-fx-tablet .unit-slot .unit-stat{font-size:12px!important}
.match-fx.match-fx-tablet .soul-count,.match-fx.match-fx-tablet .pile-caption{font-size:11px}
.match-fx.match-fx-tablet .opponent-hand{top:82px}
.match-fx.match-fx-tablet .opponent-hand img{height:32px}
.match-fx.match-fx-tablet .control-bar{height:52px;min-height:52px}
.match-fx.match-fx-tablet .control-bar .hint{font-size:12px}
.match-fx.match-fx-tablet .control-bar button{min-height:44px;font-size:12px}
.match-fx.match-fx-tablet #status{top:2px!important;bottom:auto;font-size:11px!important;pointer-events:none}
/* Tablets keep one tabletop, with the opponent above the player in both orientations. */
.match-fx.match-fx-tablet.battle-v1 .board-window{container-type:size;padding:8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:safe center}
.match-fx.match-fx-tablet.battle-v1 .fight-board{width:min(calc(100vw - 24px),calc(100cqh * .98))!important;align-self:center}
.match-fx.match-fx-tablet.battle-v1 .fight-board.close-view{width:min(calc(100vw - 24px),calc(100cqh * 1.96))!important}
.match-fx.match-fx-tablet.battle-v2 .board-window{container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px 10px;perspective:4000px;perspective-origin:50% 0}
.match-fx.match-fx-tablet.battle-v2 .fight-board{display:block;width:min(calc(86vw - 24px),calc(100cqh * 1.08))!important;height:auto;aspect-ratio:auto;align-self:center;transform:rotateX(40deg);transform-origin:50% 0}
.match-fx.match-fx-tablet.battle-v2 .board-half{height:auto;aspect-ratio:1920/988;width:100%}
.match-fx.match-fx-tablet.battle-v2 .board-half.own{border-left:0;border-top:2px solid #5de0fa88}
.match-fx.match-fx-tablet.battle-v2 .fight-board.close-view{width:min(calc(100vw - 64px),calc(100cqh * 2.08))!important;height:auto}
@media(prefers-reduced-motion:reduce){.match-fx .fx-circuit-motion *,.match-fx .fx-summon *{animation:none!important}}
.match-fx .board-half[data-field-motion="false"] .fx-circuit-motion *{animation-play-state:paused!important}
.match-fx .board-half .unit-slot.fx-small-unit .unit-stat{font-size:var(--fx-stat-font)!important;left:-5%;width:110%;line-height:1.1}
.match-fx .board-half .unit-slot.fx-small-unit .critical-stat img{width:.95em;height:.95em}
.match-fx .board-half .unit-slot.fx-tiny-unit .unit-stat{display:flex;flex-direction:column;align-items:center;left:-5%;width:110%;white-space:normal}
.match-fx .board-half .unit-slot.fx-small-unit .gift-badge{font-size:8px;left:0;top:-16px;padding:1px 3px;border-radius:4px}


/* Guard UI stays above the field while the original hand remains draggable. */
#guard-popup{position:fixed;inset:0;z-index:54;display:flex;align-items:center;justify-content:center;padding:12px 12px 150px;background:#04091555;pointer-events:none}
#guard-popup[hidden]{display:none}
.guard-popup-panel{width:min(560px,100%);max-height:calc(100dvh - 190px);display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;border:1px solid #8cbdfb80;border-radius:12px;background:#0e1729f5;box-shadow:0 14px 55px #0009;padding:12px}
.guard-popup-scroll{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
.guard-popup-footer{flex:none;padding-top:8px;background:#0e1729}
.guard-popup-panel .guard-preview{border:0;padding:0;box-shadow:none;background:none}
.guard-popup-clock{display:flex;flex:none;align-items:center;justify-content:space-between;padding:0 0 9px;margin-bottom:9px;border-bottom:1px solid #7d9ac144;color:#c8dcf8;font-size:12px}
.guard-popup-clock[hidden]{display:none}.guard-popup-clock b{font-size:23px;font-variant-numeric:tabular-nums;color:#f6cd86;line-height:1.1}
.guard-popup-panel .guard-combatant{margin:0;flex:none;text-align:center}
.guard-popup-panel .guard-combatant img{display:block;width:48px;height:70px;object-fit:contain;margin:auto}
.guard-popup-panel .guard-combatant figcaption{font-size:10px;color:#cfdbef;margin-top:4px}
.guard-popup-panel .guard-versus{margin:0;gap:10px}
.guard-popup-panel>.guard-versus{flex:none;padding-bottom:8px}
.guard-popup-panel .guard-draft{min-height:75px;margin:12px 0}
.guard-popup-panel .guard-draft>span{font-size:12px}
.guard-popup-panel .guard-draft button{width:82px;height:119px}
.guard-popup-panel .guard-draft button span{font-size:11px}
.guard-popup-panel .guard-draft>strong{flex:0 0 100%;max-width:none;margin:4px 0 0}
.guard-popup-panel .guard-draft{display:grid;grid-template-columns:20px minmax(0,1fr)}
.guard-popup-panel .guard-draft-cards{display:flex;gap:7px;flex-wrap:wrap}
.guard-popup-panel .guard-draft>strong{grid-column:1/-1}
.guard-intercepts{margin:10px 0}
.guard-intercepts>small{display:block;color:#b9cdef;font-size:11px;margin-bottom:6px}
.guard-intercepts>div{display:flex;gap:10px;overflow-x:auto;padding:3px}
.guard-intercepts button{flex:none;padding:3px!important;width:82px;background:#192840;border:1px solid #718bb477;border-radius:5px;min-height:0!important}
.guard-intercepts button[aria-pressed="true"]{border-color:#83caff;box-shadow:0 0 0 2px #83caff66}
.guard-intercepts button img{display:block;width:74px;height:107px;object-fit:contain;pointer-events:none}
.guard-intercepts button span{display:block;font-size:11px;margin-top:4px;color:#d6e9ff}
.guard-popup-panel .guard-actions{flex-wrap:wrap}
.guard-popup-panel .guard-actions small{flex:0 0 100%;max-width:none}
.match-fx #guard-popup .guard-actions button{flex:1;min-height:44px!important}
.guard-popup-footer>[data-peek-guard]{width:100%;min-height:44px;margin-top:10px;background:transparent;color:#d3e3f9;border-color:#6981a866}
@media(max-width:600px){#guard-popup{padding-bottom:120px}.guard-popup-panel{max-height:calc(100dvh - 160px);padding:10px}.guard-popup-panel .guard-versus{gap:7px}.guard-popup-panel .guard-versus b{font-size:21px}.guard-popup-panel .guard-draft button{width:70px;height:102px}.guard-intercepts button{width:70px}.guard-intercepts button img{width:62px;height:90px}}
@media(max-height:600px) and (orientation:landscape){#guard-popup{padding-bottom:80px}.guard-popup-panel{width:min(760px,90vw);max-height:calc(100dvh - 125px);padding:8px}.guard-popup-panel .guard-preview{display:grid;grid-template-columns:130px minmax(180px,1fr) minmax(150px,1fr);gap:5px}.guard-popup-panel .guard-versus{grid-column:1;grid-row:1;flex-wrap:wrap;align-content:center;gap:3px}.guard-popup-panel .guard-versus b{font-size:15px}.guard-popup-panel .guard-draft{grid-column:2;grid-row:1;margin:0;min-height:106px;gap:4px;padding:4px}.guard-popup-panel .guard-draft button{width:58px;height:84px}.guard-popup-panel .guard-draft>b{font-size:16px}.guard-popup-panel .guard-draft>strong{font-size:9px;margin:0}.guard-popup-panel .guard-intercepts{grid-column:3;grid-row:1;margin:0}.guard-popup-panel .guard-intercepts>small{margin-bottom:2px}.guard-popup-panel .guard-intercepts>div{gap:5px;padding:0}.guard-popup-panel .guard-intercepts button{width:64px}.guard-popup-panel .guard-intercepts button img{width:56px;height:81px}.guard-popup-panel .guard-intercepts button span{font-size:9px;margin-top:1px}.guard-popup-panel .guard-actions{grid-column:1/-1;gap:4px}.guard-popup-panel .guard-actions small{display:none}.guard-popup-panel .guard-combatant img{width:30px;height:44px}.guard-popup-panel>[data-peek-guard]{margin-top:5px}.guard-popup-panel .guard-popup-clock{padding-bottom:5px;margin-bottom:5px}}

@media(max-height:600px) and (orientation:landscape){.guard-popup-panel{width:min(760px,calc(100vw - 24px))}.guard-popup-footer{display:flex;gap:6px;padding-top:5px;align-items:stretch}.guard-popup-footer .guard-actions{flex:2}.guard-popup-footer>[data-peek-guard]{flex:1;width:auto;margin:0}.guard-popup-panel .guard-preview{grid-template-columns:110px minmax(150px,1fr) minmax(120px,1fr)}.guard-popup-scroll{padding-right:3px}}

@media(max-height:600px) and (orientation:landscape){.guard-popup-panel{display:grid;grid-template-columns:130px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:0 5px}.guard-popup-clock{grid-column:1/-1}.guard-popup-panel>.guard-versus{grid-column:1;grid-row:2;padding:0}.guard-popup-scroll{grid-column:2;grid-row:2}.guard-popup-footer{grid-column:1/-1}.guard-popup-panel .guard-preview{grid-template-columns:minmax(0,1fr) minmax(120px,1fr)}.guard-popup-panel .guard-draft{grid-column:1;grid-row:1}.guard-popup-panel .guard-intercepts{grid-column:2;grid-row:1}}

/* Phone Guard keeps all sections on screen, fitting card art into the available area. */
@media(max-width:600px),(max-height:600px) and (orientation:landscape){
 .guard-popup-panel{height:min(480px,calc(100dvh - 160px))}
 .guard-popup-scroll{overflow:hidden;display:flex;min-width:0}
 #guard-popup .guard-popup-scroll .guard-preview{width:100%;min-width:0;min-height:0;flex:1;display:flex;flex-direction:column}
 #guard-popup .guard-draft{flex:1.15;min-height:0;grid-template-rows:minmax(0,1fr) auto;margin:0 0 5px;padding:4px;gap:3px}
 #guard-popup .guard-draft-cards{min-width:0;min-height:0;align-self:stretch;container-type:size;display:grid;grid-template-columns:repeat(var(--guard-cols),minmax(0,1fr));grid-template-rows:repeat(var(--guard-rows),minmax(0,1fr));gap:2px;place-items:center}
 #guard-popup .guard-draft-cards button{width:min(70px,calc(100cqw / var(--guard-cols)),calc(100cqh / var(--guard-rows) * .686));height:min(102px,calc(100cqh / var(--guard-rows)),calc(100cqw / var(--guard-cols) * 1.457));max-width:100%;max-height:100%}
 #guard-popup .guard-draft-cards>span{font-size:11px;grid-column:1/-1;color:#cad6ec}
 #guard-popup .guard-draft>strong{font-size:10px;line-height:1.2;margin:0}
 #guard-popup .guard-intercepts{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
 #guard-popup .guard-intercepts>small{flex:none;margin-bottom:3px}
 #guard-popup .guard-intercepts>div{flex:1;min-height:0;display:flex;overflow:visible;padding:1px;gap:6px}
 #guard-popup .guard-intercepts button{width:70px;max-width:calc(50% - 3px);height:100%;max-height:119px;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;flex:0 1 70px}
 #guard-popup .guard-intercepts button img{width:100%;height:100%;min-height:0;object-fit:contain}
 #guard-popup .guard-intercepts button span{font-size:10px;line-height:12px;margin-top:2px;white-space:nowrap}
 .guard-popup-footer{display:flex;gap:5px;padding-top:6px;align-items:stretch}
 .guard-popup-footer .guard-actions{flex:2;gap:5px;flex-wrap:nowrap}
 .guard-popup-footer .guard-actions small{display:none}
 .guard-popup-footer>[data-peek-guard]{flex:1;width:auto;margin:0;padding:4px;font-size:11px}
 .guard-popup-panel>.guard-versus{padding-bottom:5px}
}
@media(max-height:600px) and (orientation:landscape){
 .guard-popup-panel{height:calc(100dvh - 125px)}
 #guard-popup .guard-popup-scroll .guard-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:5px}
 #guard-popup .guard-draft{margin:0;min-height:0;align-self:stretch}
 #guard-popup .guard-intercepts{align-self:stretch;overflow:hidden}#guard-popup .guard-intercepts button{max-height:100%}
 #guard-popup .guard-versus{align-content:space-around}
}


/* Opponent card backs stand in a small 3D row above the tabletop. */
.match-fx.battle-v2 #opponent-hand{--back-width:68px;--back-height:100px;--back-step:42px;position:absolute;top:70px;left:50%;right:auto;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:70vw;height:auto;overflow:visible;background:transparent;border:0;padding:0;pointer-events:none;z-index:5}
.match-fx.battle-v2 #opponent-hand .opponent-hand-cards{display:grid;grid-template-columns:repeat(var(--opponent-hand-count),minmax(0,1fr));width:min(600px,calc(var(--opponent-hand-count)*var(--back-step) + var(--back-width) - var(--back-step)));padding-right:calc(var(--back-width) - var(--back-step));max-width:70vw;height:var(--back-height);box-sizing:border-box;perspective:900px;transform-style:preserve-3d}
.match-fx.battle-v2 #opponent-hand img{width:var(--back-width);height:var(--back-height);margin:0;transform:translateZ(8px) rotateX(-9deg) rotateY(-16deg);transform-origin:50% 80%;object-fit:contain;filter:drop-shadow(3px 9px 5px #0009);box-shadow:2px 1px 0 #9bb4c1,3px 2px 0 #162b3a;border-radius:4px}
.match-fx.battle-v2 #opponent-hand span{padding:0;background:transparent;border:0;font-size:11px;color:#d5e6f3;text-shadow:0 1px 3px #000;white-space:nowrap}
.match-fx.battle-v2.match-fx-tablet #opponent-hand{--back-width:40px;--back-height:58px;--back-step:28px;top:30px}
.match-fx.battle-v2.match-fx-tablet .board-window{padding-top:70px;perspective:1600px;perspective-origin:50% 40%}
.match-fx.battle-v2.match-fx-tablet .fight-board{transform:translateY(-24px) rotateX(45deg);transform-origin:50% 50%}
.match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand{--back-width:32px;--back-height:46px;--back-step:22px;top:50px;gap:4px;max-width:70vw}
.match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) .board-window{perspective:1000px;perspective-origin:50% 40%}
.match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) .fight-board{width:calc((100vw - 18px)*.79)!important;transform:rotateX(45deg);transform-origin:50% 50%}
@media(max-height:700px) and (orientation:portrait){.match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand{--back-width:21px;--back-height:30px;--back-step:15px;top:40px;gap:3px}.match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand span{font-size:10px;line-height:12px}}


/* Keep sideways damage cards in one fan, even when a tall mobile mat stretches the zone. */
.match-fx.battle-v2 .damage-stack{container-type:size;--damage-step:clamp(0px,calc((100cqh - 100cqw * .6862745) / 5),calc(100cqw * .42))}
.match-fx.battle-v2 .damage-card{top:calc(var(--damage-index) * var(--damage-step));translate:none;min-height:0!important;height:calc(100cqw * .6862745);aspect-ratio:510/350;transform:none}

/* V1 keeps its original small backs outside the tabletop. */
.match-fx.battle-v1 #opponent-hand{top:8px;left:50%;right:auto;transform:translateX(-50%);max-width:24vw;pointer-events:none}
.match-fx.battle-v1 #opponent-hand img{transform:none}
.match-fx.battle-v1:not(.match-fx-mobile) #opponent-hand{left:auto;right:14px;top:110px;transform:none;max-width:180px}

@media(orientation:landscape){.match-fx.battle-v1 #opponent-hand{left:auto;right:14px;top:110px;transform:none;max-width:min(180px,24vw)}}

/* Reserve the gap between fighter HUDs; keep the tilted tablet edges inside the viewport. */
.match-fx.battle-v2.match-fx-tablet .fight-board:not(.close-view){width:min(calc(80vw - 24px),calc(100cqh * 1.08))!important}
/* Leave the own pile labels above the controls when the tablet hand is open. */
@media(orientation:landscape){.match-fx.battle-v2.match-fx-tablet .fight-board:not(.close-view){transform:translateY(-48px) rotateX(45deg)}}
.match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand span{position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%)}
@media(orientation:portrait){
 .match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand{top:96px;max-width:63vw}
 .match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand .opponent-hand-cards{max-width:63vw}
}
@media(max-height:700px) and (orientation:portrait){
 .match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand{top:76px}
 .match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) .board-window{padding-top:60px}
}
@media(orientation:landscape){
 .match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand{--back-width:24px;--back-height:34px;--back-step:16px;top:8px;max-width:42vw;gap:2px}
 .match-fx.battle-v2.match-fx-mobile:not(.match-fx-tablet) #opponent-hand .opponent-hand-cards{max-width:42vw}
}

/* Mobile/tablet clocks share the fighter name row, outside the hidden phase banner. */
.match-fx.match-fx-mobile .player-own:has(>.match-clocks:not([hidden]))>strong{padding-right:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-fx.match-fx-mobile .player-own>.match-clocks{position:absolute;top:3px;right:6px;margin:0;max-width:42px;gap:1px;transform:none}
.match-fx.match-fx-mobile .player-own>.match-clocks .match-clock-row{position:relative;padding:0;gap:0;border:0;background:transparent;justify-content:flex-end}
.match-fx.match-fx-mobile .player-own>.match-clocks .match-clock-row span{display:none}
.match-fx.match-fx-mobile .player-own>.match-clocks .match-clock-value{font-size:14px;line-height:16px;margin:0}
.match-fx.match-fx-mobile .player-own>.match-clocks [data-clock-paused]{position:absolute;right:0;top:100%;font-size:7px;line-height:8px}
.match-fx.match-fx-mobile .player-own>.match-clocks:has([data-clock-paused][hidden]) .match-clock-row:has([data-clock-paused]:not([hidden])){display:none}

.match-event-tag{display:inline-block;padding:4px 9px;color:#ffdc89;border:1px solid #ffdc8966;border-radius:5px;font-weight:700;font-size:12px}

.battle-player>strong .match-event-tag{margin-left:4px;padding:1px 4px;vertical-align:middle;line-height:1.1;font-size:.8em;white-space:nowrap}

/* Keep both player counts inside their HUD on narrow phones. */
@media(max-width:380px){.match-fx.match-fx-mobile .battle-player{max-width:42vw}}

/* --- End: match-fx-live.css ---
 */

/* --- Begin: effects.css --- */
@font-face{font-family:Chakra;src:url('/vanguard/assets/fonts/ChakraPetch-Regular.ttf')}@font-face{font-family:Chakra;src:url('/vanguard/assets/fonts/ChakraPetch-Bold.ttf');font-weight:700}
:root{color-scheme:dark;font-family:Chakra,system-ui,sans-serif;color:#f1f2f7;background:#151820}*{box-sizing:border-box}body{margin:0;background:radial-gradient(at 80% 0%,#29355180,transparent 50%)}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button,select{color:inherit;border:1px solid #ffffff40;background:#ffffff0b;border-radius:7px;padding:10px 16px;cursor:pointer}button:hover,a:hover{background:#ffffff16}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #aacfff;outline-offset:3px}button:disabled{opacity:.4;cursor:default}button[aria-pressed=true],button.active{background:#dbe9ff;color:#182539;border-color:#dbe9ff}a{color:#c4dafd;text-decoration:none;border-radius:7px;padding:9px 12px}header{display:flex;align-items:center;gap:16px;justify-content:space-between;border-bottom:1px solid #ffffff20;padding:12px 24px;flex-wrap:wrap}header span{font-size:14px;letter-spacing:.1em}header b{color:#a5c4ef}main{max-width:1180px;margin:auto;padding:24px}.intro h1{font-size:clamp(25px,4vw,38px);margin:8px 0}.intro p{color:#c4c9d5;margin:6px 0}.eyebrow{font-size:12px;letter-spacing:.14em;color:#b3c9e5!important}#counts{font-size:14px;margin-top:14px}.viewer{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);border:1px solid #ffffff30;background:#ffffff05;border-radius:14px;overflow:hidden;margin-top:22px}.stage{position:relative;min-height:345px;display:flex;align-items:center;justify-content:center;overflow:hidden}.checker,.thumb{background-color:#242831;background-image:linear-gradient(45deg,#ffffff08 25%,transparent 25%),linear-gradient(-45deg,#ffffff08 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff08 75%),linear-gradient(-45deg,transparent 75%,#ffffff08 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.stage.dark{background:#11151c}.stage.light{background:#e9e9ed}.stage.field{background:#171b23 url('/vanguard/board/assets/playmat.png') center/cover}#preview{object-fit:contain;max-width:90%;max-height:310px;filter:none}#sound-mark{font-size:100px;color:#ccdfff}.inspector{padding:24px;border-left:1px solid #ffffff20;min-width:0}.inspector h2{margin:7px 0;font-size:25px}.inspector p{margin:10px 0;color:#c4c9d5;font-size:14px}#file-name{font-family:monospace;font-size:12px;overflow-wrap:anywhere;color:#94a6c0}#audio{width:100%;margin:8px 0}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row a{font-size:14px}.viewer-options{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.viewer-options label{font-size:12px;display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px}.viewer-options select{font-size:13px;padding:7px}.frames{display:flex;flex-wrap:wrap;gap:4px;margin:12px 0}.frames button{padding:5px 9px;font-size:12px}.library{margin-top:28px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.tabs{display:flex;gap:6px;flex-wrap:wrap}.primary{background:#c9dfff;color:#17273d;border-color:#c9dfff}.tools{display:flex;gap:18px;align-items:center;margin:16px 0}.tools input[type=search]{flex:1;min-width:100px;padding:11px 14px;border-radius:7px;background:#ffffff08;border:1px solid #ffffff30;color:inherit}.tools label{display:flex;align-items:center;gap:8px;font-size:14px}.tools input[type=range]{width:115px;accent-color:#c9dfff}#status{font-size:13px;color:#b9c3d3;min-height:20px;margin:12px 0}#items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.asset{display:flex;text-align:left;flex-direction:column;padding:0;overflow:hidden;border:1px solid #ffffff25;min-width:0;color:#f1f2f7;background:#ffffff04;scroll-margin-top:20px}.asset.selected{border-color:#c5daff;background:#b5d3ff14}.thumb{height:96px;display:flex;align-items:center;justify-content:center;padding:10px;width:100%}.thumb img{max-width:100%;max-height:76px;object-fit:contain}.thumb .music-note{font-size:35px;color:#c8ddfa}.asset .label{font-size:14px;font-weight:700;padding:10px 11px 3px;overflow-wrap:anywhere}.asset .meta{font-size:11px;color:#bdc5d3;padding:0 11px 11px;overflow-wrap:anywhere}.asset[hidden],[hidden]{display:none!important}.asset .tag{color:#b9d4ff}footer{border-top:1px solid #ffffff20;margin-top:32px;padding:18px 0;font-size:12px;color:#aeb9ca;line-height:1.8}body.playing #sound-mark{animation:music .8s ease-in-out infinite alternate}@keyframes music{to{transform:scale(1.12);opacity:.65}}@media(max-width:650px){main{padding:16px}header{padding:10px 12px;gap:4px}header span{font-size:11px}header a{font-size:12px;padding:8px}.viewer{grid-template-columns:1fr}.stage{min-height:220px;max-height:270px}#preview{max-height:245px}.inspector{padding:16px;border-left:0;border-top:1px solid #ffffff20}.intro h1{font-size:25px}.tools{gap:8px;flex-wrap:wrap}.tools input[type=search]{flex-basis:100%}.toolbar .row{margin-top:3px}button{padding:9px 12px;font-size:14px}#items{grid-template-columns:repeat(2,minmax(0,1fr))}.inspector h2{font-size:22px}}@media(prefers-reduced-motion:reduce){body.playing #sound-mark{animation:none}}
#match-preview{width:100%;height:460px;border:0;background:#14151b}#voice-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}#voice-tools label{display:flex;flex-direction:column;gap:5px;flex:1;font-size:12px}#voice-tools select{padding:7px;font-size:12px;max-width:100%}#voice-tools .voice-enable{flex-direction:row;align-items:center;flex:0 0 100%}#source-note{font-size:12px;color:#b5cce8;line-height:1.6}@media(max-width:650px){.stage:has(#match-preview:not([hidden])){max-height:none;height:410px}#match-preview{height:410px}}

/* --- End: effects.css ---
 */

/* --- Begin: event-vs.css --- */
/* Event VS reuses the game lobby and reward styles. */
 .hub-fight .ev-lobby-entry{border:1px solid #bd9a5b80!important;border-left:2px solid #e8c383!important;border-radius:10px;background:linear-gradient(105deg,#63492745,#2c2a3c55)!important;box-shadow:inset 0 1px #ffe8ad18!important;gap:12px!important;padding:15px 12px!important;transition:background .15s,border-color .15s}.hub-fight .ev-lobby-entry:hover,.hub-fight .ev-lobby-entry:focus-visible{border-color:#f0d499!important;background:linear-gradient(105deg,#70533473,#3c334c66)!important}.ev-lobby-entry b{color:#f5d39d!important;letter-spacing:.03em}.ev-lobby-entry small{color:#b7c8dd!important}.hub-fight .ev-lobby-entry .ev-entry-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid #dfbb7850;border-radius:9px;background:linear-gradient(145deg,#bf955723,#15263b99);box-shadow:inset 0 0 12px #efc98012}.ev-lobby-entry .ev-swords{width:28px!important;height:28px!important;stroke:#f3d094!important;stroke-width:1.4!important;stroke-linejoin:round;stroke-linecap:round;fill:none!important;filter:drop-shadow(0 2px 3px #0007)}.ev-swords .ev-blade-silver{fill:#9bbcd0;stroke:#d7eaf5}.ev-swords .ev-blade-gold{fill:#e3be72;stroke:#ffe3a2}.ev-swords .ev-sword-ridge{stroke:#ffffffa3;stroke-width:1}.ev-swords .ev-sword-hilt{stroke:#e8bc70;stroke-width:3}.ev-swords circle{fill:#ecc783;stroke:#ffe4ac}.ev-lobby-entry .ev-entry-arrow{width:16px!important;height:16px!important;stroke:#f4d094!important;flex:none}.ev-meta{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;font-size:11px;color:#b3c4da}.ev-meta p{margin:0;line-height:1.4}.ev-meta [data-event-time]{color:var(--boss-color);font-variant-numeric:tabular-nums}.ev-meta b{color:#eef4ff;font-weight:600}

.ev-lobby-entry{border-color:#cfa97170!important;background:linear-gradient(115deg,#4b38294d,#211c334d)!important}.ev-lobby-entry>svg{color:#e8c88d}.ev-lobby-entry b{color:#f4d6a4}.ev-lobby-entry small{font-size:11px}
.event-vs-dialog{width:min(860px,calc(100vw - 28px));max-height:calc(100dvh - 30px);padding:0;border:1px solid #bca58370;border-radius:16px;background:linear-gradient(140deg,#1e2938ef,#191a2aef);color:#edf4ff;overflow:auto;font-family:'Chakra Petch',sans-serif;box-shadow:0 20px 100px #0009}.event-vs-dialog::backdrop{background:#040913a8;backdrop-filter:blur(5px)}.event-vs-dialog .dialog-head{padding:16px 22px;border-bottom:1px solid #bca58340}.event-vs-dialog .close{margin-left:auto}.ev-body{padding:24px}.ev-body>h2{font-size:24px;margin:0 0 20px}.ev-bosses{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ev-boss{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;border:1px solid color-mix(in srgb,var(--boss-color) 50%,transparent);background:linear-gradient(145deg,#253548,#101725);box-shadow:0 8px 28px #0005}.ev-art{height:clamp(170px,28dvh,290px);overflow:hidden;position:relative;text-align:center;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--boss-color) 28%,transparent),transparent 70%)}.ev-art>img{height:140%;width:auto;max-width:100%;object-fit:cover;object-position:top;transform:translateY(-10%);filter:drop-shadow(0 0 20px color-mix(in srgb,var(--boss-color) 30%,transparent))}.ev-art::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 65%,#101725);pointer-events:none}.ev-boss-info{padding:18px 22px 22px;position:relative}.ev-clan{font-size:11px;letter-spacing:.09em;color:var(--boss-color,#bdcce2)}.ev-boss h3{font-size:25px;margin:7px 0 18px}.ev-boss button{width:100%;border-color:var(--boss-color);background:color-mix(in srgb,var(--boss-color) 16%,#152336);color:#fff;padding:13px;font-size:16px}.ev-boss button:disabled{opacity:.65;cursor:default}.ev-selected{display:flex;align-items:center;gap:20px;padding:14px 0 20px;border-bottom:1px solid #ffffff18}.ev-selected img{width:90px;height:128px;object-fit:contain;border-radius:7px;filter:drop-shadow(0 0 15px color-mix(in srgb,var(--boss-color) 25%,transparent))}.ev-selected h2{font-size:30px;margin:5px 0 10px}.ev-back{background:transparent;border:0;color:#b9ccdf;padding:2px 0 12px;font-size:13px}.ev-deck-form{padding:22px 0 0!important}.ev-deck-form label{font-size:14px}.ev-deck-form select{min-height:48px}.ev-deck-form>button{min-height:50px;font-size:16px}
@media(max-width:600px){.hub-fight:has(.ev-lobby-entry) .fight-feature,.hub-fight .ev-lobby-entry{height:74px;min-height:74px;box-sizing:border-box}.hub-fight .ev-lobby-entry{padding:10px 8px!important;gap:8px!important}.hub-fight .ev-lobby-entry .ev-entry-icon{width:32px;height:32px;flex-basis:32px;border-radius:7px}.hub-fight .ev-lobby-entry .ev-swords{width:25px!important;height:25px!important}.hub-fight .ev-lobby-entry b{font-size:12px}.hub-fight .ev-lobby-entry small{font-size:9px;line-height:1.35}}
@media(max-width:600px){.ev-body{padding:18px}.ev-bosses{grid-template-columns:1fr!important;gap:12px}.ev-boss{display:grid;grid-template-columns:38% 1fr;min-height:175px}.ev-art{height:205px!important}.ev-art>img{height:125%;max-width:none}.ev-art::after{background:linear-gradient(90deg,transparent 65%,#101725)}.ev-boss-info{padding:18px 14px!important}.ev-boss h3{font-size:21px!important;margin-bottom:12px!important}.ev-boss button{min-height:44px;padding:10px!important;font-size:14px!important}.ev-body>h2{font-size:20px;margin-bottom:14px}.ev-selected h2{font-size:24px}.ev-meta{font-size:10px}}
@media(max-height:500px) and (orientation:landscape){.event-vs-dialog{max-height:calc(100dvh - 14px)}.event-vs-dialog .dialog-head{padding:8px 16px}.ev-body{padding:12px 18px}.ev-body>h2{font-size:18px;margin:0 0 10px}.ev-bosses{grid-template-columns:1fr 1fr!important}.ev-boss{display:grid;grid-template-columns:35% 1fr;min-height:150px}.ev-art{height:205px!important}.ev-art>img{height:120%;max-width:none}.ev-boss-info{padding:16px 12px!important}.ev-boss h3{font-size:21px;margin:7px 0 12px}.ev-boss button{padding:8px;font-size:14px}.ev-selected{padding:0 0 8px}.ev-selected img{height:75px;width:53px}.ev-selected h2{font-size:23px;margin:2px 0}.ev-back{padding-bottom:6px}.ev-deck-form{padding-top:10px!important;gap:8px!important}.ev-deck-form select{min-height:38px}.ev-deck-form>button{min-height:40px}}

/* --- End: event-vs.css ---
 */

/* --- Begin: shadow-reward.css --- */
.shadow-reward{width:min(720px,96vw);max-width:96vw;max-height:96dvh;padding:0;border:1px solid #9582b94d;border-radius:24px;background:radial-gradient(ellipse at 50% 55%,#241239,#0b0b16 75%);color:#f7eeff;overflow:auto;box-shadow:0 30px 90px #000a;font-family:system-ui,sans-serif;box-sizing:border-box}
.shadow-reward::backdrop{background:#04040bc9}.shadow-reward *{box-sizing:border-box}.shadow-reward [hidden]{display:none!important}
.shadow-reward .sr-main{padding:25px 20px 22px;text-align:center;position:relative;overflow:hidden}
.sr-kicker{letter-spacing:.25em;font-size:10px;color:#c4a1ec;margin:0 0 9px}.sr-title{font-size:clamp(21px,4vw,29px);font-weight:600;margin:0}.sr-status{font-size:14px;color:#d5c6e3;min-height:24px;margin:12px 0}
.sr-stage{height:clamp(305px,58dvh,440px);position:relative;isolation:isolate;display:grid;place-items:center}
.sr-ring{position:absolute;width:min(88%,390px);height:auto;aspect-ratio:1;overflow:visible;color:#bd94ef;filter:drop-shadow(0 0 5px #a866dc77);opacity:.62;pointer-events:none;transition:opacity .6s,filter .6s,transform 1.2s}
.sr-ring .ring-orbit{transform-origin:200px 200px;animation:sr-orbit 65s linear infinite}.sr-ring .ring-inner{transform-origin:200px 200px;animation:sr-orbit 90s linear infinite reverse}
.sr-ink{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:3;outline:none}.sr-ink:focus-visible{outline:2px solid #d4bcff;outline-offset:-5px;border-radius:20px}
.sr-ink path{fill:none;stroke:#e7cbff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #bb5bff);vector-effect:non-scaling-stroke}
.sr-center{pointer-events:none;position:absolute;color:#bd9add;font-size:38px;font-weight:200;opacity:.8}.sr-drawing .sr-center{opacity:0}
.sr-aura{position:absolute;width:95%;height:95%;background:radial-gradient(ellipse,#f9ebff 0%,#c07eff99 12%,#9d4dff33 33%,transparent 66%);opacity:0;pointer-events:none;z-index:1}
.sr-card{position:relative;width:clamp(160px,35vw,226px);aspect-ratio:1039/1514;border-radius:5.5% / 3.8%;opacity:0;transform:translateY(30px) scale(.85);z-index:4;pointer-events:none;filter:drop-shadow(0 16px 24px #0008)}
.sr-card .royal-foil{border-radius:inherit;--glass:.5;--white-glare:.2;--foil-strength:.2}.sr-card img{object-fit:contain}.sr-card .surface{mask-image:linear-gradient(transparent 2%,#000 12%,#000 81%,transparent 92%);-webkit-mask-image:linear-gradient(transparent 2%,#000 12%,#000 81%,transparent 92%)}
.sr-white{position:absolute;inset:0;background:#fff;border-radius:inherit;opacity:1;box-shadow:0 0 22px #fff,0 0 60px #d1a2ff;z-index:8;pointer-events:none}
.sr-charging .sr-ring{opacity:1;filter:drop-shadow(0 0 12px #dca6ff);transform:scale(1.05)}.sr-charging .sr-ink{pointer-events:none;transition:opacity .65s;opacity:0}.sr-charging .sr-aura{animation:sr-charge 1.05s ease-out both}
.sr-revealing .sr-ring,.sr-result .sr-ring{opacity:.35;transform:scale(1.1)}.sr-revealing .sr-ink,.sr-result .sr-ink{display:none}.sr-revealing .sr-center,.sr-result .sr-center,.sr-charging .sr-center{display:none}
.sr-revealing .sr-card{animation:sr-rise .65s cubic-bezier(.16,.8,.2,1) both}.sr-revealing .sr-white{animation:sr-unveil 2.5s .25s ease-in-out both}.sr-revealing .sr-aura{animation:sr-settle 2.8s ease-out both}
.sr-result .sr-card{opacity:1;transform:none}.sr-result .sr-white{opacity:0;box-shadow:none}.sr-result .sr-aura{opacity:.22}
.sr-accept{display:flex;justify-content:center;min-height:48px}.sr-accept button{min-width:200px;min-height:48px;border:1px solid #d0a5ff70;border-radius:12px;background:linear-gradient(120deg,#624087,#392451);color:#fff;font:600 15px system-ui;padding:12px 28px;cursor:pointer}.sr-accept button:focus-visible{outline:2px solid white;outline-offset:4px}
@keyframes sr-orbit{to{transform:rotate(360deg)}}@keyframes sr-charge{0%{opacity:0;transform:scale(.4)}80%{opacity:.8}100%{opacity:1;transform:scale(1.1)}}@keyframes sr-rise{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sr-unveil{0%,12%{opacity:1}55%{opacity:.8}100%{opacity:0;box-shadow:0 0 0 transparent}}@keyframes sr-settle{from{opacity:1}to{opacity:.22}}
@media(max-width:600px){.shadow-reward{border-radius:18px}.shadow-reward .sr-main{padding:20px 12px 16px}.sr-status{font-size:13px}.sr-card{width:clamp(160px,51vw,215px)}}
@media(max-height:500px) and (orientation:landscape){.shadow-reward .sr-main{padding:12px}.sr-title{font-size:19px}.sr-kicker{margin-bottom:3px}.sr-stage{height:200px}.sr-card{width:128px}.sr-ring{width:225px}.sr-status{margin:7px 0}.sr-accept{min-height:44px}.sr-accept button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.shadow-reward *{animation:none!important;transition:none!important}.sr-revealing .sr-card{opacity:1;transform:none}.sr-revealing .sr-white{opacity:0}.sr-revealing .sr-aura{opacity:.2}}

/* --- End: shadow-reward.css ---
 */

/* --- Begin: royal-reward.css --- */
/* Reused from approved Royal mockup. Foil surface: pokemon-cards-css GPL-3.0; see licenses/pokemon-cards-css.txt. */
.royal-foil{display:block;position:relative;isolation:isolate;border-radius:inherit;width:100%;height:100%;overflow:hidden;background:#101722;--light-x:50%;--light-y:35%;--shift-x:50%;--shift-y:50%;--glass:.65;--white-glare:.45;--foil-strength:.35;--effect-enabled:1}.royal-foil>img{display:block;object-fit:contain;width:100%;height:100%;border-radius:inherit;pointer-events:none}.royal-foil .surface{position:absolute;inset:0;pointer-events:none;border-radius:inherit;mask-image:linear-gradient(to bottom,transparent 2%,#000 12%,#000 56%,transparent 73%);-webkit-mask-image:linear-gradient(to bottom,transparent 2%,#000 12%,#000 56%,transparent 73%)}.foil-surface{background-image:repeating-linear-gradient(125deg,#ff9fd7 0%,#ffe29e 11%,#bfffbe 21%,#8ee8ff 32%,#c7bdff 42%,#ff9fd7 53%),url('/vanguard/assets/events/glitter.png');background-size:250% 250%,65% 65%;background-position:var(--shift-x) var(--shift-y),center;background-blend-mode:soft-light;mix-blend-mode:color-dodge;opacity:calc(var(--foil-strength)*var(--effect-enabled)*.42)}.glass-surface{background:linear-gradient(125deg,transparent 0%,transparent 24%,#f5fbff1f 29%,#f5fbff80 31.5%,#f5fbff24 33%,#f5fbff3d 37%,transparent 43%,transparent 49%,#f5fbff66 52%,#f5fbff12 54%,#f5fbff2e 58%,transparent 63%,transparent);background-size:195% 170%;background-position:var(--shift-x) var(--shift-y);mix-blend-mode:screen;opacity:calc(var(--glass)*var(--effect-enabled))}.glare-surface{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff 0%,#fbfdff9c 7%,#e9f5ff40 18%,transparent 44%);mix-blend-mode:screen;opacity:calc(var(--white-glare)*var(--effect-enabled)*.7)}.glass-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 1px 1px 1px #ffffffc2,inset -1px -1px 1px #ffffff30,inset 0 0 9px #eaf5ff24;opacity:calc(var(--glass)*var(--effect-enabled));z-index:3}.reward-ceremony{position:relative;margin:4px auto 0}.reward-orbit{height:430px;position:relative;isolation:isolate;touch-action:pan-y;user-select:none;overflow:hidden}.orbit-halo{position:absolute;left:12%;right:12%;top:70px;height:250px;border:1px solid #d6bc6d32;border-radius:50%;transform:rotateX(57deg);box-shadow:0 0 40px #e1bd5715,inset 0 0 70px #5597e71c;pointer-events:none}.orbit-halo:after{content:"";position:absolute;inset:22px;border:1px dashed #e6c98438;border-radius:50%}.orbit-card{position:absolute;left:50%;top:47%;width:clamp(85px,12vw,136px);aspect-ratio:350/510;padding:0;background:none;border:0;border-radius:6px;transform-style:preserve-3d;will-change:transform;cursor:pointer;transition:filter .25s;filter:drop-shadow(0 14px 16px #0008)}.orbit-card:focus-visible{outline:2px solid #ffe1a0;outline-offset:7px}.orbit-card:hover:not(:disabled){filter:drop-shadow(0 0 15px #e8c571aa)}.orbit-card:disabled{cursor:default}.orbit-card:disabled:not(.dismissed){opacity:1}.card-turn{display:block;position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.2,.65,.2,1)}.card-back,.reward-front{position:absolute;inset:0;display:block;backface-visibility:hidden;border-radius:inherit;overflow:hidden}.card-back{background:#071725;border:1px solid #a4c2e666;box-shadow:inset 0 0 18px #86b6e522}.card-back img{width:100%;height:100%;object-fit:contain;display:block}.card-back:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#ffffff20,transparent 40%,#90c7ef0b);border-radius:inherit;pointer-events:none}.reward-front{transform:rotateY(180deg)}.orbit-card.selected{width:190px;z-index:20!important;transition:transform .65s ease,width .65s ease;filter:drop-shadow(0 0 28px #ebd08c60)}.orbit-card.revealed .card-turn{transform:rotateY(180deg)}.orbit-card.dismissed{opacity:0;pointer-events:none;transition:opacity .5s,transform .5s}.orbit-toolbar{display:flex;justify-content:center;align-items:center;gap:24px;margin:-13px auto 8px}.orbit-toolbar>button{width:42px;height:42px;border-radius:50%;border:1px solid #bccce343;background:#172435;color:#efdfbb;font-size:20px}.orbit-toolbar p{text-align:center;font-size:12px;color:#d8d1bf;line-height:1.8;margin:0}.orbit-toolbar span{font-size:11px;color:#91a4bf}.reward-status{text-align:center;color:#efd9a9;font-size:13px;min-height:22px;margin:15px 0 20px}
#reward-popup{width:min(1000px,96vw);max-width:96vw;height:auto;max-height:94dvh;margin:auto;padding:0;border:1px solid #b6aeba77;border-radius:14px;background:#151320bb;box-shadow:0 18px 70px #0007;backdrop-filter:none;overflow:auto;color:#f1ebf1}#reward-popup::backdrop{background:#07091455;backdrop-filter:none}#reward-popup .reward-main{margin:0;padding:28px 25px 22px;max-width:none;width:100%;display:block}#reward-popup .reward-orbit{height:380px}#reward-popup .reward-next{margin:16px 0}#reward-popup .orbit-toolbar>button{background:#241e2fcc;border:1px solid #65535e;color:#f0c88c}#reward-popup .reward-status{color:#f0c88c}
@media(max-width:600px){#reward-popup{width:96vw;border-radius:10px;max-height:94dvh}#reward-popup .reward-main{padding:28px 12px 18px}#reward-popup .reward-orbit{height:315px}.reward-page .fight-header #phases{gap:0}.reward-page .fight-header .phase{font-size:8px;padding:3px}.reward-page .fight-header>a{font-size:10px}.reward-page .setup-panel{max-width:90vw}}#reward-popup .orbit-toolbar>button{border-radius:8px}
@media(max-width:600px){}
body:has(#reward-popup[open]) #setup{opacity:.22}
.reward-accept{display:flex;justify-content:center;margin:8px 0 6px}.reward-accept button{min-width:200px;padding:13px 28px}#reward-popup .reward-main{padding-top:22px;padding-bottom:22px}
#reward-popup{height:fit-content!important}
@media(max-height:500px) and (orientation:landscape){#reward-popup .reward-main{padding:12px 18px}#reward-popup .reward-orbit{height:calc(100dvh - 184px);min-height:130px}#reward-popup .orbit-card{width:75px}#reward-popup .orbit-card.selected{width:min(130px,calc((100dvh - 184px)*.686))}#reward-popup .orbit-halo{top:28px;height:140px}#reward-popup .orbit-toolbar{margin:0 auto 4px;gap:14px}#reward-popup .orbit-toolbar>button{height:30px;width:34px;font-size:16px}#reward-popup .reward-status{margin:8px 0;min-height:18px;font-size:11px}#reward-popup .reward-accept{margin:4px 0}#reward-popup .reward-accept button{min-height:38px;padding:8px 24px}}

#reward-popup [hidden]{display:none!important}#reward-popup .royal-foil,#reward-popup .royal-foil>img,#reward-popup .orbit-card,#reward-popup .card-turn,#reward-popup .card-back,#reward-popup .reward-front{border-radius:5.5% / 3.8%}#reward-popup .royal-foil{overflow:hidden}

/* --- End: royal-reward.css ---
 */

/* --- Begin: ban-pick.css --- */
@import url('/theme.css');
:root{color-scheme:dark;--mint:#68e9d7;--coral:#ff867b;--gold:#f8d69b;--line:#7595b32a;--text:#e8eff9;--muted:#8fabc3}*{box-sizing:border-box}body{margin:0;color:var(--text);background:radial-gradient(ellipse at 50% 0,#153240 0,#0b1526 46%,#080d17 100%);font:14px/1.5 system-ui,'Segoe UI',sans-serif;min-height:100dvh}button,select{font:inherit}button{cursor:pointer;color:inherit;background:#17273b;border:1px solid #7595b344;border-radius:9px;padding:10px 14px}button:hover{border-color:var(--mint);background:#203c46}button:disabled{cursor:default;opacity:.4}button.primary{background:var(--mint);border-color:var(--mint);color:#052627;font-weight:800}button.ban-action{background:var(--coral);border-color:var(--coral);color:#300d12}a{color:inherit;text-decoration:none}.topbar{height:60px;padding:8px 28px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);background:#111725dd}.brand img{width:92px;max-height:40px;object-fit:contain}.topbar>span{font-size:11px;letter-spacing:1.5px}.topbar b{color:var(--mint);margin-left:8px}.local-label{margin-left:auto;color:var(--muted);font-size:10px!important}main{max-width:1340px;margin:auto;padding:24px 28px 84px}h1,h2,h3,p{margin:0}h1{font-size:clamp(26px,3vw,40px);font-style:italic;letter-spacing:-1px;line-height:1.1}h2{font-size:18px}small{font-size:11px;color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint);margin-bottom:9px}.intro{display:flex;gap:24px;justify-content:space-between;align-items:center;margin-bottom:20px}.intro p{margin-top:10px;color:var(--muted);font-size:13px}.rank-mark{width:56px;height:56px}.panel{padding:22px;border:1px solid var(--line);background:linear-gradient(135deg,#182a3cbb,#121c2fd9);border-radius:16px}.prepare{max-width:960px;margin:20px auto}.prepare-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.prepare-head>div{display:flex;align-items:center;gap:12px}.prep-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.prep-slot{min-width:0}.prep-slot label{display:block;color:var(--muted);font-size:11px;margin-bottom:7px}.prep-slot select{width:100%;background:#111e2d;color:var(--text);border:1px solid var(--line);padding:10px;border-radius:8px;margin-top:12px}.prepare-footer{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.prepare-footer small{display:block;max-width:410px}.prep-error{color:var(--coral);margin-top:14px;font-size:12px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}.step{padding:10px 13px;border-top:2px solid #7595b333;background:#15243780;display:flex;gap:10px;align-items:center}.step>span{font-size:17px;color:#7292a3;font-weight:800}.step small{display:block}.step b{font-size:11px;font-weight:650}.step.active{border-color:var(--gold);background:#9d78551a}.step.active>span{color:var(--gold)}.step.done{border-color:var(--mint)}.step.done>span{color:var(--mint)}.decision{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #d6b17845;border-radius:12px;background:linear-gradient(90deg,#2b2d36,#152c3d);padding:15px 20px;margin-bottom:18px}.decision h2{font-size:20px}.decision p{color:#bbccd9;font-size:12px;margin-top:3px}.decision .clock{font-size:34px;font-weight:850;font-variant-numeric:tabular-nums;color:var(--gold);line-height:1.2}.decision .clock small{font-size:13px;margin-left:2px;color:inherit}.decision.urgent .clock{color:var(--coral)}.arena{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;position:relative}.arena:before{content:'VS';position:absolute;left:50%;top:17px;transform:translateX(-50%);font-size:12px;font-weight:800;color:var(--muted);background:#101e2d;border:1px solid var(--line);padding:8px;border-radius:50%;z-index:1}.side{padding:19px;border:1px solid #7595b32d;border-radius:15px;background:linear-gradient(135deg,#172c3cbb,#131b2bdd);min-width:0}.side.acting{border-color:#68e9d75a;box-shadow:inset 0 1px #68e9d72a}.side.enemy{background:linear-gradient(135deg,#2d2534aa,#1c1d2edd)}.side-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}.side-head img{width:30px;height:30px}.side-head h2{font-size:17px}.side-head small{display:block}.turn-badge{margin-left:auto;font-size:10px;padding:4px 7px;color:var(--mint);border:1px solid #68e9d744;border-radius:6px}.deck-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.deck{position:relative;min-width:0;border:1px solid #7694b63b;border-radius:10px;overflow:hidden;background:#0b1625}.deck.art-only{pointer-events:none}.deck.selected{outline:2px solid var(--gold);outline-offset:2px}.deck.locked{outline:2px solid var(--mint);outline-offset:2px}.deck .art{height:176px;position:relative;background:radial-gradient(ellipse at center,#44536755,#0c182b);overflow:hidden}.deck .art>img{display:block;width:100%;height:100%;object-fit:contain;padding:10px;filter:drop-shadow(0 8px 8px #0008);transition:transform .2s}.deck:not(.banned):hover .art>img{transform:scale(1.04)}.deck .number{position:absolute;top:8px;left:8px;z-index:1;background:#091221d9;border:1px solid #7595b345;color:#bed2e4;border-radius:5px;padding:2px 6px;font-size:10px}.deck-copy{padding:10px 10px 12px}.deck-copy h3{font-size:13px;line-height:1.35;min-height:35px}.deck-copy small{font-size:10px;display:block;margin-top:3px}.deck-buttons{display:grid;gap:6px;margin-top:9px}.deck-buttons button{padding:7px 5px;font-size:11px}.deck.banned{border-color:#e7878766;background:#171921}.deck.banned .art>img{filter:grayscale(1) brightness(.4)}.lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#e4b2b5;background:#07101a55;font-weight:850;font-size:14px;letter-spacing:2px}.lock-overlay svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}.deck.banned:after{content:'';position:absolute;top:0;left:0;width:100%;height:176px;background:repeating-linear-gradient(135deg,transparent 0 25px,#ecaaaa08 25px 27px);pointer-events:none}.lock-label{position:absolute;bottom:8px;right:8px;padding:3px 8px;background:#082d29ed;border:1px solid #69e9cf66;color:var(--mint);font-size:10px;border-radius:5px}.phase-actions{display:flex;align-items:center;gap:12px;justify-content:flex-end;border-top:1px solid var(--line);margin-top:22px;padding-top:17px}.phase-actions>p{margin-right:auto;color:var(--muted);font-size:12px}.phase-actions .primary{min-width:185px}.history{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;color:#95adc1;font-size:11px}.history strong{color:#c0d2df}.vs-ready{text-align:center;max-width:950px;margin:25px auto}.vs-ready>p{color:var(--muted);margin:12px 0 20px}.ready-decks{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;margin:25px 0}.ready-decks>strong{font-size:32px;font-style:italic;color:var(--gold)}.ready-decks .deck{max-width:290px;margin:auto;width:100%}.ready-decks .art{height:260px}.ready-decks h3{min-height:auto}.ready-player{display:block;color:var(--mint);font-size:14px;margin-bottom:10px}.ready-actions{display:flex;gap:12px;justify-content:center}.ready-actions button{min-width:160px}dialog{color:var(--text);border:1px solid #729ab752;background:#0f1c2d;padding:0;border-radius:16px;width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}dialog::backdrop{background:#020711cf;backdrop-filter:blur(7px)}dialog header{display:flex;gap:15px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;background:#132235;padding:16px 20px;border-bottom:1px solid var(--line)}dialog header button{padding:2px 11px;font-size:25px}.list-summary{padding:12px 20px;color:#a1bed2;font-size:12px;background:#122035}#list-cards{padding:20px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.list-card{padding:0;border:0;text-align:left;background:transparent}.list-card img{width:100%;aspect-ratio:.681;object-fit:contain;display:block}.list-card strong{font-size:10px;display:block;margin-top:5px}.list-card span{font-size:10px;color:var(--mint)}#card-info{width:min(720px,calc(100vw - 24px))}#card-name{font-size:17px}#card-content{padding:20px;display:grid;grid-template-columns:180px 1fr;gap:22px}#card-content img{width:100%;object-fit:contain}#card-content p{font-size:13px;white-space:pre-wrap;line-height:1.9}#card-content small{display:block;margin-bottom:12px}.demo-tools{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:8px;background:#080f1bf5;border-top:1px solid var(--line);padding:8px;z-index:20;flex-wrap:wrap}.demo-tools span{font-size:10px;color:var(--muted)}.demo-tools button{font-size:10px;padding:5px 9px;background:transparent}.demo-tools button:disabled{opacity:.25}
@media(min-width:1500px){main{padding-top:42px}.deck .art{height:210px}.deck.banned:after{height:210px}}
@media(max-width:1000px){main{padding:18px 16px 90px}.arena{gap:16px}.side{padding:13px}.deck-grid{gap:8px}.deck .art{height:154px}.deck.banned:after{height:154px}.deck-copy{padding:8px}.deck-copy h3{font-size:12px}.deck-copy small{font-size:9px}.steps{gap:5px}.step{padding:8px}.step b{font-size:10px}.step small{font-size:9px}}
@media(max-width:650px){.topbar{height:52px;padding:7px 13px;gap:14px}.brand img{width:77px}.topbar>span{font-size:9px;letter-spacing:.5px}.local-label{font-size:8px!important}main{padding:15px 10px 100px}.intro{margin-bottom:14px;gap:12px}.intro h1{font-size:28px}.intro p{font-size:11px;margin-top:6px}.intro .rank-mark{width:39px;height:39px}.steps{gap:4px;margin-bottom:12px}.step{padding:6px 5px;gap:5px}.step>span{font-size:13px}.step b{font-size:9px}.step small{font-size:8px}.decision{padding:10px 12px;margin-bottom:12px;gap:8px}.decision h2{font-size:16px}.decision p{font-size:10px}.decision .clock{font-size:29px}.arena{grid-template-columns:1fr;gap:12px}.arena:before{display:none}.side{padding:12px}.side-head{margin-bottom:11px}.side-head h2{font-size:15px}.side-head small{font-size:10px}.side-head img{width:26px;height:26px}.turn-badge{font-size:9px}.deck .art{height:137px}.deck.banned:after{height:137px}.deck-copy h3{font-size:11px;min-height:29px}.deck-copy small{font-size:9px}.deck-buttons button{font-size:10px;padding:6px 3px}.deck .art>img{padding:7px}.phase-actions{position:sticky;bottom:65px;padding:12px 10px;background:#0b1727ed;border:1px solid var(--line);border-radius:10px;flex-wrap:wrap;gap:8px;margin-top:12px;z-index:3}.phase-actions>p{flex-basis:100%;font-size:10px}.phase-actions .primary{flex:1;min-width:0}.history{font-size:10px;gap:7px}.prepare{margin:4px auto;padding:14px}.prepare-head{margin-bottom:16px}.prepare-head h2{font-size:16px}.prep-grid{gap:8px}.prep-slot select{font-size:10px;padding:7px 4px}.prepare-footer{flex-wrap:wrap;gap:12px}.prepare-footer .primary{width:100%}.ready-decks{gap:12px;grid-template-columns:1fr 20px 1fr}.ready-decks>strong{font-size:17px}.ready-decks .art{height:195px}.ready-player{font-size:12px}.ready-decks .deck-copy h3{font-size:12px}.ready-actions{flex-wrap:wrap}.ready-actions button{min-width:135px}#list-cards{grid-template-columns:repeat(3,minmax(0,1fr));padding:13px;gap:10px}dialog header{padding:12px 14px}dialog h2{font-size:16px}#card-content{grid-template-columns:100px 1fr;gap:14px;padding:14px}#card-content p{font-size:11px}.demo-tools{gap:4px;padding:7px 4px}.demo-tools button{font-size:9px;padding:5px 6px}}
@media(max-height:500px) and (min-width:651px){main{padding-top:12px}.intro{margin-bottom:10px}.intro h1{font-size:25px}.intro p{margin-top:5px}.steps{margin-bottom:10px}.decision{padding:9px 15px}.deck .art{height:116px}.deck.banned:after{height:116px}.phase-actions{margin-top:12px;padding-top:12px}.side-head{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Keep decisions and confirmation visible while inspecting both sides. */
.side-head h2 small{display:inline;margin-left:5px;font-weight:400}.deck-status{display:flex;align-items:center;justify-content:center;min-height:32px;font-size:10px;color:var(--muted)}.decision{position:sticky;top:8px;z-index:5}.phase-actions{position:sticky;bottom:54px;z-index:5;background:#0b1727f2;padding:12px 15px;border:1px solid var(--line);border-radius:10px}.phase-actions>p{font-size:11px}
@media(min-width:1001px) and (max-height:950px){main{padding-top:18px}.intro{margin-bottom:15px}.intro h1{font-size:34px}.deck .art{height:150px}.deck.banned:after{height:150px}.side{padding:15px}.decision{padding:12px 18px}}
@media(max-width:650px){.phase-actions{bottom:64px;padding:11px 10px}.deck-status{min-height:27px;font-size:8px}.side-head h2 small{font-size:9px}.decision{top:5px}.decision p{font-size:10px}}

/* --- End: ban-pick.css ---
 */

/* --- Begin: ban-pick-sci-fi.css --- */
/* Scoped to the dedicated pregame document. */
body{--mint:#61edff;--gold:#f5d99e;background:radial-gradient(ellipse at 12% 37%,#073d5b99,transparent 47%),radial-gradient(ellipse at 88% 38%,#47256a88,transparent 47%),#060c19;font-family:'Chakra Petch',system-ui,sans-serif}
@font-face{font-family:'Chakra Petch';src:url('/vanguard/assets/fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-display:swap;font-weight:600 900}
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 3px,#5fe9ff04 3px 4px);opacity:.7}
.intro h1{letter-spacing:1px;text-shadow:2px 2px #142145,0 0 40px #5de7ff45}.intro .eyebrow{display:flex;align-items:center;gap:12px}.intro .eyebrow:before{content:'';width:36px;height:2px;background:var(--mint);box-shadow:0 0 10px var(--mint)}
.intro .rank-mark{width:70px;height:70px}.steps{gap:14px}.step{position:relative;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}.steps .step.active{background:linear-gradient(90deg,#59d9ff20,#59d9ff03);border-color:#61edff}.step.active:after{content:'';position:absolute;width:5px;height:5px;right:7px;bottom:7px;background:var(--mint);box-shadow:0 0 12px var(--mint)}
.decision{background:linear-gradient(95deg,#0b2535f2,#0d182aeb 65%,#27223aeb);border-color:#64c9e24d;position:sticky;top:0;z-index:4;backdrop-filter:blur(14px)}
.clock{position:relative;display:flex;align-items:center;justify-content:center;min-width:66px;height:66px;border-radius:50%;border:1px solid #6ee9ff45;background:radial-gradient(circle,#43c6e70d,transparent 70%)}.clock:before{content:'';position:absolute;inset:-4px;border:2px solid transparent;border-top-color:var(--mint);border-bottom-color:#ab7eff;transform:rotate(-28deg);border-radius:50%}.decision.urgent .clock:before{border-top-color:var(--coral)}
.side-head h2{font-size:19px}.side{position:relative}.side:before{content:'';position:absolute;inset:50px -4px 45px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 65%,#1f9eb51c,transparent 70%)}.side.enemy:before{background:radial-gradient(ellipse at 50% 65%,#aa6cf526,transparent 70%)}
.deck .art{height:220px}.deck .art:before{left:0;right:0;bottom:0;height:50%;background:radial-gradient(ellipse,#57e5ff30,transparent 70%);filter:blur(8px)}.deck .art:after{content:'';position:absolute;width:75%;height:18px;bottom:2px;left:12.5%;border:1px solid #64dffc55;border-radius:50%;transform:rotateX(55deg);box-shadow:0 0 12px #64dffc26;pointer-events:none}.enemy .deck .art:after{border-color:#ae7cff77}.deck .art>img{position:relative;z-index:1;padding:7px 14px 15px;filter:drop-shadow(0 17px 8px #000b)}.deck-copy{text-align:center;border-color:#4fc1df40}.deck .number{left:3px;top:8px;z-index:2;border-left:2px solid #51d4f2;padding-left:7px;color:#a5ecff}.deck-buttons button{font-weight:600;min-height:34px}.deck-buttons button[data-select]{border:1px solid #63d2f25c;background:linear-gradient(110deg,#16415388,#15334d55);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}.deck.selected .art:after{border-color:#f5d99e;box-shadow:0 0 18px #f5d99e88}.deck.selected .deck-buttons button[data-select]{background:#61513670;border-color:var(--gold)}.lock-overlay{z-index:2}.lock-label{z-index:2;background:#082a32ed;border-bottom:1px solid var(--mint)}.deck.locked .art:after{border-color:var(--mint)}
.phase-actions{padding:17px 18px;border-top:1px solid #5ed0eb69;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px)}.phase-actions .primary{min-width:180px;box-shadow:0 0 24px #61edff22}.primary{background:linear-gradient(110deg,#7af0ff,#52d1e4)!important}.primary.ban-action{background:linear-gradient(110deg,#ff9d94,#e96b87)!important}
.local-label button{padding:5px 10px;font-size:11px;border-radius:0;background:transparent}.return-lobby{display:inline-block;border-bottom:1px solid var(--mint);padding:12px;margin-top:30px;color:var(--mint)}#connection-notice,#connection-error{text-align:center;color:var(--gold);font-size:12px;padding:4px;margin:0}#connection-notice:empty{display:none}
body[data-live=true] .phase-actions{bottom:0}body[data-live=true] main{padding-bottom:40px}
body[data-screen=ready] .versus-stage{background:radial-gradient(ellipse at 50% 45%,#88bbff0d,transparent 65%)}body[data-screen=ready] .fighter-card{filter:drop-shadow(0 25px 13px #000b) drop-shadow(0 0 24px #61edff40)}
@media(max-width:1000px){.deck .art{height:184px}.intro .rank-mark{width:52px;height:52px}.side-head h2{font-size:16px}}
@media(max-width:650px){.deck .art{height:130px}.deck .art>img{padding:5px 8px 12px}.steps{gap:4px}.clock{height:50px;min-width:50px}.side-head h2{font-size:15px}.intro .rank-mark{width:42px;height:42px}.deck .number{font-size:9px;padding-left:3px}.deck-buttons button{font-size:10px;min-height:32px}.phase-actions{padding:12px 10px}.phase-actions .primary{min-width:0}.side-head{margin-bottom:9px}.arena{gap:14px}.intro h1{font-size:28px}.decision{top:0}.decision h2{font-size:15px}}
@media(max-height:500px) and (min-width:651px){.deck .art{height:116px}.clock{height:45px;min-width:45px}.intro .rank-mark{width:39px;height:39px}.deck-copy h3{min-height:30px}.phase-actions{padding:9px 12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(min-width:1001px) and (max-height:950px){.deck .art{height:174px}.deck-copy h3{min-height:20px}.deck-buttons button{min-height:29px;padding:5px}.clock{height:50px;min-width:50px}.decision{padding:10px 18px}.side-head{margin-bottom:11px}.intro{margin-bottom:13px}.intro .rank-mark{height:48px;width:48px}}

/* --- End: ban-pick-sci-fi.css ---
 */

/* --- Begin: ban-pick-viewport.css --- */
/* The pregame screen fits the viewport; only an opened card list scrolls. */
html:has(.banpick-page){height:100%;overflow:hidden}
body.banpick-page{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.topbar{height:46px;min-height:46px;flex:none;padding:5px 20px}
.brand img{width:80px;max-height:34px}
main,body[data-live=true] main,body[data-screen=ready] main{width:100%;flex:1;min-height:0;margin:0 auto;padding:12px 24px;max-width:1340px}
body[data-screen=banpick] main{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:10px}
.intro{margin:0;gap:12px;min-height:0}
.intro h1{font-size:28px;line-height:1.05}
.intro .eyebrow{font-size:9px;margin-bottom:4px}
.intro p{font-size:11px;margin-top:4px}
.intro .rank-mark{width:38px;height:38px}
.steps{margin:0;gap:8px}
.step{padding:5px 10px;min-width:0}
.step small{max-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px}
.decision{position:static;margin:0;padding:8px 14px;min-height:0;gap:12px}
.decision h2{font-size:17px;line-height:1.3}
.decision p{font-size:11px;line-height:1.3;margin-top:3px}
.decision .clock{height:44px;min-width:44px;font-size:29px;flex:none}
.arena{min-height:0;gap:38px}
.side{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);padding:0 8px;gap:9px}
.side-head{padding:0 0 6px;margin:0;min-width:0;gap:7px}
.side-head>div{min-width:0}
.side-head h2{font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-head small{font-size:10px;line-height:1.25}
.side-head img{height:25px;width:25px;flex:none}
.turn-badge{font-size:9px;white-space:nowrap;flex:none}
.arena:before{top:7px}
.arena:after{top:40px}
.deck-grid{min-height:0;gap:10px}
.deck{display:flex;flex-direction:column;min-height:0}
.deck .art{height:auto;min-height:0;flex:1}
.deck .art>img{position:absolute;inset:0;padding:7px 12px 13px;width:100%;height:100%}
.deck .number{font-size:10px;top:4px}
.deck-copy{padding:5px 2px 0;flex:none}
.deck-copy h3{font-size:12px;line-height:1.3;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-copy small{font-size:9px;line-height:1.2;margin-top:2px}
.deck-buttons{display:flex;gap:5px;margin-top:6px;min-height:34px}
.deck-buttons>*{flex:1;min-width:0}
.deck-buttons button{min-height:34px;padding:5px 2px;font-size:11px;line-height:1.15}
.deck-status{min-height:34px;font-size:9px;line-height:1.2}
.deck.banned:after{height:0;top:25%}
.lock-overlay{font-size:12px;gap:4px}
.lock-overlay svg{height:22px;width:22px}
.phase-actions,body[data-live=true] .phase-actions{position:static;margin:0;padding:9px 12px;min-height:0;flex-wrap:nowrap;gap:12px}
.phase-actions>p{margin:0 auto 0 0;flex:1;font-size:11px;line-height:1.3}
.phase-actions .primary{min-width:155px;flex:none}
.phase-actions button{padding:9px 12px;min-height:38px}
.history{display:none}
.demo-tools{position:static;flex:none;display:flex;flex-wrap:nowrap;min-height:34px;padding:4px 8px;gap:8px}
.demo-tools button{min-width:0;white-space:nowrap;padding:4px 9px;font-size:10px}
#connection-notice,#connection-error{flex:none;max-height:32px;overflow:hidden;padding:3px 8px;font-size:10px}
body[data-screen=prepare] main{display:flex;flex-direction:column;gap:12px}
.prepare{max-width:960px;width:100%;margin:0 auto;min-height:0;flex:1;display:flex;flex-direction:column;padding:10px 0 0}
.prepare-head{margin-bottom:10px;flex:none}
.prepare-head .rank-mark{height:32px;width:32px}
.prep-grid{min-height:0;flex:1}
.prep-slot{display:flex;flex-direction:column;min-height:0}
.prep-slot label{margin-bottom:4px;flex:none}
.prep-slot .deck{flex:1;min-height:0}
.prep-slot select{margin-top:6px;padding:7px 4px;flex:none;font-size:11px}
.prepare-footer{margin-top:10px;padding-top:9px;flex:none}
.prepare-footer .primary{min-height:40px}
.prep-error:empty{display:none}
.vs-ready{height:100%;display:flex;flex-direction:column;min-height:0;padding-top:0}
.vs-title{flex:none}
.vs-title h1{font-size:clamp(28px,4vw,58px)}
.versus-stage{min-height:0;flex:1;width:100%;margin:6px auto}
.vs-fighter{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:8px 15px}
.fighter-card{height:0;min-height:0;flex:1;max-height:400px;max-width:330px;width:100%}
.fighter-caption{flex:none;margin-top:10px}
.fighter-caption h2{font-size:clamp(18px,2vw,30px)}
.fighter-caption h3{font-size:13px}
.fighter-rank{margin-bottom:3px}
.fighter-lock{margin-top:7px;padding-top:5px}
.ready-footer{flex:none;padding-top:0;margin:0 auto}
.return-lobby{margin-top:15px}
#deck-list[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:min(800px,calc(100dvh - 24px));overflow:hidden}
#list-cards{overflow-y:auto;min-height:0;overscroll-behavior:contain}
#card-info[open]{display:flex;flex-direction:column;overflow:hidden}
#card-info header{flex:none}
#card-content{overflow-y:auto;min-height:0;overscroll-behavior:contain}
@media(min-width:651px) and (orientation:portrait){
 .arena{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px}
 .arena:before,.arena:after{display:none}
 .side{padding:0;gap:7px}
 .deck-copy h3{font-size:14px}
 .deck-buttons button{min-height:38px;font-size:12px}
 .deck-status{min-height:38px}
}
@media(max-height:500px) and (min-width:651px){
 body[data-screen=banpick] main{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto}
 body[data-screen=banpick] .intro{grid-column:1;align-self:center}
 body[data-screen=banpick] .steps{grid-column:2}
 body[data-screen=banpick] .decision,body[data-screen=banpick] .arena,body[data-screen=banpick] .phase-actions{grid-column:1 / -1}
}
@media(max-width:650px) and (min-height:501px){
 main,body[data-live=true] main,body[data-screen=ready] main{padding:8px 10px}
 body[data-screen=banpick] main{gap:7px}
 .intro .eyebrow,.intro p,.intro .rank-mark{display:none}
 .intro h1{font-size:23px}
 .steps{gap:4px}
 .step{padding:4px;gap:4px}
 .step small{display:none}
 .step b{font-size:9px}
 .step>span{font-size:12px}
 .decision{padding:6px 9px}
 .decision h2{font-size:14px}
 .decision p{font-size:9px}
 .decision .clock{height:38px;min-width:38px;font-size:25px}
 .arena{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
 .side{padding:0;gap:5px}
 .side-head{padding-bottom:4px;gap:5px}
 .side-head h2{font-size:13px}
 .side-head small{font-size:9px}
 .side-head img{width:21px;height:21px}
 .turn-badge{font-size:8px;padding-left:5px}
 .deck-grid{gap:7px}
 .deck .art>img{padding:4px 5px 8px}
 .deck .number{font-size:9px;top:3px;padding-left:3px}
 .deck-copy{padding-top:3px}
 .deck-copy h3{font-size:10px}
 .deck-copy small{display:none}
 .deck-buttons{gap:3px;margin-top:3px;min-height:34px}
 .deck-buttons button{font-size:10px;min-height:34px;padding:4px 1px}
 .deck-status{display:none}
 .phase-actions{gap:7px;flex-wrap:wrap;padding:7px 8px}
 .phase-actions>p{flex-basis:100%;font-size:10px}
 .phase-actions button{min-height:38px;padding:7px 12px}
 .phase-actions .primary{min-width:0;flex:1}
 .lock-overlay{font-size:10px}
 .lock-overlay svg{height:19px;width:19px}
 .lock-label{font-size:8px;bottom:6px;right:2px;padding:2px}
 .demo-tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;padding:3px 4px}
 .demo-tools>span{display:none}
 .demo-tools button{padding:5px 1px;font-size:9px;letter-spacing:-.3px}
 .prepare-head{margin-bottom:6px}
 .prepare-head h2{font-size:14px}
 .prep-grid{gap:7px}
 .prep-slot select{font-size:9px;padding:6px 2px}
 .prepare-footer{gap:6px;padding-top:6px;margin-top:7px}
 .prepare-footer small{font-size:10px;line-height:1.3}
 .prepare-footer .primary{width:100%}
 .fighter-card{max-width:155px;max-height:300px}
 .vs-fighter{padding:8px 0}
 .vs-title h1{font-size:30px}
 .fighter-caption h2{font-size:16px}
 .fighter-caption h3{font-size:11px}
}
@media(max-height:650px){
 .topbar{height:36px;min-height:36px;padding:3px 12px;gap:12px}
 .brand img{width:65px;max-height:28px}
 .topbar>span{font-size:9px}
 main,body[data-live=true] main,body[data-screen=ready] main{padding:6px 12px}
 body[data-screen=banpick] main{gap:5px}
 .intro .eyebrow,.intro p,.intro .rank-mark{display:none}
 .intro h1{font-size:21px}
 .step{padding:3px 7px;gap:6px}
 .step small{display:none}
 .step b{font-size:9px}
 .step>span{font-size:11px}
 .decision{padding:5px 10px}
 .decision h2{font-size:13px}
 .decision p{font-size:9px;margin-top:1px}
 .decision .clock{height:30px;min-width:30px;font-size:22px}
 .decision .clock:before{inset:-2px}
 .arena{gap:24px}
 .side{gap:4px;padding:0 4px}
 .side-head{padding-bottom:3px}
 .side-head h2{font-size:12px}
 .side-head small{font-size:9px}
 .side-head img{height:19px;width:19px}
 .turn-badge{font-size:8px;padding-left:5px}
 .arena:before{top:2px;font-size:15px}
 .deck .art>img{padding:2px 4px 5px}
 .deck-copy{padding-top:2px}
 .deck-copy h3{font-size:10px}
 .deck-copy small{display:none}
 .deck-buttons{gap:3px;margin-top:3px;min-height:30px}
 .deck-buttons button{min-height:30px;font-size:10px;padding:4px 2px}
 .deck-status{display:none}
 .phase-actions{padding:5px 9px;gap:8px}
 .phase-actions>p{font-size:10px}
 .phase-actions button{min-height:32px;padding:5px 10px;font-size:11px}
 .phase-actions .primary{min-width:130px}
 .demo-tools{min-height:30px;padding:3px 6px}
 .prepare{padding-top:5px}
 .prepare-head{margin-bottom:5px}
 .prepare-head .rank-mark{height:24px;width:24px}
 .prepare-head h2{font-size:13px}
 .prepare-footer{margin-top:5px;padding-top:5px;gap:8px}
 .prepare-footer small{font-size:10px}
 .prepare-footer .primary{min-height:32px;padding:5px 12px}
 .prep-slot label{font-size:9px;margin-bottom:2px}
 .prep-slot select{padding:4px;font-size:10px;margin-top:4px}
 .vs-title h1{font-size:27px;letter-spacing:-1px}
 .vs-title .eyebrow{font-size:8px;margin-bottom:2px}
 .versus-stage{margin:3px auto;max-width:840px}
 .vs-fighter{display:grid;grid-template-columns:45% 55%;align-items:center;padding:3px 10px}
 .fighter-card{height:100%;max-height:180px;max-width:150px;width:100%}
 .fighter-caption{margin-top:0}
 .fighter-caption h2{font-size:17px}
 .fighter-caption h3{font-size:11px}
 .fighter-rank{font-size:9px}
 .fighter-rank img{height:16px;width:16px}
 .fighter-lock{font-size:8px;margin-top:5px}
 .vs-center{top:40%}
 .vs-center>strong{font-size:42px}
 .ready-countdown{margin-top:12px}
 .ready-countdown b{font-size:21px}
 .ready-countdown span{font-size:8px}
 .ready-footer p{font-size:10px}
 .ready-progress{margin:5px auto}
 .ready-footer button{font-size:10px;padding:4px 10px}
}

/* --- End: ban-pick-viewport.css ---
 */

/* --- Begin: ban-pick-teams.css --- */
/* Team colors are relative to the viewer, including the waiting player's view. */
.side.ally,.vs-fighter.ally{--team:#64b9ff;--team-rgb:56,145,255;--team-solid:#175fad;--fighter-color:#64b9ff}
.side.enemy,.vs-fighter.enemy{--team:#ff8795;--team-rgb:255,70,97;--team-solid:#a72b41;--fighter-color:#ff8795}
.side:before,.side.enemy:before{inset:34px 0 0;background:radial-gradient(ellipse at 50% 55%,rgba(var(--team-rgb),.15),transparent 75%)}
.side-head,.side.enemy .side-head{border-bottom:2px solid var(--team);background:linear-gradient(90deg,rgba(var(--team-rgb),.24),rgba(var(--team-rgb),.04));padding:5px 7px;box-shadow:0 3px 13px rgba(var(--team-rgb),.13)}
.side-head h2{color:#f4f8ff;text-shadow:none}
.side-head>div>small{color:#becde0}
.side-head img{filter:drop-shadow(0 0 6px var(--team))}
.team-tag{display:inline-block;color:var(--team);font-size:10px;border-right:1px solid var(--team);padding-right:6px;margin-right:2px;vertical-align:1px}
.turn-badge{color:#c3cddd;border:0;padding:4px 7px;font-weight:600}
.side.acting .turn-badge{background:var(--team-solid);color:white;box-shadow:0 0 15px rgba(var(--team-rgb),.4)}
.side.acting .turn-badge:before{content:'●';font-size:8px;margin-right:5px}
.side.acting .side-head{box-shadow:0 0 18px rgba(var(--team-rgb),.3);border-top:1px solid rgba(var(--team-rgb),.55)}
.deck .number{color:var(--team,#8cc9ff);border-left-color:var(--team,#64b9ff)}
.deck .art:after,.enemy .deck .art:after{border-color:rgba(var(--team-rgb,56,145,255),.5);box-shadow:0 0 10px rgba(var(--team-rgb,56,145,255),.2)}
.deck-copy{border-top-color:rgba(var(--team-rgb,56,145,255),.4)}
.deck-buttons button[data-list]{color:#ecf5ff;border:1px solid #7794b9;background:#1a2b42;box-shadow:inset 0 1px #ffffff12;opacity:1}
.deck-buttons button[data-list]:hover{border-color:white;background:#2e4664}
.deck-buttons button{white-space:nowrap}
.deck-buttons button[data-select]{background:linear-gradient(125deg,var(--team-solid),rgba(var(--team-rgb),.55));border:1px solid var(--team);color:white;box-shadow:0 0 12px rgba(var(--team-rgb),.3);font-weight:800}
.deck-buttons button[data-select]:hover{background:var(--team-solid);filter:brightness(1.25);box-shadow:0 0 20px rgba(var(--team-rgb),.5)}
.deck.actionable .art>img{filter:drop-shadow(0 7px 7px #0009) drop-shadow(0 0 9px rgba(var(--team-rgb),.35))}
.deck.actionable .art:after{border:2px solid var(--team);box-shadow:0 0 17px rgba(var(--team-rgb),.5)}
.choice-hint{position:absolute;right:3px;top:4px;z-index:3;font-size:10px;line-height:1.2;background:var(--team-solid);color:white;border:1px solid var(--team);padding:3px 6px;font-weight:700;box-shadow:0 0 10px rgba(var(--team-rgb),.25)}
.deck.selected .choice-hint{background:#ffda75;color:#241900;border-color:#fff1bc}
.deck.selected .art>img{filter:drop-shadow(0 0 13px #ffd36a99)}
.deck.selected .art:after{border:2px solid #ffe3a2;box-shadow:0 0 20px #ffc95e99}
.deck.selected .deck-buttons button[data-select]{background:#ffda75;color:#241900;border-color:#fff1bc;box-shadow:0 0 15px #ffd36a66}
.deck-buttons button:disabled,.phase-actions .primary:disabled{opacity:1;color:#9aa9bc;background:#172130!important;border:1px dashed #536176;box-shadow:none;filter:none;cursor:not-allowed;clip-path:none}
.deck-buttons .deck-unavailable{font-size:10px;font-weight:500}
.phase-actions .primary:enabled,.prepare-footer .primary{color:white;background:linear-gradient(110deg,#237bdf,#1758aa)!important;border:1px solid #82c6ff;box-shadow:0 0 19px #2686e65c;font-weight:800}
.phase-actions .primary.ban-action:enabled{color:white;background:linear-gradient(110deg,#cf3e55,#a5213c)!important;border:1px solid #ff9da9;box-shadow:0 0 19px #ff466159}
.phase-actions .primary:enabled:hover,.prepare-footer .primary:hover{filter:brightness(1.18)}
#skip-ban{border:1px solid #91a8c5;color:#f0f5fc;background:#26394e;opacity:1}
#skip-ban:hover{border-color:white;background:#344d68}
button:focus-visible{outline:3px solid #ffe496;outline-offset:3px}
.decision.your-turn{border-top:2px solid #62b8ff;border-bottom-color:#3973b9;background:linear-gradient(95deg,#123b64,#102b45 70%,#132638)}
.decision.opponent-turn{border-top:2px solid #ff8293;border-bottom-color:#af4055;background:linear-gradient(95deg,#4b1f31,#2c1c2d 70%,#212134)}
.decision.your-turn h2{color:#b9dfff}
.decision.opponent-turn h2{color:#ffc2cb}
.step.actor-self{border-top-color:#3b72ac}
.step.actor-enemy{border-top-color:#a84b60}
.step.actor-self.active{background:linear-gradient(90deg,#286fc650,#286fc610);border-top:2px solid #72c2ff;box-shadow:inset 3px 0 #64b9ff}
.step.actor-enemy.active{background:linear-gradient(90deg,#b22b4755,#b22b4710);border-top:2px solid #ff96a4;box-shadow:inset 3px 0 #ff8293}
.step.actor-self.active>span{color:#9ad3ff}
.step.actor-enemy.active>span{color:#ffb0bd}
.step.actor-self.active:after{background:#64b9ff;box-shadow:0 0 10px #64b9ff}
.step.actor-enemy.active:after{background:#ff8293;box-shadow:0 0 10px #ff8293}
.vs-fighter.ally .fighter-card,.vs-fighter.enemy .fighter-card{filter:drop-shadow(0 18px 13px #000b) drop-shadow(0 0 20px rgba(var(--team-rgb),.4))}
@media(max-width:650px){
 .team-tag{font-size:9px;padding-right:4px;margin-right:1px}
 .side-head{padding:3px 5px}
 .side-head h2{font-size:12px}
 .turn-badge{padding:3px 5px;font-size:8px}
 .side.acting .turn-badge:before{font-size:6px;margin-right:3px}
 .choice-hint{font-size:8px;padding:2px 4px;top:2px;right:1px}
 .deck-buttons .deck-unavailable{font-size:9px}
}
@media(max-height:650px){
 .side-head{padding:2px 5px}
 .team-tag{font-size:9px;padding-right:4px}
 .turn-badge{padding:2px 5px;font-size:8px}
 .choice-hint{font-size:8px;padding:2px 4px;top:1px;right:1px}
 .deck-buttons .deck-unavailable{font-size:9px}
}
@media(max-width:650px) and (max-height:600px){
 .phase-actions>p{display:none}
 .phase-actions{flex-wrap:nowrap}
}
@media(max-width:360px){.deck-buttons .deck-unavailable{font-size:8px}}

/* --- End: ban-pick-teams.css ---
 */

/* --- Begin: game-style.css --- */
/* Game staging for this mockup; no styles enter the live field. */
body{background:radial-gradient(ellipse at 15% 35%,#073b465e,transparent 45%),radial-gradient(ellipse at 90% 38%,#461b456e,transparent 45%),linear-gradient(180deg,#080f1a,#091421 60%,#080d15)}
body:before{content:'';position:fixed;inset:45% -20% -25%;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 109px,#79bec31c 110px 111px),repeating-linear-gradient(0deg,transparent 0 59px,#79bec318 60px 61px);transform:perspective(650px) rotateX(62deg);transform-origin:50% 0;mask-image:linear-gradient(transparent,#0006)}
.topbar{background:#0b111ba3;border-color:#a1d5e315}.intro .rank-mark{filter:drop-shadow(0 0 12px #68e9d755)}
.panel,.side,.side.enemy{background:transparent;border:0;border-radius:0;box-shadow:none}.side.acting{border:0;box-shadow:none}.side-head{padding:0 3px 13px;border-bottom:1px solid #68e9d737}.side.enemy .side-head{border-color:#a079cb45}.side-head h2{text-shadow:0 0 18px #87dce13b}.side-head img{filter:drop-shadow(0 0 8px #9ba6ff5c)}.turn-badge{background:transparent;border:0;border-radius:0;border-left:2px solid currentColor;padding-left:9px}.arena{gap:45px}.arena:before{top:14px;background:transparent;border:0;font-size:19px;font-style:italic;color:#dacfb9}.arena:after{content:'';position:absolute;left:50%;top:70px;bottom:5px;width:1px;background:linear-gradient(transparent,#81b4c446,transparent);pointer-events:none}
.steps .step{background:transparent;border-top-width:1px}.steps .step.active{background:linear-gradient(90deg,#e5c1740d,transparent);border-top-color:#f4d899}.steps .step.done{background:transparent}
.decision{border:0;border-radius:0;border-top:1px solid #f4d8995c;border-bottom:1px solid #bca1702d;background:linear-gradient(90deg,#112132f2,#10212fef);box-shadow:0 10px 35px #0003}.decision h2{font-style:italic}.decision .clock{text-shadow:0 0 22px #ffdb9770}
.deck,.deck.banned{border:0;border-radius:0;background:transparent;overflow:visible}.deck.selected,.deck.locked{outline:0}.deck .art{background:transparent;overflow:visible;perspective:650px}.deck .art:before{content:'';position:absolute;left:10%;right:10%;bottom:4%;height:24%;background:#53d6d91c;border-radius:50%;filter:blur(17px);pointer-events:none}.enemy .art:before{background:#9974d52c}.deck .art>img{filter:drop-shadow(0 15px 10px #0009);transform:rotateY(-8deg) rotateZ(-2deg)}.enemy .deck .art>img{transform:rotateY(8deg) rotateZ(2deg)}.deck:not(.banned):hover .art>img{transform:translateY(-5px) rotateY(0) scale(1.05)}.deck.selected .art>img{transform:translateY(-8px) scale(1.07);filter:drop-shadow(0 0 13px #ecca6870)}.deck.locked .art>img{filter:drop-shadow(0 0 14px #57e3cb80)}.deck .number{background:transparent;border:0;border-radius:0;top:6px;left:4px;color:#93bbca;font-style:italic;font-size:12px;font-weight:700}.deck-copy{border-top:1px solid #6f9ead25;padding-top:9px}.deck-copy h3{color:#f1effa;font-weight:750}.deck.selected .deck-copy{border-color:var(--gold)}.deck.selected .deck-copy h3{color:var(--gold)}.deck-buttons button{border-radius:0;background:transparent;border:0;border-bottom:1px solid #7195b049;color:#bfdaea}.deck-buttons button[data-select]{color:#f2d6a5;border-color:#c7a77b50;background:linear-gradient(90deg,transparent,#a37c3414,transparent)}.deck-buttons button:hover{background:#73cddd12}.deck.banned .art>img{filter:grayscale(1) brightness(.32);transform:rotateZ(-3deg)}.deck.banned:after{height:0;top:26%;left:15%;width:70%;border-top:2px solid #fc8c9355;transform:rotate(-20deg);background:none}.lock-overlay{background:transparent;color:#ffadb3;font-size:13px;text-shadow:0 0 18px #eb7c9b88}.lock-label{background:transparent;border:0;text-shadow:0 0 14px #68e9d7;border-radius:0}
.phase-actions{border:0;border-top:1px solid #78a0b63d;border-radius:0;background:linear-gradient(0deg,#0b1727fa,#0b1727ec);box-shadow:0 -13px 30px #08111d70}.primary,#skip-ban{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.prepare{border-top:1px solid #68e9d733}.prep-slot select{border:0;border-bottom:1px solid #7297ab66;border-radius:0;background:#0c1b2ab0}.prepare-footer{padding-top:15px;border-top:1px solid #6fa5bb24}
body[data-screen=ready] main{max-width:1400px;padding-top:22px}body[data-screen=ready]{background:radial-gradient(ellipse at 23% 46%,#0d51626b,transparent 47%),radial-gradient(ellipse at 77% 42%,#742b365c,transparent 47%),linear-gradient(180deg,#080f1b,#0c1320)}
.vs-ready{max-width:none;margin:0 auto;text-align:center}.vs-title h1{font-size:clamp(38px,6vw,78px);font-weight:950;letter-spacing:-3px;transform:skew(-5deg);text-shadow:3px 3px #3ea6c32e,0 0 45px #baf6ff33}.vs-title .eyebrow{color:#abc9d8;letter-spacing:4px;margin-bottom:8px}
.versus-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:470px;max-width:1100px;margin:10px auto 0;isolation:isolate}.versus-stage:before{content:'';position:absolute;top:9%;bottom:4%;left:50%;width:2px;background:linear-gradient(transparent,#d3b87e8c,transparent);transform:rotate(18deg);box-shadow:0 0 40px 5px #fbd79917;z-index:-1}.versus-stage:after{content:'';position:absolute;inset:16% 0 16%;z-index:-2;background:linear-gradient(110deg,#38cfd813,transparent 45%,transparent 55%,#ff697b0e);clip-path:polygon(0 9%,96% 0,100% 89%,4% 100%)}
.vs-fighter{position:relative;padding:15px 15px 0;min-width:0;--fighter-color:#61e6e0;perspective:900px}.fighter-1{--fighter-color:#ffa08d}.fighter-aura{position:absolute;top:13%;left:18%;width:64%;height:57%;border-radius:50%;background:radial-gradient(ellipse,var(--fighter-color),transparent 65%);opacity:.15;filter:blur(24px);pointer-events:none}.fighter-card{display:block;height:300px;width:100%;max-width:330px;object-fit:contain;margin:0 auto;transform:rotateY(-13deg) rotateZ(-5deg);filter:drop-shadow(0 24px 20px #000b) drop-shadow(0 0 14px #3fc1d83d);animation:card-arrive .5s ease-out both}.fighter-1 .fighter-card{transform:rotateY(13deg) rotateZ(5deg);filter:drop-shadow(0 24px 20px #000b) drop-shadow(0 0 14px #fd9f9942)}
.fighter-caption{margin-top:15px;position:relative;z-index:2}.fighter-caption h2{font-size:clamp(20px,2.6vw,34px);font-style:italic;font-weight:850;color:#ecf9ff;text-shadow:0 0 23px #90cbe433}.fighter-caption h3{font-size:15px;font-weight:500;color:var(--fighter-color);margin-top:2px}.fighter-rank{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:7px;font-size:11px;color:#b4c5d8}.fighter-rank img{width:22px;height:22px}.fighter-lock{display:inline-block;color:var(--fighter-color);border-top:1px solid color-mix(in srgb,var(--fighter-color),transparent 55%);font-size:10px;letter-spacing:2px;margin-top:13px;padding:7px 20px 0}
.vs-center{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:3}.vs-center>strong{display:block;font-size:clamp(48px,7.6vw,103px);line-height:.9;font-weight:950;font-style:italic;color:#f4d6a1;letter-spacing:-6px;text-shadow:0 4px #4c3446,0 0 38px #ffe0a04f}.ready-countdown{display:flex;flex-direction:column;align-items:center;margin-top:29px}.ready-countdown b{font-size:30px;font-weight:850;color:#fcf2d8;font-variant-numeric:tabular-nums;line-height:1.1}.ready-countdown span{font-size:10px;color:#b7a98f;margin-top:5px;order:-1}.ready-footer{max-width:430px;margin:0 auto;padding-top:11px}.ready-footer p{font-size:12px;color:#98b3c6}.ready-progress{height:2px;background:#8793a127;margin:13px auto 10px;width:150px;overflow:hidden}.ready-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#6fe8da,#ffe1a4);transform-origin:left;transition:transform .2s linear}.ready-footer button{border:0;border-bottom:1px solid #7a9bbf40;border-radius:0;background:transparent;color:#a0bdd0;font-size:11px;padding:6px 12px}.ready-footer button:hover{color:#e7f6ff;background:#69bdd013}
@keyframes card-arrive{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@media(min-width:1500px) and (min-height:1000px){.versus-stage{min-height:640px}.fighter-card{height:405px;max-width:380px}.vs-center{top:37%}.ready-countdown{margin-top:42px}.ready-countdown b{font-size:40px}.ready-footer{margin-top:8px}}
@media(max-width:1000px){.arena{gap:24px}.versus-stage{min-height:470px}.fighter-card{height:285px}.fighter-caption h2{font-size:26px}.vs-center>strong{font-size:78px}.vs-center{top:33%}}
@media(max-width:650px){.arena{gap:15px}.arena:after{display:none}.arena:before{display:none}.side{padding:9px 7px 11px}.side-head{padding-bottom:10px;margin-bottom:13px}.deck-grid{gap:12px}.deck-copy{padding-left:2px;padding-right:2px}.deck .art:before{filter:blur(12px)}.deck .number{font-size:10px}.deck.banned:after{top:25%}.decision{padding:10px 9px}.phase-actions{bottom:70px}.vs-title h1{font-size:34px;letter-spacing:-1.5px}.vs-title .eyebrow{font-size:8px;letter-spacing:2px}.vs-ready{padding-top:8px}.versus-stage{min-height:440px;grid-template-columns:1fr 1fr;margin-top:13px}.vs-fighter{padding:10px 0 0}.fighter-card{height:230px;max-width:155px}.fighter-caption{margin-top:16px}.fighter-caption h2{font-size:18px}.fighter-caption h3{font-size:12px}.fighter-rank{font-size:9px;gap:4px}.fighter-rank img{width:17px;height:17px}.fighter-lock{font-size:8px;letter-spacing:1px;padding:7px 9px 0;margin-top:10px}.vs-center{top:34%}.vs-center>strong{font-size:47px;letter-spacing:-3px}.ready-countdown{margin-top:26px}.ready-countdown b{font-size:25px}.ready-countdown span{font-size:8px}.ready-footer{padding-top:0;margin-top:7px}.ready-footer p{font-size:10px}.ready-progress{width:115px}body[data-screen=ready] main{padding-top:17px;padding-bottom:90px}.versus-stage:before{transform:rotate(10deg);opacity:.6}.demo-tools{row-gap:3px}}
@media(max-height:500px) and (min-width:651px){body[data-screen=ready] main{padding-top:10px;padding-bottom:65px}.vs-title h1{font-size:35px}.vs-title .eyebrow{margin-bottom:5px;font-size:8px}.versus-stage{min-height:214px;max-width:720px;margin-top:1px}.fighter-card{height:142px}.vs-fighter{display:grid;grid-template-columns:46% 54%;align-items:center;padding:8px}.fighter-1{direction:rtl}.fighter-1 .fighter-caption{direction:ltr}.fighter-caption{margin-top:0}.fighter-caption h2{font-size:18px}.fighter-caption h3{font-size:11px}.fighter-rank{font-size:9px}.fighter-rank img{width:16px;height:16px}.fighter-lock{font-size:8px;margin-top:8px}.vs-center{top:40%}.vs-center>strong{font-size:45px}.ready-countdown{margin-top:14px}.ready-countdown b{font-size:22px}.ready-countdown span{font-size:8px}.ready-footer{padding-top:0}.ready-footer p{font-size:9px}.ready-progress{margin:6px auto}.ready-footer button{font-size:9px;padding:4px 8px}}
@media(prefers-reduced-motion:reduce){.fighter-card{animation:none}.ready-progress i{transition:none}}

/* --- End: game-style.css ---
 */

/* --- Begin: map-editor.css --- */
.map-editor{margin:0;height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at top,#223653,#111722 65%);color:#e8f0ff;font-family:'Chakra Petch',sans-serif;overflow:hidden}
.map-editor header{display:flex;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid #ffffff25;background:#10182670}.map-editor header img{width:74px;height:34px;object-fit:contain}.map-editor h1{font-size:18px;margin:0;flex:1}.map-editor header a{font-size:12px;color:#cfe3ff}
.map-editor button,.map-editor select,.map-editor input,.map-import{font:inherit;border:1px solid #d9e9ff45;color:#e8f0ff;background:#23354c60;border-radius:5px;min-height:40px;padding:7px 10px}.map-editor button{cursor:pointer}.map-editor button.primary{background:#4589c746;border-color:#94c9ff99}.map-editor select option{background:#1b293c}.map-editor input[type=checkbox]{min-height:0;width:18px;height:18px;accent-color:#86c8ff}
.map-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:8px 18px;border-bottom:1px solid #ffffff20}.map-toolbar label{display:flex;align-items:center;gap:7px;font-size:12px}.map-toolbar select{max-width:200px}
.map-editor main{display:grid;grid-template-columns:minmax(0,1fr) 270px;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0}.map-stage{display:grid;place-items:center;min-width:0;min-height:0;padding:12px;overflow:hidden}.map-inspector{padding:17px;border-left:1px solid #ffffff25;overflow:auto;background:#15243850}.map-inspector>label{display:block;font-size:12px;margin-bottom:8px}.map-inspector select{width:100%}.map-help{font-size:11px;line-height:1.6;color:#b7c9df}.map-values{display:grid;grid-template-columns:1fr 1fr;gap:10px}.map-values label{font-size:11px}.map-values input{width:100%;min-width:0;margin-top:4px}.map-inspector .map-mirror{display:flex;align-items:center;gap:7px;margin-top:15px;font-size:11px}.map-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.map-tools button,.map-import{font-size:11px;text-align:center}.map-import{display:grid;place-items:center;cursor:pointer}.map-import input{display:none}.map-inspector small,#map-status{font-size:11px;line-height:1.65;color:#b9d1ed}#map-status{min-height:36px;color:#b4ddff}
#map-shell{position:relative;flex:none;overflow:hidden;border:1px solid #ffffff38;border-radius:6px;background:#10151e}#map-preview{position:absolute;left:0;top:0;border:0;transform-origin:top left;pointer-events:none}#map-handles{position:absolute;inset:0;touch-action:none}
.map-handle{position:absolute;z-index:1;min-height:0!important;min-width:0!important;padding:0!important;background:#6bbcff06!important;border:1px dashed #91cfff90!important;border-radius:3px!important;cursor:move;touch-action:none;box-shadow:none!important}.map-handle[data-key$=".soul"]{z-index:0}.map-handle .map-label{position:absolute;left:1px;top:0;font-size:9px;line-height:1.3;background:#13263ca8;color:#cce8ff;padding:1px 3px;white-space:nowrap;pointer-events:none}.map-handle:hover,.map-handle.selected{z-index:3;border:2px solid #cae9ff!important;background:#76c5ff17!important;box-shadow:0 0 9px #a3d6ff35!important}.map-handle.selected .map-label{background:#b0d9ff;color:#112338}.map-handle.ui-handle{border-color:#ffdca878!important}.map-handle.ui-handle .map-label{color:#ffdfb6}
.map-handle .map-label{opacity:0}.map-handle:is(.selected,:hover,:focus-visible) .map-label{opacity:1}
@media(max-width:760px){.map-editor{height:auto;min-height:100dvh;overflow:auto}.map-editor header{padding:8px;gap:8px;flex-wrap:wrap}.map-editor h1{font-size:14px}.map-editor header img{width:46px}.map-editor header button{margin-left:auto;font-size:11px;min-height:44px}.map-toolbar{padding:8px;gap:8px}.map-toolbar select{max-width:155px}.map-editor main{display:flex;flex-direction:column}.map-stage{height:420px;flex:none;padding:8px}.map-inspector{border-left:0;border-top:1px solid #ffffff25;padding:14px}.map-inspector small{display:block}.map-tools{grid-template-columns:repeat(3,1fr)}.map-editor input,.map-editor select,.map-editor button,.map-import{font-size:13px;min-height:44px}.map-handle{min-height:0!important}.map-editor input[type=checkbox]{min-height:0}.map-values{grid-template-columns:1fr 1fr}}

.map-handle,.map-handle:hover,.map-handle:active{transform:none!important;overflow:visible}
.map-resize{position:absolute;display:block;width:12px;height:12px;border:1px solid #f3faff;border-radius:2px;background:#71bdff;z-index:4;touch-action:none}.map-resize::after{content:"";position:absolute;inset:-7px}.map-resize[data-resize="n"],.map-resize[data-resize="s"]{left:50%;width:24px;height:8px;transform:translate(-50%,-50%);cursor:ns-resize}.map-resize[data-resize="n"]{top:0}.map-resize[data-resize="s"]{top:100%}.map-resize[data-resize="e"],.map-resize[data-resize="w"]{top:50%;width:8px;height:24px;transform:translate(-50%,-50%);cursor:ew-resize}.map-resize[data-resize="e"]{left:100%}.map-resize[data-resize="w"]{left:0}.map-resize[data-resize="nw"],.map-resize[data-resize="ne"]{top:0}.map-resize[data-resize="sw"],.map-resize[data-resize="se"]{top:100%}.map-resize[data-resize="nw"],.map-resize[data-resize="sw"]{left:0}.map-resize[data-resize="ne"],.map-resize[data-resize="se"]{left:100%}.map-resize[data-resize="nw"],.map-resize[data-resize="se"]{cursor:nwse-resize;transform:translate(-50%,-50%)}.map-resize[data-resize="ne"],.map-resize[data-resize="sw"]{cursor:nesw-resize;transform:translate(-50%,-50%)}

.map-handle[data-key="ui.header"]{z-index:0}.map-editor select:disabled{opacity:.5}.map-toolbar #map-scene{max-width:215px}

/* --- End: map-editor.css ---
 */

/* --- Begin: server-status.css --- */
#cfv-server-list{margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid #8daedc33}#cfv-server-list h3{font-size:15px;margin:0 0 12px}#cfv-server-list article{display:grid;gap:5px;margin:10px 0;padding:12px;border:1px solid #81a6d533;border-radius:12px;background:#101c31}#cfv-server-list b{font-size:13px}#cfv-server-list .server-online b{color:#94ecc3}#cfv-server-list .server-offline b{color:#b7bdc8}#cfv-server-list small{color:#a8bad3;font-size:11px}#cfv-server-list span{font-size:12px;color:#dcecff}#cfv-match-server{height:18px;line-height:18px;margin:0;padding:0 max(8px,env(safe-area-inset-left));background:#101e32;color:#bedcff;text-align:center;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;position:relative;z-index:0}.fight-page .fight-table{height:calc(100dvh - 48px - 18px)!important}.battle-match .fight-table{height:calc(100dvh - var(--battle-header) - 18px)!important}.battle-match .fight-board:not(.close-view){width:min(96vw,calc((100dvh - var(--battle-header) - var(--battle-hand) - var(--battle-controls) - 49px - env(safe-area-inset-bottom))*var(--field-table-ratio)))}#cfv-server-detail{font-size:12px;line-height:1.7;overflow-wrap:anywhere;color:#b9d7ef}@media(max-height:600px) and (orientation:landscape){.battle-match .fight-board:not(.close-view){width:min(96vw,calc((100dvh - 166px - env(safe-area-inset-bottom))*var(--field-table-ratio)))}}@media(max-width:600px) and (orientation:portrait){.battle-match .fight-board:not(.close-view){width:100%}#cfv-match-server{font-size:9px}}.skill-preview-mode #cfv-match-server{display:none}.skill-preview-mode .fight-table{height:100dvh!important}
#cfv-server-list .cfv-host-notice{margin:8px 0 12px;padding:10px 12px;border:1px solid #ffc16d70;border-radius:8px;background:#422b18;color:#ffdda8;font-size:12px;line-height:1.6}#cfv-server-list .cfv-host-notice[hidden]{display:none}

/* --- End: server-status.css ---
 */

/* --- Begin: update-status.css --- */
#cfv-update-status[hidden]{display:none!important}
#cfv-update-status{position:fixed;inset:16px 16px auto;z-index:2147483646;pointer-events:none;display:flex;justify-content:center;font-family:inherit;color:#f5f7ff}
#cfv-update-status>div{box-sizing:border-box;width:min(640px,100%);padding:20px 24px;background:#151a29;border:1px solid #ecc575;border-radius:18px;box-shadow:0 12px 40px #0008;text-align:center;pointer-events:auto}
#cfv-update-status small{font-size:11px;letter-spacing:2px;color:#ecc575}
#cfv-update-status h2{font-size:clamp(19px,4vw,27px);line-height:1.45;margin:8px 0}
#cfv-update-status p{font-size:14px;line-height:1.6;margin:8px 0;color:#cbd5e5}
#cfv-update-status .cfv-update-home{display:block;margin-top:18px;padding:13px;background:#285a88;color:#fff;border-radius:10px;text-decoration:none;font-weight:700}
#cfv-update-status a[hidden]{display:none}
#cfv-update-status.cfv-update-blocking{inset:0;background:#090d18e8;align-items:center;padding:16px;pointer-events:auto}
#cfv-update-status.cfv-update-blocking>div{max-height:calc(100dvh - 32px);overflow:auto}
#cfv-update-status .cfv-update-changes[hidden]{display:none}
#cfv-update-status .cfv-update-changes{text-align:left;margin:16px 0;padding:14px 16px;background:#ffffff08;border:1px solid #ffffff14;border-radius:12px}
#cfv-update-status .cfv-update-changes h3{margin:0 0 10px;color:#ecc575;font-size:17px}
#cfv-update-status .cfv-update-changes ul{margin:0;padding-left:20px;max-height:40dvh;overflow:auto;overscroll-behavior:contain}
#cfv-update-status .cfv-update-changes li{font-size:14px;line-height:1.6;margin:7px 0;color:#dce5f3;overflow-wrap:anywhere}
#cfv-update-status .cfv-update-warning{color:#ff8b91;font-weight:700;overflow-wrap:anywhere;margin-top:14px}
#cfv-update-status .cfv-update-warning[hidden]{display:none}
#cfv-update-status .cfv-update-warning a{color:inherit;text-decoration:underline}
@media(max-width:480px){#cfv-update-status>div{padding:16px}#cfv-update-status p{font-size:12px}}

/* Resumable maintenance: make "do not close this page" impossible to miss. */
#cfv-update-status .cfv-update-stay{font-weight:700;font-size:1.08em;color:#ffc3ba;border:1px solid #ff8979;border-radius:8px;padding:8px 10px}
#cfv-update-status>div{position:relative}#cfv-update-status .cfv-update-exit{position:absolute;right:10px;top:10px;min-height:36px;padding:6px 10px;border:1px solid #ff9f98;border-radius:7px;background:#4c2530;color:#ffc4be;font-weight:700}#cfv-update-status .cfv-update-exit[hidden]{display:none}#cfv-update-status:has(.cfv-update-exit:not([hidden])) small{display:block;padding:28px 24px 0}

/* A dismissible advance notice; blocking maintenance keeps the full-screen panel. */
#cfv-update-status .cfv-update-ack[hidden]{display:none}
#cfv-update-status.cfv-update-countdown{inset:10px 10px auto;justify-content:flex-end}
#cfv-update-status.cfv-update-countdown>div{width:min(340px,100%);padding:12px 14px;border-radius:12px;text-align:left}
#cfv-update-status.cfv-update-countdown small{font-size:9px;letter-spacing:1px}
#cfv-update-status.cfv-update-countdown h2{font-size:16px;line-height:1.35;margin:5px 0}
#cfv-update-status.cfv-update-countdown p{font-size:12px;line-height:1.5;margin:5px 0}
#cfv-update-status.cfv-update-countdown .cfv-update-note{color:#ffe0a1;font-weight:700;font-variant-numeric:tabular-nums}
#cfv-update-status .cfv-update-ack{min-height:40px;padding:7px 18px;margin-top:7px;border:1px solid #f2c373;border-radius:7px;background:#f2c373;color:#1d2331;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
#cfv-update-status .cfv-update-ack:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* --- End: update-status.css ---
 */

/* --- Begin: asset-loader.css --- */
#asset-loading{position:fixed;inset:0;z-index:2147483646;display:grid;place-items:center;padding:24px;background:#090f1f;color:#dceaff;font-family:system-ui,sans-serif}#asset-loading>div{width:min(480px,100%);padding:32px;border:1px solid #44708a;border-radius:22px;background:radial-gradient(ellipse at top,#18374c,#111727 70%);box-shadow:0 0 45px #43bdff18}#asset-loading span{font-size:12px;letter-spacing:.22em;color:#8bd9ff}#asset-loading h1{font-size:clamp(25px,5vw,36px);margin:18px 0}#asset-loading p{font-size:14px;line-height:1.7;min-height:24px}#asset-loading progress{width:100%;height:10px;accent-color:#72d7fa}#asset-loading small{display:block;font-size:12px;color:#9eb4ce;line-height:1.8;margin-top:18px}

/* --- End: asset-loader.css ---
 */

/* --- Begin: install.css --- */
.header-shortcuts #install-app[hidden]{display:none}
.header-shortcuts #install-app{color:#8de2d5}
#install-help{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;box-sizing:border-box;overflow:auto;border:1px solid #77c7df80;border-radius:20px;background:linear-gradient(145deg,#192c42,#0c1525);color:#edf5ff;box-shadow:0 20px 80px #0008}
#install-help::backdrop{background:#030a17bb}
#install-help>img{width:64px;height:64px;border-radius:15px;display:block;margin-bottom:16px}
#install-help h2{font-size:22px;line-height:1.5;margin:0 0 12px}
#install-help p,#install-help li{font-size:14px;line-height:1.7;color:#bdd0e5;overflow-wrap:anywhere}
#install-help ol{padding-left:24px;margin:18px 0}
#install-help li{padding-left:4px;margin:12px 0}
#install-help button{width:100%;min-height:44px;border-radius:10px;border:1px solid #6bb6d4;background:#204d64;color:#f2faff;font:inherit}
#install-help button:focus-visible{outline:2px solid #a0edff;outline-offset:3px}

/* --- End: install.css ---
 */