/* Escena — full-bleed cinematográfico + bottom sheet, minimal y elegante */
:root{
  --bg:#050505; --panel:rgba(20,20,20,.72); --line:rgba(255,255,255,.09);
  --text:#f5f5f5; --muted:#9b9b9b; --accent:#3ddc68; --accent-ink:#052b12;
  --bad:#ff5c5c;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  overflow:hidden;}
#app{height:100dvh; display:flex; flex-direction:column;}
.screen{display:none; position:relative; flex:1; min-height:100dvh; overflow:hidden;}
.screen.active{display:flex; animation:screenIn .3s ease both;}
@keyframes screenIn{from{opacity:0;} to{opacity:1;}}

/* imagen full-bleed */
.img-frame{position:absolute; inset:0; overflow:hidden; background:#000;}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block; user-select:none;
  transition:opacity .3s ease; animation:kenburns 14s ease-in-out infinite alternate;}
@keyframes kenburns{from{transform:scale(1);} to{transform:scale(1.07);}}
.img-frame.shake img{animation:shakeImg .4s ease;}
@keyframes shakeImg{0%,100%{transform:translateX(0);}20%{transform:translateX(-10px);}40%{transform:translateX(9px);}60%{transform:translateX(-6px);}80%{transform:translateX(5px);}}
.img-frame.pop img{animation:popImg .45s ease;}
@keyframes popImg{0%{transform:scale(1);}40%{transform:scale(1.04);}100%{transform:scale(1);}}
.img-frame::after{content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.42), transparent 26%, transparent 55%, rgba(0,0,0,.88));}
.img-error{position:absolute; inset:0; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; background:rgba(5,5,5,.9); color:var(--muted); z-index:5;}
.img-error.hidden{display:none;}

/* topbar sobre la imagen */
.topbar{position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  gap:10px; padding:calc(10px + env(safe-area-inset-top)) 14px 8px;}
.icon-btn{background:rgba(15,15,15,.55); border:1px solid var(--line); color:var(--text);
  width:42px; height:42px; border-radius:50%; font-size:17px; cursor:pointer; backdrop-filter:blur(10px);}
.brand{font-weight:800; font-size:18px; letter-spacing:-.3px; flex:1; text-shadow:0 2px 12px rgba(0,0,0,.6);}
.brand.big{font-size:30px;}
.lives{font-size:15px; letter-spacing:2px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));}
.menu{position:absolute; top:calc(58px + env(safe-area-inset-top)); left:12px; z-index:60;
  background:rgba(18,18,18,.92); border:1px solid var(--line); border-radius:18px; padding:10px;
  width:min(300px,86vw); backdrop-filter:blur(16px); box-shadow:0 20px 50px rgba(0,0,0,.6);
  animation:menuIn .18s ease both;}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px) scale(.98);} to{opacity:1; transform:none;}}
.menu.hidden{display:none;}
.menu-item{display:block; width:100%; text-align:left; background:transparent; border:none;
  color:var(--text); font-size:15px; font-weight:600; padding:11px 12px; border-radius:10px; cursor:pointer;}
.menu-item:hover{background:rgba(255,255,255,.07);}
.menu-item span{display:block; font-size:12px; color:var(--muted); font-weight:400;}
.menu-filters{margin-top:8px; border-top:1px solid var(--line); padding-top:10px;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.chip{background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:6px 12px; font-size:12.5px; cursor:pointer;}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700;}
.select{width:100%; background:rgba(255,255,255,.08); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:9px; font-size:13px;}
.round-tag{position:absolute; top:calc(62px + env(safe-area-inset-top)); left:0; right:0; z-index:15;
  text-align:center; font-size:11.5px; color:rgba(255,255,255,.75); letter-spacing:1.6px; font-weight:600;
  text-shadow:0 2px 8px rgba(0,0,0,.7);}

/* bottom sheet */
.dock{position:absolute; left:0; right:0; bottom:0; z-index:20; padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, rgba(5,5,5,.82) 34%);}
.under-img{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.pill{background:rgba(20,20,20,.66); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
  backdrop-filter:blur(10px); transition:transform .08s ease;}
.pill:active{transform:scale(.93);}
.pill:disabled{opacity:.4; cursor:default;}
.img-count{font-size:12px; color:rgba(255,255,255,.65); flex:1; text-align:center;}
.hint-btns{display:flex; gap:6px;}
.hint-btn.used{color:var(--accent); border-color:var(--accent);}
.hint-out{min-height:20px; text-align:center; font-size:13.5px; color:var(--accent); margin-bottom:8px;
  text-shadow:0 2px 8px rgba(0,0,0,.8); animation:screenIn .25s ease both;}
.guess-row{display:flex; gap:8px;}
.input-wrap{position:relative; flex:1; display:flex; align-items:center;}
.mag{position:absolute; left:14px; display:flex;}
#guess-input{width:100%; background:rgba(20,20,20,.72); border:1px solid var(--line); border-radius:999px;
  color:var(--text); padding:14px 16px 14px 40px; font-size:16px; outline:none; backdrop-filter:blur(12px);
  transition:border-color .15s;}
#guess-input:focus{border-color:var(--accent);}
.send{width:50px; height:50px; flex:none; border:none; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .08s ease;
  box-shadow:0 6px 20px rgba(61,220,104,.35);}
.send:active{transform:scale(.88);}
.dock-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px; min-height:24px;}
.feedback{font-size:13.5px; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.8);}
.feedback.bad{color:var(--bad);} .feedback.good{color:var(--accent);}
.skip{background:transparent; border:none; color:rgba(255,255,255,.6); font-size:13px; font-weight:600; cursor:pointer; padding:6px 10px;}
.suggest{position:absolute; bottom:calc(100% + 8px); left:0; right:0; max-height:230px; overflow-y:auto;
  background:rgba(22,22,22,.95); border:1px solid var(--line); border-radius:16px; z-index:40;
  backdrop-filter:blur(16px); box-shadow:0 -10px 30px rgba(0,0,0,.6); animation:menuIn .15s ease both;}
.suggest.hidden{display:none;}
.suggest .opt{padding:13px 16px; font-size:15px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06);}
.suggest .opt:last-child{border-bottom:none;}
.suggest .opt.sel,.suggest .opt:hover{background:rgba(61,220,104,.16); color:var(--accent);}

/* botones */
.btn{background:rgba(255,255,255,.1); color:var(--text); border:1px solid var(--line); border-radius:999px;
  padding:14px 22px; font-size:15px; font-weight:700; cursor:pointer; width:100%; backdrop-filter:blur(10px);
  transition:transform .08s ease;}
.btn:active{transform:scale(.96);}
.btn.primary{background:var(--accent); border:none; color:var(--accent-ink); box-shadow:0 8px 26px rgba(61,220,104,.35);}
.btn.small{padding:8px 14px; font-size:13px; width:auto;}

/* reveal full-bleed */
#screen-reveal .reveal-img-frame{position:absolute; inset:0;}
#screen-reveal .reveal-img-frame::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.55);}
#screen-reveal .reveal-img-frame img{width:100%; height:100%; object-fit:cover; animation:kenburns 16s ease-in-out infinite alternate;}
.reveal-wrap{position:relative; z-index:2; margin:auto; width:min(430px,92vw); text-align:center; padding:20px 0 30px;}
.reveal-card{animation:cardUp .4s cubic-bezier(.2,1.2,.3,1) both;}
@keyframes cardUp{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}
.seal{display:inline-block; font-weight:800; letter-spacing:1.5px; padding:8px 18px; border-radius:999px;
  margin-bottom:12px; font-size:13px; background:rgba(5,5,5,.55); backdrop-filter:blur(8px);
  animation:sealIn .45s cubic-bezier(.2,1.6,.4,1) both .15s;}
@keyframes sealIn{from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);}}
.seal.win{color:var(--accent); border:1.5px solid var(--accent);}
.seal.lose{color:var(--bad); border:1.5px solid var(--bad);}
.reveal-wrap h2{font-size:30px; letter-spacing:-.6px; line-height:1.12; text-shadow:0 4px 24px rgba(0,0,0,.8);
  animation:cardUp .4s ease both .1s;}
.reveal-meta{color:rgba(255,255,255,.85); margin-top:8px; font-size:14.5px; text-shadow:0 2px 10px rgba(0,0,0,.8);}
.reveal-extra{color:rgba(255,255,255,.65); margin-top:3px; font-size:12.5px; text-shadow:0 2px 8px rgba(0,0,0,.8);}
.listen{display:inline-block; margin-top:14px; background:rgba(255,255,255,.12); border:1px solid var(--line);
  color:var(--text); text-decoration:none; border-radius:999px; padding:9px 18px; font-size:13.5px; font-weight:600;
  backdrop-filter:blur(8px);}
.reveal-actions{display:flex; flex-direction:column; gap:10px; margin-top:22px;}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:3;}

/* home mínimo */
#screen-home{background:var(--bg);}
.home-wrap{margin:auto; width:min(360px,90vw); text-align:center; display:flex; flex-direction:column; gap:12px;}
.home-note{color:var(--muted); font-size:13px;}

@media (min-width:768px){
  body{background:#000;}
  #app{align-items:center;}
  .screen{width:100%; max-width:480px; margin:0 auto; height:100dvh; flex:none;
    border-left:1px solid rgba(255,255,255,.08); border-right:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 80px rgba(0,0,0,.9);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}