:root { --ink:#17221d; --muted:#6f766d; --cream:#f4efe4; --paper:#fffdf7; --red:#db4d37; --green:#2c7355; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--cream); color:var(--ink); font-family:"Manrope",sans-serif; background-image:radial-gradient(#bdb6a7 .7px,transparent .7px); background-size:14px 14px; }
button { font:inherit; }
main { width:min(1080px,calc(100% - 40px)); margin:auto; padding:32px 0 24px; }
header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #cfc8ba; padding-bottom:18px; }
.eyebrow,.rules,.stat>span,.intro-note { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.12em; }
.pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px #db4d3720; margin-right:9px; }
.reset { border:0; background:transparent; color:var(--muted); cursor:pointer; }
.intro { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:34px 0 25px; }
h1 { margin:0 0 5px; font-size:clamp(32px,5vw,58px); line-height:1; letter-spacing:-.055em; }
.intro p { margin:0; color:var(--muted); }
.intro .intro-note { margin-top:9px; color:#8c8c82; letter-spacing:.04em; }
.rules { display:flex; gap:18px; color:var(--muted); white-space:nowrap; }
.rules b { color:var(--ink); margin-left:4px; }
.game-board { background:var(--paper); border:1px solid #d7d0c2; box-shadow:0 18px 50px #52493714; padding:32px; }
.action-area { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:clamp(28px,5vw,58px); max-width:940px; margin:auto; padding-top:32px; }
.doors { display:contents; }
.door-wrap { text-align:center; position:relative; }
.door { width:100%; aspect-ratio:.72; position:relative; border:9px solid #283b31; background:linear-gradient(95deg,#476756,#304d3e); box-shadow:inset 0 0 0 2px #6c8b78,inset -12px 0 25px #0f1d1666,8px 9px 0 #d7d0c2; color:#eef0e6; cursor:pointer; overflow:hidden; transition:transform .18s; }
.door:hover { transform:translateY(-3px); }
.door::before { content:""; position:absolute; inset:16% 14% 57%; border:2px solid #73917f; box-shadow:0 78px 0 -2px #385645,0 78px 0 0 #73917f; }
.door-label { position:absolute; top:17px; left:19px; text-transform:uppercase; font:10px "DM Mono"; letter-spacing:.2em; }
.number { position:absolute; right:17px; top:12px; font-size:26px; font-weight:800; }
.number small { display:block; font:8px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.knob { width:13px; height:13px; border-radius:50%; background:#e5be62; position:absolute; right:18px; top:53%; box-shadow:0 0 0 4px #19271f; }
.heard-tiger { position:absolute; inset:0; display:grid; place-items:center; z-index:2; font-size:clamp(54px,8vw,82px); background:#13231da8; pointer-events:none; opacity:0; animation:heard-tiger 2s ease-in-out forwards; }
@keyframes heard-tiger { 0% { opacity:0; transform:scale(.82); } 45% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.08); } }
.outcome { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(54px,9vw,90px); background:#13231dcf; animation:reveal .25s ease-out; }
@keyframes reveal { from { opacity:0; transform:scale(.8); } }
.open-button { margin-top:18px; border:0; border-bottom:1px solid #9c9c91; background:transparent; padding:7px 2px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; cursor:pointer; }
.status { min-height:54px; max-width:878px; margin:30px auto 0; border:1px solid #d6d0c4; background:#f6f2e9; display:flex; justify-content:center; align-items:center; gap:12px; padding:10px 18px; color:var(--muted); }
.status span { color:#9b7c32; } .status p { margin:0; text-align:center; font-size:13px; } .status.danger { border-color:#e4a69b; color:#9e3425; } .status.success { border-color:#9bc5ae; color:var(--green); }
.listen { width:100%; aspect-ratio:.72; margin-top:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; text-align:center; background:var(--red); color:white; border:9px solid #a93827; padding:18px; cursor:pointer; box-shadow:8px 9px 0 #d7d0c2; transition:.15s; }
.listen:hover { transform:translateY(-2px); box-shadow:5px 7px 0 #8f3022; } .listen:active { transform:translateY(2px); box-shadow:2px 2px 0 #8f3022; }
.listen>span { font-size:25px; } .listen strong { text-transform:uppercase; letter-spacing:.12em; } .listen small { opacity:.75; font-size:10px; line-height:1.5; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #d2cbbf; background:#eae4d8; }
.stat { padding:20px 22px; border-right:1px solid #d2cbbf; } .stat:last-child { border:0; } .stat>span { display:block; color:var(--muted); margin-bottom:8px; } .stat strong { font-size:30px; letter-spacing:-.04em; } .stat small { color:var(--muted); margin-left:6px; } .stat.reward strong { color:var(--red); } .stat.total { background:var(--ink); color:white; } .stat.total>span,.stat.total small { color:#aab4ad; }
@media (max-width:700px) {
  main { width:min(100% - 24px,520px); padding-top:18px; } .intro { display:block; } .rules { margin-top:18px; gap:12px; white-space:normal; flex-wrap:wrap; }
  .game-board { padding:14px; } .action-area { grid-template-columns:1fr 1fr; gap:20px; padding-top:26px; } .door { border-width:6px; box-shadow:inset 0 0 0 1px #6c8b78,inset -8px 0 18px #0f1d1666,5px 6px 0 #d7d0c2; }
  .listen { grid-column:1/-1; width:min(245px,100%); aspect-ratio:auto; margin:8px auto 0; display:grid; grid-template-columns:35px auto; text-align:left; align-items:center; gap:0; padding:12px 22px; border-width:0; box-shadow:4px 5px 0 #8f3022; } .listen>span { grid-row:1/3; }
  .stats { grid-template-columns:1fr 1fr; } .stat:nth-child(2) { border-right:0; } .stat { padding:14px 10px; border-bottom:1px solid #d2cbbf; } .stat:nth-child(n+3) { border-bottom:0; } .stat strong { font-size:24px; } .stat small { display:block; margin:3px 0 0; }
}