:root{
  --bg: #07080a;
  --panel: #131316;
  --panel-2: #1a1a1f;
  --gold: #c9a86a;
  --gold-bright: #e6cf9c;
  --bone: #f2efe6;
  --ink: #d9d3c4;
  --ink-dim: #948d80;
  --display: "IBM Plex Mono", monospace;
  --body: "IBM Plex Mono", monospace;
  --door-w: clamp(122px, 26vw, 300px);
  --door-h: calc(var(--door-w) * 1.5333);
  --frame-pad: clamp(10px, 2vw, 24px);
  --jamb-w: clamp(8px, 1.4vw, 16px);
  --edge-w: clamp(7px, 1.1vw, 14px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  min-height:100%;
  overflow-x:hidden;
}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.9) .6px, transparent .6px),
    radial-gradient(rgba(255,255,255,.9) .6px, transparent .6px);
  background-size:3px 3px;
  background-position:0 0, 1.5px 1.5px;
}

/* ---------- counter ---------- */
.counter{
  position:fixed; top:18px; left:20px; z-index:15;
  font-family:var(--display); font-weight:700; letter-spacing:.03em;
  font-size:clamp(1.5rem, 5vw, 2.3rem); line-height:1;
  color:var(--gold-bright); text-shadow:0 0 20px rgba(230,207,156,.35);
  opacity:0; transform:translateY(-10px);
  transition:opacity 3s cubic-bezier(.16,.7,.2,1), transform 3s cubic-bezier(.16,.7,.2,1);
}
.counter.entered{ opacity:1; transform:translateY(0); }

#app{
  position:relative; z-index:2;
  max-width:720px; margin:0 auto; padding:84px 20px 60px;
  min-height:100vh; display:flex; flex-direction:column; gap:28px;
}

/* ---------- stage ---------- */
#stage{ position:relative; min-height:440px; display:flex; align-items:center; justify-content:center; }
.panel{ width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.hidden{ display:none !important; }

.spinner{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(201,168,106,.25); border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.tagline{
  color:var(--ink-dim); font-size:.98rem; max-width:36ch; line-height:1.6; letter-spacing:.02em;
  opacity:0; transition:opacity 1s ease;
}
.tagline.show{ opacity:1; }
.locked-msg{ font-size:1.02rem; }
.fine-print{ color:var(--ink-dim); font-size:.78rem; max-width:38ch; letter-spacing:.01em; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body); font-weight:600; font-size:.9rem; letter-spacing:.03em;
  padding:12px 22px; border-radius:4px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

.btn-gold{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:#20180a; box-shadow:0 4px 20px rgba(201,168,106,.22);
}
.btn-gold:hover{ box-shadow:0 6px 26px rgba(201,168,106,.35); }
.btn-ghost{
  background:transparent; color:var(--ink); border-color:rgba(217,211,196,.3);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }

.action-block{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.bonus-hint{ color:var(--ink-dim); font-size:.88rem; max-width:34ch; }

/* ---------- doors ---------- */
.corridor{
  display:flex; gap:clamp(14px,5vw,64px); justify-content:center; align-items:flex-end;
}

.door-unit{ display:flex; flex-direction:column; align-items:center; }

.door-stage{
  perspective:2000px; perspective-origin:33% 42%;
  opacity:0; transform:translateY(26px);
  transition:opacity 3s cubic-bezier(.16,.7,.2,1), transform 3s cubic-bezier(.16,.7,.2,1);
}
.door-unit[data-door="2"] .door-stage{ transition-delay:.15s; }
.door-stage.entered{ opacity:1; transform:translateY(0); }

.door-frame{
  position:relative;
  padding:var(--frame-pad) var(--frame-pad) 0;
  background:linear-gradient(100deg, #241a13 0%, #38291d 20%, #1d150f 54%, #30231a 100%);
  border-radius:6px 6px 0 0;
  box-shadow:0 0 0 1px #0a0806, 0 40px 90px -30px #000, inset 0 1px 0 rgba(226,196,146,.14);
}
.door-grain{
  position:absolute; inset:0; border-radius:6px 6px 0 0; pointer-events:none;
  background:repeating-linear-gradient(92deg, rgba(0,0,0,.24) 0 2px, rgba(255,235,200,.045) 2px 5px, rgba(0,0,0,0) 5px 11px);
}

.door-opening{ position:relative; width:var(--door-w); height:var(--door-h); transform-style:preserve-3d; }

.door-void{
  position:absolute; inset:0; overflow:hidden; border-radius:2px;
  background:radial-gradient(140% 90% at 50% 72%, #0f1319 0%, #070a0e 52%, #030406 100%);
  box-shadow:inset 0 0 60px 20px #000;
}
.door-void::after{
  content:""; position:absolute; left:50%; top:58%; width:66%; height:52%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(150,172,205,.16), rgba(150,172,205,0) 68%);
  filter:blur(6px);
}
.dust{ position:absolute; border-radius:50%; background:rgba(210,224,245,.5); }
.dust-a{ left:34%; bottom:12%; width:4px; height:4px; animation:dustDrift 9s linear infinite; }
.dust-b{ left:58%; bottom:24%; width:3px; height:3px; background:rgba(210,224,245,.45); animation:dustDrift 12s linear infinite 2.5s; }
.dust-c{ left:47%; bottom:6%; width:2px; height:2px; background:rgba(210,224,245,.4); animation:dustDrift 15s linear infinite 5s; }
@keyframes dustDrift{
  0%{ transform:translate3d(0,0,0); opacity:0; }
  20%{ opacity:.55; }
  100%{ transform:translate3d(14px,-70px,0); opacity:0; }
}

.jamb{ position:absolute; }
.jamb-l{ top:0; bottom:0; left:0; width:var(--jamb-w); background:linear-gradient(90deg,#0b0906,#2c2017); transform-origin:left center; transform:rotateY(-72deg); box-shadow:inset 0 0 24px #000; }
.jamb-r{ top:0; right:0; bottom:0; width:var(--jamb-w); background:linear-gradient(270deg,#0b0906,#241a12); transform-origin:right center; transform:rotateY(72deg); box-shadow:inset 0 0 24px #000; }
.jamb-t{ top:0; left:0; right:0; height:var(--jamb-w); background:linear-gradient(180deg,#0a0806,#201710); transform-origin:top center; transform:rotateX(72deg); box-shadow:inset 0 0 20px #000; }

.door{
  position:absolute; inset:0; transform-style:preserve-3d; transform-origin:left center;
  transform:rotateY(0deg);
  transition:transform 1750ms cubic-bezier(.28,.72,.16,1);
  cursor:pointer; outline:none;
}
.door-unit.open .door{ transform:rotateY(-92deg); }
.door-unit.locked .door{ pointer-events:none; }
.door:focus-visible{ outline:none; }
.door:focus-visible .door-front{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.75), 0 0 0 2px var(--gold-bright); }

.door-front{
  position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(.5px);
  background:linear-gradient(97deg, #2a1f16 0%, #3d2d21 16%, #2e2218 44%, #402f22 70%, #241a12 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.75), inset 0 2px 0 rgba(238,208,158,.18), 0 0 40px -6px rgba(0,0,0,.9);
}
.door-front::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(91deg, rgba(0,0,0,.2) 0 1px, rgba(240,210,160,.05) 1px 4px, rgba(0,0,0,0) 4px 9px), radial-gradient(80% 50% at 18% 26%, rgba(0,0,0,.3), rgba(0,0,0,0) 72%);
}

.door-panels{ position:absolute; inset:0; padding:8% 7% 8% 11%; display:grid; grid-template-rows:1.12fr 1fr; gap:6%; }
.panel-row{ display:grid; grid-template-columns:1fr 1fr; gap:5%; }
.door-panel{ border-radius:2px; }
.door-panel.top{ background:linear-gradient(160deg,#4a3727 0%,#2b2016 62%,#1d150e 100%); box-shadow:inset 2px 2px 0 rgba(246,220,176,.22), inset -2px -2px 0 rgba(0,0,0,.8), inset 0 -6px 10px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.75), 0 -1px 0 rgba(246,220,176,.14); }
.door-panel.bottom{ background:linear-gradient(160deg,#45331f 0%,#291e14 62%,#1a130d 100%); box-shadow:inset 2px 2px 0 rgba(246,220,176,.2), inset -2px -2px 0 rgba(0,0,0,.8), inset 0 -6px 10px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.75), 0 -1px 0 rgba(246,220,176,.13); }

.hinge{ position:absolute; left:0; width:clamp(7px,1.3vw,14px); height:clamp(20px,4vw,44px); border-radius:0 3px 3px 0; background:linear-gradient(180deg,#9a958b 0%,#6a655c 42%,#3a352f 100%); box-shadow:2px 1px 3px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.4), inset -1px 0 0 rgba(0,0,0,.4); }
.hinge-top{ top:13%; }
.hinge-bottom{ bottom:13%; }

.knob{ position:absolute; right:5%; top:50%; width:clamp(18px,3.8vw,40px); height:clamp(50px,10vw,104px); transform-style:preserve-3d; transform:translateY(-50%); }
.knob-plate{ position:absolute; inset:0; border-radius:999px; }
.knob-plate.p1{ background:linear-gradient(150deg,#7a6231 0%,#4e3d1c 60%,#2c2110 100%); }
.knob-plate.p2{ background:linear-gradient(150deg,#a78843 0%,#6b5426 60%,#3a2c14 100%); transform:translateZ(2px); }
.knob-plate.p3{ background:linear-gradient(150deg,#d9bb7c 0%,#a3853f 38%,#6b5426 70%,#3a2c14 100%); transform:translateZ(4px); box-shadow:0 3px 8px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,244,210,.6), inset 0 -2px 0 rgba(0,0,0,.65), inset -2px 0 0 rgba(0,0,0,.35); }
.knob-boss{ position:absolute; left:50%; top:24%; border-radius:50%; transform:translate(-50%,-50%); }
.knob-boss.b1{ width:58%; height:21%; transform:translate(-50%,-50%) translateZ(6px); background:radial-gradient(circle at 34% 28%, #c8a862, #6f5828 60%, #33270f); }
.knob-boss.b2{ width:75%; height:27%; transform:translate(-50%,-50%) translateZ(11px); background:radial-gradient(circle at 34% 28%, #dcc084, #7d6231 55%, #2e2312); }
.knob-boss.b3{ width:92%; height:34%; transform:translate(-50%,-50%) translateZ(16px); background:radial-gradient(circle at 33% 27%, #efd69c, #9c7d3a 62%, #46341a); }
.knob-boss.b4{ width:96%; height:36%; transform:translate(-50%,-50%) translateZ(19px); background:radial-gradient(circle at 33% 27%, #fff6dc 0%, #e6cd97 24%, #a9873f 58%, #4e3c1a 88%, #241b0c 100%); box-shadow:0 4px 9px rgba(0,0,0,.9), inset -3px -4px 7px rgba(0,0,0,.45), inset 3px 3px 4px rgba(255,246,215,.55); }
.knob-boss.b5{ width:62%; height:22%; transform:translate(-50%,-50%) translateZ(22px); background:radial-gradient(circle at 36% 30%, #fffaea, #d9bf88 45%, #8d7134 90%); }
.knob-keyhole{ position:absolute; left:50%; bottom:14%; width:24%; height:15%; transform:translateX(-50%) translateZ(5px); border-radius:50% 50% 30% 30%; background:radial-gradient(circle at 50% 24%, #06070b, #000); box-shadow:inset 0 -1px 2px rgba(255,240,200,.4), 0 1px 0 rgba(255,240,200,.35); }

.door-edge{ position:absolute; }
.door-edge-r{ top:0; right:0; bottom:0; width:var(--edge-w); transform-origin:right center; transform:rotateY(-90deg); background:linear-gradient(90deg,#100b07,#4a3726 45%,#241a12 100%); box-shadow:inset 0 0 12px rgba(0,0,0,.65); }
.door-edge-t{ top:0; left:0; right:0; height:var(--edge-w); transform-origin:top center; transform:rotateX(-90deg); background:linear-gradient(180deg,#3a2b1f,#14100b); }

.door-back{
  position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(-14px) rotateY(180deg);
  background:linear-gradient(97deg,#1a130d,#291e15 45%,#150f0a);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.6);
}
.door-back::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(89deg, rgba(0,0,0,.32) 0 2px, rgba(230,200,150,.04) 2px 6px, rgba(0,0,0,0) 6px 12px);
}
.back-handle{ position:absolute; left:8%; top:50%; width:clamp(16px,3.4vw,36px); height:clamp(44px,9vw,96px); transform-style:preserve-3d; transform:translateY(-50%); }
.back-boss{ position:absolute; border-radius:50%; }
.back-boss.bb1{ inset:0; border-radius:999px; transform:translateZ(2px); background:linear-gradient(150deg,#7c6433,#3f3117 65%,#241a0d); }
.back-boss.bb2{ left:50%; top:22%; width:52%; height:19%; transform:translate(-50%,-50%) translateZ(6px); background:radial-gradient(circle at 34% 28%,#a98a49,#5b4722 60%,#291f0e); }
.back-boss.bb3{ left:50%; top:22%; width:74%; height:27%; transform:translate(-50%,-50%) translateZ(12px); background:radial-gradient(circle at 34% 28%,#c3a55f,#6d572a 60%,#2c2110); box-shadow:0 3px 6px rgba(0,0,0,.85), inset -2px -3px 5px rgba(0,0,0,.45), inset 2px 2px 3px rgba(255,246,215,.4); }

.door-floor-shadow{ position:absolute; left:0; right:0; bottom:calc(-1 * clamp(8px,1.4vw,13px)); height:clamp(8px,1.4vw,13px); background:linear-gradient(180deg,#3a2b1f,#120d09); box-shadow:0 6px 18px -6px #000; }

.door-threshold{
  width:calc(var(--door-w) + var(--frame-pad) * 2);
  height:clamp(64px, 14vw, 130px);
  margin-top:clamp(8px,1.5vw,13px);
  background:linear-gradient(180deg, rgba(11,13,17,.95), rgba(6,7,9,0));
  transform:rotateX(74deg); transform-origin:top center;
  position:relative;
}
.door-spill{
  position:absolute; left:46%; top:0; width:80%; height:92%; transform:translateX(-50%);
  opacity:0; transition:opacity 1750ms ease;
  background:linear-gradient(180deg, rgba(158,180,214,.16), rgba(158,180,214,0) 78%);
  filter:blur(9px);
  clip-path:polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.door-unit.open .door-spill{ opacity:1; }

/* ---------- darken transition ---------- */
.darken{
  position:fixed; inset:0; background:#000; opacity:0; z-index:20; pointer-events:none;
  transition:opacity 3s ease;
}
.darken.show{ opacity:1; pointer-events:all; }

/* ---------- lose screen ---------- */
/* min-height reserva o espaço da caveira grande desde o início, senão o
   painel cresceria (e a caveira "subiria") assim que ela some de tamanho */
.skull-wrap{ display:flex; align-items:center; justify-content:center; min-height:min(52vh, 420px); }
.skull{
  width:clamp(210px, 48vw, 420px); height:auto; color:var(--bone);
  filter:drop-shadow(0 0 54px rgba(242,239,230,.18)) drop-shadow(0 28px 54px rgba(0,0,0,.65));
  transition:width 900ms cubic-bezier(.3,.8,.2,1), transform 900ms cubic-bezier(.3,.8,.2,1);
}
.skull circle, .skull path:not(.hole), .skull ellipse:not(.hole), .skull rect:not(.hole){ fill:currentColor; }
.skull .hole{ fill:var(--bg); }
.skull.settle{ width:clamp(90px, 20vw, 160px); transform:translateY(-8%); }

/* Fica fora do fluxo (display:none) até o momento de revelar — se não, o
   formulário/rank/ranking já reservariam altura mesmo invisíveis, e a
   caveira ficaria empurrada pra cima em vez de centralizada. */
.lose-details{
  display:none;
  flex-direction:column; align-items:center; gap:22px; width:100%;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.lose-details.reveal{ opacity:1; transform:translateY(0); }

.rank-line{ font-size:.96rem; color:var(--ink-dim); max-width:38ch; line-height:1.6; }
.rank-line strong{ color:var(--gold-bright); font-weight:600; }

.score-form{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; max-width:420px; }
.score-form input{
  font-family:var(--body); background:var(--panel-2); border:1px solid rgba(201,168,106,.3);
  color:var(--ink); padding:11px 12px; border-radius:4px; font-size:.9rem;
  flex:1 1 100%; min-width:0;
}
.score-form input:focus{ outline:none; border-color:var(--gold); }
.score-form button{ flex:1 1 100%; }
.score-confirm{ color:var(--gold-bright); font-size:.88rem; }

/* ---------- leaderboard (only shown on the lose screen) ---------- */
.leaderboard{
  width:100%; max-width:420px;
  background:var(--panel); border:1px solid rgba(201,168,106,.18); border-radius:8px;
  padding:20px 18px 8px;
}
.leaderboard h2{
  font-family:var(--display); font-size:.85rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-bright); margin:0 0 14px; text-align:center; font-weight:600;
}
.leaderboard-header{
  display:flex; align-items:center; gap:12px; padding:0 4px 8px;
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); border-bottom:1px solid rgba(201,168,106,.18);
}
.leaderboard-list{ list-style:none; margin:0; padding:0; }
.leaderboard-list li{
  display:flex; align-items:center; gap:12px; padding:10px 4px;
  border-bottom:1px solid rgba(201,168,106,.1); font-size:.88rem;
}
.leaderboard-list li:last-child{ border-bottom:none; }
.lb-rank{ font-family:var(--display); color:var(--gold); width:2.4em; flex:none; text-align:right; }
.lb-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-country{ color:var(--ink-dim); flex:none; }
.lb-level{ font-family:var(--display); color:var(--gold-bright); flex:none; width:3.4em; }
.leaderboard-header .lb-level{ font-family:inherit; color:inherit; }
.lb-empty{ justify-content:center; color:var(--ink-dim); border:none !important; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--gold); color:var(--ink);
  padding:10px 18px; border-radius:6px; font-size:.86rem; z-index:30;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}


@media (prefers-reduced-motion: reduce){
  /* Mantém o essencial (indicar que o estado mudou) mas rápido — desligar
     por completo faria as portas/caveira/contador simplesmente "piscarem"
     de um estado pro outro sem transição nenhuma. */
  .dust{ animation:none !important; }
  .door, .door-stage, .darken, .skull, .lose-details, .tagline, .btn, .door-spill, .counter{ transition-duration:.25s !important; }
}