/* One tonal system per theme: neutral surfaces, restrained anime accents. */
:root[data-palette=twilight]{--bg:#11131d;--panel:#1c202d;--panel2:#272c3b;--input:#161a26;--line:#363d50;--accent:#b2a6dc;--accentInk:#221d32;--yellow:#dfc8a0;--ink:#f1f2f8;--muted:#aab1c3;--motif-angle:135deg}
:root[data-palette=leaf]{--bg:#121916;--panel:#1e2923;--panel2:#2a3830;--input:#18211c;--line:#3b4c41;--accent:#a5c4aa;--accentInk:#1a3021;--yellow:#dfc49d;--ink:#eff4ee;--muted:#aebcaf;--motif-angle:45deg}
:root[data-palette=tide]{--bg:#111a22;--panel:#1c2a35;--panel2:#293945;--input:#17232d;--line:#3a4f5d;--accent:#9fc5d0;--accentInk:#19313c;--yellow:#dfc3a3;--ink:#eff5f8;--muted:#afbec8;--motif-angle:165deg}
:root[data-palette=ki]{--bg:#19181c;--panel:#27252c;--panel2:#353139;--input:#201e24;--line:#4b444e;--accent:#dcb18c;--accentInk:#382719;--yellow:#e3c6a2;--ink:#f6f0eb;--muted:#bfb4b0;--motif-angle:115deg}
:root[data-theme=light][data-palette=twilight]{--bg:#f0f1f6;--panel:#fcfcff;--panel2:#e9ebf3;--input:#f4f5fa;--line:#d3d7e4;--accent:#65558f;--accentInk:#fff;--yellow:#e5cdac;--ink:#282d40;--muted:#646d83}
:root[data-theme=light][data-palette=leaf]{--bg:#eff3ed;--panel:#fcfdf9;--panel2:#e6ede3;--input:#f3f6f0;--line:#cedacb;--accent:#42674c;--accentInk:#fff;--yellow:#e4ccab;--ink:#2a382d;--muted:#657564}
:root[data-theme=light][data-palette=tide]{--bg:#eef3f5;--panel:#fbfdfe;--panel2:#e3edf1;--input:#f2f7f9;--line:#cbdbe1;--accent:#39697a;--accentInk:#fff;--yellow:#e6cfb3;--ink:#283e49;--muted:#607784}
:root[data-theme=light][data-palette=ki]{--bg:#f5f1ed;--panel:#fffdf9;--panel2:#eee6de;--input:#f8f4ef;--line:#dfd2c7;--accent:#845636;--accentInk:#fff;--yellow:#e8cfaf;--ink:#42342f;--muted:#7b6d65}
:root[data-palette]{--accent-soft:color-mix(in srgb,var(--accent) 11%,transparent);--yellowInk:#352c24;--warning:var(--yellow);--green:#98d0af;--red:#eda7b2;--shadow:0 7px 24px #00000013;--surface-shadow:0 12px 34px #00000015;--button-shadow:0 2px 4px #00000020}
:root[data-theme=light][data-palette]{--green:#286c49;--red:#a23950;--warning:#805b2e;--shadow:0 7px 24px #1c252608;--surface-shadow:0 12px 34px #1c252609;--button-shadow:0 2px 4px #33281912}
body{background:radial-gradient(ellipse at 12% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 52%),var(--bg)}
body:before{background:repeating-linear-gradient(var(--motif-angle),transparent 0 190px,color-mix(in srgb,var(--accent) 3%,transparent) 191px 192px,transparent 193px 370px);opacity:.65}
.panel,.home-play,.home-how{border-width:1px;box-shadow:var(--surface-shadow)}
.home-play,:root[data-theme=light] .home-play{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 4%,var(--panel)),var(--panel) 70%)}
.home-title h1,:root[data-theme=light] .home-title h1{text-shadow:none}
.home-title h1>span,:root[data-theme=light] .home-title h1>span{color:var(--accent)}
.home-seal{border-color:color-mix(in srgb,var(--accent) 70%,var(--panel));color:var(--accentInk);box-shadow:var(--button-shadow)}
.brand-mark{box-shadow:var(--button-shadow)}
.button{border-color:color-mix(in srgb,var(--accentInk) 12%,transparent);box-shadow:var(--button-shadow)}
.primary{background:var(--yellow);color:var(--yellowInk)}.accent{background:var(--accent);color:var(--accentInk)}
.home-actions>.button{border-width:1px;border-color:color-mix(in srgb,var(--accentInk) 12%,transparent)}
.home-actions .button>.home-action-icon{background:color-mix(in srgb,currentColor 8%,transparent);border-color:color-mix(in srgb,currentColor 12%,transparent)}
.profile-picker,:root[data-theme=light] .profile-picker{box-shadow:0 0 0 5px var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 70%,var(--line))}
.profile-picker .avatar-edit,.winner-point{color:var(--yellowInk)}
.portrait-question{color:var(--yellowInk);box-shadow:var(--button-shadow)}
.character-card.selected{box-shadow:0 0 0 1px var(--accent-soft)}
.match-player.active-player{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.turn-ribbon{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));border-left-color:var(--accent)}
.turn-ribbon.your-turn{border-color:color-mix(in srgb,var(--green) 38%,var(--line));border-left-color:var(--green)}
.final-spark,:root[data-theme=light] .final-spark{background:color-mix(in srgb,var(--yellow) 9%,var(--panel));border-color:color-mix(in srgb,var(--yellow) 30%,var(--line));color:var(--warning)}
.winning-rule{border-color:color-mix(in srgb,var(--yellow) 50%,var(--line))}
:root[data-theme=light] .winner-point{color:var(--yellowInk)}
:root[data-theme=light] #final.is-winner>.heading h1,:root[data-theme=light] .home-how li>b,:root[data-theme=light] .lobby-code,:root[data-theme=light] .room-score{color:var(--warning)}
.candidate-badge{background:var(--yellow);color:var(--yellowInk)}
:root[data-palette] .notice,:root[data-palette] .match-notice,:root[data-palette] .preparation-clock.overdue,:root[data-palette] .rule-analysis .analysis-warning,:root[data-palette] .received-clue small{color:var(--warning)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline-color:var(--accent)}
dialog{box-shadow:0 24px 90px #00000040}dialog::backdrop{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(5px)}
.theme-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.theme-choice{position:relative;padding:10px;text-align:left;background:var(--input);border:1px solid var(--line);border-radius:15px;color:var(--ink);transition:border-color .15s,background .15s}
.theme-choice:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.theme-choice.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.theme-choice strong{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin:12px 3px 4px}
.theme-choice strong:after{content:'✓';display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;font-size:10px;color:transparent}
.theme-choice.selected strong:after{background:var(--accent);border-color:var(--accent);color:var(--accentInk)}
.theme-choice small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin:0 3px 4px}
.swatch-twilight{--preview-bg:#11131d;--preview-panel:#1c202d;--preview-accent:#b2a6dc;--preview-gold:#dfc8a0}
.swatch-leaf{--preview-bg:#121916;--preview-panel:#1e2923;--preview-accent:#a5c4aa;--preview-gold:#dfc49d}
.swatch-tide{--preview-bg:#111a22;--preview-panel:#1c2a35;--preview-accent:#9fc5d0;--preview-gold:#dfc3a3}
.swatch-ki{--preview-bg:#19181c;--preview-panel:#27252c;--preview-accent:#dcb18c;--preview-gold:#e3c6a2}
:root[data-theme=light] .swatch-twilight{--preview-bg:#f0f1f6;--preview-panel:#fcfcff;--preview-accent:#65558f;--preview-gold:#e5cdac}
:root[data-theme=light] .swatch-leaf{--preview-bg:#eff3ed;--preview-panel:#fcfdf9;--preview-accent:#42674c;--preview-gold:#e4ccab}
:root[data-theme=light] .swatch-tide{--preview-bg:#eef3f5;--preview-panel:#fbfdfe;--preview-accent:#39697a;--preview-gold:#e6cfb3}
:root[data-theme=light] .swatch-ki{--preview-bg:#f5f1ed;--preview-panel:#fffdf9;--preview-accent:#845636;--preview-gold:#e8cfaf}
.theme-choice .palette-swatch{position:relative;display:grid;grid-template-columns:1fr 1.4fr;gap:9px;align-items:center;height:104px;padding:22px 14px 12px;border:1px solid color-mix(in srgb,var(--preview-accent) 18%,var(--preview-bg));border-radius:9px;background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--preview-accent) 10%,transparent),transparent 75%),var(--preview-bg);overflow:hidden;color:var(--preview-accent)}
.palette-swatch:before{content:'';position:absolute;top:11px;left:14px;width:24px;height:3px;border-radius:3px;background:var(--preview-accent);opacity:.6}
.theme-symbol{display:grid;place-items:center;position:relative;width:52px;height:52px;border-radius:16px;background:var(--preview-panel);border:1px solid color-mix(in srgb,var(--preview-accent) 18%,transparent)}
.theme-symbol svg{width:30px;height:30px;opacity:.9}
.theme-mini{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:11px;border-radius:8px;background:var(--preview-panel);border:1px solid color-mix(in srgb,var(--preview-accent) 15%,transparent)}
.theme-mini i{display:block;height:4px;border-radius:4px;background:var(--preview-accent);opacity:.35}.theme-mini i:first-child{grid-column:1/-1;width:70%;opacity:.7}.theme-mini b{height:14px;background:var(--preview-accent);border-radius:4px;opacity:.9}.theme-mini b:last-child{background:var(--preview-gold)}
.ready-player.is-ready>b{color:#183021}:root[data-theme=light] .ready-player.is-ready>b{color:#fff}
@media(max-width:480px){.theme-choices{gap:10px}.palette-swatch{height:92px!important;padding:22px 10px 11px;gap:6px;grid-template-columns:36px 1fr}.theme-symbol{width:36px;height:42px;border-radius:11px}.theme-symbol svg{width:25px;height:25px}.theme-mini{padding:7px;gap:5px}.theme-mini b{height:11px}.theme-choice{padding:8px}.theme-choice small{font-size:9px}}
.timer-options{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:18px;min-width:0;grid-column:1/-1}.timer-options legend{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--accent);padding:0 6px}.timer-options legend .ui-icon{width:15px;height:15px}.timer-options legend small{font-size:9px;color:var(--muted);font-weight:400}.timer-options>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.timer-options label{font-size:9px!important;margin:0!important;line-height:1.5}.timer-options select{font-size:11px!important;margin-top:7px!important;padding:9px 7px!important}.timer-options>p{font-size:9px;color:var(--muted);line-height:1.6;margin-top:12px}.creation-options .timer-options{margin-top:16px}.admin-tools{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:15px;font-size:11px}.admin-tools #currentHost{display:flex;align-items:center;gap:7px;color:var(--muted)}.admin-tools .ui-icon{width:16px;height:16px;color:var(--yellow)}.admin-tools .text-button{font-size:10px}.host-crown{display:inline-flex;align-items:center;vertical-align:middle;margin-left:7px;color:var(--yellow)}.host-crown .ui-icon{width:17px;height:17px}
.readiness-board{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}.ready-player{display:flex;align-items:center;gap:9px;min-width:135px;flex:1;max-width:290px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:12px;color:var(--muted)}.ready-player>.portrait-wrap{width:32px;height:37px;border-radius:9px;flex:none}.ready-player>span:not(.portrait-wrap){flex:1;min-width:0;overflow-wrap:anywhere}.ready-player>b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--panel2);font-weight:800}.ready-player.is-ready{border-color:color-mix(in srgb,var(--green) 55%,var(--line));background:color-mix(in srgb,var(--green) 9%,var(--panel));color:var(--ink)}.ready-player.is-ready>b{background:var(--green);color:#143123}.ready-player .ui-icon{width:16px;height:16px}.lobby-player.player-ready{color:var(--green)}.lobby-player.player-ready small{color:var(--green);font-weight:800}.my-ready-state{font-size:11px;color:var(--green);border:1px solid var(--green);border-radius:10px;padding:12px;line-height:1.6}.cast-footer:has(.my-ready-state:not(.hidden)){flex-wrap:wrap}.cast-footer .my-ready-state{flex-basis:100%;width:100%}.next-round-readiness{margin:20px 0 30px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.next-round-readiness>p{font-size:12px;font-weight:750;margin-bottom:13px}.next-round-readiness>div{display:flex;flex-wrap:wrap;gap:10px}.next-round-readiness .ready-player{max-width:none}
.match-clock{display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--input);border:1px solid var(--line);color:var(--muted);padding:8px 14px;margin:0 auto 13px;width:max-content;max-width:100%;font-size:11px;font-variant-numeric:tabular-nums;font-weight:700}.match-clock.urgent{border-color:var(--red);color:var(--red)}.match-notice{padding:10px 14px;color:var(--yellow);font-size:11px;border-left:2px solid var(--yellow);background:var(--panel);border-radius:8px;margin-bottom:15px}.preparation-clock{font-size:12px;color:var(--accent);margin:0 0 16px;font-variant-numeric:tabular-nums}.preparation-clock.overdue{color:var(--yellow);font-size:11px;line-height:1.6}.rule-only-notice{display:flex;align-items:center;gap:11px;color:var(--green);font-size:12px;font-weight:700;padding:17px;background:color-mix(in srgb,var(--green) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--green) 40%,var(--line));border-radius:12px;margin-bottom:20px}.rule-only-notice .ui-icon{width:21px;height:21px}#mine .online-rule-form{margin-top:14px}.owner-clue-tools{border-bottom:1px solid var(--line);padding-bottom:12px;margin-top:12px}.owner-clue-tools .text-button{display:flex;align-items:center;gap:7px;font-size:11px}.owner-clue-tools .ui-icon{width:16px;height:16px}.owner-clue-tools .fine-print{font-size:9px;margin:5px 0 0}.owner-clue-tools .clue-used{color:var(--green);opacity:.75}.received-clue{border:1px solid var(--yellow);background:color-mix(in srgb,var(--yellow) 7%,var(--panel));padding:14px;border-radius:12px;margin:5px 0 20px}.received-clue small{font-size:8px;letter-spacing:1px;color:var(--yellow);font-weight:800}.received-clue p{font-size:13px;line-height:1.6;margin-top:8px;overflow-wrap:anywhere}
.chat-launcher{position:fixed;right:22px;bottom:22px;z-index:35;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:12px 15px;border-radius:15px;box-shadow:0 6px 25px #0003;font-size:12px;font-weight:700}.chat-launcher .ui-icon{width:20px;height:20px}.chat-launcher b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:#342b1f;font-size:9px}.room-chat{position:fixed;z-index:40;right:22px;bottom:82px;width:min(370px,calc(100% - 28px));height:min(480px,calc(100vh - 125px));display:flex;flex-direction:column;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:0 15px 60px #0006;overflow:hidden}.room-chat>header{display:flex;align-items:center;gap:12px;padding:15px;border-bottom:1px solid var(--line)}.room-chat>header>div{flex:1}.room-chat strong{display:block;font-size:13px}.room-chat>header small{display:block;font-size:9px;color:var(--muted);margin-top:5px}.room-chat>header .icon-button{width:29px;height:29px;padding:6px}.chat-messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:15px}.chat-empty{font-size:12px;color:var(--muted);text-align:center;margin:25px 0}.chat-message{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px}.chat-avatar .portrait-wrap{width:28px;height:32px;border-radius:8px}.chat-message>div{flex:1;min-width:0}.chat-message strong{color:var(--accent);font-size:10px;margin-bottom:4px}.chat-message p{font-size:12px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap;background:var(--input);border:1px solid var(--line);padding:9px 11px;border-radius:0 10px 10px}.my-message p{background:var(--accent-soft)}.room-chat>form{display:grid;grid-template-columns:minmax(0,1fr) 37px;gap:8px;padding:12px;border-top:1px solid var(--line)}.room-chat>form input{font-size:12px;padding:9px}.room-chat>form .status{grid-column:1/-1;margin:0;font-size:10px}.room-chat .status:empty{display:none}
.rule-analysis{font-size:10px;background:var(--input);border-left:2px solid var(--accent);border-radius:8px;padding:10px;margin:10px 0}.rule-analysis small,.phrase-preset small{font-size:8px;font-weight:800;letter-spacing:.8px;color:var(--accent)}.rule-analysis p{line-height:1.6;overflow-wrap:anywhere;margin-top:5px}.rule-analysis .analysis-warning{color:var(--yellow)}.rule-analysis .analysis-note{color:var(--muted);font-size:9px}.phrase-keyword{padding:4px 8px;background:var(--input);border:1px solid var(--line);color:var(--accent);font-size:9px;border-radius:12px}.phrase-preset{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;background:var(--input);border:1px solid var(--accent);border-radius:12px;margin:18px 0}.phrase-preset>div{min-width:0}.phrase-preset p{font-size:14px;overflow-wrap:anywhere;margin:6px 0}.phrase-preset span{display:block;font-size:10px;line-height:1.6;color:var(--muted)}.phrase-preset .button{white-space:nowrap;font-size:11px;flex:none}
.lobby-player:not(.player-ready) small{color:var(--muted)}.rule-stage #onlineRuleForm{border-top:0;margin-top:8px;padding-top:0}.rule-stage #onlineRuleForm label{display:none}.rule-stage .rule-only-notice{margin-bottom:15px}
.room-time-settings{font-size:11px;color:var(--muted);line-height:1.8;margin-top:9px}.my-match-route{font-size:11px;color:var(--muted);line-height:1.7;margin:-5px 0 16px;padding:0 3px;overflow-wrap:anywhere}.private-rule-owner{color:var(--accent);font-size:9px;letter-spacing:.9px;font-weight:750;margin:19px 0 -13px;overflow-wrap:anywhere}.cola-challenge-context{font-size:10px;color:var(--muted);line-height:1.7;border-left:2px solid var(--accent);padding-left:9px;margin:10px 0 4px;overflow-wrap:anywhere}.duel-heading{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:17px;border-bottom:1px solid var(--line)}.duel-heading>div{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.duel-heading>div>.portrait-wrap{width:36px;height:41px;border-radius:10px;flex:none}.duel-heading>div>span:not(.portrait-wrap){min-width:0}.duel-heading small{display:block;font-size:8px;color:var(--muted);letter-spacing:1px;font-weight:650;margin-bottom:3px}.duel-heading strong{display:block;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.duel-heading em{font-style:normal;font-size:8px;color:var(--accent);border:1px solid var(--line);border-radius:5px;padding:1px 4px;white-space:nowrap;font-weight:650;margin-left:3px}.duel-direction{display:grid;place-items:center;flex:none;color:var(--accent)}.duel-direction .ui-icon{width:19px;height:19px}.log-title h3{overflow-wrap:anywhere;line-height:1.7}.guess-log{max-height:210px;overflow:auto;overscroll-behavior:contain;align-content:flex-start}.log-chip.pending{color:var(--muted);border-style:dashed}.preparation-clock{display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;margin:0 auto 14px;padding:9px 15px;background:var(--input);border:1px solid var(--line);border-radius:10px;text-align:center;line-height:1.6;font-size:11px;font-weight:650}.match-clock.urgent,.preparation-clock.urgent{color:var(--red);border-color:var(--red);animation:countdown-pulse 1s ease-in-out infinite}.preparation-clock.overdue{border-color:color-mix(in srgb,var(--yellow) 45%,var(--line))}@keyframes countdown-pulse{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 10%,transparent)}}
@media(max-width:760px){.duel-heading{gap:9px;margin-bottom:14px;padding-bottom:14px}.duel-heading>div{gap:7px}.duel-heading>div>.portrait-wrap{width:29px;height:34px;border-radius:8px}.duel-heading strong{font-size:11px}.duel-heading small{font-size:7px;letter-spacing:.6px}.duel-heading em{display:inline-block;font-size:7px;margin-left:0}.duel-direction .ui-icon{width:15px;height:15px}.my-match-route{font-size:10px}.room-time-settings{font-size:10px}.match-clock{font-size:10px;white-space:normal;text-align:center}}
@media(max-width:760px){.timer-options>div{grid-template-columns:1fr}.timer-options label{font-size:11px!important}.timer-options select{font-size:12px!important}.readiness-board{gap:7px}.ready-player{min-width:125px;max-width:none;padding:9px;font-size:10px}.ready-player>.portrait-wrap{width:26px;height:30px}.ready-player>b{width:21px;height:21px}.admin-tools{font-size:10px;gap:9px}.chat-launcher{right:14px;bottom:14px;padding:11px 13px}.room-chat{right:14px;bottom:72px;height:min(450px,calc(100vh - 115px))}.phrase-preset{flex-direction:column;align-items:stretch;gap:12px}.phrase-preset .button{width:100%}.theme-choice strong{font-size:12px}.theme-choice small{font-size:9px}.palette-swatch{height:52px}.rule-only-notice{font-size:11px;padding:13px}.next-round-readiness{padding:15px}.my-ready-state{font-size:10px}}
