/* 1.5 Interaction pass. One selected state, stable layouts, compact mobile chooser. */
:root {
  --selected-surface:var(--v-surface-3a2e4b);
  --selected-text:var(--v-ink-ecdefc);
  --selected-accent:var(--v-accent-c8abea);
  --focus-color:var(--v-ink-d6c2ef);
  --nav-height:72px;
}
html { scrollbar-gutter:stable; }
body { -webkit-tap-highlight-color:transparent; }
button,a,select,input,textarea { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--focus-color);outline-offset:3px;
}
.button,.icon-button,.key-small,.segmented button,.mines-preset button,.upgrade-presets button { touch-action:manipulation; }
.button:hover:not(:disabled) { transform:none; }
.button:active:not(:disabled) { transform:none; }
.button.secondary:hover:not(:disabled),.button.ghost:hover:not(:disabled) { background:var(--v-surface-3a3049); }
.nav-item.active,.segmented button.selected,.mines-preset button.selected,.admin-tabs button.active {
  background:var(--selected-surface);color:var(--selected-text);box-shadow:none;
}
.segmented { border-radius:13px;padding:4px;gap:4px; }
.segmented button { border-radius:10px;transition:background .18s,color .18s; }
.segmented button.selected { box-shadow:0 1px 3px var(--v-shadow-08080b30); }
.segmented button:disabled,.mines-preset button:disabled { opacity:.58; }
.browser-tabs { gap:6px;background:var(--v-surface-16151e);padding:4px;border-radius:13px;align-items:stretch; }
.browser-tabs button { padding:10px 16px;border-radius:9px;min-height:40px;color:var(--muted); }
.browser-tabs button:after,.browser-tabs button:before { content:none!important; }
.browser-tabs button.active { background:var(--selected-surface);color:var(--selected-text); }
.skin-card.selected { background:var(--v-surface-382c48);box-shadow:inset 0 0 0 2px var(--v-shadow-b596d4); }
.skin-card.selected:after { content:none!important; }
.skin-choice-mark { display:grid;place-items:center;position:absolute;right:11px;top:11px;width:23px;height:23px;opacity:0;background:var(--selected-accent);color:var(--v-ink-2d233e);border-radius:50%;transform:scale(.7);transition:opacity .15s,transform .25s var(--spring-ui); }
.skin-choice-mark .icon { width:15px;height:15px; }
.skin-card.selected .skin-choice-mark { opacity:1;transform:scale(1); }
.skin-card:disabled { opacity:.6;transform:none; }
.skin-picture-status { background:none; }
.skin-picture-status small { font-size:10px; }
.avatar { background:var(--v-surface-302b3c);border-radius:13px;color:var(--v-ink-e7d5f7);box-shadow:inset 0 1px 0 var(--v-shadow-ffffff0d); }

/* Visual trees stay connected during dispatch and landing. Reserve dynamic UI space. */
.plinko-stage { overflow:hidden;min-width:0; }
.plinko-board { flex:none;width:100%;height:auto;aspect-ratio:520/395;min-height:0;contain:layout paint; }
.plinko-counter { min-height:55px; }
.plinko-counter small { display:block;min-height:17px; }
.cancel-queue { display:block;min-height:34px;padding:8px 0;font-size:11px; }
.cancel-queue.is-inactive { visibility:hidden;pointer-events:none; }
.flight-results { height:42px;min-height:42px;max-height:42px;display:flex;flex-wrap:nowrap;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none; }
.flight-results::-webkit-scrollbar { display:none; }
.flight-chip { flex:none;white-space:nowrap;min-width:48px;text-align:center; }
.plinko-launch .button { transform:none!important;scale:1!important;transition:background .16s,color .16s; }
.plinko-launch .button:active:not(:disabled) { filter:brightness(.94); }
.plinko-stage .table-link { margin-top:8px;min-height:36px; }

/* MSAA + high resolution drawing buffer. CSS never stretches an undersized bitmap. */
.dice-visual { isolation:isolate;overflow:hidden; }
.dice-webgl { width:100%;height:100%;image-rendering:auto;pointer-events:none; }
.dice-readout { min-height:79px;text-align:center; }
#dice-number { display:inline-flex;align-items:center;justify-content:center;min-width:7.1ch;height:1.15em;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.1;white-space:nowrap; }
.digit-column { display:inline-block;position:relative;height:1.1em;width:.65em;overflow:hidden;contain:layout paint;vertical-align:middle; }
.digit-strip { display:flex;flex-direction:column;height:2.2em;will-change:transform; }
.digit-strip>span { flex:0 0 1.1em;height:1.1em;line-height:1.1em;display:block;text-align:center; }
.digit-column[data-locked="false"] { color:var(--v-ink-c1b2d3);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent); }
.digit-column[data-locked="true"] { color:var(--v-ink-f3eafb); }
.digit-separator { width:.24em; }
#dice-marker { will-change:left;box-shadow:0 0 0 4px var(--v-shadow-ccaff51b); }
#dice-marker.moving { box-shadow:0 0 0 5px var(--v-shadow-ccaff521); }
.dice-track { margin-inline:8px; }

/* Upgrader artwork: same material family as the game cards, no bolt placeholder. */
.upgrade-card-scene { position:relative;display:block;width:100%;height:100%;min-height:150px;perspective:900px;overflow:hidden;background:radial-gradient(ellipse at 55% 48%,var(--v-surface-65507530),transparent 66%); }
.upgrade-collectible { position:absolute;width:36%;height:70%;top:15%;max-height:210px;border-radius:21px;background:linear-gradient(145deg,var(--v-surface-4c3e60),var(--v-surface-252131));box-shadow:0 18px 28px var(--v-shadow-08050e55),inset 0 1px 0 var(--v-shadow-ffffff25);display:flex;align-items:center;flex-direction:column;justify-content:center;gap:8px; }
.upgrade-collectible.lower { left:18%;transform:translateY(9px) rotate(-17deg) rotateY(15deg);background:linear-gradient(145deg,var(--v-surface-3d3548),var(--v-surface-262230)); }
.upgrade-collectible.upper { left:44%;transform:translateY(-9px) rotate(14deg) rotateY(-15deg);background:linear-gradient(145deg,var(--v-fill-79618d),var(--v-surface-3b2e50) 70%); }
.collectible-detail { width:60%;height:55%;display:grid;place-items:center; }
.collectible-detail .icon { width:65%;height:80%;color:var(--v-ink-e3c9fa);stroke-width:1.1;filter:drop-shadow(0 8px 9px var(--v-shadow-140c2333)); }
.lower .collectible-detail .icon { color:var(--v-ink-b6acc6); }
.upgrade-collectible i { display:block;height:3px;background:var(--v-fill-efdef536);width:36%;border-radius:3px; }
.upgrade-collectible i:last-child { width:22%;background:var(--v-fill-efdef51c); }
.upgrade-transfer { position:absolute;left:43%;top:45%;display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--v-fill-d0b6eb);color:var(--v-ink-30213e);box-shadow:0 5px 14px var(--v-shadow-130b2355); }
.upgrade-transfer .icon { width:21px;height:21px; }
.game-card:hover .upgrade-collectible.upper { transform:translateY(-14px) rotate(17deg) rotateY(-15deg); }
.game-card:hover .upgrade-collectible.lower { transform:translateY(12px) rotate(-20deg) rotateY(15deg); }
.upgrade-collectible { transition:transform .7s var(--spring-ui); }

/* Two large selection targets, explicit steps and one primary action. */
.upgrade-arena { padding:24px 26px 10px;max-width:1100px;margin-inline:auto;background:linear-gradient(140deg,var(--v-surface-25202e),var(--v-surface-1e1c27) 60%,var(--v-surface-27212f)); }
.upgrade-duel { display:grid;grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);gap:26px;align-items:center;margin:0; }
.upgrade-slot { display:flex;flex-direction:column;min-width:0;width:100%;height:280px;padding:15px 16px;grid-row:auto;text-align:left;position:relative;border:0;border-radius:19px;color:var(--text);background:var(--v-surface-191721);box-shadow:inset 0 1px 0 var(--v-shadow-ffffff09);transition:background .2s;overflow:hidden; }
.upgrade-slot:before,.upgrade-slot:after { content:none; }
.upgrade-slot.target { background:var(--v-surface-211b2b); }
.upgrade-slot:hover:not(:disabled) { transform:none;background:var(--v-surface-2f253c);box-shadow:inset 0 1px 0 var(--v-shadow-ffffff12); }
.upgrade-slot:active:not(:disabled) { transform:scale(.99); }
.upgrade-slot:disabled { opacity:1; }
.slot-label { display:flex;align-items:center;gap:7px;letter-spacing:0;text-transform:none;color:var(--v-ink-cebedc);font-size:12px;line-height:1.2; }
.slot-step { display:grid;place-items:center;flex:none;width:21px;height:21px;border-radius:50%;background:var(--v-surface-3d314e);color:var(--v-ink-e0c8f9);font-size:10px;font-weight:600; }
.slot-edit { margin-left:auto;color:var(--v-ink-af9ec0);display:flex; }
.slot-edit .icon { width:15px;height:15px; }
.slot-art { display:block;width:100%;flex:1;min-height:0;height:auto;margin:0 auto;max-width:280px;perspective:750px; }
.slot-empty { display:grid;place-items:center;margin:auto;width:72px;height:100%;max-height:120px;background:none;box-shadow:none; }
.slot-empty .icon { width:36px;height:36px;color:var(--v-ink-746386);stroke-width:1.2; }
.slot-caption { display:flex;flex-direction:column;gap:4px;min-height:63px; }
.slot-weapon { color:var(--v-ink-b1a2bf);font-size:11px; }
.slot-caption strong { color:var(--v-ink-f1e8f7);font-size:17px;font-weight:600;line-height:1.28;overflow-wrap:anywhere; }
.slot-caption small { color:var(--v-ink-b7a5c8);font-size:12px;line-height:1.35; }
.slot-caption small span { margin-inline:3px; }
.upgrade-center { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;grid-row:auto;grid-column:auto;margin:0; }
.upgrade-wheel { width:214px;height:214px;flex:none; }
.wheel-base { stroke:var(--v-line-37303f);stroke-width:9; }
.wheel-arc { stroke:var(--v-line-c2a3e2);stroke-width:9;stroke-linecap:round; }
.upgrade-wheel svg { width:100%;height:100%; }
.upgrade-needle { inset:0; }
.upgrade-needle i { top:6px;width:15px;height:15px;left:calc(50% - 7.5px);background:var(--v-fill-f2e7fc);box-shadow:0 2px 7px var(--v-shadow-0a071355); }
.wheel-value strong { font-size:35px;font-weight:580;letter-spacing:-.05em;font-variant-numeric:tabular-nums; }
.wheel-value strong small { font-size:18px;letter-spacing:0;margin-left:2px; }
.wheel-value span { font-size:11px;margin-top:7px;color:var(--v-ink-b3a1c4); }
.upgrade-wheel.won .wheel-arc { stroke:var(--v-line-94c8b0); }
.upgrade-wheel.won .wheel-value span { color:var(--v-ink-aad7c0); }
.upgrade-presets { display:flex;flex-direction:row;gap:6px;margin:0; }
.upgrade-presets button { min-height:37px;min-width:44px;border-radius:10px;padding:8px;font-size:12px;background:var(--v-surface-302737);color:var(--v-ink-cdb4e5); }
.upgrade-presets button:hover:not(:disabled) { background:var(--selected-surface); }
.upgrade-action { display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;min-height:92px;margin-top:22px; }
.upgrade-action>.primary { width:310px;min-height:50px;font-size:15px; }
.upgrade-guidance { min-height:17px;color:var(--v-ink-a897ba);font-size:11px; }
.upgrade-result { display:flex;gap:12px;align-items:center;justify-content:center;min-height:38px;font-size:12px; }
.upgrade-result>span { display:flex;gap:7px;align-items:center;min-width:0; }
.upgrade-result .icon { width:16px;height:16px;flex:none; }
.upgrade-result .text-link { font-size:11px;white-space:nowrap; }
.upgrade-tools { display:flex;gap:12px;margin:15px auto 23px;max-width:1100px; }
.utility-link { display:flex;align-items:center;gap:10px;padding:15px 18px;border-radius:15px;background:var(--v-surface-211d2a);color:var(--v-ink-cabbda);font-size:13px;flex:1;min-width:0;min-height:52px;transition:background .2s; }
.utility-link:hover { background:var(--v-surface-302639); }
.utility-link>.icon { width:18px;height:18px;flex:none; }
.utility-link>.icon:last-child { margin-left:auto;width:15px; }
.utility-link small { margin-left:7px;color:var(--v-ink-9786a8);font-size:11px; }
.upgrader-browser-desktop { margin-top:0; }

/* Chooser is a genuine modal/sheet. Its scroll position survives selection and search. */
.picker-modal { width:min(780px,100%);display:flex;flex-direction:column;max-height:min(88dvh,840px); }
.picker-modal .modal-top { flex:none; }
.picker-step { display:flex;align-items:center;gap:11px;margin:0 0 16px;flex:none; }
.picker-step>span { font-size:11px;padding:5px 8px;border-radius:6px;background:var(--v-surface-352a42);color:var(--v-ink-d4bae9);white-space:nowrap; }
.picker-step p { font-size:12px;margin:0; }
.picker-step>.text-link { margin-left:auto;font-size:12px;min-height:38px;white-space:nowrap; }
.picker-search { max-width:none;flex:none;min-height:45px;margin-bottom:16px; }
.picker-grid { overflow-y:auto;overscroll-behavior:contain;min-height:180px;min-width:0;padding:3px;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start; }
.picker-grid .skin-card { height:218px; }
.picker-grid .skin-card-art { height:116px; }
.modal-backdrop { overscroll-behavior:contain; }
.picker-modal>.load-more { flex:none;margin:12px auto 0; }

@media(max-width:1150px) {
 .upgrade-duel { grid-template-columns:minmax(0,1fr) 195px minmax(0,1fr);gap:14px; }
 .upgrade-wheel { width:178px;height:178px; }
 .upgrade-slot { height:245px;padding:13px; }
 .slot-caption strong { font-size:15px; }
 .upgrade-presets button { min-width:38px;font-size:11px; }
}
@media(max-width:900px) {
 html { scrollbar-gutter:auto; }
 .mobile-nav { position:fixed;inset:auto 0 0;isolation:isolate;z-index:70;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--nav-height) + var(--safe-bottom));min-height:0;padding:6px 8px calc(6px + var(--safe-bottom));background:var(--v-surface-1c1924);box-shadow:0 -1px 0 var(--v-shadow-ffffff05);gap:0; }
 .mobile-nav a { position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;min-width:0;min-height:0;height:60px;color:var(--v-ink-9c8baa);line-height:1;font-size:10px;border-radius:13px;transform:none; }
 .mobile-nav a::before,.mobile-nav a::after { content:none!important; }
 .nav-symbol { display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:31px;border-radius:11px;background:transparent;transition:background .18s,color .18s; }
 .mobile-nav a .nav-symbol .icon { width:22px;height:22px;margin:0;display:block; }
 .nav-label { display:block;min-height:13px;text-align:center;font-size:10px;line-height:13px;letter-spacing:0; }
 .mobile-nav a.active { color:var(--selected-text); }
 .mobile-nav a.active .nav-symbol { background:var(--selected-surface);color:var(--v-ink-ddc1f7); }
 .mobile-nav a:active .nav-symbol { background:var(--v-surface-30253f); }
 .mobile-nav a.active .nav-label { font-weight:600; }
 .mobile-nav a:focus-visible { outline-offset:-2px; }
 .experience-button { min-width:36px;width:36px;min-height:40px; }
}
@media(max-width:700px) {
 .upgrader-browser-desktop { display:none; }
 .upgrade-heading { flex-wrap:nowrap;gap:12px; }
 .upgrade-heading .page-heading p { font-size:12px; }
 .upgrade-heading .game-title { font-size:26px!important; }
 .upgrade-heading .rules-button { min-width:40px;padding:10px; }
 .upgrade-heading .rules-button span { display:none; }
 .upgrade-arena { border-radius:21px;padding:13px 12px 7px;margin-bottom:0; }
 .upgrade-duel { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch; }
 .upgrade-slot { height:197px;grid-row:1;padding:12px 10px;border-radius:16px; }
 .upgrade-slot.source { grid-column:1; }.upgrade-slot.target { grid-column:2; }
 .slot-label { font-size:10px;gap:5px; }
 .slot-step { width:18px;height:18px;font-size:9px; }
 .slot-edit .icon { width:13px;height:13px; }
 .slot-art { height:auto;width:100%;min-height:68px;max-height:95px;flex:1; }
 .slot-caption { min-height:58px;gap:4px; }
 .slot-weapon { font-size:10px; }
 .slot-caption strong { font-size:12px;line-height:1.3; }
 .slot-caption small { font-size:10px; }
 .slot-empty { max-height:88px;width:60px; }
 .slot-empty .icon { width:29px;height:29px; }
 .upgrade-center { display:flex;grid-column:1/-1;grid-row:2;flex-direction:column;gap:8px;margin:0; }
 .upgrade-wheel { width:146px;height:146px; }
 .upgrade-needle i { width:12px;height:12px;left:calc(50% - 6px);top:4px; }
 .wheel-value strong { font-size:29px; }
 .wheel-value strong small { font-size:15px; }
 .wheel-value span { font-size:10px; }
 .upgrade-presets { flex-direction:row;justify-content:center;margin:0;gap:7px; }
 .upgrade-presets button { min-height:34px;min-width:47px;padding:7px;font-size:11px; }
 .upgrade-action { min-height:79px;margin-top:14px;gap:8px; }
 .upgrade-action>.primary { width:100%;min-height:48px;font-size:14px; }
 .upgrade-guidance { font-size:10px; }
 .upgrade-result { min-height:29px;font-size:10px;gap:8px;flex-wrap:wrap; }
 .upgrade-result .text-link { font-size:10px;min-height:26px; }
 .upgrade-tools { gap:9px;margin-top:12px;margin-bottom:10px; }
 .utility-link { padding:12px 11px;gap:8px;font-size:11px;min-height:51px;border-radius:14px; }
 .utility-link>.icon:last-child { display:none; }
 .utility-link>.icon { width:17px;height:17px; }
 .utility-link small { font-size:10px;margin-left:3px; }
 .route-upgrader { padding-bottom:10px; }
 .route-upgrader+.page-footer { padding-top:5px;margin-bottom:calc(84px + var(--safe-bottom)); }
 .picker-modal { width:100%;max-height:90dvh;height:min(720px,90dvh);padding:20px 16px calc(18px + var(--safe-bottom));border-radius:23px 23px 0 0; }
 .picker-modal .modal-top { margin-bottom:13px; }
 .picker-step { margin-bottom:13px;gap:8px; }
 .picker-step p { font-size:11px; }
 .picker-step .text-link { font-size:11px; }
 .picker-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1; }
 .picker-grid .skin-card { height:199px;padding:12px; }
 .picker-grid .skin-card-art { height:98px; }
 .picker-search { margin-bottom:12px; }
 .browser-tabs { gap:4px; }.browser-tabs button { min-height:42px;padding:9px 12px;font-size:12px; }
 .plinko-counter { min-height:32px; }
 .plinko-counter small { display:inline-block;min-height:0; }
 .plinko-launch { bottom:calc(var(--nav-height) + 10px + var(--safe-bottom));z-index:65; }
 .cancel-queue { min-height:27px;grid-column:1/-1;font-size:10px;padding-top:7px; }
 .flight-results { height:37px;min-height:37px;max-height:37px; }
 .plinko-stage .table-link { margin-top:4px; }
 .dice-readout { min-height:61px; }
 .dice-readout #dice-number { font-size:34px; }
 .dice-visual { height:177px; }
 .upgrade-card-scene { min-height:114px; }
 .upgrade-collectible { border-radius:12px;gap:5px; }
 .upgrade-transfer { width:28px;height:28px; }.upgrade-transfer .icon { width:16px;height:16px; }
 .experience-button { display:flex;min-width:30px;width:30px; }
}
@media(max-width:370px) {
 .main-content { padding-left:12px;padding-right:12px; }
 .upgrade-slot { height:191px;padding:10px 8px; }.slot-label { font-size:9px;gap:4px; }
 .slot-caption strong { font-size:11px; }.slot-caption small { font-size:9px; }
 .utility-link { padding:11px 9px;gap:6px;font-size:10px; }
 .mobile-brand .brand-name { font-size:12px; }.header-actions { gap:4px; }
 .mobile-brand { gap:5px; }.header-wallet { gap:4px;padding-left:7px; }
 .header-wallet strong { max-width:91px; }
 .experience-button { display:flex;width:26px;min-width:26px; }
 .experience-button .icon { width:15px; }
}
@media(prefers-reduced-motion:reduce) { .digit-strip { will-change:auto; }.upgrade-collectible { transition:none; } }
html[data-motion=reduced] .digit-strip { will-change:auto; }

/* 2.0 Themes (mar-ui). Plinko flash colours read by game-fx.mjs; tokenized for both themes. */
:root { --fx-pin-flash:var(--v-fill-e3d7f7);--fx-pin:var(--v-fill-c3bad5);--fx-bucket-1:var(--v-fill-cdb6eb);--fx-bucket-2:var(--v-fill-b99aed);--fx-bucket-3:var(--v-fill-9474c5);--fx-ball-halo:var(--v-fill-b5a0d6); }
.theme-switch button { display:inline-flex;align-items:center;justify-content:center;gap:6px; }
.theme-switch .icon { width:16px;height:16px; }
.table-wrap { position:relative; } /* contains the .sr-only labels inside tables: no 12px page scroll at 320 */
:root[data-theme="light"] .toggle i { box-shadow:var(--ds-shadow-thumb); }

/* Light theme: the game art is a night scene, so it sits as a clean image panel instead of fading into a white card. */
:root[data-theme="light"] .card-art::after { display:none; }
/* All four tiles keep the dark stage (theme.css re-declares the dark tokens for .card-art). */
:root[data-theme="light"] .card-art { background:var(--surface); }
@media (max-width:620px) {
  /* Phones: the art is its own inset tile, so dark art never meets the white card at a seam. */
  :root[data-theme="light"] .card-art { margin:10px 0 10px 10px;border-radius:var(--ds-radius-lg); }
  /* Dialogs are bottom sheets: anchored to the bottom edge, safe area inside. */
  .modal-backdrop { align-items:flex-end;padding:0; }
  .modal { border-radius:24px 24px 0 0;padding-bottom:calc(22px + var(--safe-bottom));
    max-height:calc(100dvh - 12px - max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px))); }
  /* Solid backing behind the floating play button down to the tab bar: no content peeks between them. */
  .layout:has(.play-button)::after { content:'';position:fixed;inset:auto 0 0;z-index:64;pointer-events:none;
    height:calc(140px + var(--safe-bottom));background:linear-gradient(transparent,var(--bg) 14px); }
}
/* One slider style: the volume slider matches the Dice chance slider. */
#volume-range { min-height:29px; }