/* Premium family arcade — surfaces and game pieces, with no layout dependency on artwork. */
body:has(#screen-game:not([style*="display: none"])){
 background:radial-gradient(ellipse at 12% 0,#d7edff,transparent 58%),linear-gradient(150deg,#eef5ff,#e4eeef);color:#213851;
}
#app:has(#screen-game:not([style*="display: none"])) {max-width:720px;padding:24px 16px 106px}
#app:has(#screen-game:not([style*="display: none"]) #gv-select:not(.pg-hidden)){max-width:1160px}
#screen-game{--navy:#162e49;--ink:#415b73;--border:#c9d8e6;--cloud:#edf4fb}
#gv-select>.section-title{font-size:28px;letter-spacing:-1px;margin-top:4px}
#gv-select>p{font-size:15px!important;line-height:1.6}
.gv-grid{gap:18px}
.gv-card{border:1px solid #fff!important;border-radius:20px;padding:0 0 18px;overflow:hidden;background:#fff!important;box-shadow:0 6px 0 #cddbe7,0 12px 24px #26476312;min-width:0;text-align:left;align-items:stretch}
.gv-card:hover{transform:translateY(-5px);box-shadow:0 6px 0 #b9d0e0,0 20px 28px #26476324}
.gv-card .gv-icon{width:100%;height:auto;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:48px;background:#183b58 center/cover no-repeat;margin-bottom:4px;color:transparent;text-shadow:none}
.gv-card .gv-name,.gv-card .gv-desc,.gv-card .game-mode{margin-left:16px;margin-right:16px}
.gv-card .gv-name{font-size:18px;margin-top:10px}.gv-card .gv-desc{font-size:13px;color:#526a80;line-height:1.6;min-height:42px}
.game-mode{border-top:1px solid #e7edf3;padding-top:10px;font-size:12px;color:#226391}
.game-settings{background:#fdfefe;border:1px solid #fff;box-shadow:0 4px 18px #234a7010;padding:14px 18px;justify-content:space-between;gap:16px;border-radius:16px}
.game-settings select{font:inherit;border:1px solid #bccfdf;border-radius:8px;padding:7px;background:white;color:#25445c;max-width:150px}
.pg-center{max-width:540px;margin:0 auto;border:1px solid white;border-radius:26px;background:linear-gradient(160deg,#fff,#f0f6fd);box-shadow:0 10px 34px #24466413;padding:28px 22px;gap:16px}
.pg-center .pg-logo{animation:none;background:#e7f1fc;width:88px;height:88px;display:grid;place-items:center;border-radius:24px;box-shadow:inset 0 2px white,0 5px 0 #c9ddec}
.pg-title{font-size:26px;letter-spacing:-.7px}.pg-sub{font-size:15px;line-height:1.7}
#screen-game .btn{min-height:46px;border-radius:12px;font-size:15px;box-shadow:0 3px 0 #1d405c20;transition:transform .12s,box-shadow .12s}
#screen-game .btn:active{transform:translateY(2px);box-shadow:none}
.pg-quit-btn{width:40px;height:40px;border:1px solid #ffffff55;background:#17334dcc}
.rule-box{font-size:14px;line-height:1.8;background:#f9fbff;border-color:#d7e3ef;border-radius:16px}
.bd-status .turn{padding:10px 18px;background:#173b5b;color:white;box-shadow:0 4px 10px #173b5b22}
.chess-shell,.jg-shell,.edu-shell,.thief-shell,.detective-shell{max-width:560px;border:1px solid #fff;border-radius:24px;padding:18px;background:linear-gradient(145deg,#fafdff,#e6eef7);box-shadow:0 7px 0 #c4d2df,0 18px 34px #1c395326}
.chess-topbar,.jg-topbar{gap:6px}.chess-player,.jg-player{border:none;border-radius:12px;padding:8px;background:#ffffffd9}
.chess-player-name,.jg-player-name{font-size:13px}.chess-player-sub,.jg-player-sub{font-size:11px}
.chess-turn-badge,.jg-turn-badge{animation:none;font-size:12px;padding:8px;background:#f9dd85;color:#574012;border-color:#efc865}
#chess-board{max-width:none;border:9px solid #70543a;border-radius:10px;box-shadow:0 5px 0 #493923,0 9px 22px #39291244}
.cs-light{background:linear-gradient(140deg,#f2e1bb,#e8cea1)}.cs-dark{background:linear-gradient(140deg,#58827b,#38625e)}
.cs-sq{font-size:clamp(29px,8vw,51px)}.cs-piece{filter:drop-shadow(1px 5px 2px #142f3b55);transform:scale(.9)}
.cs-piece.white{color:#fff6da;text-shadow:0 1px #dac79e,0 2px #b4a481,-1px 0 #775e3c,1px 0 #775e3c}
.cs-piece.black{color:#193749;text-shadow:0 -1px #69899a,1px 1px #0a1b29,0 3px #0a1b29}
.cs-cap::after{content:'';border-width:3px;inset:7%;background:transparent;animation:none;box-shadow:0 0 0 2px #fff6}
.cs-move::after{width:24%;height:24%;animation:none;background:#24aa93;box-shadow:0 0 0 3px #ffffff55;border-width:2px}
.chess-legend-item,.jg-legend-item{font-size:12px;line-height:1.4}.chess-controls .chess-control-btn,.jg-control-btn{min-height:44px;font-size:13px}
.jg-board{background:linear-gradient(120deg,#f4e2b6,#dfbd83);border-color:#745232;box-shadow:0 6px 0 #61472d,0 12px 22px #3c251533}
.jg-piece{background:radial-gradient(circle at 35% 25%,#fff8df,#ebd4a7 65%,#c89c5c);border-color:#b28449;box-shadow:inset 0 2px #fff7e0,0 3px 0 #ac7e43,1px 6px 4px #44291040}
.jg-piece.king{background:radial-gradient(circle at 30% 25%,#fff5cb,#e9c37d 70%,#b48342)}
#gomoku-canvas{border:7px solid #7c593b;border-radius:12px;box-shadow:0 6px 0 #553f2b,0 16px 32px #273b4933;max-width:100%;box-sizing:content-box}
#memory-grid{max-width:520px;gap:12px;padding:14px;background:#183b58;border:6px solid #28516c;border-radius:22px;box-shadow:0 6px 0 #112b42,0 16px 26px #143f5933}
.mm-card{border:2px solid #93c9df;background:repeating-linear-gradient(45deg,#246b8e 0 7px,#2e7798 7px 9px);border-radius:13px;box-shadow:inset 0 0 0 3px #ffffff22,0 4px 0 #102c47;transition:transform .2s,background .2s}
.mm-back-mark{border:1px solid #f0d593;background:#153f5e;color:#f0d593;font-size:28px;box-shadow:none}
.mm-card.open{background:linear-gradient(145deg,#fffdf6,#eee5d5);border-color:#f6dda3;transform:translateY(-2px)}
.mm-card.done{background:#d9f6e8;border-color:#8edabc;opacity:1;box-shadow:0 2px 0 #366e62;transform:scale(.92)}
.mm-card svg{filter:drop-shadow(0 3px 1px #795a292a)}
.edu-shell{background:linear-gradient(140deg,#194264,#266882);border:2px solid #91b4c7}
.edu-status{border-radius:12px;background:#f3f8fd;padding:11px 44px 11px 12px;font-size:14px;line-height:1.5;min-height:46px}
.edu-grid{gap:12px}.edu-card{border-color:#8fbbd1;background:repeating-linear-gradient(135deg,#386f92 0 12px,#427b9a 12px 14px);box-shadow:inset 0 0 0 3px #ffffff18,0 4px 0 #112f4a;border-radius:14px;min-width:0}
.edu-back{border:1px solid #a5cdd9;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:24px;color:#eaf6ff}
.edu-card.question.open{background:linear-gradient(130deg,#fff8d6,#ffe5a3);border-color:#e8bf65;color:#644921}
.edu-card.answer.open{background:linear-gradient(130deg,#f5fff9,#c6f1df);border-color:#87cbb5;color:#205d50}
.edu-card.matched{opacity:.8;box-shadow:none;transform:scale(.94)}
.thief-shell{background:radial-gradient(ellipse at center,#337367,#163e40);border:5px solid #b09565}
.thief-zone{background:#123d3c99;border:1px solid #ffffff22}.thief-zone-title{color:#ebedcf;font-size:14px}
.thief-note{color:#f8ebc7;font-size:14px}.thief-card{width:56px;height:82px;border-radius:10px;box-shadow:0 4px 0 #15302a,0 6px 9px #051b2944;transition:transform .18s;font-size:29px}
.thief-card.back{background:repeating-linear-gradient(45deg,#743e78 0 6px,#854b89 6px 8px);border-color:#edce9e;color:#ffdfac}
.thief-card.back:not(:disabled):hover{transform:translateY(-7px)}.thief-card.face{background:linear-gradient(145deg,#fffdf4,#e7dbc3)}
.detective-shell{background:linear-gradient(140deg,#e8eef5,#cfdbe7);border:2px solid white}
.detective-tile{border-color:#102b43;background:linear-gradient(135deg,#335572,#102b43);box-shadow:inset 0 1px #7793a7,0 6px 0 #102238,0 10px 12px #122a3d33}
.detective-tile:nth-child(even){background:linear-gradient(135deg,#fff,#dce3ea);border-color:#afbecb;box-shadow:inset 0 1px white,0 6px 0 #9fadb9,0 10px 12px #122a3d22}
.detective-tile.selected{outline:3px solid #e9b83d;outline-offset:3px}.detective-note{font-size:14px;line-height:1.6;min-height:62px}
.num-key{min-height:48px;background:#fff;box-shadow:0 4px 0 #acbfd0;border:1px solid #bdcfdf}.num-key:disabled{opacity:.3;box-shadow:none;cursor:default}
.qb-play{max-width:600px;background:linear-gradient(150deg,#183d66,#375889);padding:18px;border:1px solid #a1bedc;border-radius:24px;box-shadow:0 7px 0 #16314f,0 20px 32px #152f492a}
.qb-topline{padding-right:40px}.qb-question-card{background:#fbfdff;border:1px solid #d9e7f4;border-radius:20px;box-shadow:0 5px 0 #132f4e55;padding:22px 16px}
.qb-choice{min-height:56px;background:#fff;border:1px solid #cddbed;border-radius:13px;box-shadow:0 4px 0 #18314c;color:#25435d;font-size:17px}
.qb-choice:active{transform:translateY(2px)}.qb-feedback{font-size:15px;color:#e4efff;min-height:28px}.qb-feedback.good{color:#a9f2cc}.qb-feedback.bad{color:#ffd4b9}
.qb-rank-row{border-radius:12px;box-shadow:none}.qb-rank-row.me{border-color:#ffda70;background:#fff4cd}
.uno-board{max-width:660px;background:radial-gradient(ellipse at 50% 32%,#358c78,#154f4c 78%);border:7px solid #a68955;border-radius:28px;box-shadow:inset 0 0 0 2px #ead098,0 7px 0 #685132,0 20px 35px #143f4530;padding:14px}
.uno-mode,.uno-timer,.uno-top-speed{background:#f6edda;color:#23423f;font-size:12px}.uno-top{padding-right:36px}
.uno-player{background:#f5eddb;border:1px solid #e3c984;box-shadow:0 4px 0 #0c35354d;max-width:108px;min-width:64px;font-size:12px}
.uno-player.me{background:#fff2c5}.uno-player.active{outline:2px solid #ffda70;box-shadow:0 0 0 5px #ffda7033,0 5px 12px #09272755}
.uno-center{min-height:144px}.uno-card{border-width:3px;border-radius:12px;box-shadow:0 3px 0 #cfc8b5,0 6px 10px #092b3c55}
.uno-red{background:linear-gradient(135deg,#f07668,#b83248)}.uno-blue{background:linear-gradient(135deg,#55b7eb,#2859a6)}.uno-green{background:linear-gradient(135deg,#7bcc91,#277b69)}.uno-yellow{background:linear-gradient(135deg,#ffe49a,#deaa3a)}
.uno-pile{background:repeating-linear-gradient(45deg,#294767 0 8px,#365776 8px 10px);color:#f0d7a2;border-color:#f2e0bb;box-shadow:3px 3px 0 #d6c8ab,6px 6px 0 #afa38b,0 10px 18px #0a292e66}
.uno-status{background:#ffffffed;color:#244c48;max-width:94%;border-radius:12px}.uno-hand{height:147px}.uno-hand .uno-card{flex-basis:68px;width:68px}
.uno-card .u-sym{font-size:30px}.uno-card .u-pet{font-size:12px}.uno-actions{gap:12px}.uno-mini-btn{background:#f8f0df;color:#24594f;border-radius:10px}
.pg-overlay,.local-result{background:#122a43ec;backdrop-filter:blur(7px);border:1px solid #adc5dc66;gap:18px;line-height:1.5;font-size:20px}
.kr-hud .kr-box{background:#112b47e6;border:1px solid #88b4d580;border-radius:12px;padding:8px 12px;box-shadow:0 3px 8px #12233c33;font-size:14px}
.kr-hud{right:52px;gap:6px}.kr-steer span{font-size:30px;border:1px solid #e8faff80;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;background:#15355588;opacity:.8}
.kr-steer span.on{background:#247f9bd9;color:white;box-shadow:0 0 18px #5de8ff77}
#kart-stage,#pong-canvas{border:2px solid #84abc8;border-radius:20px;box-shadow:0 7px 0 #234965,0 18px 34px #1d3f572e}
.game-help{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#ffffffd9;border:1px solid #c9dce9;font-size:14px;line-height:1.6;color:#355770;max-width:560px;width:100%}
.game-help summary{cursor:pointer;font-weight:800}.game-help p{margin-top:8px}.game-help:focus-within{border-color:#368eba}
@media(max-width:480px){#app:has(#screen-game:not([style*="display: none"])) {padding:14px 10px 100px}.gv-grid{gap:12px}.gv-card .gv-icon{height:105px}.gv-card .gv-name{font-size:16px}.gv-card .gv-desc{font-size:12px}.gv-card .gv-name,.gv-card .gv-desc,.gv-card .game-mode{margin-left:12px;margin-right:12px}.chess-shell,.jg-shell,.edu-shell,.thief-shell,.detective-shell{padding:12px}.edu-grid{gap:8px}.chess-player{padding:6px}.chess-avatar{width:26px;height:26px;font-size:16px}.uno-board{padding:10px;border-width:5px}.uno-player{font-size:11px;max-width:89px}.uno-top{gap:5px}.uno-mode{padding:6px}.uno-top-speed .uno-select{min-width:88px}.thief-card{width:46px;height:68px}}
@media(prefers-reduced-motion:reduce){#screen-game *,#screen-game *::before,#screen-game *::after{animation:none!important;transition:none!important}}
body[data-game-quality=low] #screen-game *{backdrop-filter:none!important}

.qb-topline,.qb-timer-line{color:#dfedff}.qb-question-card{border-color:#d9e7f4}.uno-hand button{font-family:inherit;padding:0}
.gv-card[data-art=forest-defense] .gv-icon{background-image:url('./thumbs/forest-defense.webp')}.gv-card[data-art=pong] .gv-icon{background-image:url('./thumbs/pong.webp')}.gv-card[data-art=kart] .gv-icon{background-image:url('./thumbs/family-racing.webp')}.gv-card[data-art=chess] .gv-icon{background-image:url('./thumbs/chess.webp')}.gv-card[data-art=janggi] .gv-icon{background-image:url('./thumbs/janggi.webp')}.gv-card[data-art=gomoku] .gv-icon{background-image:url('./thumbs/gomoku.webp')}.gv-card[data-art=memory] .gv-icon{background-image:url('./thumbs/memory.webp')}.gv-card[data-art=uno] .gv-icon{background-image:url('./thumbs/uno.webp')}.gv-card[data-art=qb] .gv-icon{background-image:url('./thumbs/quiz-battle.webp')}.gv-card[data-art=hanja-match] .gv-icon{background-image:url('./thumbs/hanja-match.webp')}.gv-card[data-art=multiplication-match] .gv-icon{background-image:url('./thumbs/multiplication-match.webp')}.gv-card[data-art=thief] .gv-icon{background-image:url('./thumbs/thief.webp')}.gv-card[data-art=detective] .gv-icon{background-image:url('./thumbs/detective.webp')}

.gv-card[data-art=gunma-run] .gv-icon{background-image:url('./thumbs/family-racing.webp')}
