* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #e8e2d4; font-family: "Zen Kaku Gothic New", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#stage { position: fixed; inset: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; mix-blend-mode: overlay; pointer-events: none; image-rendering: pixelated; }
#vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.3) 85%, rgba(0,0,0,.6) 100%); }
#danger { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(120,0,0,0) 35%, rgba(140,0,0,.55) 85%, rgba(60,0,0,.9) 100%); animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { filter: brightness(1.35); } }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #b00; mix-blend-mode: screen; }
#lockerov { --near: 0; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background:
    linear-gradient(rgba(0,0,0,calc(.08 + var(--near) * .25)), rgba(0,0,0,calc(.08 + var(--near) * .25))),
    repeating-linear-gradient(180deg, rgba(0,0,0,.97) 0 4.6vh, rgba(0,0,0,.6) 5.2vh, rgba(0,0,0,0) 6vh 8.6vh, rgba(0,0,0,.6) 9.2vh, rgba(0,0,0,.97) 9.8vh); }
#lockerov.on { opacity: 1; }
#lockerov::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 48%, transparent 40%, rgba(0,0,0,.85) 100%); }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
body.playing #hud { opacity: 1; }
#hudL { position: absolute; left: max(18px, env(safe-area-inset-left)); top: 16px; }
#roomName { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 15px; letter-spacing: .3em; color: rgba(230,220,200,.55); }
#obj { margin-top: 6px; font-size: 15px; font-weight: 700; color: #e8e2d4; text-shadow: 0 0 8px #000, 0 0 2px #000; padding-left: 12px; border-left: 2px solid rgba(200,40,40,.8); }
#obj.flash { animation: objf 2.2s; }
@keyframes objf { 0% { color: #fff; transform: translateX(-8px); opacity: 0; } 20% { opacity: 1; transform: none; color: #ff8a7a; } 100% { color: #e8e2d4; } }
#hudR { position: absolute; right: max(18px, env(safe-area-inset-right)); top: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#inv { display: flex; gap: 8px; }
.ii { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); padding: 4px 10px 4px 6px; border-radius: 3px; font-size: 12px; font-weight: 700; }
.ii svg { width: 22px; height: 22px; }
.ii.used { opacity: .35; }
#notesN { font-size: 12px; color: rgba(230,220,200,.55); letter-spacing: .1em; }
#batt { --v: 1; position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: 18px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(230,220,200,.6); letter-spacing: .15em; }
#batt i { width: 64px; height: 12px; border: 1.5px solid rgba(230,220,200,.6); border-radius: 2px; position: relative; display: block; }
#batt i::before { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: calc((100% - 3px) * var(--v)); background: #e8dcb0; }
#batt i::after { content: ""; position: absolute; right: -5px; top: 3px; width: 3px; height: 4px; background: rgba(230,220,200,.6); }
#batt.low i::before { background: #d33; animation: blink .5s infinite; }
#batt.off { opacity: .4; }
@keyframes blink { 50% { opacity: .2; } }
#cross { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: rgba(255,255,255,.45); }
body.touch #cross { display: none; }
#prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-size: 15px; font-weight: 700; text-shadow: 0 0 6px #000; opacity: 0; transition: opacity .15s; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
#prompt.on { opacity: 1; }
#prompt kbd { font-family: inherit; font-size: 12px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 3px; padding: 1px 7px; background: rgba(0,0,0,.4); }
body.touch #prompt kbd { display: none; }
#stam { --v: 1; position: absolute; left: 50%; bottom: 26px; width: 180px; height: 3px; margin-left: -90px; background: rgba(255,255,255,.12); opacity: 0; transition: opacity .4s; }
#stam.on { opacity: 1; }
#stam i { display: block; height: 100%; width: calc(100% * var(--v)); background: rgba(235,230,215,.75); margin: 0 auto; }
#stam.ex i { background: #c33; }
#msg { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); max-width: 86vw; text-align: center; font-size: 17px; font-weight: 700; line-height: 1.6; text-shadow: 0 0 8px #000, 0 0 3px #000, 0 0 1px #000; opacity: 0; transition: opacity .4s; }
#msg.on { opacity: 1; }

/* スマホ操作 */
#touchui { display: none; }
body.touch.playing #touchui { display: block; }
#joy { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); opacity: 0; transition: opacity .15s; pointer-events: none; left: 120px; top: 70%; }
#joy.on { opacity: 1; }
#knob { position: absolute; left: 31px; top: 31px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.4); }
.tbtn { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); background: rgba(10,10,12,.45); color: rgba(240,235,225,.85); font-family: inherit; font-weight: 700; font-size: 11px; }
.tbtn svg { width: 26px; height: 26px; }
#tUse { right: max(26px, env(safe-area-inset-right)); bottom: 34px; width: 92px; height: 92px; }
#tUse span { font-size: 11px; max-width: 82px; text-align: center; line-height: 1.15; }
#tUse.hot { border-color: rgba(255,200,150,.9); background: rgba(80,40,20,.55); box-shadow: 0 0 18px rgba(255,160,90,.35); }
#tRun { right: calc(max(26px, env(safe-area-inset-right)) + 112px); bottom: 26px; width: 72px; height: 72px; }
#tLight { right: calc(max(26px, env(safe-area-inset-right)) + 30px); bottom: 148px; width: 64px; height: 64px; }
#tPause { right: max(18px, env(safe-area-inset-right)); top: 76px; width: 44px; height: 44px; }
#tPause svg { width: 18px; height: 18px; }
body.touch #batt { bottom: 22px; left: 50%; transform: translateX(-50%); }
body.touch #stam { bottom: 50px; }

/* 画面 */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 10; padding: 20px; text-align: center; }
.screen.hide, .hide { display: none !important; }
button { font-family: inherit; cursor: pointer; }
.big { font-size: 18px; font-weight: 900; letter-spacing: .3em; padding: 13px 44px 13px 52px; background: rgba(120,10,10,.25); border: 1.5px solid rgba(220,60,50,.75); color: #f2e6dc; border-radius: 2px; transition: background .2s, transform .1s; }
.big:hover { background: rgba(160,20,20,.45); }
.big:active { transform: scale(.97); }
.ghost { font-size: 14px; font-weight: 700; letter-spacing: .2em; padding: 9px 26px; background: transparent; border: 1px solid rgba(230,220,200,.3); color: rgba(230,220,200,.75); border-radius: 2px; }
.ghost:hover { border-color: rgba(230,220,200,.7); color: #fff; }
.ghost.dark { color: #3a2a1a; border-color: rgba(60,40,20,.4); }
h2 { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: 34px; letter-spacing: .3em; }
h2.red { color: #c81e1e; font-size: 52px; text-shadow: 0 0 30px rgba(200,0,0,.6); animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }

#title { background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,.25), rgba(0,0,0,.85) 75%); }
#title .tin { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 640px; }
.tsub { font-family: "Shippori Mincho B1", serif; letter-spacing: .8em; font-size: 12px; color: rgba(220,200,180,.5); margin-right: -.8em; }
h1 { font-family: "Shippori Mincho B1", serif; font-weight: 800; font-size: clamp(56px, 13vw, 120px); letter-spacing: .12em; color: #ece4d6; text-shadow: 0 0 40px rgba(180,20,20,.35), 0 4px 0 #000; animation: tflk 6s infinite; margin-right: -.12em; }
h1 span { font-size: .55em; color: #b81c1c; vertical-align: .25em; margin: 0 .05em; }
@keyframes tflk { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: .2; } 93% { opacity: 1; } 95% { opacity: .5; transform: translateX(2px); } 96% { opacity: 1; transform: none; } }
.tline { font-family: "Shippori Mincho B1", serif; font-size: 16px; letter-spacing: .25em; color: rgba(230,220,200,.75); margin-bottom: 12px; }
.diff { display: flex; gap: 0; border: 1px solid rgba(230,220,200,.25); }
.diff button { font-size: 14px; font-weight: 700; letter-spacing: .2em; padding: 8px 22px; background: transparent; border: none; color: rgba(230,220,200,.5); }
.diff button.sel { background: rgba(230,220,200,.12); color: #fff; }
.diff button[data-d="hard"].sel { background: rgba(160,20,20,.35); }
#how { max-width: 560px; text-align: left; font-size: 13px; line-height: 1.75; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
#how b { color: #e07a6a; margin-right: 6px; }
#best { font-size: 12px; color: rgba(230,220,200,.5); letter-spacing: .1em; min-height: 1em; }
.hp { font-size: 11px; letter-spacing: .3em; color: rgba(230,220,200,.35); }

#intro { background: #000; cursor: pointer; }
#introText p { font-family: "Shippori Mincho B1", serif; font-size: clamp(16px, 3.6vw, 22px); letter-spacing: .2em; line-height: 2.2; opacity: 0; animation: fin 1.4s forwards; }
#introGo { margin-top: 30px; opacity: 0; animation: fin 1s 5.6s forwards; }
@keyframes fin { to { opacity: 1; } }

#note { background: rgba(0,0,0,.75); }
.paper { background: #e8dfc4; color: #2a2016; width: min(460px, 92vw); max-height: 86vh; overflow: auto; padding: 30px 30px 22px; box-shadow: 0 10px 50px #000; transform: rotate(-1deg); background-image: repeating-linear-gradient(transparent 0 31px, rgba(80,100,140,.25) 31px 32px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.3), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(120,80,30,.25), transparent 50%); }
.paper h2 { font-size: 20px; letter-spacing: .15em; margin-bottom: 16px; color: #3a2a1a; }
#noteB { font-family: "Shippori Mincho B1", serif; font-size: 16px; line-height: 2; white-space: pre-wrap; text-align: left; margin-bottom: 18px; }

#mapov { background: rgba(0,0,0,.85); }
#mapcv { max-width: 94vw; max-height: 70vh; box-shadow: 0 8px 40px #000; }
.hint { font-size: 13px; color: rgba(230,220,200,.6); }

#pause { background: rgba(0,0,0,.78); }
.sens { font-size: 13px; color: rgba(230,220,200,.7); display: flex; align-items: center; gap: 10px; }
.sens input { width: 160px; accent-color: #c33; }
#over { background: radial-gradient(ellipse at center, rgba(60,0,0,.7), #000 80%); }
#overSub { font-family: "Shippori Mincho B1", serif; font-size: 16px; letter-spacing: .2em; color: rgba(230,200,190,.8); margin-bottom: 14px; }
#end { background: #000; }
#endText p { font-family: "Shippori Mincho B1", serif; font-size: clamp(15px, 3.4vw, 21px); letter-spacing: .18em; line-height: 2.3; opacity: 0; animation: fin 1.6s forwards; }
.endh { margin-top: 18px; opacity: 0; animation: fin 2s forwards; animation-delay: 8s; color: #f2e8d8; }
#endStats { font-size: 14px; line-height: 2; color: rgba(230,220,200,.75); opacity: 0; animation: fin 1.4s forwards; }
#endStats b { color: #fff; font-size: 17px; }
#endStats em { color: #e8a040; font-style: normal; font-weight: 900; }
#endBtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; animation: fin 1s forwards; }

@media (max-width: 640px) {
  #obj { font-size: 13px; }
  #msg { font-size: 15px; bottom: 30%; }
  .ii span { display: none; }
}

#toast { position: absolute; right: max(18px, env(safe-area-inset-right)); top: 96px; display: flex; gap: 10px; align-items: center; max-width: min(360px, 70vw); background: rgba(20,22,26,.82); border: 1px solid rgba(255,255,255,.15); border-left: 3px solid #30c050; padding: 10px 14px; border-radius: 4px; transform: translateX(120%); opacity: 0; transition: transform .35s, opacity .35s; }
#toast.on { transform: none; opacity: 1; }
#toast i { color: #c8d0dc; width: 22px; height: 22px; flex: none; }
#toast b { display: block; font-size: 12px; color: #30c050; }
#toast span { font-size: 14px; font-weight: 700; color: #eef; }