:root {
    --sl-bg: #050812;
    --sl-panel: rgba(12, 18, 35, 0.96);
    --sl-line: rgba(130, 163, 226, 0.2);
    --sl-text: #f7f8ff;
    --sl-muted: #9da9c9;
    --sl-gold: #ffd76a;
    --sl-cyan: #75e7ff;
    --sl-red: #ff657f;
    --sl-blue-panel: #101a32;
    --sl-brass: #c9903b;
    --sl-brass-light: #ffe4a1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--sl-text);
    background:
        linear-gradient(rgba(83, 111, 166, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83, 111, 166, .035) 1px, transparent 1px),
        radial-gradient(circle at 18% 8%, rgba(55, 84, 160, 0.28), transparent 31rem),
        radial-gradient(circle at 82% 40%, rgba(136, 70, 111, 0.13), transparent 28rem),
        var(--sl-bg);
    background-size: 36px 36px, 36px 36px, auto, auto, auto;
    font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, sans-serif;
}

.slot-light-page {
    width: min(1580px, calc(100% - 28px));
    margin: 0 auto;
    padding: 22px 0 64px;
}

.play-layout { display: block; }
.play-main { min-width: 0; }
.player-hub { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 28px; }
.player-hub[hidden] { display: none; }
.player-hub-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(2, 4, 11, .84); backdrop-filter: blur(7px); cursor: default; }
.player-sidebar { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: min(1160px, calc(100vw - 42px)); max-height: calc(100vh - 48px); overflow: hidden; border: 2px solid rgba(117, 231, 255, .34); border-radius: 14px; background: rgba(7, 12, 25, .98); box-shadow: 0 32px 100px rgba(0, 0, 0, .72), 0 0 42px rgba(81, 157, 217, .12); }
.player-hub-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px 13px; border-bottom: 1px solid rgba(117,231,255,.13); background: linear-gradient(135deg, rgba(24,40,71,.96), rgba(11,17,33,.96)); }
.player-hub-header h2 { margin: 2px 0 0; color: #eef6ff; font-size: 22px; }
.player-hub-header .eyebrow { margin: 0; }
.player-hub-header > button { width: 42px; height: 42px; border: 1px solid rgba(117,231,255,.28); border-radius: 9px; color: #eaf8ff; background: #172743; cursor: pointer; font: 700 25px/1 Arial,sans-serif; }
.account-card,
.growth-card,
.ranking-card {
    padding: 22px;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: linear-gradient(155deg, rgba(18, 29, 55, .98), rgba(8, 14, 29, .98));
    box-shadow: none;
}
.sidebar-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 20px; border-bottom: 1px solid var(--sl-line); background: #080e1d; }
.sidebar-tabs button { min-height: 38px; border: 0; border-radius: 8px; color: #7586aa; background: transparent; cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.sidebar-tabs button:hover { color: #dce8ff; background: rgba(76, 105, 164, .18); }
.sidebar-tabs button.is-active { color: #0b1526; background: linear-gradient(135deg, var(--sl-cyan), #91b6ff); box-shadow: 0 4px 16px rgba(72, 189, 244, .18); }
.player-sidebar [data-sidebar-panel] { display: none; min-height: 500px; }
.player-sidebar [data-sidebar-panel].is-active { display: block; animation: panel-enter .2s ease both; }
@keyframes panel-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.account-card h2, .growth-card h2, .ranking-card h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.account-card > div > p { margin: 8px 0 16px; color: var(--sl-muted); font-size: 12px; line-height: 1.5; }
.auth-form { display: grid; gap: 11px; }
.auth-form label { display: grid; gap: 6px; color: #aebada; font-size: 11px; font-weight: 800; }
.auth-form input {
    width: 100%; min-height: 42px; padding: 9px 11px;
    border: 1px solid rgba(141, 163, 220, .26); border-radius: 10px;
    color: var(--sl-text); background: #0b1328; outline: 0; font: inherit; font-size: 13px;
}
.auth-form input:focus { border-color: var(--sl-cyan); box-shadow: 0 0 0 3px rgba(117, 231, 255, .09); }
.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.auth-actions button, .logout-button {
    min-height: 40px; border: 1px solid rgba(117, 231, 255, .2); border-radius: 10px;
    color: #e6efff; background: #22345d; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850;
}
.auth-actions button:first-child { color: #11172b; border: 0; background: linear-gradient(135deg, #75e7ff, #8eb8ff); }
.auth-actions button:disabled, .logout-button:disabled { cursor: wait; opacity: .5; }
.account-security,.account-recovery { margin-top:10px; padding:10px; border:1px solid rgba(117,231,255,.16); border-radius:9px; background:rgba(7,14,29,.58); }
.account-security summary,.account-recovery summary { color:#a9b9d8; cursor:pointer; font-size:11px; font-weight:850; }
.password-change-form { display:grid; gap:8px; margin-top:11px; }
.password-change-form label,.recovery-form label,.recovery-code-form label,.account-delete-form label { display:grid; gap:4px; color:#8797b8; font-size:10px; font-weight:800; }
.password-change-form input,.recovery-form input,.recovery-code-form input,.account-delete-form input { width:100%; min-height:38px; padding:8px 10px; border:1px solid rgba(117,231,255,.2); border-radius:7px; color:#edf4ff; background:#0a1224; font:inherit; }
.password-change-form button,.recovery-form button,.recovery-code-form button,.revoke-sessions-button,.account-delete-form button,.deletion-pending button { width:100%; min-height:39px; border:1px solid rgba(117,231,255,.3); border-radius:7px; color:#092033; background:linear-gradient(135deg,#75e7ff,#8eb8ff); cursor:pointer; font:inherit; font-size:11px; font-weight:900; }
.password-change-form button:disabled,.recovery-form button:disabled,.recovery-code-form button:disabled,.revoke-sessions-button:disabled,.account-delete-form button:disabled,.deletion-pending button:disabled { cursor:wait; opacity:.5; }
.revoke-sessions-button { margin-top:8px; color:#f1dce4; border-color:rgba(255,130,153,.3); background:rgba(101,40,60,.45); }
.device-manager { margin-top:12px; padding:10px; border:1px solid rgba(117,231,255,.18); border-radius:9px; background:rgba(8,18,38,.72); }
.device-manager > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.device-manager > div > strong { color:#dce8ff; font-size:11px; }
.device-manager > div > button { width:30px; min-height:30px; border:1px solid rgba(117,231,255,.25); border-radius:50%; color:#75e7ff; background:#121f3a; cursor:pointer; font:inherit; }
.device-manager > p { margin:6px 0 9px; color:#7f8dab; font-size:9px; line-height:1.45; }
.device-manager ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.device-manager li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border-radius:7px; background:rgba(27,42,73,.7); }
.device-manager li > span { display:grid; gap:2px; min-width:0; }
.device-manager li b { overflow:hidden; color:#dce8ff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.device-manager li small { color:#7f8dab; font-size:8px; }
.device-manager li button { min-height:30px; padding:5px 8px; border:1px solid rgba(255,130,153,.25); border-radius:6px; color:#ffdce3; background:rgba(101,40,60,.45); cursor:pointer; font:inherit; font-size:9px; font-weight:900; }
.device-manager li button:disabled { cursor:default; color:#79edb0; border-color:rgba(121,237,176,.2); background:rgba(31,86,65,.28); opacity:.8; }
.account-security > small { display:block; margin-top:8px; color:#72809f; font-size:9px; line-height:1.45; }
.recovery-form,.recovery-code-form { display:grid; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid rgba(117,231,255,.12); }
.recovery-codes-output { margin-top:9px; padding:10px; border:1px solid rgba(255,215,106,.3); border-radius:8px; background:rgba(80,58,21,.28); }
.recovery-codes-output > strong { display:block; margin-bottom:8px; color:#ffe89b; font-size:10px; }
.recovery-codes-output > div { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.recovery-codes-output code { padding:5px; border-radius:5px; color:#f7e9be; background:#10172a; font-size:9px; text-align:center; user-select:all; }
.account-delete-form { display:grid; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid rgba(255,130,153,.18); }
.account-delete-form button { color:#ffe5eb; border-color:rgba(255,130,153,.38); background:rgba(104,35,57,.62); }
.account-delete-form small { color:#b58794; font-size:9px; line-height:1.45; }
.deletion-pending { margin-top:9px; padding:11px; border:1px solid rgba(255,215,106,.32); border-radius:10px; background:rgba(78,56,17,.34); }
.deletion-pending strong { color:#ffe89b; font-size:11px; }
.deletion-pending p { margin:5px 0 9px; color:#cdbf96; font-size:10px; line-height:1.45; }
.deletion-pending button { color:#17223c; background:linear-gradient(135deg,#ffe077,#ffc05e); }
.auth-message { min-height: 18px; margin: 10px 0 0; color: #ffbbca; font-size: 11px; line-height: 1.45; }
.auth-message.is-success { color: #79edb0; }
.player-profile { display: grid; gap: 4px; padding: 13px; border-radius: 13px; background: #101b34; }
.player-profile span { color: #79edb0; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.player-profile strong { color: var(--sl-gold); font-size: 21px; }
.player-profile small { color: var(--sl-muted); font-size: 11px; line-height: 1.45; }
.player-profile.has-nebula { border:1px solid rgba(199,156,255,.5); background:radial-gradient(circle at 85% 20%,rgba(117,231,255,.18),transparent 34%),linear-gradient(135deg,rgba(43,28,78,.9),#101b34); box-shadow:0 0 22px rgba(157,113,255,.14); }
.cosmetic-picker { margin-top:9px; padding:10px; border:1px solid rgba(199,156,255,.2); border-radius:10px; background:rgba(26,19,49,.48); }
.cosmetic-picker > div:first-child { display:grid; gap:3px; margin-bottom:8px; }
.cosmetic-picker strong { color:#e0c8ff; font-size:11px; }
.cosmetic-picker small { color:#887ba3; font-size:9px; line-height:1.4; }
.cosmetic-picker > div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cosmetic-picker button { min-height:34px; border:1px solid rgba(199,156,255,.24); border-radius:7px; color:#bfb0d8; background:#17132a; cursor:pointer; font:inherit; font-size:10px; font-weight:900; }
.cosmetic-picker button.is-active { color:#171328; border-color:transparent; background:linear-gradient(135deg,#c79cff,#75e7ff); }
.cosmetic-picker button:disabled { cursor:not-allowed; filter:grayscale(1); opacity:.42; }
.hero-card.has-nebula { box-shadow:0 0 0 1px rgba(199,156,255,.45),0 0 16px rgba(117,231,255,.2); background-image:radial-gradient(circle at 80% 10%,rgba(117,231,255,.16),transparent 38%); }
.passive-choice.is-seasonal { border-color:rgba(199,156,255,.55); background:linear-gradient(135deg,rgba(67,42,107,.92),rgba(23,53,83,.92)); }
.passive-choice.is-seasonal b::after { content:' SEASON'; margin-left:6px; color:#75e7ff; font-size:8px; letter-spacing:.08em; }
.logout-button { width: 100%; margin-top: 9px; background: rgba(65, 76, 110, .45); }
.growth-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.growth-card header .eyebrow { margin-bottom: 5px; }
.growth-card header > strong { color: var(--sl-gold); font-size: 21px; }
.growth-guide { margin: 9px 0 13px; color: var(--sl-muted); font-size: 11px; line-height: 1.5; }
.growth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.growth-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 105px; padding: 13px; border: 1px solid rgba(117,231,255,.08); border-radius: 12px; background: rgba(23, 35, 65, .76); }
.growth-item div { min-width: 0; }
.growth-item em { display: inline-block; margin-bottom: 6px; padding: 3px 6px; border-radius: 999px; color: #82dff2; background: rgba(34,92,115,.35); font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .06em; }
.growth-item b, .growth-item small { display: block; }
.growth-item b { color: #e9edfa; font-size: 12px; }
.growth-item small { margin-top: 3px; color: var(--sl-muted); font-size: 10px; line-height: 1.35; }
.growth-item button { min-width: 58px; padding: 8px 7px; border: 1px solid rgba(255, 215, 106, .3); border-radius: 9px; color: #191424; background: var(--sl-gold); cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.growth-item button:disabled { color: #8793b0; border-color: var(--sl-line); background: #202a45; cursor: not-allowed; }
.new-expedition-button { width: 100%; min-height: 40px; margin-top: 10px; border: 1px solid rgba(117, 231, 255, .3); border-radius: 10px; color: #112033; background: linear-gradient(135deg, #75e7ff, #8eb8ff); cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; }
.new-expedition-button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .45; }
.ranking-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ranking-card header .eyebrow { margin-bottom: 5px; }
.ranking-card header button { width: 34px; height: 34px; border: 1px solid var(--sl-line); border-radius: 50%; color: var(--sl-cyan); background: #172440; cursor: pointer; font: inherit; font-size: 17px; }
.ranking-mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0 8px; }
.ranking-mode-tabs button { min-height:34px; border:1px solid rgba(117,231,255,.18); border-radius:8px; color:#8d9cbd; background:#111c35; cursor:pointer; font:inherit; font-size:10px; font-weight:900; }
.ranking-mode-tabs button.is-active { color:#122037; border-color:transparent; background:linear-gradient(135deg,#75e7ff,#8eb8ff); }
.weekly-challenge { margin:9px 0 11px; padding:10px; border:1px solid rgba(255,215,106,.22); border-radius:10px; background:rgba(72,54,22,.25); }
.weekly-challenge strong { display:block; color:#ffe48a; font-size:11px; }
.weekly-challenge p { margin:5px 0 8px; color:#a99f86; font-size:9px; line-height:1.45; }
.weekly-challenge button { width:100%; min-height:38px; border:1px solid rgba(255,215,106,.35); border-radius:8px; color:#17223c; background:linear-gradient(135deg,#ffe077,#ffbd5b); cursor:pointer; font:inherit; font-size:10px; font-weight:900; }
.weekly-challenge button:disabled { cursor:not-allowed; filter:grayscale(.65); opacity:.55; }
.weekly-challenge.is-active { border-color:rgba(121,237,176,.45); background:rgba(31,86,65,.3); }
.weekly-challenge.is-active strong { color:#79edb0; }
.daily-challenge { margin:9px 0 11px; padding:10px; border:1px solid rgba(117,231,255,.22); border-radius:10px; background:rgba(20,58,79,.28); }
.daily-challenge strong { display:block; color:#75e7ff; font-size:11px; }
.daily-challenge p { margin:5px 0 8px; color:#91aabd; font-size:9px; line-height:1.45; }
.daily-challenge button { width:100%; min-height:38px; border:1px solid rgba(117,231,255,.35); border-radius:8px; color:#14223c; background:linear-gradient(135deg,#75e7ff,#8eb8ff); cursor:pointer; font:inherit; font-size:10px; font-weight:900; }
.daily-challenge button:disabled { cursor:not-allowed; filter:grayscale(.65); opacity:.55; }
.daily-challenge.is-active { border-color:rgba(121,237,176,.45); background:rgba(31,86,65,.3); }
.daily-challenge.is-active strong { color:#79edb0; }
.ranking-guide { margin: 8px 0 13px; color: var(--sl-muted); font-size: 11px; }
.ranking-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ranking-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 11px; background: rgba(23, 35, 65, .76); }
.ranking-list li.is-me { outline: 1px solid rgba(255, 215, 106, .55); background: rgba(74, 59, 47, .62); }
.ranking-position { color: #8190b2; font-size: 12px; font-weight: 900; }
.ranking-list li:nth-child(-n+3) .ranking-position { color: var(--sl-gold); }
.ranking-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.ranking-score { color: #c6d2ed; text-align: right; font-size: 10px; line-height: 1.35; }
.ranking-score b { display: block; color: var(--sl-cyan); font-size: 12px; }
.ranking-empty { display: block !important; padding: 20px 8px !important; color: var(--sl-muted); text-align: center; font-size: 12px; }

.tutorial-restart-button {
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid rgba(117, 231, 255, .32);
    border-radius: 8px;
    color: #dff9ff;
    background: rgba(24, 52, 82, .72);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
}
.tutorial-restart-button:hover { border-color: var(--sl-cyan); background: rgba(38, 77, 111, .9); }

.tutorial-coach {
    position: fixed;
    z-index: 4500;
    right: 18px;
    bottom: 18px;
    width: min(350px, calc(100% - 36px));
    padding: 20px 44px 18px 20px;
    border: 1px solid rgba(255, 215, 106, .58);
    border-radius: 12px;
    color: var(--sl-text);
    background: linear-gradient(145deg, rgba(22, 35, 65, .98), rgba(7, 12, 27, .99));
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 22px 65px rgba(0,0,0,.58), 0 0 0 1px rgba(0,0,0,.45);
}
.tutorial-coach[hidden] { display: none; }
.tutorial-coach > small { display: block; color: var(--sl-cyan); font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.tutorial-coach > strong { display: block; margin-top: 7px; color: var(--sl-gold); font-size: 18px; }
.tutorial-coach > p { margin: 8px 0 0; color: #c8d3ed; font-size: 12px; line-height: 1.58; }
.tutorial-close { position: absolute; top: 10px; right: 10px; width: 29px; height: 29px; border: 1px solid var(--sl-line); border-radius: 50%; color: #aebbd7; background: rgba(8, 14, 29, .82); cursor: pointer; font: inherit; font-size: 18px; line-height: 1; }
.tutorial-next { min-width: 112px; min-height: 38px; margin-top: 14px; border: 0; border-radius: 8px; color: #151526; background: linear-gradient(135deg, #ffe58c, #ffb34f); cursor: pointer; font: inherit; font-size: 12px; font-weight: 950; box-shadow: 0 8px 24px rgba(255, 178, 73, .18); }
.tutorial-focus { position: relative; z-index: 2; outline: 3px solid var(--sl-gold) !important; outline-offset: 4px; animation: tutorial-pulse 1.4s ease-in-out infinite; }
@keyframes tutorial-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 106, .12); } 50% { box-shadow: 0 0 0 8px rgba(255, 215, 106, .12); } }

.game-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(201, 144, 59, .42);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(27, 34, 61, .97), rgba(10, 15, 28, .9));
    box-shadow: inset 0 1px rgba(255,232,170,.08), inset 0 -3px rgba(5,8,18,.72), 0 16px 44px rgba(0,0,0,.28);
}
.game-heading::before, .game-heading::after { content: "◆"; flex: 0 0 auto; color: rgba(255,215,106,.35); font-size: 10px; }
.game-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255, 215, 106, .55); clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%); color: #161321; background: linear-gradient(135deg, #ffe994, #ffad45); box-shadow: 0 0 24px rgba(255, 190, 74, .22); font-size: 16px; font-weight: 1000; letter-spacing: -.05em; }

.eyebrow {
    margin: 0 0 8px;
    color: var(--sl-cyan);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .16em;
}

.game-heading h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.game-heading p:not(.eyebrow) {
    margin: 6px 0 0;
    color: var(--sl-muted);
    font-size: 12px;
}
.game-heading .eyebrow { margin-bottom: 4px; font-size: 9px; }
.game-heading-actions { display: flex; align-items: center; gap: 10px; }
.player-hub-launcher { display: inline-flex; padding: 3px; border: 1px solid rgba(117,231,255,.2); border-radius: 9px; background: rgba(6,13,28,.68); }
.player-hub-launcher button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 6px; color: #b6c6e5; background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.player-hub-launcher button:hover:not(:disabled) { color: #0a1625; background: var(--sl-cyan); }
.player-hub-launcher button:disabled { cursor: not-allowed; opacity: .38; }
.server-status { display: flex; align-items: center; gap: 7px; color: #8ca0c8; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.server-status i { width: 7px; height: 7px; border-radius: 50%; background: #62e6a2; box-shadow: 0 0 10px rgba(98,230,162,.75); animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .45; } }

.plan-link {
    flex: 0 0 auto;
    padding: 11px 16px;
    border: 1px solid var(--sl-line);
    border-radius: 8px;
    color: #dbe4ff;
    text-decoration: none;
    background: rgba(34, 49, 82, .65);
    font-size: 11px;
    font-weight: 750;
}

.game-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(201, 144, 59, .35);
    border-radius: 8px;
    background: var(--sl-panel);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42), inset 0 1px rgba(255,228,161,.05), inset 0 0 0 4px rgba(5,9,19,.48);
}
.game-shell::before { content: ""; position: absolute; z-index: 4; inset: 4px; border: 1px solid rgba(255,215,106,.08); pointer-events: none; }

.status-bar {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    margin: 10px 14px 0;
    padding: 4px;
    border: 3px solid #8d8058;
    border-radius: 3px;
    background: #18131e;
    box-shadow: inset 0 0 0 2px #342a38, 0 4px 0 #07070c, 0 8px 22px rgba(0,0,0,.28);
}

.status-bar div {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: 14px 20px;
    align-items: center;
    min-width: 0;
    padding: 5px 8px;
    border-right: 2px solid #3f3444;
    background: linear-gradient(180deg, #2b2230, #1d1824);
}
.status-bar div::after { content: ""; position: absolute; right: 3px; bottom: 2px; left: 3px; height: 2px; background: #42364a; }
.status-bar .hud-gold::after { background: #d7a94e; }
.status-bar .hud-round::after { background: #67bfd1; }
.status-bar .hud-life::after { background: #c8536c; }

.status-bar div:last-child { border-right: 0; }
.status-bar i { grid-row: 1 / 3; color: #a89ab0; font: normal 15px/1 Georgia, serif; text-align: center; text-shadow: 2px 2px #08070b; }
.status-bar span { align-self: end; overflow: hidden; color: #8f8297; font-size: 8px; font-weight: 900; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.status-bar strong { align-self: start; overflow: hidden; color: #f0e8dc; font-size: 14px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; text-shadow: 2px 2px #09080d; }
.status-bar .hud-gold strong { color: var(--sl-gold); }
.status-bar .hud-gold i { color: var(--sl-gold); }
.status-bar .hud-round strong { color: var(--sl-cyan); }
.status-bar .hud-round i { color: var(--sl-cyan); }
.status-bar #lifeValue { color: #ff8299; }
.status-bar .hud-life i { color: #ff657f; }
.hud-playback { flex-wrap: wrap; margin: 7px 14px 0; padding: 6px 8px; border: 1px solid rgba(117,231,255,.16); border-radius: 4px; background: linear-gradient(180deg, rgba(21,29,49,.96), rgba(9,14,27,.98)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.hud-playback::before { content: "BATTLE CONTROL"; margin-right: auto; padding-left: 4px; color: #66789f; font-size: 8px; font-weight: 900; letter-spacing: .13em; }

.slot-dom-stage {
    min-height: 408px;
    padding: 22px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,215,106,.035) 25%, transparent 25%) 0 0 / 24px 24px,
        radial-gradient(circle at 82% 12%, rgba(69, 98, 190, .24), transparent 34%),
        radial-gradient(circle at 12% 88%, rgba(143, 74, 126, .13), transparent 34%),
        linear-gradient(145deg, rgba(9, 16, 34, .92), rgba(5, 10, 23, .98));
}

.slot-stage-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding-left: 11px; border-left: 3px solid var(--sl-cyan); }
.slot-stage-heading span, .slot-result-panel > span { color: var(--sl-cyan); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.slot-stage-heading p { margin: 6px 0 0; color: #98a7ca; font-size: 14px; }
.slot-stage-heading small { color: #647398; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.slot-stage-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(210px, .8fr); gap: clamp(20px, 4vw, 44px); align-items: center; }
.slot-machine { min-width: 0; }
.slot-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.slot-reel { display: grid; gap: 9px; min-width: 0; }
.slot-cell {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 92px;
    padding: 10px;
    overflow: hidden;
    border: 2px solid #2d3d66;
    border-radius: 15px;
    background: linear-gradient(180deg, #192441, #111a31);
    box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 26px rgba(0,0,0,.12);
    transform: translateZ(0);
}
.slot-cell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 36%, rgba(0,0,0,.12)); pointer-events: none; }
.slot-cell-icon { color: var(--symbol-color, #c79cff); font: 700 clamp(30px, 4vw, 45px)/1 Arial, sans-serif; text-shadow: 0 0 20px color-mix(in srgb, var(--symbol-color, #c79cff) 65%, transparent); }
.slot-cell-label { margin-top: 5px; color: #aebada; font-size: 12px; }
.slot-cell.is-win { z-index: 2; border-color: var(--win-color, #ffd76a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--win-color, #ffd76a) 28%, transparent), 0 0 26px color-mix(in srgb, var(--win-color, #ffd76a) 34%, transparent); }
.slot-cell.is-win .slot-cell-icon { animation: win-pulse .72s ease-in-out infinite alternate; }

.slot-reels.is-spinning .slot-cell {
    animation: reel-flow .3s linear infinite;
    animation-delay: var(--spin-delay);
}
.slot-reels.is-settling .slot-cell {
    animation: reel-land .46s cubic-bezier(.18,.8,.24,1.18) both;
    animation-delay: var(--land-delay);
}
.slot-reel.is-nudging .slot-cell { animation: nudge-drop .42s cubic-bezier(.2,.75,.25,1.18) both; animation-delay: var(--nudge-delay); }

@keyframes reel-flow {
    0% { transform: translateY(-32%); opacity: .3; filter: blur(3px); }
    48% { opacity: .85; }
    100% { transform: translateY(32%); opacity: .3; filter: blur(3px); }
}
@keyframes reel-land {
    0% { transform: translateY(-70%); opacity: .15; filter: blur(4px); }
    72% { transform: translateY(7%); opacity: 1; filter: blur(0); }
    100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes nudge-drop {
    0% { transform: translateY(-38%); opacity: .3; filter: blur(3px); }
    100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes win-pulse { to { transform: scale(1.12); filter: brightness(1.25); } }

.slot-result-panel { min-height: 260px; padding: 22px 16px; border: 1px solid rgba(117,231,255,.2); border-radius: 7px; background: linear-gradient(180deg, rgba(20,33,61,.92), rgba(8,15,31,.98)); text-align: center; box-shadow: inset 0 0 32px rgba(74,131,196,.07); }
.slot-result-panel strong { display: block; margin-top: 22px; color: #fff; font-size: clamp(21px, 3vw, 29px); }
.slot-result-panel p { min-height: 62px; margin: 12px 0 20px; color: #aab5d2; font-size: 15px; line-height: 1.65; }
.slot-result-panel small { color: #6f7d9f; font-size: 11px; }
.slot-result-panel.has-win strong { color: var(--sl-gold); }

.hero-shop-stage { min-height: 430px; }
.hero-shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; padding: 0; }
.hero-shop-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; align-items: stretch; }
.shop-offer { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; justify-items: center; min-width: 0; min-height: 268px; padding: 15px 9px 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--class-color, #75e7ff) 40%, #29344f); border-radius: 5px 5px 12px 12px; color: var(--sl-text); background: linear-gradient(165deg, color-mix(in srgb, var(--class-color, #75e7ff) 16%, #1c2948), rgba(8, 14, 29, .99) 68%); text-align: center; transition: transform .16s ease, border-color .16s ease, opacity .16s ease, box-shadow .16s ease; }
.shop-offer::before { content: ""; position: absolute; inset: 4px; pointer-events: none; border: 1px solid rgba(255,255,255,.045); background: linear-gradient(135deg, rgba(255,255,255,.055), transparent 28%), linear-gradient(180deg, transparent 67%, color-mix(in srgb, var(--class-color, #75e7ff) 9%, transparent)); }
.shop-offer::after { content: "◆"; position: absolute; top: 47px; width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-color, #75e7ff) 45%, transparent); border-radius: 50%; color: color-mix(in srgb, var(--class-color, #75e7ff) 25%, transparent); background: rgba(4,9,20,.42); font-size: 54px; line-height: 1; }
.shop-offer[data-profession="spear"] { --class-color: #ff827a; }
.shop-offer[data-profession="shield"] { --class-color: #76b9ff; }
.shop-offer[data-profession="bow"] { --class-color: #75e39a; }
.shop-offer[data-profession="crown"] { --class-color: #ffd76a; }
.shop-offer[data-profession="staff"] { --class-color: #ca9bff; }
.shop-offer > * { position: relative; z-index: 1; }
.shop-offer:hover { transform: translateY(-4px); border-color: var(--offer-color, var(--sl-cyan)); box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 0 22px rgba(117,231,255,.08); }
.shop-offer-grade { padding: 3px 7px; border-radius: 999px; color: #11172b; background: var(--offer-color, var(--sl-gold)); font-size: 9px; font-weight: 950; }
.shop-offer-icon { z-index: 1; margin-top: 14px; color: var(--class-color, var(--sl-gold)); font-size: 38px; line-height: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--class-color, #75e7ff) 62%, transparent); }
.shop-offer strong { overflow: hidden; width: 100%; margin-top: 10px; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.shop-offer-stats { margin: 7px 0 10px; color: #91a3ca; font-size: 10px; line-height: 1.5; }
.shop-luck { align-self: center; margin: 0 0 10px; color: #ffd76a; font-size: 8px; font-weight: 800; line-height: 1.45; }
.shop-buy-button { position: relative; z-index: 1; width: 100%; min-height: 41px; border: 1px solid #ffe29a; border-radius: 3px 3px 8px 8px; color: #25170b; background: linear-gradient(180deg, #ffe89b, #d89535); box-shadow: inset 0 1px rgba(255,255,255,.65), inset 0 -3px rgba(112,57,14,.22), 0 6px 14px rgba(0,0,0,.25); cursor: pointer; font: inherit; font-size: 12px; font-weight: 950; }
.shop-buy-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.shop-buy-button:disabled { cursor: not-allowed; opacity: .45; }
.shop-featured { position: absolute; top: 8px; right: 8px; color: var(--sl-gold); font-size: 9px; font-weight: 900; }

.game-canvas {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    border-top: 2px solid rgba(255,215,106,.28);
    border-bottom: 2px solid rgba(255,215,106,.28);
    background: #070b18;
    box-shadow: inset 0 0 34px rgba(0,0,0,.72);
}

.game-canvas[hidden] { display: none; }

.game-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    image-rendering: pixelated;
}

.game-controls {
    display: grid;
    grid-template-columns: minmax(230px, 340px) 1fr;
    align-items: center;
    gap: 22px;
    padding: 12px 14px;
    border-top: 1px solid var(--sl-line);
    background: #0a1123;
}
.game-controls.fixed-shop-controls { grid-template-columns: 1fr; padding-top: 8px; padding-bottom: 8px; }
.battle-playback { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.battle-playback > span { margin-right: 2px; color: #8797bb; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.battle-speed-buttons { display: inline-flex; padding: 3px; border: 1px solid rgba(117, 231, 255, .2); border-radius: 9px; background: rgba(5, 10, 22, .72); }
.battle-speed-button,
.battle-option-button { min-height: 32px; border: 1px solid rgba(117, 231, 255, .2); border-radius: 7px; color: #a9b5d3; background: rgba(16, 27, 51, .9); font-size: 11px; font-weight: 900; cursor: pointer; }
.battle-speed-button { min-width: 38px; border-color: transparent; background: transparent; }
.battle-speed-button.is-active { color: #07101a; background: var(--sl-cyan); box-shadow: 0 0 14px rgba(117, 231, 255, .24); }
.battle-option-button { padding: 0 10px; }
.battle-option-button[aria-pressed="true"] { color: var(--sl-gold); border-color: rgba(255, 215, 106, .5); background: rgba(83, 60, 27, .65); }
.battle-option-button:disabled { cursor: not-allowed; opacity: .42; }
.settings-open-button { color: #dffbff; border-color: rgba(117,231,255,.42); background: rgba(26,65,83,.82); }
.relic-bar { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; border-top: 2px solid #6f5937; background: linear-gradient(180deg, #181525, #090d19); box-shadow: inset 0 2px rgba(255,224,145,.08); }
.relic-vault-title { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-width: 126px; padding: 7px 10px; border: 1px solid #8c7144; border-radius: 5px; color: #f5df9a; background: linear-gradient(180deg, #49333b, #251d29); box-shadow: inset 0 0 0 2px #17131d, 0 3px 0 #05070c; }
.relic-vault-title > i { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #d3a852; color: #ffe48d; background: #251a25; font-style: normal; text-shadow: 0 0 9px #ffd76a; }
.relic-vault-title > span { display: grid; gap: 1px; font-size: 11px; letter-spacing: .03em; }
.relic-vault-title small { color: #a98e67; font-size: 7px; letter-spacing: .12em; }
.relic-summary { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(117,231,255,.17); border-radius: 999px; color: #91a5c8; background: rgba(13,25,48,.74); font-size: 8px; font-weight: 850; white-space: nowrap; }
.relic-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.relic-list > span { color: #7f8dab; font-size: 10px; }
.relic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--relic-grade-color, #ffd76a) 55%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--relic-grade-color, #ffd76a) 78%, white); background: color-mix(in srgb, var(--relic-grade-color, #ffd76a) 14%, rgba(8,14,28,.92)); font-size: 10px; font-weight: 800; }
.relic-chip i { font-style: normal; }
.relic-chip > span { display: inline-flex; align-items: center; gap: 5px; }
.relic-chip small { padding: 2px 4px; border-radius: 4px; color: #091323; background: var(--relic-grade-color, #ffd76a); font-size: 7px; font-weight: 950; }
.relic-symbol { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; color: var(--relic-grade-color, #ffd76a); background: rgba(4,9,18,.68); box-shadow: inset 0 0 0 1px currentColor; font-size: 15px; }
.relic-reward-choice { border-color: color-mix(in srgb, var(--relic-grade-color) 65%, transparent) !important; }
.relic-reward-choice b small { display: inline-block; margin-right: 6px; padding: 3px 6px; border-radius: 5px; color: #07101b; background: var(--relic-grade-color); font-size: 8px; }
.relic-choice-symbol { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 8px; border: 1px solid var(--relic-grade-color); border-radius: 12px; color: var(--relic-grade-color); background: rgba(4,8,18,.75); font-size: 28px; font-style: normal; }
.relic-icon { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 6px; background-image: url('/static/ai/slot-light/assets/generated/relic-atlas-v1.png'); background-repeat: no-repeat; background-size: 300% 200%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); image-rendering: pixelated; }
.relic-icon-royalBanner { background-position: 0 0; }
.relic-icon-bastionCore { background-position: 50% 0; }
.relic-icon-swiftFeather { background-position: 100% 0; }
.relic-icon-hunterLens { background-position: 0 100%; }
.relic-icon-prismShard { background-position: 50% 100%; }
.relic-icon-bloodstone { background-position: 100% 100%; }
.relic-choice-icon { width: 72px; height: 72px; margin-bottom: 12px; border-radius: 12px; }

.pet-panel { display: grid; grid-template-columns: minmax(180px, .65fr) 1.35fr; gap: 16px; align-items: center; margin-top: 14px; padding: 14px; border: 1px solid rgba(117, 231, 255, .17); border-radius: 14px; background: rgba(8, 15, 31, .76); }
.pet-panel h3 { margin: 2px 0 4px; color: #f4e7ba; font-size: 17px; }
.pet-panel p { margin: 0; }
.pet-panel > div > span { color: #8f9dbb; font-size: 11px; line-height: 1.5; }
.pet-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pet-choice { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; min-height: 64px; padding: 7px; border: 1px solid rgba(134, 151, 190, .2); border-radius: 10px; color: #dce5ff; background: rgba(20, 31, 57, .9); cursor: pointer; text-align: left; font: inherit; }
.pet-choice:hover { border-color: rgba(117, 231, 255, .6); }
.pet-choice.is-active { border-color: var(--sl-gold); background: rgba(76, 57, 28, .68); box-shadow: 0 0 18px rgba(255, 215, 106, .12); }
.pet-choice:disabled { cursor: not-allowed; opacity: .55; }
.pet-choice-art { width: 48px; height: 48px; border-radius: 8px; background-image: url('/static/ai/slot-light/assets/generated/pet-atlas-v1.png'); background-repeat: no-repeat; background-size: 300% 100%; image-rendering: pixelated; }
.pet-choice-art-0 { background-position: 0 0; }
.pet-choice-art-1 { background-position: 50% 0; }
.pet-choice-art-2 { background-position: 100% 0; }
.pet-choice b, .pet-choice small { display: block; }
.pet-choice b { font-size: 12px; }
.pet-choice small { margin-top: 3px; color: #9cabca; font-size: 9px; line-height: 1.35; }

.action-panel { display: grid; gap: 9px; }

.nudge-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.nudge-button {
    min-height: 37px;
    border: 1px solid rgba(117, 231, 255, .24);
    border-radius: 10px;
    color: #dce6ff;
    background: rgba(40, 59, 103, .72);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}

.nudge-button:disabled { cursor: not-allowed; opacity: .38; }

.passive-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 5, 14, .78);
    backdrop-filter: blur(10px);
}

.passive-modal[hidden] { display: none; }

.passive-dialog {
    width: min(820px, 100%);
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid rgba(117, 231, 255, .22);
    border-radius: 24px;
    background: #111a31;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.passive-dialog h2 { margin: 0; font-size: clamp(25px, 5vw, 38px); }
.passive-dialog > p:not(.eyebrow) { margin: 9px 0 22px; color: var(--sl-muted); }

.passive-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.passive-choice {
    min-height: 168px;
    padding: 18px;
    border: 1px solid var(--sl-line);
    border-radius: 16px;
    color: var(--sl-text);
    background: rgba(24, 36, 67, .9);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.passive-choice:hover { border-color: var(--sl-cyan); transform: translateY(-2px); }
.passive-choice:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .42; transform: none; }
.passive-choice b, .passive-choice span { display: block; }
.passive-choice b { color: var(--sl-gold); font-size: 17px; }
.passive-choice span { margin-top: 10px; color: #b9c5e2; font-size: 13px; line-height: 1.55; }

.save-conflict-dialog { width: min(650px, 100%); }
.reward-choice-dialog { width: min(860px, 100%); }
.skill-loadout-dialog { position: relative; width: min(760px, 100%); }
.settings-dialog { position: relative; width: min(620px, 100%); }
.modal-close-button { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid var(--sl-line); border-radius: 8px; color: #eef3ff; background: #202d50; cursor: pointer; font: 700 22px/1 Arial, sans-serif; }
.settings-section-title { margin: 18px 0 9px; color: #aebbd6; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.settings-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.settings-toggles .battle-option-button { display: grid; gap: 4px; min-height: 62px; padding: 10px; }
.settings-toggles .battle-option-button b { color: #dce5ff; font-size: 12px; }
.settings-toggles .battle-option-button span { color: #8fa1c6; font-size: 11px; }
.settings-toggles .battle-option-button[aria-pressed="true"] span { color: var(--sl-gold); }
.volume-settings { display: grid; gap: 12px; }
.volume-setting { display: grid; grid-template-columns: minmax(150px, 1fr) 60px; gap: 8px 18px; align-items: center; padding: 15px 17px; border: 1px solid rgba(141,163,220,.24); border-radius: 12px; background: rgba(18,28,52,.92); }
.volume-setting span { display: grid; gap: 3px; }
.volume-setting b { color: #eef3ff; font-size: 15px; }
.volume-setting small { color: #93a2c2; font-size: 11px; }
.volume-setting output { color: var(--sl-cyan); font-size: 15px; font-weight: 900; text-align: right; }
.volume-setting input[type="range"] { grid-column: 1 / -1; width: 100%; height: 18px; margin: 0; accent-color: var(--sl-cyan); cursor: pointer; }
.settings-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settings-shortcuts > span { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 10px; border: 1px solid rgba(141,163,220,.2); border-radius: 9px; color: #aeb9d2; background: rgba(12,20,39,.72); }
.settings-shortcuts kbd { display: inline-grid; min-width: 28px; min-height: 26px; padding: 3px 7px; place-items: center; border: 1px solid rgba(117,231,255,.42); border-bottom-width: 3px; border-radius: 6px; color: #e8fcff; background: #1b3150; font: 900 11px/1 'Pretendard Variable', sans-serif; }
.settings-shortcuts b { margin-left: auto; color: #c6d1e8; font-size: 11px; text-align: right; }
.settings-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.settings-actions button { min-height: 46px; border: 1px solid var(--sl-line); border-radius: 9px; color: #dce5ff; background: #202d50; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1.2; }
.settings-actions button:last-child { border-color: rgba(117,231,255,.52); color: #effcff; background: rgba(31,83,105,.72); }
.skill-loadout-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skill-loadout-choice { display: grid; gap: 6px; min-height: 132px; padding: 15px; border: 1px solid rgba(141,163,220,.25); border-radius: 12px; color: #aeb9d2; background: rgba(18,28,52,.92); cursor: pointer; text-align: left; font: inherit; }
.skill-loadout-choice.is-equipped { border-color: rgba(199,156,255,.75); background: linear-gradient(145deg, rgba(101,67,145,.75), rgba(32,34,67,.96)); box-shadow: inset 0 0 18px rgba(199,156,255,.12); }
.skill-loadout-choice span { color: var(--sl-cyan); font-size: 10px; font-weight: 900; }
.skill-loadout-choice b { color: #f0e4ff; font-size: 15px; }
.skill-loadout-choice small { line-height: 1.45; }
.skill-loadout-choice em { color: #bfa7dc; font-size: 10px; font-style: normal; }
.skill-loadout-empty { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--sl-line); color: var(--sl-muted); text-align: center; }
.skill-effect-current { color: #e9f4ff; font-weight: 800; }
.skill-effect-next { color: #80e2b7; }
.battle-result-dialog { position: relative; width: min(820px, 100%); }
.battle-result-advice { margin: 14px 0; padding: 13px 15px; border: 1px solid rgba(255,215,106,.36); border-radius: 10px; color: #f6e6b2; background: rgba(78,59,25,.3); line-height: 1.55; }
.battle-result-list { display: grid; gap: 8px; max-height: min(42vh, 390px); overflow-y: auto; }
.battle-result-row { display: grid; grid-template-columns: minmax(130px,1.2fr) repeat(4,minmax(68px,.7fr)); gap: 8px; align-items: center; padding: 11px 13px; border: 1px solid rgba(141,163,220,.2); border-radius: 9px; background: rgba(18,28,52,.86); }
.battle-result-row.is-top { border-color: rgba(117,231,255,.5); background: linear-gradient(90deg,rgba(30,74,94,.58),rgba(18,28,52,.9)); }
.battle-result-row b { color: #f0e4ff; }
.battle-result-row span { color: #aeb9d2; font-size: 11px; text-align: right; }
.battle-result-row small { color: var(--sl-cyan); }
.battle-result-confirm { width: 100%; min-height: 46px; margin-top: 14px; border: 1px solid rgba(117,231,255,.48); border-radius: 8px; color: #eafcff; background: rgba(31,83,105,.65); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; }
.save-conflict-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.save-conflict-choices button { min-height: 122px; padding: 18px; border: 1px solid var(--sl-line); border-radius: 14px; color: var(--sl-text); background: rgba(24, 36, 67, .9); cursor: pointer; text-align: left; font: inherit; }
.save-conflict-choices button:hover { border-color: var(--sl-cyan); background: rgba(32, 51, 91, .96); }
.save-conflict-choices b, .save-conflict-choices span { display: block; }
.save-conflict-choices b { color: var(--sl-gold); font-size: 16px; }
.save-conflict-choices span { margin-top: 9px; color: #b9c5e2; font-size: 12px; line-height: 1.55; }

.spin-button {
    min-height: 52px;
    padding: 10px 22px;
    border: 0;
    border-radius: 7px;
    color: #11172b;
    background: linear-gradient(135deg, #ffe07b, #ffb84d);
    box-shadow: 0 10px 28px rgba(255, 185, 75, .22);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    transition: transform .16s ease, filter .16s ease;
}

.spin-button span, .spin-button small { display: block; }
.spin-button small { margin-top: 2px; opacity: .64; font-size: 10px; letter-spacing: .1em; }
.spin-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); }
.spin-button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .55; }

.game-message { margin: 0; color: #cbd4ee; line-height: 1.55; }

.squad-builder {
    position: relative;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(201,144,59,.32);
    border-radius: 8px;
    background: radial-gradient(circle at 20% 70%, rgba(48,112,118,.1), transparent 33%), linear-gradient(155deg, rgba(14,23,44,.97), rgba(7,13,27,.98));
    box-shadow: 0 22px 60px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.03);
}
.squad-builder::before { content: "TACTICAL WAR ROOM"; position: absolute; top: -8px; left: 18px; padding: 1px 9px; color: #d7ab62; background: #080e1d; font-size: 9px; font-weight: 900; letter-spacing: .14em; }

.squad-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.squad-heading h2 { margin: 0; font-size: 24px; }
.squad-heading p:not(.eyebrow) { margin: 7px 0 0; color: var(--sl-muted); font-size: 14px; }
.squad-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.squad-counts span { padding: 8px 11px; border-radius: 999px; background: #18233f; color: var(--sl-muted); font-size: 12px; }
.squad-counts b { color: var(--sl-gold); }
.squad-actions { display: grid; justify-items: end; gap: 10px; }
.battle-button {
    min-width: 210px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 216, 106, .35);
    border-radius: 6px;
    color: #11172b;
    background: linear-gradient(135deg, #ffe07b, #ffad52);
    box-shadow: 0 8px 24px rgba(255, 183, 73, .17);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
}
.battle-button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .42; }
.fusion-button {
    min-width: 210px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid rgba(199, 156, 255, .35);
    border-radius: 6px;
    color: #e8d8ff;
    background: rgba(91, 56, 137, .48);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}
.fusion-button.is-active { color: #190e27; background: linear-gradient(135deg, #dbc0ff, #b989ff); }
.fusion-button:disabled { cursor: not-allowed; opacity: .38; }
.undo-button {
    min-width: 210px;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid rgba(117, 231, 255, .28);
    border-radius: 6px;
    color: #bfefff;
    background: rgba(35, 78, 102, .4);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
}
.undo-button:hover:not(:disabled) { border-color: rgba(117, 231, 255, .62); background: rgba(40, 98, 128, .56); }
.undo-button:disabled { cursor: not-allowed; opacity: .32; }

.squad-layout { display: grid; grid-template-columns: minmax(330px, .9fr) minmax(360px, 1.1fr); gap: 22px; }
.formation-wrap { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(117,231,255,.16); border-radius: 7px; background: linear-gradient(90deg, rgba(31,76,87,.19), rgba(47,62,79,.16) 52%, rgba(99,46,62,.2)), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 24px); }
.formation-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.formation-labels span { display: grid; align-content: center; justify-items: center; gap: 1px; min-width: 0; min-height: 34px; padding: 3px 5px; border: 1px solid rgba(117,231,255,.16); border-radius: 5px; color: #8ebfd0; font-size: 11px; font-weight: 800; background: rgba(24,56,69,.25); }
.formation-labels span:nth-child(2) { border-color: rgba(255,210,112,.18); color: #e8cd86; background: rgba(76,63,29,.22); }
.formation-labels span:last-child { border-color: rgba(255,130,153,.26); color: #ff9dac; background: rgba(90,38,54,.24); }
.formation-labels b { font-size: 11px; white-space: nowrap; }
.formation-labels small { max-width: 100%; overflow: hidden; color: currentColor; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; opacity: .82; }
.formation-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.formation-slot[data-depth="0"] { grid-column: 1; border-color: rgba(117,231,255,.28); background: linear-gradient(145deg, rgba(24,67,78,.55), rgba(18,26,43,.76)); }
.formation-slot[data-depth="1"] { grid-column: 2; border-color: rgba(255,210,112,.25); background: linear-gradient(145deg, rgba(67,57,32,.48), rgba(21,25,43,.76)); }
.formation-slot[data-depth="2"] { grid-column: 3; border-color: rgba(255, 130, 153, .34); background: linear-gradient(145deg, rgba(60, 40, 70, .62), rgba(22, 24, 48, .76)); }
.formation-slot[data-lane="0"] { grid-row: 1; }
.formation-slot[data-lane="1"] { grid-row: 2; }
.formation-slot[data-lane="2"] { grid-row: 3; }
.formation-slot {
    position: relative;
    min-height: 105px;
    padding: 7px;
    border: 1px dashed rgba(141, 163, 220, .35);
    border-radius: 4px;
    color: #68779f;
    background: linear-gradient(145deg, rgba(31, 66, 80, .55), rgba(14, 23, 45, .78));
    font: inherit;
}
.formation-slot::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.035); pointer-events: none; }
.formation-slot > span { font-size: 24px; }
.formation-slot.is-over { border-color: var(--sl-cyan); background: rgba(40, 100, 124, .4); }
.formation-slot.is-selected { outline: 2px solid var(--sl-gold); outline-offset: 2px; }

.bench-wrap { min-width: 0; padding: 15px; border: 1px solid rgba(141, 163, 220, .2); border-radius: 8px; background: rgba(4, 9, 21, .68); }
.bench-wrap.is-over { border-color: var(--sl-cyan); }
.bench-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bench-title strong, .bench-title span { display: block; }
.bench-title strong { color: var(--sl-cyan); font-size: 12px; letter-spacing: .14em; }
.bench-title span { margin-top: 3px; color: var(--sl-muted); font-size: 12px; }
.bench-title button { padding: 8px 10px; border: 1px solid var(--sl-line); border-radius: 9px; color: #dbe4ff; background: #202d50; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.bench-title button:disabled { cursor: not-allowed; opacity: .35; }

.bench-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-height: 224px; align-content: start; }
.empty-roster { grid-column: 1 / -1; margin: auto; padding: 40px 18px; color: #7180a5; text-align: center; font-size: 13px; line-height: 1.5; }

.hero-card {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    min-width: 0;
    min-height: 102px;
    padding: 9px 6px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #f8f9ff;
    background: linear-gradient(150deg, rgba(52, 68, 112, .9), rgba(24, 33, 62, .96));
    cursor: grab;
    user-select: none;
}
.hero-card:active { cursor: grabbing; }
.hero-card.is-selected { z-index: 2; outline: 3px solid var(--sl-gold); outline-offset: 2px; background: linear-gradient(150deg, rgba(87, 78, 111, .98), rgba(37, 44, 75, .98)); box-shadow: 0 0 0 2px rgba(255,215,106,.18), 0 0 22px rgba(255,215,106,.38); transform: translateY(-2px); }
.hero-card.is-material { outline: 3px solid #c79cff; outline-offset: 2px; box-shadow: 0 0 25px rgba(199, 156, 255, .3); }
.hero-card.is-fusion-target { border-color: var(--sl-cyan) !important; }
.hero-card.grade-고급 { border-color: rgba(117, 231, 255, .58); box-shadow: inset 0 0 18px rgba(117, 231, 255, .08); }
.hero-card.grade-희귀 { border-color: rgba(199, 156, 255, .65); box-shadow: inset 0 0 20px rgba(199, 156, 255, .1); }
.hero-card.grade-유니크 { border-color: rgba(255, 215, 106, .78); box-shadow: 0 0 22px rgba(255, 215, 106, .12); }
.hero-card .hero-icon { font-family: Arial, sans-serif; font-size: 28px; line-height: 1; }
.hero-card strong { overflow: hidden; width: 100%; margin-top: 7px; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hero-card small { margin-top: 3px; color: #9eaccd; font-size: 10px; }
.hero-card .hero-range { margin-top: 4px; padding: 3px 6px; border: 1px solid rgba(117,231,255,.24); border-radius: 3px; color: #bdeff8; background: rgba(19,70,86,.34); font-size: 10px; font-style: normal; font-weight: 800; }
.hero-card .hero-range b { color: var(--sl-cyan); font-size: 10px; }
.hero-card .hero-skill-badge { overflow: hidden; width: calc(100% - 4px); margin-top: 4px; padding: 2px 4px; border: 1px solid rgba(202,155,255,.3); border-radius: 4px; color: #eadcff; background: rgba(75,48,108,.54); font-size: 8px; font-weight: 850; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.hero-card.shows-inherited-skill .hero-range { display: none; }
.hero-card .hero-skill-badge.is-inheritance-preview { display: grid; gap: 2px; padding: 4px 5px; border-color: rgba(199,156,255,.62); background: linear-gradient(135deg, rgba(91,55,132,.8), rgba(52,37,76,.88)); line-height: 1.3; text-align: left; text-overflow: clip; white-space: normal; }
.hero-card .hero-skill-badge.is-inheritance-preview b { overflow: hidden; color: #f2e4ff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.hero-card .hero-skill-badge.is-inheritance-preview small { display: -webkit-box; overflow: hidden; margin: 0; color: #c9badb; font-size: 9px; font-weight: 700; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero-card .hero-level { position: absolute; top: 6px; right: 6px; padding: 2px 5px; border-radius: 999px; color: #151b2d; background: var(--sl-gold); font-size: 9px; font-weight: 900; }
.hero-selected-badge { display: none; position: absolute; top: 5px; left: 5px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.34); border-radius: 3px; color: #211b0c; background: var(--sl-gold); font-size: 8px; font-weight: 950; letter-spacing: -.02em; }
.hero-card.is-selected .hero-selected-badge { display: block; }
.formation-slot .hero-card { width: 100%; min-height: 89px; }

.hero-detail {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(141, 163, 220, .2);
    border-radius: 8px;
    background: rgba(7, 12, 27, .48);
}
.hero-detail > strong { color: var(--sl-cyan); font-size: 12px; letter-spacing: .08em; }
.hero-detail.is-revealed { animation: hero-detail-reveal .65s ease-out; }
.hero-detail-title { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(117,231,255,.18); }
.hero-detail-title span { padding: 3px 6px; border: 1px solid rgba(117,231,255,.42); border-radius: 3px; color: var(--sl-cyan); background: rgba(26,77,95,.38); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.hero-detail-title b { color: #fff4c8; font-size: 16px; }
.hero-detail-title em { color: var(--sl-gold); font-size: 11px; font-style: normal; font-weight: 850; }
@keyframes hero-detail-reveal { 0% { border-color: var(--sl-gold); box-shadow: 0 0 0 3px rgba(255,215,106,.35), 0 0 28px rgba(255,215,106,.28); } 100% { border-color: rgba(141,163,220,.2); box-shadow: none; } }
.hero-detail p { margin: 7px 0 0; color: var(--sl-muted); font-size: 13px; line-height: 1.55; }
.hero-detail-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; margin-top: 9px; }
.hero-detail-grid b { color: var(--sl-text); }
.hero-detail-grid .hero-detail-range { color: var(--sl-cyan); font-size: 13px; }
.hero-detail-grid .hero-detail-formation { color: #ffe093; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.skill-tag { padding: 6px 9px; border: 1px solid rgba(146,112,190,.35); border-radius: 999px; color: #9b91ab; background: rgba(45, 36, 61, .72); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.skill-tag.is-equipped { border-color: rgba(199,156,255,.72); color: #f1e5ff; background: rgba(113,76,163,.58); box-shadow: inset 0 0 12px rgba(199,156,255,.12); }
.skill-tag.is-empty { cursor: default; }
.fusion-guide { color: #dbc0ff !important; }
.fusion-preview { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(199, 156, 255, .4); border-radius: 8px; background: rgba(82, 51, 126, .28); }
.fusion-preview b { color: #e5ccff; font-size: 12px; }
.fusion-preview span { color: #f0e8ff; font-size: 11px; line-height: 1.45; }
.fusion-preview small { color: #a998c4; font-size: 10px; line-height: 1.45; }

.step-note {
    margin-top: 18px;
    padding: 18px 22px;
    border: 1px solid var(--sl-line);
    border-radius: 18px;
    background: rgba(12, 19, 38, .72);
}

.step-note strong { color: var(--sl-cyan); }
.step-note p { margin: 7px 0 5px; color: #d7def2; }
.step-note span { color: var(--sl-muted); font-size: 13px; }
.asset-credit { display: block; margin-top: 9px; color: #7785a8; font-size: 11px; }
.asset-credit a { color: var(--sl-cyan); }

/* Framed command UI: the battlefield stays central and the shop opens on demand. */
.command-deck {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 168px;
    min-height: 0;
    padding: 14px;
    gap: 12px;
    background:
        radial-gradient(circle at 50% 22%, rgba(104, 70, 151, .2), transparent 38%),
        linear-gradient(145deg, #171327, #090d1a 58%, #121021);
}
.field-rail,
.action-rail {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 2px solid #44364d;
    border-radius: 9px;
    background: linear-gradient(180deg, #211929, #100f1b);
    box-shadow: inset 0 0 0 3px #0a0a12, 0 8px 24px rgba(0,0,0,.34);
}
.action-rail { min-height: 0; overflow-y: auto; }
.shop-open-button {
    display: grid;
    place-items: center;
    min-height: 104px;
    padding: 12px 8px;
    border: 2px solid #a77e47;
    border-radius: 6px;
    color: #f8df9a;
    background: linear-gradient(180deg, #4e3340, #251a2a);
    box-shadow: inset 0 0 0 3px #17101c, 0 6px 0 #090910;
    cursor: pointer;
    font: inherit;
}
.shop-open-button > span { color: var(--sl-gold); font-size: 25px; text-shadow: 0 0 14px rgba(255,215,106,.55); }
.shop-open-button b { margin-top: 3px; font-size: 15px; }
.shop-open-button small { margin-top: 4px; color: #b9a9bd; font-size: 9px; }
.shop-open-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.shop-open-button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .45; }
.compact-bench { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 9px; border-color: #493a50; background: #110e19; }
.compact-bench .bench-title { margin-bottom: 8px; }
.compact-bench .bench-title span { font-size: 10px; }
.compact-bench .bench-title b { color: var(--sl-gold); }
.compact-bench .bench-title button { width: 32px; min-height: 32px; padding: 0; }
.compact-bench .bench-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; min-height: 0; overflow-y: auto; }
.compact-bench .hero-card { min-height: 96px; padding: 7px 4px; }
.compact-bench .hero-card.shows-inherited-skill { min-height: 118px; }
.compact-bench .hero-card .hero-icon { font-size: 25px; }
.compact-bench .hero-card strong { font-size: 11px; }
.compact-bench .empty-roster { padding: 22px 8px; font-size: 11px; }

.battle-frame {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: 18px 16px 16px;
    border: 5px solid #b7a86e;
    border-radius: 5px;
    background: #080b15;
    box-shadow: inset 0 0 0 4px #40374b, 0 0 0 4px #241b2b, 0 0 28px rgba(159,95,214,.28);
}
.battle-frame::before,
.battle-frame::after { content: ""; position: absolute; z-index: 3; width: 26px; height: 26px; border-color: #eee1a3; pointer-events: none; }
.battle-frame::before { top: 5px; left: 5px; border-top: 3px solid; border-left: 3px solid; }
.battle-frame::after { right: 5px; bottom: 5px; border-right: 3px solid; border-bottom: 3px solid; }
.battle-frame-top { position: absolute; z-index: 5; top: -19px; right: 34px; left: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 31px; padding: 0 12px; border: 2px solid #85794f; color: #ad9fb0; background: #211b26; box-shadow: 0 3px 0 #0b0910; font-size: 9px; }
.battle-frame-top strong { color: #f4e8bd; letter-spacing: .14em; text-align: center; }
.battle-frame-top span:last-child { text-align: right; }
.battle-frame-top b { color: var(--sl-gold); font-size: 14px; }
.idle-battlefield { position: relative; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #292735; image-rendering: pixelated; }
.idle-battlefield[hidden] { display: none; }
.idle-battlefield::before { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 49%; background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(16,14,24,.34) 30px 33px), repeating-linear-gradient(90deg, transparent 0 62px, rgba(16,14,24,.25) 62px 65px), linear-gradient(180deg, #4b4653, #302d39); box-shadow: inset 0 12px #252330, inset 0 15px #5d5663; }
.idle-battlefield::after { content: ""; position: absolute; z-index: 1; right: 4%; bottom: 47%; left: 4%; height: 4px; background: #171621; box-shadow: 0 -3px #4b4858; }
.battle-sky { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #242237, #302e42 52%, #211f2c 53%); }
.battle-sky::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 3px, transparent 3px 14px); opacity: .65; }
.pixel-cave-back { position: absolute; top: 3%; right: 2%; left: 2%; height: 55%; clip-path: polygon(0 13%, 4% 13%, 4% 6%, 11% 6%, 11% 0, 89% 0, 89% 5%, 96% 5%, 96% 13%, 100% 13%, 100% 100%, 0 100%); background: #48495c; box-shadow: inset 0 -13px #313240, inset 18px 0 #3b3c4d, inset -18px 0 #3b3c4d; }
.pixel-cave-back::before { content: ""; position: absolute; top: 18px; right: 5%; left: 5%; height: 24px; background: repeating-linear-gradient(90deg, #5a5b70 0 43px, #434457 43px 58px, #353647 58px 70px); box-shadow: 0 23px rgba(24,24,36,.23), 0 46px rgba(18,18,29,.3); }
.pixel-cave-mouth { position: absolute; z-index: 1; top: 12%; right: 20%; left: 20%; height: 43%; clip-path: polygon(12% 0, 88% 0, 88% 5%, 94% 5%, 94% 13%, 100% 13%, 100% 100%, 0 100%, 0 14%, 6% 14%, 6% 5%, 12% 5%); background: radial-gradient(ellipse at 50% 82%, #171421 0 21%, #0d0c15 57%, #07070c 100%); box-shadow: inset 16px 0 #242432, inset -16px 0 #242432, inset 0 12px #303142; }
.pixel-cave-mouth::after { content: ""; position: absolute; right: 13%; bottom: 10%; left: 13%; height: 11px; background: #171622; box-shadow: -34px 5px #242431, 46px 4px #282735, 91px -1px #1e1d29; }
.cave-mist { position: absolute; z-index: 2; top: 36%; right: 21%; left: 21%; height: 18%; overflow: hidden; opacity: .5; }
.cave-mist i { position: absolute; width: 44%; height: 18px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(142,119,170,.34), transparent); filter: blur(2px); animation: cave-mist-drift 7s steps(8) infinite alternate; }
.cave-mist i:nth-child(1) { top: 8%; left: -8%; }
.cave-mist i:nth-child(2) { top: 42%; left: 28%; animation-delay: -2.4s; animation-duration: 8.5s; }
.cave-mist i:nth-child(3) { right: -6%; bottom: 4%; animation-delay: -4.8s; animation-duration: 6.5s; }
.shadow-watchers { position: absolute; z-index: 2; top: 27%; right: 24%; left: 24%; height: 18%; pointer-events: none; }
.shadow-watchers i { position: absolute; width: 5px; height: 3px; border-radius: 50%; background: #ff6f8c; box-shadow: 12px 0 #ff6f8c, 0 0 7px #dc4267, 12px 0 7px #dc4267; animation: shadow-watch 4.6s steps(1) infinite; }
.shadow-watchers i:nth-child(1) { top: 12%; left: 18%; }
.shadow-watchers i:nth-child(2) { top: 48%; right: 19%; animation-delay: -1.7s; }
.shadow-watchers i:nth-child(3) { right: 44%; bottom: 6%; animation-delay: -3.1s; }
@keyframes cave-mist-drift { from { transform: translateX(-8%); opacity: .28; } to { transform: translateX(42%); opacity: .7; } }
@keyframes shadow-watch { 0%, 86%, 100% { opacity: .82; } 88%, 94% { opacity: .08; } }
.pixel-stalactites { position: absolute; z-index: 2; top: 12%; right: 20%; left: 20%; height: 26%; }
.pixel-stalactites i { position: absolute; top: 0; width: 13%; height: 100%; background: #333447; clip-path: polygon(0 0, 100% 0, 72% 32%, 58% 32%, 44% 100%, 29% 32%, 15% 32%); filter: drop-shadow(5px 4px 0 #191925); }
.pixel-stalactites i:nth-child(1) { left: 2%; height: 71%; }
.pixel-stalactites i:nth-child(2) { left: 21%; height: 46%; }
.pixel-stalactites i:nth-child(3) { left: 43%; height: 84%; }
.pixel-stalactites i:nth-child(4) { right: 20%; height: 57%; }
.pixel-stalactites i:nth-child(5) { right: 1%; height: 77%; }
.pixel-rocks { position: absolute; z-index: 1; bottom: 47%; width: 24%; height: 15%; background: #444554; clip-path: polygon(0 74%, 10% 74%, 10% 47%, 24% 47%, 24% 20%, 42% 20%, 42% 0, 58% 0, 58% 28%, 76% 28%, 76% 54%, 91% 54%, 91% 76%, 100% 76%, 100% 100%, 0 100%); filter: drop-shadow(5px 4px 0 #1b1b27); }
.pixel-rocks::after { content: ""; position: absolute; inset: 18% 13% 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 7px, transparent 7px 23px); }
.pixel-rocks-left { left: 0; }
.pixel-rocks-right { right: 0; transform: scaleX(-1); }
.cave-glow { position: absolute; z-index: 2; top: 21%; width: 8px; height: 8px; background: #d8a4ff; box-shadow: 0 0 0 4px #6c3f8e, 0 0 0 8px #312340, 0 0 26px 8px rgba(201,126,255,.58); }
.cave-glow::after { content: ""; position: absolute; top: 16px; left: -2px; width: 12px; height: 5px; background: #493153; box-shadow: 0 6px #251c30; }
.cave-glow-left { left: 11%; }
.cave-glow-right { right: 11%; }
.enemy-scout-panel { position: absolute; z-index: 4; top: 11%; left: 50%; display: grid; width: min(520px, 48%); padding: 11px 13px; border: 1px solid rgba(255,215,106,.38); border-left: 4px solid var(--sl-gold); border-radius: 3px; color: #dce8ff; background: linear-gradient(135deg, rgba(7,13,26,.92), rgba(28,20,37,.88)); box-shadow: 0 10px 25px rgba(0,0,0,.34), inset 0 0 22px rgba(117,231,255,.04); transform: translateX(-50%); }
.enemy-scout-panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(141,163,220,.2); }
.enemy-scout-panel header span { color: var(--sl-gold); font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.enemy-scout-panel header b { color: #f3e8c3; font-size: 12px; }
.enemy-scout-traits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.enemy-scout-traits span { padding: 4px 7px; border: 1px solid rgba(255,130,153,.28); border-radius: 3px; color: #e4cad2; background: rgba(83,31,48,.45); font-size: 10px; font-weight: 750; line-height: 1.35; }
.enemy-scout-traits .enemy-force-summary { border-color: rgba(117,231,255,.3); color: #bfeffc; background: rgba(23,70,86,.42); }
.enemy-scout-traits .enemy-danger { border-color: rgba(255,215,106,.5); color: #24180a; background: #ffd76a; font-weight: 950; }
.enemy-scout-traits .danger-danger { color: #2b1209; background: #ff9a65; }
.enemy-scout-traits .danger-extreme, .enemy-scout-traits .danger-boss { color: #fff0f3; background: #a92e50; box-shadow: 0 0 12px rgba(255,79,119,.32); }
.enemy-scout-panel.danger-extreme, .enemy-scout-panel.danger-boss { border-color: rgba(255,90,126,.62); border-left-color: #ff5a7e; box-shadow: 0 10px 25px rgba(0,0,0,.34), 0 0 24px rgba(255,67,112,.12); }
.enemy-scout-traits b { margin-right: 3px; color: #ff9caf; }
.field-formation { position: absolute; right: 9%; bottom: 3%; left: 9%; z-index: 4; padding: 10px; border-color: rgba(224,203,147,.22); background: rgba(14,14,23,.3); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.formation-hero-detail { max-height: 210px; margin: 0; padding: 9px 11px; overflow-y: auto; border-color: rgba(117,231,255,.3); border-radius: 5px; background: rgba(5,12,24,.94); box-shadow: inset 0 0 16px rgba(117,231,255,.05); }
.formation-hero-detail > strong { font-size: 11px; }
.formation-hero-detail p { margin-top: 5px; color: #a7b8d8; font-size: 11px; }
.formation-hero-detail .hero-detail-title { gap: 8px; padding-bottom: 6px; }
.formation-hero-detail .hero-detail-title span { font-size: 10px; }
.formation-hero-detail .hero-detail-title b { font-size: 13px; }
.formation-hero-detail .hero-detail-title em { font-size: 11px; }
.formation-hero-detail .hero-detail-grid { grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; margin-top: 6px; font-size: 10px; }
.formation-hero-detail .hero-detail-grid > span { color: #91a4ca; font-size: 10px; }
.formation-hero-detail .hero-detail-grid b { overflow: hidden; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.formation-hero-detail .hero-detail-grid .hero-detail-range { font-size: 11px; }
.formation-hero-detail .skill-tags { flex-wrap: nowrap; gap: 5px; margin-top: 7px; overflow-x: auto; padding-bottom: 2px; }
.formation-hero-detail .skill-tag { display: grid; flex: 0 0 min(210px, 72%); gap: 3px; min-height: 48px; padding: 6px 8px; border-radius: 6px; font-size: 10px; text-align: left; }
.formation-hero-detail .skill-tag b { color: inherit; font-size: 10px; }
.formation-hero-detail .skill-tag small { color: #aebad2; font-size: 10px; font-weight: 650; line-height: 1.35; white-space: normal; }
.formation-hero-detail .skill-tag.is-equipped small { color: #d9cfee; }
.formation-hero-detail .fusion-preview { margin-top: 7px; padding: 8px 10px; }
.field-formation .formation-labels { gap: 8px; }
.field-formation .formation-labels span { min-height: 34px; font-size: 11px; text-shadow: 0 2px 2px #090810; }
.field-formation .formation-labels b { font-size: 11px; }
.field-formation .formation-labels small { font-size: 9px; }
.field-formation .formation-grid { gap: 6px; }
.field-formation .formation-slot { min-height: 68px; padding: 4px; background: rgba(13,18,30,.58); border-color: rgba(209,193,151,.34); }
.field-formation .formation-slot[data-depth="0"] { background: rgba(22,61,72,.58); border-color: rgba(117,231,255,.38); }
.field-formation .formation-slot[data-depth="1"] { background: rgba(64,53,30,.52); border-color: rgba(255,210,112,.34); }
.field-formation .formation-slot[data-depth="2"] { background: rgba(68,34,48,.58); border-color: rgba(255,130,153,.44); }
.field-formation .formation-slot .hero-card { min-height: 62px; padding: 4px; }
.field-formation .hero-card .hero-icon { font-size: 22px; }
.field-formation .hero-card strong { margin-top: 3px; font-size: 11px; }
.field-formation .hero-card .hero-level { top: 4px; right: 4px; padding: 2px 5px; font-size: 10px; }
.field-formation .hero-card .hero-selected-badge { top: 4px; left: 4px; font-size: 10px; }
.field-formation .hero-card small,
.field-formation .hero-card .hero-skill-badge { display: none; }
.field-formation .hero-card .hero-range { position: absolute; z-index: 2; top: 27px; right: 4px; bottom: auto; left: auto; display: block; overflow: hidden; max-width: 52%; margin: 0; padding: 2px 5px; border-color: rgba(117,231,255,.38); background: rgba(8,29,45,.9); font-size: 10px; line-height: 1.25; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.field-formation .hero-card .hero-range b { font-size: 10px; }
.battle-frame .game-canvas { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; border: 0; }
.action-rail { justify-content: flex-start; }
.action-rail .squad-counts { display: grid; justify-content: stretch; }
.action-rail .squad-counts span { border-radius: 5px; text-align: center; }
.field-utility-buttons { display: grid; gap: 7px; }
.field-utility-buttons button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 48px; padding: 6px 7px; border: 1px solid rgba(198,168,101,.38); border-radius: 5px; color: #f1e2b5; background: linear-gradient(145deg, rgba(69,48,61,.92), rgba(24,24,41,.96)); box-shadow: inset 0 0 0 2px rgba(8,9,16,.6); cursor: pointer; font: inherit; text-align: left; }
.field-utility-buttons button:hover { border-color: #d5aa5a; filter: brightness(1.1); }
.field-utility-buttons button > i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,215,106,.5); border-radius: 4px; color: var(--sl-gold); background: rgba(10,10,19,.62); font-size: 17px; font-style: normal; }
.field-utility-buttons button > span { display: grid; gap: 2px; min-width: 0; }
.field-utility-buttons button b { font-size: 10px; }
.field-utility-buttons button small { overflow: hidden; color: #9ba9c7; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.action-rail .battle-button,
.action-rail .fusion-button,
.action-rail .undo-button { min-width: 0; width: 100%; }
.action-rail .battle-button { min-height: 82px; }
.fusion-info { display: grid; gap: 5px; padding: 9px; border: 1px solid #453849; border-radius: 5px; background: #15121e; }
.fusion-info b { color: #d9c6ef; font-size: 10px; }
.fusion-info span { color: #958a9e; font-size: 9px; line-height: 1.45; }
.fusion-info.is-active { border-color: rgba(199,156,255,.58); background: rgba(75,48,108,.38); }
.skill-loadout-button { min-height: 38px; border: 1px solid rgba(199,156,255,.4); border-radius: 6px; color: #eadcff; background: rgba(75,48,108,.5); cursor: pointer; font: inherit; font-size: 10px; font-weight: 900; }
.skill-loadout-button:disabled { cursor: not-allowed; opacity: .36; }
.formation-presets { display: grid; gap: 6px; padding: 9px; border: 1px solid rgba(117,231,255,.18); border-radius: 6px; background: rgba(14,25,43,.72); }
.formation-presets > b { color: #9edcff; font-size: 10px; }
.preset-slots, .preset-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.preset-actions { grid-template-columns: 1.35fr 1fr; }
.preset-slots button, .preset-actions button { min-height: 30px; border: 1px solid rgba(141,163,220,.25); border-radius: 5px; color: #aeb9d2; background: #17223b; cursor: pointer; font-family: inherit; font-size: 9px; font-weight: 800; }
.preset-slots button.is-active { border-color: var(--sl-cyan); color: #effcff; background: rgba(31,83,105,.72); }
.preset-slots button.has-data::after { content: " •"; color: #80e2b7; }
.preset-actions button:disabled { cursor: not-allowed; opacity: .38; }
.formation-presets > span { color: #7f8ba7; font-size: 8px; line-height: 1.35; }
.field-tip { margin-top: auto; padding: 10px; border: 1px solid #453849; border-radius: 5px; background: #15121e; }
.field-tip b, .field-tip span { display: block; }
.field-tip b { color: #e7d49f; font-size: 10px; }
.field-tip span { margin-top: 5px; color: #958a9e; font-size: 9px; line-height: 1.5; }

.shop-modal { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 24px; }
.shop-modal[hidden] { display: none; }
.shop-modal-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(3,3,8,.78); backdrop-filter: blur(5px); cursor: default; }
.shop-modal .hero-shop-stage { position: relative; z-index: 1; width: min(1360px, calc(100vw - 34px)); max-height: calc(100vh - 48px); overflow-y: auto; border: 4px solid #9b895e; border-radius: 7px; background: linear-gradient(145deg, #21182a, #0b0d19); box-shadow: 0 0 0 5px #211825, 0 30px 90px rgba(0,0,0,.75), 0 0 38px rgba(145,83,195,.22); }
.shop-modal .slot-stage-heading { align-items: center; padding-right: 2px; }
.shop-modal .slot-stage-heading h2 { margin: 3px 0 0; color: #f3e6bd; font-size: 25px; }
.collection-dialog { position: relative; z-index: 1; width: min(1180px, calc(100vw - 34px)); max-height: calc(100vh - 48px); padding: 20px; overflow-y: auto; border: 4px solid #8f794f; border-radius: 8px; background: linear-gradient(145deg, #21182a, #0b0d19 72%); box-shadow: 0 0 0 5px #211825, 0 30px 90px rgba(0,0,0,.75), 0 0 38px rgba(145,83,195,.22); }
.collection-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(224,203,147,.22); }
.collection-dialog > header h2 { margin: 3px 0 5px; color: #f4e7ba; font-size: 25px; }
.collection-dialog > header span { color: #93a1bf; font-size: 11px; }
.collection-dialog > header > button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: #e7dcf0; background: #30263a; cursor: pointer; font: inherit; font-size: 24px; }
.collection-dialog .relic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.relic-card { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 166px; padding: 13px; border: 1px solid color-mix(in srgb, var(--relic-grade-color) 48%, #27324d); border-radius: 7px; color: #dce5fa; background: linear-gradient(150deg, color-mix(in srgb, var(--relic-grade-color) 10%, #17213a), #090e1d 72%); box-shadow: inset 0 0 20px color-mix(in srgb, var(--relic-grade-color) 6%, transparent); }
.relic-card.is-undiscovered { filter: saturate(.4); opacity: .62; }
.relic-card-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.relic-card-head .relic-icon,
.relic-card-head .relic-symbol { width: 42px; height: 42px; flex-basis: 42px; border-radius: 7px; }
.relic-card-head .relic-symbol { font-size: 22px; }
.relic-card-head > span { display: grid; gap: 3px; min-width: 0; }
.relic-card-head small { color: var(--relic-grade-color); font-size: 8px; font-weight: 900; }
.relic-card-head b { overflow: hidden; color: #fff2c8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.relic-card-head em { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--relic-grade-color) 45%, transparent); border-radius: 999px; color: var(--relic-grade-color); font-size: 8px; font-style: normal; font-weight: 900; }
.relic-card p { margin: 0; color: #bac6df; font-size: 10px; line-height: 1.55; }
.relic-card footer { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.07); color: #7f90b4; font-size: 8px; font-weight: 800; }
.pet-dialog { width: min(900px, calc(100vw - 34px)); }
.pet-dialog .pet-choices { gap: 12px; }
.pet-dialog .pet-choice { min-height: 116px; padding: 14px; }
.pet-dialog .pet-choice-art { width: 72px; height: 72px; }
.pet-dialog .pet-choice b { font-size: 14px; }
.pet-dialog .pet-choice small { margin-top: 6px; font-size: 10px; line-height: 1.5; }
.shop-close-button { flex: 0 0 42px; width: 42px; height: 42px; border: 2px solid #786b58; border-radius: 5px; color: #efe2c4; background: #3a2934; cursor: pointer; font: 700 25px/1 Arial, sans-serif; }
.shop-close-button:hover { filter: brightness(1.16); }
body.shop-is-open { overflow: hidden; }
body.player-hub-is-open { overflow: hidden; }
body.battle-is-active .play-layout { grid-template-columns: minmax(0, 1fr); }
body.battle-is-active .player-sidebar { display: none; }
body.battle-is-active .command-deck { min-height: 0; padding: 14px; }
body.battle-is-active .battle-frame { min-height: 0; }
body.battle-is-active .battle-frame .game-canvas { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; }
body.battle-is-active .game-heading { padding-top: 9px; padding-bottom: 9px; }
body.battle-is-active .game-controls { position: relative; z-index: 5; }
body.game-fullscreen-view { overflow-y: auto; background: #050914; }
body.game-fullscreen-view .snomet-tool-nav { display: none !important; }
body.game-fullscreen-view .slot-light-page { width: min(calc(100vw - 24px), 1880px); padding: 10px 0 28px; }
body.game-fullscreen-view .game-heading { margin-bottom: 10px; padding-top: 9px; padding-bottom: 9px; }
body.game-fullscreen-view .game-shell { border-color: rgba(255,215,106,.62); }
body.game-fullscreen-view .command-deck { grid-template-columns: clamp(230px, 14vw, 270px) minmax(0, 1fr) clamp(168px, 10vw, 190px); height: clamp(560px, calc(100vh - 285px), 800px); min-height: 0; padding: 10px; }
body.game-fullscreen-view .battle-frame { width: 100%; height: 100%; min-height: 0; }
body.game-fullscreen-view .idle-battlefield { height: 100%; min-height: 0; }
body.game-fullscreen-view.battle-is-active .battle-frame { display: grid; place-items: center; }
body.game-fullscreen-view.battle-is-active .battle-frame .game-canvas { width: auto; max-width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 9; }
body.game-fullscreen-view .field-rail,
body.game-fullscreen-view .action-rail { min-height: 0; }
body.game-fullscreen-view .compact-bench { overflow: hidden; }

@media (min-width: 2200px) and (min-height: 1200px) {
    body.game-fullscreen-view .slot-light-page { width: min(calc(100vw - 40px), 2080px); }
    body.game-fullscreen-view .command-deck { grid-template-columns: 280px minmax(0, 1fr) 190px; height: 900px; }
}

/* Game lobby chrome */
.snomet-tool-nav { height: 48px !important; border-color: rgba(117, 151, 211, .2) !important; background: rgba(5, 9, 19, .9) !important; box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.snomet-tool-nav .nav-content { max-width: 1580px !important; }
.snomet-tool-nav .nav-logo { color: #ecf3ff !important; }
.snomet-tool-nav .nav-links a { color: #8090b0 !important; font-size: 12px !important; }
.snomet-tool-nav .nav-links a:hover { color: var(--sl-cyan) !important; }
.snomet-tool-nav .hamburger-btn span { background-color: #dce8ff !important; }
.step-note { border-radius: 10px; background: rgba(7,12,25,.78); }
.step-note strong { font-size: 11px; letter-spacing: .08em; }
.step-note p, .step-note span { font-size: 11px; }

@media (max-width: 1100px) {
    .growth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .command-deck { grid-template-columns: 180px minmax(0, 1fr); }
    .formation-hero-detail { max-height: 138px; }
    .field-formation .formation-slot { min-height: 60px; }
    .action-rail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(120px, .7fr) repeat(3, minmax(125px, 1fr)); align-items: center; }
    .action-rail .squad-counts { grid-row: 1; }
    .action-rail .battle-button { min-height: 52px; }
    .formation-presets { grid-column: 1 / -1; }
    .field-tip { display: none; }
    .enemy-scout-panel { top: 8%; width: 64%; padding: 8px 10px; }
}

@media (max-width: 700px) {
    .slot-light-page { width: min(100% - 20px, 1440px); padding-top: 24px; }
    .player-sidebar [data-sidebar-panel] { min-height: 0; }
    .player-hub { padding: 10px; }
    .player-sidebar { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
    .growth-grid { grid-template-columns: 1fr; }
    .player-hub-launcher { order: 3; width: 100%; }
    .player-hub-launcher button { flex: 1; }
    .game-heading { align-items: flex-start; flex-direction: column; gap: 12px; padding: 13px; }
    .game-heading-actions { width: 100%; justify-content: space-between; }
    .command-deck { display: flex; flex-direction: column; min-height: 0; padding: 10px; }
    .battle-frame { order: 1; min-height: 410px; padding: 16px 9px 9px; }
    .idle-battlefield { min-height: 385px; }
    .battle-frame .game-canvas { height: 385px; min-height: 385px; }
    body.battle-is-active .battle-frame .game-canvas { height: 385px; min-height: 385px; aspect-ratio: auto; }
    .battle-frame-top { right: 18px; left: 18px; padding: 0 7px; }
    .battle-frame-top strong { font-size: 8px; }
    .field-formation { right: 3%; bottom: 4%; left: 3%; }
    .enemy-scout-panel { width: 78%; }
    .formation-hero-detail { max-height: 138px; }
    .field-formation .formation-slot { min-height: 60px; }
    .field-rail { order: 2; display: grid; grid-template-columns: 128px minmax(0, 1fr); }
    .shop-open-button { min-height: 100%; }
    .compact-bench { max-height: 260px; }
    .action-rail { order: 3; display: grid; grid-template-columns: 1fr 1fr; }
    .action-rail .squad-counts { grid-column: 1 / -1; display: flex; }
    .action-rail .field-utility-buttons { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
    .action-rail .battle-button { grid-column: 1 / -1; min-height: 52px; }
    .shop-modal { padding: 10px; }
    .shop-modal .hero-shop-stage { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 16px 12px 18px; }
    .collection-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 15px 11px; }
    .collection-dialog .relic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pet-dialog .pet-choices { grid-template-columns: 1fr; }
    .shop-modal .slot-stage-heading { align-items: flex-start; }
    .shop-modal .slot-stage-heading h2 { font-size: 21px; }
    .brand-mark { flex-basis: 44px; width: 44px; height: 44px; }
    .plan-link { padding: 9px 12px; }
    .status-bar { grid-template-columns: repeat(2, 1fr); }
    .status-bar div:nth-child(even) { border-right: 0; }
    .status-bar div:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--sl-line); }
    .status-bar div { padding: 11px 14px; }
    .hud-playback { justify-content: flex-start; margin: 7px 10px 0; padding: 8px; }
    .hud-playback::before { flex-basis: 100%; margin: 0 0 2px; }
    .game-canvas { min-height: 360px; aspect-ratio: 4 / 3; }
    .slot-dom-stage { min-height: 0; padding: 18px 14px 22px; }
    .slot-stage-heading small { display: none; }
    .slot-stage-layout { grid-template-columns: 1fr; gap: 18px; }
    .hero-shop-layout { grid-template-columns: 1fr; padding: 0; }
    .hero-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-offer { min-height: 210px; }
    .slot-cell { min-height: 78px; border-radius: 12px; }
    .slot-result-panel { min-height: 0; padding: 18px; }
    .slot-result-panel strong { margin-top: 10px; }
    .slot-result-panel p { min-height: 0; margin: 8px 0 12px; }
    .game-controls, .game-controls.fixed-shop-controls { grid-template-columns: 1fr; gap: 12px; }
    .game-message { text-align: center; font-size: 14px; }
    .battle-playback { justify-content: center; flex-wrap: wrap; }
    .passive-choices { grid-template-columns: 1fr; }
    .skill-loadout-list { grid-template-columns: 1fr; }
    .settings-toggles { grid-template-columns: 1fr; }
    .settings-shortcuts { grid-template-columns: 1fr; }
    .battle-result-row { grid-template-columns: 1fr 1fr; }
    .battle-result-row b { grid-column: 1 / -1; }
    .save-conflict-choices { grid-template-columns: 1fr; }
    .passive-choice { min-height: 0; }
    .squad-heading { align-items: flex-start; flex-direction: column; }
    .squad-actions { width: 100%; justify-items: stretch; }
    .squad-counts { justify-content: flex-start; }
    .battle-button { width: 100%; }
    .fusion-button { width: 100%; }
    .tutorial-coach { right: 10px; bottom: 10px; width: calc(100% - 20px); }
    .squad-layout { grid-template-columns: 1fr; }
    .pet-panel { grid-template-columns: 1fr; }
    .formation-slot { min-height: 92px; }
    .bench-list { grid-template-columns: repeat(4, minmax(70px, 1fr)); overflow-x: auto; }
}

@media (max-width: 430px) {
    .enemy-scout-panel { top: 7%; width: 88%; }
    .enemy-scout-panel header span { font-size: 8px; }
    .enemy-scout-panel header b, .enemy-scout-traits span { font-size: 9px; }
    .field-rail { grid-template-columns: 105px minmax(0, 1fr); }
    .shop-open-button b { font-size: 13px; }
    .shop-open-button small { font-size: 8px; }
    .field-formation .formation-slot { min-height: 56px; }
    .formation-hero-detail { max-height: 120px; padding: 7px 8px; }
    .field-formation .formation-slot .hero-card { min-height: 52px; }
    .field-formation .hero-card .hero-icon { font-size: 18px; }
    .field-formation .hero-card strong { font-size: 10px; }
    .battle-frame, .idle-battlefield { min-height: 355px; }
    .battle-frame .game-canvas { height: 355px; min-height: 355px; }
    body.battle-is-active .battle-frame .game-canvas { height: 355px; min-height: 355px; aspect-ratio: auto; }
    .pet-choices { grid-template-columns: 1fr; }
    .collection-dialog .relic-list { grid-template-columns: 1fr; }
    .hero-shop-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
    .slot-reels { gap: 6px; }
    .slot-reel { gap: 6px; }
    .slot-cell { min-height: 67px; padding: 6px; }
    .slot-cell-label { font-size: 10px; }
    .nudge-button { min-height: 34px; padding: 4px; font-size: 10px; }
    .formation-grid { gap: 6px; }
    .formation-slot { min-height: 88px; padding: 4px; touch-action: manipulation; }
    .bench-list { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .hero-card { min-height: 96px; touch-action: manipulation; }
    .hero-card .hero-icon { font-size: 23px; }
    .hero-card strong { font-size: 11px; }
    .passive-modal { place-items: start center; overflow-y: auto; padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); }
    .passive-dialog { margin: auto 0; padding: 20px 16px; border-radius: 16px; }
    .passive-dialog h2 { font-size: 24px; }
    .passive-dialog > p:not(.eyebrow) { margin-bottom: 14px; font-size: 13px; line-height: 1.5; }
    .passive-choices { gap: 8px; }
    .passive-choice { min-height: 92px; padding: 14px; touch-action: manipulation; }
    .passive-choice b { font-size: 15px; }
    .passive-choice span { margin-top: 6px; font-size: 12px; }
    .save-conflict-choices button { min-height: 96px; padding: 14px; touch-action: manipulation; }
    .password-change-form input,.password-change-form button,.recovery-form input,.recovery-form button,.recovery-code-form input,.recovery-code-form button,.device-manager button,.revoke-sessions-button,.account-delete-form input,.account-delete-form button,.deletion-pending button,.ranking-mode-tabs button,.weekly-challenge button,.daily-challenge button,.cosmetic-picker button { min-height:44px; touch-action:manipulation; }
    .recovery-codes-output > div { grid-template-columns:1fr; }
}

@media (max-width: 700px) and (orientation: landscape) {
    .game-canvas { height: calc(100vh - 86px); min-height: 260px; max-height: 430px; aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    .slot-cell { animation: none !important; }
    .tutorial-focus { animation: none !important; }
    .cave-mist i, .shadow-watchers i { animation: none !important; }
}

body.reduce-battle-motion *,
body.reduce-battle-motion *::before,
body.reduce-battle-motion *::after { scroll-behavior: auto !important; transition: none !important; }
body.reduce-battle-motion .tutorial-focus,
body.reduce-battle-motion .slot-cell,
body.reduce-battle-motion .cave-mist i,
body.reduce-battle-motion .shadow-watchers i { animation: none !important; }

.slot-light-page button:focus-visible,
.slot-light-page [role="button"]:focus-visible,
.passive-modal button:focus-visible {
    outline: 3px solid var(--sl-cyan);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(117, 231, 255, .16);
}

/* Desktop viewport fit: browser chrome is already excluded from vh/dvh and % width. */
html { scrollbar-gutter: stable; }
body { overflow-x: hidden; }

@media (min-width: 861px) {
    .slot-light-page {
        width: calc(100% - 24px);
        max-width: 1880px;
        padding: 12px 0 32px;
    }

    .game-heading {
        gap: 18px;
        margin-bottom: 10px;
        padding: 10px 14px;
    }
    .game-heading h1 { font-size: clamp(31px, 2.15vw, 41px); }
    .game-heading p:not(.eyebrow) { font-size: 13px; }
    .game-heading .eyebrow,
    .server-status { font-size: 11px; }
    .player-hub-launcher button,
    .tutorial-restart-button,
    .plan-link { min-height: 34px; padding-top: 0; padding-bottom: 0; font-size: 12px; }

    .status-bar { margin-top: 8px; }
    .status-bar div {
        grid-template-columns: 22px minmax(0, 1fr);
        grid-template-rows: 16px 22px;
        padding: 4px 8px;
    }
    .status-bar span { font-size: 11px; }
    .status-bar strong { font-size: 15px; }
    .hud-playback::before,
    .battle-playback > span { font-size: 11px; }
    .battle-speed-button,
    .battle-option-button { min-height: 34px; font-size: 12px; }

    .command-deck {
        grid-template-columns: clamp(250px, 15vw, 288px) minmax(0, 1fr) clamp(198px, 12vw, 230px);
        height: clamp(560px, calc(100dvh - 300px), 850px);
        min-height: 0;
        padding: 12px;
    }
    .field-rail,
    .action-rail { min-height: 0; overflow-y: auto; }
    .battle-frame { display: grid; width: 100%; height: 100%; place-items: center; }
    .idle-battlefield { width: 100%; height: 100%; min-height: 0; }
    .battle-frame .game-canvas,
    body.battle-is-active .battle-frame .game-canvas {
        width: auto;
        max-width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .battle-frame-top { font-size: 11px; }
    .shop-open-button { min-height: 96px; padding: 9px 8px; }
    .shop-open-button small,
    .compact-bench .bench-title span,
    .compact-bench .empty-roster { font-size: 11px; }
    .compact-bench .hero-card strong,
    .field-formation .hero-card strong { font-size: 12px; }
    .hero-card small,
    .hero-card .hero-range,
    .hero-card .hero-range b,
    .field-formation .hero-card .hero-range,
    .field-formation .hero-card .hero-range b { font-size: 11px; }
    .hero-card .hero-skill-badge,
    .hero-card .hero-level,
    .hero-selected-badge { font-size: 11px; }

    .field-utility-buttons button { min-height: 50px; }
    .field-utility-buttons button b,
    .field-utility-buttons button small,
    .fusion-info b,
    .fusion-info span,
    .formation-presets > b,
    .formation-presets > span,
    .field-tip b,
    .field-tip span { font-size: 11px; }
    .preset-slots button,
    .preset-actions button,
    .skill-loadout-button { min-height: 32px; font-size: 11px; }
    .action-rail .battle-button { min-height: 68px; font-size: 14px; }
    .action-rail .fusion-button,
    .action-rail .undo-button { min-height: 40px; font-size: 12px; }
    .game-message { font-size: 13px; }

    .formation-hero-detail > strong,
    .formation-hero-detail p,
    .formation-hero-detail .hero-detail-title span,
    .formation-hero-detail .hero-detail-title em,
    .formation-hero-detail .hero-detail-grid,
    .formation-hero-detail .hero-detail-grid > span,
    .formation-hero-detail .hero-detail-grid b,
    .formation-hero-detail .skill-tag,
    .formation-hero-detail .skill-tag b,
    .formation-hero-detail .skill-tag small { font-size: 11px; }
    .formation-hero-detail .hero-detail-title b { font-size: 14px; }
    .formation-hero-detail .hero-detail-grid .hero-detail-range,
    .field-formation .formation-labels span { font-size: 12px; }
    .field-formation .formation-labels b { font-size: 12px; }
    .field-formation .formation-labels small { font-size: 10px; }

    .relic-vault-title small,
    .relic-summary,
    .relic-chip small,
    .relic-card-head small,
    .relic-card-head em,
    .relic-card footer { font-size: 10px; }
    .relic-card p,
    .pet-dialog .pet-choice small { font-size: 11px; }

    .device-manager > p,
    .device-manager li small,
    .device-manager li button,
    .account-security > small,
    .recovery-codes-output code,
    .account-delete-form small,
    .cosmetic-picker small,
    .weekly-challenge p,
    .daily-challenge p { font-size: 10px; }
    .sidebar-tabs button,
    .ranking-mode-tabs button,
    .growth-item button,
    .weekly-challenge button,
    .daily-challenge button { font-size: 11px; }
}

@media (min-width: 1600px) {
    .snomet-tool-nav .nav-content { max-width: 1880px !important; }
}

@media (min-width: 1100px) {
    .formation-hero-detail {
        max-height: none;
        overflow: visible;
    }
    .formation-hero-detail .skill-tags {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        overflow: visible;
        padding-bottom: 0;
    }
    .formation-hero-detail .skill-tag {
        min-width: 0;
        width: 100%;
    }
}

@media (min-width: 2200px) {
    .slot-light-page {
        width: calc(100% - 48px);
        max-width: 2240px;
    }
    .snomet-tool-nav .nav-content { max-width: 2240px !important; }
    .command-deck { grid-template-columns: 330px minmax(0, 1fr) 260px; }
    .status-bar span,
    .hud-playback::before,
    .battle-playback > span { font-size: 12px; }
    .status-bar strong { font-size: 16px; }
    .field-utility-buttons button b,
    .field-utility-buttons button small,
    .fusion-info b,
    .fusion-info span,
    .formation-presets > b,
    .formation-presets > span,
    .field-tip b,
    .field-tip span,
    .preset-slots button,
    .preset-actions button { font-size: 11px; }
}

@media (min-width: 861px) {
    body.game-fullscreen-view .slot-light-page {
        width: calc(100% - 24px);
        max-width: 1880px;
    }
    body.game-fullscreen-view .command-deck {
        grid-template-columns: clamp(260px, 15vw, 300px) minmax(0, 1fr) clamp(210px, 12vw, 240px);
        height: clamp(640px, calc(100dvh - 210px), 980px);
    }
}

@media (min-width: 2200px) and (min-height: 1050px) {
    body.game-fullscreen-view .slot-light-page {
        width: calc(100% - 48px);
        max-width: 2240px;
    }
    body.game-fullscreen-view .command-deck {
        grid-template-columns: 330px minmax(0, 1fr) 260px;
        height: clamp(820px, calc(100dvh - 210px), 1040px);
    }
}