* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1626; font-family: "Segoe UI", system-ui, sans-serif; color: #f2f6fa; user-select: none; }
#app canvas { display: block; }
#hud { display: none; }
#crosshair { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.35); transition: transform .1s; }
#crosshair.on { transform: scale(1.7); background: #ffd27a; }
#prompt { position: fixed; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); font-size: 16px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8); white-space: nowrap; }
#panel { position: fixed; top: 14px; left: 14px; width: 330px; background: rgba(12,20,34,.62); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; backdrop-filter: blur(2px); }
.ptitle { font-weight: 700; color: #ffd27a; margin-bottom: 4px; letter-spacing: .5px; }
#tasks { list-style: none; margin: 0; padding: 0; }
#tasks li { padding: 2px 0; color: #b9c7d6; }
#tasks li.done { color: #8fd18f; text-decoration: line-through; }
#tasks li.cur { color: #fff; font-weight: 600; }
#hint { margin-top: 6px; font-size: 12.5px; color: #e9dcc0; border-left: 3px solid #e8913a; padding-left: 7px; }
#warm { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); width: 300px; text-align: center; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.bar { height: 10px; border-radius: 5px; background: rgba(20,30,50,.6); overflow: hidden; margin-top: 3px; border: 1px solid rgba(255,255,255,.25); }
#warm-bar { height: 100%; width: 45%; background: linear-gradient(90deg, #5a9ad8, #e8913a 60%, #ffcf6a); transition: width .2s; }
#mini { position: fixed; bottom: 22px; right: 16px; font-size: 13px; background: rgba(12,20,34,.55); padding: 5px 10px; border-radius: 6px; }
#keys { position: fixed; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.8); white-space: nowrap; }
#inv { position: fixed; right: 16px; top: 14px; background: rgba(12,20,34,.8); border-radius: 8px; padding: 10px 14px; display: none; min-width: 170px; font-size: 14px; }
#inv.show { display: block; } #inv .it { padding: 3px 0; }
#toast { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,.8); opacity: 0; transition: opacity .4s; text-align: center; max-width: 80vw; }
#toast.show { opacity: 1; }
#floats { position: fixed; left: 50%; top: 42%; transform: translateX(-50%); pointer-events: none; }
.float { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-weight: 700; color: #ffd27a; text-shadow: 0 1px 3px rgba(0,0,0,.9); animation: up 1.4s ease-out forwards; }
@keyframes up { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -50px); } }
.muted { color: #a9b8c8; } .small { font-size: 12.5px; }
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; gap: 28px; background: rgba(5,10,20,.55); z-index: 10; padding: 20px; }
#title { background: radial-gradient(ellipse at center, rgba(14,26,50,.9), rgba(4,8,18,.97)); }
#title img { max-height: 92vh; max-width: 48vw; border-radius: 10px; box-shadow: 0 0 40px rgba(80,200,160,.25); }
.tpanel { max-width: 420px; }
.tpanel h1 { font-size: 46px; margin: 0; letter-spacing: 2px; text-transform: uppercase; }
.tag { letter-spacing: 4px; text-transform: uppercase; color: #8fe3c0; margin-bottom: 14px; font-size: 13px; }
.tpanel p { line-height: 1.5; color: #c8d4e2; }
button { font: inherit; font-size: 17px; color: #fff; background: #c9772b; border: 1px solid #ffd27a; border-radius: 6px; padding: 9px 22px; cursor: pointer; }
button.ghost { background: transparent; border-color: #6c809c; }
button:hover { filter: brightness(1.1); }
.box { background: rgba(18,30,50,.94); border: 1px solid #44587a; border-radius: 10px; padding: 20px 26px; max-width: 520px; line-height: 1.5; }
.box h2 { margin: 0 0 8px; color: #ffd27a; }

/* ---------- mobile / touch ---------- */
html, body { touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html, body { position: fixed; inset: 0; width: 100%; }
.touch-only { display: none; }
body.touch .touch-only { display: block; } body.touch .pc-only { display: none; }
.overlay .box, .overlay .tpanel { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.overlay { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
#fatal { z-index: 30; }
#rotate { z-index: 25; background: rgba(5,10,20,.96); text-align: center; }
.rot-ico { font-size: 54px; color: #ffd27a; animation: rot 2.2s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.touch #rotate { display: flex; } }
.gfxrow { margin: 10px 0 2px; } #gfx button { padding: 6px 14px; font-size: 15px; } #gfx button.sel { background: #c9772b; border-color: #ffd27a; }
#tcount { color: #a9b8c8; font-weight: 400; font-size: 12px; }
#touch { display: none; }
body.touch #touch { display: block; position: fixed; inset: 0; z-index: 2; }
body.touch #hud > div:not(#touch) { z-index: 3; pointer-events: none; }
body.touch #panel { pointer-events: auto; }
body.touch #keys { display: none; }
body.touch #panel { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); width: min(250px, 34vw); padding: 6px 9px; font-size: 11.5px; }
body.touch #tasks li:not(.cur) { display: none; } body.touch #panel.expand #tasks li { display: list-item; }
body.touch #hint { font-size: 11px; margin-top: 3px; }
body.touch #warm { bottom: max(6px, env(safe-area-inset-bottom)); width: min(240px, 32vw); font-size: 10.5px; }
body.touch #mini { top: max(8px, env(safe-area-inset-top)); bottom: auto; right: calc(max(8px, env(safe-area-inset-right)) + 104px); font-size: 11px; padding: 4px 8px; }
body.touch #inv { top: calc(max(8px, env(safe-area-inset-top)) + 34px); right: max(8px, env(safe-area-inset-right)); font-size: 13px; }
body.touch #prompt { font-size: 13.5px; top: calc(50% + 18px); white-space: normal; text-align: center; width: min(70vw, 460px); }
body.touch #toast { font-size: 15px; top: 18%; max-width: 60vw; }
body.touch #crosshair { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
#stick { position: fixed; left: calc(max(16px, env(safe-area-inset-left)) + 80px); top: calc(100% - max(16px, env(safe-area-inset-bottom)) - 80px); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(12,20,34,.18); opacity: .55; pointer-events: none; }
#stick.on { opacity: 1; }
#knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 1px 6px rgba(0,0,0,.4); }
.tb { position: fixed; width: 58px; height: 58px; padding: 0; border-radius: 50%; font-size: 12.5px; font-weight: 700; line-height: 1.05; color: #fff; background: rgba(12,20,34,.55); border: 2px solid rgba(255,255,255,.45); backdrop-filter: blur(2px); touch-action: none; }
.tb.down { background: rgba(201,119,43,.85); transform: scale(.94); } .tb.lit { background: rgba(201,119,43,.7); border-color: #ffd27a; } .tb.dim { opacity: .45; }
#tbtns { --r: max(14px, env(safe-area-inset-right)); --b: max(14px, env(safe-area-inset-bottom)); }
#b-use { width: 92px; height: 92px; font-size: 18px; right: var(--r); bottom: var(--b); background: rgba(201,119,43,.6); border-color: #ffd27a; }
#b-fire { right: calc(var(--r) + 104px); bottom: var(--b); }
#b-match { right: calc(var(--r) + 84px); bottom: calc(var(--b) + 76px); }
#b-sprint { right: calc(var(--r) + 14px); bottom: calc(var(--b) + 104px); }
#b-inv { right: calc(var(--r) + 172px); bottom: var(--b); }
.tb.sm { width: 44px; height: 44px; font-size: 15px; top: max(8px, env(safe-area-inset-top)); }
#b-pause { right: max(8px, env(safe-area-inset-right)); } #b-fs { right: calc(max(8px, env(safe-area-inset-right)) + 52px); font-size: 20px; }
@media (max-height: 500px) {
  #title img { max-width: 40vw; max-height: 86vh; }
  .tpanel h1 { font-size: 30px; } .tpanel p { font-size: 13.5px; line-height: 1.35; margin: 6px 0; } .tag { margin-bottom: 6px; }
  .box { padding: 12px 18px; } .box h2 { font-size: 20px; }
  button { padding: 8px 20px; }
}