:root { --ink:#eef2f4; --panel:#15202c; --accent:#ffd24a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0d141b; color: var(--ink); font-family: system-ui, -apple-system, sans-serif; overscroll-behavior: none; }
#app { position: fixed; inset: 0; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; font-size: 13px; font-weight: 600; background: var(--panel); z-index: 5; }
#bar-btns { display: flex; gap: 6px; }
.tbtn { background: #edf0ee; color: #192a31; border: 0; border-radius: 6px; min-height: 34px; padding: 4px 12px; font: 600 12px system-ui; }
#stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #101820; }
#world, #hud { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { pointer-events: none; }
#status { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(13,23,34,.88); padding: 5px 12px; border-radius: 8px; font: 600 11px system-ui; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 3; }
#status:empty { display: none; }
#hint { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); background: #ffd24a; color: #222; padding: 6px 14px; border-radius: 8px; font: 600 12px system-ui; z-index: 6; }
.hidden { display: none !important; }

/* menu overlay */
#menu { position: absolute; inset: 0; background: rgba(10,17,25,.88); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; padding: 16px; z-index: 8; }
#menu h1 { margin: 0; font-size: clamp(26px, 5vw, 44px); letter-spacing: .5px; }
#menu p { margin: 0; font-size: clamp(12px, 1.8vw, 15px); line-height: 1.45; max-width: 560px; }
#menu-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#menu-btns button { background: var(--accent); color: #222; border: 0; border-radius: 10px; min-height: 48px; padding: 10px 22px; font: 700 15px system-ui; }
#menu-btns button:nth-child(2) { background: #7be07b; }
#menu-btns button:nth-child(3) { background: #ff8c5a; }
.menu-help { color: #b8c8d1; }
.menu-help .dim { color: #7d8f9a; font-size: 11px; }

/* touch controls */
#pad { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 14px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; z-index: 4; }
#pad > * { pointer-events: auto; }
#stick { position: relative; width: clamp(110px, 22vh, 150px); height: clamp(110px, 22vh, 150px); border-radius: 50%; background: rgba(40,56,72,.55); border: 2px solid rgba(140,170,195,.5); touch-action: none; }
#stick-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1.5px dashed rgba(160,190,215,.35); }
#knob { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; margin: -17% 0 0 -17%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #d9a83c); box-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: none; }
.stick-label { position: absolute; left: 50%; transform: translateX(-50%); font: 700 9px system-ui; color: rgba(190,210,228,.8); pointer-events: none; }
.stick-label.top { top: 6px; } .stick-label.bottom { bottom: 6px; }
#btns { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.btn-row { display: flex; gap: 8px; }
.rbtn { border: 2px solid rgba(140,170,195,.45); background: rgba(38,56,74,.72); color: #fff; border-radius: 999px; width: clamp(52px, 10.5vh, 68px); height: clamp(52px, 10.5vh, 68px); font: 700 12px system-ui; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; backdrop-filter: blur(2px); }
.rbtn small { font: 600 9px system-ui; color: #b8c8d1; }
.rbtn.tech { background: rgba(48,75,131,.72); }
.rbtn.warn { background: rgba(150,70,50,.72); }
.rbtn.big { width: clamp(74px, 15vh, 96px); height: clamp(74px, 15vh, 96px); background: rgba(46,160,90,.8); font-size: 15px; align-self: flex-end; }
.rbtn.on { filter: brightness(1.5); transform: scale(.95); }

#rotate { display: none; position: absolute; inset: 0; background: rgba(10,17,25,.94); z-index: 9; place-items: center; text-align: center; font-size: 15px; padding: 24px; }
@media (orientation: portrait) and (max-width: 640px) {
  #rotate { display: grid; }
}
@media (max-height: 400px) {
  #bar { padding: 2px 8px; font-size: 11px; }
  .tbtn { min-height: 28px; padding: 2px 10px; }
  #menu { gap: 7px; }
  #menu h1 { font-size: 24px; }
  #menu-btns button { min-height: 40px; padding: 6px 16px; font-size: 13px; }
  .menu-help { font-size: 10px !important; }
  #status { font-size: 10px; bottom: 5px; }
}

.stick-label.left { left: 8px; top: 45%; transform: none; }
.stick-label.right { left: auto; right: 8px; top: 45%; transform: none; }