:root {
  --ink: #fff6ea;
  --ink-2: #e7cfb6;
  --panel: rgba(24, 18, 15, 0.78);
  --line: rgba(255, 230, 200, 0.18);
  --lava: #ff6a2a;
  --lava-2: #ffb36b;
  --danger: #ff3b2f;
  --font-display: "Dela Gothic One", "Hiragino Sans", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120e0c; color: var(--ink); font-family: var(--font-body); }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#flash { position: fixed; inset: 0; pointer-events: none; background: #ffd9a8; opacity: 0; transition: opacity 1.2s; }
[hidden] { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.dist { display: flex; align-items: baseline; gap: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.dist .lab { font-size: 13px; color: var(--ink-2); }
.dist b { font-family: var(--font-data); font-size: clamp(38px, 8vw, 64px); font-variant-numeric: tabular-nums; line-height: 1; }
.dist .unit { font-size: 18px; }
.time { font-family: var(--font-data); font-size: 15px; color: var(--ink-2); margin-top: 4px; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
#pfBar { margin-top: 10px; width: min(280px, 60vw); background: var(--panel); border: 1px solid var(--line); padding: 6px 10px 8px; border-radius: 4px; }
#pfBar .lab { font-size: 12px; color: var(--ink-2); margin-right: 8px; }
#pfBar b { font-family: var(--font-data); font-size: 18px; color: var(--lava-2); }
#pfBar .track { height: 6px; background: rgba(255,255,255,0.12); margin-top: 6px; border-radius: 3px; overflow: hidden; }
#pfFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--danger), var(--lava-2)); }
#map { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: min(300px, 46vw); height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
#msg { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(20px, 4.4vw, 34px); text-align: center; text-shadow: 0 3px 14px rgba(0,0,0,0.85); pointer-events: none; width: min(92vw, 760px); line-height: 1.35; transition: opacity 0.4s; }
#msg small { display: block; font-family: var(--font-body); font-size: 15px; color: var(--ink-2); margin-top: 6px; }

#stick { position: fixed; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.2); pointer-events: none; }
#knob { position: absolute; left: 34px; top: 34px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,240,220,0.7); }

.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 30%, rgba(40,20,12,0.35), rgba(10,7,6,0.82)); overflow-y: auto; }
.card { width: min(640px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 26px 24px; display: grid; gap: 14px; backdrop-filter: blur(4px); }
.card.wide { width: min(760px, 100%); }
.eyebrow { margin: 0; font-family: var(--font-data); font-size: 12px; letter-spacing: 0.06em; color: var(--lava-2); }
h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 7vw, 52px); line-height: 1.15; }
h1 span { font-size: 0.56em; color: var(--lava-2); }
h2 { margin: 0; font-family: var(--font-display); font-weight: 400; display: flex; align-items: baseline; gap: 8px; }
h2 b { font-family: var(--font-data); font-size: clamp(54px, 13vw, 84px); font-weight: 500; line-height: 1; }
h2 span { font-size: 22px; }
h2.small { font-size: 24px; }
.card p { margin: 0; line-height: 1.7; }
.how { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.how b { color: var(--ink); margin-right: 4px; }
.facts { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 14px; line-height: 1.6; }
.facts .id, td.id { font-family: var(--font-data); font-size: 11px; color: var(--ink-2); opacity: 0.8; }
.where { font-size: 15px; color: var(--ink-2); }
.best { font-family: var(--font-data); color: var(--lava-2); font-size: 14px; }
.fine { font-size: 12px; color: var(--ink-2); opacity: 0.85; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
button { font: 700 16px var(--font-body); color: #1a0f0a; background: var(--lava); border: 0; border-radius: 4px; padding: 12px 22px; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: wait; }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button:focus-visible { outline: 2px solid var(--lava-2); outline-offset: 2px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
td { border-bottom: 1px solid var(--line); padding: 7px 6px; vertical-align: top; line-height: 1.5; }
#lookBtn { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); pointer-events: auto; padding: 10px 16px; font-size: 14px; background: var(--panel); touch-action: none; user-select: none; -webkit-user-select: none; }
#lookBtn span { font-family: var(--font-data); font-size: 11px; opacity: 0.7; margin-left: 4px; }
#gauge { margin-top: 10px; width: min(280px, 60vw); }
#gauge .lab { font-size: 12px; color: var(--ink-2); text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
#gauge .track { height: 10px; background: rgba(0,0,0,0.45); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin-top: 4px; }
#gaugeFill { height: 100%; width: 100%; background: linear-gradient(90deg, #ffcf5a, var(--lava)); transition: width 0.1s linear; }
#gauge.on #gaugeFill { background: linear-gradient(90deg, #fff1a8, #ffcf5a); box-shadow: 0 0 10px #ffcf5a; }
#gauge.low #gaugeFill { background: var(--danger); }
#sprintBtn { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px); pointer-events: auto; width: 96px; height: 96px; border-radius: 50%; padding: 0; font-size: 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
#sprintBtn span { display: block; font-family: var(--font-data); font-size: 10px; opacity: 0.7; }
@media (hover: hover) and (pointer: fine) { #sprintBtn { display: none; } }
#soundBtn { position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 52px); right: max(16px, env(safe-area-inset-right)); pointer-events: auto; padding: 8px 14px; font-size: 13px; background: var(--panel); }
#engulf { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease-in; background: radial-gradient(ellipse at 50% 75%, rgba(255, 120, 40, 0.65), rgba(90, 62, 48, 0.96) 55%, rgba(40, 30, 26, 1) 100%); }
#engulf.on { opacity: 1; }
#resMap { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; display: block; }
h3.small3 { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); font-weight: 700; }
#rankList { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 14px; }
#rankList li { display: flex; gap: 6px; align-items: baseline; padding: 3px 6px; border-radius: 3px; }
#rankList li b { margin-left: auto; font-family: var(--font-data); font-variant-numeric: tabular-nums; }
#rankList li.me { background: rgba(255, 106, 42, 0.18); }
.btnlink { font: 700 16px var(--font-body); color: #fff; background: #111; border: 1px solid var(--line); border-radius: 4px; padding: 12px 22px; text-decoration: none; }
#shareText { width: 100%; background: rgba(0,0,0,0.3); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font: 13px var(--font-body); padding: 8px; }
#slideBtn { position: absolute; right: calc(max(16px, env(safe-area-inset-right)) + 110px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 160px); pointer-events: auto; width: 80px; height: 80px; border-radius: 50%; padding: 0; font-size: 15px; background: #c8a070; touch-action: none; user-select: none; -webkit-user-select: none; }
#slideBtn span { display: block; font-family: var(--font-data); font-size: 10px; opacity: 0.7; }
#hutBadge { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 24px); transform: translateX(-50%); background: rgba(40, 90, 60, 0.85); color: #eaffef; padding: 8px 14px; border-radius: 4px; font-size: 14px; white-space: nowrap; }