:root{
  --bg:#05090d;
  --panel:rgba(9,15,20,.92);
  --panel2:rgba(19,29,36,.96);
  --gold:#ffd26a;
  --gold2:#d88a2e;
  --wood:#8a4e28;
  --wood-dark:#3d2014;
  --line:#d7a66b;
  --text:#f7fbff;
  --muted:#a9b7bf;
  --green:#65d69b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#030608}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);touch-action:none}
button{font:inherit;color:inherit;border:0}
#app{position:relative;width:100vw;height:100dvh;min-height:100dvh;overflow:hidden;background:#05090d;isolation:isolate}
#gameCanvas,#mapCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:100vw;max-height:100dvh;object-fit:contain;object-position:center center;background:#05090d}
.screen{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(0,0,0,.45)}
.hidden{display:none!important}

/* INTRO */
.intro-screen{background:#020507}
.intro-vignette{position:absolute;inset:0;background:
  radial-gradient(circle at 50% 44%,rgba(34,89,115,.3),transparent 35%),
  radial-gradient(circle at 50% 50%,transparent 30%,rgba(0,0,0,.88) 100%)}
.intro-content{position:relative;width:min(720px,84vw);display:flex;flex-direction:column;align-items:center;z-index:2}
.intro-logo{width:min(720px,82vw);max-height:54vh;object-fit:contain;filter:drop-shadow(0 0 30px rgba(35,139,255,.28));opacity:0;transform:scale(.76) translateY(30px);animation:introLogo 1.35s cubic-bezier(.16,1,.3,1) .2s forwards}
.intro-line{height:2px;width:min(500px,72vw);margin:18px 0 12px;background:linear-gradient(90deg,transparent,#66b9ff,#ffd56d,transparent);transform:scaleX(0);animation:introLine 1s ease 1s forwards}
.intro-status{font-size:clamp(11px,1.4vw,16px);letter-spacing:4px;color:#bcd0db;opacity:0;animation:fadeIn .7s ease 1.15s forwards}
.intro-progress{width:min(360px,62vw);height:5px;margin-top:14px;border-radius:999px;background:#17232a;overflow:hidden;opacity:0;animation:fadeIn .5s ease 1.2s forwards}
.intro-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#4ea9ff,#ffd05e);box-shadow:0 0 16px #4ea9ff;transition:width .08s linear}
.intro-continue{margin-top:30px;padding:12px 18px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.06);font-size:12px;letter-spacing:2px;cursor:pointer;opacity:0;animation:fadeIn .7s ease 1.65s forwards}
.intro-continue:hover{background:rgba(255,255,255,.12)}
.intro-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 12px #6fc7ff;animation:particleDrift linear infinite}
@keyframes introLogo{to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes introLine{to{transform:scaleX(1)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes particleDrift{from{transform:translate3d(0,15vh,0);opacity:0}20%{opacity:.8}to{transform:translate3d(0,-115vh,0);opacity:0}}

/* MENU */
.menu-card{width:min(680px,90vw);padding:30px;border-radius:28px;background:linear-gradient(180deg,rgba(17,27,33,.94),rgba(5,10,14,.96));border:1px solid rgba(255,255,255,.15);box-shadow:0 30px 100px #000;display:flex;flex-direction:column;align-items:center;text-align:center}
.menu-logo{width:min(560px,78vw);max-height:42vh;object-fit:contain;filter:drop-shadow(0 15px 30px #000)}
.menu-subtitle{color:var(--muted);margin:4px 0 24px}
.menu-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.wood-btn{padding:13px 24px;border-radius:14px;cursor:pointer;font-weight:900;letter-spacing:.4px;background:linear-gradient(#a96838,#5c2f18);border:1px solid #e3ad75;box-shadow:inset 0 1px #fff4,0 9px 22px #0007}
.wood-btn:hover{filter:brightness(1.08)}
.wood-btn:active{transform:translateY(2px) scale(.98)}
.wood-btn.secondary{background:linear-gradient(#30424b,#18242a);border-color:#687d87}
.wood-btn.small{padding:10px 14px;font-size:12px}

/* MAP */
.map-header{position:absolute;top:18px;left:20px;z-index:2}
.map-title{font-size:clamp(22px,3vw,42px);font-weight:1000;letter-spacing:-1px;text-shadow:0 3px 0 #2a150b}
.map-subtitle{margin-top:3px;color:#e9f1f3;font-weight:700}
.level-nodes{position:absolute;inset:0;pointer-events:none;z-index:3}
.level-node{position:absolute;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;pointer-events:auto;cursor:pointer;background:radial-gradient(circle at 35% 25%,#fff,#ffd766 24%,#d27b19 70%);border:4px solid #fff;box-shadow:0 8px 18px #0008,0 0 0 4px #4c2b13;font-weight:1000;color:#3c220f;transition:transform .18s,filter .18s}
.level-node:hover{transform:translate(-50%,-50%) scale(1.12)}
.level-node{transform:translate(-50%,-50%)}
.level-node.locked{filter:grayscale(1);opacity:.55;cursor:not-allowed}
.level-node.completed{background:radial-gradient(circle at 35% 25%,#fff,#77e3a2 25%,#287b49 72%);color:#fff}
.level-node small{position:absolute;top:64px;color:#fff;font-size:10px;text-shadow:0 2px 4px #000;white-space:nowrap}
.map-bottom{position:absolute;z-index:4;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:9px;flex-wrap:wrap;justify-content:center}

/* PANELS */
.panel{position:relative;width:min(820px,92vw);max-height:90vh;overflow:auto;padding:28px;border-radius:24px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 100px #000}
.panel h2{margin:0 0 8px;color:var(--gold);font-size:clamp(24px,4vw,40px)}
.panel p{color:var(--muted)}
.close-btn{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:12px;background:#26343b;color:#fff;font-size:28px;cursor:pointer}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.controls-grid article{padding:16px;border-radius:16px;background:#101b21;border:1px solid #30434c;line-height:2}
.controls-grid h3{margin:0 0 5px;color:#ffd36b}
kbd{display:inline-grid;place-items:center;min-width:34px;height:30px;margin-right:5px;padding:0 8px;border-radius:8px;background:#243239;border:1px solid #5c7079;font-weight:900;line-height:1}

/* HUD */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none}
.hud-pill{position:absolute;top:14px;padding:10px 13px;border-radius:15px;background:rgba(5,12,16,.78);border:1px solid rgba(255,255,255,.18);box-shadow:0 7px 20px #0004;backdrop-filter:blur(8px);font-weight:900}
.hud-pill.health{left:14px;width:220px}
.hud-pill.level{left:50%;transform:translateX(-50%)}
.hud-pill.state{right:14px}
.health-bar{height:8px;margin-top:6px;border-radius:999px;background:#2a1817;overflow:hidden}
.health-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f2382e,#ff9a37);transition:width .15s}
.pause-btn{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:13px;background:#18252ccc;border:1px solid #fff3;color:#fff;font-weight:1000;pointer-events:auto;cursor:pointer}

/* TOUCH — mobile platformer */
#touchControls{position:absolute;inset:0;z-index:15;display:none;pointer-events:none}
.touch-zone{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));display:flex;pointer-events:none}
.left-zone{left:max(10px,env(safe-area-inset-left));flex-direction:column;align-items:flex-start;gap:8px}
.right-zone{right:max(10px,env(safe-area-inset-right));align-items:flex-end}
.joystick{width:108px;height:108px;border-radius:50%;position:relative;background:radial-gradient(circle,rgba(255,255,255,.07),rgba(0,0,0,.54));border:2px solid rgba(255,255,255,.25);box-shadow:inset 0 0 0 14px rgba(255,255,255,.035),0 10px 24px #0008;pointer-events:auto;touch-action:none}
.stick{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(238,187,92,.9);border:2px solid #fff;box-shadow:0 5px 18px #0009}
.attack-stack{display:grid;grid-template-columns:repeat(3,54px);gap:6px;pointer-events:auto}
.movement-stack{display:grid;grid-template-columns:repeat(3,60px);gap:7px;pointer-events:auto}
.touch-btn{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;align-content:center;background:rgba(20,30,34,.84);border:2px solid rgba(255,255,255,.35);box-shadow:0 7px 16px #0009;color:#fff;font-weight:1000;font-size:16px;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none}
.attack-stack .touch-btn{width:54px;height:54px;font-size:14px}
.touch-btn span{display:block;font-size:8px;line-height:1;margin-top:2px}
.touch-btn.jump{background:rgba(48,130,89,.92);border-color:#a9efc8}
.touch-btn.attack{background:rgba(167,79,37,.92);border-color:#ffd08c}
.touch-btn:active{transform:scale(.92)}

/* RESULT */
.compact{width:min(520px,90vw);text-align:center}
.result-icon{font-size:70px;color:var(--gold);text-shadow:0 8px 20px #000}
#resultTitle{margin-top:0}
#resultText{margin-bottom:24px}

/* RESPONSIVE */
@media (pointer:coarse),(max-width:900px){
  #touchControls{display:block}
  .hud-pill.state{display:none}
  .panel{padding:20px}
  .controls-grid{grid-template-columns:1fr}
  .map-bottom{bottom:max(9px,env(safe-area-inset-bottom));width:96%}
  .map-bottom .wood-btn{font-size:11px;padding:9px 10px}
}
@media (max-width:720px){
  .game-selector-card{width:min(94vw,560px);max-height:92%;overflow:auto;padding:20px 16px}
  .selector-title{font-size:clamp(26px,8vw,40px)}
  .game-options{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
  .game-option{min-height:138px;height:auto;padding:16px;overflow:hidden}
  .game-option-icon-image,.game-option-icon-image img{width:54px;height:54px;max-width:54px;max-height:54px}
  .game-option-title{font-size:17px}
  .game-option-text{font-size:12px;line-height:1.35}
  .selector-actions .wood-btn{font-size:11px;padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* GAME INPUT SAFETY */
#gameCanvas, #mapCanvas, #touchControls, button {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#gameCanvas, #mapCanvas { touch-action:none; }

/* The platformer is playable in both portrait and landscape. In portrait the
   logical 16:9 world is zoomed/cropped by JS instead of being distorted. */
@media (max-width:650px){
  .hud-pill.health{left:8px;top:8px;width:145px;font-size:12px;padding:8px 10px}
  .hud-pill.level{top:8px;font-size:12px;padding:8px 10px}
  .pause-btn{right:8px;top:8px}
  .joystick{width:92px;height:92px}
  .stick{width:42px;height:42px}
  .movement-stack{grid-template-columns:repeat(3,54px);gap:6px}
  .movement-stack .touch-btn{width:54px;height:54px;font-size:14px}
  .attack-stack{grid-template-columns:repeat(3,48px);gap:5px}
  .attack-stack .touch-btn{width:48px;height:48px;font-size:13px}
  .touch-btn span{font-size:7px}
}
@media (max-height:520px){
  .touch-zone{bottom:6px}
  .joystick{width:82px;height:82px}
  .stick{width:38px;height:38px}
  .movement-stack{grid-template-columns:repeat(3,48px);gap:5px}
  .movement-stack .touch-btn{width:48px;height:48px;font-size:13px}
  .attack-stack{grid-template-columns:repeat(3,44px);gap:4px}
  .attack-stack .touch-btn{width:44px;height:44px;font-size:12px}
  .touch-btn span{font-size:6.5px}
  .hud-pill.health{width:135px;font-size:11px}
  .health-bar{height:6px;margin-top:4px}
}

/* GAME SELECTOR */
.game-selector-card{width:min(940px,94vw);padding:32px 34px}
.selector-kicker{font-size:11px;letter-spacing:4px;color:#9db0ba;margin-bottom:6px}
.selector-title{margin:0;color:#ffd26a;font-size:clamp(28px,5vw,46px);letter-spacing:-1.5px;text-shadow:0 4px 0 #3b2112}
.game-options{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:8px 0 22px}
.game-option{min-height:220px;padding:24px;border-radius:22px;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;background:
  radial-gradient(circle at 85% 18%,rgba(255,210,106,.2),transparent 32%),
  linear-gradient(145deg,#243c47,#0b1419);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px #0008;transition:transform .18s,border-color .18s,filter .18s}
.game-option:hover{transform:translateY(-5px);border-color:#ffd26a;filter:brightness(1.08)}
.game-option:active{transform:translateY(-1px) scale(.99)}
.game-option.maze-option{background:
  radial-gradient(circle at 18% 16%,rgba(90,70,190,.38),transparent 34%),
  linear-gradient(145deg,#34275d,#0c101b)}
.game-option-icon{font-size:48px;line-height:1;margin-bottom:auto;filter:drop-shadow(0 8px 12px #0008)}
.game-option-icon-image{width:76px;height:76px;display:flex;align-items:center;justify-content:center}
.game-option-icon-image img{width:76px;height:76px;display:block;object-fit:contain;filter:drop-shadow(0 8px 12px #0008)}
.game-option-title{font-size:22px;font-weight:1000;color:#fff}
.game-option-text{font-size:13px;color:#aebdc4}
.game-option-action{margin-top:8px;color:#ffd26a;font-size:12px;font-weight:1000;letter-spacing:1px}
.selector-actions{margin-top:0}

/* EMBEDDED MAZE */
.maze-screen{background:#05070d;z-index:50;display:block}
.maze-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0a0c14}
.maze-back{position:absolute;z-index:60;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));padding:10px 15px;border-radius:12px;
  background:rgba(8,12,18,.8);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:900;cursor:pointer;backdrop-filter:blur(8px);
  box-shadow:0 7px 18px #0007}
.maze-back:hover{background:rgba(25,34,43,.94);border-color:#ffd26a}

@media (max-width:720px){
  .game-selector-card{padding:22px 18px}
  .game-options{grid-template-columns:1fr;gap:12px}
  .game-option{min-height:165px;padding:18px}
  .game-option-icon{font-size:38px}
  .game-option-icon-image,.game-option-icon-image img{width:60px;height:60px}
  .game-option-title{font-size:18px}
}