* {
  box-sizing: border-box; margin: 0; padding: 0;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #f4f1ea; overscroll-behavior: none; }
body { font-family: 'IBM Plex Sans JP', system-ui, sans-serif; font-weight: 400; position: fixed; inset: 0; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.jp { font-family: 'IBM Plex Sans JP', system-ui, sans-serif; }
.band { background: rgba(0, 0, 0, 0.5); padding: 0.06em 0.38em; display: inline-block; line-height: 1.35; white-space: nowrap; }
.hide { display: none !important; }
canvas#gl, canvas#bucket { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
canvas#bucket { pointer-events: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; white-space: nowrap; }
.btn { white-space: nowrap; overflow: hidden; }
.btn.ghost { background: rgba(0, 0, 0, 0.5); padding: 0.28em 0.7em; font-size: clamp(12px, 3.4vw, 15px); letter-spacing: 0.04em; border-bottom: 1px solid rgba(244, 241, 234, 0.55); }
.btn.line { border: 1px solid rgba(244, 241, 234, 0.7); padding: 0.45em 1.1em; font-size: clamp(13px, 3.8vw, 16px); background: rgba(0, 0, 0, 0.35); transition: background .15s, color .15s; }
.btn.line:active, .btn.ghost:active { background: rgba(244, 241, 234, 0.2); }

/* ---------- プレイ中の表示（計測器の表示） ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-size: clamp(11px, 3.1vw, 14px); }
#hud .btn { pointer-events: auto; }
#meter { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: calc(env(safe-area-inset-left) + 56px); display: flex; gap: 6px; flex-direction: column; font-size: clamp(10px, 2.8vw, 13px); }
#pauseBtn { position: absolute; top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 10px); width: 38px; height: 34px; font-size: 16px; padding: 0; border-bottom: 1px solid rgba(244,241,234,.55); }
#cross { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform .08s linear; }
#cross .ch { position: absolute; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 0.5px rgba(0,0,0,.5); }
#cross .h { width: 30px; height: 1px; left: -15px; top: 0; }
#cross .v { width: 1px; height: 30px; left: 0; top: -15px; }
#crossT { position: absolute; left: 9px; top: 7px; font-size: clamp(11px, 3vw, 13px); }
#wind { position: absolute; left: 0; top: 0; font-size: clamp(11px, 3vw, 13px); }
#windBar { display: block; height: 2px; background: #f4f1ea; margin-top: 2px; width: 40px; }
#scale { position: absolute; right: calc(env(safe-area-inset-right) + 8px); top: calc(env(safe-area-inset-top) + 12%); height: 44%; width: 10px; }
#scaleBar { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(to top, #000000, #3B0A5C 20%, #B3122E 40%, #F06A1B 60%, #FFD35A 80%, #FFFFF0); outline: 1px solid rgba(255,255,255,.45); }
#scaleTicks { position: absolute; right: 12px; top: 0; bottom: 0; width: 34px; font-size: clamp(9px, 2.5vw, 11px); }
#scaleTicks span { position: absolute; right: 0; transform: translateY(-50%); background: rgba(0,0,0,.5); padding: 0 3px; }
#heatLine { position: absolute; right: 50px; top: 0; bottom: 0; width: 2px; background: rgba(244, 241, 234, 0.25); }
#heatFill { position: absolute; left: 0; bottom: 0; width: 2px; background: #fffff0; height: 100%; transition: height .3s ease-out; }
#heatGoal { position: absolute; left: -5px; width: 12px; height: 1px; background: #fffff0; bottom: 10%; }
#heatLabel { position: absolute; right: 56px; transform: translateY(50%); font-size: clamp(11px, 3vw, 13px); transition: bottom .3s ease-out; }
#goalLabel { position: absolute; right: 56px; bottom: 10%; transform: translateY(50%); font-size: clamp(9px, 2.5vw, 11px); opacity: .85; }
#ladles, #score { position: absolute; display: flex; flex-direction: column; gap: 3px; font-size: clamp(12px, 3.5vw, 15px); }
#ladles { align-items: flex-end; }
#score { align-items: flex-start; }
#ladles b, #score b { font-weight: 500; font-size: 1.45em; margin: 0 0.12em; }
#ladles .sub, #score .sub { font-size: 0.82em; opacity: .9; }
#okeState { color: rgba(244,241,234,.5); transition: color .2s, text-shadow .2s; }
#okeState.ready { color: #FFD35A; text-shadow: 0 0 8px rgba(255, 211, 90, .7); }
#okeState.used { color: rgba(244,241,234,.35); text-decoration: line-through; }
#okeState.stance { color: #fffff0; text-shadow: 0 0 10px rgba(255,255,240,.9), 0 0 3px #F06A1B; }
#hint { position: absolute; transform: translate(-50%, -100%); font-size: clamp(12px, 3.4vw, 15px); transition: opacity .25s; }
#labels { position: absolute; inset: 0; }
.lbl { position: absolute; transform: translate(-50%, -100%); font-size: clamp(11px, 3vw, 13px); white-space: nowrap; }
.lbl i { display: block; width: 1px; height: 14px; background: rgba(255,255,255,.8); margin: 0 auto; }

/* ---------- タイトル ---------- */
.screen { position: fixed; inset: 0; }
#title { pointer-events: none; }
#title > * { pointer-events: auto; }
#titleMeter { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: calc(env(safe-area-inset-left) + 12px); display: flex; flex-direction: column; gap: 5px; font-size: clamp(10px, 2.8vw, 13px); pointer-events: none !important; }
#title { display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + max(7vh, 62px)) 16px var(--bpad, 180px); gap: min(1.6vh, 12px); }
#titleText { font-weight: 300; font-size: clamp(28px, min(10vw, 7vh), 60px); letter-spacing: 0.08em; white-space: nowrap; pointer-events: none !important; margin-bottom: 1.5vh; }
#titleText .band { padding: 0.04em 0.3em; }
#diffs { width: min(calc(100vw - 84px), 440px); display: flex; flex-direction: column; gap: min(1vh, 8px); margin-right: 40px; }
.diff { text-align: left; padding: min(0.9vh, 7px) 10px min(0.9vh, 7px) 26px; background: rgba(0,0,0,.5); border-left: 1px solid rgba(244,241,234,.25); position: relative; color: rgba(244,241,234,.62); white-space: normal; }
.diff .dn { display: block; font-size: clamp(14px, min(4.4vw, 2.8vh), 19px); white-space: nowrap; }
.diff .dd { display: block; font-size: clamp(10px, min(3.1vw, 2vh), 13px); opacity: .85; margin-top: 2px; line-height: 1.35; }
.diff.sel { color: #fffff0; border-left: 2px solid #fffff0; text-shadow: 0 0 8px rgba(255,255,240,.35); }
.diff.sel::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: #FFD35A; box-shadow: 0 0 6px #F06A1B; }
#best { font-size: clamp(10px, 3vw, 13px); white-space: nowrap; pointer-events: none !important; min-height: 1.2em; }
#titleBtns { display: flex; gap: 10px; }
#startLabel { margin-top: auto; font-size: clamp(13px, 3.8vw, 16px); letter-spacing: .08em; pointer-events: none !important; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .6; } }

/* ---------- 遊び方（印刷された紙） ---------- */
#howto { background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.sheet { width: min(calc(100vw - 32px), 420px); max-height: calc(100vh - 32px); overflow: hidden; background: #fbfbf7; color: #111; padding: 14px 16px 12px; border-top: 1px solid #111; border-bottom: 1px solid #111; }
.sheetHead { font-size: 12px; border-bottom: 1px solid #111; padding-bottom: 6px; margin-bottom: 8px; letter-spacing: .06em; }
.step { display: flex; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.25); }
.step canvas { width: min(34vw, 132px); height: auto; flex: none; border: 1px solid #111; }
.step p { font-size: clamp(13px, 3.8vw, 15px); line-height: 1.5; }
.step p b { display: inline-block; width: 1.4em; font-weight: 500; }
.joy { text-align: center; font-size: clamp(14px, 4vw, 16px); padding: 10px 0 4px; }
.tapClose { text-align: center; font-size: 11px; opacity: .6; letter-spacing: .1em; }

/* ---------- 一時停止・音 ---------- */
#pause, #soundPanel { background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; }
.panel { display: flex; flex-direction: column; gap: 14px; align-items: stretch; width: min(78vw, 300px); border-top: 1px solid rgba(244,241,234,.6); border-bottom: 1px solid rgba(244,241,234,.6); padding: 16px 0; }
.pTitle { text-align: center; font-size: 15px; letter-spacing: .1em; opacity: .8; }
.vol { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.vol span { width: 4.2em; flex: none; }
.slider { position: relative; flex: 1; height: 34px; cursor: pointer; }
.slider i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(244,241,234,.6); }
.slider b { position: absolute; top: 50%; width: 2px; height: 20px; margin: -10px 0 0 -1px; background: #fffff0; box-shadow: 0 0 6px rgba(255,211,90,.8); }

/* ---------- 計測レポート ---------- */
#report { background: rgba(0, 0, 0, 0.62); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px); }
#reportWrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
#reportCv { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
#reportBtns { flex: none; display: grid; grid-template-columns: repeat(4, auto); gap: 8px; justify-content: center; }
@media (max-aspect-ratio: 3/4) { #reportBtns { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 420px); } }
@media (max-height: 420px) { #reportBtns .btn.line { padding: 0.3em 0.8em; } }
@media (orientation: landscape) and (max-height: 520px) {
  #title { padding-top: calc(env(safe-area-inset-top) + 3vh); gap: 1vh; }
  #titleText { font-size: clamp(22px, 8vh, 40px); margin-bottom: 0; }
  #diffs { width: min(62vw, 460px); gap: 3px; }
  .diff .dd { display: none; }
  .sheet { width: min(calc(100vw - 24px), 760px); padding: 8px 14px 8px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; }
  .sheetHead, .joy, .tapClose { grid-column: 1 / -1; }
  .step { flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 0; border-bottom: none; }
  .step canvas { width: min(24vw, 42vh); }
  .step p { font-size: 12px; line-height: 1.4; }
  .joy { padding: 4px 0 2px; }
}
#hud.titleMode #ladles, #hud.titleMode #score, #hud.titleMode #pauseBtn, #hud.titleMode #meter, #hud.titleMode #wind,
#hud.titleMode #heatLine, #hud.titleMode #heatLabel, #hud.titleMode #goalLabel, #hud.titleMode #hint { display: none; }
#boot { position: fixed; left: 50%; top: 46%; transform: translateX(-50%); font-size: 13px; opacity: .8; display: none; }
body.loading #boot { display: block; }
body.loading #hud, body.loading #title, body.loading #bucket { visibility: hidden; }