/* 夜の学校脱出 — ゲーム固有の表示 */
html, body.g3d-page { overscroll-behavior: none; }
.g3d.is-playing { touch-action: none; }

/* 持ち物（右上） */
.sc-inv { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sc-inv__item { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border-radius: 10px; background: rgba(8, 11, 17, .55); border: 1px solid rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .3s, border-color .3s; }
.sc-inv__item.is-dim { opacity: .45; }
.sc-inv__item.is-done { border-color: rgba(232, 196, 106, .6); box-shadow: 0 0 14px -6px #e8c46a; }
.sc-inv__item b { font-variant-numeric: tabular-nums; color: #e8c46a; letter-spacing: .08em; }
.sc-inv__icon { font-size: 15px; width: 18px; text-align: center; }

/* 危険（画面の縁） */
.sc-edge { position: absolute; inset: 0; pointer-events: none; opacity: 0; --c: 180,20,20; background: radial-gradient(120% 95% at 50% 50%, rgba(0,0,0,0) 55%, rgba(var(--c), .38) 88%, rgba(var(--c), .62) 100%); transition: opacity .15s; }
.sc-hidehint { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); padding: 7px 16px; border-radius: 99px; background: rgba(6, 8, 12, .62); border: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 700; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.sc-hidehint kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px; border-radius: 6px; background: #f4f1ea; color: #15181c; font: 800 12px/1 var(--g3d-ui); }

/* メモ */
.sc-note, .sc-map, .sc-pad { touch-action: none; }
.sc-note { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(2, 3, 6, .35); pointer-events: auto; }
.sc-note.is-in .sc-note__paper { animation: sc-note .35s ease both; }
@keyframes sc-note { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg); } to { opacity: 1; transform: rotate(-.8deg); } }
.sc-note__paper { width: min(460px, 86vw); padding: 22px 26px 16px; border-radius: 4px; transform: rotate(-.8deg); color: #22232f; background: repeating-linear-gradient(#f5efdc 0 33px, #a8b8cf 33px 34px), #f5efdc; background-position: 0 58px; box-shadow: 0 24px 60px -10px rgba(0, 0, 0, .8); font-family: 'Klee One', var(--g3d-ui); }
.sc-note__title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #6a4a2a; }
.sc-note__body p { margin: 0; font-size: 20px; line-height: 34px; font-weight: 600; }
.sc-note__body p.is-big { font-size: 34px; line-height: 50px; color: #1a1a3a; letter-spacing: .06em; }
.sc-note__hint { margin: 12px 0 0; font-size: 12px; color: #7b7466; font-family: var(--g3d-ui); text-align: right; }

/* キーボックス */
.sc-pad { position: absolute; inset: 0; z-index: 26; display: grid; place-items: center; background: rgba(2, 3, 6, .45); padding: 60px 12px 12px; }
.sc-pad__box { width: min(440px, 94vw); padding: 20px 20px 16px; border-radius: 16px; background: linear-gradient(#5f6467, #3f4346); border: 2px solid #22262a; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 30px 70px -10px rgba(0,0,0,.85); text-align: center; }
.sc-pad.is-shake .sc-pad__box { animation: sc-shake .35s ease; }
@keyframes sc-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.sc-pad__title { margin: 0 0 12px; font-weight: 900; letter-spacing: .2em; color: #f0ede4; }
.sc-pad__title small { display: block; font-size: 11px; letter-spacing: .3em; opacity: .7; }
.sc-pad__dials { display: flex; justify-content: center; gap: 10px; }
.sc-dial { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sc-dial button { width: 58px; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(20, 22, 26, .6); color: #f0ede4; font-size: 18px; cursor: pointer; touch-action: manipulation; }
.sc-dial button:active { background: rgba(255, 255, 255, .25); }
.sc-dial b { display: grid; place-items: center; width: 58px; height: 70px; border-radius: 10px; background: linear-gradient(#111, #2a2a2a 45%, #111); color: #f7f1dc; font: 900 40px/1 var(--g3d-ui); font-variant-numeric: tabular-nums; box-shadow: inset 0 4px 10px rgba(0,0,0,.8); }
.sc-dial.is-cur b { outline: 3px solid #e8c46a; outline-offset: 2px; }
.sc-pad__msg { min-height: 22px; margin: 10px 0 2px; color: #ffb3a6; font-weight: 700; font-size: 14px; }
.sc-pad__btns { display: flex; justify-content: center; gap: 10px; }
.sc-pad__btns .g3d-btn--primary { min-width: 150px; }
.sc-pad__keys { margin: 10px 0 0; font-size: 11.5px; opacity: .7; }
@media (pointer: coarse) { .sc-pad__keys { display: none; } }

/* 地図 */
.sc-map { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; padding: 64px 10px 10px; background: rgba(2, 3, 6, .35); pointer-events: auto; }
.sc-map__box { width: min(1100px, 96vw); padding: 12px; border-radius: 14px; background: rgba(10, 13, 20, .9); border: 1px solid rgba(255, 255, 255, .12); }
.sc-map__title { margin: 0 0 8px; font-weight: 900; letter-spacing: .12em; font-size: 15px; }
.sc-map__title small { font-weight: 600; opacity: .6; letter-spacing: 0; font-size: 12px; }
.sc-map canvas { display: block; width: 100%; height: auto; border-radius: 8px; }

/* タイトルの難易度 */
.sc-diff { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 14px; background: rgba(8, 10, 16, .5); border: 1px solid rgba(255, 255, 255, .12); }
.sc-diff button { min-width: 104px; min-height: 52px; border: 0; border-radius: 10px; background: transparent; color: #f4f1ea; font: 800 15px/1.2 var(--g3d-ui); cursor: pointer; }
.sc-diff button small { display: block; font-size: 11px; font-weight: 600; opacity: .7; margin-top: 3px; }
.sc-diff button[aria-checked="true"] { background: var(--accent); color: #17130a; }
.sc-diffnote { margin: 10px auto 0; font-size: 12.5px; opacity: .8; max-width: 30em; }
@media (max-width: 640px) { .sc-diff button { min-width: 88px; font-size: 14px; } .sc-inv__item { font-size: 11.5px; padding: 4px 9px 4px 7px; } }
@media (max-height: 480px) and (orientation: landscape) {
  .sc-inv { gap: 3px; } .sc-inv__item { font-size: 11px; padding: 3px 8px; }
  .sc-diffnote { display: none; } .sc-diff button { min-height: 40px; }
  .sc-pad { padding-top: 44px; } .sc-dial b { height: 50px; font-size: 30px; } .sc-dial button { height: 36px; }
}

/* スマホ（タッチ操作）: 操作ボタンと重ならないように配置を変える */
@media (pointer: coarse) {
  .g3d .g3d-meters { left: auto; right: calc(10px + env(safe-area-inset-right)); top: calc(250px + env(safe-area-inset-top)); bottom: auto; transform: none; width: 118px; }
  .g3d .g3d-meter span { font-size: 10px; }
  .g3d .g3d-subtitle { bottom: auto; top: 58%; }
  .g3d .g3d-toast { top: 44%; white-space: normal; max-width: 86vw; text-align: center; }
  .sc-inv__item { font-size: 11px; padding: 3px 8px 3px 6px; gap: 5px; }
  .sc-inv__item:not(.is-done):not(:has(b)) span:not(.sc-inv__icon) { display: none; }
  .sc-inv { gap: 4px; }
  .sc-hidehint { top: 22%; white-space: normal; text-align: center; font-size: 12.5px; }
}
@media (pointer: coarse) and (orientation: landscape) {
  .g3d .g3d-meters { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); right: auto; left: 50%; transform: translateX(-50%); width: 200px; gap: 4px; }
  .g3d .g3d-subtitle { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); max-width: 50vw; font-size: 13px; padding: 5px 12px; }
  .sc-hidehint { top: 30%; }
  .g3d .g3d-toast { top: 30%; }
  .sc-inv__item span:not(.sc-inv__icon) { display: none; }
  .sc-inv__item b { display: inline; }
  /* 横向きでは持ち物を横に並べる（縦に並べると「調べる」ボタンの下に隠れていた） */
  .sc-inv { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; max-width: 52vw; }
}