* { 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; }
:root {
  --porcelain: #F4F6F7; --porcelain-shade: #AFBCC6; --peach: #F7D7A0; --peach-red: #E2567A; --water: #8FD3E6;
  --resin: #dcd7ce; --resin-hi: #ebe7e0; --resin-lo: #cbc5ba; --print: #4a4844; --print-soft: #7b766e; --led: #49c46a;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #e6e1d8; overscroll-behavior: none; }
body { position: fixed; inset: 0; font-family: 'Sawarabi Gothic', 'Hiragino Sans', 'Yu Gothic', sans-serif; color: var(--print); }
#app { position: absolute; inset: 0; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: absolute; inset: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- title ---------- */
#title { pointer-events: none; display: flex; justify-content: center; }
#logo { position: absolute; top: calc(var(--sat) + 4.5vh); width: 100%; text-align: center; font-weight: normal; }
#logo .l1 { display: block; font-family: 'Rampart One', sans-serif; font-size: clamp(30px, min(11.5vw, 9.5vh), 78px); color: var(--porcelain); letter-spacing: 0.02em; line-height: 1.15;
  text-shadow: 0 0 1px rgba(80, 66, 52, 1), 0 0 3px rgba(80, 66, 52, .75), 0 1px 10px rgba(90, 72, 54, .6), 0 0 28px rgba(110, 88, 64, .45); }
#logo .l2 { display: block; margin-top: .45em; font-size: clamp(12px, min(4.1vw, 3.2vh), 22px); color: #5e5248; letter-spacing: .06em; text-shadow: 0 0 8px rgba(255, 250, 240, .9); }

/* ---------- wall control panel ---------- */
.pnl { background: linear-gradient(180deg, var(--resin-hi), var(--resin) 55%, #d3cdc3); border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .07), 0 3px 10px rgba(70, 60, 48, .22); }
.pbtn { position: relative; display: flex; align-items: center; justify-content: center; gap: .45em; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, #f5f3ef, #e8e4dd); border: 1px solid #c4bdb1; border-radius: 3px; color: var(--print);
  font-size: clamp(12px, min(3.9vw, 3.4vh), 18px); letter-spacing: .04em; min-height: 40px; padding: 0 .9em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); transition: background .12s; }
.pbtn:active, .pbtn.on { background: linear-gradient(180deg, #e9e5de, #dedad2); }
.pbtn svg { width: 1.3em; height: 1.3em; flex: none; fill: #6f6a62; stroke: #6f6a62; }
.pbtn .led { position: absolute; top: 5px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: #b8b2a7; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .2); }
.pbtn.lit .led { background: var(--led); box-shadow: 0 0 5px rgba(73, 196, 106, .9); }
.pbtn .lb { display: block; overflow: hidden; text-overflow: clip; }
.pbtn.big { min-height: clamp(48px, 9vh, 66px); font-size: clamp(16px, min(5.4vw, 4.4vh), 26px); }
.pbtn.big svg { width: 1.5em; height: 1.5em; }
.pbtn.sm { min-height: 34px; font-size: clamp(11px, min(3.4vw, 3vh), 15px); padding: 0 .6em; }
.kbd { display: none; font-size: .62em; color: var(--print-soft); letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .kbd { display: inline; } }

/* title menu */
#menu { pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding: 0 calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal)); }
.menu-pnl { pointer-events: auto; width: min(100%, 460px); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
#startBtn svg { fill: none; stroke: none; }
#diffs { display: flex; flex-direction: column; gap: 6px; }
.diff { display: grid; grid-template-columns: minmax(0, 37%) minmax(0, 1fr); align-items: center; gap: 7px; }
.diff .pbtn { min-height: 38px; padding: 0 .4em; letter-spacing: 0; font-size: clamp(11px, min(3.6vw, 3.2vh), 17px); }
.diff p { font-size: clamp(9.5px, min(2.95vw, 2.5vh), 13px); letter-spacing: -0.01em; color: var(--print-soft); white-space: nowrap; overflow: hidden; }
.diff .pbtn.lit + p { color: var(--print); }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#fsNote { font-size: 11px; color: var(--print-soft); text-align: center; white-space: nowrap; }
@media (orientation: landscape) {
  #menu { align-items: center; justify-content: flex-end; padding: calc(8px + var(--sat)) calc(14px + var(--sar)) calc(8px + var(--sab)) 14px; }
  .menu-pnl { width: min(56vw, 460px); gap: 6px; padding: 9px; }
  #logo { width: 42%; left: 0; top: calc(var(--sat) + 8vh); }
  #logo .l1 { font-size: clamp(24px, min(5.6vw, 9.5vh), 70px); }
  #logo .l2 { font-size: clamp(10px, min(1.9vw, 3.2vh), 18px); }
  .pbtn { min-height: 32px; }
  .pbtn.big { min-height: 44px; }
  .diff .pbtn { min-height: 30px; font-size: clamp(11px, min(2.1vw, 3.8vh), 16px); }
  .diff { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  .diff p { font-size: clamp(10px, min(1.9vw, 3.4vh), 13px); }
  .pbtn.sm { min-height: 28px; }
  #diffs { gap: 4px; }
}

/* ---------- play HUD ---------- */
#hud { pointer-events: none; }
#top { position: absolute; top: calc(var(--sat) + 6px); left: calc(var(--sal) + 10px); right: calc(var(--sar) + 10px); height: 36px; display: flex; align-items: center; gap: 10px;
  color: #45403a; text-shadow: 0 0 4px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .8); }
#count { font-size: clamp(13px, 3.8vw, 18px); white-space: nowrap; display: flex; align-items: baseline; gap: 1px; }
#count b { font-size: 1.35em; font-weight: normal; }
#who { margin-left: .5em; font-size: 1.05em; }
#clock { font-variant-numeric: tabular-nums; font-size: clamp(12px, 3.4vw, 16px); letter-spacing: .04em; opacity: .85; white-space: nowrap; }
#queue { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; min-width: 0; height: 26px; }
#queue svg { flex: none; }
.iconbtn { pointer-events: auto; width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; }
.iconbtn svg { width: 22px; height: 22px; fill: #6a645c; }
#patSvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#patBg { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 5; stroke-linecap: round; }
#patFg { fill: none; stroke: #f0a35e; stroke-width: 3.2; stroke-linecap: round; transition: stroke .3s; }
#patFg.low { stroke: #e2567a; }
#aimHud { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
#hotSvg { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; overflow: visible; }
#hotBg { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 3; stroke-linecap: round; }
#hotFg { fill: none; stroke: #f09a4a; stroke-width: 2.6; stroke-linecap: round; }
#hotFg.blue { stroke: #4aa3e6; }
#readout { position: absolute; top: -30px; left: 36px; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; color: #3d3833; font-size: 12px;
  text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 8px rgba(255, 255, 255, .85); }
#aimHud.flip #readout { left: auto; right: 36px; align-items: flex-end; }
#power { font-size: 20px; line-height: 1; color: #5f8fa3; transition: color .15s; }
#power.mid { color: #2f6f8c; font-size: 23px; }
#power.strong { color: #ffffff; font-size: 26px; text-shadow: 0 0 3px #d4567a, 0 0 9px #e2567a; animation: jitter .09s infinite; }
#power.wave { color: #2f6f8c; }
#power.auto { color: #7b766e; font-size: 15px; }
@keyframes jitter { 50% { transform: translate(0.6px, -0.4px); } }
#cleanTxt { font-variant-numeric: tabular-nums; }
#gokuRow { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #7a5a5c; }
#gokuRow i { width: 6px; height: 6px; border-radius: 50%; background: rgba(120, 100, 96, .25); }
#gokuRow i.on { background: #e2567a; box-shadow: 0 0 4px rgba(226, 86, 122, .7); }
#aimHint { font-size: 12px; color: #2d7fc0; min-height: 0; }
#spotHint, #pressHint { position: absolute; left: 50%; top: 50%; font-size: 13px; white-space: nowrap; color: #3d3833; text-shadow: 0 0 3px #fff, 0 0 8px #fff; opacity: 0; transition: opacity .25s; transform: translate(-50%, -50%); }
#spotHint.show, #pressHint.show { opacity: 1; }

/* bottom panel during play */
#panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(8px + var(--sar)) calc(6px + var(--sab)) calc(8px + var(--sal)); pointer-events: none; }
#panel .pnl { pointer-events: auto; height: clamp(50px, 10.2vh, 64px); display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; gap: 8px; padding: 6px 8px; max-width: 520px; margin: 0 auto; }
#panel .pbtn { height: 100%; min-height: 0; }
#stopBtn { cursor: default; }
#stopBtn svg { fill: #b9554d; stroke: none; }
#stopBtn.lit { background: linear-gradient(180deg, #e3dfd8, #d8d3cb); }
#massageBtn svg { fill: none; stroke: #4a90ad; }
#massageBtn.used { color: #a7a196; }
#massageBtn.used svg { stroke: #b9b3a8; }
.temp { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; color: var(--print-soft); white-space: nowrap; }
.temp i { width: 7px; height: 7px; border-radius: 50%; background: #bdb7ac; }
.temp i.on { background: #f09a4a; box-shadow: 0 0 5px rgba(240, 154, 74, .8); }

/* ---------- caption ---------- */
#caption { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 13vh); text-align: center; font-size: clamp(13px, min(4vw, 3.6vh), 19px); color: #4a4038; pointer-events: none;
  text-shadow: 0 0 6px rgba(255, 252, 245, 1), 0 0 16px rgba(255, 250, 240, .9); opacity: 0; transition: opacity .5s; white-space: nowrap; }
#caption.show { opacity: 1; }

/* ---------- how to: printed label ---------- */
#howto { display: flex; align-items: center; justify-content: center; background: rgba(60, 56, 50, .28); padding: 16px; }
.label { width: min(92vw, 400px); max-height: 92%; overflow: hidden; background: #fbfbfa; border: 1px solid #c9ced2; border-radius: 3px; padding: 12px 16px 14px; color: #44525e;
  box-shadow: 0 4px 18px rgba(40, 40, 40, .25); display: flex; flex-direction: column; gap: 8px; }
.lhead { display: flex; justify-content: space-between; font-size: 13px; color: #6d7c88; border-bottom: 1px solid #d5dade; padding-bottom: 5px; }
#howFig { height: clamp(90px, 24vh, 170px); display: flex; align-items: center; justify-content: center; }
#howFig svg { height: 100%; width: auto; max-width: 100%; }
#howText { font-size: clamp(14px, min(4.2vw, 3.6vh), 18px); line-height: 1.55; color: #33414c; }
#howSub { font-size: 12.5px; color: #7d6a6a; min-height: 1em; }
.lbtns { display: flex; justify-content: flex-end; }
.lbtns .pbtn { min-width: 40%; }

/* volume */
#vol, #pause { display: flex; align-items: center; justify-content: center; background: rgba(50, 46, 40, .32); }
.small-pnl { width: min(86vw, 340px); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ptitle { text-align: center; font-size: 16px; color: var(--print); }
.vrow { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 10px; font-size: 13px; }
.slider { position: relative; height: 30px; }
.slider::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: #c3bdb2; }
.slider .fill { position: absolute; left: 0; top: 13px; height: 4px; border-radius: 2px; background: #7fb8cc; }
.slider .knob { position: absolute; top: 5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 3px; background: linear-gradient(180deg, #f7f5f1, #e5e1d9); border: 1px solid #b9b2a6; }

/* ---------- report: inner side of the door ---------- */
#report { background: linear-gradient(90deg, #d9d2c6, #e3ddd2 30%, #ddd6ca 70%, #d4ccbf); }
#door { position: absolute; inset: 0; padding: calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 2px, rgba(0, 0, 0, .025) 2px 5px, transparent 5px 11px); }
#paper { position: relative; width: min(94vw, 520px); background: #fdfdfb; padding: 18px 14px 14px; transform: rotate(-0.6deg);
  box-shadow: 0 2px 4px rgba(60, 50, 40, .12), 0 8px 22px rgba(60, 50, 40, .14); background-image: linear-gradient(180deg, rgba(0, 0, 0, .015), transparent 30%); }
.tape { position: absolute; top: -9px; width: 64px; height: 20px; background: rgba(235, 240, 238, .55); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.tape.t1 { left: 18px; transform: rotate(-7deg); } .tape.t2 { right: 18px; transform: rotate(6deg); }
#paper h2 { font-weight: normal; font-size: clamp(17px, min(5vw, 4.4vh), 24px); letter-spacing: .3em; color: #3d3a36; margin-bottom: 8px; padding-left: 2px; }
#pencil { position: absolute; right: 14px; top: 16px; font-size: 11px; color: rgba(96, 94, 90, .55); transform: rotate(-2.5deg); white-space: nowrap; letter-spacing: .02em; }
#sheet { display: grid; grid-template-columns: auto auto auto 1fr auto auto; border-top: 1.5px solid #8b8782; font-size: clamp(11px, min(3.4vw, 3vh), 15px); color: #3e3b37; }
#sheet > div { padding: 5px 5px; border-bottom: 1px solid #c8c4bd; display: flex; align-items: center; white-space: nowrap; min-height: 2.2em; }
#sheet > div.h { font-size: .8em; color: #77736c; min-height: 0; padding: 3px 5px; }
#sheet .num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
#sheet .st { gap: 4px; }
#sheet .ok { color: #2f6c4f; } #sheet .ng { color: #8a6a5e; }
#sheet svg.chk path { fill: none; stroke: #355f8f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
#sumLine { margin-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: clamp(12px, min(3.6vw, 3.2vh), 16px); color: #3e3b37; white-space: nowrap; }
#sumLine b { font-weight: normal; font-size: 1.5em; font-variant-numeric: tabular-nums; }
#repBtns { width: min(94vw, 520px); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
#repBtns .pbtn { background: linear-gradient(180deg, #f2efe9, #e3dfd7); }
@media (orientation: landscape) and (max-height: 520px) {
  #door { flex-direction: row; gap: 14px; }
  #paper { width: min(64vw, 520px); padding: 12px 12px 10px; }
  #paper h2 { margin-bottom: 4px; }
  #sheet > div { padding: 2px 5px; min-height: 1.9em; }
  #repBtns { width: min(28vw, 220px); grid-template-columns: 1fr; }
}