:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  --ink: #251b15;
  --panel: rgba(255, 248, 235, .9);
  --line: rgba(67, 43, 28, .18);
  --accent: #e67f2d;
  --accent-deep: #8f421b;
  --shadow: rgba(48, 25, 12, .24);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #fff8ea;
  --panel: rgba(27, 27, 30, .88);
  --line: rgba(255, 238, 210, .18);
  --accent: #ff9a45;
  --accent-deep: #ffbd81;
  --shadow: rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #b9d3dc; color: var(--ink); }
button, a { font: inherit; }
button { color: inherit; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 20px; pointer-events: none; }
.back, .global-controls button { pointer-events: auto; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 8px 24px var(--shadow); backdrop-filter: blur(12px); }
.back { justify-self: start; display: flex; align-items: center; gap: 5px; min-height: 42px; padding: 7px 14px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 850; }
.back:first-letter { font-size: 25px; }
.brand { display: flex; flex-direction: column; align-items: center; text-shadow: 0 1px 8px rgba(255,255,255,.55); }
.brand b { font-size: 15px; letter-spacing: .13em; }
.brand span { margin-top: 3px; color: #633c25; font-size: 10px; font-weight: 900; letter-spacing: .19em; }
:root[data-theme="dark"] .brand { text-shadow: 0 2px 8px #000; }
:root[data-theme="dark"] .brand span { color: #ffd3a6; }
.global-controls { justify-self: end; display: flex; gap: 7px; pointer-events: auto; }
.global-controls button { min-width: 42px; min-height: 42px; border-radius: 999px; font-weight: 850; cursor: pointer; }

.objective { position: fixed; z-index: 4; top: 88px; left: 20px; width: min(340px, calc(100% - 40px)); padding: 18px 20px 16px; border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 4px 18px 18px 4px; background: var(--panel); box-shadow: 0 18px 42px var(--shadow); backdrop-filter: blur(14px); }
.objective-head { display: flex; justify-content: space-between; color: var(--accent-deep); font-size: 10px; font-weight: 950; letter-spacing: .18em; }
.objective h1 { margin: 10px 0 12px; font-size: 21px; line-height: 1.1; letter-spacing: -.03em; }
.objective p { margin: 10px 0 0; opacity: .68; font-size: 12px; }
.progress { height: 5px; overflow: hidden; border-radius: 10px; background: var(--line); }
.progress i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .35s ease; }

.crosshair { position: fixed; z-index: 3; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); opacity: .85; pointer-events: none; }
.crosshair i { position: absolute; left: 50%; top: 50%; display: block; background: white; box-shadow: 0 0 3px #000; transform: translate(-50%, -50%); }
.crosshair i:first-child { width: 18px; height: 2px; }
.crosshair i:last-child { width: 2px; height: 18px; }
.crosshair.active i { background: #ffb461; }
.prompt { position: fixed; z-index: 4; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); min-height: 28px; padding: 7px 11px; border-radius: 8px; background: rgba(24,18,14,.78); color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transition: opacity .12s; pointer-events: none; }
.prompt.visible { opacity: 1; }
.held { position: fixed; z-index: 4; right: 20px; bottom: 78px; min-width: 190px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(34,24,17,.8); color: white; box-shadow: 0 12px 32px var(--shadow); backdrop-filter: blur(10px); }
.held span { display: block; color: #ffc181; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.held b { display: block; margin-top: 4px; font-size: 15px; }

.controls-hint { position: fixed; z-index: 4; left: 20px; bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.controls-hint span { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 6px 18px var(--shadow); backdrop-filter: blur(9px); }
.controls-hint kbd { color: var(--accent-deep); font-weight: 950; font-size: 10px; }
.controls-hint i { font-style: normal; font-size: 10px; opacity: .72; }

.overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 36%, rgba(46,32,22,.25), rgba(20,13,10,.72)); backdrop-filter: blur(5px); }
.overlay[hidden] { display: none; }
.start-card { width: min(430px, 100%); padding: 36px 34px 30px; border: 1px solid rgba(255,255,255,.25); border-radius: 26px; background: rgba(255,249,237,.95); color: #291d15; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.eyebrow { color: #a34f20; font-size: 10px; font-weight: 950; letter-spacing: .2em; }
.doghouse-mark { width: 86px; height: 86px; margin: 18px auto; display: grid; place-items: center; border-radius: 22px; background: #e7883e; color: white; font-size: 64px; font-weight: 900; line-height: 1; box-shadow: inset 0 -8px 0 rgba(104,44,14,.18); }
.doghouse-mark.done { font-size: 45px; background: #5d9a55; }
.start-card h2 { margin: 0; font-size: 29px; line-height: 1.04; letter-spacing: -.045em; }
.start-card p { margin: 14px auto 22px; max-width: 330px; color: #6c584a; font-size: 14px; line-height: 1.5; }
.start-card button { width: 100%; min-height: 52px; border: 0; border-radius: 13px; background: #2d211a; color: white; font-size: 13px; font-weight: 950; letter-spacing: .08em; cursor: pointer; box-shadow: 0 8px 0 #160e0a; }
.start-card button:active { transform: translateY(4px); box-shadow: 0 4px 0 #160e0a; }
.start-card small { display: block; margin-top: 16px; color: #806e61; font-size: 11px; }

.touch-ui { display: none; position: fixed; z-index: 8; inset: auto 0 18px; padding: 0 20px; justify-content: space-between; align-items: end; pointer-events: none; }
.stick { position: relative; width: 104px; height: 104px; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(20,15,12,.25); pointer-events: auto; touch-action: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: 0 4px 12px rgba(0,0,0,.25); transform: translate(-50%,-50%); }
.touch-actions { display: flex; gap: 10px; align-items: end; pointer-events: auto; }
.touch-actions button { width: 64px; height: 64px; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(40,28,20,.72); color: white; font-size: 10px; font-weight: 900; }
.touch-actions .primary { width: 82px; height: 82px; background: rgba(221,115,37,.88); }

@media (pointer: coarse) {
  .touch-ui.active { display: flex; }
  .controls-hint { display: none; }
  .held { bottom: 136px; right: 14px; }
  .prompt { top: calc(50% + 28px); }
}

@media (max-width: 640px) {
  .topbar { padding: 10px 12px; }
  .brand b { font-size: 11px; }
  .brand span { font-size: 8px; }
  .back { min-width: 42px; padding: 7px 12px; }
  .back span { display: none; }
  .objective { top: 70px; left: 12px; width: min(285px, calc(100% - 24px)); padding: 13px 15px 12px; }
  .objective h1 { margin: 7px 0 9px; font-size: 17px; }
  .objective p { font-size: 10px; }
  .global-controls button { min-width: 38px; min-height: 38px; }
  .held { min-width: 150px; }
  .start-card { padding: 28px 22px 25px; }
  .start-card h2 { font-size: 25px; }
}