/* Eleven visual skins. Grid geometry, hit targets and game rules stay in their original files. */
:root[data-theme]{
 --display-font:'Outfit','Pretendard',sans-serif;--display-weight:800;--title-tracking:-4px;
 --bg:#07131f;--panel:#122536;--line:#345365;--muted:#a0b8c6;--text:#ecf8ff;--lime:#8eecde;
 --accent-ink:#092833;--surface:rgba(12,29,43,.87);--surface-strong:#122a3b;--surface-soft:rgba(22,49,65,.7);
 --board-edge:#70bcbf;--board-shadow:0 0 0 4px #1b3c4b,0 0 35px #56d9df24,0 22px 64px #0008;
 --radius:12px;--button-radius:8px;--shadow:0 10px 35px #0002;--overlay:rgba(6,20,33,.91);--art:url('/assets/themes/aurora.webp');
 --art-opacity:.64;--art-wash:linear-gradient(90deg,#07131f55,#07131f15 40%,#07131f85);--rival:#fa849a;
 --title-shadow:0 2px 25px #8debd52b;--button-shadow:inset 0 1px 0 #fff8,0 0 20px #8eecde20;
 color-scheme:dark;
}
:root[data-theme="paper"]{
 --bg:#f0ede4;--panel:#e9e4d8;--line:#c1beb3;--muted:#66655e;--text:#191d1c;--lime:#d94227;
 --accent-ink:#fff9ef;--surface:#f6f2e9;--surface-strong:#e7e0d2;--surface-soft:#f7f3eabf;
 --board-edge:#262b29;--board-shadow:4px 5px 0 #242b2926;--radius:0px;--button-radius:0px;--shadow:none;--overlay:#f2eee3ed;
 --art:none;--art-opacity:1;--art-wash:repeating-linear-gradient(0deg,#242b2903 0px,#242b2903 1px,transparent 1px,transparent 4px);
 --display-weight:900;--title-tracking:-5px;--rival:#335ab8;--title-shadow:none;--button-shadow:none;color-scheme:light;
}
:root[data-theme="obsidian"]{
 --bg:#100f0e;--panel:#211e19;--line:#4c4231;--muted:#b8a98b;--text:#f2e6c7;--lime:#ddbd79;
 --accent-ink:#241b0e;--surface:#191713e3;--surface-strong:#282219;--surface-soft:#241e15b0;
 --board-edge:#a8905b;--board-shadow:0 0 0 3px #32291a,0 0 0 4px #856b3a66,0 25px 70px #0009;
 --radius:2px;--button-radius:1px;--shadow:0 12px 35px #0004;--overlay:#15120eeb;--art:url('/assets/themes/obsidian.webp');
 --art-opacity:.76;--art-wash:linear-gradient(90deg,#100e0c66,#100e0c22,#100e0c99);
 --display-font:Georgia,'Times New Roman','Pretendard',serif;--display-weight:400;--title-tracking:6px;--rival:#d78994;
 --title-shadow:0 2px 24px #e8bd5f22;--button-shadow:inset 0 1px 0 #ffe2a5a3;
}
:root[data-theme="chrome"]{
 --bg:#e8edf1;--panel:#dbe2e8;--line:#a6b4c3;--muted:#536576;--text:#111c2a;--lime:#0664ed;
 --accent-ink:#fff;--surface:#f0f5f8dc;--surface-strong:#cfdae4;--surface-soft:#e8eff6c9;
 --board-edge:#879eae;--board-shadow:0 0 0 3px #f5fbff,0 0 0 4px #91a4b5,0 20px 45px #33465d38;
 --radius:3px;--button-radius:2px;--shadow:0 8px 24px #42668818;--overlay:#edf4f9ef;--art:url('/assets/themes/chrome.webp');
 --art-opacity:.86;--art-wash:linear-gradient(90deg,#e8edf122,#e8edf100,#e8edf166);--display-weight:900;--title-tracking:-5px;
 --rival:#c33068;--title-shadow:0 2px 0 #fff;--button-shadow:inset 0 1px 0 #7ca8ff;color-scheme:light;
}
:root[data-theme="soft"]{
 --bg:#f5ebdb;--panel:#ede0d0;--line:#d1bead;--muted:#796570;--text:#493d51;--lime:#9a749f;
 --accent-ink:#fff9ff;--surface:#fff6e9df;--surface-strong:#ebdcec;--surface-soft:#fbf2e7de;
 --board-edge:#bfa0c6;--board-shadow:0 0 0 5px #dfc9e3,0 0 0 7px #bda1c3,0 15px 25px #72526f27;
 --radius:20px;--button-radius:16px;--shadow:4px 7px 13px #a78c7430,inset 1px 2px 0 #fff9;--overlay:#fbf1e5ed;
 --art:url('/assets/themes/soft.webp');--art-opacity:.86;--art-wash:linear-gradient(90deg,#f5ebdb25,#f5ebdb05,#f5ebdb55);
 --display-weight:800;--title-tracking:-4px;--rival:#bd6878;--title-shadow:0 3px 0 #fff8;--button-shadow:inset 0 3px 0 #fff5,0 4px 0 #795e80;color-scheme:light;
}
:root[data-theme="jade"]{
 --bg:#edeadf;--panel:#e0dfd0;--line:#b8beaa;--muted:#65705e;--text:#273f30;--lime:#4b7657;
 --accent-ink:#f8f6e9;--surface:#f4f2e8df;--surface-strong:#dde3d0;--surface-soft:#f1f0e4c9;
 --board-edge:#87967c;--board-shadow:0 0 0 4px #dddcca,0 0 0 5px #a8ac94,0 16px 40px #4f61492b;
 --radius:4px;--button-radius:2px;--shadow:0 10px 30px #52664c12;--overlay:#eeeee0ee;--art:url('/assets/themes/jade.webp');
 --art-opacity:.88;--art-wash:linear-gradient(90deg,#edeadf30,#edeadf00,#edeadf50);--display-font:Georgia,'Times New Roman','Pretendard',serif;
 --display-weight:400;--title-tracking:1px;--rival:#a3644c;--title-shadow:none;--button-shadow:inset 0 1px 0 #a1bd98;color-scheme:light;
}
:root[data-theme="noir"]{
 --bg:#0f151c;--panel:#1c252d;--line:#544837;--muted:#b6aea0;--text:#f9e5bf;--lime:#e5ad55;
 --accent-ink:#231b0e;--surface:#111c27eb;--surface-strong:#303239;--surface-soft:#16222dde;
 --board-edge:#b6894e;--board-shadow:0 0 0 3px #37301f,0 0 24px #eda34114,0 25px 70px #000b;
 --radius:2px;--button-radius:1px;--shadow:0 12px 32px #0004;--overlay:#101923ed;--art:url('/assets/themes/noir.webp');
 --art-opacity:.83;--art-wash:linear-gradient(90deg,#0b11175c,#0b111700,#0b111777);--display-font:'Arial Narrow','Outfit',sans-serif;
 --display-weight:800;--title-tracking:-4px;--rival:#ea819d;--title-shadow:0 0 25px #e5ad5533;--button-shadow:inset 0 1px 0 #ffe4a0;
}
:root[data-theme="ocean"]{
 --bg:#03182b;--panel:#082b47;--line:#255574;--muted:#9cc8de;--text:#e7f7ff;--lime:#8ae7fb;
 --accent-ink:#082941;--surface:#052b47dc;--surface-strong:#11476a;--surface-soft:#08324be0;
 --board-edge:#81c7e5;--board-shadow:0 0 0 3px #1b526e,0 0 40px #5fcaff36,0 22px 54px #00101a66;
 --radius:14px;--button-radius:28px;--shadow:0 8px 35px #00294440;--overlay:#06263de8;--art:url('/assets/themes/ocean.webp');
 --art-opacity:.83;--art-wash:linear-gradient(90deg,#03182b44,#03182b11,#03182b66);--display-font:Georgia,'Times New Roman','Pretendard',serif;
 --display-weight:400;--title-tracking:5px;--rival:#c3a2ff;--title-shadow:0 0 24px #88ddff44;--button-shadow:inset 0 1px 0 #e4ffff,0 0 24px #8ae7fb3a;
}
:root[data-theme="kinetic"]{
 --bg:#f36520;--panel:#edeee5;--line:#1c2422;--muted:#31372e;--text:#131e1c;--lime:#171f1e;
 --accent-ink:#fff5dc;--surface:#f6f0df;--surface-strong:#e4ddcb;--surface-soft:#fae6c3;
 --board-edge:#14221e;--board-shadow:6px 6px 0 #15221f;--radius:0px;--button-radius:0px;--shadow:none;--overlay:#f8f0deed;
 --art:none;--art-opacity:1;--art-wash:linear-gradient(115deg,transparent 64%,#1b252221 64.1%,#1b252221 64.3%,transparent 64.4%);
 --display-weight:900;--title-tracking:-5px;--rival:#1648b9;--title-shadow:none;--button-shadow:3px 3px 0 #f1ce99;color-scheme:light;
}
:root[data-theme="arena"]{
 --bg:#080e23;--panel:#13233b;--line:#304b74;--muted:#a7bbd9;--text:#eff6ff;--lime:#6dbdff;
 --accent-ink:#0b1d3a;--surface:#0d1a31e6;--surface-strong:#1b3558;--surface-soft:#102544db;
 --board-edge:#44adff;--board-shadow:0 0 0 3px #17467a,0 0 28px #298dff44,0 22px 50px #0007;
 --radius:3px;--button-radius:2px;--shadow:0 5px 25px #00184050;--overlay:#0b1933ed;--art:url('/assets/themes/arena.webp');
 --art-opacity:.8;--art-wash:linear-gradient(90deg,#080e2344,#080e2311,#080e2377);--display-weight:800;--title-tracking:-3px;
 --rival:#ff6e88;--title-shadow:0 0 18px #94cbff44;--button-shadow:inset 0 1px 0 #d1f3ff,0 0 20px #3c9bff3b;
}
:root[data-theme="resonance"]{
 --bg:#020711;--panel:#071421;--line:#b6d6e538;--muted:#aec5d5;--text:#eff8ff;--lime:#d3f1f8;
 --accent-ink:#082332;--surface:#071522c9;--surface-strong:#0b2032;--surface-soft:#15334870;
 --board-edge:#daedf3ad;--board-shadow:0 0 0 1px #04101b55,0 0 30px #b0e4f405;
 --radius:0px;--button-radius:2px;--shadow:none;--overlay:linear-gradient(#010812ad,#010911ed 48%,#010812b8);
 --art:none;--art-opacity:1;--art-wash:radial-gradient(ellipse at 50% 50%,transparent 35%,#01040aaa 100%);
 --display-font:'Outfit','Pretendard',sans-serif;--display-weight:400;--title-tracking:2px;--rival:#dbbad8;
 --title-shadow:none;--button-shadow:none;color-scheme:dark;
}
html[data-theme] body{background:var(--bg);color:var(--text);isolation:isolate}
html[data-theme] .ambient{z-index:-1;background-image:var(--art-wash),var(--art);background-size:cover;background-position:center;opacity:var(--art-opacity);contain:paint}
html[data-theme] .ambient:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent 30%,var(--bg) 130%);opacity:.55}
html[data-theme] .site-header{border-color:var(--line)}
html[data-theme] .icon-button,html[data-theme] .solo-link{color:var(--text)}
html[data-theme] .icon-button:hover,html[data-theme] .text-button:hover{color:var(--lime)}
html[data-theme] .brand-divider{background:var(--line)}
html[data-theme] .brand-mark i:first-child{background:var(--text)}
html[data-theme] h1{font-family:var(--display-font);font-weight:var(--display-weight);letter-spacing:var(--title-tracking);text-shadow:var(--title-shadow)}
html[data-theme] .intro h2{font-weight:500}
html[data-theme] .battle-heading h1{font-family:'Pretendard',sans-serif;font-weight:650;letter-spacing:-1px;text-shadow:none}
html[data-theme] .eyebrow,html[data-theme] .section-label{color:var(--muted)}
html[data-theme] .intro-copy,html[data-theme] .mode-section p,html[data-theme] .art-caption,html[data-theme] .personal-best div span,
html[data-theme] .best-unit,html[data-theme] .board-topline,html[data-theme] .board-topline>span:last-child,html[data-theme] .board-bottomline,
html[data-theme] .score-caption,html[data-theme] .level-caption,html[data-theme] .section-label>span:not(.small-cross),html[data-theme] .hold-caption,
html[data-theme] .time-card>span:last-child,html[data-theme] .footer,html[data-theme] .help-note,html[data-theme] .setting-row small,
html[data-theme] .mode-hint{color:var(--muted)}
html[data-theme] .footer b,html[data-theme] .board-bottomline button{color:var(--text)}
html[data-theme] .mode-tabs{background:var(--panel);border-color:var(--line);border-radius:var(--radius)}
html[data-theme] .mode-tabs button{color:var(--muted);border-radius:var(--button-radius)}
html[data-theme] .mode-tabs button.selected{background:var(--surface-strong);color:var(--text);box-shadow:inset 0 0 0 1px var(--lime)}
html[data-theme] .battle-link{background:var(--panel);border-color:var(--line);color:var(--text);border-radius:var(--button-radius)}
html[data-theme] .mode-section p,html[data-theme] .personal-best{text-shadow:0 1px 3px var(--bg),0 0 6px var(--bg)}
html[data-theme] .board-frame,html[data-theme] .duel-board{border-color:var(--board-edge);box-shadow:var(--board-shadow);border-radius:var(--radius);background:var(--panel)}
html[data-theme] .board-edge{border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff55,inset 1px 0 0 #ffffff18}
html[data-theme] .board-overlay,html[data-theme] .battle-overlay{background:var(--overlay)}
html[data-theme] .overlay-content h2{font-family:var(--display-font);font-weight:var(--display-weight);color:var(--text)}
html[data-theme] .overlay-kicker,html[data-theme] .overlay-content p,html[data-theme] .start-hint{color:var(--muted)}
html[data-theme] .primary-button{background:var(--lime);color:var(--accent-ink);border-radius:var(--button-radius);box-shadow:var(--button-shadow)}
html[data-theme] .primary-button:hover{background:var(--lime);filter:brightness(1.08)}
html[data-theme] .secondary-button{color:var(--text);border-color:var(--line);border-radius:var(--button-radius);background:var(--surface-soft)}
html[data-theme] kbd{background:var(--surface-strong);color:var(--text);border-color:var(--line)}
html[data-theme] .score-card,html[data-theme] .piece-card{background:var(--surface);border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
html[data-theme] .score-card strong{color:var(--lime)}
html[data-theme] .metrics strong,html[data-theme] .personal-best strong{font-family:var(--display-font)}
html[data-theme] .level-track{background:var(--surface-strong)}
html[data-theme] .hold-card:hover{border-color:var(--lime)}
html[data-theme] .small-cross,html[data-theme] .personal-best svg{color:var(--lime)}
html[data-theme] .event-toast{color:var(--text);text-shadow:0 2px 8px var(--bg),0 0 20px var(--lime)}
html[data-theme] .score-card.pulse strong{animation-name:theme-scorepop}
html[data-theme] .modal{background:var(--surface);border-color:var(--line);border-radius:var(--radius);color:var(--text)}
html[data-theme] .modal p,html[data-theme] .dialog-close{color:var(--muted)}
html[data-theme] .help-note{color:var(--muted)!important}
html[data-theme] .touch-controls button,html[data-theme] .battle-touch button{background:var(--surface-strong);border-color:var(--line);color:var(--text);border-radius:var(--button-radius)}
html[data-theme] .touch-controls .drop-button,html[data-theme] .battle-touch .drop-button{background:var(--lime);border-color:var(--lime);color:var(--accent-ink)}
html[data-theme] .touch-controls button.pressed,html[data-theme] .battle-touch button.pressed{background:var(--lime);color:var(--accent-ink)}
html[data-theme] .battle-touch{background:var(--bg)}
html[data-theme] .battle-tag,html[data-theme] .room-card{border-color:var(--board-edge)}
html[data-theme] .battle-message{background:var(--surface);border-color:var(--line);color:var(--text)}
html[data-theme] .battle-message.error{border-color:var(--rival);color:var(--text)}
html[data-theme] .lobby-card,html[data-theme] .battle-previews>section,html[data-theme] .battle-previews>button{background:var(--surface);border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
html[data-theme] .lobby-card p,html[data-theme] .lobby-card label,html[data-theme] .text-button,html[data-theme] .battle-rules,
html[data-theme] .player-heading>span:last-child,html[data-theme] .battle-overlay>span,html[data-theme] .battle-overlay>p,
html[data-theme] .battle-stats span,html[data-theme] .battle-footnote{color:var(--muted)}
html[data-theme] .battle-rules summary,html[data-theme] .battle-overlay>strong{color:var(--text)}
html[data-theme] .join-row input,html[data-theme] #dev-login select{background:var(--surface-strong);border-color:var(--line);color:var(--text)}
html[data-theme] .join-row button{background:var(--lime);color:var(--accent-ink)}
html[data-theme] .rival-player .duel-board{border-color:var(--rival);box-shadow:0 0 0 3px var(--surface-strong),0 0 20px color-mix(in srgb,var(--rival) 16%,transparent)}
html[data-theme] .rival-player .player-label,html[data-theme] .incoming-stat strong{color:var(--rival)}
.theme-control{position:relative;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--button-radius);background:var(--surface);padding:0 10px;min-width:0;height:37px;color:var(--text);box-shadow:var(--shadow)}
.theme-control select{font:15px 'Pretendard',sans-serif;color:var(--text);background:transparent;appearance:none;border:0;padding:8px 19px 8px 0;width:144px;cursor:pointer;outline-offset:3px}
.theme-control option{background:var(--bg);color:var(--text)}
.theme-swatch{width:13px;height:13px;flex-shrink:0;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);border-radius:50%;background:linear-gradient(135deg,var(--lime) 0 49%,var(--rival) 51% 100%)}
.theme-chevron{position:absolute;right:11px;pointer-events:none;font-size:16px;top:6px}
.theme-number{margin-left:auto;font-family:monospace;font-size:13px;letter-spacing:1px;opacity:.7;white-space:nowrap}
html[data-theme] .art-frame{border-radius:var(--radius);isolation:isolate;background:none;box-shadow:none;margin-top:12px}
html[data-theme] .art-frame:after{position:absolute;content:'';pointer-events:none}
html[data-theme] .art-caption{display:none}
.theme-sculpture{display:none}
html[data-theme="paper"] .theme-sculpture,html[data-theme="kinetic"] .theme-sculpture{display:grid;grid-template-columns:repeat(3,35px);grid-template-rows:repeat(2,35px);gap:3px;position:absolute;left:30px;top:24px;transform:rotate(-8deg)}
.theme-sculpture i{background:var(--lime);box-shadow:inset 0 0 0 1px #fff2}
.theme-sculpture i:last-child{grid-column:2;background:var(--rival)}
html[data-theme="paper"] .art-frame,html[data-theme="kinetic"] .art-frame{box-shadow:none;border-bottom:1px solid var(--line)}
html[data-theme="paper"] .art-frame:after{background:repeating-linear-gradient(90deg,transparent 0 20px,#343d3322 20px 21px);height:40px;top:38px;left:165px;opacity:.3}
html[data-theme="kinetic"] .art-frame:after{inset:auto 0 20px auto;width:80px;height:60px;background:repeating-conic-gradient(#121d19 0 25%,#f8efd8 0 50%) 0/20px 20px;opacity:1}
html[data-theme="obsidian"] .intro h1{font-size:clamp(44px,4.4vw,63px)}
html[data-theme="ocean"] .intro h1{font-size:clamp(45px,4.6vw,65px)}
html[data-theme="noir"] .intro h1{font-style:italic;font-stretch:condensed}
html[data-theme="soft"] .theme-swatch{border-radius:4px}
html[data-theme="soft"] .overlay-symbol i{border-radius:4px}
html[data-theme="soft"] .intro h1{color:#654d69}
html[data-theme="chrome"] .board-topline{letter-spacing:1.7px}
html[data-theme="chrome"] .next-card,html[data-theme="chrome"] .hold-card,html[data-theme="chrome"] .battle-previews>section,html[data-theme="chrome"] .battle-previews>button{background:#1b2938;border-color:#a2b7c7;color:#e3edf6}
html[data-theme="chrome"] .piece-card .section-label,html[data-theme="chrome"] .piece-card .section-label>span,html[data-theme="chrome"] .hold-caption,html[data-theme="chrome"] .battle-previews .section-label{color:#c1d1df}
html[data-theme="kinetic"] .score-card strong{color:#18231e}
html[data-theme="kinetic"] .section-label{font-weight:800}
html[data-theme="kinetic"] .board-frame,html[data-theme="paper"] .board-frame{border-radius:0}
html[data-theme="arena"] .battle-tag{border-color:var(--rival);color:var(--rival)}
@keyframes theme-scorepop{0%,100%{transform:scale(1)}40%{transform:scale(1.07)}}
@media(min-width:741px){html[data-theme] .header-actions{gap:18px}html[data-theme] .gear{padding-left:18px}}
@media(min-width:741px) and (max-height:850px){html[data-theme] .intro h1{margin-top:11px;margin-bottom:12px}html[data-theme] .art-frame{height:108px;margin-bottom:11px}html[data-theme] .personal-best{padding-top:9px;margin-top:11px}html[data-theme] .mode-tabs{margin-top:8px;margin-bottom:7px}html[data-theme] .mode-tabs button{padding-top:7px;padding-bottom:7px}}
@media(max-width:1000px) and (min-width:741px){.theme-control select{width:128px}html[data-theme] .header-actions{gap:12px}}
@media(max-width:740px){
 html[data-theme] .theme-control{height:30px;padding:0 7px;gap:5px}.theme-control select{width:105px;font-size:12px;padding:5px 13px 5px 0}.theme-chevron{right:7px;top:2px}.theme-swatch{width:10px;height:10px}
 html[data-theme] .site-header{height:94px;align-items:flex-start;padding-top:15px;position:relative}
 html[data-theme] .header-actions{gap:15px;margin-right:0!important}
 html[data-theme] .theme-control{position:absolute;left:0;bottom:11px}
 html[data-theme] .battle-link{top:-41px;right:0;padding:6px 9px;font-size:12px;background:var(--surface)}
 html[data-theme] .brand{font-size:19px}
 html[data-theme] .game-layout{--board-size:min(61vw,calc((100svh - 252px)/2),300px)}
 html[data-theme] .board-frame{border-radius:var(--radius)}
 html[data-theme] .battle-page .site-header{height:94px}
 html[data-theme] .battle-page .brand-divider{display:none}
 html[data-theme] .battle-page .arcade{display:none}
 html[data-theme] .solo-link{font-size:12px}
 html[data-theme] .intro .art-frame{display:none}
 html[data-theme] .battle-heading{margin-top:15px}
}
@media(max-width:370px){html[data-theme] .game-layout{--board-size:min(56vw,calc((100svh - 252px)/2),300px)}html[data-theme] .header-actions{gap:12px}}
@media(max-width:950px) and (max-height:520px){
 html[data-theme] .site-header{height:47px;padding-top:0;align-items:center}
 html[data-theme] .theme-control{position:relative;left:auto;bottom:auto;height:30px}
 html[data-theme] .theme-control select{width:115px}
 html[data-theme] .game-layout{--board-size:calc((100svh - 104px)/2)}
 html[data-theme] .cheat-mode .game-layout{--board-size:calc((100svh - 136px)/2)}
 html[data-theme] .header-actions{gap:13px!important}
 html[data-theme] .battle-link{position:static;margin-top:10px}
 html[data-theme] .battle-page .site-header{height:47px}
}
@media(prefers-reduced-motion:reduce){html[data-theme] *,html[data-theme] *:before,html[data-theme] *:after{animation:none!important;transition:none!important}}