/* =====================================================================================
   Bumppies Design System — component recipes + legacy re-skin.
   Loaded LAST so it wins ties against styles.css and styles/*.css.
   Tokens come from styles/tokens.css. Recipes are the vanilla port of the design
   project's components/*.jsx (https://claude.ai/design/p/733fa8cf-e41c-40b8-88c5-63582c0d07e7).
   ===================================================================================== */

/* -------------------------------------------------------------------------- */
/* 0. Global foundations                                                        */
/* -------------------------------------------------------------------------- */
html,body{font-family:var(--font-ui);color:var(--text-primary);background:var(--night-800)}
body::before{background:radial-gradient(ellipse at 55% 34%,#ffffff14 0 15%,transparent 45%),radial-gradient(circle at 8% 0,#16505a99,transparent 34%),radial-gradient(circle at 96% 95%,#0d425999,transparent 36%),linear-gradient(160deg,var(--night-700),var(--night-900))}
h1,h2,h3,.ds-display{font-family:var(--font-display);font-weight:800;letter-spacing:var(--tracking-display)}
:where(button,[role="button"],input,select,a,[tabindex="0"]):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.boot-screen{color:var(--cream-100)}
.boot-screen .boot-logo{display:block;width:min(60vw,420px);margin:0 auto var(--space-6);filter:drop-shadow(0 5px 0 rgba(74,14,50,.55))}
.boot-screen h1{font:800 var(--scale-display)/1 var(--font-display);text-shadow:var(--text-carved)}
.boot-screen p{color:var(--text-secondary);font-weight:var(--weight-body)}
.gdd-asset-boot,.gdd-asset-loading{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 35%,#184e60,#071724 70%);color:#fff3d2}
.gdd-asset-loading{background:linear-gradient(#071724e8,#071724f5);backdrop-filter:blur(8px)}
.gdd-asset-loading-card{width:min(460px,92vw);display:grid;justify-items:center;gap:10px;padding:clamp(22px,5vw,42px);border:4px solid #c77828;border-radius:28px;background:linear-gradient(155deg,#874323,#3c1c18);box-shadow:inset 0 0 0 3px #f4b54c,0 18px 45px #0009;text-align:center}
.gdd-asset-loading-card h1{margin:0;font:800 clamp(2rem,8vw,4.4rem)/.9 var(--font-display);color:#fff0bf;text-shadow:0 4px 0 #531d22}
.gdd-asset-loading-card strong{font:900 1rem/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.gdd-asset-loading-card span,.gdd-asset-loading-card small{color:#ffe0a4;font-weight:800}
.gdd-asset-loading-card progress{width:100%;height:16px;accent-color:#61d4ec}
.gdd-css-paw{position:relative;width:82px;height:70px;filter:drop-shadow(0 5px 0 #4b1422);animation:gdd-paw-bob 900ms ease-in-out infinite alternate}
.gdd-css-paw i,.gdd-css-paw b{position:absolute;display:block;background:#ffcf55;border:3px solid #6a2628}
.gdd-css-paw i{width:22px;height:28px;border-radius:50%}
.gdd-css-paw i:nth-child(1){left:2px;top:15px;transform:rotate(-24deg)}.gdd-css-paw i:nth-child(2){left:22px;top:0}.gdd-css-paw i:nth-child(3){right:17px;top:0}.gdd-css-paw i:nth-child(4){right:0;top:17px;transform:rotate(24deg)}
.gdd-css-paw b{left:18px;bottom:0;width:48px;height:42px;border-radius:55% 55% 45% 45%;transform:rotate(45deg)}
@keyframes gdd-paw-bob{to{transform:translateY(-6px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.gdd-css-paw{animation:none}}
.ds-kicker{display:inline-block;color:var(--text-gold);font:var(--weight-ultra) var(--text-micro)/1.2 var(--font-ui);letter-spacing:var(--tracking-kicker);text-transform:uppercase}
.ds-plaque-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ds-plaque-shell.is-fill{object-fit:fill}
.ds-plaque-spacer{display:block;width:100%}

/* -------------------------------------------------------------------------- */
/* 1. core — Button                                                             */
/* -------------------------------------------------------------------------- */
.ds-button{display:inline-grid;grid-auto-flow:column;place-items:center;gap:8px;min-height:var(--hit-min);padding:10px 18px;border:var(--border-button) solid var(--ds-line);border-radius:var(--radius-button);background:var(--ds-bg);color:var(--ds-ink);font:var(--weight-ultra) .88rem var(--font-ui);letter-spacing:.035em;text-shadow:0 2px 0 rgba(58,17,8,.55);box-shadow:var(--ds-ring),var(--ds-shelf);transition:var(--transition-button);cursor:pointer}
.ds-button.is-primary{--ds-line:var(--action-primary-line);--ds-bg:var(--action-primary);--ds-ink:var(--cream-100);--ds-ring:inset 0 0 0 2px #ffb271;--ds-shelf:0 5px 0 #43130c}
.ds-button.is-secondary{--ds-line:var(--action-secondary-line);--ds-bg:var(--action-secondary);--ds-ink:#4a210e;--ds-ring:inset 0 0 0 2px #fff0a2;--ds-shelf:0 4px 0 #3d1609;text-shadow:none}
.ds-button.is-confirm{--ds-line:var(--action-confirm-line);--ds-bg:var(--action-confirm);--ds-ink:var(--cream-100);--ds-ring:inset 0 0 0 2px #cbf58e;--ds-shelf:0 4px 0 #21500f}
.ds-button.is-wood{--ds-line:var(--action-wood-line);--ds-bg:var(--action-wood);--ds-ink:#fff6d8;--ds-ring:inset 0 2px 0 #ffd38c;--ds-shelf:0 4px 0 #412422}
.ds-button.is-danger{--ds-line:#5d2e25;--ds-bg:linear-gradient(#ff6c76,#ca264a);--ds-ink:var(--cream-100);--ds-ring:inset 0 0 0 2px #ffb3ad;--ds-shelf:0 4px 0 #4c1622}
.ds-button.is-sm{min-height:34px;padding:6px 12px;border-radius:var(--radius-md);font-size:.72rem}
.ds-button.is-lg{min-height:56px;padding:14px 26px;font-size:1.05rem}
.ds-button.is-full{width:100%}
.ds-button.is-link{min-height:34px;padding:6px 10px;border:0;background:transparent;color:#ffe2aa;text-decoration:underline;text-shadow:none;box-shadow:none;font-size:.84rem}
.ds-button:hover:not(:disabled){transform:var(--hover-lift);filter:var(--hover-brighten)}
.ds-button:active:not(:disabled):not(.is-link){transform:translateY(4px);box-shadow:var(--ds-ring)}
.ds-button:disabled{opacity:.55;filter:grayscale(.45);cursor:not-allowed;transform:none}

/* core — ImageButton */
.ds-image-button{position:relative;container-type:inline-size;display:grid;place-items:center;width:100%;min-height:var(--hit-min);padding:0;border:0;background:transparent;color:#fff8dc;cursor:pointer;transition:var(--transition-button)}
.ds-image-button>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.ds-image-button>strong{position:relative;z-index:1;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-ultra) clamp(.62rem,9cqw,1.55rem) var(--font-display);letter-spacing:.02em;text-shadow:0 2px 0 rgba(92,17,9,.85)}
.ds-image-button:hover:not(:disabled){transform:var(--hover-lift);filter:var(--hover-brighten)}
.ds-image-button:active:not(:disabled){transform:translateY(4px)}
.ds-image-button:disabled{opacity:.55;filter:grayscale(.45);cursor:not-allowed}

/* core — Panel */
.ds-panel{position:relative;padding:var(--pad-panel);border:var(--border-heavy) solid var(--border-panel-color);border-radius:var(--radius-panel-lg);background:var(--surface-panel);box-shadow:var(--shadow-panel);color:var(--cream-200);font:var(--weight-body) var(--text-body)/var(--leading-body) var(--font-ui)}
.ds-panel.is-deep{background:linear-gradient(155deg,#8b512f,#4d2922 62%,#2c1a24)}
.ds-panel.is-night{background:linear-gradient(160deg,#18273b,#0a1727)}
.ds-panel.has-ends{isolation:isolate}
.ds-panel-end{position:absolute;z-index:-1;left:8%;right:8%;height:10%;border:4px solid #754019;border-radius:60%;background:var(--wood-200)}
.ds-panel-end.is-top{top:-4%}.ds-panel-end.is-bottom{bottom:-4%}
.ds-panel-title{margin:.18em 0 .22em;font:800 var(--scale-hero)/var(--leading-display) var(--font-display);color:var(--cream-100);text-shadow:var(--text-carved)}

/* core — Plaque */
.ds-plaque{position:relative;container-type:inline-size}
.ds-plaque.is-fill>.ds-plaque-shell{object-fit:fill}
.ds-plaque-label{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.ds-plaque-label>strong{color:#fff4d5;font:800 9.5cqw/1 var(--font-display);letter-spacing:var(--tracking-display);text-shadow:0 .6cqw 0 #39150f}

/* core — Icon */
.ds-icon{width:var(--ds-size,32px);height:var(--ds-size,32px);flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.ds-icon.is-flat{filter:none}

/* core — StatusPill */
.ds-pill{display:inline-flex;align-items:center;gap:6px;min-height:25px;padding:4px 10px;border-radius:var(--radius-pill);font:var(--weight-ultra) .62rem/1 var(--font-ui);letter-spacing:.1em;white-space:nowrap;box-shadow:0 5px 12px rgba(0,0,0,.4)}
.ds-pill-dot{width:7px;height:7px;border-radius:50%;background:var(--ds-dot,currentColor);box-shadow:0 0 8px currentColor}
.ds-pill.is-service{background:rgba(95,205,139,.14);color:#c2ffd7;border:1px solid rgba(95,205,139,.42)}
.ds-pill.is-offline{background:#fff1ae;color:#5b4617;border:1px solid #e2ce7a}
.ds-pill.is-ok{background:#11201eef;color:#c9fff3;border:1px solid #67d8c688;--ds-dot:#65e5bc}
.ds-pill.is-warning{background:#11201eef;color:#ffe38a;border:1px solid #e8c261;--ds-dot:#f0c85e}
.ds-pill.is-severe{background:#11201eef;color:#ffb0a8;border:1px solid #ff8176;--ds-dot:#ff756e}
.ds-pill.is-autopilot{background:#11201eef;color:#d4caff;border:1px solid #9f89ff;--ds-dot:#9f89ff}
.ds-pill.is-rank{background:#ffd35c;color:#4b1c0c;border:2px solid #6d2d13}

/* core — Switch (real checkbox underneath) */
.ds-switch{position:relative;flex:0 0 auto;display:inline-block;width:62px;height:34px;border:2px solid #3e210f;border-radius:var(--radius-pill);background:#693b25;box-shadow:var(--shadow-inset-track);transition:background var(--duration-fast) var(--ease-base)}
.ds-switch>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ds-switch-knob{position:absolute;top:8%;left:6%;width:43%;aspect-ratio:1;border:2px solid #bda56c;border-radius:50%;background:#eee7cf;pointer-events:none;transition:left var(--duration-fast) var(--ease-base)}
.ds-switch:has(input:checked){background:var(--green-500)}
.ds-switch:has(input:checked)>.ds-switch-knob{left:51%}
.ds-switch:has(input:disabled){opacity:.55}
.ds-switch:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.ds-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--hit-min);border-bottom:1px solid var(--border-hairline-color);color:#fff4d6;font:var(--weight-ultra) var(--text-label)/1.05 var(--font-ui)}

/* core — TextField */
.ds-field{display:grid;gap:4px;color:#ffe5ae;font:var(--weight-ultra) var(--text-small) var(--font-ui);letter-spacing:.07em;text-transform:uppercase}
.ds-field>input{width:100%;min-height:var(--hit-min);padding:9px 12px;border:2px solid #b96b2e;border-radius:12px;outline:0;background:var(--surface-field);color:var(--text-on-light);font:700 16px/1 var(--font-ui)}
.ds-field>input:focus-visible{border-color:var(--focus-ring);box-shadow:0 0 0 3px rgba(103,232,249,.3);outline:0}
.ds-field.is-invalid>input{border-color:var(--coral-600)}

/* core — Toast */
.ds-toast{padding:12px 16px;border:3px solid var(--action-wood-line);border-radius:var(--radius-button);background:linear-gradient(var(--wood-600),var(--wood-900));color:var(--cream-100);font:var(--weight-ultra) .78rem/1.3 var(--font-ui);box-shadow:inset 0 0 0 2px rgba(232,164,69,.5),0 14px 30px rgba(0,0,0,.42);text-shadow:0 2px 0 rgba(54,17,8,.7)}
.ds-toast.is-good{background:linear-gradient(#2f6a3a,#173a20)}
.ds-toast.is-bad{background:linear-gradient(#7c2f26,#3f1512)}

/* core — Dialog */
.ds-dialog-backdrop{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(23,26,50,.75);backdrop-filter:blur(7px)}
.ds-dialog{position:relative;width:min(var(--ds-dialog-width,560px),92vw);max-height:calc(100dvh - 24px);overflow:auto;padding:clamp(18px,3vw,30px);border:4px solid #8c4b24;border-radius:24px;background:linear-gradient(#6b321d,#321a15);box-shadow:0 0 0 3px #f0b34b,0 18px 50px rgba(0,0,0,.67);color:#fff8db;text-align:center;font:var(--weight-body) .88rem/1.4 var(--font-ui)}
.ds-dialog-close{position:absolute;right:10px;top:10px;width:var(--hit-min);height:var(--hit-min);padding:0;border:3px solid #5d2e25;border-radius:50%;background:var(--rose-500);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.ds-dialog-title{margin:6px 0 10px;font:800 var(--scale-display)/var(--leading-display) var(--font-display);color:var(--cream-100);text-shadow:0 4px 0 #44222d}
.ds-dialog-body{color:#ffe7c0}
.ds-dialog-body p{margin:.35rem auto 1rem;max-width:44ch}
.ds-dialog-actions{display:flex;justify-content:center;gap:9px;margin-top:16px;flex-wrap:wrap}

/* core — Tooltip */
.ds-tooltip{display:grid;gap:7px;width:var(--ds-tooltip-width,330px);max-width:min(92vw,var(--ds-tooltip-width,330px));padding:11px;border:1px solid var(--ds-tooltip-accent,var(--gold-300));border-radius:8px;background:rgba(13,21,25,.97);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.85);text-align:left;font:var(--weight-body) .62rem/1.4 var(--font-ui)}
.ds-tooltip-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ds-tooltip-head>strong{font:var(--weight-ultra) .78rem var(--font-ui);color:#f2d578}
.ds-tooltip-head>b{color:#ffe174;font-size:.7rem}

/* -------------------------------------------------------------------------- */
/* 2. cards                                                                     */
/* -------------------------------------------------------------------------- */
.ds-cost-pip{position:relative;display:grid;place-items:center;width:var(--ds-size,30px);height:var(--ds-size,30px);flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.ds-cost-pip.is-hex{width:calc(var(--ds-size,30px) * 1.06)}
.ds-cost-pip::before,.ds-cost-pip>i{content:"";position:absolute;inset:0;border-radius:50%;background:#12080f}
.ds-cost-pip>i{inset:1.5px;background:linear-gradient(180deg,color-mix(in srgb,var(--ds-pip-fill) 78%,#fff),var(--ds-pip-fill) 58%,color-mix(in srgb,var(--ds-pip-fill) 72%,#000))}
.ds-cost-pip.is-hex::before,.ds-cost-pip.is-hex>i{border-radius:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.ds-cost-pip.is-hex>i{inset:2px}
.ds-cost-pip>b{position:relative;color:var(--ds-pip-ink);font:var(--weight-ultra) calc(var(--ds-size,30px) * .46)/1 var(--font-ui);text-shadow:0 1px 0 rgba(255,255,255,.28)}

.ds-stars{display:inline-flex;gap:1px;color:#ffe26e;font-size:.72rem;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.ds-stars>i{font-style:normal}
.ds-stars>i.is-off{color:#8a7a55;opacity:.28}

.ds-trait-chip{position:relative;display:inline-flex;align-items:center;gap:3px;min-width:0;height:19px;padding:1px 5px 1px 2px;border:1px solid var(--ds-line,#596462);border-radius:var(--radius-xs);background:var(--ds-bg,#172126);color:var(--ds-ink,#c4cdca);font:var(--weight-ultra) .52rem/1 var(--font-ui);white-space:nowrap;box-shadow:var(--ds-glow,none)}
.ds-trait-chip>.ds-trait-crest{display:grid;place-items:center;width:15px;height:15px;flex:0 0 15px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:var(--ds-crest,#46514f);color:var(--ds-crest-ink,#d7dfdc);font-size:.58rem}
.ds-trait-chip>b{overflow:hidden;text-overflow:ellipsis}
.ds-trait-chip>i{margin-left:auto;color:#fff4c4;font-size:.48rem;font-style:normal}
.ds-trait-chip.is-bronze,.gdd-card-trait.is-bronze{--ds-line:var(--tier-bronze-line);--ds-bg:var(--tier-bronze-bg);--ds-ink:var(--tier-bronze-ink);--ds-crest:var(--tier-bronze);--ds-crest-ink:#fff0d9;--ds-glow:0 0 7px rgba(185,117,68,.27)}
.ds-trait-chip.is-silver,.gdd-card-trait.is-silver{--ds-line:var(--tier-silver-line);--ds-bg:var(--tier-silver-bg);--ds-ink:var(--tier-silver-ink);--ds-crest:var(--tier-silver);--ds-crest-ink:#fff;--ds-glow:0 0 7px rgba(139,180,192,.27)}
.ds-trait-chip.is-gold,.gdd-card-trait.is-gold{--ds-line:var(--tier-gold-line);--ds-bg:var(--tier-gold-bg);--ds-ink:var(--tier-gold-ink);--ds-crest:var(--tier-gold);--ds-crest-ink:#fffbd9;--ds-glow:0 0 8px rgba(232,195,75,.4)}

.ds-trait-disc{position:relative;display:grid;place-items:center;width:var(--ds-size,22px);height:var(--ds-size,22px);flex:0 0 auto;border-radius:50%;border:max(1px,calc(var(--ds-size,22px) * .09)) solid var(--ds-crest,#7a5b34);background:radial-gradient(circle at 50% 34%,#4a3320 0 52%,#221208 100%);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.ds-trait-disc:not(.is-none){box-shadow:0 1px 2px rgba(0,0,0,.6),0 0 6px var(--ds-crest)}
.ds-trait-disc.is-bronze{--ds-crest:var(--tier-bronze)}.ds-trait-disc.is-silver{--ds-crest:var(--tier-silver)}.ds-trait-disc.is-gold{--ds-crest:var(--tier-gold)}
.ds-trait-disc>b{color:var(--ds-accent,#d7dfdc);font:var(--weight-ultra) calc(var(--ds-size,22px) * .55)/1 var(--font-ui);text-shadow:0 0 5px var(--ds-accent,#d7dfdc)}

.ds-puppy-card{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;padding:0;overflow:visible;text-align:center;cursor:pointer;border:0;border-radius:12px;background:transparent;color:#fff;font-family:var(--font-ui);transition:var(--transition-button)}
.ds-puppy-card.is-sold{display:grid;place-items:center;min-height:130px;border:2px dashed #8b5c33;border-radius:12px;background:radial-gradient(ellipse at 50% 120%,#33200f,#170e08);color:#9c7a4d;font:var(--weight-ultra) .58rem var(--font-ui);letter-spacing:.14em;cursor:default}
.ds-puppy-card>.ds-card-frame{position:absolute;inset:0;z-index:3;border:2px solid var(--rarity);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16),0 3px 7px rgba(0,0,0,.55),0 0 8px color-mix(in srgb,var(--rarity) 30%,transparent);pointer-events:none}
.ds-puppy-card.is-selected>.ds-card-frame{border:3px solid var(--cyan-400);box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),0 3px 7px rgba(0,0,0,.55),0 0 16px color-mix(in srgb,var(--cyan-400) 72%,transparent)}
.ds-puppy-card:hover:not(.is-unaffordable):not(:disabled){transform:var(--hover-lift-card)}
.ds-puppy-card:hover:not(.is-unaffordable):not(:disabled)>.ds-card-frame{box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16),0 3px 7px rgba(0,0,0,.55),0 0 13px color-mix(in srgb,var(--rarity) 52%,transparent)}
.ds-puppy-card.is-unaffordable,.ds-puppy-card:disabled{filter:grayscale(.7);opacity:.62;cursor:not-allowed}
.ds-card-art{position:relative;display:block;min-height:0;min-width:0;overflow:hidden;border-radius:11px 11px 0 0;background:radial-gradient(ellipse at 50% 118%,#6b3f66 0,#3a2340 34%,#241428 62%,#180f1c 100%)}
.ds-puppy-card.is-plate-wood>.ds-card-art{background:radial-gradient(ellipse at 50% 118%,#7a4a2c 0,#4a2a18 36%,#2a170e 68%,#1b1110 100%)}
.ds-puppy-card.is-plate-light>.ds-card-art{background:linear-gradient(180deg,#d8eee7,#f7e7c5)}
.ds-card-art>img{display:block;width:100%;height:100%;min-height:0;padding:7% 6% 0;box-sizing:border-box;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 5px rgba(0,0,0,.5))}
.ds-card-sheen{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.07) 0,transparent 38%);pointer-events:none}
.ds-card-cost{position:absolute;right:-1px;top:-1px;z-index:4}
.ds-card-toy{position:absolute;left:3px;bottom:3px;z-index:4;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid #f6ca70;background:radial-gradient(circle at 42% 32%,#ffe9a8,#d1892a 62%,#7c4a12);color:#3a1f05;font:var(--weight-ultra) .56rem/1 var(--font-ui);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.ds-card-plate{position:relative;display:grid;justify-items:center;gap:3px;padding:4px 5px 5px;border-radius:0 0 11px 11px;background:linear-gradient(180deg,#241428,#160c19);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.ds-card-plate>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream-200);font:var(--weight-ultra) .7rem var(--font-ui);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 0 rgba(12,6,14,.9)}
.ds-card-traits{display:flex;justify-content:center;gap:4px}

.ds-hand-card{position:relative;display:grid;grid-template-rows:1fr 27%;min-width:0;min-height:88px;padding:0;border:0;border-radius:12px;background:linear-gradient(180deg,#2b170d,#110907);color:#fff;text-align:left;cursor:pointer;font-family:var(--font-ui);box-shadow:inset 0 0 0 2px #7d4827,0 2px 6px rgba(0,0,0,.5);transition:var(--transition-button)}
.ds-hand-card.is-selected{box-shadow:inset 0 0 0 2px #7d4827,0 2px 6px rgba(0,0,0,.5),0 0 0 3px var(--cyan-400),0 0 12px rgba(99,234,255,.55)}
.ds-hand-card:hover:not(.is-unaffordable):not(:disabled){transform:var(--hover-lift-card)}
.ds-hand-card.is-unaffordable{filter:grayscale(.65);opacity:.65}
.ds-hand-card.is-dragging{filter:grayscale(1) saturate(.25);opacity:.28}
.ds-hand-art{position:relative;margin:6% 7% 0;overflow:hidden;border-radius:5px;background:linear-gradient(180deg,#253753,#11182a)}
.ds-hand-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.ds-hand-bar{position:relative;margin:0 8% 7%;padding:2% 5%;border-radius:0 0 6px 6px;background:rgba(12,17,32,.91)}
.ds-hand-bar>strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:46%;font:var(--weight-ultra) .78rem var(--font-ui);text-transform:uppercase}
.ds-hand-meta{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:flex;gap:3px;align-items:center}
.ds-hand-meta>i{color:#ffe26e;font-size:.6rem;font-style:normal}
.ds-hand-cost{position:absolute;right:8px;top:7px;z-index:4}
.ds-hand-queued{position:absolute;left:5px;top:5px;z-index:7;padding:3px 5px;border-radius:var(--radius-xs);background:rgba(23,40,62,.93);color:#8fe5ff;font:var(--weight-ultra) .5rem var(--font-ui);letter-spacing:.08em}

/* -------------------------------------------------------------------------- */
/* 3. hud                                                                       */
/* -------------------------------------------------------------------------- */
.ds-health{display:flex;align-items:center;gap:6px;min-width:0;--ds-color:var(--hp-good)}
.ds-health.is-warn{--ds-color:var(--hp-warn)}.ds-health.is-low{--ds-color:var(--hp-low)}
.ds-health>i{flex:1;min-width:32px;height:var(--ds-height,8px);overflow:hidden;border-radius:var(--radius-pill);border:1px solid #2b120b;background:#2b120b;box-shadow:inset 0 2px 3px rgba(18,7,4,.8)}
.ds-health>i>b{display:block;width:var(--ds-fill,100%);height:100%;border-radius:inherit;background:var(--ds-color);box-shadow:0 0 6px var(--ds-color)}
.ds-health-value{font:var(--weight-ultra) .68rem var(--font-ui);color:#fff4d5;font-variant-numeric:tabular-nums}

.ds-mana{display:grid;align-content:center;gap:5px;padding:10px 12px}
.ds-mana-label{display:block;font:var(--weight-ultra) .62rem var(--font-ui);letter-spacing:.1em;color:#f1d371}
.ds-mana-readout{display:block;font:800 1.7rem/1 var(--font-display);color:var(--cyan-400);text-shadow:0 3px 0 #10222b}
.ds-mana-readout>small{color:var(--cream-100);font-size:.6em}
.ds-mana-pips{display:flex;gap:2px;flex-wrap:wrap}
.ds-mana-pips>i{width:10px;height:10px;border-radius:50%;background:#2b3a49;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.ds-mana-pips>i.is-on{background:radial-gradient(circle at 40% 32%,#a9f4ff,#2f9fd6);box-shadow:0 0 6px rgba(88,214,255,.75)}
.ds-mana-rate{font:var(--weight-strong) .55rem var(--font-ui);color:#b7bed9}
.ds-mana.is-framed{position:relative;container-type:inline-size;display:block;padding:0}
.ds-mana.is-framed .ds-mana-head{position:absolute;left:11%;right:8%;top:13%;height:30%;display:grid;align-content:center;justify-items:start;gap:2%}
.ds-mana.is-framed .ds-mana-head>b{color:#f1d371;font:var(--weight-ultra) 5.6cqw/1 var(--font-ui);letter-spacing:.1em;text-shadow:0 .4cqw 0 rgba(30,12,4,.8)}
.ds-mana.is-framed .ds-mana-head>small{color:#c9b48d;font:var(--weight-strong) 4.4cqw/1 var(--font-ui)}
.ds-mana-socket{position:absolute;top:53.2%;width:9.44%;height:14.2%;transform:translate(-50%,-50%);display:grid;place-items:center}
.ds-mana-socket>img{width:104%;height:104%;object-fit:contain;filter:drop-shadow(0 0 1.4cqw rgba(216,96,255,.85))}
.ds-mana-socket>i{width:86%;height:86%;border-radius:50%;background:radial-gradient(circle at 50% 34%,rgba(24,10,6,.55),rgba(12,5,3,.75));box-shadow:inset 0 .5cqw .9cqw rgba(0,0,0,.6)}
.ds-mana-count{position:absolute;left:11.4%;top:65.4%;width:19.9%;height:12.7%;display:grid;place-items:center}
.ds-mana-count>b{color:var(--cyan-400);font:800 8.4cqw/1 var(--font-display);letter-spacing:.01em;text-shadow:0 .5cqw 0 #0d1d26}
.ds-mana-count>b>small{color:var(--cream-100);font-size:.62em}

.ds-ping{display:flex;align-items:flex-end;gap:2px;height:16px;flex:0 0 auto}
.ds-ping>i{width:4px;min-width:3px;border-radius:var(--radius-pill);background:var(--ping-dead)}
.ds-ping>i:nth-child(1){height:25%}.ds-ping>i:nth-child(2){height:45%}.ds-ping>i:nth-child(3){height:67%}.ds-ping>i:nth-child(4){height:90%}
.ds-ping>i.is-on{background:var(--ping-live);box-shadow:0 0 4px #65d927}
.ds-ping>b{margin-left:4px;align-self:center;font:var(--weight-ultra) .52rem var(--font-ui);color:#f4ddad}

.ds-rank{position:relative;container-type:inline-size;width:var(--ds-width,260px);aspect-ratio:2172/724}
.ds-rank-tier{position:absolute;z-index:3;left:31.5%;right:9%;top:25%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#fff5d7;font:var(--weight-ultra) 8.2cqw/1 var(--font-ui);letter-spacing:.05em;text-shadow:0 .9cqw 0 rgba(58,12,44,.85)}
.ds-rank-track{position:absolute;z-index:2;left:33.2%;right:26%;top:62.4%;height:12.85%;overflow:hidden;border-radius:var(--radius-pill);background:#2a1207;box-shadow:inset 0 .5cqw .8cqw rgba(14,5,2,.85)}
.ds-rank-track>i{display:block;width:var(--ds-fill,0%);height:100%;border-radius:var(--radius-pill);background:var(--xp-fill);box-shadow:inset 0 .35cqw 0 rgba(255,251,210,.9),0 0 1.2cqw rgba(255,220,88,.75)}
.ds-rank-pip{position:absolute;z-index:3;top:57.4%;width:6.6%;aspect-ratio:1;clip-path:polygon(50% 0,68% 32%,100% 50%,68% 68%,50% 100%,32% 68%,0 50%,32% 32%);background:radial-gradient(circle at 44% 34%,#fff7c4 0 26%,#ffcf47 52%,#e8871a 100%);box-shadow:0 0 1.4cqw rgba(255,205,72,.85)}

.ds-trainer-chip{display:grid;grid-template-columns:11px 26px minmax(48px,1fr) minmax(34px,52px) 22px;align-items:center;gap:4px;padding:3px 4px;border-radius:6px;background:rgba(16,24,29,.86);border:1px solid #3d4a4d;color:#fff4d5;font:var(--weight-ultra) .58rem var(--font-ui)}
.ds-trainer-chip.is-you{background:linear-gradient(90deg,#1d5a52,#12312e);border-color:#67d8c6}
.ds-trainer-chip.is-highlight{background:linear-gradient(90deg,#5a3a18,#2a1a0c);border-color:#d0913a}
.ds-trainer-chip.is-out{filter:grayscale(1);opacity:.48}
.ds-trainer-rank{color:#c8b389;font-size:.5rem;text-align:right}
.ds-trainer-avatar{display:grid;place-items:center;width:26px;height:26px;overflow:hidden;border-radius:50%;border:2px solid #e5ad4b;background:radial-gradient(circle at 50% 38%,#4a2718 0 58%,#241009 100%)}
.ds-trainer-avatar>img{width:96%;height:96%;object-fit:contain;object-position:center bottom}
.ds-trainer-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.ds-trainer-hp{text-align:right;font-variant-numeric:tabular-nums;color:#d8f5bb}
.ds-trainer-hp.is-warn{color:#ffe4a8}.ds-trainer-hp.is-low{color:#ffb8b3}

.ds-trait-row{display:grid;grid-template-columns:28px 20px minmax(0,1fr) auto;align-items:center;gap:4px;min-height:34px;padding:2px 7px 2px 2px;border:1px solid #5b6766;border-radius:5px;background:#172126;color:#b7c0bd;font:var(--weight-ultra) .62rem var(--font-ui);--ds-crest:#5b351e}
.ds-trait-row:not(.is-none){color:#fff3d0}
.ds-trait-row.is-bronze{--ds-crest:var(--tier-bronze)}.ds-trait-row.is-silver{--ds-crest:var(--tier-silver)}.ds-trait-row.is-gold{--ds-crest:var(--tier-gold)}
.ds-trait-row-crest{display:grid;place-items:center;width:27px;height:27px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:var(--ds-crest);color:#fff0d9;font-size:.8rem}
.ds-trait-row-count{text-align:center}
.ds-trait-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.ds-trait-row-ladder{display:flex;gap:3px;color:#f2d578}
.ds-trait-row-ladder>i{font-size:.5rem;font-style:normal}
.ds-trait-row-ladder>i.is-next{opacity:.42}

.ds-wallet{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:2px 12px 2px 3px;border:3px solid #673529;border-radius:14px;background:linear-gradient(180deg,#45233f,#24142f);box-shadow:var(--shadow-chip);color:#fff6dc;font:var(--weight-ultra) .9rem var(--font-ui);text-shadow:0 2px 0 rgba(30,12,26,.9);font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------------- */
/* 4. navigation                                                                */
/* -------------------------------------------------------------------------- */
.ds-chat-bar{position:relative;min-height:var(--hit-min)}
.ds-chat-form{position:relative;display:flex;align-items:center;height:100%}
.ds-chat-form>input{position:relative;z-index:1;min-width:0;width:76%;height:100%;margin:0 0 0 7%;padding:0 2%;border:0;outline:0;background:transparent;color:#fff4d5;font:var(--weight-ultra) 12px var(--font-ui)}
.ds-chat-form>input::placeholder{color:#d9c8a8}
.ds-chat-form>button{position:absolute;z-index:2;right:5%;top:50%;min-width:var(--hit-min);height:var(--hit-min);transform:translateY(-50%);border:0;background:transparent;color:#fff0c9;font:var(--weight-ultra) .62rem var(--font-ui);cursor:pointer}

.ds-destination{position:relative;min-height:92px;padding:0;border:0;background:none;cursor:pointer;filter:var(--drop-lg);transition:var(--transition-tile)}
.ds-destination>img{width:100%;height:100%;object-fit:contain}
.ds-destination:hover:not(:disabled){transform:var(--hover-lift);filter:var(--drop-lg) var(--hover-brighten)}
.ds-destination-badge{position:absolute;right:14%;top:4%;width:14px;height:14px;border-radius:50%;border:2px solid #521912;background:#ff4438;box-shadow:0 0 8px rgba(255,68,56,.8)}

.ds-mode-row{position:relative;container-type:inline-size;min-width:0;min-height:var(--hit-min);overflow:hidden;padding:0;border:0;background:transparent;color:#fff5da;text-align:left;cursor:pointer;transition:filter var(--duration-fast) var(--ease-base)}
.ds-mode-row.is-selected{color:#fffef1}
.ds-mode-row:hover:not(.is-selected):not(:disabled){filter:var(--hover-brighten)}
.ds-mode-plate{position:absolute;left:-6.77%;top:-34.77%;width:111.42%;height:177.93%;object-fit:fill;pointer-events:none}
.ds-mode-copy{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,21%) minmax(0,1fr);align-items:center;gap:4%;padding:0 5% 0 4%;box-sizing:border-box}
.ds-mode-copy>img{width:100%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.ds-mode-copy>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-ultra) 6.4cqw/1 var(--font-ui);letter-spacing:.01em;text-transform:uppercase;text-shadow:0 .8cqw 0 #39150f}

.ds-seat{position:relative;container-type:inline-size;min-width:0;aspect-ratio:1122/1402;text-align:center;color:#fff4d5;transition:transform var(--duration-base) var(--ease-base)}
.ds-seat.is-empty{filter:saturate(.72) brightness(.9)}
.ds-seat-shell{filter:drop-shadow(0 4px 6px rgba(12,26,24,.5))}
.ds-seat-portrait{position:absolute;z-index:2;left:29.5%;top:7.6%;width:41.8%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 34%,#5a3320 0 54%,#241009 100%);box-shadow:inset 0 3px 8px rgba(10,4,2,.7)}
.ds-seat-portrait>img{width:112%;height:112%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 4px rgba(0,0,0,.5))}
.ds-seat-invite{display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.ds-seat-invite>img{width:46%;height:46%;object-fit:contain;opacity:.88;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.ds-seat-invite:hover>img{opacity:1}
.ds-seat-number{position:absolute;z-index:5;left:50%;top:-1.5%;transform:translateX(-50%);width:23%;aspect-ratio:1;display:grid;place-items:center;border:2px solid #f6ca70;border-radius:50%;background:radial-gradient(circle at 50% 32%,#8a4423,#3c190f);color:#fff9df;font:var(--weight-ultra) 11.5cqw/1 var(--font-ui);text-shadow:0 2px 0 rgba(30,10,4,.9);box-shadow:0 3px 6px rgba(16,31,30,.55)}
.ds-seat-host{position:absolute;z-index:6;left:7%;top:6.5%;width:26%;display:grid;place-items:center}
.ds-seat-host>img{width:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.ds-seat-host>b{position:absolute;bottom:-4%;padding:3% 12%;border-radius:var(--radius-xs);background:#e0a92c;color:#4a2306;font:var(--weight-ultra) 5.2cqw var(--font-ui);letter-spacing:.06em;box-shadow:0 2px 0 #8c5a10}
.ds-seat-name{position:absolute;z-index:3;left:26.5%;right:26.6%;top:37.4%;height:10%;display:grid;align-items:center}
.ds-seat-name>h3{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff3cc;font:var(--weight-ultra) 8.6cqw/1 var(--font-ui);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 2px 0 rgba(38,17,8,.9)}
.ds-seat.is-empty .ds-seat-name>h3{color:#c8b389}
.ds-seat-secondary{position:absolute;z-index:3;left:26.5%;right:26.6%;top:48.8%;height:9.2%;display:grid;align-items:center}
.ds-seat-secondary>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-ultra) 6cqw/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 0 rgba(38,17,8,.9)}
.ds-seat-bot{color:#6ee7ff;font-size:5.4cqw!important;text-shadow:0 2px 0 rgba(6,32,42,.9)!important}
.ds-seat-empty{color:#a98b62}
.ds-seat-rank{color:#f4d9a9}
.ds-seat-rank.is-challenger{color:#ffd7f4}.ds-seat-rank.is-diamond{color:#8bd6ff}.ds-seat-rank.is-platinum{color:#b6f0e4}.ds-seat-rank.is-gold{color:#ffd76a}.ds-seat-rank.is-silver{color:#dce7ea}.ds-seat-rank.is-bronze{color:#e0a877}
.ds-seat-ping{position:absolute;z-index:3;left:26.5%;right:26.6%;top:58.4%;height:14%;display:flex;align-items:center;justify-content:center;gap:5%}
.ds-seat-ping>.ds-ping{height:52%}
.ds-seat-ping>b,.ds-seat-ping>small{color:#f6e3bb;font:var(--weight-ultra) 6cqw/1 var(--font-ui);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(38,17,8,.9)}
.ds-seat-ping>small{color:#a98b62}
.ds-seat-ready{position:absolute;z-index:6;left:19%;right:19%;top:75.5%;display:grid;place-items:center;padding:2.4% 0;border:.9cqw solid var(--ds-line);border-radius:2.2cqw;background:var(--ds-bg);box-shadow:inset 0 0 0 .5cqw var(--ds-ring),0 .8cqw 0 rgba(20,10,6,.6);color:var(--ds-ink);font:var(--weight-ultra) 6.4cqw/1 var(--font-ui);letter-spacing:.05em;text-shadow:0 2px 0 rgba(24,10,4,.55)}
.ds-seat.is-ready{--ds-bg:linear-gradient(180deg,#8ed63a,#3f8d18);--ds-line:#2c5f10;--ds-ring:#c9f58c;--ds-ink:#fdffe9}
.ds-seat.is-not-ready{--ds-bg:linear-gradient(180deg,#e8564a,#9d1f1c);--ds-line:#5f1210;--ds-ring:#ffb0a4;--ds-ink:#fff1e6}
.ds-seat.is-disconnected{--ds-bg:linear-gradient(180deg,#6c5a4e,#3a2c25);--ds-line:#241a15;--ds-ring:#a4907f;--ds-ink:#e6d8c8}
.ds-seat.is-empty{--ds-bg:linear-gradient(180deg,#5c3a22,#2f1a0e);--ds-line:#1d0f07;--ds-ring:#8c6438;--ds-ink:#c8b389}

/* -------------------------------------------------------------------------- */
/* 5. Legacy re-skin — the old blue/paper prototype classes now speak carved wood */
/* -------------------------------------------------------------------------- */
/* Shell */
.gdd-global-bar{background:linear-gradient(var(--wood-400),var(--wood-700));color:var(--cream-100);border-bottom:3px solid var(--gold-400);box-shadow:inset 0 -3px 0 rgba(232,164,69,.35),0 8px 20px rgba(0,0,0,.42)}
.gdd-brand{color:var(--cream-100);font-family:var(--font-display);font-weight:800;text-shadow:var(--text-carved)}
.gdd-brand>span{width:auto;height:39px;padding:0;background:transparent;border-radius:0}
.gdd-brand>span>img{display:block;height:39px;width:auto;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(74,14,50,.55))}
.gdd-brand>strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gdd-global-bar nav button{color:var(--cream-300);font:var(--weight-ultra) .82rem var(--font-ui);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 0 rgba(54,17,8,.7);transition:var(--transition-tile)}
.gdd-global-bar nav button:hover{background:rgba(255,231,178,.12);color:var(--cream-100);transform:var(--hover-lift)}
.gdd-global-bar nav button.is-active{background:var(--action-secondary);color:#4a210e;text-shadow:none;box-shadow:inset 0 0 0 2px #fff0a2,0 3px 0 #3d1609}
.gdd-global-bar>.gdd-offline{background:rgba(95,205,139,.14);color:#c2ffd7;border:1px solid rgba(95,205,139,.42);box-shadow:0 5px 12px rgba(0,0,0,.4)}
.gdd-offline{min-height:25px;padding:4px 10px;border:1px solid #e2ce7a;background:#fff1ae;color:#5b4617;font:var(--weight-ultra) .62rem/1 var(--font-ui);letter-spacing:.1em;box-shadow:0 5px 12px rgba(0,0,0,.4);align-items:center}
.gdd-toast{border:3px solid var(--action-wood-line);background:linear-gradient(var(--wood-600),var(--wood-900));color:var(--cream-100);font:var(--weight-ultra) .78rem/1.3 var(--font-ui);box-shadow:inset 0 0 0 2px rgba(232,164,69,.5),0 14px 30px rgba(0,0,0,.42);text-shadow:0 2px 0 rgba(54,17,8,.7)}

/* Pages, headings, kickers, copy */
.gdd-page-heading h1{color:var(--cream-100);font:800 clamp(2rem,5vw,4rem)/var(--leading-display) var(--font-display);letter-spacing:var(--tracking-display);text-shadow:var(--text-carved)}
.gdd-page-heading p{color:var(--text-secondary)}
.gdd-kicker{color:var(--text-gold);font:var(--weight-ultra) var(--text-micro) var(--font-ui);letter-spacing:var(--tracking-kicker);text-transform:uppercase}
.gdd-muted,.gdd-page .gdd-muted{color:var(--text-muted)}
.gdd-page h2,.gdd-panel h2{color:var(--cream-100);text-shadow:var(--text-carved-sm)}

/* Panels */
.gdd-panel{border:var(--border-panel) solid var(--border-panel-color);border-radius:var(--radius-panel);background:var(--surface-panel);box-shadow:var(--shadow-panel);color:var(--cream-200)}
.gdd-panel p,.gdd-panel small,.gdd-panel label small,.gdd-settings-grid label small,.gdd-roster-panel header p,.gdd-shop-panel>footer>span,.gdd-synergy small,.gdd-scout-card p,.gdd-parade-status span,.gdd-mode p,.gdd-service-grid p,.gdd-home-links small,.gdd-stage small,.gdd-economy span,.gdd-trainer-chip small,.gdd-book-card small{color:var(--text-secondary)}
.gdd-settings-grid label{border-top:1px solid var(--border-hairline-color)}
.gdd-settings-grid label strong{color:var(--cream-100)}
.gdd-settings-grid select,.gdd-page select{padding:8px 10px;border:2px solid #b96b2e;border-radius:12px;background:var(--surface-field);color:var(--text-on-light);font:700 .9rem var(--font-ui)}
.gdd-settings-grid input[type=checkbox]{accent-color:var(--green-500)}
.gdd-settings-grid input[type=range]{accent-color:var(--gold-300)}
.gdd-mode,.gdd-service-grid>.gdd-panel,.gdd-stage,.gdd-pairing,.gdd-economy,.gdd-parade-status>div,.gdd-placement article,.gdd-scout-card,.gdd-spectate-pairings button{border:var(--border-thin) solid var(--border-panel-color);background:var(--surface-panel);color:var(--cream-200);box-shadow:inset 0 0 0 2px rgba(232,164,69,.55),0 10px 24px rgba(0,0,0,.35)}
.gdd-mode h2,.gdd-service-grid h2,.gdd-scout-card h2{color:var(--cream-100)}
.gdd-mode strong,.gdd-service-grid article>strong,.gdd-stage span,.gdd-spectate-pairings button span{color:var(--text-gold)}
.gdd-mode.is-disabled,.gdd-deferred{filter:grayscale(.45);opacity:.55}
.gdd-service-grid button,.gdd-pairing button,.gdd-callout button{min-height:40px;border:var(--border-button) solid var(--action-secondary-line);border-radius:var(--radius-md);background:var(--action-secondary);color:#4a210e;font:var(--weight-ultra) .78rem var(--font-ui);box-shadow:var(--shadow-btn-secondary)}
.gdd-economy b{color:var(--gold-200);font-family:var(--font-display);text-shadow:var(--text-carved-sm)}
.gdd-placement b{color:var(--gold-200);font-family:var(--font-display)}
.gdd-placement article.is-you{outline:3px solid #67d8c6;background:linear-gradient(90deg,#1d5a52,#12312e)}
.gdd-spectate-pairings button.is-active{border-color:var(--cyan-400);background:linear-gradient(90deg,#1d5a52,#12312e);color:var(--cream-100)}
.gdd-synergy{background:rgba(23,33,38,.9);border-left:3px solid #5b6766;color:#c4cdca}
.gdd-synergy.is-active{background:var(--tier-bronze-bg);border-color:var(--tier-bronze-line);color:var(--tier-bronze-ink)}

/* Buttons */
.gdd-primary,.gdd-secondary,.gdd-battle-cta,.gdd-text-button{font:var(--weight-ultra) .88rem var(--font-ui);letter-spacing:.035em;transition:var(--transition-button)}
.gdd-primary{border:var(--border-button) solid var(--action-primary-line);background:var(--action-primary);color:var(--cream-100);text-shadow:0 2px 0 rgba(58,17,8,.55);box-shadow:var(--shadow-btn-primary)}
.gdd-secondary{border:var(--border-button) solid var(--action-secondary-line);background:var(--action-secondary);color:#4a210e;box-shadow:var(--shadow-btn-secondary)}
.gdd-battle-cta{border:var(--border-button) solid var(--action-confirm-line);background:var(--action-confirm);color:var(--cream-100);text-shadow:0 2px 0 rgba(58,17,8,.55);box-shadow:inset 0 0 0 2px #cbf58e,0 4px 0 #21500f}
.gdd-text-button{color:#ffe2aa;text-decoration:underline}
.gdd-primary:hover:not(:disabled),.gdd-secondary:hover:not(:disabled),.gdd-battle-cta:hover:not(:disabled){transform:var(--hover-lift);filter:var(--hover-brighten)}
.gdd-primary:active:not(:disabled),.gdd-secondary:active:not(:disabled),.gdd-battle-cta:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.gdd-primary:disabled,.gdd-secondary:disabled,.gdd-battle-cta:disabled{opacity:.55;filter:grayscale(.45)}
.gdd-title .gdd-primary,.gdd-home-hero .gdd-primary{background:var(--action-primary);color:var(--cream-100)}

/* Callouts */
.gdd-callout{border-left:5px solid var(--gold-400);background:linear-gradient(var(--wood-500),var(--wood-800));color:var(--cream-200);box-shadow:inset 0 0 0 2px rgba(232,164,69,.35),0 10px 24px rgba(0,0,0,.35)}
.gdd-callout span{color:var(--text-secondary)}

/* Full-bleed legacy backgrounds → night family */
.gdd-title,.gdd-intro,.gdd-resolve-page,.gdd-profile-page,.gdd-home-hero{background:radial-gradient(ellipse at 55% 34%,#ffffff14 0 15%,transparent 45%),linear-gradient(160deg,var(--night-600),var(--night-900))}
.gdd-title h1,.gdd-intro h1{color:var(--cream-100);text-shadow:var(--text-carved-glow)}
.gdd-title p,.gdd-intro article small{color:var(--text-secondary)}
.gdd-countdown{color:var(--gold-200);font-family:var(--font-display);text-shadow:var(--text-carved)}
.gdd-intro article{background:rgba(22,60,66,.55);border:2px solid rgba(255,231,178,.25)}
.gdd-intro article.is-you{outline:3px solid var(--cyan-400)}

/* Cards: rarity now follows the approved key-art ramp */
.gdd-rarity-1{--rarity:var(--rarity-1-art);--rarity-ink:var(--rarity-1-art-ink)}
.gdd-rarity-2{--rarity:var(--rarity-2-art);--rarity-ink:var(--rarity-2-art-ink)}
.gdd-rarity-3{--rarity:var(--rarity-3-art);--rarity-ink:var(--rarity-3-art-ink)}
.gdd-rarity-4{--rarity:var(--rarity-4-art);--rarity-ink:var(--rarity-4-art-ink)}
.gdd-rarity-5{--rarity:var(--rarity-5-art);--rarity-ink:var(--rarity-5-art-ink)}
.gdd-puppy-card,.gdd-shop-card,.gdd-book-card,.gdd-parade-ring article{border:2px solid var(--rarity,var(--pack,#c6bdad));border-radius:12px;background:radial-gradient(ellipse at 50% 118%,#6b3f66 0,#3a2340 34%,#241428 62%,#180f1c 100%);color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16),0 3px 7px rgba(0,0,0,.55),0 0 8px color-mix(in srgb,var(--rarity,#94a3b8) 30%,transparent);transition:var(--transition-button)}
.gdd-puppy-card>img,.gdd-shop-card>img,.gdd-book-card>img,.gdd-parade-ring img{background:transparent;object-fit:contain;object-position:center bottom;padding:6% 5% 0;box-sizing:border-box;filter:drop-shadow(0 5px 5px rgba(0,0,0,.5))}
.gdd-card-copy,.gdd-book-card>div,.gdd-parade-ring article>div{background:linear-gradient(180deg,#241428,#160c19);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.gdd-card-copy strong,.gdd-book-card h2{color:var(--cream-200);font:var(--weight-ultra) .7rem var(--font-ui);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 0 rgba(12,6,14,.9)}
.gdd-book-card h2{font-size:1rem}
.gdd-card-copy small,.gdd-card-copy em{color:#d9c8a8}
.gdd-stars{color:#ffe26e;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.gdd-cost{width:30px;height:30px;border-radius:0;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background-color:var(--rarity,#f3c74d);background-image:linear-gradient(180deg,color-mix(in srgb,var(--rarity,#f3c74d) 78%,#fff),var(--rarity,#f3c74d) 58%,color-mix(in srgb,var(--rarity,#f3c74d) 72%,#000));color:var(--rarity-ink,#302508);font:var(--weight-ultra) .82rem/1 var(--font-ui);text-shadow:0 1px 0 rgba(255,255,255,.28)}
.gdd-toy-dot{width:20px;height:20px;border:1px solid #f6ca70;background:radial-gradient(circle at 42% 32%,#ffe9a8,#d1892a 62%,#7c4a12);color:#3a1f05;font:var(--weight-ultra) .6rem/1 var(--font-ui);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.gdd-shop-card:hover:not(:disabled),.gdd-puppy-card:hover{transform:var(--hover-lift-card)}
.gdd-shop-card:disabled{filter:grayscale(.7);opacity:.62}
.gdd-roster-slot.is-empty,.gdd-shop-card.is-sold{border:2px dashed #8b5c33;border-radius:12px;background:radial-gradient(ellipse at 50% 120%,#33200f,#170e08);color:#9c7a4d;font:var(--weight-ultra) .58rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase;box-shadow:none}
.gdd-roster-slot.is-empty span{opacity:.5;font-size:1.6rem}
.gdd-sale{background:rgba(12,17,32,.94);color:#ffe18a;font-family:var(--font-ui)}
.gdd-book-card footer span{background:var(--surface-chip);color:var(--cream-300)}
.gdd-book-card .gdd-bond{color:#ffe497}
.gdd-parade-number{background:var(--gold-200);color:#4a210e}

/* Trait chips on cards (legacy markup) */
.gdd-card-trait{border-color:var(--ds-line,#596462);background:var(--ds-bg,#172126);color:var(--ds-ink,#c4cdca);font-family:var(--font-ui);font-weight:var(--weight-ultra);box-shadow:var(--ds-glow,none)}
.gdd-card-trait-crest{background:var(--ds-crest,#46514f);color:var(--ds-crest-ink,#d7dfdc)}

/* Trainer chips */
.gdd-trainer-chip{border:1px solid #3d4a4d;background:rgba(16,24,29,.86);color:#fff4d5;font:var(--weight-ultra) .62rem var(--font-ui)}
.gdd-trainer-chip.is-you{outline:0;border-color:#67d8c6;background:linear-gradient(90deg,#1d5a52,#12312e)}
.gdd-trainer-chip strong{text-transform:uppercase}
.gdd-trainer-avatar{border:2px solid #e5ad4b;border-radius:50%;background:radial-gradient(circle at 50% 38%,#4a2718 0 58%,#241009 100%);color:var(--cream-100)}
.gdd-trainer-chip>i{height:4px;background:var(--hp-good);box-shadow:0 0 6px var(--hp-good)}

/* Modals (resolve / details) */
.gdd-resolve-backdrop,.gdd-details-backdrop,.gdd-emote-backdrop{background:rgba(23,26,50,.75)}
.gdd-resolve,.gdd-details{border:4px solid #8c4b24;border-radius:24px;background:linear-gradient(#6b321d,#321a15);box-shadow:0 0 0 3px #f0b34b,0 18px 50px rgba(0,0,0,.67);color:#fff8db}
.gdd-resolve h1,.gdd-details h2{color:var(--cream-100);text-shadow:0 4px 0 #44222d}
.gdd-resolve section div{background:rgba(22,13,9,.55);color:var(--cream-200)}
.gdd-resolve-score{color:var(--gold-200);font-family:var(--font-display);text-shadow:var(--text-carved)}
.gdd-ko{background:linear-gradient(#7c2f26,#3f1512);color:#ffb3a7}
.gdd-details>button{border:3px solid #5d2e25;background:var(--rose-500);color:#fff}
.gdd-detail-stats b{background:var(--surface-chip);color:var(--cream-200)}
.gdd-details .gdd-bond{border-left:4px solid var(--gold-400);color:#ffe497}

/* Battle chrome (legacy standalone battle screen) */
.gdd-live-battle{background:var(--surface-arena)}
.gdd-battle-scorebar{background:linear-gradient(var(--wood-400),var(--wood-700));border-bottom:2px solid var(--gold-400);color:var(--cream-100)}
.gdd-battle-scorebar>div b{background:rgba(22,13,9,.55);color:var(--gold-200);font-family:var(--font-display);text-shadow:var(--text-carved-sm)}
.gdd-battle-controls{background:linear-gradient(var(--wood-700),var(--wood-950));border-top:2px solid var(--action-wood-line)}
.gdd-portal-copy.is-own{color:var(--cyan-300)}
.gdd-portal-copy.is-enemy{color:#ffc2ae}

/* Profile page and trainer identity */
.gdd-profile-heading span,.gdd-trainer-name span,.gdd-trainer-identity-form legend{color:var(--text-gold);letter-spacing:var(--tracking-kicker)}
.gdd-profile-heading h1{color:var(--cream-100);text-shadow:var(--text-carved)}
.gdd-profile-heading p{color:var(--text-secondary)}
.gdd-trainer-avatar-option.is-selected{border-color:var(--cyan-400);box-shadow:0 0 0 3px rgba(104,232,255,.35)}

/* -------------------------------------------------------------------------- */
/* 6. Screens rebuilt against ui_kits/bumppies mock-ups                          */
/* -------------------------------------------------------------------------- */
.ds-button{text-transform:uppercase}
body::before{background:radial-gradient(ellipse at 50% 26%,rgba(96,196,232,.16),transparent 52%),radial-gradient(ellipse at 88% 78%,rgba(255,176,86,.13),transparent 40%),linear-gradient(180deg,#123044,#0a1a26 58%,#061119)}

/* Meta page frame: head / content / actions (MetaPages.jsx `page`) */
.ds-page{position:relative;min-height:calc(100dvh - 60px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:30px 40px;color:var(--cream-200);font-family:var(--font-ui)}
.ds-page-head{display:grid;gap:5px;margin-bottom:2px;justify-items:start;text-align:left}
.ds-page-head.is-center{justify-items:center;text-align:center}
.ds-page-head>h1{margin:0;color:var(--cream-100);font:800 2.5rem/.95 var(--font-display);text-shadow:var(--text-carved)}
.ds-page-head>p{margin:0;max-width:84ch;color:var(--cream-400);font:var(--weight-body) .86rem/1.38 var(--font-ui)}
.ds-page-head>.ds-pill{justify-self:end}
.ds-page-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ds-page-head>.ds-pill{grid-column:1;justify-self:start;margin-top:4px}
.ds-page-actions.is-center{justify-content:center}
.ds-card-grid{min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,420px));justify-content:center;align-content:center;gap:18px}
.ds-card-grid.is-two{grid-template-columns:repeat(2,minmax(0,480px))}
.ds-service-card{display:grid;align-content:start;gap:9px;padding:18px;border:5px solid var(--border-panel-color);border-radius:22px;background:var(--surface-panel);box-shadow:inset 0 0 0 3px var(--gold-400),inset 0 0 22px #301006,0 12px 26px rgba(0,0,0,.42);color:var(--cream-200)}
.ds-service-card>h2{margin:0;color:var(--cream-100);font:800 1.5rem/1 var(--font-display);text-shadow:var(--text-carved)}
.ds-service-card>p{margin:0;color:var(--cream-400);font:var(--weight-body) .8rem/1.38 var(--font-ui)}
.ds-service-card>.ds-button,.ds-service-card>.ds-pill{justify-self:start}
.ds-service-card.is-deferred{border:5px dashed #6b5a4a;background:linear-gradient(#3a2a1c,#231710);box-shadow:inset 0 0 22px rgba(10,4,2,.5)}
.ds-service-card.is-deferred>h2{color:#d8c6a8;text-shadow:none}
.ds-service-card.is-deferred>p{color:#c8b389}
.ds-icon-plate{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;border:3px solid #c9a24a;background:radial-gradient(circle at 50% 34%,#7d3b20,#2c1409);color:#ffe9a8;font:var(--weight-ultra) 1.4rem var(--font-ui)}
.ds-icon-plate>img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5))}
.ds-service-card.is-deferred>.ds-icon-plate{border-color:#6b5a4a;background:#2a1e14;color:#a4907f}
.ds-field-select{min-height:var(--hit-min);padding:8px 12px;border:2px solid #b96b2e;border-radius:var(--radius-md);background:var(--surface-field);color:var(--text-on-light);font:var(--weight-ultra) .88rem var(--font-ui)}
.ds-setting-row{display:grid;gap:6px}
.ds-setting-row>span{display:grid;gap:2px}
.ds-setting-row strong{color:#fff4d6;font:var(--weight-ultra) .88rem var(--font-ui)}
.ds-setting-row small{color:var(--cream-500);font:var(--weight-body) .72rem var(--font-ui)}
.ds-avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;border:3px solid #e5ad4b;background:radial-gradient(circle at 50% 38%,#4a2718 0 58%,#241009 100%)}
.ds-avatar>img{width:94%;height:94%;object-fit:contain;object-position:center bottom}

/* Title (MetaScreens.jsx TitleScreen) */
.ds-title{position:relative;min-height:calc(100dvh - 60px);overflow:hidden;color:var(--cream-200);background:url('/assets/home-unity/lobby-bg.png') center/cover no-repeat,#2d9bc0}
.ds-title::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,24,34,.62) 0,rgba(4,24,34,.2) 52%,transparent 100%),linear-gradient(0deg,rgba(5,26,38,.72),transparent 46%)}
.ds-title-copy{position:absolute;left:7%;top:50%;transform:translateY(-50%);width:min(620px,60%);display:grid;gap:18px;justify-items:start}
.ds-title-copy>.ds-kicker{font-size:.95rem;letter-spacing:.16em}
.ds-title-copy>img{width:min(520px,100%);object-fit:contain;filter:drop-shadow(0 10px 5px rgba(10,28,44,.5))}
.ds-title-copy>h2{margin:0;color:var(--cream-100);font:800 2.5rem/1 var(--font-display);letter-spacing:.1em;text-shadow:0 4px 0 var(--rose-900),0 7px 10px rgba(7,24,39,.5)}
.ds-title-copy>p{margin:0;max-width:30ch;color:var(--cream-400);font:var(--weight-body) 1.15rem/1.38 var(--font-ui)}
.ds-title-pack{position:absolute;right:4%;bottom:0;display:flex;align-items:flex-end}
.ds-title-pack>img{width:clamp(120px,16vw,250px);object-fit:contain;filter:drop-shadow(0 14px 8px rgba(16,37,43,.5))}
.ds-title-pack>img+img{margin-left:-46px}

/* Match intro (MetaScreens.jsx MatchIntroScreen) */
.ds-intro{position:relative;min-height:calc(100dvh - 60px);overflow:hidden;display:grid;align-content:center;justify-items:center;gap:16px;padding:30px;color:var(--cream-200);background:url('/assets/battle-unity/arena-alternate.png') center/cover no-repeat,#1a2b24}
.ds-intro::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,20,16,.82),rgba(5,20,16,.35) 55%,rgba(5,20,16,.6))}
.ds-intro>*{position:relative}
.ds-intro>.ds-kicker{font-size:.84rem;letter-spacing:.16em}
.ds-intro>h1{margin:0;color:var(--cream-100);font:800 3rem/1 var(--font-display);text-shadow:0 4px 0 #24140c,0 8px 12px rgba(0,0,0,.5)}
.ds-intro-count{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:5px solid var(--gold-400);background:radial-gradient(circle at 50% 34%,#7d3b20,#2c1409);color:#ffe9a8;font:800 3rem/1 var(--font-display);font-variant-numeric:tabular-nums;box-shadow:0 8px 18px rgba(0,0,0,.5)}
.ds-intro-seats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;width:min(1180px,92%);margin-top:6px}
.ds-intro-seat{display:grid;justify-items:center;gap:6px;padding:12px 6px;border-radius:14px;border:3px solid var(--action-wood-line);background:linear-gradient(180deg,#4a2716,#231107);box-shadow:0 5px 0 rgba(15,7,3,.6)}
.ds-intro-seat.is-you{border-color:#67d8c6;background:linear-gradient(180deg,#1d5a52,#0d2b28);box-shadow:0 0 16px rgba(103,216,198,.45)}
.ds-intro-seat>.ds-avatar{width:62px;height:62px}
.ds-intro-seat>strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff3cc;font:var(--weight-ultra) .78rem var(--font-ui);text-transform:uppercase}
.ds-intro-seat>small{text-align:center;color:var(--text-info);font:var(--weight-ultra) .5rem/1.25 var(--font-ui);letter-spacing:.08em}
.ds-intro-seat.is-you>small{color:var(--text-secondary)}

/* Resolve (RoundScreens.jsx ResolveScreen) */
.ds-resolve-page{min-height:calc(100dvh - 60px);display:grid;place-items:center;padding:26px}
.ds-resolve{width:min(980px,92vw);max-height:calc(100dvh - 90px);overflow:auto;display:grid;gap:14px;padding:26px;border:5px solid var(--border-panel-color);border-radius:22px;background:var(--surface-panel);box-shadow:inset 0 0 0 3px var(--gold-400),inset 0 0 22px #301006,0 12px 26px rgba(0,0,0,.42);color:var(--cream-200);text-align:left}
.ds-resolve-head{display:grid;justify-items:center;gap:4px;text-align:center}
.ds-resolve-head>h1{margin:0;color:#baff85;font:800 3.1rem/.95 var(--font-display);text-shadow:0 4px 0 #1d3c0c}
.ds-resolve.is-loss .ds-resolve-head>h1{color:#ffb0a4;text-shadow:0 4px 0 #4c1622}
.ds-resolve.is-draw .ds-resolve-head>h1{color:var(--gold-200);text-shadow:var(--text-carved)}
.ds-resolve-head>p{margin:0;color:var(--text-secondary);font:var(--weight-ultra) .74rem var(--font-ui);letter-spacing:.1em;text-transform:uppercase}
.ds-resolve-score{display:flex;align-items:baseline;justify-content:center;gap:16px;padding:10px 0;border-top:1px solid var(--border-hairline-color);border-bottom:1px solid var(--border-hairline-color)}
.ds-resolve-score>b{color:var(--cream-100);font:800 3rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.ds-resolve-score>b.is-foe{color:#ffb0a4}
.ds-resolve-score>span{color:var(--cream-600);font:800 1.8rem var(--font-display)}
.ds-resolve-summary{margin:0;text-align:center;color:var(--cream-500);font:var(--weight-body) .78rem var(--font-ui)}
.ds-resolve-body{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;min-height:0}
.ds-resolve-goals{display:grid;gap:6px;margin:0;padding:0;list-style:none;align-content:start}
.ds-resolve-goals>li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;border-radius:9px;border:2px solid #c9776c;background:rgba(124,47,38,.4)}
.ds-resolve-goals>li[data-side="own"]{border-color:#67d8c6;background:rgba(29,90,82,.42)}
.ds-resolve-goals>li>strong{color:#fff3cc;font:var(--weight-ultra) .88rem var(--font-ui);text-transform:uppercase}
.ds-resolve-goals>li>span{color:var(--cream-500);font:var(--weight-ultra) .68rem var(--font-ui);font-variant-numeric:tabular-nums}
.ds-resolve-hp{display:grid;align-content:start;gap:8px}
.ds-resolve-hp>div{display:grid;gap:4px;padding:7px 11px;border-radius:9px;background:rgba(20,10,4,.42);border:1px solid #9a5e2b}
.ds-resolve-hp>div>div{display:flex;justify-content:space-between;gap:8px}
.ds-resolve-hp strong{color:#fff3cc;font:var(--weight-ultra) .78rem var(--font-ui);text-transform:uppercase}
.ds-resolve-hp span{color:#baff85;font:var(--weight-ultra) .74rem var(--font-ui);font-variant-numeric:tabular-nums}
.ds-resolve-hp span.is-loss{color:#ffb0a4}
.ds-resolve-damage{margin:0;color:var(--cream-500);font:var(--weight-body) .72rem/1.35 var(--font-ui)}
.ds-resolve-damage>strong{color:#f2d578}
.ds-resolve-foot{display:grid;justify-items:center;gap:10px}
.ds-resolve .gdd-ko{margin:0}
.ds-resolve.is-compact{gap:8px;padding:16px}
.ds-resolve.is-compact .ds-resolve-body{grid-template-columns:1fr}
.ds-resolve.is-compact .ds-resolve-head>h1{font-size:2.2rem}
.gdd-resolve-backdrop>.ds-resolve{max-height:calc(100dvh - 40px)}
.gdd-resolve-backdrop>.ds-button{margin-top:12px}
.gdd-resolve-backdrop{display:grid;grid-auto-rows:max-content;align-content:center;justify-items:center}
@media (max-height:520px) and (orientation:landscape){.ds-resolve{gap:8px;padding:14px 18px}.ds-resolve-head>h1{font-size:2rem}.ds-resolve-score>b{font-size:2rem}.ds-resolve-body{grid-template-columns:1fr 1fr}}

/* Placement (RoundScreens.jsx PlacementScreen) */
.ds-standings-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.ds-standings{min-height:0;display:grid;gap:6px;align-content:start}
.ds-standing{display:grid;grid-template-columns:54px 44px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-radius:11px;border:2px solid var(--action-wood-line);background:linear-gradient(90deg,#4a2716,#2a150b)}
.ds-standing.is-you{border-color:#67d8c6;background:linear-gradient(90deg,#1d5a52,#12312e)}
.ds-standing>b{color:var(--cream-500);font:800 1.5rem/1 var(--font-display)}
.ds-standing.is-champion>b{color:#ffd76a}
.ds-standing>.ds-avatar{width:44px;height:44px;border-width:2px}
.ds-standing>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff3cc;font:var(--weight-ultra) 1rem var(--font-ui);text-transform:uppercase}
.ds-standing>strong>small{display:block;color:var(--text-info);font:var(--weight-ultra) .6rem var(--font-ui);letter-spacing:.08em}
.ds-standing>span{color:var(--text-secondary);font:var(--weight-ultra) .88rem var(--font-ui);font-variant-numeric:tabular-nums}
.ds-rewards{display:grid;align-content:start;gap:10px;padding:16px}
.ds-rewards-list{display:grid;gap:7px}
.ds-rewards-list>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:5px;border-bottom:1px solid var(--border-hairline-color)}
.ds-rewards-list>div>span{color:var(--text-secondary);font:var(--weight-ultra) .7rem var(--font-ui);letter-spacing:.09em}
.ds-rewards-list>div>b{color:var(--cream-100);font:800 1.5rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.ds-rewards>p,.ds-rewards>small{margin:0;color:var(--cream-500);font:var(--weight-body) .7rem/1.35 var(--font-ui)}
@media (max-width:900px){.ds-standings-layout{grid-template-columns:1fr}.ds-page{padding:18px 20px}}

/* Parade (RoundScreens.jsx ParadeScreen) */
.ds-parade-page{grid-template-rows:auto auto minmax(0,1fr) auto auto}
.ds-parade-status{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding:10px 16px;border-radius:12px;background:rgba(20,10,4,.4);border:1px solid #9a5e2b}
.ds-parade-status>div{min-width:0;display:grid;gap:2px}
.ds-parade-status small{color:var(--cream-600);font:var(--weight-ultra) .56rem var(--font-ui);letter-spacing:.12em;text-transform:uppercase}
.ds-parade-status strong{overflow:hidden;text-overflow:ellipsis;color:#ffe9b1;font:var(--weight-ultra) .8rem var(--font-ui)}
.ds-parade-status strong.is-clock{color:#ffd36a;font:800 1.6rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.ds-parade-progress{display:block;width:min(160px,32vw);height:6px;overflow:hidden;border-radius:999px;background:#2b160d;box-shadow:inset 0 1px 2px #0008}
.ds-parade-progress>i{display:block;width:calc(var(--parade-progress)*100%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff6a3d,#ffd45f);transition:width .15s linear}
.ds-parade-status[data-turn-state="ACTIVE"]{border-color:#ffe16a;box-shadow:0 0 22px #ffcc4055,inset 0 0 16px #ffbe3022}
.ds-parade-status[data-turn-state="ACTIVE"] small{color:#fff3ae}
.ds-parade-status [data-testid="parade-order"] strong>span{white-space:nowrap;opacity:.66}
.ds-parade-status [data-testid="parade-order"] strong>span.is-active{color:#fff09a;opacity:1}
.ds-parade-status [data-testid="parade-order"] strong>span.is-you{text-decoration:underline;text-underline-offset:3px}
.ds-parade-ring{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ds-parade-pick{position:relative;min-width:0;min-height:120px;display:grid;grid-template-columns:38% minmax(0,1fr);align-items:center;gap:8px;padding:9px;border-radius:12px;border:2px solid #c9a24a;background:linear-gradient(180deg,#4a2b52,#231430);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 4px 0 rgba(15,7,3,.55);color:var(--cream-200);text-align:left;cursor:pointer;transition:var(--transition-button)}
.ds-parade-pick:hover:not(:disabled){transform:var(--hover-lift-card)}
.ds-parade-pick:disabled{border-color:#6b5a4a;background:linear-gradient(180deg,#2e2117,#1a1109);box-shadow:none;opacity:.58;filter:grayscale(.6);cursor:not-allowed}
.ds-parade-number{position:absolute;left:7px;top:6px;z-index:2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#c9a24a;color:#3a1f05;font:var(--weight-ultra) .68rem var(--font-ui)}
.ds-parade-pick>img{width:100%;height:100%;max-height:120px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 4px rgba(0,0,0,.5))}
.ds-parade-copy{min-width:0;display:grid;gap:4px}
.ds-parade-copy>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--weight-ultra) .95rem var(--font-ui);text-transform:uppercase}
.ds-parade-copy>span{display:flex;align-items:center;gap:6px}
.ds-parade-copy>em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffd98a;font:var(--weight-ultra) .62rem var(--font-ui);font-style:normal}
.ds-parade-pick:disabled .ds-parade-copy>em{color:#c8b389}
.ds-note{display:grid;gap:3px;padding:10px 14px;border-radius:11px;border:2px solid #b3803f;background:rgba(20,10,4,.42)}
.ds-note>strong{color:#f2d578;font:var(--weight-ultra) .78rem var(--font-ui)}
.ds-note>span{color:var(--cream-500);font:var(--weight-body) .74rem/1.35 var(--font-ui)}

/* Scout (RoundScreens.jsx ScoutScreen) */
.ds-scout-grid{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ds-scout-card{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:9px;padding:13px}
.ds-scout-card>header{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:11px}
.ds-scout-card>header>.ds-avatar{width:46px;height:46px}
.ds-scout-card h2{margin:0;color:#fff3cc;font:var(--weight-ultra) 1.05rem var(--font-ui);text-transform:uppercase;text-shadow:none}
.ds-scout-meta{display:flex;align-items:center;gap:9px}
.ds-scout-meta>.ds-health{width:110px}
.ds-scout-meta>small{color:var(--text-secondary);font:var(--weight-ultra) .64rem var(--font-ui);font-variant-numeric:tabular-nums}
.ds-scout-roster{min-height:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-rows:118px;gap:5px}
.ds-scout-roster .ds-puppy-card.is-sold{min-height:0}
.ds-scout-roster .ds-card-plate>strong{font-size:.5rem}
.ds-scout-roster .ds-card-traits{display:none}
.ds-scout-roster .ds-card-cost{transform:scale(.8);transform-origin:top right}
@media (max-width:1100px){.ds-scout-grid{grid-template-columns:1fr}}

/* Spectate (MetaPages.jsx SpectateScreen) */
.ds-spectate{position:relative;min-height:calc(100dvh - 60px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;color:var(--cream-200);background:url('/assets/battle-unity/arena-wide-v2.png') center/cover no-repeat,var(--surface-arena)}
.ds-spectate::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(7,16,15,.7);background:linear-gradient(0deg,rgba(5,20,16,.8),transparent 42%);pointer-events:none}
.ds-spectate>*{position:relative}
.ds-spectate-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 22px;background:linear-gradient(180deg,#202d3c,rgba(17,26,36,.85));border-bottom:2px solid #e8c65c}
.ds-spectate-side{display:flex;align-items:center;gap:10px}
.ds-spectate-side.is-red{justify-content:flex-end;text-align:right}
.ds-spectate-side>.ds-avatar{width:46px;height:46px;border-color:#7fd4ff}
.ds-spectate-side.is-red>.ds-avatar{border-color:#e8877e;order:2}
.ds-spectate-side small{display:block;color:#9fd7e4;font:var(--weight-ultra) .6rem var(--font-ui);letter-spacing:.12em;text-transform:uppercase}
.ds-spectate-side.is-red small{color:#ffc2ae}
.ds-spectate-side strong{display:block;color:#fff;font:800 1.2rem/1 var(--font-display)}
.ds-spectate-center{text-align:center}
.ds-spectate-center>span{display:block;color:#f1d371;font:var(--weight-ultra) .6rem var(--font-ui);letter-spacing:.13em}
.ds-spectate-center>h1{margin:0;color:#ffd36a;font:800 1.1rem/1.2 var(--font-display)}
.ds-spectate-stage{position:relative;min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;padding:12px 18px 16px}
.ds-spectate-rail{display:grid;align-content:start;gap:7px}
.ds-spectate-rail>span{color:#f1d371;font:var(--weight-ultra) .6rem var(--font-ui);letter-spacing:.13em;text-shadow:0 2px 4px #000}
.ds-spectate-rail>.ds-pill{justify-self:start}
.ds-spectate-pairing{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--hit-min);padding:0 11px;border-radius:9px;border:2px solid #3d4a4d;background:rgba(16,24,29,.86);color:#fff4d5;font:var(--weight-ultra) .72rem var(--font-ui);text-align:left;cursor:pointer}
.ds-spectate-pairing>span{color:#c8b389;font-size:.5rem;letter-spacing:.12em}
.ds-spectate-pairing.is-active{border-color:var(--focus-ring);background:linear-gradient(90deg,#12656f,#0a3239)}
.ds-spectate-pairing.is-active::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ping-live);box-shadow:0 0 8px currentColor}
.ds-spectate-field{position:relative;min-height:320px;border-radius:14px;overflow:hidden;border:2px solid #7b6a3c;background:rgba(11,25,20,.35);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.ds-spectate-field canvas{display:block;width:100%;height:100%;min-height:320px}
.ds-spectate-field [data-testid="spectate-hand"],.ds-spectate-field [data-testid="spectate-preview"]{display:none}
.ds-spectate-actions{position:absolute;right:18px;bottom:16px;z-index:3}
.ds-spectate-empty{grid-template-rows:auto auto;align-content:center;justify-items:center;gap:14px;text-align:center}
@media (max-width:900px){.ds-spectate-stage{grid-template-columns:1fr}.ds-spectate-rail{grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);overflow-x:auto}}

/* Pack Book (PackBookScreen.jsx) */
.ds-book{position:relative;min-height:calc(100dvh - 60px);display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:12px;padding:16px 24px 20px;color:var(--cream-200)}
.ds-book-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.ds-book-tabs{display:flex;justify-content:center;gap:10px;overflow-x:auto;padding:0 4px 4px}
.ds-book-tabs>button{min-width:132px;min-height:44px;padding:8px 20px;border:3px solid #7a4d24;border-radius:12px;background:linear-gradient(180deg,#70451f,#3c210f);box-shadow:inset 0 0 0 2px #a9783d,0 4px 0 #251308;color:#f8dfad;font:var(--weight-ultra) .9rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.ds-book-tabs>button[aria-selected="true"]{border-color:#73edf5;background:linear-gradient(180deg,#177986,#0a3d45);box-shadow:inset 0 0 0 2px #39b7c5,0 0 17px rgba(92,233,245,.42),0 4px 0 #08272d;color:#e4fdff}
.ds-book-plaque{justify-self:center;display:grid;place-items:center;width:min(640px,100%);min-height:80px;padding:8px 24px;border:7px solid #7a4d24;border-radius:18px;background:linear-gradient(180deg,#8a5628,#542f14 60%,#3a1e0f);box-shadow:inset 0 0 0 3px #b3803f,inset 0 7px 15px rgba(255,204,140,.18),inset 0 -9px 18px rgba(20,8,2,.6),0 12px 28px rgba(4,14,22,.6)}
.ds-book-plaque>strong{color:#fff2d2;font:800 clamp(1.6rem,3.2vw,3.15rem)/1 var(--font-display);letter-spacing:.05em;text-shadow:0 4px 0 #3a1a08,0 7px 11px rgba(0,0,0,.45)}
.ds-book-plaque>small{color:#e8c395;font:var(--weight-ultra) .6rem var(--font-ui);letter-spacing:.12em}
.ds-plate-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:60px;min-height:56px;padding:0 22px;border:3px solid #8a6a3c;border-radius:14px;background:linear-gradient(180deg,#6d4526,#3d2211);box-shadow:inset 0 2px 0 rgba(255,214,150,.5),0 5px 0 #241305;color:#f6e3bb;font:var(--weight-ultra) 1.05rem var(--font-ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:filter var(--duration-fast) var(--ease-base)}
.ds-plate-button:hover:not(:disabled){filter:brightness(1.08)}
.ds-plate-button.is-sky{border-color:#1f5f96;background:linear-gradient(180deg,#63b8ea,#2a70b4);box-shadow:inset 0 0 0 2px #a8dcfb,0 6px 0 #17466f;color:#fff8e8;text-shadow:0 2px 0 rgba(12,45,74,.7)}
.ds-plate-button>img{width:32px;height:32px;object-fit:contain}
.ds-plate-button[aria-pressed="true"]>.ds-heart{color:#ff6f8b}
.ds-book-body{min-height:0;display:grid;grid-template-columns:216px minmax(0,1fr);gap:20px}
.ds-book-body[hidden]{display:none}
.ds-book-catalog{min-height:0;overflow:auto;display:grid;align-content:start;gap:18px;padding:16px;border-radius:18px;background:linear-gradient(180deg,#eadab6,#cdb083);box-shadow:inset 0 0 0 3px #b39264,inset 0 0 34px rgba(120,86,44,.4),0 20px 46px rgba(3,12,20,.6)}
.ds-book-catalog[hidden]{display:none}
.ds-book-catalog-group{display:grid;gap:10px}.ds-book-catalog-group>header,.ds-book-catalog-title{display:flex;align-items:baseline;justify-content:space-between;color:#5e3a1c}.ds-book-catalog-group h2,.ds-book-catalog-title h2{margin:0;font:800 1.45rem var(--font-display);text-transform:uppercase}.ds-book-catalog-group small,.ds-book-catalog-title small{font:var(--weight-ultra) .72rem var(--font-ui);text-transform:uppercase}
.ds-book-catalog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.ds-book-catalog-card{min-width:0;padding:13px;border:3px solid #75431e;border-radius:13px;background:linear-gradient(165deg,#4a2b52,#24132b);box-shadow:inset 0 0 0 2px #895690,0 6px 14px rgba(35,15,9,.35);color:#f5ead6}.ds-book-catalog-card>div{display:flex;align-items:center;gap:10px}.ds-book-catalog-card h3{margin:0;font:var(--weight-ultra) 1rem var(--font-ui);letter-spacing:.06em;text-transform:uppercase}.ds-book-catalog-card p{display:grid;gap:3px;margin:9px 0 0;padding-top:8px;border-top:1px solid rgba(237,205,151,.24)}.ds-book-catalog-card p>b{color:#69e8f1;font:var(--weight-ultra) .78rem var(--font-ui);text-transform:uppercase}.ds-book-catalog-card p>span{font:var(--weight-body) .78rem/1.38 var(--font-ui);color:#e8dcc6}.ds-book-catalog-card.is-toy>.ds-book-orb{width:42px;height:42px}.ds-book-catalog-grid.is-toys{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ds-book-toy-art{width:74px;height:74px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 5px 4px #16081799)}
.ds-book-rail{display:grid;align-content:start;gap:11px}
.ds-book-rail>span{display:grid;place-items:center;min-height:58px;border:5px solid #7a4d24;border-radius:13px;background:linear-gradient(180deg,#7d4c22,#452410);box-shadow:inset 0 0 0 2px #b3803f,0 6px 0 #2a1608;color:#ffe6ae;font:var(--weight-ultra) 1.18rem var(--font-ui);letter-spacing:.15em}
.ds-book-trait{display:flex;align-items:center;gap:13px;min-height:52px;padding:0 15px;border:3px solid #7a4d24;border-radius:13px;background:linear-gradient(180deg,#6d4526,#3a1f0e);box-shadow:inset 0 0 0 2px #a5763c,0 5px 0 #26150a;color:#f3dcae;font:var(--weight-ultra) 1rem var(--font-ui);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.ds-book-trait[aria-pressed="true"]{border-color:#5ce9f5;background:linear-gradient(180deg,#12656f,#0a3239);box-shadow:inset 0 0 0 2px #2fa5b4,0 0 18px rgba(92,233,245,.5),0 5px 0 #08282e;color:#d8fbff}
.ds-crest{position:relative;display:grid;place-items:center;width:var(--ds-size,30px);height:var(--ds-size,30px);flex:0 0 auto}
.ds-crest::before,.ds-crest::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(180deg,#e0b660,#a2762f)}
.ds-crest::after{inset:10%;background:radial-gradient(circle at 50% 34%,#4a3320 0 52%,#211007 100%)}
.ds-crest>b{position:relative;z-index:1;color:var(--ds-accent,#ffe9b1);font:var(--weight-ultra) calc(var(--ds-size,30px) * .5)/1 var(--font-ui);text-shadow:0 0 6px var(--ds-accent,#ffe9b1)}
.ds-book-spread{position:relative;min-height:0;display:grid;grid-template-columns:1fr 1fr;padding:14px;border-radius:18px;background:linear-gradient(180deg,#eadab6,#cdb083);box-shadow:inset 0 0 0 3px #b39264,inset 0 0 34px rgba(120,86,44,.4),0 20px 46px rgba(3,12,20,.6)}
.ds-book-spread::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:16px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(103,72,34,0),rgba(103,72,34,.42) 45%,rgba(103,72,34,.42) 55%,rgba(103,72,34,0));pointer-events:none}
.ds-book-page{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:4px 14px 4px 6px}
.ds-book-page>header{display:flex;align-items:baseline;justify-content:space-between;color:#5e3a1c}
.ds-book-page>header>strong{font:var(--weight-ultra) .84rem var(--font-ui);letter-spacing:.11em;text-transform:uppercase}
.ds-book-page>header>small{font:var(--weight-ultra) .74rem var(--font-ui);text-transform:uppercase}
.ds-book-grid{min-width:0;min-height:0;max-height:calc(100dvh - 240px);overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:150px;gap:10px;padding:2px;scrollbar-width:thin}
.ds-book-grid>.gdd-book-card{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.16),0 3px 7px rgba(0,0,0,.55),0 0 8px color-mix(in srgb,var(--rarity) 30%,transparent)}
.ds-book-grid>.gdd-book-card>img{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:contain;object-position:center bottom}
.ds-book-grid>.gdd-book-card>div{display:grid;justify-items:center;gap:2px;padding:4px 5px 5px}
.ds-book-grid>.gdd-book-card>div>.gdd-cost{position:absolute;right:-1px;top:-1px;width:26px;height:26px;font-size:.7rem}
.ds-book-grid>.gdd-book-card h2{margin:0;font-size:.62rem}
.ds-book-grid>.gdd-book-card .gdd-card-traits{display:flex;justify-content:center;gap:3px}
.ds-book-grid>.gdd-book-card .gdd-card-trait{height:15px;padding:1px 3px 1px 2px}
.ds-book-grid>.gdd-book-card .gdd-card-trait>b{display:none}
.ds-book-grid>.gdd-book-card .gdd-card-trait>i{display:none}
.ds-book-grid>.gdd-book-card .gdd-card-trait-tooltip{display:none}
.ds-book-grid>.gdd-book-card.is-selected{outline:3px solid var(--cyan-400);outline-offset:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.85),0 3px 7px rgba(0,0,0,.55),0 0 16px color-mix(in srgb,var(--cyan-400) 72%,transparent)}
.ds-book-grid>.gdd-book-card.is-dim{opacity:.42;filter:grayscale(.5)}
.ds-book-detail{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;margin:2px 4px 2px 12px;padding:18px 20px;border-radius:14px;background:linear-gradient(165deg,#4a2b52,#2b1733 46%,#1d1024);box-shadow:inset 0 0 0 2px #7d4f89,inset 0 0 30px rgba(10,4,14,.6),0 8px 20px rgba(0,0,0,.45);color:var(--cream-200);overflow:auto}
.ds-book-hero{display:grid;grid-template-columns:minmax(0,1fr) 46%;gap:12px;align-items:start}
.ds-book-hero>div{min-width:0;display:grid;gap:11px;align-content:start}
.ds-book-hero h2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream-100);font:800 2.5rem/.95 var(--font-display);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 4px 0 #24102c}
.ds-book-stat{display:flex;align-items:center;gap:12px;color:#fff2d2;font:var(--weight-ultra) 1.02rem var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.ds-book-art{position:relative;min-width:0;display:grid;place-items:end center;height:218px}
.ds-book-art::before{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:30px;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(120,200,235,.3),transparent 68%)}
.ds-book-art>img{position:relative;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 8px rgba(0,0,0,.5))}
.ds-book-rule{display:block;height:2px;background:linear-gradient(90deg,transparent,rgba(216,180,120,.5) 12% 88%,transparent)}
.ds-book-ability{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;align-items:center}
.ds-book-orb{position:relative;display:grid;place-items:center;width:78px;height:78px}
.ds-book-orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 46%,#eafaff 0 16%,#7fd8ff 34%,#2b86d8 58%,rgba(16,58,102,0) 78%);box-shadow:0 0 26px rgba(96,200,255,.7)}
.ds-book-orb>b{position:relative;color:#fff;font:var(--weight-ultra) 2rem/1 var(--font-ui);text-shadow:0 0 14px #bfefff}
.ds-book-ability>div{min-width:0;display:grid;gap:5px}
.ds-book-ability p{margin:0;font:var(--weight-ultra) 1.02rem var(--font-ui);letter-spacing:.03em;text-transform:uppercase}
.ds-book-ability p>span{color:#5cd6ff}
.ds-book-ability p.is-copy{font:var(--weight-body) .9rem/1.35 var(--font-ui);color:#e8dcc6;text-transform:none;letter-spacing:0}
.ds-book-ladder{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center}
.ds-book-ladder>div{min-width:0;display:grid;gap:8px}
.ds-book-ladder>div>div:first-child{display:flex;align-items:baseline;gap:14px}
.ds-book-ladder b{font:var(--weight-ultra) 1.1rem var(--font-ui);letter-spacing:.07em;text-transform:uppercase}
.ds-book-ladder small{font:var(--weight-ultra) 1rem var(--font-ui);letter-spacing:.1em;color:#b9a58a}
.ds-book-track{position:relative;display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 10px}
.ds-book-track::before{content:"";position:absolute;left:10px;right:10px;height:5px;border-radius:999px;background:#4a3a52}
.ds-book-track>i{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #6b5a74;background:#3a2c42;color:#a294ac;font:var(--weight-ultra) .78rem var(--font-ui);font-style:normal}
.ds-book-track>i.is-hit{border-color:#5ce9f5;background:radial-gradient(circle at 44% 34%,#dffbff,#2f9fb8);color:#06333d;box-shadow:0 0 10px rgba(92,233,245,.7)}
.ds-book-bonus{padding:9px 12px;border-radius:9px;background:rgba(20,10,4,.42);border:1px solid #9a5e2b;color:#e8dcc6;font:var(--weight-body) .78rem/1.38 var(--font-ui)}
.ds-book-bonus[hidden]{display:none}
.ds-book-actions{display:grid;grid-template-columns:1.18fr 1fr;gap:14px}
.ds-book-actions>.ds-plate-button{min-height:64px;font-size:1.35rem}
@media (max-width:1180px){.ds-book-body{grid-template-columns:1fr}.ds-book-rail{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}.ds-book-spread{grid-template-columns:1fr}.ds-book-spread::before{display:none}.ds-book-detail{margin:12px 4px 2px}}

/* -------------------------------------------------------------------------- */
/* 7. Mobile-first — phone landscape (844x390-class) is the primary layout.      */
/*    Vertical rhythm uses svh so short viewports compress before they scroll;   */
/*    every interactive element keeps the 44px floor; portrait stacks.           */
/* -------------------------------------------------------------------------- */
:root{--shell-bar:60px}
.gdd-global-bar{min-height:var(--shell-bar);padding:6px clamp(10px,2vw,28px);gap:clamp(8px,1.5vw,18px)}
.gdd-global-bar nav{gap:4px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gdd-global-bar nav::-webkit-scrollbar{display:none}
.gdd-global-bar nav button{flex:0 0 auto;min-height:var(--hit-min);padding:10px 12px;white-space:nowrap}
.gdd-brand{min-height:var(--hit-min)}
.gdd-global-bar>.gdd-offline{flex:0 0 auto}
.gdd-screen-host{min-height:calc(100dvh - var(--shell-bar))}
@media (min-width:900px){.gdd-global-bar nav{justify-content:center}}
@media (max-height:520px) and (orientation:landscape){
  :root{--shell-bar:50px}
  .gdd-global-bar{min-height:50px;padding:3px 10px}
  .gdd-global-bar nav button{padding:8px 10px;font-size:.74rem}
  .gdd-brand>span>img{height:30px}
}

/* Page frames */
.ds-page,.ds-title,.ds-intro,.ds-resolve-page,.ds-spectate,.ds-book{min-height:calc(100dvh - var(--shell-bar))}
.ds-page{padding:clamp(10px,2.4svh,30px) clamp(12px,3vw,40px);gap:clamp(8px,1.6svh,14px)}
.ds-page-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker pill" "title pill" "copy pill";column-gap:12px;align-items:start}
.ds-page-head>.ds-kicker{grid-area:kicker}
.ds-page-head>h1{grid-area:title;font-size:clamp(1.3rem,5.2svh,2.5rem)}
.ds-page-head>p{grid-area:copy;font-size:clamp(.7rem,1.9svh,.86rem)}
.ds-page-head>.ds-pill{grid-area:pill;grid-column:auto;justify-self:end;margin:0}
.ds-page-head.is-center{grid-template-columns:1fr;grid-template-areas:none}
.ds-page-head.is-center>*{grid-area:auto}
.ds-page-actions>.ds-button{min-height:var(--hit-min)}
.ds-card-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),420px));gap:clamp(8px,1.6vw,18px)}
.ds-card-grid.is-two{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),480px))}
.ds-service-card{padding:clamp(10px,2.2svh,18px);gap:clamp(5px,1.4svh,9px);border-width:clamp(3px,.5vw,5px)}
.ds-service-card>h2{font-size:clamp(1rem,3.4svh,1.5rem)}
.ds-service-card>p{font-size:clamp(.68rem,1.9svh,.8rem)}
.ds-icon-plate{width:clamp(40px,9svh,54px);height:clamp(40px,9svh,54px)}
.ds-icon-plate>img{width:70%;height:70%}

/* Title */
.ds-title-copy{width:min(620px,58%);gap:clamp(6px,1.6svh,18px)}
.ds-title-copy>img{width:auto;max-width:100%;max-height:26svh}
.ds-title-copy>h2{font-size:clamp(1.15rem,4.8svh,2.5rem)}
.ds-title-copy>p{font-size:clamp(.72rem,2.2svh,1.15rem)}
.ds-title-copy>.ds-kicker{font-size:clamp(.6rem,1.8svh,.95rem)}
.ds-title-pack>img{width:clamp(90px,15vw,250px)}
@media (orientation:portrait){.ds-title-copy{left:6%;right:6%;width:auto;top:38%}.ds-title-pack{right:0;left:0;justify-content:center}.ds-title-pack>img{width:30vw}}

/* Match intro */
.ds-intro{gap:clamp(6px,1.6svh,16px);padding:clamp(10px,2svh,30px) clamp(10px,2vw,30px)}
.ds-intro>h1{font-size:clamp(1.3rem,5.5svh,3rem)}
.ds-intro>.ds-kicker{font-size:clamp(.58rem,1.8svh,.84rem)}
.ds-intro-count{width:clamp(48px,12svh,96px);height:clamp(48px,12svh,96px);border-width:4px;font-size:clamp(1.4rem,6svh,3rem)}
.ds-intro-seats{gap:clamp(4px,1vw,10px);width:min(1180px,96%)}
.ds-intro-seat{padding:clamp(4px,1.2svh,12px) 4px;gap:3px;border-width:2px}
.ds-intro-seat>.ds-avatar{width:clamp(34px,9svh,62px);height:clamp(34px,9svh,62px);border-width:2px}
.ds-intro-seat>strong{font-size:clamp(.52rem,1.9svh,.78rem)}
.ds-intro-seat>small{font-size:var(--text-micro)}
@media (orientation:portrait){.ds-intro-seats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Resolve / placement */
.ds-resolve{padding:clamp(12px,2.4svh,26px);gap:clamp(6px,1.6svh,14px)}
.ds-resolve-head>h1{font-size:clamp(1.5rem,6svh,3.1rem)}
.ds-resolve-score>b{font-size:clamp(1.6rem,6svh,3rem)}
.ds-standings-layout{grid-template-columns:minmax(0,1fr) clamp(200px,24vw,300px);gap:clamp(8px,1.4vw,16px)}
.ds-standing{min-height:var(--hit-min);grid-template-columns:clamp(34px,4vw,54px) clamp(36px,4vw,44px) minmax(0,1fr) auto;gap:clamp(6px,1vw,12px);padding:0 clamp(8px,1vw,14px)}
.ds-standing>.ds-avatar{width:clamp(36px,4vw,44px);height:clamp(36px,4vw,44px)}
.ds-standing>b{font-size:clamp(1rem,2.8svh,1.5rem)}
.ds-standing>strong{font-size:clamp(.74rem,2.2svh,1rem)}
.ds-rewards{padding:clamp(8px,1.6svh,16px);gap:6px}
.ds-rewards-list>div>b{font-size:clamp(1rem,3svh,1.5rem)}
@media (max-height:520px) and (orientation:landscape){.ds-standings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (orientation:portrait){.ds-standings-layout{grid-template-columns:1fr}.ds-resolve-body{grid-template-columns:1fr}}

/* Parade / scout */
.ds-parade-page{grid-template-rows:auto auto minmax(0,auto) auto auto}
.ds-parade-status{padding:6px 12px;gap:clamp(10px,2vw,22px)}
.ds-parade-status small{font-size:var(--text-micro)}
.ds-parade-status strong.is-clock{font-size:clamp(1.1rem,3.6svh,1.6rem)}
.ds-parade-ring{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:clamp(6px,1.2vw,10px)}
.ds-parade-pick{min-height:92px;padding:6px 8px}
.ds-parade-pick>img{max-height:96px}
.ds-parade-copy>strong{font-size:clamp(.72rem,2.2svh,.95rem)}
.ds-scout-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:clamp(8px,1.2vw,12px)}
.ds-scout-card{padding:clamp(8px,1.6svh,13px)}
.ds-scout-roster{grid-auto-rows:clamp(86px,24svh,118px);gap:4px}
.ds-scout-card>header>.ds-avatar{width:clamp(38px,8svh,46px);height:clamp(38px,8svh,46px)}
.ds-note{padding:8px 12px}

/* Spectate */
.ds-spectate-bar{padding:clamp(6px,1.4svh,12px) clamp(10px,2vw,22px);gap:10px}
.ds-spectate-side>.ds-avatar{width:clamp(34px,8svh,46px);height:clamp(34px,8svh,46px)}
.ds-spectate-side strong{font-size:clamp(.9rem,3svh,1.2rem)}
.ds-spectate-center>h1{font-size:clamp(.8rem,2.6svh,1.1rem)}
.ds-spectate-stage{grid-template-columns:clamp(160px,22vw,230px) minmax(0,1fr);gap:10px;padding:10px 14px 14px}
.ds-spectate-field,.ds-spectate-field canvas{min-height:clamp(180px,48svh,360px)}
@media (max-height:520px) and (orientation:landscape){.ds-spectate-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.ds-spectate-rail{grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;overflow-x:auto;scrollbar-width:none}}

/* Pack Book */
.ds-book{padding:clamp(8px,1.6svh,16px) clamp(10px,2.4vw,24px) clamp(8px,2svh,20px);gap:clamp(6px,1.4svh,12px)}
.ds-book-bar{gap:clamp(6px,1vw,14px)}
.ds-book-plaque{min-height:clamp(46px,10svh,80px);padding:4px clamp(10px,2vw,24px);border-width:clamp(4px,.6vw,7px)}
.ds-book-plaque>small{display:none}
.ds-plate-button{min-height:var(--hit-min);padding:0 clamp(10px,1.4vw,22px);font-size:clamp(.78rem,2.4svh,1.05rem)}
.ds-book-body{grid-template-columns:clamp(160px,15vw,216px) minmax(0,1fr);gap:clamp(10px,1.4vw,20px)}
.ds-book-rail>span{min-height:var(--hit-min)}
.ds-book-trait{min-height:var(--hit-min);font-size:clamp(.78rem,2.4svh,1rem)}
.ds-book-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,88px),1fr));grid-auto-rows:clamp(112px,30svh,150px);max-height:calc(100dvh - var(--shell-bar) - 150px)}
.ds-book-detail{padding:clamp(10px,2svh,20px);gap:clamp(6px,1.6svh,12px)}
.ds-book-hero h2{font-size:clamp(1.3rem,5svh,2.5rem)}
.ds-book-art{height:clamp(110px,30svh,218px)}
.ds-book-stat{font-size:clamp(.78rem,2.4svh,1.02rem)}
.ds-book-ability p{font-size:clamp(.78rem,2.4svh,1.02rem)}
.ds-book-orb{width:clamp(50px,12svh,78px);height:clamp(50px,12svh,78px)}
.ds-book-actions>.ds-plate-button{min-height:clamp(44px,10svh,64px);font-size:clamp(.9rem,3svh,1.35rem)}
@media (max-width:1180px),(max-height:600px){
  .ds-book-body{grid-template-columns:1fr}
  .ds-book-rail{grid-auto-flow:column;grid-auto-columns:max-content;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .ds-book-rail>span{padding:0 12px;font-size:.8rem;border-width:3px}
  .ds-book-trait{padding:0 10px;gap:8px}
  .ds-book-spread{padding:8px}
  .ds-book-detail{margin:2px 2px 2px 8px}
  .ds-book-grid{max-height:calc(100dvh - var(--shell-bar) - 130px)}
}
@media (max-width:700px){.ds-book-spread{grid-template-columns:1fr}.ds-book-spread::before{display:none}.ds-book-detail{margin:8px 2px 0}.ds-book-grid{max-height:none}.ds-book-bar{grid-template-columns:auto minmax(0,1fr)}.ds-book-bar>.ds-page-actions{grid-column:1/-1}}
@media (min-height:600px) and (min-width:900px){.ds-book-plaque>small{display:block}}

/* Legacy pages that stay: settings, profile, prep */
.gdd-page,.gdd-prep{padding:clamp(10px,2.4svh,28px) clamp(12px,2vw,28px)}
.gdd-page-heading{gap:12px;margin-bottom:clamp(6px,1.6svh,20px)}
.gdd-page-heading h1{font-size:clamp(1.3rem,5.2svh,4rem)}
.gdd-page-heading p{font-size:clamp(.7rem,1.9svh,.9rem)}
.gdd-settings-grid,.gdd-mode-grid,.gdd-service-grid,.gdd-scout-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(8px,1.4vw,12px)}
.gdd-settings-grid>.gdd-panel{padding:clamp(10px,2svh,20px)}
.gdd-settings-grid h2{font-size:clamp(1rem,3.2svh,1.3rem);margin:2px 0 6px}
.gdd-settings-grid label{padding:clamp(6px,1.4svh,14px) 0;min-height:var(--hit-min)}
.gdd-settings-grid select,.gdd-page select,.gdd-settings-grid input[type=range]{min-height:var(--hit-min)}
.gdd-settings-grid input[type=range]{width:clamp(120px,20vw,220px)}
.gdd-page-actions{margin:clamp(10px,2svh,24px) 0}
.gdd-page-actions>button{min-height:var(--hit-min)}
.gdd-trainer-avatar-option{color:var(--cream-100)}
.gdd-trainer-avatar>img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.gdd-trainers-strip{grid-template-columns:repeat(8,minmax(0,1fr));overflow:hidden}
.gdd-trainer-chip{min-width:0}
.gdd-trainer-chip strong,.gdd-trainer-chip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdd-pairing>.ds-icon{width:26px;height:26px}
@media (orientation:portrait){
  .gdd-profile-page{height:auto;min-height:calc(100dvh - var(--shell-bar));grid-template-columns:1fr;grid-template-rows:auto;overflow:auto}
  .gdd-trainer-identity-form,.gdd-profile-account,.gdd-profile-heading{grid-column:1;grid-row:auto}
  .gdd-trainer-avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gdd-prep-layout{grid-template-columns:1fr}
  .gdd-match-ribbon{grid-template-columns:1fr}
  .gdd-trainers-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gdd-roster-grid,.gdd-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Touch-first: DS `sm` and `link` buttons keep their compact look on desktop but meet the 44px floor on phones */
@media (max-width:900px),(pointer:coarse){.ds-button.is-sm,.ds-button.is-link{min-height:var(--hit-min)}}
@media (orientation:portrait){.gdd-global-bar{flex-wrap:wrap;row-gap:4px}.gdd-global-bar nav{flex-wrap:wrap;overflow:visible;justify-content:center;width:100%;order:3}}
[data-testid="account-settings"],.gdd-profile-account button,.gdd-trainer-name input,.gdd-pairing button,.gdd-service-grid button{min-height:var(--hit-min)}
.gdd-profile-account strong,.gdd-profile-account button{color:var(--cream-100)}
.gdd-profile-account button{border:var(--border-button) solid var(--action-wood-line);border-radius:var(--radius-md);background:var(--action-wood);box-shadow:var(--shadow-btn-wood);font:var(--weight-ultra) .8rem var(--font-ui);text-transform:uppercase}
/* Switch: 34px visual, 44px hit zone */
.ds-switch>input{top:-5px;bottom:-5px;height:auto;min-height:var(--hit-min)}
.ds-switch{margin:5px 0}

/* Lobby / matchmaking: plaque-bound controls get invisible 44px hit zones (geometry is measured by specs) */
.gdd-lobby-switch,[data-testid="lobby-open-join"],[data-testid="lobby-copy-code"],.gdd-lobby-mode-rail button{position:relative}
.gdd-lobby-switch::before,[data-testid="lobby-open-join"]::before,[data-testid="lobby-copy-code"]::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.gdd-lobby-mode-rail button::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,44px);transform:translateY(-50%)}
.gdd-lobby-copy-code,.gdd-lobby-code button,[data-testid="lobby-retry"],[data-testid="lobby-open-training"]{font-family:var(--font-ui)}
.gdd-matchmaking-bot-offer button,[data-testid="lobby-retry"],[data-testid="lobby-open-training"],[data-testid="lobby-open-home"]{min-height:var(--hit-min)}

/* Arena (in-Cup): the global bar becomes three painted utility icons — keep the 44px floor at every size */
.screen-arena > .gdd-global-bar nav{overflow:visible;gap:6px}
.screen-arena > .gdd-global-bar nav button{width:var(--hit-min);height:var(--hit-min);min-height:var(--hit-min);padding:0}
@media (max-width:900px) and (orientation:landscape){.screen-arena > .gdd-global-bar nav button{width:var(--hit-min);height:var(--hit-min)}}
/* Arena (in-Cup) on phones: the shop economy becomes a 44px scrolling strip; standings ink is cream + carved */
.screen-arena .gdd-standing-row{color:var(--cream-100);text-shadow:0 1px 0 rgba(0,0,0,.85)}
.screen-arena .gdd-standing-row strong,.screen-arena .gdd-standing-row small,.screen-arena .gdd-standing-rank{text-shadow:0 1px 0 rgba(0,0,0,.85)}
.screen-arena .gdd-economy-controls>div,.screen-arena .gdd-economy-controls>button,.screen-arena .gdd-economy-controls>details{color:var(--cream-100)}
.screen-arena .gdd-prep-tools>button{min-height:var(--hit-min)}
.screen-arena .gdd-unified-arena,.screen-arena .gdd-arena-roster>header,.screen-arena .gdd-shop-card,.screen-arena .gdd-hand-card,.screen-arena .gdd-ability-cue,.screen-arena .gdd-prep-tools>button,.screen-arena .gdd-arena-prep .gdd-puppy-card{color:var(--cream-100)}
.screen-arena .gdd-ability-cue span{color:var(--cyan-300)}
.screen-arena .gdd-prep-tools span,.screen-arena .gdd-puppy-detail,.screen-arena .gdd-puppy-detail strong,.screen-arena .gdd-card-trait-tooltip,.screen-arena .gdd-trait-flyout{color:var(--cream-100)}
.screen-arena .gdd-arena-shop .gdd-economy-controls>button,.screen-arena .gdd-arena-shop .gdd-economy-controls>div{min-height:var(--hit-min);height:auto}
.screen-arena .gdd-avatar-emote,.gdd-battle-scorebar .gdd-avatar-emote{min-width:var(--hit-min);min-height:var(--hit-min)}
@media (max-width:900px) and (orientation:landscape){
  .screen-arena .gdd-unified-arena{--prep-dock:clamp(192px,51svh,280px)}
  .screen-arena .gdd-unified-arena .gdd-arena-prep{grid-template-rows:auto minmax(0,1fr)}
  .screen-arena .gdd-arena-prep .gdd-roster-slot{min-height:48px}
  .screen-arena .gdd-arena-shop{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"economy tools" "shop shop";gap:4px 6px;min-width:0;overflow:hidden}
  .screen-arena .gdd-arena-shop .gdd-economy-controls>*,.screen-arena .gdd-prep-tools>button{min-height:var(--hit-min);min-width:var(--hit-min);height:auto}
  .screen-arena .gdd-arena-shop .gdd-shop-card{min-height:56px}
  .screen-arena .gdd-arena-shop .gdd-economy-controls{grid-area:economy;display:flex;flex-wrap:nowrap;align-items:stretch;gap:4px;height:auto;max-height:none;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .screen-arena .gdd-economy-controls>div,.screen-arena .gdd-economy-controls>button,.screen-arena .gdd-economy-controls>details{flex:0 0 auto;min-width:max-content;min-height:var(--hit-min);padding:4px 8px}
  .screen-arena .gdd-economy-controls strong{font-size:.66rem}
  .screen-arena .gdd-economy-controls span,.screen-arena .gdd-economy-controls small{font-size:.5rem}
  .screen-arena .gdd-arena-shop .gdd-shop-grid{grid-area:shop;min-width:0;height:auto}
  .screen-arena .gdd-arena-shop .gdd-shop-card{min-height:64px}
  .screen-arena .gdd-prep-tools{grid-area:tools;display:flex;align-items:center;gap:4px;min-width:0}
  .screen-arena .gdd-prep-tools>button{min-height:var(--hit-min);padding:4px 10px;white-space:nowrap}
  .screen-arena .gdd-prep-tools>span{white-space:nowrap;font-size:.52rem}
}

/* Reduced motion is honoured through the motion tokens (durations collapse to 0ms). */

/* Terminal network state: the HUD offers the only sane exit. */
.gdd-network-status .gdd-network-home{margin-left:var(--space-2,8px);padding:2px 10px;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:0.8em;cursor:pointer}
.gdd-network-status[data-state="lost"]{color:#ffc2ae}

/* Emote bubbles (sent through the room) and spectator plaques. */
.gdd-emote-bubble{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%) scale(.6);padding:2px 10px;border-radius:999px;background:var(--cream-100,#fff6e5);color:var(--wood-900,#3a2416);border:2px solid var(--gold-500,#d9a441);box-shadow:var(--shadow-carved,2px 2px 0 rgba(0,0,0,.35));font:inherit;font-size:.85em;white-space:nowrap;pointer-events:none;z-index:6;animation:gdd-emote-pop 2.4s ease-out forwards}
.gdd-emote-bubble b{display:inline-block;margin-right:4px;font-size:1.1em}
.gdd-standing-row,.gdd-duel-side{position:relative}
@keyframes gdd-emote-pop{0%{opacity:0;transform:translate(-50%,-70%) scale(.6)}12%{opacity:1;transform:translate(-50%,-100%) scale(1.08)}22%{transform:translate(-50%,-100%) scale(1)}80%{opacity:1;transform:translate(-50%,-125%) scale(1)}100%{opacity:0;transform:translate(-50%,-150%) scale(.9)}}
.gdd-standings-spectators,.gdd-lobby-spectators{display:inline-flex;align-items:center;gap:6px;margin:0;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.28);color:var(--gold-300,#f1cf7a);font-size:.72em;letter-spacing:.08em;text-transform:uppercase}
.gdd-standings-spectators[hidden],.gdd-lobby-spectators[hidden]{display:none}
.gdd-battle-standings .gdd-standings-spectators{position:absolute;right:8px;bottom:6px}