/* Shared design tokens for user,administrator,auth and in-place replay. */
:root {
  color-scheme:light;
  --font-ui:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  --bg:#f0f0ed; --surface:#fafaf7; --surface-2:#e7e7e2; --line:#ccccc5;
  --text:#20201e; --text-soft:#62625d; --primary:#292927; --primary-strong:#080808;
  --overlay:#161614a8; --danger:#343432; --card-red:#903e37; --card-black:#20201e; --card-shadow:none;
  font-family:var(--font-ui);font-size:14px;line-height:1.65;color:var(--text);background:var(--bg);
}
body { background:radial-gradient(ellipse at 95% 0%,#d8d8d080 0,transparent 48%),var(--bg);color:var(--text);font:inherit }
button,input,select,textarea { font-family:var(--font-ui);font-size:14px;line-height:1.5 }
h1,h2,h3,h4,p { margin-top:0 }
h1,h2,h3,h4,.brand,.brand small,.lobby-intro h1,.lobby-ornament,.mode-number { font-family:var(--font-ui);letter-spacing:normal }
h1 { font-size:28px;font-weight:650;line-height:1.4;margin-bottom:10px }
h2 { font-size:20px;font-weight:600;line-height:1.45;margin-bottom:14px }
h3 { font-size:16px;font-weight:600;line-height:1.5 }
p { line-height:1.7 }
button { min-height:40px;padding:9px 16px;border-radius:8px;border:1px solid transparent;background:var(--primary);color:#fafaf7;font-weight:600;box-shadow:none }
button.secondary,.secondary,.action-button.secondary { background:var(--surface-2);border-color:var(--line);color:var(--text) }
button.text-button,.text-button { background:transparent;color:var(--primary);border-color:transparent }
button:disabled { opacity:.5;cursor:not-allowed }
button:hover:not(:disabled) { filter:brightness(1.07) }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--primary);outline-offset:3px }
input,select,textarea { background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;min-height:42px }
input[type=checkbox] { accent-color:var(--primary);min-height:0;width:17px;height:17px;flex:none }
label { font-size:14px;color:var(--text-soft);font-weight:500 }
small,.muted,.subtle,.asset-status,.hand-help,.fold-label { font-size:12px;color:var(--text-soft);line-height:1.65 }
a { color:var(--primary) }
[hidden] { display:none!important }
.auth-pending .app,.auth-pending .builder-screen { visibility:hidden }
.app { width:min(1480px,calc(100% - 48px));padding:0 0 40px;margin:auto }
.app-nav,.screen-game .app-nav { display:flex;min-height:84px;height:auto;gap:22px;border-bottom:1px solid var(--line);flex:none }
.brand,.screen-game .brand { font-family:var(--font-ui);font-size:22px;font-weight:650;letter-spacing:1px;white-space:nowrap;color:var(--text) }
.brand img,.screen-game .brand img { width:42px;height:42px;border-radius:10px }
.brand small,.screen-game .brand small { display:block;font-family:var(--font-ui);font-size:12px;letter-spacing:1px;color:var(--text-soft);margin-top:0 }
.app-nav nav,.screen-game .app-nav nav { display:flex;gap:6px;margin:0 auto 0 16px;height:auto;flex-wrap:wrap }
.app-nav .nav-link { height:auto;min-height:42px;border-radius:8px;padding:8px 12px;color:var(--text-soft);font-size:14px;font-weight:500;border:1px solid transparent }
.app-nav a.nav-link { display:inline-flex;align-items:center;text-decoration:none }
.app-nav .nav-link.active { background:var(--surface-2);border-color:var(--line);color:var(--primary) }
.account-bar { display:flex;align-items:center;gap:10px;flex:none }
.edition-tag,.screen-game .edition-tag { display:inline;font-size:12px;letter-spacing:0;color:var(--text-soft) }
.eyebrow { color:var(--primary);font-size:12px;letter-spacing:2px;margin-bottom:8px }
.lobby-intro { padding:32px 0 24px }
.lobby-intro h1 { font-size:32px;font-weight:600;letter-spacing:1px }
.lobby-intro p { font-size:14px;color:var(--text-soft);margin:0 }
.lobby-ornament { font-size:72px;color:var(--primary);opacity:.15 }
.lobby-columns { grid-template-columns:minmax(0,1fr) 290px;gap:22px }
.lobby-main { gap:18px;min-width:0 }
.surface,.lobby-panel,.modal-panel,.deck-list-panel,.deck-catalog-panel,.pregame-card,.card-preview-panel,dialog {
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;color:var(--text);box-shadow:none;
}
.lobby-panel h2,.hand-column .hand-panel h2,.hand-column .opponent-hand-tray h2 { font-size:18px;font-weight:600;color:var(--text) }
.play-tabs { display:flex;background:var(--surface);padding:5px;border:1px solid var(--line);border-radius:10px;gap:5px }
.play-tabs button { flex:1;background:transparent;color:var(--text-soft) }
.play-tabs button[aria-selected=true] { background:var(--surface-2);color:var(--primary);border-color:var(--line) }
.mode-cards { grid-template-columns:repeat(2,minmax(0,1fr));gap:14px }
#multiModes { grid-template-columns:repeat(3,minmax(0,1fr)) }
.mode-card { min-height:155px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text) }
.mode-card.selected { background:var(--surface-2);border-color:var(--primary);box-shadow:inset 3px 0 var(--primary) }
.mode-card strong { font-size:20px;font-weight:600;margin-bottom:8px }
.mode-card>span:not(.mode-number),.mode-card b { font-size:14px;line-height:1.65;color:var(--text-soft) }
.mode-card b { color:var(--primary);margin-top:15px }
.mode-card.unavailable { opacity:.55;background:var(--surface) }
.lobby-panel .new-game { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 }
.lobby-panel .new-game label,.appearance-panel label:not(.upload-button) { font-size:14px;color:var(--text-soft);gap:8px }
.lobby-panel .new-game select,.lobby-panel .new-game input,.lobby-panel .new-game button { font-size:14px;height:44px }
#formatLabel { order:-1 }
#openDeckBuilder,#newGameButton { order:5 }
.rule-summary,.lobby-status,.room-wait { font-size:14px;color:var(--text-soft);line-height:1.75 }
.lobby-status { color:var(--primary) }
.lobby-deck { background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text) }
.lobby-deck span { font-size:14px }
.lobby-deck small { font-size:12px;color:var(--text-soft) }
.appearance-panel details { font-size:14px;color:var(--text-soft) }
.room-list { display:grid;gap:12px }
.room-card { display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2) }
.room-card p { font-size:12px;color:var(--text-soft);margin:4px 0 0 }
.site-page { padding:28px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px }
.site-page>* { min-width:0 }
.page-heading { display:flex;align-items:center;justify-content:space-between;gap:20px }
.page-heading p { margin:0;color:var(--text-soft) }
.page-status { margin:0;color:var(--primary);min-height:24px }
.filters { display:flex;flex-wrap:wrap;gap:14px;align-items:end }
.filters label,.form-grid label,.account-card label { display:flex;flex-direction:column;gap:8px;min-width:0 }
.filters label { flex:1 1 140px }
.filters input,.filters select,.form-grid input,.form-grid select { width:100% }
.metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px }
.metric { display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:12px }
.metric>span { color:var(--text-soft);font-size:12px }
.metric>span:first-child { font-size:14px }
.metric>strong { font-size:30px;line-height:1.3;font-weight:600;color:var(--primary) }
.split { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;min-width:0 }
.split>section { min-width:0 }
.table-wrap { overflow-x:auto;min-width:0 }
.site-page table { width:100%;border-collapse:collapse;font-size:14px }
.site-page th,.site-page td { padding:13px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap }
.site-page th { color:var(--text-soft);font-weight:500;font-size:12px;background:var(--surface-2) }
.site-page td small { display:block }
.site-page td button { margin:3px;white-space:nowrap }
.trend { display:flex;align-items:end;gap:18px;min-height:200px;overflow:auto;padding:16px 0 }
.day { display:flex;flex-direction:column;align-items:center;min-width:54px;gap:8px;font-size:12px;color:var(--text-soft) }
.bar { width:28px;background:var(--primary);border-radius:5px 5px 0 0 }
dialog { width:min(900px,94vw);max-height:86vh }
dialog::backdrop { background:#11111188 }
pre { white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.8 var(--font-ui);color:var(--text-soft) }
#adminForm { display:grid;gap:20px }
.form-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px }
.check-row { display:flex;flex-wrap:wrap;gap:20px;margin:20px 0 }
.check-row label { display:flex;align-items:center;gap:10px }
.format-editor { padding:22px 0;border-top:1px solid var(--line) }
.format-editor:first-child { margin-top:22px }
.format-editor:last-child { padding-bottom:0 }
.format-editor .muted { margin:20px 0 0 }
.save-bar { display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:12px;padding:16px 24px;background:var(--surface) }
.save-bar p { margin:0;font-size:12px;color:var(--text-soft) }
.account-screen { position:fixed;inset:0;overflow:auto;z-index:5000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 0%,#d2d2ca,transparent 70%),var(--bg);padding:24px }
.account-card { width:min(440px,100%);padding:32px }
.account-logo { width:60px;height:60px;border-radius:14px;margin-bottom:20px }
.account-card h1 { font-size:26px }
.account-card>p { color:var(--text-soft);font-size:14px }
.account-card form { display:grid;gap:18px;margin-top:24px }
.account-card input { width:100% }
.account-card #accountStatus { color:var(--danger);margin:0 }
.account-card .text-button { width:100%;margin-top:14px }
.builder-screen { width:min(1480px,calc(100% - 48px));padding-top:24px }
.builder-screen .modal-panel { padding:24px }
.builder-screen h2 { font-size:24px }
.deck-list-panel h3,.deck-catalog-panel h3 { font-size:18px }
.deck-form label,.catalog-filters label,.result-count,.deck-catalog-item,.deck-list-item { font-size:14px }
.catalog-filters { background:var(--surface-2);border-color:var(--line);border-radius:10px }
.catalog-filters input,.catalog-filters select { font-size:14px }
.deck-validation { background:var(--surface-2);color:var(--text-soft);font-size:12px;border:1px solid var(--line) }
.deck-list-panel label,.catalog-filters label { color:var(--text-soft);font-size:14px }
.deck-list-panel textarea { font:14px/1.6 var(--font-ui) }
.deck-catalog-item,.selected-deck-row,.rest-card { background:var(--surface-2);border-color:var(--line) }
.deck-catalog-item.in-deck { border-color:var(--primary) }
.deck-catalog-title,.deck-catalog-meta,.commander-preview,.selected-deck-row span,.deck-health-rule { color:var(--text-soft);font-size:12px }
.deck-catalog-name { color:var(--text);font-size:14px }
.deck-notice,.deck-summary { color:var(--primary);border-color:var(--line);font-size:12px }
.deck-count-controls button { background:var(--surface-2);border-color:var(--line);color:var(--primary);min-height:40px }
.side-editor,.side-row { border-color:var(--line) }
.side-editor h3 { font-size:16px }
.pregame { background:#11111199 }
.pregame-card h2,.pregame-card h3,.pregame-card p,.pregame-card label { color:var(--text) }
.pregame-card h2 { font-size:24px }
.pregame-card p { font-size:14px }
.pregame-card h3 { font-size:16px }
.pregame-card button { margin:6px }
.initiative-card,.pregame-list { border-color:var(--line);background:var(--surface-2) }
.replay-controls { background:var(--surface);border-color:var(--line);color:var(--text);border-radius:10px;padding:14px;flex:none }
.replay-controls #rpNotice { color:var(--text-soft);font-size:12px }
.replay-controls input { min-height:24px;accent-color:var(--primary) }
.match-clock { font-size:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--primary) }
.match-clock.extra { background:var(--primary);color:var(--surface) }
.record-error { color:var(--danger) }
.toast { color:var(--surface);background:var(--primary);font-size:14px;z-index:6000 }
/* Keep the same navigation and readable text on the live and replay tables. */
.screen-game .app { display:flex;flex-direction:column;padding:0 18px 10px;width:100%;height:100dvh }
.screen-game .app-nav { min-height:68px }
.screen-game .game-screen { flex:1;height:auto;min-height:0;padding-top:10px }
.screen-game .topbar { background:var(--surface);border-color:var(--line);padding:10px 12px;min-width:0;overflow:visible;flex-wrap:wrap }
.screen-game .game-heading { flex-wrap:wrap;gap:8px }
.screen-game .game-heading h1 { font-size:16px }
.screen-game .game-heading #statusLine { font-size:12px;max-width:none;line-height:1.6 }
.screen-game .topbar button { font-size:12px;min-height:34px;padding:6px 10px }
.screen-game .game-layout { gap:12px;min-width:0;grid-template-columns:minmax(175px,1fr) minmax(0,min(var(--fit-table-width,55vw),calc(100% - 450px))) minmax(235px,1fr) }
.screen-game .zone-head { height:22px;min-height:22px;line-height:20px }
.hand-column,.hand-column .hand-panel,.table-status .info-strip>div,.collapsible-panel,.test-panel { background:var(--surface);border-color:var(--line) }
.hand-column .hand-panel h2,.hand-column .opponent-hand-tray h2,.collapsible-panel>summary { font-size:14px;color:var(--text) }
.hand-column .hand-help,.hand-column #handCount,.table-status .info-strip .label,.table-status .info-strip strong,.fold-label,.log-list,.log-list small,.log-list .log-time,.screen-game .log-panel #copyGameLog { font-size:12px;color:var(--text-soft) }
.zone-head { min-height:22px;line-height:20px }
.zone-head h2 { font-size:14px }
.zone-head span { font-size:12px }
.zone-head h2,.panel-head h2,.panel-head h3,.game-heading h1,.game-heading p { margin:0 }
.actions button,.action-group button { font-size:14px }
.card-preview-panel { background:var(--surface);border-color:var(--line) }
#cardPreviewText { font-size:14px;color:var(--text) }
.hand-column .opponent-hand-tray { background:var(--surface);border-color:var(--line) }
.screen-game .hand-column,.screen-game .hand-column .opponent-hand-tray { background:var(--surface);border-color:var(--line) }
/* Tutorial uses the same tokens without changing its physical card layout. */
.tutorial-page .tutorial-shell { background:var(--bg);border-color:var(--line) }
.tutorial-page .welcome h1,.tutorial-page .completion h1 { font:600 28px/1.5 var(--font-ui);letter-spacing:normal }
.tutorial-page .coach-avatar,.tutorial-page .lesson-number,.tutorial-page .hero-seal,.tutorial-page .play-card .card-fallback,.tutorial-page .reserve-button>span { font-family:var(--font-ui) }
.tutorial-page .primary { background:var(--primary);border-color:var(--primary);color:var(--surface);font-size:14px }
.tutorial-page .sheet,.tutorial-page .coach-dialog,.tutorial-page .lesson-item,.tutorial-page .reading-coach { background:var(--surface);border-color:var(--line);color:var(--text) }
.tutorial-page .coach-dialog p,.tutorial-page .task,.tutorial-page .lesson-item strong { font-size:14px;color:var(--text);line-height:1.7 }
.tutorial-page .coach-top small,.tutorial-page .lesson-item small,.tutorial-page .fine-print,.tutorial-page .directory-progress { font-size:12px;color:var(--text-soft) }
.tutorial-page .actions button { color:var(--text);background:var(--surface-2);border-color:var(--line);font-size:14px }
.tutorial-page .task,.tutorial-page .hint-button { color:var(--primary) }
.tutorial-page .brand img { width:auto;height:48px;border-radius:0 }
.tutorial-page.is-learning .brand img { width:auto;height:40px }
@media(max-width:1150px) {.app-nav,.screen-game .app-nav { flex-wrap:wrap;gap:10px;padding:12px 0 }
.app-nav nav,.screen-game .app-nav nav { order:3;width:100%;margin:0 }
.account-bar { margin-left:auto }
.lobby-columns { grid-template-columns:minmax(0,1fr) 250px }
.screen-game .game-layout { grid-template-columns:minmax(170px,1fr) minmax(0,min(var(--fit-table-width,55vw),calc(100% - 450px))) minmax(235px,1fr) }
.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:900px) {.lobby-columns { grid-template-columns:1fr }
.appearance-panel { display:none }
.metrics { grid-template-columns:repeat(2,minmax(0,1fr)) }
.split { grid-template-columns:1fr }
body.screen-game { overflow:auto }
.screen-game .app { height:auto;min-height:100dvh;width:100%;padding:0 16px 24px }
.screen-game .game-screen { overflow:visible;min-width:0 }
.screen-game .game-layout,.screen-game .game-screen.table-enlarged .game-layout,.screen-game .game-screen.tools-collapsed .game-layout {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:auto;min-width:0;gap:16px;
  }
.screen-game .field-column { grid-column:1/-1;grid-row:1;width:min(650px,100%);height:auto;max-height:none }
.screen-game .game-layout,.screen-game .field-column { overflow:visible }
.screen-game .hand-column,.screen-game .side-column { grid-row:2;height:auto;max-height:none;min-width:0 }
.screen-game .hand-column .hand-panel>.hand { min-height:120px;max-height:320px }
.screen-game .log-panel .log-list { max-height:320px;min-height:100px }
.screen-game .side-column .tool-rail { min-height:100px }
.screen-game .game-heading { flex:1 0 100%;flex-direction:column;align-items:start }
.screen-game .game-heading #statusLine { white-space:normal }
.screen-game .game-screen .topbar { min-width:0 }
}
@media(max-width:600px) {.app,.builder-screen { width:calc(100% - 28px) }
.brand,.screen-game .brand { font-size:18px }
.brand img,.screen-game .brand img { width:36px;height:36px }
.brand small { font-size:12px }
.app-nav .nav-link { font-size:14px;padding:8px 10px }
.account-bar { gap:6px }
.account-bar button { font-size:12px;padding:7px 10px }
.edition-tag { max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.lobby-intro { padding:24px 0 18px }
.lobby-intro h1 { font-size:28px }
.mode-card { min-height:148px;padding:16px }
.mode-card strong { font-size:18px }
.mode-card>span:not(.mode-number),.mode-card b { font-size:12px }
#multiModes { grid-template-columns:repeat(2,minmax(0,1fr)) }
#multiModes .unavailable { grid-column:1/-1;min-height:0;padding:14px 16px;display:flex;flex-direction:row;gap:12px;align-items:center }
#multiModes .unavailable strong { margin:0 }
#multiModes .unavailable b { display:none }
.surface,.lobby-panel,.builder-screen .modal-panel { padding:18px }
.builder-screen .deck-list-panel { max-height:none;overflow:visible }
.form-grid { grid-template-columns:1fr }
.filters { gap:12px }
.filters label { flex-basis:120px }
.page-heading,.save-bar { align-items:start;flex-direction:column }
.page-heading h1 { font-size:26px }
.metrics { gap:10px }
.metric { padding:16px }
.metric>strong { font-size:26px }
.room-card { align-items:start }
.room-card button { flex:none }
.screen-game .game-layout,.screen-game .game-screen.table-enlarged .game-layout,.screen-game .game-screen.tools-collapsed .game-layout { grid-template-columns:minmax(0,1fr) }
.screen-game .hand-column { grid-row:2 }
.screen-game .side-column { grid-row:3 }
.screen-game .field-column { width:100%;min-width:0 }
.zone-head h2 { font-size:12px }
.zone-head span { max-width:75%;font-size:12px }
.replay-controls { gap:8px }
.replay-controls button { padding:8px 10px;min-height:40px }
.replay-controls input[type=range] { flex-basis:100%;order:2 }
.replay-controls #rpNotice { order:3 }
.pregame-card { padding:18px }
.initiative-cards { gap:10px }
.initiative-card { min-width:0;flex:1;padding:10px }
.initiative-art { height:145px }
.initiative-art img { max-width:100% }
.account-card { padding:24px }
}
/* Ink and paper surfaces. Card illustrations retain their printed identities. */
.lobby-intro { position:relative;border-bottom:1px solid var(--line);margin-bottom:20px }
.lobby-ornament { font-family:var(--font-ui);font-weight:300;color:var(--text);opacity:.12 }
.surface,.lobby-panel,.modal-panel,.deck-list-panel,.pregame-card { border-radius:6px }
.mode-card,.account-card { border-radius:8px }
.app-nav .nav-link.active { box-shadow:inset 0 -2px var(--primary) }
.appearance-preview,.upload-button,.asset-help,.deck-toolbar,.catalog-filters { background:var(--surface-2);border-color:var(--line);color:var(--text) }
.upload-button:hover { background:var(--line) }
.modal { background:#161614a8 }
.character-tooltip { background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:0 10px 40px #0002 }
.character-tooltip p,.character-tooltip small,.character-tooltip h3 { color:var(--text) }
.card-fallback,.character-card .card-fallback { background:var(--surface-2);border-color:var(--line);color:var(--text) }
.character-card .character-state,.hand-card .hand-index,.shared-pile span { background:#242422e8;color:#fff }
.character-card.is-clickable { outline-color:#555 }
.is-target,.is-targetable { outline:2px dashed #242424!important;outline-offset:2px }
.is-selected,.is-picked { outline:3px solid #111!important;outline-offset:2px;box-shadow:0 0 0 5px #fff }
.hand-card.is-clickable { border-color:var(--text) }
.mat-art { filter:none;opacity:1 }
.playmat { border-color:var(--line) }
.zone-head,.zone-head h2,.zone-head span,.hand-column #handCount,.hand-help { color:var(--text) }
.mat-zone h3,.zone-label { background:#f7f7f0dd;color:var(--text) }
.mat-zone .empty:not(.equipment-card) { color:var(--text-soft);background:var(--surface-2) }
.hp-track .hp-value,.camp-stack .pile-count,.mat-rest .pile-count { background:var(--primary);color:var(--surface) }
.selected-deck-row button,.side-row button { color:var(--surface);background:var(--primary);border-color:var(--line) }
.deck-health-rule.invalid,.copy-log-status,.deck-notice,.deck-summary { color:var(--text) }
.result-count { color:var(--text-soft) }
.deck-list-panel .deck-toolbar { order:-1 }
.action-group,.pending-choice-panel,.arrangement-zone,.subset-controls { background:var(--surface-2);border-color:var(--line);color:var(--text) }
.action-button:not(.secondary) { color:var(--surface);background:var(--primary) }
.pending-card,.pending-character-card { background:var(--surface);color:var(--text);border-color:var(--line) }
.log-list li,.log-list small,.log-list .log-time,.log-list li::marker { color:var(--text-soft) }
.shared-pile { border-color:var(--line) }
.match-options,.match-options label,.match-options summary { color:var(--text);background:var(--surface-2) }
.tutorial-page .welcome,.tutorial-page .completion,.tutorial-page .directory { color:var(--text) }
.tutorial-page .primary,.tutorial-page .actions button.primary { background:var(--primary);color:var(--surface) }
.tutorial-page .stage,.tutorial-page .board,.tutorial-page .lesson-stage { background:var(--surface-2);color:var(--text);border-color:var(--line) }
.tutorial-page .quiet,.tutorial-page .intro,.tutorial-page .welcome-facts,.tutorial-page .coach p,.tutorial-page .player-name small,.tutorial-page .enemy-field,.tutorial-page .processing small,.tutorial-page .zone-heading,.tutorial-page .hand-note,.tutorial-page .battle-log,.tutorial-page .battle-log ol,.tutorial-page #actionTip,.tutorial-page .completion p,.tutorial-page .card-sheet>p,.tutorial-page .storage-notice { color:var(--text-soft) }
.tutorial-page .hero-art { background:radial-gradient(ellipse,#34343212,transparent 65%) }
.tutorial-page .hero-seal,.tutorial-page .coach,.tutorial-page .board-caption,.tutorial-page .player-avatar,.tutorial-page .hp-button,.tutorial-page .hp-display,.tutorial-page .shared-row,.tutorial-page .reserve-button,.tutorial-page .rest-button,.tutorial-page .hand-zone,.tutorial-page .feedback,.tutorial-page .feedback.success,.tutorial-page .play-card .card-fallback {
  background:var(--surface-2);color:var(--text);border-color:var(--line);
}
.tutorial-page .enemy-zone { background:linear-gradient(180deg,#24242208,transparent) }
.tutorial-page .coach-avatar,.tutorial-page .pile-button,.tutorial-page .completion-portrait,.tutorial-page .lesson-item.current { border-color:var(--text-soft) }
.tutorial-page .hp-dots,.tutorial-page .hp-display .hp-dots,.tutorial-page .pile-icon,.tutorial-page .reserve-button>span,.tutorial-page .reserve-button small { color:var(--text) }
.tutorial-page .hp-dots .empty { color:var(--line) }
.tutorial-page .step-progress span { background:var(--line) }
.tutorial-page .step-progress .done { background:var(--text-soft) }
.tutorial-page .play-card { background:var(--surface);border-color:var(--line) }
.tutorial-page .play-card.selected { border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 2px var(--primary) }
.tutorial-page .play-card.tapped:after,.tutorial-page .card-info span { background:var(--primary);color:var(--surface);border-color:var(--line) }
.tutorial-page .bottom-controls { background:var(--bg) }
.tutorial-page .bottom-controls.await-board { background:none }
.tutorial-page .overlay { background:#161614bb }
.tutorial-page .spotlight { outline-color:var(--primary)!important;box-shadow:0 0 0 3px #29292733!important;animation:none }
.tutorial-page.is-learning,.tutorial-page.is-learning .topbar,.tutorial-page.is-learning .storage-notice { background:var(--bg);border-color:var(--line) }
.tutorial-page .coach-dialog #stepText,.tutorial-page .reading-coach p { color:var(--text-soft);font-size:14px;line-height:1.7 }
.tutorial-page .reading-coach small { color:var(--text-soft) }
.tutorial-page .coach-dialog .feedback,.tutorial-page .coach-dialog .feedback.success { color:var(--text);background:none;font-size:14px }
.tutorial-page .dialog-controls #actionTip { color:var(--text-soft);font-size:12px }
.tutorial-page .physical-count,.tutorial-page .enemy-hand-count { background:var(--primary);color:var(--surface);border-color:var(--line);font-family:var(--font-ui) }
.tutorial-page .guide-portrait,.tutorial-page .table-enemy-hand img,.tutorial-page .discard-pile { border-color:var(--line) }
.tutorial-page.is-learning .step-progress { background:var(--surface-2) }
.tutorial-page .spotlight:after { border-color:var(--primary) }
.tutorial-page.is-learning .play-card.selected { outline-color:var(--primary) }
.tutorial-page .guide-mask { filter:grayscale(1) }
.tutorial-page #cardFocus span { border-color:var(--primary);box-shadow:0 0 0 1px var(--surface),0 0 12px #29292744 }
/* Artwork is never tinted by a generic button hover. */
.catalog-art-button:hover:not(:disabled),.character-card:hover:not(:disabled),.hand-card:hover:not(:disabled),.mini-card:hover:not(:disabled),.play-card:hover:not(:disabled){filter:none}
.lobby-announcement{position:sticky;top:0;z-index:8;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-top:14px;padding:7px 0;color:var(--text-soft);font-size:13px;box-shadow:0 3px 12px #0000000a}
.announcement-track{width:max-content;padding-left:100%;white-space:nowrap;animation:lobby-notice 60s linear infinite}
@keyframes lobby-notice{0%{transform:translateX(0)}68%,100%{transform:translateX(-100%)}}
.lobby-announcement:hover .announcement-track{animation-play-state:paused}
.lobby-disclaimer{font-size:12px;line-height:1.7;color:var(--text-soft);text-align:center;border-top:1px solid var(--line);padding:20px 8px;margin-top:24px}
.gameplay-setting,.gameplay-help{flex-basis:100%;min-width:0}
.play-confirmation{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px;margin:8px 0;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
.play-confirmation>span{flex:1 0 100%;font-weight:600}
.deck-image-dialog{width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}
.deck-image-dialog::backdrop{background:var(--overlay)}
.deck-image-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-16px;background:var(--surface);padding:10px 0}
.deck-image-dialog img{display:block;width:100%;height:auto;margin-top:12px}
.deck-image-dialog .image-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.deck-image-import{font-size:12px;color:var(--text-soft);line-height:1.7}
/* The independent table spends its viewport on cards and actions. */
body[data-battle-window="true"].screen-game .app-nav,
body[data-battle-window="true"].screen-game .topbar { display:none }
body[data-battle-window="true"].screen-game .app { padding:6px;height:100dvh }
body[data-battle-window="true"].screen-game .game-screen { padding-top:0 }
.battle-controls { display:flex;flex-wrap:wrap;align-items:center;gap:5px;flex:none;position:sticky;top:0;z-index:5;background:var(--surface);padding-bottom:5px }
.battle-controls button { font-size:12px;min-height:30px;padding:4px 7px }
.battle-controls .match-clock { margin:0 }
/* Native details has an anonymous content box: give the log its own bounded scroll area. */
.screen-game #logPanel[open] { display:block;flex:1 0 260px;min-height:260px;max-height:420px;overflow:hidden;position:relative }
.screen-game #logPanel>summary { height:42px;box-sizing:border-box }
.screen-game #logPanel>.panel-content { position:absolute;inset:42px 0 0;display:flex;flex-direction:column;min-height:0;overflow:hidden }
.screen-game #logPanel .panel-head { display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start }
.screen-game #logPanel .panel-head button { min-height:30px;font-size:12px;padding:4px 7px }
.screen-game #logPanel #logList { flex:1 1 0;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding-bottom:12px }
@media (max-width:900px), (max-width:1180px) and (max-height:600px) {
  .battle-controls { display:none }
  body[data-battle-window="true"].screen-game .mobile-toolbar { position:static;order:3;width:100%;height:auto;flex-wrap:nowrap;overflow-x:auto }
  body[data-battle-window="true"].screen-game .mobile-toolbar button { flex:1 0 auto;min-width:38px }
  body[data-battle-window="true"].screen-game .hand-panel .panel-head .match-clock { margin-left:auto;flex:none }
  body.screen-game .side-column>#logPanel.mobile-sheet-open { height:min(560px,75dvh);min-height:0;max-height:calc(100dvh - 60px);flex:none;overflow:hidden }
  body.screen-game #logPanel.mobile-sheet-open>.panel-content { position:absolute;inset:96px 14px 14px;padding:0;min-height:0;overflow:hidden }
  .screen-game #logPanel.mobile-sheet-open>.mobile-drawer-close { flex:none;margin-bottom:4px }
  .screen-game #logPanel.mobile-sheet-open>summary { flex:none;height:auto }
  .screen-game #logPanel.mobile-sheet-open #logList { min-height:0;max-height:none }
}
@media(prefers-reduced-motion:reduce){.announcement-track{animation:none;padding:0 12px;white-space:normal;width:auto}}