:root{--gold:#d7a84e;--gold2:#f2d48a;--cream:#f5ead4;--ink:#03060b;--panel:rgba(4,8,15,.88)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#010307;color:var(--cream);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button{font:inherit;color:inherit}
#app{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 12%,#1d2735 0,#080d15 42%,#010307 82%)}
#game-shell{position:relative;width:min(100vw,calc(100vh * .5625));height:min(100vh,calc(100vw * 1.777777));max-width:540px;max-height:960px;overflow:hidden;background:#03060b;box-shadow:0 0 0 1px rgba(215,168,78,.3),0 34px 100px rgba(0,0,0,.9);touch-action:none}
canvas{display:block;width:100%;height:100%;background:#03060b}
#topbar{position:absolute;top:max(9px,env(safe-area-inset-top));left:10px;right:52px;display:grid;grid-template-columns:1.25fr .8fr 1fr;gap:6px;z-index:3;pointer-events:none}
#topbar div{padding:7px 7px 6px;border:1px solid rgba(215,168,78,.45);background:linear-gradient(180deg,rgba(11,17,26,.88),rgba(3,7,13,.88));border-radius:7px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,226,159,.06),0 5px 16px rgba(0,0,0,.38)}
#topbar span{display:block;font-size:8px;letter-spacing:.17em;color:#c8aa6f}
#topbar strong{display:block;margin-top:1px;font-size:14px;letter-spacing:.07em;color:#fff1cc}
#pause{position:absolute;right:10px;top:max(9px,env(safe-area-inset-top));z-index:5;width:36px;height:36px;border-radius:7px;border:1px solid rgba(215,168,78,.62);background:linear-gradient(180deg,#242c37,#070b12);font-weight:900;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.overlay{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px 30px 142px;background:linear-gradient(180deg,rgba(2,5,10,.78),rgba(2,5,10,.9));overflow:hidden}
.overlay.visible{display:flex}.menu-vignette{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 32%,rgba(213,161,70,.18),transparent 35%),linear-gradient(180deg,rgba(4,8,14,.1),rgba(1,3,7,.86))}
.logo-frame{width:96px;height:96px;display:grid;place-items:center;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(222,175,84,.35))}
.logo-frame img{width:100%;height:100%;object-fit:contain}
.eyebrow{margin:0 0 8px;font-size:9px;letter-spacing:.3em;color:#d4b779;font-weight:900}
h1,h2{margin:0;font-family:Georgia,'Times New Roman',serif;line-height:1;letter-spacing:.045em;text-shadow:0 4px 24px rgba(0,0,0,.85)}
h1{font-size:clamp(34px,9.5vw,54px);white-space:nowrap;color:#f2d58f}
h1 em{display:block;margin-top:4px;font-style:normal;color:#d5a146;font-size:.56em;letter-spacing:.28em}
h2{font-size:clamp(42px,11vw,66px);color:var(--gold2)}
.tagline,#message-text{max-width:300px;color:#d9ccb0;line-height:1.45;margin:13px 0 20px;font-size:13px}
.primary{min-width:214px;padding:14px 23px;border:1px solid #ffe3a2;border-radius:5px;background:linear-gradient(180deg,#e9c675,#a76c25);color:#160e04;font-weight:950;letter-spacing:.12em;box-shadow:0 0 0 3px rgba(104,63,18,.55),0 10px 28px rgba(0,0,0,.45),0 0 25px rgba(215,168,78,.16);cursor:pointer}
.instructions{font-size:9px;letter-spacing:.05em;line-height:1.65;color:#9d937e;margin:15px 0 0}
#mobile-controls{position:absolute;z-index:7;left:0;right:0;bottom:0;height:132px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1.45fr .8fr;gap:24px;align-items:center;background:linear-gradient(180deg,rgba(2,5,10,0),rgba(2,5,10,.9) 19%,rgba(1,3,7,.99));border-top:1px solid rgba(215,168,78,.28)}
.move-pad,.fire-pad{height:102px;position:relative;border:1px solid rgba(215,168,78,.48);background:linear-gradient(180deg,rgba(18,24,33,.94),rgba(4,7,12,.97));box-shadow:inset 0 0 0 2px rgba(0,0,0,.5),inset 0 0 20px rgba(215,168,78,.04);border-radius:12px;display:grid;align-items:center}
.move-pad{grid-template-columns:1fr 1fr;gap:2px;padding:9px 10px 22px}.move-pad:after{content:"";position:absolute;top:12px;bottom:30px;left:50%;width:1px;background:rgba(215,168,78,.22)}
.fire-pad{place-items:center;padding:7px 8px 22px}.move-pad>span,.fire-pad>span{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:700 10px Georgia,serif;letter-spacing:.16em;color:#d6ad5c}
.control{border:0;background:transparent;font-size:28px;font-weight:900;cursor:pointer;user-select:none;color:#e2b85e;min-width:0;height:62px;text-shadow:0 0 15px rgba(220,169,73,.35)}
.control.active,.control:active{transform:translateY(2px);color:#fff1c6;filter:drop-shadow(0 0 10px rgba(238,190,91,.55))}
.control.fire{width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 42% 35%,#ef5d3a,#8d1510 58%,#360604 100%);border:3px solid #d9a84d;box-shadow:0 0 0 5px #1a1e24,0 0 0 7px rgba(215,168,78,.48),inset 0 4px 8px rgba(255,255,255,.16),0 0 24px rgba(190,50,25,.25)}
.control.fire span{display:block;color:#ffddb1;font-size:22px;text-shadow:0 0 12px #fff}
@media (min-width:800px){#game-shell{border-radius:18px}.overlay{border-radius:18px}}
@media (max-height:700px){#mobile-controls{height:116px}.move-pad,.fire-pad{height:88px}.control{height:52px}.control.fire{width:60px;height:60px}.overlay{padding-bottom:122px}.logo-frame{width:78px;height:78px}}

/* Mobile control visibility fix: smaller visual controls, more gameplay area. */
#mobile-controls{
  height:104px;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  grid-template-columns:1.35fr .72fr;
  gap:18px;
}
.move-pad,.fire-pad{
  height:78px;
  border-radius:10px;
}
.move-pad{
  padding:5px 8px 17px;
}
.move-pad:after{
  top:8px;
  bottom:23px;
}
.fire-pad{
  padding:4px 7px 17px;
}
.move-pad>span,.fire-pad>span{
  bottom:3px;
  font-size:8px;
}
.control{
  height:48px;
  font-size:22px;
}
.control.fire{
  width:54px;
  height:54px;
  border-width:2px;
  box-shadow:0 0 0 4px #1a1e24,0 0 0 6px rgba(215,168,78,.42),inset 0 3px 7px rgba(255,255,255,.15),0 0 18px rgba(190,50,25,.22);
}
.control.fire span{font-size:18px}
.overlay{padding-bottom:112px}
@media (max-height:700px){
  #mobile-controls{height:92px;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .move-pad,.fire-pad{height:66px}
  .control{height:40px;font-size:20px}
  .control.fire{width:48px;height:48px}
  .overlay{padding-bottom:98px}
}