/* Shared reading layer. Keep rules text in the DOM and let tall screens scroll. */
:root {
  --font-ui: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ink: #f1f4f8;
  --muted: #cbd6e5;
  --gold: #e6c993;
  --ui-text: #f1f4f8;
  --ui-muted: #cbd6e5;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-ui); font-size: 17px; font-weight: 500; line-height: 1.65; letter-spacing: 0; }
button, input, select, textarea { font-family: var(--font-ui); }
input, select, textarea { font-size: 17px; }
button, a, summary { touch-action: manipulation; }

/* Account, lobby, collection, shop, lessons and results share a reading scale. */
.duel-play dialog { line-height: 1.65; }
.duel-play dialog :is(p, label, small, summary) { font-size: 14px; }
.duel-play dialog :is(button, select, input) { font-size: 15px; }
.duel-play dialog button { min-height: 44px; }
.duel-play dialog :is(h1, h2, h3, h4) { font-weight: 750; line-height: 1.4; }
.duel-play :is(.auth-intro, .auth-note, .auth-error, .start-content .start-intro,
  .start-content .deck-description, .fine-print, .rules p, .player-path p,
  .next-goal p, .shop-product p, .shop-hero p, .hub-card p, .hub-rule,
  .hub-packs p, .hub-onboarding p, .hub-missions p, .battle-review-body .review-note,
  .review-next-choice p, .forecast-outcome, .forecast-empty, .forecast-cost,
  .account-service-note, .result-next, .growth-note, .strategy-note) {
  font-size: 17px; line-height: 1.85; color: var(--ui-muted);
}
.duel-play :is(.auth-content label, .start-content .name-field,
  .start-content .deck-picker label, .field-label, .opponent-picker,
  .path-heading, .lobby-disclosure > summary, .hub-card small,
  .hub-count, .shop-stock, .shop-product small, .shop-product strong,
  .shop-loop, .review-stat-grid dt, .review-played-card, .review-turn-grid > div,
  .battle-review > summary, .battle-review-body h3, .forecast-unit-copy small,
  .forecast-hero small, .auth-tabs button, .start-foot) {
  font-size: 15px; line-height: 1.65;
}
.duel-play :is(.eyebrow, .auth-content .eyebrow, .next-goal > small,
  .shop-hero small, .card-copy .card-en) { font-size: 14px; letter-spacing: .4px; }
.duel-play :is(.auth-tabs button, .topbar nav > .menu-button, .text-button,
  .game-tools > summary, .quick-learn, .path-tabs button, .path-actions button,
  .next-goal button, .start-content .lobby-wallet, .hub-tabs button,
  .hub-card-actions button, .hub-workshop-links button, .primary,
  .secondary-account, .shop-product .primary) { font-size: 16px; font-weight: 650; }
.duel-play :is(.mode-options button b, .difficulty-options button b) { font-size: 16px; }
.duel-play :is(.mode-options button small, .difficulty-options button small,
  .path-tabs span) { font-size: 13px; color: #c6d1df; letter-spacing: 0; line-height: 1.55; }
.duel-play .mode-options button { min-height: 110px; padding: 13px 10px; }
.duel-play .difficulty-options button { padding: 12px 7px; }
.duel-play .auth-dialog { width: 510px; }
.duel-play .auth-content { padding: 22px 30px 30px; }
.duel-play .auth-content h2 { font-size: 29px; }
.duel-play .auth-content input { font-size: 16px; }
.duel-play .start-content :is(input, select) { font-size: 16px; }
.duel-play .shop-product p { min-height: 0; }
.duel-play .hub-card-actions { flex-wrap: wrap; }
.duel-play .collection-item .card-copy h3 { font-size: 18px; }
.duel-play .card-copy .card-type { font-size: 13px; letter-spacing: 0; }
.duel-play .card-copy .large-stats small { font-size: 12px; }
.duel-play .battle-review-body h3 { color: #e4edeb; }
.duel-play .mode-options button small { word-break: keep-all; overflow-wrap: anywhere; }
.duel-play .ascension-inspector { line-height: 1.75; }
.duel-play .ascension-inspector :is(strong, span, p) { font-size: 14px; }
.duel-play .ascension-inspector small { font-size: 13px; color: #cbd5e4; }
.duel-play .hero-info strong { white-space: normal; overflow-wrap: anywhere; }

/* Secondary panels used to retain 9–12px text after the main battle was enlarged. */
.duel-play :is(.journey-intro,.boss-card p,.boss-card span,.current-run p,
  .streak-card p,.blessing-grid button span,.deck-plan,.lesson-side p,
  .hub-card p,.hub-odds,.hub-ledger table,.result-reward,.account-service p,
  .workshop-card-copy>p,.purchase-review>p) {
  font-size:17px; line-height:1.8; color:#dce6f3;
}
.duel-play :is(.boss-card small,.boss-card b,.journey-record,.streak-card small,
  .deck-plan small,.lesson-card b,.lesson-card span,.lesson-card small,
  .lesson-hero,.lesson-vs,.strategy-counter,.hub-wallet small,.hub-count,
  .hub-ledger td>small,.hub-ledger td>span,.cosmetic-wardrobe h4,
  .shop-unlock,.purchase-math>span,.workshop-filters>span,
  .draft-title label,.saved-heading span,.saved-deck strong,
  .workshop-empty,.account-service article small,.profile-stats small) {
  font-size:15px; line-height:1.65; letter-spacing:0; color:#ccd9ea;
}
.duel-play :is(.hub-card-actions button,.hub-packs .primary,.break-button,
  .cosmetic-wardrobe button,.workshop-elements button,.saved-deck button) {
  font-size:16px; min-height:44px; line-height:1.5;
}
.duel-play :is(.workshop-filters input,.workshop-filters select,
  .draft-title input,.feedback-form select,.account-service input,
  .account-service select,.account-service textarea) { font-size:17px; }
.duel-play .profile-stats b { font-size:22px; font-weight:750; }
.duel-play .lesson-card { min-height:190px; }
.duel-play .lesson-card img { height:100px; flex:0 0 100px; }
.duel-play .lesson-card :is(b,span,small) { padding-inline:5px; overflow-wrap:anywhere; }
.duel-play .boss-card span { min-height:0; }
.duel-play .hub-ledger td,.duel-play .hub-ledger th { vertical-align:top; }

/* Combat: names have their own opaque reading plate, separate from the art. */
.duel-play .topbar { height: auto; min-height: 84px; padding-block: 14px; gap: 14px; }
.duel-play .topbar nav { flex-wrap: wrap; }
.duel-play .game-tools > summary { min-height: 44px; }
.duel-play :is(.duel-meta, .hand-heading, .lane-label, .hand-heading b,
  .opponent-meta, .energy > span, .enemy-rune, .inspector-head,
  .inspector-head button, .battle-keyboard-help, .side-note) { font-size: 13px; line-height: 1.6; }
.duel-play .hero-info strong { font-size: 15px; font-weight: 700; line-height: 1.4; }
.duel-play .hero-info small { font-size: 11px; letter-spacing: .5px; }
.duel-play .hero-hp { font-family: var(--font-ui); font-size: 30px; font-variant-numeric: tabular-nums; }
.duel-play .lane-label small { font-size: 12px; color: #c5d2df; }
.duel-play :is(.end-turn, .turn-mark #turn-label, .mobile-card-action) { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.duel-play .arena .resonance-copy strong { font-size: 15px; }
.duel-play .arena .resonance-copy small { font-size: 12px; line-height: 1.6; color: #cbd5e4; }
.duel-play .arena .rune-actions button { font-size: 14px; height: auto; min-height: 48px; }
.duel-play .arena .rune-actions small { font-size: 12px; line-height: 1.5; }
.duel-play .hand { min-height: 184px; gap: 10px; padding-bottom: 12px; }
.duel-play .hand-card { flex-basis: 124px; width: 124px; height: 170px; }
.duel-play .hand-card .card-name, .duel-play .unit .unit-name {
  left: 5px; right: 5px; bottom: 34px; padding: 5px 4px;
  background: #0d1627f2; border-radius: 4px; color: #fff;
  font-size: 14px; font-weight: 750; line-height: 1.35; letter-spacing: 0;
  white-space: normal; overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-shadow: none;
}
.duel-play .hand-card .card-mini-stats { font-size: 18px; }
.duel-play .hand-card .spell-caption { font-size: 12px; color: #e4c8fa; }
.duel-play .unit .unit-name { font-size: 13px; }
.duel-play .unit-stats { font-size: 19px; }
.duel-play .unit-stats small { font-size: 11px; }
.duel-play .unit-keyword { font-size: 11px; background: #111d30f5; }
.duel-play .inspect-description { font-size: 16px; line-height: 1.85; color: #e0e8f3; }
.duel-play .inspect-description b { font-size: 15px; font-weight: 700; }
.duel-play .hint-bar { font-size: 14px; line-height: 1.7; color: #cbd8e8; height: auto; }
.duel-play .battle-log li { font-size: 14px; line-height: 1.85; color: #c9d5e4; }
.duel-play .empty-inspector { font-size: 15px; }
.duel-play .use-card { min-height: 48px; white-space: normal; line-height: 1.5; }

/* Public introduction and long-form help use the same clear sans-serif text. */
.duel-landing :is(.hero-description, .modes p, .questions details p) { font-size: 17px; line-height: 1.85; color: #d2dce9; }
.duel-landing :is(.entry-facts, footer) { font-size: 14px; line-height: 1.7; color: #c7d2e0; }
.duel-guide p { font-size: 17px; color: #cbd7e7; }
.duel-guide :is(.caption, .hero figcaption span, .brand small, .eyebrow) { font-size: 13px; color: #bdcce0; }
.duel-guide :is(.contents a, .hero-actions > a:not(.play)) { font-size: 15px; }
.language-control { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 13px/1.5 var(--font-ui); color: #dce5f0; }
.language-control select { min-height: 44px; padding: 8px 10px; background: #111d2d; color: #f1f4f8; border: 1px solid #8998ab; border-radius: 5px; font: 600 15px var(--font-ui); }
.language-control select:focus-visible { outline: 3px solid #a6e6ff; outline-offset: 3px; }
.auth-content > .language-control { display: flex; justify-content: flex-end; margin-top: 18px; }
.lobby-heading { flex-wrap: wrap; gap: 10px; }
.duel-landing .site-header, .duel-guide > header { flex-wrap: wrap; }
html[data-language=en] .mode-options button { word-break: normal; }
html[data-language=en] :is(.hand-card .card-name, .unit .unit-name) { overflow-wrap: anywhere; }

/* Keep the hand and its actions in reach on ordinary laptop/desktop heights. */
@media (min-width: 900px) {
  .duel-play .topbar { min-height: 62px; padding-block: 8px; }
  .duel-play .layout { margin-top: 10px; margin-bottom: 12px; }
  .duel-play .arena .battlefield { padding: 10px 22px; }
  .duel-play .arena .field-row { min-height: clamp(96px, calc(16dvh - 48px), 174px); }
  .duel-play .arena :is(.slot, .unit) { height: clamp(96px, calc(16dvh - 48px), 174px); }
  .duel-play .arena .lane-label { margin: 4px 0 3px; }
  .duel-play .arena .turn-divider { margin: 5px 0; }
  .duel-play .arena .hero-info { gap: 2px; }
  .duel-play .arena .hero-info small { line-height: 1.2; }
  .duel-play .arena .hero-info strong { line-height: 1.25; }
  .duel-play .arena .resonance-panel { padding: 8px 12px; margin: 0 0 6px; }
  .duel-play .arena .resonance-copy { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
  .duel-play .arena .resonance-copy small { grid-column: 1 / -1; }
  .duel-play .arena .hand-heading { margin: 8px 0 6px; }
  .duel-play .arena .hand { min-height: 174px; padding-bottom: 10px; }
  .duel-play .arena .hand-card { width: 116px; flex-basis: 116px; height: 158px; }
  .duel-play .arena .hint-bar { margin-top: 3px; }
}
@media (min-width: 900px) and (max-height: 1000px) {
  .duel-play .arena .unit .unit-name { font-size: 12px; line-height: 1.2; padding: 3px 2px; }
}
.duel-play .unit .unit-name { word-break: keep-all; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .duel-play .topbar { min-height: 92px; padding: 12px; }
  .duel-play .topbar nav { row-gap: 7px; }
  .duel-play .topbar nav > .menu-button, .duel-play .game-tools > summary { font-size: 13px; padding: 10px 8px; }
  .duel-play .auth-content { padding: 20px 22px 26px; }
  .duel-play .auth-content h2 { font-size: 27px; }
  .duel-play .mode-options { grid-template-columns: 1fr; }
  .duel-play .mode-options button { min-height: 76px; padding: 12px 15px; }
  .duel-play .mode-options button b { font-size: 16px; }
  .duel-play .mode-options button small { font-size: 14px; }
  .duel-play .hero-info strong { font-size: 13px; max-width: 140px; }
  .duel-play .hero-info small { font-size: 10px; }
  .duel-play .hero { width: 65%; gap: 5px; }
  .duel-play .hero-hp { font-size: 26px; }
  .duel-play .opponent-meta { font-size: 11px; }
  .duel-play .field-row { gap: 6px; min-height: 138px; }
  .duel-play :is(.slot, .unit) { height: 138px; }
  .duel-play .unit .unit-name { font-size: 12px; padding: 4px 2px; }
  .duel-play .unit-stats { font-size: 17px; }
  .duel-play .unit-keyword { font-size: 10px; }
  .duel-play .hand-card { width: 116px; flex-basis: 116px; height: 164px; }
  .duel-play .hand { min-height: 180px; }
  .duel-play .arena .resonance-panel { flex-wrap: wrap; }
  .duel-play .arena .resonance-copy { flex: 1 1 100%; }
  .duel-play .arena .rune-actions { flex: 1; }
  .duel-play .arena .rune-actions button { flex: 1; }
  .duel-play .layout .sidebar { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
  .duel-play .sidebar .inspect-description { grid-column: 1; grid-row: 1; font-size: 16px; }
  .duel-play .sidebar .use-card { grid-column: 1; grid-row: 2; width: 100%; }
  .duel-play .lane-label { flex-wrap: wrap; gap: 4px; }
  .duel-play .lane-label small { display: block; }
  .duel-landing :is(.hero-description, .modes p, .questions details p) { font-size: 16px; }
  .duel-landing .questions summary { font-size: 16px; }
  .duel-guide p { font-size: 16px; }
}