:root { --ui: rgba(16, 28, 40, 0.62); --ui-solid: #12202c; --accent: #ffd23f; --text: #f4f7fa; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1a24; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-box { background: var(--ui); border-radius: 12px; padding: 6px 10px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#top-left { position: absolute; left: calc(10px + env(safe-area-inset-left)); top: calc(10px + env(safe-area-inset-top)); display: flex; gap: 8px; align-items: flex-start; max-width: 55vw; pointer-events: none; }
#top-left #btn-menu { pointer-events: auto; }
#btn-menu { background: rgba(255,255,255,0.12); border: 0; border-radius: 8px; width: 34px; height: 34px; font-size: 18px; }
#place { font-weight: 700; font-size: 15px; line-height: 1.2; }
#place-sub { font-size: 12px; opacity: 0.8; }
#clock-row { font-size: 12px; opacity: 0.85; margin-top: 2px; }
#top-right { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: calc(10px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
#minimap { width: 112px; height: 112px; border-radius: 50%; pointer-events: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
#stats { font-size: 13px; display: flex; gap: 10px; }
#bottom-right { position: absolute; right: calc(14px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.round { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: var(--ui); font-size: 24px; }
#btn-run.on { background: rgba(255, 210, 63, 0.75); border-color: #fff; }
#btn-act { display: none; position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 14px 22px; border-radius: 30px; border: 2px solid #fff; background: rgba(255, 210, 63, 0.92); color: #1a1a1a; font-weight: 700; font-size: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }
#joy-base { display: none; position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.35); pointer-events: none; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.55); transform: translate(-50%,-50%); }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255,255,255,0.7); pointer-events: none; box-shadow: 0 0 2px #000; }
#toasts { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: 90vw; }
.toast { background: var(--ui); padding: 8px 16px; border-radius: 20px; font-size: 14px; opacity: 0; transform: translateY(-8px); transition: all .35s; text-align: center; }
.toast.show { opacity: 1; transform: none; }
.toast.big { font-size: 18px; font-weight: 700; padding: 12px 20px; background: rgba(20, 40, 60, 0.8); border: 1px solid rgba(255,255,255,0.3); }
.toast.gold { background: rgba(120, 90, 10, 0.85); border: 1px solid var(--accent); color: #fff6d0; font-weight: 700; }
.overlay { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(8, 16, 24, 0.82); z-index: 10; padding: 10px; }
.overlay.open { display: flex; }
.overlay.small > * { width: min(420px, 92vw); }
.overlay-head { display: flex; justify-content: space-between; align-items: center; width: min(600px, 96vw); margin-bottom: 8px; font-weight: 700; font-size: 17px; }
.overlay-head button { background: rgba(255,255,255,0.15); border: 0; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; }
#map-canvas { border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
#map-hint { margin-top: 8px; font-size: 13px; opacity: 0.85; text-align: center; max-width: 92vw; }
#panel-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow: auto; }
#panel-list button, #settings button { padding: 14px; border-radius: 12px; border: 0; background: rgba(255,255,255,0.14); font-size: 16px; text-align: left; }
#panel-list button.current { background: rgba(255, 210, 63, 0.35); }
#settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 15px; }
#settings select, #settings input[type=range] { max-width: 50%; }
#settings button { margin-top: 10px; width: 100%; text-align: center; }
#settings button.danger { background: rgba(200, 60, 60, 0.35); }
.help { font-size: 13px; opacity: 0.8; line-height: 1.5; }
.help.small { font-size: 12px; opacity: 0.65; }
#title { background: radial-gradient(ellipse at 50% 30%, #2a6a8a 0%, #12283a 70%); }
.title-card { text-align: center; max-width: 440px; padding: 16px; }
.title-card h1 { font-size: 44px; margin: 0; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,0.3); }
.tag { margin: 4px 0 22px; opacity: 0.85; font-size: 17px; }
#start { padding: 16px 40px; font-size: 20px; font-weight: 700; border-radius: 40px; border: 0; background: var(--accent); color: #1a1a1a; box-shadow: 0 6px 20px rgba(0,0,0,0.35); margin: 10px 0 18px; }
#start:disabled { opacity: 0.4; }
#loading { font-size: 14px; opacity: 0.8; min-height: 20px; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 20; }
#fade.on { opacity: 1; }
@media (max-height: 500px) { #minimap { width: 84px; height: 84px; } .round { width: 50px; height: 50px; font-size: 20px; } .title-card h1 { font-size: 32px; } .tag { margin-bottom: 8px; } }