* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --purple:#7b5cd6; --purple-dark:#5b3fb0; --green:#7ed957; --yellow:#ffd93b;
  --orange:#ff8c42; --ink:#26223a; --paper:#fffdf7;
}
html,body{ height:100%; }
body{
  font-family:'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
  background: linear-gradient(160deg,#8f6fe8 0%, #5b8def 55%, #42c1a8 100%);
  color:var(--ink); min-height:100vh; overflow-x:hidden;
}
#app{ min-height:100vh; display:flex; flex-direction:column; }

/* ---------- screens ---------- */
.screen{ display:none; flex:1; padding:10px; flex-direction:column; align-items:center; justify-content:flex-start; }
.screen.active{ display:flex; }

.card{
  background:var(--paper); border-radius:26px; padding:18px 28px; width:100%;
  max-width:700px; box-shadow:0 14px 0 rgba(0,0,0,.18), 0 22px 44px rgba(0,0,0,.25);
  margin:auto; border:4px solid var(--ink);
}
.card.wide{ max-width:1220px; }
.card-hero{ max-width:860px; }
/* llaves fijas arriba a la izquierda, durante todo el juego */
.keys-fixed{
  position:fixed; top:12px; left:12px; z-index:80;
  display:flex; flex-wrap:wrap; gap:6px; max-width:45vw;
}
.key-circle{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff8d6, #ffd93b 70%);
  border:2px solid #d4a017; display:flex; align-items:center; justify-content:center;
  font-size:1rem; box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.mute-btn{
  position:fixed; top:12px; right:12px; z-index:200; width:52px; height:52px;
  border-radius:50%; border:3px solid var(--ink); background:var(--yellow);
  font-size:1.4rem; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.register-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 34px; align-items:start; }
@media (max-width:760px){ .register-grid{ grid-template-columns:1fr; } }
h1.game-title{ font-size:2.6rem; text-align:center; color:var(--purple-dark); letter-spacing:1px; }
h2{ color:var(--purple-dark); margin-bottom:4px; }
h3{ color:var(--ink); }
.subtitle{ text-align:center; color:#666; margin:4px 0 8px; }
.screen:not(#screen-register) .subtitle, .card.wide .subtitle{ text-align:center; }

/* ---------- form ---------- */
.form-row{ margin:12px 0; }
.form-row label{ display:block; font-weight:700; margin-bottom:6px; }
.form-row input{
  width:100%; padding:12px 14px; border:3px solid var(--ink); border-radius:14px;
  font-family:inherit; font-size:1.05rem; background:#fff;
}
.form-row input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 4px rgba(123,92,214,.25); }
.section-picker{ display:flex; gap:12px; }
.sec-btn{
  flex:1; padding:12px; border:3px solid var(--ink); border-radius:14px;
  font-family:inherit; font-size:1.05rem; font-weight:700; cursor:pointer;
  transition:transform .1s, box-shadow .1s;
}
.sec-btn[data-sec="A"]{ background:#ffd6e7; }
.sec-btn[data-sec="B"]{ background:#c9f2ee; }
.sec-btn:hover{ transform:translateY(-2px); }
.sec-btn[data-sec="A"].selected{ background:#ff7ab0; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.25), 0 0 14px rgba(255,122,176,.7); }
.sec-btn[data-sec="B"].selected{ background:#26c6b6; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.25), 0 0 14px rgba(38,198,182,.7); }

.avatar-grid{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.avatar-opt{
  width:96px; border:none; background:transparent;
  cursor:pointer; padding:4px; text-align:center; transition:transform .1s;
}
.avatar-opt img{
  width:78px; height:78px; object-fit:cover; display:block; margin:0 auto;
  border-radius:50%; border:3px solid var(--ink); background:#fff;
}
.avatar-opt span{ font-size:.72rem; font-weight:700; display:block; line-height:1.05; margin-top:3px; }
.avatar-opt.selected img{ border-color:var(--purple-dark); box-shadow:0 0 0 4px var(--green); transform:scale(1.08); }
.avatar-opt.selected{ transform:scale(1.05); }

.error-text{ color:#c62828; font-weight:700; min-height:1.2em; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  font-family:inherit; font-weight:800; font-size:1.05rem; border:3px solid var(--ink);
  border-radius:16px; padding:12px 22px; cursor:pointer; background:#fff; color:var(--ink);
  box-shadow:0 5px 0 rgba(0,0,0,.25); transition:transform .08s, box-shadow .08s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.btn-primary{ background:var(--yellow); }
.btn-warn{ background:var(--orange); color:#fff; }
.btn-ghost{ background:#eee; }
.btn.big{ display:block; width:100%; font-size:1.25rem; padding:15px; margin-top:10px; }
/* botón luminoso para acciones principales */
.btn-glow{
  background:linear-gradient(135deg,#ffe259,#ffa751);
  text-transform:uppercase; letter-spacing:1px;
  animation:glowPulse 1.6s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ box-shadow:0 5px 0 rgba(0,0,0,.25), 0 0 10px rgba(255,190,40,.55); }
  50%{ box-shadow:0 5px 0 rgba(0,0,0,.25), 0 0 34px rgba(255,200,40,.95), 0 0 64px rgba(255,150,0,.45); }
}
.btn-row{ display:flex; gap:12px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.hidden{ display:none !important; }

/* ---------- portada ---------- */
.screen-cover{
  padding:0; justify-content:center; align-items:center;
  background:#0b0620; cursor:pointer;
  position:fixed; inset:0; z-index:60; overflow:hidden;
}
.cover-img{
  width:100%; height:100%; object-fit:contain; display:block;
  animation:coverIn 1.2s ease;
}
@keyframes coverIn{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }
.cover-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  background:rgba(20,10,40,.72); color:#fff3b0; font-weight:800;
  font-size:1.15rem; padding:12px 26px; border-radius:999px;
  border:2px solid rgba(255,240,160,.55); letter-spacing:.5px;
  animation:hintPulse 1.6s ease-in-out infinite; backdrop-filter:blur(4px);
  white-space:nowrap;
}
@keyframes hintPulse{
  0%,100%{ transform:translateX(-50%) scale(1); box-shadow:0 0 0 rgba(255,217,59,0); }
  50%{ transform:translateX(-50%) scale(1.06); box-shadow:0 0 26px rgba(255,217,59,.75); }
}
.title-logo{
  display:block; margin:0 auto; width:min(430px, 82%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
}

/* ---------- rules ---------- */
.rules-list{ list-style:none; margin:14px 0; }
.rules-list li{ margin:10px 0; font-size:1.02rem; line-height:1.35; }
#screen-rules{ justify-content:center; }
#screen-rules .title-logo{ width:min(280px, 62%); margin:-6px auto -8px; }
#screen-rules .subtitle{ margin:0 0 6px; }
#screen-rules .rules-hero{ padding:10px 24px 14px; }
#screen-rules .rules-grid{ gap:12px; margin:8px 0 6px; }
#screen-rules .rule-tile{ padding:10px 12px; }
#screen-rules .rule-icon{ font-size:2rem; margin-bottom:4px; }
#screen-rules .credits{ margin:8px 0 0; }
#screen-rules .mascot{ width:270px; }
.rules-layout{
  display:flex; align-items:center; gap:6px; width:100%;
  max-width:1280px; justify-content:center; margin:auto 0;
}
.mascot{
  width:340px; flex-shrink:0; align-self:flex-end;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(255,235,140,.55));
  animation:mascotFloat 3.2s ease-in-out infinite;
}
@keyframes mascotFloat{
  0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); }
}
.rules-hero{ max-width:920px; flex:1; }
.glow-frame{
  border-color:#ffd93b;
  box-shadow:0 0 0 3px #fff3b0, 0 0 34px 6px rgba(255,217,59,.55),
             0 0 90px 18px rgba(255,150,0,.28), 0 14px 34px rgba(0,0,0,.3);
  animation:frameGlow 2.6s ease-in-out infinite;
}
@keyframes frameGlow{
  0%,100%{ box-shadow:0 0 0 3px #fff3b0, 0 0 30px 4px rgba(255,217,59,.45), 0 0 80px 14px rgba(255,150,0,.22), 0 14px 34px rgba(0,0,0,.3); }
  50%{ box-shadow:0 0 0 3px #fff9d6, 0 0 52px 10px rgba(255,217,59,.7), 0 0 120px 26px rgba(255,150,0,.38), 0 14px 34px rgba(0,0,0,.3); }
}
.game-title-xl{ font-size:4.2rem; letter-spacing:2px; text-shadow:0 4px 0 rgba(0,0,0,.12); }
.credits{ text-align:center; color:#7a6a9b; font-size:.82rem; margin:12px 0 0; font-weight:600; }
@media (max-width:900px){
  .rules-layout{ flex-direction:column; }
  .mascot{ width:190px; align-self:center; }
  .game-title-xl{ font-size:2.6rem; }
}
.rules-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0 8px;
}
.rule-tile{
  background:#f6f3ff; border:3px solid var(--ink); border-radius:18px;
  padding:16px 14px; text-align:center; box-shadow:0 4px 0 rgba(0,0,0,.12);
}
.rule-tile:nth-child(3n+1){ background:#ffeef5; }
.rule-tile:nth-child(3n+2){ background:#eef7ff; }
.rule-tile:nth-child(3n){ background:#f0fbf0; }
.rule-icon{ font-size:2.6rem; line-height:1; margin-bottom:8px; }
.rule-tile h3{ font-size:1.08rem; margin-bottom:5px; color:var(--purple-dark); }
.rule-tile p{ font-size:.92rem; line-height:1.3; color:#4a4560; }
@media (max-width:900px){ .rules-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .rules-grid{ grid-template-columns:1fr; } }

/* ---------- countdown ---------- */
.countdown-wrap{ margin:auto; text-align:center; }
.countdown-question{ font-size:1.6rem; font-weight:800; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.3); margin-bottom:14px; }
.countdown-num{
  font-size:7rem; font-weight:800; color:var(--yellow);
  text-shadow:0 8px 0 rgba(0,0,0,.3); animation:pop .7s ease;
}
@keyframes pop{ 0%{transform:scale(.2);opacity:0} 60%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }

/* ---------- catch ---------- */
#screen-catch{ padding:0; justify-content:flex-start; }
.hud{ display:flex; gap:10px; padding:10px 14px; width:100%; justify-content:center; }
.hud-chip{
  background:var(--paper); border:3px solid var(--ink); border-radius:14px;
  padding:6px 16px; font-weight:800; font-size:1.05rem;
}
#field{
  position:relative; flex:1; width:100%; overflow:hidden;
  background:linear-gradient(180deg,#a8e063 0%, #dcf5b6 70%, #b8e986 100%);
  border-top:4px solid var(--ink); border-bottom:4px solid var(--ink);
}
#player{ position:absolute; bottom:4px; left:0; width:120px; will-change:transform; }
#player img{ width:100%; display:block; user-select:none; -webkit-user-drag:none; }
.countdown-avatar{ width:120px; height:120px; object-fit:cover; display:block; margin:0 auto 10px;
  background:#fff; border-radius:50%; border:4px solid var(--yellow); }
.timebar{ width:100%; height:10px; background:rgba(0,0,0,.18); border-bottom:3px solid var(--ink); }
#timebar-fill{ height:100%; width:100%; background:linear-gradient(90deg,#7ed957,#ffd93b,#ff8c42);
  transition:width .25s linear; }
.catch-pop{
  position:absolute; font-size:1.4rem; font-weight:800; color:#2e7d32; z-index:60;
  text-shadow:0 2px 0 #fff; animation:penaltyUp .8s ease forwards; pointer-events:none;
}

.ball{
  position:absolute; width:132px; display:flex; flex-direction:column; align-items:center;
  will-change:transform; pointer-events:none;
}
.ball .orb-img{
  width:88px; height:80px; object-fit:contain;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.3));
  user-select:none;
}
.ball .ball-label{
  margin-top:4px; font-size:.92rem; font-weight:800; text-align:center; line-height:1.05;
  background:rgba(255,255,255,.95); border:3px solid var(--ink); border-radius:10px; padding:3px 7px;
  max-width:128px;
}
.overlay{
  position:fixed; inset:0; background:rgba(20,10,50,.55); z-index:300;
  display:flex; align-items:center; justify-content:center;
}
.overlay-card{
  background:var(--paper); border:4px solid var(--ink); border-radius:24px;
  padding:30px 40px; max-width:440px; text-align:center;
  box-shadow:0 14px 0 rgba(0,0,0,.2);
}
.overlay-text{ font-size:1.15rem; margin:10px 0 4px; }
.keys-msg{ text-align:center; font-weight:800; color:#b8860b; min-height:1.3em; margin-top:8px; font-size:1.1rem; }

.level-banner{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
  background:var(--yellow); border:4px solid var(--ink); border-radius:20px;
  padding:18px 42px; font-size:2rem; font-weight:800; z-index:50;
  box-shadow:0 10px 0 rgba(0,0,0,.25);
}
.penalty{
  position:absolute; top:20%; left:50%; transform:translateX(-50%);
  font-size:3rem; font-weight:800; color:#e53935; z-index:60;
  text-shadow:0 3px 0 #fff; animation:penaltyUp .9s ease forwards;
}
@keyframes penaltyUp{ to{ transform:translate(-50%,-60px); opacity:0 } }

.catch-controls{
  display:flex; width:100%; align-items:center; gap:10px; padding:10px 14px;
  background:rgba(0,0,0,.18);
}
.btn.ctrl{ flex:0 0 110px; font-size:2rem; padding:14px 0; user-select:none; touch-action:none; }
.ctrl-hint{ flex:1; text-align:center; color:#fff; font-weight:800; font-size:1.3rem;
  text-shadow:0 2px 0 rgba(0,0,0,.35); }
.ctrl-hint{ font-size:1.45rem; }
.ctrl-hint b{ background:var(--yellow); color:var(--ink); padding:4px 18px; border-radius:14px;
  border:3px solid var(--ink); display:inline-block; text-transform:uppercase; letter-spacing:.5px;
  font-size:1.35rem; }

/* ---------- build ---------- */
.build-card{ max-width:1280px; }
.build-wrap{ display:flex; gap:22px; align-items:flex-start; justify-content:center; }
.diagram-panel{ flex:1 1 auto; min-width:0; text-align:center; }
.cell-title{
  font-size:2rem; font-weight:800; color:var(--purple-dark); letter-spacing:.5px;
  margin-bottom:8px; text-shadow:0 2px 0 #ffd93b;
}
.cell-diagram{
  position:relative; width:100%; height:min(56vh, 560px); min-height:400px;
  container-type:inline-size;
}
#cell-img-wrap{
  position:absolute; left:13%; right:13%; top:9%; bottom:9%;
  display:flex; align-items:center; justify-content:center;
}
#cell-img-wrap img{
  max-width:100%; max-height:100%; display:block;
}
#cell-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.leader{ stroke:var(--ink); stroke-width:2.5; fill:none; opacity:.85; }
.leader-dot{ fill:var(--ink); }
.leader-arrow{ fill:var(--ink); }
.dropbox{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; z-index:3;
}
.dropbox .db-circle{
  width:clamp(30px, 4.2cqw, 46px); aspect-ratio:1; border-radius:50%;
  border:3px dashed rgba(38,34,58,.85); background:rgba(255,238,140,.9);
  display:flex; align-items:center; justify-content:center;
}
.dropbox .db-q{ font-size:clamp(12px, 2.2cqw, 19px); font-weight:800; color:rgba(38,34,58,.55); }
.dropbox:hover .db-circle{ background:rgba(255,245,170,.98); box-shadow:0 0 0 3px rgba(255,209,59,.9); transform:scale(1.1); }
.dropbox .db-tag{
  max-width:150px; padding:3px 8px; border-radius:10px;
  border:3px solid var(--ink); background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.25);
  font-weight:800; font-size:clamp(9px, 1.7cqw, 13px); line-height:1.05; text-align:center;
}
.dropbox.tag-above{ flex-direction:column-reverse; }
.dropbox.filled .db-circle{ border-style:solid; border-color:var(--ink); background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.25); }
.dropbox.bad .db-circle{ border-color:#e53935; background:#ffcdd2; animation:shake .4s; }
.dropbox.bad .db-tag{ border-color:#e53935; background:#ffcdd2; }
.tray-col{ flex:1 1 300px; min-width:250px; }
.cell-msg{ min-height:1.3em; font-weight:800; margin-top:4px; font-size:1.05rem; }
.cell-msg.ok{ color:#2e7d32; }
.cell-msg.bad{ color:#c62828; }

.tray-title{ text-align:center; margin:0 0 8px; font-size:1.25rem; }
.tray{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  min-height:100px; max-height:56vh; overflow-y:auto;
  background:#f4f0e6; border:3px dashed var(--ink); border-radius:18px; padding:10px;
}
.chip{
  display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:14px;
  border:3px solid var(--ink); background:#fff; cursor:pointer; font-weight:800; font-size:.95rem;
}
.chip .chip-img{ width:30px; height:30px; object-fit:contain; flex:none; }
.chip-base{ background:#e3f2fd; border-color:#5b8def; }   /* siempre disponibles */
.chip.selected{ background:var(--yellow); transform:scale(1.05); box-shadow:0 4px 0 rgba(0,0,0,.2); }
.chip.empty{ opacity:.35; cursor:default; }

/* ---------- match ---------- */
.match-score{ text-align:center; font-size:1.1rem; margin-bottom:10px; }
.match-wrap{ display:flex; gap:14px; }
.match-col{ flex:1; display:flex; flex-direction:column; gap:8px; }
.match-item{
  border:3px solid var(--ink); border-radius:12px; padding:11px 14px; background:#fff;
  cursor:pointer; font-weight:700; font-size:1rem; line-height:1.15;
  transition:background .15s;
}
.match-item.fn{ font-weight:600; background:#f0f4ff; }
.match-item.selected{ outline:4px solid var(--ink); outline-offset:-1px; }
.match-item.done{ cursor:default; }
.match-item.wrong{ animation:shake .4s; background:#ffcdd2; }
.match-item.revealed{ background:#ffe0b2; border-color:#e65100; cursor:default; opacity:.8; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ---------- roulette ---------- */
.roulette-wrap{ display:flex; gap:30px; align-items:center; justify-content:center; flex-wrap:wrap; margin:18px 0; }
.roulette-box{ position:relative; padding-top:14px; }
.roulette-pointer{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-size:2rem; color:#ff2d55; z-index:3;
  text-shadow:0 2px 4px rgba(0,0,0,.4);
}
.roulette{
  width:280px; height:280px; border-radius:50%; position:relative;
  border:7px solid #ffd93b;
  box-shadow:0 0 0 5px #3d2a8c, 0 14px 34px rgba(0,0,0,.35), inset 0 0 30px rgba(0,0,0,.25);
  transition:transform 3.6s cubic-bezier(.12,.75,.2,1);
}
.roulette::after{
  content:''; position:absolute; inset:38%; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #ffd93b 60%, #e0a800);
  border:4px solid #3d2a8c;
}
.rou-seg{
  position:absolute; left:50%; top:50%; transform-origin:0 0;
  font-weight:800; color:#fff; font-size:1rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.rou-seg.used{ color:rgba(255,255,255,.28); text-decoration:line-through; }
.roulette-side{ display:flex; flex-direction:column; align-items:center; gap:14px; min-width:280px; max-width:420px; }
.rou-card{
  background:#f3eefe; border:3px solid var(--purple); border-radius:16px;
  padding:14px 18px; width:100%; text-align:center;
}
.rou-num{ font-weight:800; font-size:1.4rem; color:var(--purple-dark); }
.rou-fn{ font-size:1.05rem; font-weight:600; margin:6px 0 10px; color:#333; }
.rou-answer{ display:flex; gap:8px; }
.rou-answer input{
  flex:1; padding:10px 12px; border:2px solid #b39ddb; border-radius:12px;
  font-size:1rem; font-family:inherit;
}
.rou-answer input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,77,255,.25); }
.rou-msg{ min-height:1.3em; font-weight:700; margin-top:8px; }
.rou-msg.ok{ color:#1b8a3e; }
.rou-msg.bad{ color:#c62828; }
.rou-msg.warn{ color:#e65100; }
/* en la ruleta no se puede seleccionar/copiar la consigna */
#screen-match{ user-select:none; -webkit-user-select:none; }
#screen-match input{ user-select:text; -webkit-user-select:text; }
.rou-card.answered{ border-color:#ffd93b; box-shadow:0 0 14px rgba(255,217,59,.7); }

/* ---------- doors ---------- */
.keys-icons{ font-size:1.35rem; min-height:1.6rem; letter-spacing:3px; margin:0 0 2px; }
.doors-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px 12px; max-width:640px; margin:0 auto;
}
.door{
  aspect-ratio:3/4.1; position:relative; border:none; background:transparent;
  perspective:650px; cursor:pointer; font-family:inherit; padding:0;
  animation:doorIn .45s cubic-bezier(.3,1.4,.5,1) backwards;
}
@keyframes doorIn{ from{ transform:scale(.4) translateY(36px); opacity:0; } }
/* el cuarto detrás de la puerta */
.door-inside{
  position:absolute; inset:0; border-radius:16px 16px 8px 8px; overflow:hidden;
  border:4px solid #3a2410;
  background:radial-gradient(circle at 50% 38%, #41305f, #150d24 78%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.door-inside .in-avatar{
  width:84%; aspect-ratio:1; object-fit:cover; border-radius:50%;
  border:3px solid rgba(0,0,0,.4); box-shadow:0 3px 8px rgba(0,0,0,.45);
  animation:inPop .45s cubic-bezier(.3,1.4,.5,1);
}
@keyframes inPop{ from{ transform:scale(.3); opacity:0; } }
.door-inside.exit{
  background:radial-gradient(circle at 50% 42%, #fffde7, #ffd93b 55%, #ff9d00);
  animation:exitGlow .9s ease-in-out infinite alternate;
}
.door-inside.exit .in-avatar{ border-color:#fff3b0; box-shadow:0 0 22px #fff3b0; }
@keyframes exitGlow{
  from{ box-shadow:inset 0 0 20px #fff3b0, 0 0 4px #ffd93b; }
  to{ box-shadow:inset 0 0 46px #ffffff, 0 0 30px #ffd93b; }
}
/* hoja de la puerta con bisagra */
.door-panel{
  position:absolute; inset:0; border-radius:16px 16px 8px 8px;
  border:4px solid #4a2c0e;
  background:
    repeating-linear-gradient(90deg, transparent 0 21%, rgba(0,0,0,.16) 21% 23%),
    linear-gradient(160deg,#d59a54,#96622a 58%,#6e4418);
  box-shadow:0 6px 0 rgba(0,0,0,.25);
  transform-origin:left center;
  transition:transform .7s cubic-bezier(.68,-0.15,.3,1.02), filter .2s;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
}
.door.flip .door-panel{ transform-origin:right center; }
.door-num{
  background:linear-gradient(#ffe082,#ffb300); border:3px solid #4a2c0e; border-radius:10px;
  padding:1px 10px; font-size:1.15rem; font-weight:900; color:#4a2c0e;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.door-knob{
  position:absolute; right:8px; top:54%; width:12px; height:12px;
  background:radial-gradient(circle at 35% 30%, #ffe082, #b8860b);
  border-radius:50%; border:2px solid #4a2c0e;
}
.door.flip .door-knob{ right:auto; left:8px; }
/* aperturas que alternan el lado de la bisagra */
.door.open .door-panel{ transform:rotateY(-112deg); }
.door.flip.open .door-panel{ transform:rotateY(112deg); }
.door.open{ cursor:default; }
/* asomarse al pasar el mouse */
.door:not(.open):not(.locked):hover .door-panel{ transform:rotateY(-16deg); }
.door.flip:not(.open):not(.locked):hover .door-panel{ transform:rotateY(16deg); }
/* sin llaves */
.door.locked{ cursor:not-allowed; }
.door.locked .door-panel{ filter:saturate(.35) brightness(.72); }
.door.locked::after{
  content:'🔒'; position:absolute; top:6px; right:6px; font-size:.95rem; z-index:2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.door.shake{ animation:doorShake .4s; }
@keyframes doorShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 45%{transform:translateX(6px)} 70%{transform:translateX(-4px)} 90%{transform:translateX(3px)} }

/* confeti al encontrar la salida */
.confetti{
  position:fixed; top:-16px; width:11px; height:16px; z-index:300; pointer-events:none;
  animation:confFall 2.4s cubic-bezier(.3,.6,.6,1) forwards;
}
@keyframes confFall{ to{ transform:translateY(110vh) rotate(700deg); opacity:.85; } }

/* transición de pantallas */
.screen.active{ animation:screenIn .35s ease; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(14px); } }

/* llaves en el HUD de captura */
.hud-pips{ letter-spacing:2px; font-size:.8rem; color:#ffd93b; }
#btn-back-keys:not(.hidden){ animation:pulseBtn 1.4s infinite; }
@keyframes pulseBtn{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); box-shadow:0 0 22px rgba(255,109,0,.8); } }

/* ---------- final ---------- */
.final-code-wrap{ margin:10px 0 2px; text-align:center; font-weight:700; color:#5d3fb0; font-size:1.05rem; }
.final-code{ display:inline-block; margin-top:6px; padding:10px 26px; border-radius:16px;
  background:linear-gradient(135deg,#ffd93b,#ffb800); color:#5a3d00; font-size:1.8rem; font-weight:800;
  letter-spacing:2px; box-shadow:0 0 18px rgba(255,190,30,.65); }
.final-summary{ margin:12px 0; text-align:center; }
.final-summary img{ width:110px; height:110px; object-fit:cover; border-radius:50%; border:4px solid var(--purple); }
.final-summary table{ margin:10px auto 0; border-collapse:collapse; font-size:.98rem; }
.final-summary td{ padding:4px 12px; border-bottom:1px solid #e0dccc; text-align:left; }
.final-summary td:first-child{ font-weight:700; }

/* ---------- bonus monedas ---------- */
.bonus-info{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 4px; }
.b-chip{ display:inline-flex; align-items:center; gap:5px; background:#fff; border:2px solid #d9d3b8; border-radius:999px; padding:3px 10px 3px 4px; font-size:.8rem; font-weight:700; color:#7a6f4a; opacity:.55; transition:all .25s; }
.b-chip img{ width:26px; height:26px; border-radius:50%; }
.b-chip.lit{ opacity:1; border-color:var(--purple); color:#4a3f1f; }
.bonus-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:720px; margin:10px auto 4px; }
.bonus-coin{ aspect-ratio:1; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:radial-gradient(circle at 32% 28%, #fff3b0 0%, #ffd93b 45%, #f0a500 78%, #c47f00 100%);
  box-shadow:0 5px 0 #8a5d00, 0 8px 14px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center; transition:transform .18s; }
.bonus-coin .bc-q{ font-size:clamp(1.4rem,3.2vw,2.1rem); font-weight:900; color:#8a5d00; text-shadow:0 1px 0 #fff6c8; }
.bonus-coin:hover:not(.open){ transform:translateY(-5px) scale(1.04); }
.bonus-coin.open{ background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); cursor:default; padding:5px; animation:coinPop .35s; }
.bonus-coin.open img{ width:100%; height:100%; object-fit:contain; }
.bonus-coin.is-mito{ outline:4px solid #00c853; outline-offset:2px; box-shadow:0 0 18px #00c853; }
.bonus-coin.ghost{ opacity:.5; }
@keyframes coinPop{ 0%{ transform:scale(.6) } 60%{ transform:scale(1.12) } 100%{ transform:scale(1) } }
@media (max-width:760px){ .bonus-grid{ grid-template-columns:repeat(5,1fr); gap:8px; } }

/* ---------- print ---------- */
.print-only{ display:none; }
@media print{
  body{ background:#fff; }
  #app .screen{ display:none !important; }
  .print-only{ display:block; font-family:Arial,sans-serif; color:#000; padding:20px; }
  .print-only h1{ font-size:20px; }
  .print-only table{ border-collapse:collapse; margin-top:10px; width:100%; }
  .print-only td,.print-only th{ border:1px solid #999; padding:6px 10px; font-size:13px; text-align:left; }
}

@media (max-width:760px){
  .match-wrap{ flex-direction:column; }
  .doors-grid{ grid-template-columns:repeat(3,1fr); }
  .ctrl-hint{ font-size:1rem; }
  .build-wrap{ flex-direction:column; align-items:center; }
  .cell-diagram{ width:100%; height:min(60vh, 560px); }
  .tray-col{ width:100%; }
  .btn.ctrl{ flex:0 0 84px; font-size:1.6rem; }
}