:root { font-family: system-ui, sans-serif; color: #fff8ec; background: #3b2b20; }
body { margin: 0 auto; padding: 12px; max-width: 860px; text-align: center; }
h1 { margin: .3em; font-size: 2rem; }
#story { max-width: 640px; margin: 0 auto 10px; line-height: 1.4; }
#hud { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; align-items: center; background: #2a1f17; border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
#hud output { font-weight: 700; }
button { font: inherit; padding: 10px 18px; border: 0; border-radius: 12px; cursor: pointer; background: #ffcf40; color: #3b2b20; font-weight: 700; min-height: 44px; }
button:disabled { opacity: .5; }
[hidden] { display: none !important; }
#wrap { position: relative; }
#wrap:fullscreen { background: #3b2b20; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
#wrap:fullscreen canvas { width: min(100%, calc((100vh - 24px) * 1.6)); }
canvas { display: block; width: 100%; height: auto; background: #6b4a32; border-radius: 16px; touch-action: none; }
#stick { position: absolute; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.5); transform: translate(-50%,-50%); pointer-events: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,207,64,.9); transform: translate(-50%,-50%); }
#banner { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); background: rgba(0,0,0,.75); padding: 10px 18px; border-radius: 12px; font-size: 1.2rem; font-weight: 700; max-width: 90%; }
#exitfs { position: absolute; right: 10px; top: 10px; z-index: 5; }
#controls-hint { opacity: .9; }
section { margin: 20px auto; max-width: 520px; background: #2a1f17; border-radius: 14px; padding: 12px; }
form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 16px 0; }
label { display: flex; flex-direction: column; gap: 6px; }
input { font: inherit; padding: 10px; width: 9em; border-radius: 10px; border: 0; }
ol { text-align: left; line-height: 1.8; }
@media (max-width: 480px) {
  body { padding: 8px; }
  h1 { font-size: 1.5rem; }
  #story { font-size: .95rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  h1 { font-size: 1.2rem; margin: .2em; }
  #story, #controls-hint { display: none; }
}