:root{
  --bg-void:      #0b0d12;
  --wall-top:     #232a3a;
  --wall-bottom:  #141824;
  --wall-top-alt:    #212a2e;
  --wall-bottom-alt: #101a1c;
  --floor:        #0e1117;
  --ink:          #eee7d6;
  --ink-dim:      #a9a08c;
  --gold:         #d9a441;
  --gold-bright:  #f0c66b;
  --door-wood:    #4a3626;
  --door-wood-lt: #6b4a2f;
  --stick-wood:   #7a5230;
  --cloth:        #c8bfa8;
  --flame:        #f2934a;
  --panel:        #171b26;
  --panel-line:   #2c3244;
  --danger:       #c0594a;
  --overlay-bg-rgb: 11,13,18;
}
:root[data-theme="light"]{
  --bg-void:      #e7e2d4;
  --wall-top:     #cfc6ac;
  --wall-bottom:  #b8ad8e;
  --wall-top-alt:    #c3cdc6;
  --wall-bottom-alt: #a9b6ac;
  --floor:        #9c9174;
  --ink:          #2a2416;
  --ink-dim:      #5c5340;
  --panel:        #f2ede0;
  --panel-line:   #cdc4ab;
  --overlay-bg-rgb: 231,226,212;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg-void:      #e7e2d4;
    --wall-top:     #cfc6ac;
    --wall-bottom:  #b8ad8e;
    --wall-top-alt:    #c3cdc6;
    --wall-bottom-alt: #a9b6ac;
    --floor:        #9c9174;
    --ink:          #2a2416;
    --ink-dim:      #5c5340;
    --panel:        #f2ede0;
    --panel-line:   #cdc4ab;
    --overlay-bg-rgb: 231,226,212;
  }
}

*{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-void);
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,"Hiragino Mincho ProN",serif;
  color:var(--ink);
  padding:24px;
}

.stage{
  width:100%;
  max-width:860px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.titlebar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.titlebar h1{
  margin:0;
  font-size:clamp(1.1rem,2.6vw,1.5rem);
  font-weight:600;
  letter-spacing:.02em;
  text-wrap:balance;
}
.titlebar .sub{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.frame{
  position:relative;
  aspect-ratio:900/560;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.6), 0 0 0 1px var(--panel-line);
  background:var(--panel);
  touch-action:manipulation;
}

/* ゲーム画面は 900×560 の論理サイズで組み立て、.frame の実際の表示幅に
   合わせて JS が transform: scale() を当てることでレスポンシブ対応する。
   デザイン座標系を固定できるので、config.js の x/y/w/h がそのまま使える。 */
.game-viewport{
  position:absolute;
  top:0; left:0;
  width:900px;
  height:560px;
  transform-origin:top left;
}

.game-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 160px 40px rgba(0,0,0,.42);
}
/* 手続き描画（画像未指定）の時だけ、壁面に縦の板目テクスチャを足す。
   高さは床の開始位置（上から68%）までに絞り、床側へテクスチャが
   漏れないようにしている。 */
.game-bg.procedural::before{
  content:"";
  position:absolute;
  inset:0 0 32% 0;
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 120px);
}

/* 壁と床の境目にある巾木（幅木）。手続き描画の時だけ表示する。 */
.baseboard{
  position:absolute;
  left:0; right:0;
  top:68%;
  height:6px;
  margin-top:-3px;
  background:linear-gradient(to bottom, var(--door-wood-lt), var(--door-wood));
  box-shadow:0 2px 4px rgba(0,0,0,.5);
  pointer-events:none;
}
.baseboard[hidden]{ display:none; }

/* 床。手続き描画の時だけ --floor で塗り、木目/タイルの目地を足す。
   画像背景を使う場合は透明のままにして、画像側の床をそのまま見せる。 */
.game-floor{
  position:absolute;
  left:0; right:0;
  top:68%; bottom:0;
  pointer-events:none;
}
.game-floor.procedural{
  background:var(--floor);
}
.game-floor.procedural::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 45%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.12) 0 1px, transparent 1px 26px);
}

.game-objects{ position:absolute; inset:0; }

.game-object{
  position:absolute;
  cursor:pointer;
  transition:transform .15s ease;
  /* タッチ操作時に標準の長押しメニューやテキスト選択が被らないようにする
     （danger タイプの2段階タップ確認と干渉しないようにするため） */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.game-object:hover{ transform:scale(1.06); }
.game-object svg{ display:block; }

.game-object.door-shape{ transform-origin:left center; }

@keyframes doorSwingOpen{
  to{ transform:scaleX(0.05); opacity:.1; }
}
.game-object.opening{ animation:doorSwingOpen .7s ease-in forwards; pointer-events:none; }

@keyframes objectShake{
  10%,90%{ transform:translateX(-3px); }
  20%,80%{ transform:translateX(5px); }
  30%,50%,70%{ transform:translateX(-7px); }
  40%,60%{ transform:translateX(7px); }
}
.game-object.shake{ animation:objectShake .4s ease-in-out; }

@keyframes pulseGlow{
  0%,100%{ filter:drop-shadow(0 0 4px var(--gold)); }
  50%{ filter:drop-shadow(0 0 13px var(--gold-bright)); }
}
.game-object.pulsing svg{ animation:pulseGlow 1.8s ease-in-out infinite; }

/* type: "danger" のオブジェクトは、金色ではなく警告色でうっすら常時点滅させ、
   クリックする前から「何か様子がおかしい」と視覚的に伝わるようにする。 */
@keyframes dangerPulse{
  0%,100%{ filter:drop-shadow(0 0 2px var(--danger)); }
  50%{ filter:drop-shadow(0 0 9px var(--danger)); }
}
.game-object.danger-marker svg{ animation:dangerPulse 1.3s ease-in-out infinite; }

@keyframes burstRing{
  from{ width:16px; height:16px; opacity:1; }
  to{ width:130px; height:130px; opacity:0; }
}
.burst-ring{
  position:absolute;
  transform:translate(-50%,-50%);
  border:3px solid var(--gold-bright);
  border-radius:50%;
  pointer-events:none;
  animation:burstRing .55s ease-out forwards;
}

@media (prefers-reduced-motion:reduce){
  .game-object.opening{ animation:none; opacity:.1; }
  .game-object.shake{ animation:none; }
  .game-object.pulsing svg{ animation:none; }
  .game-object.danger-marker svg{ animation:none; }
  .burst-ring{ animation:none; display:none; }
}

/* 制作者向けデバッグパネル（GAME_CONFIG.meta.debug = true の時だけ生成される）。
   プレイヤー向けUIとは明確に見た目を分け、「テスト用」と一目で分かる配色にしている。 */
#debug-overlay{
  position:absolute;
  top:52px;
  right:16px;
  z-index:20;
  width:220px;
  background:rgba(8,10,14,.92);
  border:1px solid #00e5b0;
  border-radius:6px;
  padding:8px 10px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.66rem;
  line-height:1.5;
  color:#00e5b0;
}
#debug-overlay .debug-title{
  font-weight:700;
  letter-spacing:.12em;
  border-bottom:1px solid rgba(0,229,176,.4);
  margin-bottom:4px;
  padding-bottom:3px;
}
#debug-overlay .debug-flags{ margin-top:4px; }
#debug-overlay .debug-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
}
#debug-overlay .debug-buttons button{
  font-family:inherit;
  font-size:.62rem;
  color:#00e5b0;
  background:rgba(0,229,176,.12);
  border:1px solid rgba(0,229,176,.5);
  border-radius:3px;
  padding:3px 6px;
  cursor:pointer;
}
#debug-overlay .debug-buttons button:hover{ background:rgba(0,229,176,.22); }

.scene-label{
  position:absolute;
  top:14px;
  left:16px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  background:rgba(11,13,18,.45);
  padding:5px 10px;
  border-radius:3px;
  pointer-events:none;
  transition:opacity .3s ease;
}
.scene-label[hidden]{ display:none; }

.nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:52px;
  border:none;
  border-radius:4px;
  background:rgba(11,13,18,.45);
  color:var(--ink);
  font-size:1.3rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, opacity .15s ease;
}
.nav-arrow:hover{ background:rgba(11,13,18,.7); }
.nav-arrow[hidden]{ display:none; }
.nav-arrow.left{ left:12px; }
.nav-arrow.right{ right:12px; }

.nav-back{
  position:absolute;
  top:50px;
  left:16px;
  border:none;
  border-radius:4px;
  background:rgba(11,13,18,.45);
  color:var(--ink);
  font-family:inherit;
  font-size:.78rem;
  padding:6px 12px;
  cursor:pointer;
  transition:background .15s ease;
}
.nav-back:hover{ background:rgba(11,13,18,.7); }
.nav-back[hidden]{ display:none; }

.mute-btn{
  position:absolute;
  top:14px;
  right:16px;
  width:32px;
  height:32px;
  border:none;
  border-radius:4px;
  background:rgba(11,13,18,.45);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
}
.mute-btn:hover{ background:rgba(11,13,18,.7); }

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:center;
  background:radial-gradient(ellipse at center, rgba(var(--overlay-bg-rgb),.94), rgba(var(--overlay-bg-rgb),.99));
  color:var(--ink);
  padding:32px;
  opacity:1;
  transition:opacity .5s ease;
}
.overlay[hidden]{ display:none; }
.overlay.fade-out{ opacity:0; pointer-events:none; }

.overlay .eyebrow{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
}
.overlay h2{
  margin:0;
  font-size:clamp(1.8rem,6vw,2.8rem);
  font-weight:600;
  letter-spacing:.03em;
  text-wrap:balance;
}
.overlay p{
  margin:0;
  max-width:32ch;
  color:var(--ink-dim);
  font-size:.95rem;
  line-height:1.6;
}

button.action{
  font-family:inherit;
  font-size:.95rem;
  letter-spacing:.04em;
  color:#1b1408;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border:none;
  padding:12px 30px;
  border-radius:3px;
  cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(217,164,65,.65);
  transition:transform .15s ease, box-shadow .15s ease;
}
button.action:hover{ transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(217,164,65,.8); }
button.action:active{ transform:translateY(0); }
button.action.ghost{
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  border:1px solid var(--panel-line);
}

.modal{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,13,18,.72);
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal-box{
  width:min(320px, 100%);
  max-height:100%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:8px;
  padding:26px 22px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.7);
}
.modal-box h3{
  margin:0;
  font-size:1.2rem;
  font-weight:600;
}
.modal-clue{
  margin:0;
  font-size:.82rem;
  color:var(--ink-dim);
  line-height:1.6;
}
.modal-input{
  width:100%;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:1.4rem;
  letter-spacing:.3em;
  text-align:center;
  color:var(--ink);
  background:rgba(255,255,255,.04);
  border:1px solid var(--panel-line);
  border-radius:4px;
  padding:10px 8px;
}
.modal-input:focus{ outline:none; border-color:var(--gold); }
.modal-error{
  margin:0;
  min-height:1.1em;
  font-size:.78rem;
  color:var(--danger);
}
.modal-actions{ display:flex; gap:10px; }
.modal-actions button.action{ padding:10px 22px; font-size:.85rem; }

.hud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:6px;
  flex-wrap:wrap;
}
.inventory{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.inventory .slots{ display:flex; gap:8px; }
.inventory .slot{
  width:34px; height:34px;
  border-radius:4px;
  border:1px solid var(--panel-line);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  padding:0;
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.inventory .slot:hover{ transform:translateY(-1px); }
.inventory .slot.active{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(217,164,65,.35);
}
.inventory .slot svg{ width:20px; height:20px; }
.inventory .empty-note{ opacity:.6; font-style:italic; letter-spacing:.02em; text-transform:none; }

.hint{
  font-size:.78rem;
  color:var(--ink-dim);
  min-height:1.2em;
}
.hint.warn{ color:var(--danger); }

.reset{
  font-family:ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--ink-dim);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:0;
}

@media (prefers-reduced-motion:reduce){
  .overlay, button.action, .nav-arrow, .inventory .slot{ transition:none; }
}