:root{--yellow:#e6c788;--red:#ad795c;--orange:#d2a86a;--blue:#467c99;--violet:#8b73bb;--mint:#79d9c0;--line:#d8bb7c40}
#app{background:radial-gradient(ellipse at top,#232138,#090b14 65%)}
#game-shell{box-shadow:0 30px 100px #000,0 0 0 2px #ae8c53,0 0 0 7px #171625}
#game-shell::after{background:none;border:1px solid #e6c78860;inset:7px}
.title-screen{background:linear-gradient(90deg,#0b1026f2,#11132999 58%,#0d1124d9)}
.title-copy h1{color:#f1dfb3;text-shadow:0 2px 0 #8a6539,0 0 45px #d4a66b40;letter-spacing:3px;font-family:Georgia,serif;font-weight:900}
.title-copy h1 small{color:#b89d78;letter-spacing:14px}.title-copy h2{font-family:Georgia,Batang,serif!important;font-weight:700!important;letter-spacing:-1px!important}.title-copy .overline{color:#cab48b;letter-spacing:3px}
.kicker span{background:#171c30;border:1px solid #c9a66b70;color:#e7d2a6}.synopsis{color:#d0cbcf}.title-footer{color:#c0af90;border-color:#bc9d5944}
.main-menu{top:13%;gap:8px}.menu-btn,.menu-btn.hot{clip-path:none;border:1px solid #b594574f;border-left:3px solid #c9ab71;background:linear-gradient(110deg,#263044ed,#13172bee);box-shadow:inset 0 0 0 3px #ffffff04;padding:12px 16px}.menu-btn.hot{background:linear-gradient(110deg,#645134,#262339);border-color:#dbc288}.menu-btn:hover,.menu-btn:focus-visible{background:linear-gradient(110deg,#776142,#34304a);color:#fff1ce;border-color:#f8df9e;transform:translateX(-5px)}.menu-btn b{font-size:20px}.menu-btn>span{font-family:Georgia,serif;font-size:12px;letter-spacing:1px}.menu-btn i{color:#ccc7cf;opacity:1}
.screen-head{background:linear-gradient(90deg,#141829f5,#292539ed);border-bottom:1px solid #cbae6a77}.screen-head h2{font-family:Georgia,Batang,serif;font-weight:700;font-size:32px;letter-spacing:0}.screen-head span{color:#dac492}
.select-screen,.route-screen,.dialogue-screen,.result-screen,.guide-screen{background:radial-gradient(ellipse at 70% 30%,#34304d,#0c1222 70%)}
.roster-card{border:1px solid #98825d88;background:radial-gradient(ellipse at top,#393851,#141c2d)}.roster-card.on{border-color:#f5d793;box-shadow:0 0 18px #e5b75e50,inset 0 0 0 2px #9d7940}.roster-card.on::before{content:'각성';background:#d8bd80}.fighter-card{border-left-color:#c8a86750}.fighter-card::before{background:radial-gradient(ellipse at bottom,#ae83e42b,transparent 70%)}.fighter-meta span{background:#4c405d;border:1px solid #bfa47766}.signature{background:#101828b3;border:1px solid #c8a86744;border-left:3px solid #d7b975;width:65%}
.confirm-btn{background:linear-gradient(115deg,#eddbad,#b8975d);color:#211d28;border:1px solid #fff0c4;box-shadow:0 5px 20px #0006,inset 0 0 0 3px #33261433}.confirm-btn:disabled{opacity:.55;cursor:wait}.route-copy{background:#141a2ce8;border:1px solid #c8a86770;border-top:3px solid #d7b975}.route-node{border-color:#9c8cae;background:#211d37}.route-node.on{background:#65513c;box-shadow:0 0 0 8px #101426,0 0 34px #dec58d66}.route::before{background:linear-gradient(90deg,#6e9fa9,#d8b678)}
.guide-screen{overflow-y:auto;touch-action:pan-y}.guide-screen .screen-head{height:90px;position:sticky;top:0;z-index:4}.guide-grid article,.guide-grid article.super{background:linear-gradient(130deg,#26253c,#141c2d);border:1px solid #b79c6850}.guide-grid small{color:#b7acbd}.guide-grid h3{font-size:18px}.cancel-route{background:#151a2c;border-color:#b79c6850}.combo-book{margin:16px 4.5%;padding:16px 20px;background:#13192ce8;border:1px solid #b99c6277}.combo-book h3{color:#e6c788;margin:0 0 12px;font-size:20px}.combo-book table{border-collapse:collapse;width:100%;text-align:left;font-size:14px}.combo-book td,.combo-book th{padding:10px;border-bottom:1px solid #b99c622b}.combo-book th{color:#a8d7d6;font-size:12px}.combo-book td:nth-child(2){color:#ffe3a2;font:700 17px monospace;white-space:nowrap}.combo-book p{color:#adaec4;font-size:12px;line-height:1.6}
.dialogue-box{background:linear-gradient(115deg,#1d263a,#211c32);color:#efe4ce;border:1px solid #c5aa71;border-left:5px solid #c5aa71;box-shadow:0 10px 40px #0008}.dialogue-box span{color:#ead09a}.dialogue-box button{background:#c7aa73;color:#171827}.versus{color:#e2c17e;text-shadow:2px 2px #4c314c}.pause-screen>div{background:linear-gradient(135deg,#28283e,#131a2b);border:1px solid #c5aa71}.result-stats{background:#141a2c;border-color:#c5aa7177}.result-seal{color:#e6c788!important;transform:none;border-radius:2px;font-family:Georgia,serif}.result-screen h2{font-size:46px}.result-screen>p{font-size:15px;margin-bottom:12px}.result-stats{margin-bottom:12px}.result-screen .text-btn{margin-top:5px}
.arcade-guide{background:linear-gradient(100deg,#151e32f2,#201c30f2);border:2px solid #c7aa73;box-shadow:0 4px 24px #0009;clip-path:none}.arcade-guide kbd{border-color:#e4cea0}.round-tool{border-color:#c7aa73!important;background:#1e2439!important}.share-actions{display:flex;gap:10px;margin-top:12px}.share-actions button,.gallery-controls button{border:1px solid #b99c62;background:#29263d;color:#f3e0b6;padding:9px 14px;cursor:pointer}.share-actions button:hover,.gallery-controls button:hover{background:#574669}#shareStatus{height:18px;color:#a9dace;margin-top:7px}
.difficulty-panel{padding:10px 14px;border:1px solid #bea57466;background:#121a2de8}.difficulty-panel>span{font-size:12px;letter-spacing:2px;color:#dac492}#difficultyChoices{display:flex;gap:6px;margin:7px 0}#difficultyChoices button{flex:1;background:#20253b;border:1px solid #6a6378;padding:6px;cursor:pointer}#difficultyChoices button[aria-pressed=true]{background:#bda16d;color:#10182b;border-color:#f5dfaa}.difficulty-panel small{font-size:10px;color:#beb9c7;display:block}
.gallery-screen{background:none;pointer-events:none}.gallery-screen .screen-head{height:13%;background:#101426db;pointer-events:auto}.gallery-screen h2{font-size:23px}.gallery-roster{position:absolute;top:15%;left:2%;width:16%;bottom:13%;overflow-y:auto;display:flex;flex-direction:column;gap:4px;pointer-events:auto;touch-action:pan-y}.gallery-roster button{display:flex;align-items:center;min-height:46px;padding:3px 6px;gap:5px;border:1px solid #b99c6244;background:#101527e8;text-align:left;font-size:12px;cursor:pointer}.gallery-roster img{width:36px;height:40px;object-fit:contain}.gallery-roster button[aria-pressed=true]{border-color:#ffe3a2;background:#514461}.gallery-controls{position:absolute;bottom:2%;left:20%;right:2%;display:flex;align-items:center;justify-content:flex-end;gap:7px;pointer-events:auto;background:#11172cd9;padding:8px}.gallery-controls span{margin-right:auto;font-size:12px;color:#d7c399}.gallery-controls button{font-size:12px;padding:7px 10px}
button:focus-visible{outline:2px solid #a4f0ed;outline-offset:3px}
#game-shell:has(.screen:not(.hidden)) #mobile{display:none!important}
#shareLink,#onlineKakao{background:#fee500;color:#191919;border-color:#fee500}#shareLink:hover,#onlineKakao:hover{background:#ffef70}
.main-menu{top:9%;gap:6px}.online-screen{background:radial-gradient(ellipse at top,#35304b,#0d1426);overflow-y:auto;touch-action:pan-y}.online-panel{max-width:900px;margin:18px auto;padding:12px 24px;color:#d9d3dd}.online-panel p{line-height:1.6;font-size:15px}.online-panel label{display:inline-flex;align-items:center;gap:10px;margin:10px 20px 10px 0}.online-panel select,.online-panel input{font:inherit;background:#171d32;color:#f6e6c2;border:1px solid #c3a875;padding:10px;min-width:130px}.online-panel input{flex:1;min-width:0}.online-panel button{cursor:pointer}.online-panel .confirm-btn{min-width:150px;padding:10px 14px;font-size:16px}.join-row{display:flex;gap:8px;margin-top:10px}.online-panel button:not(.confirm-btn){padding:9px 14px;background:#302942;border:1px solid #c3a875;color:#f6e6c2}.online-panel button:disabled{opacity:.4;cursor:default}#onlineStatus{color:#91e0d1;margin:12px 0}#onlineSeats{display:grid;grid-template-columns:1fr 1fr;gap:6px}#onlineSeats>div{padding:9px 14px;border-left:3px solid #79baff;background:#172b45}#onlineSeats>.red-team{border-color:#fa8d91;background:#3e2436}.online-buttons{display:flex;gap:10px;margin:14px 0}.online-panel small{color:#aaa7bd;font-size:11px}#onlineBadge{position:absolute;z-index:22;top:15%;right:3%;font-size:12px;background:#0f1528e8;border:1px solid #c3a875;padding:7px 10px}#onlineBadge[hidden]{display:none}#onlineBadge button{margin-left:12px;background:#37273b;color:#f4d4a1;border:1px solid #a28a62;cursor:pointer;padding:5px}.online-screen .screen-head{min-height:70px}
@media(max-width:800px){.main-menu{top:4%;gap:3px}.online-panel{margin:0;padding:8px 25px}.online-panel p{font-size:10px;margin:5px 0}.online-panel label{margin:4px 10px 4px 0;font-size:11px}.online-panel select,.online-panel input{padding:5px;font-size:11px}.online-panel .confirm-btn{font-size:12px;min-width:100px;padding:6px}.online-panel button:not(.confirm-btn){font-size:10px;padding:6px}#onlineSeats>div{font-size:10px;padding:5px}.online-buttons{margin:7px 0;gap:5px}.online-panel small{font-size:8px}#onlineBadge{font-size:9px;top:16%;padding:4px}}
@media(max-width:800px){.main-menu{top:8%;gap:4px;width:38%;right:3%}.menu-btn,.menu-btn.hot{padding:7px 9px;grid-template-columns:58px 1fr}.menu-btn b{font-size:14px}.menu-btn i{font-size:8px}.menu-btn>span{font-size:9px}.difficulty-panel{padding:6px 9px}.difficulty-panel>span{font-size:10px}#difficultyChoices{margin:4px 0}#difficultyChoices button{padding:3px;font-size:11px}.difficulty-panel small{font-size:8px}.title-copy h1{font-size:65px}.gallery-screen h2{font-size:14px}.gallery-roster button{font-size:9px;min-height:32px}.gallery-roster img{width:22px;height:28px}.gallery-controls{gap:3px;padding:4px}.gallery-controls button{font-size:9px;padding:5px}.gallery-controls span{font-size:8px}.screen-head h2{font-size:23px}.combo-book td,.combo-book th{padding:6px;font-size:11px}.combo-book td:nth-child(2){font-size:12px}.result-screen h2{font-size:30px}.result-seal{font-size:22px;margin-bottom:5px}.result-screen>p{font-size:10px;margin-bottom:7px}.result-stats{margin-bottom:6px}.result-stats div{padding:5px 15px}.result-stats b{font-size:20px}.result-screen .confirm-btn{padding:6px 12px;font-size:14px}.share-actions{margin-top:6px}.share-actions button{padding:5px 9px;font-size:10px}.guide-grid{grid-template-columns:repeat(2,1fr)}}
/* 메인 화면 키아트(2026-10-14): 분노한 근육질 부장님 + 엘프급 미형 과장·차장 */
.title-screen{background:linear-gradient(90deg,rgba(7,9,18,.82) 0,rgba(7,9,18,.46) 38%,rgba(7,9,18,.10) 66%,rgba(7,9,18,.30) 100%),url(assets/keyart.webp) 58% center/cover no-repeat,#08090d}
@media(max-width:760px){.title-screen{background:linear-gradient(90deg,rgba(7,9,18,.8) 0,rgba(7,9,18,.42) 45%,rgba(7,9,18,.18) 100%),url(assets/keyart.webp) 62% center/cover no-repeat,#08090d}}
.title-copy h1 small{display:block!important;position:static!important;font-size:18px!important;letter-spacing:7px!important;margin:0 0 6px!important;line-height:1.3!important;color:#e4cf9c!important;text-shadow:0 2px 8px #000}
@media(max-height:520px),(max-width:860px){.title-copy h1{font-size:clamp(34px,9vw,52px)!important;letter-spacing:0!important;white-space:nowrap!important;line-height:1.05!important}.title-copy h1 small{font-size:11px!important;letter-spacing:3px!important}.title-copy h2{font-size:clamp(15px,3.6vw,22px)!important}.title-copy .overline{font-size:9px!important;letter-spacing:1.5px!important}}