:root {
  --paper: #efeae0; --paper2: #e2dccf; --ink: #14110e; --ink2: #2a2520; --red: #c8102e; --nix: #ff8a2a; --nix2: #ffd9a8;
  --pan: rgba(20,17,14,.84);
  --min: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif; --nixie: 'Nixie One', monospace; --body: 'Zen Kaku Gothic New', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper); font-family: var(--body); user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#cv, #ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ov { pointer-events: none; }
.hide { display: none !important; }
button { font-family: var(--min); font-weight: 800; cursor: pointer; border: 0; color: inherit; }
kbd { display: inline-block; min-width: 1.7em; padding: 0 6px; border: 1.5px solid currentColor; border-bottom-width: 3px; font-family: var(--body); font-weight: 900; font-size: .82em; text-align: center; }

#smokeOv { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(226,220,207,.75), rgba(200,194,182,.97)); }
#flash { position: absolute; inset: 0; background: #fffaf0; opacity: 0; pointer-events: none; }
#vig { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(200,16,46,.6) 100%); }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#cross { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%); }
#cross i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
#cross::before { content: ''; position: absolute; inset: 0; border: 1.5px solid var(--paper); border-radius: 50%; opacity: 0; transform: scale(1.6); transition: .15s; box-shadow: 0 0 0 1px var(--ink); }
#cross.zoom::before { opacity: 1; transform: scale(1); }

#topbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; border: 1.5px solid var(--paper); background: var(--pan); }
#topbar > div { padding: 4px 14px; display: flex; align-items: center; }
#topbar .al { gap: 4px; border-right: 1.5px solid rgba(239,234,224,.5); align-items: baseline; }
#topbar .al b { font-family: var(--nixie); font-size: 28px; color: var(--nix); text-shadow: 0 0 10px rgba(255,138,42,.7); }
#topbar .al span { font-family: var(--nixie); font-size: 16px; opacity: .6; }
#topbar .al small { font-family: var(--min); font-size: 13px; margin-left: 6px; }
#clock { font-family: var(--nixie); font-size: 24px; }
#lockInfo { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); font-family: var(--min); font-weight: 800; font-size: 13px; color: var(--paper); background: var(--pan); padding: 2px 12px; white-space: nowrap; }
#lockInfo.soon { color: #ff7a6a; animation: blink .4s infinite alternate; }
#lockInfo.on { background: var(--red); animation: blink .6s infinite alternate; }

#threat { position: absolute; top: 12px; left: 12px; width: 268px; background: var(--pan); border: 1.5px solid var(--paper); padding: 0 0 6px; }
#threat .th { font-family: var(--min); font-weight: 800; font-size: 13px; background: var(--paper); color: var(--ink); padding: 3px 10px; margin-bottom: 4px; }
.tr { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: 14px; flex-wrap: wrap; }
.tr b { font-family: var(--min); font-weight: 800; min-width: 60px; }
.tr.none { opacity: .55; font-size: 13px; }
.pips { display: flex; gap: 4px; }
.pips i { width: 16px; height: 16px; border: 1.5px solid rgba(239,234,224,.5); }
.pips i.on { background: var(--red); border-color: var(--red); }
.tr.live .pips i.on { animation: blink .4s infinite alternate; }
.tr.full { background: rgba(200,16,46,.3); }
.tr em { font-style: normal; font-family: var(--min); font-weight: 800; font-size: 12px; background: var(--red); padding: 1px 6px; animation: blink .35s infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: .45; } }

#feed { position: absolute; top: 196px; right: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.fl { background: var(--pan); border-left: 4px solid var(--paper); padding: 4px 10px; font-size: 14px; white-space: nowrap; }
.fl.mine { border-left-color: var(--nix); }
.fl b { font-family: var(--min); font-weight: 800; }
.fl i { font-style: normal; font-size: 12px; opacity: .7; margin-left: 6px; }
.fl .arrow { color: var(--red); font-size: 11px; margin: 0 4px; }

#me { position: absolute; left: 12px; bottom: 12px; }
#me .lbl { font-family: var(--min); font-weight: 800; font-size: 13px; margin-bottom: 4px; text-shadow: 0 1px 3px var(--ink); }
#me .lbl small { font-family: var(--body); font-weight: 500; opacity: .7; margin-left: 4px; }
#myPlate { display: flex; gap: 5px; padding: 7px 9px 9px; background: linear-gradient(#4a2e1c, #2e1c10); border: 2px solid #8a6a3a; box-shadow: 0 4px 0 #14110e, inset 0 0 0 2px #1a0e06; width: max-content; transition: transform .3s; }
#myPlate span { font-family: var(--nixie); font-size: 46px; line-height: 1; width: 38px; height: 58px; display: flex; align-items: center; justify-content: center; color: var(--nix2); background: radial-gradient(circle, #3a1a08, #0e0906 75%); border-radius: 19px 19px 6px 6px; border: 1px solid rgba(255,220,180,.18); text-shadow: 0 0 6px var(--nix), 0 0 16px var(--nix), 0 0 2px #fff; }
#myPlate.masked span { color: #3a3330; text-shadow: none; }
#myPlate.flip { transform: rotateX(360deg); transition: transform .55s; }
#status { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; max-width: 320px; }
#status span { font-family: var(--min); font-weight: 800; font-size: 12px; padding: 2px 8px; background: var(--paper); color: var(--ink); border-left: 5px solid var(--c); }

#slots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.slot { position: relative; width: 80px; height: 80px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.slot img { width: 44px; height: 44px; }
.slot .nm { font-family: var(--min); font-weight: 800; font-size: 11px; }
.slot .k { position: absolute; top: 2px; right: 5px; font-size: 10px; font-weight: 900; opacity: .55; }
.slot.empty { opacity: .35; }

#prompt { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--nix); padding: 7px 18px; font-family: var(--min); font-weight: 800; font-size: 16px; }
#wallWarn { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); text-align: center; background: var(--red); border: 2px solid var(--paper); padding: 8px 24px 10px; min-width: 330px; }
#wallWarn .t { font-family: var(--min); font-weight: 800; font-size: 16px; }
#wallWarn .n { font-family: var(--nixie); font-size: 46px; line-height: 1.1; }
#wallWarn .bar { height: 6px; background: rgba(0,0,0,.3); }
#wallWarn .bar i { display: block; height: 100%; background: var(--paper); width: 0; }

#typeWarn { position: absolute; left: 50%; top: 15%; transform: translateX(-50%); width: min(480px, 90vw); text-align: center; background: var(--red); border: 2px solid var(--paper); box-shadow: 6px 6px 0 var(--ink); padding: 6px 16px 10px; animation: shakeW .12s infinite; }
#typeWarn .hd { font-family: var(--min); font-weight: 800; letter-spacing: .4em; font-size: 13px; }
#typeWho { font-weight: 900; font-size: 18px; margin: 2px 0 6px; }
#typeWho b { font-family: var(--min); }
#typeWarn .bar { height: 8px; background: rgba(0,0,0,.35); }
#typeWarn .bar i { display: block; height: 100%; width: 0; background: var(--paper); }
#typeHint { font-family: var(--min); font-size: 15px; font-weight: 800; margin-top: 5px; color: #ffe6b0; }
@keyframes shakeW { 0% { transform: translate(-50%, 0); } 50% { transform: translate(calc(-50% + 2px), 1px); } 100% { transform: translate(calc(-50% - 1px), -1px); } }

#center { position: absolute; left: 0; right: 0; top: 26%; text-align: center; opacity: 0; transform: scale(1.15); transition: opacity .2s, transform .2s; pointer-events: none; }
#center.pop { opacity: 1; transform: scale(1); }
#center .big { display: inline-block; font-family: var(--min); font-weight: 800; font-size: 58px; color: var(--ink); background: var(--paper); padding: 0 26px; box-shadow: 6px 6px 0 var(--ink); }
#center .big.good { background: var(--nix); }
#center .big.bad { background: var(--red); color: var(--paper); }
#center .sub { font-weight: 900; font-size: 18px; margin-top: 12px; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
#toast { position: absolute; left: 50%; bottom: 112px; transform: translate(-50%, 10px); background: var(--ink); border: 1.5px solid var(--paper); padding: 6px 16px; font-weight: 700; font-size: 15px; opacity: 0; transition: .2s; white-space: nowrap; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#spectBar { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; pointer-events: auto; }
#spectName { background: var(--pan); padding: 8px 14px; font-size: 16px; }
#spectName span { font-family: var(--nixie); margin-left: 8px; color: var(--nix); }
#spectBar button { background: var(--paper); color: var(--ink); padding: 8px 14px; font-size: 14px; }
#app.lock #topbar { border-color: var(--red); }
#app.lock #clock { color: #ff7a6a; }

/* ---------- 照合端末 ---------- */
#keypad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 6vw; background: linear-gradient(90deg, transparent 40%, rgba(20,17,14,.6)); }
.kp-box { width: 340px; background: linear-gradient(#3a2416, #24160c); border: 3px solid #8a6a3a; box-shadow: 8px 8px 0 var(--ink); padding: 14px; }
.kp-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--min); font-weight: 800; color: var(--nix2); margin-bottom: 10px; }
.kp-head button { font-size: 13px; background: var(--paper); color: var(--ink); padding: 3px 10px; }
#kpSlots { display: flex; gap: 8px; justify-content: center; }
#kpSlots div { width: 62px; height: 84px; border-radius: 30px 30px 8px 8px; border: 1px solid rgba(255,220,180,.25); background: radial-gradient(circle, #3a1a08, #0e0906 75%); font-family: var(--nixie); font-size: 58px; display: flex; align-items: center; justify-content: center; color: var(--nix2); text-shadow: 0 0 8px var(--nix), 0 0 20px var(--nix); }
#kpSlots div.cur { border-color: var(--nix); animation: blink .5s infinite alternate; }
.kp-msg { text-align: center; min-height: 26px; margin: 10px 0; font-family: var(--min); font-weight: 800; font-size: 14px; color: var(--paper); }
.kp-msg.ok { color: #b8ff8a; font-size: 17px; }
.kp-msg.ng { color: #ff7a6a; font-size: 16px; }
#kpKeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
#kpKeys button { height: 52px; font-family: var(--nixie); font-size: 30px; font-weight: 400; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 4px 0 #8a6a3a; }
#kpKeys button:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6a3a; }
#kpKeys button.fn { font-family: var(--min); font-size: 15px; font-weight: 800; }
#kpKeys button.go { font-family: var(--min); font-size: 17px; font-weight: 800; background: var(--nix); }
.kp-foot { margin-top: 10px; font-size: 11px; opacity: .65; text-align: center; line-height: 1.6; }

#board { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#board .bx { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 16px 20px; min-width: 360px; }
#board h3 { font-family: var(--min); font-weight: 800; margin-bottom: 8px; }

/* ---------- タイトル（招集通知） ---------- */
#title { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 6vw; background: linear-gradient(90deg, rgba(20,17,14,.7), transparent 55%); }
.tl-left { position: relative; width: min(440px, 90vw); background: var(--paper); color: var(--ink); padding: 0 26px 22px; box-shadow: 10px 10px 0 var(--ink), 0 30px 60px rgba(0,0,0,.5); transform: rotate(-1.2deg); }
.tl-left::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(20,17,14,.06) 27px 28px); }
.doc-head { display: flex; justify-content: space-between; margin: 0 -26px 16px; padding: 7px 26px; background: var(--ink); color: var(--paper); font-family: var(--min); font-weight: 800; font-size: 13px; letter-spacing: .1em; }
.logo { position: relative; }
.logo .l1 { font-family: var(--min); font-weight: 800; font-size: 64px; line-height: 1.02; letter-spacing: .02em; }
.logo .l2 { font-family: var(--nixie); font-size: 24px; letter-spacing: .3em; margin-top: 4px; color: #b85a1a; }
.stamp { position: absolute; right: 0; top: 6px; width: 92px; height: 92px; border: 4px solid var(--red); border-radius: 50%; color: var(--red); font-family: var(--min); font-weight: 800; font-size: 30px; display: flex; align-items: center; justify-content: center; transform: rotate(14deg); opacity: .85; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--red); }
.tag { margin: 16px 0; font-size: 15px; line-height: 1.8; font-weight: 700; }
.tag b { font-family: var(--min); background: linear-gradient(transparent 60%, rgba(255,138,42,.55) 60%); }
.opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row > span { width: 80px; font-family: var(--min); font-weight: 800; font-size: 13px; }
.seg { display: flex; border: 2px solid var(--ink); }
.seg button { padding: 6px 12px; font-size: 14px; background: transparent; border-right: 1.5px solid var(--ink); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: var(--paper); }
button.big { display: block; width: 100%; padding: 14px; font-size: 22px; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--nix); transition: transform .1s, box-shadow .1s; }
button.big:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--nix); }
.tl-left .sub { display: flex; gap: 10px; margin-top: 12px; }
.tl-left .sub button, #pause button:not(.big), .rbtn button:not(.big) { flex: 1; padding: 10px; font-size: 15px; background: transparent; color: var(--ink); border: 2px solid var(--ink); }
#stat { margin-top: 12px; font-size: 13px; opacity: .65; font-weight: 700; }

.modal, #pause { position: absolute; inset: 0; background: rgba(20,17,14,.75); display: flex; align-items: center; justify-content: center; z-index: 20; }
.mbox { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 20px 24px; width: min(420px, 92vw); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.mbox.wide { width: min(880px, 94vw); }
.mbox h2 { font-family: var(--min); font-weight: 800; font-size: 28px; border-bottom: 3px double var(--ink); padding-bottom: 4px; }
.mbox h3 { font-family: var(--min); font-weight: 800; font-size: 18px; margin-top: 4px; }
.mbox label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; }
.mbox input[type=range] { width: 55%; accent-color: var(--ink); }
.rgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rc { border: 2px solid var(--ink); padding: 10px 12px; background: #f7f3ea; }
.rc .num { font-family: var(--min); font-weight: 800; font-size: 30px; line-height: 1; }
.rc b { display: block; font-family: var(--min); font-weight: 800; font-size: 16px; margin: 6px 0; }
.rc p { font-size: 13px; line-height: 1.65; }
.rc em { font-style: normal; font-weight: 900; background: linear-gradient(transparent 60%, rgba(255,138,42,.55) 60%); }
.rc.warn { border-color: var(--red); background: #f8e6e2; }
.rc.warn .num { color: var(--red); }
#itemList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.it { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--ink); padding: 8px; background: #f7f3ea; }
.it img { width: 44px; height: 44px; flex: none; background: var(--ink); padding: 4px; }
.it b { font-family: var(--min); font-weight: 800; }
.it p { font-size: 12.5px; line-height: 1.55; }
#ctlList p { font-size: 14px; line-height: 2; }
#pause .mbox { text-align: center; }

/* ---------- 結果（実験記録） ---------- */
#result { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(60,6,10,.6); }
#result.win { background: rgba(20,17,14,.55); }
.rbox { position: relative; width: min(640px, 94vw); background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 20px 26px; max-height: 94vh; overflow: auto; transform: rotate(.6deg); }
#resTitle { font-family: var(--min); font-weight: 800; font-size: 50px; line-height: 1.1; color: var(--red); }
#result.win #resTitle { color: var(--ink); }
#resSub { font-weight: 700; margin: 6px 0 14px; }
.rtop { display: flex; gap: 12px; align-items: stretch; margin-bottom: 14px; }
#resPlace { border: 2px solid var(--ink); padding: 6px 16px; display: flex; align-items: baseline; gap: 4px; }
#resPlace b { font-family: var(--nixie); font-size: 52px; }
#resPlace span { font-family: var(--min); font-size: 14px; }
#resStats { display: flex; gap: 8px; flex: 1; }
#resStats div { flex: 1; border: 1.5px solid var(--ink); padding: 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#resStats b { font-family: var(--nixie); font-size: 26px; }
#resStats span { font-size: 12px; font-weight: 700; }
#resList, #boardList { display: flex; flex-direction: column; margin-bottom: 14px; border-top: 2px solid var(--ink); }
.rl { display: flex; gap: 10px; align-items: center; padding: 5px 8px; border-bottom: 1px solid rgba(20,17,14,.25); font-size: 14px; }
.rl.me { background: rgba(255,138,42,.28); }
.rl.out { opacity: .45; }
.rl .pl { font-family: var(--nixie); font-size: 18px; width: 22px; }
.rl b { font-family: var(--min); font-weight: 800; flex: 1; color: var(--ink) !important; }
.rl .cd { font-family: var(--nixie); font-size: 17px; color: #b85a1a; width: 60px; }
.rl .kl { width: 60px; }
.rl .hw { width: 110px; text-align: right; font-size: 12.5px; }
.rbtn { display: flex; gap: 10px; }
.rbtn .big { flex: 2; }

#loading { position: absolute; inset: 0; z-index: 60; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity .5s; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-logo { font-family: var(--min); font-weight: 800; font-size: 44px; }
.ld-bar { width: 220px; height: 3px; background: rgba(239,234,224,.15); overflow: hidden; }
.ld-bar i { display: block; width: 40%; height: 100%; background: var(--nix); animation: ld 1s infinite; }
@keyframes ld { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- タッチ ---------- */
#touch { display: none; }
body.touch.playing #touch { display: block; }
#joyZone { position: absolute; left: 0; bottom: 0; width: 42%; height: 62%; }
#lookZone { position: absolute; right: 0; top: 0; width: 58%; height: 100%; }
#joyBase { position: absolute; width: 132px; height: 132px; margin: -66px; border-radius: 50%; border: 2px solid rgba(239,234,224,.4); background: rgba(20,17,14,.25); left: 110px; top: calc(100% - 150px); pointer-events: none; opacity: .55; }
#joyBase.on { opacity: 1; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(239,234,224,.5); }
#tBtns { position: absolute; right: 18px; bottom: 22px; width: 260px; height: 250px; pointer-events: none; }
.tb { position: absolute; pointer-events: auto; width: 78px; height: 78px; border-radius: 50%; background: rgba(20,17,14,.6); border: 2px solid rgba(239,234,224,.5); font-size: 15px; display: flex; align-items: center; justify-content: center; color: var(--paper); }
.tb.on { background: rgba(255,138,42,.5); }
.tb.lit { background: rgba(255,138,42,.4); border-color: var(--nix); }
.tb img { width: 46px; height: 46px; }
.slotb { border-color: var(--c); }
.slotb.empty { opacity: .35; }
#tSlot0 { right: 0; bottom: 0; width: 90px; height: 90px; }
#tSlot1 { right: 100px; bottom: 0; }
#tZoom { right: 0; bottom: 104px; }
#tRun { right: 92px; bottom: 92px; width: 64px; height: 64px; font-size: 13px; }
#tTerm { right: 10px; bottom: 196px; width: 84px; height: 50px; border-radius: 0; background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--nix); font-size: 18px; }
#tTerm.lit { background: var(--nix); }
body.touch #slots { display: none; }
body.touch #me { bottom: auto; top: 112px; left: 50%; transform: translateX(-50%) scale(.55); transform-origin: top center; }
body.touch #me .lbl, body.touch #status { display: none; }
body.touch #prompt { bottom: auto; top: 54%; }

@media (max-width: 900px), (max-height: 520px) {
  #threat { width: 210px; transform: scale(.85); transform-origin: top left; }
  #feed { top: 150px; transform: scale(.85); transform-origin: top right; }
  .logo .l1 { font-size: 46px; }
  .stamp { width: 70px; height: 70px; font-size: 22px; }
  .tag { font-size: 13px; margin: 10px 0; }
  #title { padding-left: 4vw; }
  button.big { padding: 10px; font-size: 18px; }
  .rgrid { grid-template-columns: repeat(2, 1fr); }
  #itemList { grid-template-columns: 1fr; }
  #center .big { font-size: 36px; }
  #keypad { justify-content: center; padding: 0; }
  .kp-box { transform: scale(.85); }
  #resTitle { font-size: 34px; }
  .rl .hw { display: none; }
}
@media (max-height: 520px) {
  .tl-left { transform: rotate(-1.2deg) scale(.72); transform-origin: left center; }
  #title { padding-left: 2vw; }
  #me { transform: scale(.75); transform-origin: bottom left; }
}

/* ---------- 見られている目 ---------- */
#eye { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--pan); border: 1.5px solid rgba(239,234,224,.35); color: rgba(239,234,224,.35); transition: .15s; }
#eye svg { width: 40px; height: 22px; }
#eye svg circle { transform-origin: 32px 18px; transform: scaleY(.15); transition: transform .15s; }
#eye span { font-family: var(--min); font-weight: 800; font-size: 14px; opacity: 0; transition: .15s; }
#eye.on { color: #fff; background: var(--red); border-color: var(--paper); animation: eyeP .5s infinite alternate; }
#eye.on svg circle { transform: scaleY(1); }
#eye.on span { opacity: 1; }
@keyframes eyeP { from { transform: scale(1); } to { transform: scale(1.06); } }
/* ---------- 手首の入力 ---------- */
#codeBar { position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: linear-gradient(#3a2416, #24160c); border: 2px solid #8a6a3a; padding: 6px 12px; box-shadow: 4px 4px 0 var(--ink); pointer-events: none; }
#codeBar .cb-l { font-family: var(--min); font-weight: 800; font-size: 13px; color: var(--nix2); writing-mode: vertical-rl; }
#cbSlots { display: flex; gap: 5px; }
#cbSlots i { font-style: normal; width: 34px; height: 48px; border-radius: 16px 16px 5px 5px; background: radial-gradient(circle, #3a1a08, #0e0906 75%); border: 1px solid rgba(255,220,180,.2); font-family: var(--nixie); font-size: 36px; display: flex; align-items: center; justify-content: center; color: var(--nix2); text-shadow: 0 0 6px var(--nix), 0 0 14px var(--nix); }
#cbSlots i.cur { border-color: var(--nix); animation: blink .45s infinite alternate; }
#codeBar.busy #cbSlots i { animation: blink .12s infinite alternate; }
#cbMsg { font-family: var(--min); font-weight: 800; font-size: 14px; white-space: nowrap; }
#cbMsg.ok { color: #b8ff8a; }
#cbMsg.ng { color: #ff7a6a; }
#pad { position: absolute; right: 120px; bottom: 120px; display: grid; grid-template-columns: repeat(3, 58px); gap: 6px; z-index: 5; }
#pad button { height: 50px; font-family: var(--nixie); font-size: 28px; background: rgba(239,234,224,.92); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 #8a6a3a; }
#pad button:active { transform: translateY(2px); }
#pad button.fn { font-family: var(--min); font-size: 18px; }
@media (max-height: 520px) { #pad { right: 110px; bottom: 96px; grid-template-columns: repeat(3, 48px); } #pad button { height: 40px; font-size: 22px; } #codeBar { bottom: auto; top: 70px; transform: translateX(-50%) scale(.8); } }
#myPlate.hot { border-color: var(--red); box-shadow: 0 0 24px var(--red), 0 4px 0 #14110e; }
#myPlate.hot span { color: #fff; text-shadow: 0 0 8px #ff3a2a, 0 0 24px #ff3a2a; }
body:not(.touch) #cbSlots, body:not(.touch) #codeBar .cb-l { display: none; }
body:not(.touch) #codeBar { bottom: 104px; padding: 4px 12px; }
body.touch #pad { right: 205px; bottom: 14px; grid-template-columns: repeat(3, 50px); gap: 5px; }
body.touch #pad button { height: 42px; font-size: 24px; }
body.touch #me { top: auto !important; bottom: 6px; left: 50%; transform: translateX(-50%) scale(.55) !important; transform-origin: bottom center; }
body.touch.padon #me { display: none; }

/* 見つめて読む */
#stare { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); display: flex; gap: 3px; padding: 3px; background: rgba(20,17,14,.7); }
#stare i { width: 20px; height: 8px; background: rgba(239,234,224,.25); }
#stare i.on { background: var(--nix); box-shadow: 0 0 6px var(--nix); }
#stare.full i { background: #b8ff8a; box-shadow: 0 0 6px #b8ff8a; }
#hint { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); text-align: center; font-size: 13px; font-weight: 700; color: rgba(239,234,224,.75); text-shadow: 0 1px 3px #000; white-space: nowrap; transition: .3s; }
#hint small { display: none; font-size: 13px; margin-top: 4px; }
#hint.big { font-size: 17px; color: var(--paper); bottom: 130px; }
#hint.big small { display: block; color: var(--nix2); }
#hint .tc { display: none; }
body.touch #hint .pc { display: none; }
body.touch #hint .tc { display: inline; }
body.touch #hint { bottom: 60px; }
#codeBar:not(.hide) ~ #hint { opacity: 0; }
/* 照合一致のハンコ */
#stamp { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%) rotate(-8deg) scale(2.4); opacity: 0; pointer-events: none; text-align: center; border: 6px double var(--red); color: var(--red); background: rgba(239,234,224,.92); padding: 8px 26px 10px; }
#stamp b { display: block; font-family: var(--min); font-weight: 800; font-size: 44px; line-height: 1.1; }
#stamp span { display: block; font-family: var(--nixie); font-size: 40px; letter-spacing: .15em; color: var(--ink); }
#stamp em { font-style: normal; font-family: var(--min); font-weight: 800; font-size: 16px; color: var(--ink); }
#stamp.show { animation: stampIn 1.9s forwards; }
@keyframes stampIn { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(2.4); } 12% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } 80% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(.96); } }