:root{
  --midnight:#030814;
  --navy:#071733;
  --deep:#0b2c58;
  --ice:#6fd0ff;
  --pale:#d9f7ff;
  --gold:#f4c85c;
  --gold-dark:#9d641f;
  --cream:#fff4d1;
  --red:#b33d3d;
  --green:#4b8a58;
  --shadow:rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--midnight);color:var(--cream);font-family:Georgia,"Times New Roman",serif;overscroll-behavior:none}
body{overflow-x:hidden}
button,select,input{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.55}
.screen{display:none;min-height:100dvh}
.screen.active{display:flex}
.center-screen{align-items:center;justify-content:center;padding:18px}
.panel{background:linear-gradient(155deg,rgba(4,17,44,.98),rgba(8,39,78,.96));border:3px solid var(--gold);border-radius:24px;box-shadow:0 20px 70px var(--shadow);padding:24px}
.panel h1,.panel h2,.panel h3{color:var(--gold);margin-top:0}
.panel p{line-height:1.55}
.wide-panel{width:min(1100px,96vw)}
.cavern-bg{position:relative;background:radial-gradient(circle at 50% 8%,#1b5b9d 0,#091d40 42%,#020713 100%)}
.cavern-bg::before{content:"";position:absolute;inset:0;background:url("assets/environment/backgrounds/ice_cave_parallax_back.png") center/cover fixed;opacity:.24;pointer-events:none}
.cavern-bg>*{position:relative}
.gold-btn,.ice-btn,.dark-btn,.gentle-btn,.danger-btn{border-radius:999px;padding:12px 20px;border:2px solid var(--gold);font-weight:900;letter-spacing:.02em;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.gold-btn{background:linear-gradient(#ffdf82,#c88925);color:#07152e}
.ice-btn{background:linear-gradient(#e6fbff,#63b8ef);color:#06162f;border-color:#bbf1ff}
.dark-btn{background:#07162f;color:white;border-color:#72c9f6}
.gentle-btn{background:linear-gradient(#e8fdff,#9ce4f6);color:#073246;border-color:#c8f8ff}
.danger-btn{background:#681d25;color:#fff;border-color:#ff9c92}
.button-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.loading-card{width:min(640px,94vw);text-align:center}
.loading-track{height:18px;border:2px solid var(--ice);border-radius:999px;overflow:hidden;background:#020713}
.loading-track>div{width:0;height:100%;background:linear-gradient(90deg,#50b9f7,#ffe07e);transition:width .15s ease}
.art-screen{position:relative;align-items:center;justify-content:center;overflow:hidden;background:#020713}
.full-art{display:block;width:100%;height:100dvh;object-fit:contain;background:#020713}
.art-actions{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:min(900px,94vw);padding:14px;background:rgba(2,8,22,.78);border:2px solid rgba(244,200,92,.82);border-radius:22px;backdrop-filter:blur(8px)}
.warning-card{position:absolute;right:3vw;bottom:4vh;width:min(600px,93vw);background:rgba(3,14,38,.95)}
.setting-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.setting-grid label{padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid #5cb6ec}
.setting-grid label>span{display:block;font-weight:900;margin-bottom:8px}
.setting-grid select{width:100%;padding:10px;border-radius:10px}
.toggle-label{display:flex!important;align-items:center;gap:12px}
.toggle-label input{width:22px;height:22px}
.mode-explainer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.mode-explainer article{padding:14px;border-radius:15px;background:rgba(86,178,235,.1);border:1px solid #5cb6ec}
.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.character-card{min-height:280px;padding:12px;border:3px solid #4b84ad;border-radius:20px;background:rgba(255,255,255,.06);color:white;display:flex;flex-direction:column;align-items:center;text-align:center}
.character-card.selected{border-color:var(--gold);box-shadow:0 0 28px rgba(244,200,92,.35)}
.character-card img{width:190px;height:190px;object-fit:contain}
.character-card strong{color:var(--gold);font-size:1.15rem}
.character-card span{margin-top:6px;font-size:.9rem;line-height:1.35}
.character-card.locked{opacity:.5}
.lock-silhouette{width:170px;height:190px;border-radius:46% 46% 18% 18%;background:linear-gradient(#1e4772,#050b16);display:grid;place-items:center;font-size:4rem}
.subcopy{text-align:center}
.map-screen{position:relative;align-items:center;justify-content:center;overflow:auto;background:#020713}
.map-art{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.58}
.map-overlay{position:relative;width:min(1020px,94vw);margin:28px auto}
.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.level-card{display:grid;grid-template-columns:54px 1fr auto;gap:11px;align-items:center;padding:13px;text-align:left;border:2px solid #5db9ef;border-radius:16px;background:rgba(3,17,43,.92);color:white;transition:transform .15s,border-color .15s}
.level-card.unlocked:hover{transform:translateY(-2px);border-color:var(--gold)}
.level-card.locked{opacity:.43;cursor:not-allowed}
.level-card .num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#124477;color:var(--gold);font-weight:900}
.level-card strong{display:block;color:var(--gold)}
.level-card small{display:block;margin-top:4px;line-height:1.3}
.level-card .medal-mini{width:46px;height:46px;object-fit:contain}
.map-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}
.game-screen{flex-direction:column;min-height:100dvh;background:#020713}
.game-hud{min-height:76px;display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:12px;padding:8px 14px;background:linear-gradient(#0b2852,#061329);border-bottom:3px solid var(--gold);z-index:4}
.hud-block{display:flex;flex-direction:column;min-width:0}
.hud-block strong{color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-block span{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-block.right{text-align:right}
.spark-hearts{display:flex;gap:3px}
.spark-hearts img{width:38px;height:38px;object-fit:contain}
.round-btn{width:46px;height:46px;border-radius:50%;background:#102f5d;color:white;border:2px solid var(--gold);font-weight:900}
#canvasWrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#020713}
#gameCanvas{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 184px);background:#06142c;touch-action:none;image-rendering:auto}
.message-overlay{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;max-width:90%;padding:10px 18px;text-align:center;border-radius:999px;background:rgba(2,9,25,.9);border:2px solid var(--gold);font-weight:900;opacity:0;pointer-events:none;transition:opacity .25s}
.message-overlay.show{opacity:1}
.objective-overlay{position:absolute;z-index:7;width:min(680px,92%);text-align:center}
.objective-overlay.hidden{display:none}
.modal-overlay{position:absolute;inset:0;z-index:9;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center}
.modal-overlay.hidden{display:none}
.modal-card{width:min(390px,92%);display:flex;flex-direction:column;gap:12px;text-align:center}
.control-bar{min-height:100px;display:flex;align-items:center;justify-content:space-between;padding:8px max(12px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-bottom));background:linear-gradient(#061329,#020713);border-top:2px solid #245e99}
.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,44px);gap:5px}
.dpad button{border-radius:12px;border:2px solid #6ac7ff;background:#102f5c;color:white;font-size:1.2rem;font-weight:900;touch-action:none}
.dpad button[data-dir="up"]{grid-column:2}.dpad button[data-dir="left"]{grid-column:1;grid-row:2}.dpad button[data-dir="down"]{grid-column:2;grid-row:2}.dpad button[data-dir="right"]{grid-column:3;grid-row:2}
.spark-control button{width:146px;height:82px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #ffe8a7;background:radial-gradient(circle,#fff7bb 0,#edb32e 48%,#76330a 100%);color:#07152e;touch-action:none}
.spark-control button span{font-size:1.5rem;line-height:1}.spark-control button strong{font-size:.8rem}.spark-control button small{font-size:.68rem}
.result-panel{width:min(900px,95vw);text-align:center}
.medal-image{width:170px;height:170px;object-fit:contain}
.special-art{display:block;width:min(720px,100%);max-height:44vh;object-fit:contain;margin:0 auto 15px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats-grid>div{padding:12px;border-radius:14px;background:rgba(94,184,239,.12);border:1px solid #5db9ef}
.achievement-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}
.achievement{display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid #5db9ef}
.achievement img{width:70px;height:70px;object-fit:contain}.achievement.locked{opacity:.35;filter:grayscale(1)}
.certificate-view{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:20px}.certificate-view.visible{display:flex}.certificate-view img{max-width:96vw;max-height:88vh;object-fit:contain}.certificate-close{position:absolute;top:16px;right:16px}
.hidden{display:none!important}
@media(max-width:900px){.mode-explainer{grid-template-columns:1fr}.character-grid{grid-template-columns:repeat(2,1fr)}.level-grid{grid-template-columns:1fr}.game-hud{grid-template-columns:1fr auto auto}.hud-block.right{display:none}}
@media(max-width:620px){.panel{padding:16px}.warning-card{right:auto;left:50%;bottom:12px;transform:translateX(-50%);max-height:53vh;overflow:auto}.setting-grid{grid-template-columns:1fr}.character-card{min-height:220px}.character-card img,.lock-silhouette{width:130px;height:140px}.game-hud{min-height:66px;padding:6px}.spark-hearts img{width:29px;height:29px}.control-bar{min-height:92px}.dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,40px)}.spark-control button{width:120px;height:72px}.stats-grid,.achievement-grid{grid-template-columns:1fr}.full-art{object-fit:cover}}
@media(pointer:fine) and (min-width:850px){.control-bar{min-height:72px}.dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,31px)}.dpad button{opacity:.75}.spark-control button{width:128px;height:60px}.game-screen #gameCanvas{max-height:calc(100dvh - 146px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.map-section-title{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:20px 2px 10px;color:var(--gold)}
.map-section-title span{color:var(--pale);font-size:.9rem}.trials-title{margin-top:28px}.trial-grid .level-card{border-color:#8fdcff;background:linear-gradient(145deg,rgba(10,49,83,.94),rgba(25,28,70,.93))}.trial-grid .level-card .num{background:#4a2a72;color:#f6deff}
#hudCompass{display:block;margin-top:3px;color:#bfeaff;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-stack{display:flex;gap:10px;align-items:center}.trail-btn{border:2px solid #74cfff;border-radius:999px;background:#0d3765;color:#eefcff;padding:10px 13px;font-weight:900;min-width:112px}.trail-btn:active{transform:translateY(1px)}
.sequence-badge{font:bold 14px/1 Georgia,serif;fill:#071733}.mode-explainer{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.mode-explainer{grid-template-columns:repeat(2,1fr)}.action-stack{gap:6px}.trail-btn{min-width:96px;padding:8px 10px}}
@media(max-width:620px){.mode-explainer{grid-template-columns:1fr}.action-stack{flex-direction:column}.trail-btn{font-size:.72rem;padding:5px 8px;min-width:110px}.map-section-title{align-items:flex-start;flex-direction:column;gap:3px}}
.character-grid.solo-character{grid-template-columns:minmax(220px,360px);justify-content:center}.solo-character .character-card{width:100%}