/* Final component geometry. Every battle card keeps the same portrait ratio. */
.duel-play {
  --type-caption: 15px;
  --type-label: 15px;
  --type-body: 17px;
  --type-title: 26px;
  --duel-card-height: clamp(142px, calc((100dvh - 560px) / 2), 190px);
  --duel-hand-height: clamp(170px, 21dvh, 196px);
}
.duel-play :is(button,input,select,textarea) { max-width:100%; }
.duel-play :is(dialog,dialog header,dialog section,dialog article,.hub-card>div,.shop-product) { min-width:0; }
.duel-play dialog { max-width:calc(100% - 24px); max-height:calc(100dvh - 24px); overscroll-behavior:contain; scrollbar-gutter:stable; overflow-x:hidden; }
.duel-play:has(dialog[open]) { overflow:hidden; }
.duel-play dialog :is(h1,h2,h3,p,small,label,button) { overflow-wrap:anywhere; word-break:normal; }
.duel-play dialog :is(h1,h2) { font-size:var(--type-title); line-height:1.35; }
.duel-play dialog :is(h1,h2,h3) { word-break:keep-all; overflow-wrap:break-word; text-wrap:balance; }
.duel-play .privacy-settings { font-size:16px; min-height:44px; }
.duel-play .privacy-dialog .privacy-eyebrow { font-size:13px!important; }
.duel-play .hero-info strong { word-break:keep-all; overflow-wrap:anywhere; }
.duel-play dialog h3 { font-size:18px; line-height:1.45; }
.duel-play dialog :is(p,label) { font-size:var(--type-body); line-height:1.7; word-break:keep-all; overflow-wrap:anywhere; }
.duel-play dialog small { font-size:var(--type-caption); line-height:1.6; color:#cbd6e4; }
.duel-play dialog button { font-size:17px; line-height:1.5; white-space:normal; }
.duel-play .start-content h1 { font-size:32px; line-height:1.3; }
.duel-play .auth-content h2 { font-size:28px; }
.duel-play .result-dialog h2 { font-size:32px; }
.duel-play :is(.collection-hub,.journey-dialog,.tutorial-dialog,.workshop-dialog)>header {
  position:sticky; top:0; z-index:8; background:#101923;
  padding:16px 0 12px; border-bottom:1px solid #465468;
}
.duel-play :is(.collection-hub,.journey-dialog,.tutorial-dialog,.workshop-dialog)>header h2 { margin:4px 0; }
.duel-play :is(.collection-hub,.journey-dialog,.tutorial-dialog,.workshop-dialog)>header>button { flex:0 0 auto; }
.duel-play .hub-tabs { position:static; flex-wrap:wrap; gap:6px; padding-block:12px; }
.duel-play .hub-tabs button { flex:0 0 auto; }
.duel-play :is(.hub-filters,.hub-card-actions,.run-actions,.shop-product footer) { flex-wrap:wrap; }
.duel-play .hub-filters>* { flex:1 1 140px; min-width:0; }
.duel-play .hub-wallet { gap:10px 22px; }
.duel-play .hub-wallet strong { font-size:22px; line-height:1.4; }
.duel-play .hub-card { align-items:flex-start; }
.duel-play .hub-card>img { width:92px; height:auto; aspect-ratio:5/7; flex:0 0 92px; }
.duel-play .pack-card img { aspect-ratio:5/7; }
.duel-play .hub-missions progress { width:calc(100% - 64px); }
.duel-play .mode-options button b { font-size:16px; line-height:1.4; }
.duel-play .mode-options button small { font-size:15px; line-height:1.55; }
.duel-play .lobby-mode-help { display:none; }
.duel-play .lobby-disclosure>summary { line-height:1.6; }
.duel-play .workshop-dialog>header { padding:16px 20px; }
.duel-play :is(#workshop-summary,.workshop-status,.workshop-advice,.draft-name,.draft-row>b,.workshop-card-copy>p) { font-size:16px; line-height:1.7; }
.duel-play :is(.draft-cost,.curve-bar>span,.curve-bar>small,.workshop-card-copy>b) { font-size:14px; line-height:1.5; }
.duel-play .workshop-curve { height:70px; }
.duel-play .workshop-template { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px; }
.duel-play .workshop-template button { min-width:60px; padding:8px; white-space:nowrap; }
.duel-play .workshop-template select { width:100%; min-width:0; font-size:14px; }
.duel-play .draft-row { gap:6px; }
.duel-play .draft-row button,.duel-play .workshop-card button { width:44px; min-width:44px; height:44px; }
.duel-play .workshop-card h3 { font-size:16px; }
.duel-play .workshop-catalog { grid-auto-rows:max-content; align-content:start; }
.duel-play .workshop-card-copy>div { flex-wrap:wrap; gap:4px; font-size:14px; }
.duel-play :is(.lesson-instruction,.lesson-message,.lesson-hint,.lesson-note) { font-size:17px; line-height:1.75; }

.duel-play .topbar { min-height:54px; padding:6px 20px; gap:12px; }
.duel-play .brand { font-size:20px; letter-spacing:1px; }
.duel-play .brand small { font-size:10px; letter-spacing:.3px; margin-top:3px; }
.duel-play .sigil { font-size:32px; }
.duel-play .topbar nav { gap:4px; }
.duel-play .topbar :is(.menu-button,.game-tools>summary) { font-size:16px; padding:9px 10px; min-height:44px; }
.duel-play .layout { width:min(1440px,calc(100% - 40px)); margin:10px auto 16px; grid-template-columns:minmax(0,1fr) 286px; gap:22px; }
.duel-play .arena .duel-meta { font-size:14px; line-height:1.5; margin-bottom:8px; flex-wrap:wrap; }
.duel-play .arena .scenario-rule { font-size:16px; line-height:1.7; padding:8px 12px; background:#182638; color:#f0f5ff; }
.duel-play .arena .battlefield { padding:8px 14px; }
/* The large ornamental glyph can paint past its grid box on short screens. */
.duel-play .battlefield::before { pointer-events:none; }
.duel-play .arena .field-row { min-height:0; gap:10px; align-items:center; justify-items:center; }
.duel-play .arena .field-row .slot {
  width:calc(var(--duel-card-height) * .7142857143); height:var(--duel-card-height);
  max-width:100%; aspect-ratio:5/7; min-height:0; border-radius:8px;
}
.duel-play .arena .field-row .slot:has(.unit) { border:0; background:none; }
.duel-play .arena .field-row .unit {
  position:absolute; inset:0; width:100%; max-width:none; height:100%; aspect-ratio:5/7;
  padding:3px; border-radius:8px; margin:0;
}
.duel-play .arena .unit img { inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); }
.duel-play .arena .unit .unit-name { font-size:15px; font-weight:750; line-height:1.35; left:3px; right:3px; bottom:35px; padding:4px 3px; background:#07111f; color:#fff; }
.duel-play .arena .unit-keyword { font-size:12px; line-height:1.4; left:4px; top:5px; padding:2px 4px; max-width:calc(100% - 8px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#152235; color:#ffdf9e; }
.duel-play .arena .unit-status { top:31px; right:5px; font-size:14px; }
.duel-play .arena .unit-stats { bottom:5px; left:5px; right:5px; font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums; }
.duel-play .arena .unit-stats small { font-size:12px; }
.duel-play .arena .unit-stats>span { padding:2px 3px; background:#081321; border-radius:4px; }
.duel-play .arena .lane-label { font-size:13px; line-height:1.5; margin:5px 0; color:#c4d2e2; }
.duel-play .arena .lane-label small { font-size:12px; }
.duel-play .arena .turn-divider { gap:8px; margin:4px 0; }
.duel-play .arena .turn-mark #turn-label { font-size:17px; line-height:1.5; letter-spacing:0; }
.duel-play .arena .end-turn { min-height:48px; padding:9px 14px; font-size:17px; }
.duel-play .arena .hero { min-width:230px; padding:7px 10px 7px 7px; gap:8px; background:#111d2e; border-color:#65748a; }
.duel-play .arena .hero img { width:38px; height:38px; }
.duel-play .arena .hero-info { gap:2px; }
.duel-play .arena .hero-info small { font-size:12px; line-height:1.35; letter-spacing:0; }
.duel-play .arena .hero-info strong { font-size:17px; line-height:1.4; }
.duel-play .arena .hero-hp { font-size:34px; line-height:1; margin-left:4px; }
.duel-play .arena .hero-hp b { font-weight:750; }
.duel-play .arena .card-backs { height:18px; margin-bottom:3px; gap:3px; }
.duel-play .arena .card-backs span { width:13px; height:18px; font-size:10px; }
.duel-play .arena .opponent-meta { font-size:13px; line-height:1.6; color:#d0daea; }
.duel-play .arena .enemy-rune { font-size:13px; line-height:1.5; margin-top:3px; }
.duel-play .arena .energy>span { font-size:14px; }
.duel-play .arena .energy b { font-size:24px; font-weight:750; }
.duel-play .arena .energy-gems { gap:3px; margin-top:4px; }
.duel-play .arena .energy-gems i { width:9px; height:9px; }
.duel-play .arena .resonance-panel { padding:6px 10px; margin:5px 0; gap:10px; align-items:center; }
.duel-play .arena .resonance-copy { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; }
.duel-play .arena .resonance-copy strong { font-size:15px; margin:0; }
.duel-play .arena .resonance-copy small { grid-column:1/-1; font-size:13px; line-height:1.5; }
.duel-play .arena .rune-actions button { min-height:44px; padding:6px 10px; font-size:14px; }
.duel-play .arena .rune-actions small { font-size:12px; line-height:1.4; }
.duel-play .arena .hand-heading { font-size:14px; line-height:1.5; margin:8px 0 4px; gap:8px; flex-wrap:wrap; }
.duel-play .arena .hand-heading b { font-size:14px; font-weight:700; }
.duel-play .arena .hand {
  min-height:0; height:auto; gap:8px; padding:5px 4px 8px;
  align-items:flex-end; scroll-padding:8px; overscroll-behavior-x:contain;
}
.duel-play .arena .hand-card {
  height:var(--duel-hand-height); width:calc(var(--duel-hand-height) * .7142857143);
  flex:0 0 calc(var(--duel-hand-height) * .7142857143); aspect-ratio:5/7;
}
.duel-play .arena .hand-card .card-name { font-size:16px; font-weight:750; line-height:1.4; bottom:38px; left:4px; right:4px; padding:5px 4px; background:#07111f; }
.duel-play .arena .hand-card .card-mini-stats { font-size:26px; bottom:7px; font-variant-numeric:tabular-nums; }
.duel-play .arena .hand-card .spell-caption { font-size:14px; bottom:10px; color:#f0dbff; }
.duel-play :is(.hand-card .cost,.full-card .cost,.forecast-hero strong) { font-family:var(--font-ui); font-variant-numeric:tabular-nums; font-weight:750; }
.duel-play .hand-card .cost { width:31px; height:34px; font-size:23px; background:#123955; }
.duel-play .arena .hint-bar { font-size:17px; line-height:1.75; margin-top:4px; min-height:30px; color:#f0f5ff; text-wrap:pretty; }
.duel-play .arena .turn-clock { font-size:17px; line-height:1.5; font-weight:750; color:#d6ffe9; background:#153d30; border:1px solid #80bda2; padding:6px 10px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.duel-play .arena .turn-clock.urgent { color:#fff0e7; background:#752e29; border-color:#ffb29a; }
.duel-play .arena .unit.guard { border:2px solid #8ccbc1; box-shadow:0 0 0 2px #8ccbc12b; }
.duel-play .arena .unit.guard .unit-keyword { color:#d4fff6; background:#163c38; }
.duel-play .guard-hint { font-size:14px; line-height:1.6; color:#d4fff2; background:#173b34; border:1px solid #5b9683; border-radius:5px; padding:7px 10px; margin:6px 0; }
.duel-play .sidebar { align-self:start; position:sticky; top:8px; max-height:calc(100dvh - 72px); overflow:auto; scrollbar-width:thin; }
.duel-play .card-inspector .full-card { width:100%; height:auto; aspect-ratio:5/7; max-height:none; }
.duel-play .card-inspector .card-copy h3 { font-size:21px; letter-spacing:0; }
.duel-play .card-inspector .card-copy .card-en { font-size:13px; letter-spacing:.3px; }
.duel-play .inspect-description { font-size:17px; line-height:1.8; color:#ecf3ff; }
.duel-play .inspect-description .hand-overflow-warning { display:block; color:#ffe1a0; background:#4e351c; border:1px solid #b1874d; border-radius:5px; padding:8px; margin-top:10px; font-style:normal; }
.duel-play .forecast-hands { display:grid; gap:8px; margin:12px 0; }
.duel-play .forecast-hand { padding:9px 12px; border:1px solid #526680; background:#19283a; border-radius:5px; font-size:15px; line-height:1.6; }
.duel-play .forecast-overflow { display:block; font-size:15px; color:#ffe1a0; }
.duel-play .forecast-hand-note { font-size:14px; line-height:1.6; color:#c8d5e5; }
.duel-play .battle-log li { font-size:16px; line-height:1.8; color:#dce7f5; }
.duel-play :is(.inspect-description b,.forecast-unit-copy strong,.forecast-unit-copy span) { font-size:16px; line-height:1.6; }
.duel-play :is(.forecast-unit-copy,.forecast-hero) { min-width:0; overflow-wrap:anywhere; }
.duel-play :is(.forecast-hero>span,.battle-settings fieldset span,.pack-card span,.hub-pity span,.profile-heading span,.profile-stats span) { font-size:14px; line-height:1.65; color:#cbd6e4; }
.duel-play .forecast-hero strong { font-size:28px; }
.duel-play .pack-card b { font-size:15px; line-height:1.5; }
.duel-play .keyword-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.duel-play .keyword-guide :is(span,b) { font-size:14px; line-height:1.7; color:#e5eef9; }
.duel-play .rules li>b { font-size:17px; line-height:1.6; }
.duel-play .ability-dictionary p { font-size:16px; line-height:1.75; color:#d9e5f3; }
.duel-play .toast { font-size:16px; line-height:1.65; max-width:calc(100% - 28px); white-space:normal; background:#112236; color:#f6f9ff; border-color:#829bb6; }
.duel-play .start-content #start-button { position:sticky; bottom:0; z-index:9; box-shadow:0 -10px 20px #101923e8; }
.duel-play .battle-keyboard-help,.duel-play .side-note { font-size:14px; line-height:1.7; }
.duel-play .arena .mobile-selection-tools :is(.card-detail-trigger,.mobile-card-action) { font-size:17px; min-height:48px; }

@media(min-width:900px) and (max-height:1000px) {
  /* Spend less space on repeated lane labels instead of distorting cards. */
  .duel-play .topbar { min-height:46px; padding-block:2px; }
  .duel-play .layout { margin-top:4px; }
  .duel-play .arena .battlefield { padding-block:6px; }
  .duel-play .arena .lane-label { display:none; }
  .duel-play .arena .end-turn { min-height:44px; padding-block:8px; }
  .duel-play .brand small { display:none; }
  .duel-play .arena .scenario-rule { padding-block:4px; }
  .duel-play .arena .hero { padding-block:3px; }
  .duel-play .arena .hero-info small { display:none; }
  .duel-play .arena .resonance-copy small { display:none; }
  .duel-play .arena .rune-actions button { min-height:44px; }
  .duel-play .arena .resonance-panel { padding-block:5px; }
}
@media(max-width:899px) {
  .duel-play .layout { width:calc(100% - 24px); grid-template-columns:minmax(0,1fr); gap:14px; }
  .duel-play .topbar { flex-wrap:wrap; padding:8px 12px; }
  .duel-play .topbar nav { flex:1 1 auto; justify-content:flex-end; }
  .duel-play .arena .field-row .slot { width:min(100%,124px); height:auto; }
  .duel-play .sidebar { position:static; max-height:none; }
}
@media(max-width:600px) {
  .duel-play { --duel-hand-height:156px; }
  .duel-play .topbar { min-height:48px; padding:4px 8px; gap:6px; flex-wrap:nowrap; }
  .duel-play .brand { font-size:17px; }
  .duel-play .brand>div { display:none; }
  .duel-play .brand small { display:none; }
  .duel-play .sigil { font-size:26px; }
  .duel-play .topbar nav { flex:1 1 auto; width:auto; justify-content:space-between; gap:2px; }
  .duel-play .topbar :is(.menu-button,.game-tools>summary) { font-size:15px; padding:8px 7px; }
  .duel-play .topbar :is(#sound-button,#music-button) { font-size:0; width:28px; min-width:28px; padding:0; }
  .duel-play #music-button::after { content:'♫'; font-size:18px; color:#c9d5e6; }
  .duel-play #music-button[aria-pressed=false]::after { opacity:.45; }
  .duel-play .layout { width:calc(100% - 16px); margin-top:6px; }
  .duel-play .arena .battlefield { padding:8px; }
  .duel-play .arena .field-row { gap:6px; }
  .duel-play .arena .field-row .slot { width:min(100%,85px); }
  .duel-play .arena .unit .unit-name { font-size:15px; padding:3px 2px; bottom:34px; }
  .duel-play .arena .unit-stats { font-size:24px; left:3px; right:3px; }
  .duel-play .arena .hand-card .card-name { font-size:16px; }
  .duel-play .arena .unit-keyword { font-size:12px; }
  .duel-play .arena .hero { min-width:0; width:62%; gap:5px; }
  .duel-play .arena .hero-info strong { font-size:15px; }
  .duel-play .arena .hero-info small { display:none; }
  .duel-play .arena .hero-hp { font-size:32px; }
  .duel-play .arena .hero img { width:30px; height:30px; }
  .duel-play .arena .lane-label small { display:none; }
  .duel-play .arena .player-lane { display:none; }
  .duel-play .arena .scenario-rule { font-size:16px; padding:7px 9px; }
  .duel-play .arena .duel-meta { font-size:13px; gap:5px; flex-wrap:nowrap; align-items:center; }
  .duel-play .arena #mode-label { flex:1 1 0; min-width:0; font-size:12px; line-height:1.45; white-space:normal; }
  .duel-play .arena .turn-clock { flex:0 0 auto; font-size:14px; line-height:1.4; padding:3px 5px; }
  .duel-play .arena .battlefield { padding-block:6px; }
  .duel-play .arena .hand-heading { margin-top:3px; margin-bottom:2px; }
  .duel-play .arena .hand { padding-top:3px; padding-bottom:5px; }
  .duel-play .arena .duel-meta :is(#deck-name,.connection-label) { display:none; }
  .duel-play .arena .duel-meta .round { flex:0 0 auto; font-size:12px; letter-spacing:0; padding-right:0; border:0; }
  .duel-play .arena .resonance-panel { flex-wrap:nowrap; gap:5px; padding:4px 6px; margin-block:3px; }
  .duel-play .arena .resonance-copy { flex:1 1 auto; min-width:0; display:block; }
  .duel-play .arena .resonance-copy strong { font-size:14px; white-space:nowrap; }
  .duel-play .arena .resonance-copy small { display:none; }
  .duel-play .arena #resonance-gems { display:none; }
  .duel-play .arena .rune-actions { flex:0 0 auto; gap:4px; }
  .duel-play .arena .rune-actions button { display:flex; align-items:center; justify-content:center; gap:4px; min-width:76px; min-height:44px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; padding:4px; font-size:14px; }
  .duel-play .arena .rune-actions .resonance-help { min-width:32px; }
  .duel-play .arena .rune-actions small { display:inline; font-size:12px; }
  .duel-play .arena .mobile-card-action { font-size:17px; min-height:48px; }
  .duel-play .arena .energy>span { display:flex; align-items:baseline; gap:4px; }
  .duel-play .arena .energy b { font-size:24px; line-height:1.3; margin-left:0; }
  .duel-play .arena .energy-gems { display:none; }
  /* The same full card/action remains available in the mobile detail dialog. */
  .duel-play .sidebar { display:none; }
  .duel-play .mode-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:6px; }
  .duel-play .mode-options button { display:block; min-height:52px; padding:8px 4px; text-align:center; }
  .duel-play .mode-options button b { font-size:15px; line-height:1.5; }
  .duel-play .mode-options button :is(span,small) { display:none; }
  .duel-play .start-content .lobby-mode-help:not([hidden]) { display:block; margin:6px 0 16px; font-size:15px; line-height:1.6; color:#d5e0ed; }
  .duel-play .start-content .start-intro { margin-block:10px; }
  .duel-play .arena .opponent-meta { max-width:36%; font-size:12px; }
  .duel-play .arena .turn-divider .divider-line { display:none; }
  .duel-play .arena .turn-divider { justify-content:space-between; }
  .duel-play .arena .turn-mark { min-width:0; white-space:normal; }
  .duel-play .arena .turn-mark #turn-label { font-size:16px; }
  .duel-play .arena .end-turn { min-width:112px; gap:10px; }
  .duel-play :is(.collection-hub,.journey-dialog,.tutorial-dialog) { padding:16px; }
  .duel-play :is(.collection-hub,.journey-dialog,.tutorial-dialog,.workshop-dialog)>header { top:0; padding-top:10px; gap:8px; }
  .duel-play .workshop-template { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .duel-play .workshop-template select { grid-column:1/-1; }
  .duel-play .hub-tabs { gap:5px; }
  .duel-play .hub-tabs button { font-size:15px; padding:8px 10px; }
  .duel-play .hub-card>img { width:74px; flex-basis:74px; }
  .duel-play .hub-card { gap:10px; padding:10px; }
  .duel-play dialog :is(h1,h2) { font-size:22px; }
  .duel-play .start-content h1 { font-size:28px; }
  .duel-play :is(.auth-content,.result-dialog) h2 { font-size:26px; }
  .duel-play dialog :is(p,label) { font-size:17px; }
  .duel-play dialog button { font-size:17px; }
  .duel-play .keyword-guide { grid-template-columns:minmax(0,1fr); }
}