*, *::before, *::after { box-sizing: border-box; }
:root {
  --oil:#1c1410; --oil2:#2a1d12;
  --wall:#e9ddc6; --wall2:#dcc9a8; --floor:#c9a87e;
  --ink:#2c241c; --ink-soft:#6b5b46;
  --accent:#c2461f; --accent-dk:#9b3414;
  --gold:#e0a637; --paper:#fbf4e6;
  --good:#3f8f5b; --line:rgba(60,44,28,.16);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html, body {
  margin:0; padding:0; height:100%; width:100%; overflow:hidden;
  color:var(--ink);
  font-family:"M PLUS Rounded 1c","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  -webkit-text-size-adjust:100%; touch-action:manipulation; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
}
h1,h2,p { margin:0; }
b { color:var(--accent-dk); font-weight:700; }
[hidden] { display:none !important; }

#bg { position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, var(--wall) 0%, var(--wall2) 58%, var(--floor) 58.2%, #b8946a 100%);
}
/* 床の板目と壁の幅木 */
#bg::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(90deg, rgba(120,86,52,.18) 1px, transparent 1px);
  background-size:64px 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent 58%, #000 58.2%);
          mask-image:linear-gradient(180deg, transparent 58%, #000 58.2%);
}
#fx { position:fixed; inset:0; width:100%; height:100%; z-index:40; pointer-events:none; }

#home {
  position:fixed; left:max(12px,env(safe-area-inset-left)); top:calc(8px + var(--safe-t));
  z-index:30; color:var(--ink-soft); text-decoration:none; font-size:13px;
  background:rgba(251,244,230,.7); padding:5px 11px; border-radius:999px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#home:hover { color:var(--accent-dk); }

/* ---------- オーバーレイ ---------- */
.overlay {
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:24px; padding-top:calc(24px + var(--safe-t)); padding-bottom:calc(24px + var(--safe-b));
}
#intro { background:radial-gradient(120% 90% at 50% 0%, #2a1d12 0%, #150d08 100%); color:var(--paper); }
.intro-card { max-width:520px; text-align:center; }
.intro-oil { font-size:64px; line-height:1; filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)); animation:drip 3.2s ease-in-out infinite; }
@keyframes drip { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }
#intro h1 {
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:clamp(34px,9vw,52px); margin-top:10px; letter-spacing:.04em;
  background:linear-gradient(180deg,#fff 0%, #f0d49a 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.intro-sub { font-size:clamp(14px,4vw,18px); color:#cdbb9a; margin-top:6px; letter-spacing:.08em; }
.intro-lead { font-size:clamp(13px,3.6vw,16px); line-height:2; color:#e7dcc8; margin-top:22px; }
.intro-lead b { color:var(--gold); }
.intro-note { font-size:12px; color:#9c8a70; margin-top:16px; line-height:1.7; }

.big-btn {
  margin-top:24px; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:18px; color:#fff; background:linear-gradient(180deg,var(--accent) 0%, var(--accent-dk) 100%);
  border:none; border-radius:999px; padding:15px 40px; cursor:pointer;
  box-shadow:0 8px 22px rgba(155,52,20,.45); transition:transform .12s, box-shadow .12s;
}
.big-btn:active { transform:translateY(2px) scale(.98); box-shadow:0 4px 12px rgba(155,52,20,.4); }

/* ---------- 部屋 ---------- */
#room { position:fixed; inset:0; display:flex; flex-direction:column; z-index:10; }
#hud {
  position:relative; padding:calc(42px + var(--safe-t)) 16px 6px; text-align:center; flex:0 0 auto;
}
.hud-line { display:block; }
.hud-q { font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:clamp(15px,4.6vw,20px); color:var(--ink); }
.hud-marked {
  position:absolute; right:14px; top:calc(8px + var(--safe-t));
  font-size:12px; font-weight:700; color:#fff; background:var(--accent);
  padding:4px 13px; border-radius:999px; white-space:nowrap;
}
#grid {
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:9px;
  padding:10px 14px 14px; align-content:start;
  max-width:560px; width:100%; margin:0 auto;
}
@media (max-width:380px){ #grid{ grid-template-columns:repeat(3,1fr); } }
.obj {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; aspect-ratio:1/1; border:2px solid transparent; border-radius:16px;
  background:linear-gradient(180deg,#fffaf0 0%, #f3e8d2 100%);
  box-shadow:0 3px 0 rgba(120,90,55,.18), 0 4px 10px rgba(80,55,30,.12);
  cursor:pointer; transition:transform .12s, border-color .15s, box-shadow .15s, background .15s;
  -webkit-tap-highlight-color:transparent; will-change:transform, opacity;
}
.obj:active { transform:scale(.95); }
/* 絵文字だけ彩度を制御(選択枠やバッジは色を保つ=モノクロ部屋でも操作が見える) */
.obj .emoji { font-size:clamp(26px,8vw,38px); line-height:1; filter:saturate(var(--sat,1)); transition:filter 1.1s ease; }
.obj .label { font-size:10.5px; font-weight:700; color:var(--ink-soft); text-align:center; line-height:1.2; padding:0 2px; }
.obj.marked {
  border-color:var(--accent); background:linear-gradient(180deg,#ffe9d9 0%, #ffd2b5 100%);
  box-shadow:0 3px 0 var(--accent-dk), 0 5px 14px rgba(194,70,31,.3);
}
.obj.marked::after {
  content:"🛢️"; position:absolute; top:-7px; right:-7px; font-size:17px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); animation:pop .25s ease;
}
@keyframes pop { from{ transform:scale(0) } to{ transform:scale(1) } }

/* 消える演出 */
.obj.dissolving { animation:dissolve var(--dz,.95s) cubic-bezier(.4,0,.5,1) forwards; pointer-events:none; }
@keyframes dissolve {
  0%   { transform:translateY(0) scale(1); opacity:1; filter:none; }
  35%  { transform:translateY(-6px) scale(1.04); opacity:1; }
  100% { transform:translateY(-46px) scale(.55); opacity:0; filter:blur(7px) hue-rotate(-12deg); }
}
.obj.gone { visibility:hidden; }
/* 残った物を結果で淡く */
.obj.kept { opacity:.92; }
.obj.review-gone { opacity:.16; filter:grayscale(1); border-style:dashed; border-color:var(--line); }

#actbar {
  flex:0 0 auto; padding:10px 16px calc(12px + var(--safe-b));
  display:flex; justify-content:center;
  background:linear-gradient(0deg, rgba(184,148,106,.55), transparent);
}
.crisis-btn {
  font-family:"Zen Maru Gothic",sans-serif; font-weight:900; font-size:17px; letter-spacing:.04em;
  color:#fff; background:linear-gradient(180deg,#3a2a1c 0%, #1c1410 100%);
  border:2px solid #5a4029; border-radius:14px; padding:14px 26px; cursor:pointer; width:100%; max-width:420px;
  box-shadow:0 6px 0 #0d0805, 0 8px 18px rgba(0,0,0,.35); position:relative; overflow:hidden;
}
.crisis-btn::before {
  content:"🛢️"; margin-right:8px;
}
.crisis-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #0d0805, 0 4px 10px rgba(0,0,0,.35); }
.crisis-btn.armed { animation:armed 1.1s ease-in-out infinite; }
@keyframes armed { 0%,100%{ box-shadow:0 6px 0 #0d0805, 0 8px 18px rgba(0,0,0,.35);} 50%{ box-shadow:0 6px 0 #0d0805, 0 0 26px rgba(224,166,55,.6);} }

/* 物の解説ポップ */
#tip {
  position:fixed; left:50%; bottom:calc(82px + var(--safe-b)); transform:translateX(-50%);
  z-index:35; max-width:90vw; background:rgba(28,20,16,.94); color:#f6ecd8;
  padding:10px 16px; border-radius:12px; font-size:13px; line-height:1.5; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.4); pointer-events:none;
  opacity:0; transition:opacity .2s; max-width:340px;
}
#tip.show { opacity:1; }
#tip b { color:var(--gold); }

/* クライシスバナー */
#banner {
  position:fixed; left:0; right:0; top:38%; z-index:45; text-align:center; pointer-events:none;
}
#banner span {
  display:inline-block; font-family:"Zen Maru Gothic",sans-serif; font-weight:900;
  font-size:clamp(26px,8vw,46px); color:#fff;
  text-shadow:0 0 24px rgba(224,166,55,.7), 0 4px 12px rgba(0,0,0,.6);
  letter-spacing:.06em; animation:bannerIn .5s ease;
}
@keyframes bannerIn { from{ opacity:0; transform:scale(.7) } to{ opacity:1; transform:scale(1) } }
body.crisis #bg { filter:brightness(.5) saturate(.7); transition:filter 1.2s; }

/* ---------- 結果 ---------- */
#result { background:radial-gradient(120% 100% at 50% 0%, #241910 0%, #120b06 100%); color:var(--paper); }
.result-card { max-width:480px; width:100%; text-align:center; }
.result-kicker { font-size:14px; color:#cdbb9a; letter-spacing:.1em; }
.result-hero { margin-top:4px; line-height:1; font-family:"Zen Maru Gothic",sans-serif; }
#result-time { font-size:clamp(70px,22vw,110px); font-weight:900; color:var(--gold);
  text-shadow:0 4px 20px rgba(224,166,55,.4); }
.result-unit { font-size:clamp(26px,7vw,40px); font-weight:900; color:var(--gold); }
.result-of { display:block; font-size:clamp(15px,4.4vw,19px); color:#e7dcc8; margin-top:6px; font-weight:700; }
.result-of small { color:#9c8a70; font-weight:400; font-size:.8em; margin-left:4px; }
.result-rank {
  margin-top:14px; display:inline-block; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:clamp(18px,5.4vw,24px); color:#fff;
  border:1.5px solid var(--gold); border-radius:999px; padding:7px 24px;
}
.result-rank.king {
  color:#1c1410; border-color:var(--gold);
  background:linear-gradient(180deg,#ffe9a8 0%, var(--gold) 100%);
  box-shadow:0 0 26px rgba(224,166,55,.6); font-weight:900;
}
.result-stats { display:flex; gap:12px; justify-content:center; margin-top:20px; }
.rstat { flex:1; max-width:170px; background:rgba(255,255,255,.05); border-radius:14px; padding:12px 8px; }
.rstat-num { font-family:"Zen Maru Gothic",sans-serif; font-weight:900; font-size:clamp(24px,7vw,32px); color:#fff; }
.rstat-lbl { font-size:11px; color:#bda988; margin-top:4px; line-height:1.4; }
.result-msg { font-size:13px; line-height:1.8; color:#d8cab2; margin-top:18px; }
.result-btns { display:flex; flex-direction:column; gap:10px; margin-top:22px; align-items:center; }
.share-btn { margin-top:0; }
.ghost-btn {
  font-family:inherit; font-weight:700; font-size:14px; color:#e7dcc8;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:11px 26px; cursor:pointer; text-decoration:none; min-width:230px;
  transition:background .15s;
}
.ghost-btn:hover { background:rgba(255,255,255,.12); }
.result-disclaimer { font-size:10.5px; color:#7d6e58; margin-top:18px; line-height:1.6; }

/* お手つき(非石油を選んでいた=発動時に判明) */
.obj.busted {
  border-color:#8a8a8a; background:linear-gradient(180deg,#efefef 0%, #d9d9d9 100%);
  filter:grayscale(1); opacity:.85;
}
.obj.busted::after {
  content:"✕"; position:absolute; top:-9px; right:-9px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:#fff; background:#d83a3a; border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.4); animation:pop .25s ease;
}

/* 部屋は最初モノクロ。当てるほど色が戻る。JSが #bg の filter と #grid の --sat を制御 */
#bg { transition:filter 1.1s ease; }

/* 当てた石油=色が戻る(金の輝きでポップ) */
.obj.restored {
  border-color:var(--gold); background:linear-gradient(180deg,#fff6e0 0%, #ffe7bd 100%);
  box-shadow:0 0 20px rgba(224,166,55,.65), 0 3px 0 var(--accent-dk);
  animation:restorePop .5s ease;
}
.obj.restored .emoji { filter:saturate(1.15) !important; }
@keyframes restorePop { 0%{ transform:scale(1) } 42%{ transform:scale(1.18) } 100%{ transform:scale(1) } }

/* 見逃した石油(発動時に薄く露出) */
.obj.missed { opacity:.5; }
.obj.missed::after {
  content:"🛢️"; position:absolute; top:-7px; right:-7px; font-size:15px; opacity:.55; filter:grayscale(1);
}

/* お手つきの揺れ */
@keyframes shake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-5px)} }
body.shake #grid { animation:shake .35s ease; }

/* 3カラムの結果スタッツ(命中率・お手つき・石油依存度) */
.result-stats .rstat { max-width:130px; padding:11px 6px; }
.result-stats .rstat-lbl { font-size:10.5px; }

/* レビューモード(結果後に部屋を見せる) */
body.review #result { display:none; }
body.review #room { display:flex; }
#review-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:48; display:flex; gap:10px; justify-content:center;
  padding:12px 16px calc(12px + var(--safe-b)); background:linear-gradient(0deg,#1c1410 60%, transparent);
}