:root { --ink: #25231f; --gold: #aa8446; --paper: #f7f4ed; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; color: var(--ink); background: var(--paper); }
body { font-family: YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif; }
button { font: inherit; }
.title-screen { min-height: 100svh; padding: 0 26px calc(104px + env(safe-area-inset-bottom)); background: #f8f6f1 url("/title-background.png") center/cover no-repeat; display: flex; align-items: flex-end; justify-content: center; position: relative; overflow: hidden; }
.title-screen::after { content: ""; pointer-events: none; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(transparent, rgba(247,244,237,.82)); }
.title-copy { position: absolute; top: 26%; left: 50%; width: min(88%, 440px); color: #292720; text-align: center; transform: translate(-50%, -50%); }
.title-copy h1 { margin: 0; font-size: clamp(31px, 9vw, 44px); font-weight: 400; letter-spacing: .12em; }
.title-copy p { margin: 18px 0 0; font-size: clamp(13px, 3.8vw, 17px); letter-spacing: .14em; }
.title-emblem { position: absolute; top: 55.5%; left: 50%; width: 140px; height: auto; transform: translate(-50%, -50%); }
.memorial-copy { position: absolute; top: 63.5%; left: 50%; width: min(88%, 420px); color: #3f3b35; text-align: center; transform: translate(-50%, -50%); }
.memorial-copy p { margin: 0; font-size: 13px; letter-spacing: .14em; }
.memorial-copy p + p { margin-top: 20px; font-size: 11px; letter-spacing: .18em; }
.title-actions { z-index: 1; position: relative; display: grid; gap: 26px; width: min(100%, 420px); }
.title-notice { color: #5f594f; text-align: center; }
.title-notice p { margin: 7px 0 0; font: 10px/1.8 system-ui, sans-serif; letter-spacing: .025em; }
.title-notice .device-note { margin: 0 0 13px; color: #6f5730; font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.start-button { z-index: 1; position: relative; width: min(100%, 360px); min-height: 56px; border: 1px solid rgba(85,73,54,.25); border-radius: 999px; color: #292720; background: rgba(255,255,255,.76); box-shadow: 0 8px 28px rgba(65,50,29,.1); backdrop-filter: blur(14px); letter-spacing: .18em; -webkit-tap-highlight-color: transparent; }
.start-button { justify-self: center; transform: translateY(36px); }
.start-button:active { transform: translateY(36px) scale(.98); }
.title-credit { position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; z-index: 1; margin: 0; color: #8f887d; font: 9px/1 system-ui, sans-serif; letter-spacing: .12em; transform: translateX(-50%); }
.compass-screen { min-height: 100svh; padding: calc(28px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.9), transparent 42%), linear-gradient(155deg,#faf8f2,#eee9df); }
.compass-header { text-align: center; }
.eyebrow { margin: 0 0 9px; color: var(--gold); font: 600 10px/1 system-ui; letter-spacing: .24em; }
.compass-header h1 { margin: 0; font-size: clamp(28px,8vw,38px); font-weight: 400; letter-spacing: .11em; }
.compass-header > p:last-child { margin: 9px 0 0; color: #777064; font-size: 13px; letter-spacing: .08em; }
.dial { position: relative; width: min(74vw,310px); aspect-ratio: 1; margin: clamp(28px,6svh,54px) 0 25px; border: 1px solid rgba(76,69,57,.2); border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 22px 50px rgba(53,44,31,.09), inset 0 0 0 10px rgba(255,255,255,.23); }
.ticks { position: absolute; inset: 13px; border: 1px dashed rgba(68,62,52,.3); border-radius: 50%; }
.yasukuni-mark { z-index: 2; position: absolute; top: 14px; left: 50%; width: 30px; height: 30px; transform: translateX(-50%); color: var(--gold); filter: drop-shadow(0 2px 3px rgba(67,47,18,.16)); }
.yasukuni-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.needle { position: absolute; inset: 17%; transition: transform .28s ease-out; }
.needle-tip { position: absolute; top: 0; left: 50%; width: 0; height: 0; border-right: 18px solid transparent; border-bottom: 105px solid var(--gold); border-left: 18px solid transparent; transform: translateX(-50%); filter: drop-shadow(0 4px 3px rgba(67,47,18,.16)); }
.needle-tail { position: absolute; bottom: 8px; left: 50%; width: 0; height: 0; border-top: 80px solid #34322d; border-right: 12px solid transparent; border-left: 12px solid transparent; transform: translateX(-50%); }
.needle.waiting { opacity: .28; }
.pin { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border: 3px solid #f8f5ee; border-radius: 50%; background: var(--gold); box-shadow: 0 1px 5px rgba(0,0,0,.18); transform: translate(-50%,-50%); }
.reading { min-height: 76px; text-align: center; }
.reading h2 { margin: 0; font-size: clamp(22px,6vw,28px); font-weight: 500; letter-spacing: .08em; }
.reading p { margin: 8px 0 0; color: #777064; font-size: 14px; }
.status { display: flex; align-items: center; gap: 9px; max-width: 100%; margin-top: auto; padding: 12px 17px; border: 1px solid rgba(86,74,56,.12); border-radius: 999px; background: rgba(255,255,255,.5); }
.status p { min-width: 0; margin: 0; color: #655f56; font-size: 12px; overflow-wrap: anywhere; }
.status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(170,132,70,.12); }
.status.error { border-color: rgba(139,67,55,.18); background: rgba(255,247,244,.78); }
.status.error p { color: #7b4037; }
.status.error .status-dot { background: #9b5549; box-shadow: 0 0 0 4px rgba(155,85,73,.12); }
.privacy { margin: 12px 0 0; color: #958e83; font: 10px/1.5 system-ui; text-align: center; }
@media (max-height: 720px) {
  .title-copy { top: 19%; }
  .title-emblem { top: 43%; }
  .memorial-copy { top: 52%; }
}
@media (max-height: 600px) {
  .title-screen { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .title-copy { top: 15%; }
  .title-copy h1 { font-size: 26px; }
  .title-copy p { margin-top: 9px; font-size: 11px; }
  .title-emblem { top: 36%; width: 118px; }
  .memorial-copy { top: 46%; }
  .memorial-copy p { font-size: 11px; }
  .memorial-copy p + p { margin-top: 10px; font-size: 9px; }
  .title-actions { gap: 18px; }
  .title-notice p { margin-top: 4px; font-size: 9px; line-height: 1.55; }
  .title-notice .device-note { margin-bottom: 7px; font-size: 10px; }
  .start-button { min-height: 50px; transform: translateY(25px); }
  .start-button:active { transform: translateY(25px) scale(.98); }
}
@media (max-height: 690px) { .dial { width: min(58vw,250px); margin: 20px 0 16px; } .needle-tip { border-bottom-width: 82px; } .needle-tail { border-top-width: 62px; } }
@media (prefers-reduced-motion: reduce) { .needle { transition: none; } }