/* Palabritas Palabrotas — Millo Games */
:root{
  --bg:#0d0524;--bg2:#1a0840;--ink:#120026;--txt:#f4efff;--muted:#bfb3e6;
  --cyan:#29e7ff;--pink:#ff3ea5;--purple:#7b2ff7;--yellow:#ffd23f;--green:#3dff8b;--orange:#ff7a18;--blue:#3aa7ff;
  --c-ok:var(--green);--c-ok-t:#06210f;--c-pr:var(--yellow);--c-pr-t:#2a2000;--c-ab:#3b2d6b;--c-ab-t:#e9e2ff;
  --tile-line:#4a3a86;--ts:56px;--gap:6px;--kh:52px;
  --font:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  --display:"Arial Black","Segoe UI Black","Helvetica Neue",Impact,system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);
}
body.cb{--c-ok:var(--orange);--c-ok-t:#1c0b00;--c-pr:var(--blue);--c-pr-t:#00142a;}
body.hc{--bg:#000;--bg2:#000;--txt:#fff;--muted:#fff;--c-ab:#222;--c-ab-t:#fff;--tile-line:#fff;--c-ok:#00e676;--c-pr:#ffeb3b;}
body.hc.cb{--c-ok:#ff8f00;--c-pr:#4db6ff;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--font);overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
/* fondo neón */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--bg2),var(--bg) 60%)}
.bg .grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:70%;background:linear-gradient(var(--purple) 1px,transparent 1px) 0 0/60px 60px,linear-gradient(90deg,var(--purple) 1px,transparent 1px) 0 0/60px 60px;opacity:.22;transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%)}
.bg .glow{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.28}
.g1{left:-18vmax;top:-18vmax;background:var(--pink)}.g2{right:-20vmax;bottom:-22vmax;background:var(--cyan)}
body.hc .bg .glow,body.hc .bg .grid{display:none}
#bubbles{position:absolute;inset:0;pointer-events:none}
.bub{position:absolute;bottom:-40px;border-radius:50%;border:2px solid currentColor;opacity:.0;animation:rise linear forwards;box-shadow:0 0 12px currentColor inset}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:.0}10%{opacity:.8}100%{transform:translateY(-110vh) scale(1.1);opacity:0}}
/* layout */
.app{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;padding:calc(var(--sat) + 6px) calc(var(--sar) + 10px) calc(var(--sab) + 6px) calc(var(--sal) + 10px);gap:6px;min-height:0}
.top{width:100%;max-width:980px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.logo{width:34px;height:30px;flex:0 0 auto;filter:drop-shadow(0 0 6px var(--pink))}
h1{margin:0;font-family:var(--display);font-size:clamp(.95rem,3.4vw,1.6rem);line-height:1;letter-spacing:-.3px;text-transform:uppercase;white-space:nowrap}
.t1{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}.t2{color:var(--pink);text-shadow:0 0 10px var(--pink)}
body.hc .t1,body.hc .t2{text-shadow:none}
.tools{display:flex;gap:6px;flex:0 0 auto}
.ib{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:2px solid var(--tile-line);background:rgba(18,0,38,.7);font-family:var(--display);font-size:1.15rem;color:var(--cyan);transition:transform .12s,box-shadow .2s,border-color .2s}
.ib svg{width:22px;height:22px;fill:currentColor}
.ib:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(41,231,255,.5)}
.ib:active{transform:scale(.92)}
.ib[aria-pressed=true]{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
#bSound[aria-pressed=true]{background:rgba(18,0,38,.7);color:var(--pink);border-color:var(--pink)}
.modes{width:100%;max-width:980px;display:flex;gap:6px;align-items:center;flex:0 0 auto;flex-wrap:wrap}
.modes button[role=tab]{padding:7px 12px;border-radius:999px;border:2px solid var(--tile-line);background:transparent;font-weight:700;font-size:.85rem;color:var(--muted)}
.modes button[aria-selected=true]{border-color:var(--pink);color:#fff;background:rgba(255,62,165,.18);box-shadow:0 0 12px rgba(255,62,165,.45)}
body.hc .modes button[aria-selected=true]{background:#fff;color:#000;box-shadow:none}
.modes small{opacity:.8;font-weight:400}
.streak{margin-left:auto;padding:6px 12px;border-radius:999px;background:rgba(255,210,63,.14);border:2px solid var(--yellow);color:var(--yellow);font-size:.85rem;font-weight:700;white-space:nowrap}
.streak b{font-family:var(--display);font-size:1.05rem}
.stage{flex:1 1 auto;min-height:0;width:100%;max-width:1400px;display:flex;flex-direction:column;align-items:center;gap:8px}
.boardwrap{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.board{display:grid;grid-template-rows:repeat(6,var(--ts));gap:var(--gap)}
.row-b{display:grid;grid-template-columns:repeat(5,var(--ts));gap:var(--gap)}
.tile{position:relative;width:var(--ts);height:var(--ts);display:grid;place-items:center;border:2px solid var(--tile-line);border-radius:10px;background:rgba(18,0,38,.55);font-family:var(--display);font-size:calc(var(--ts)*.56);line-height:1;text-transform:uppercase;user-select:none;transform-style:preserve-3d}
.tile.fill{border-color:var(--cyan);box-shadow:0 0 10px rgba(41,231,255,.45);animation:pop .12s ease-out}
.tile.ok,.tile.pr,.tile.ab{border-color:transparent;box-shadow:none}
.tile.ok{background:var(--c-ok);color:var(--c-ok-t);box-shadow:0 0 14px color-mix(in srgb,var(--c-ok) 55%,transparent)}
.tile.pr{background:var(--c-pr);color:var(--c-pr-t);box-shadow:0 0 14px color-mix(in srgb,var(--c-pr) 50%,transparent)}
.tile.ab{background:var(--c-ab);color:var(--c-ab-t)}
body.cb .tile.ok::after,body.cb .tile.pr::after{position:absolute;top:3px;right:6px;font-size:calc(var(--ts)*.22);font-family:var(--font)}
body.cb .tile.ok::after{content:"●"}body.cb .tile.pr::after{content:"◆"}
.tile.flipA{animation:flipA .25s ease-in both}.tile.flipB{animation:flipB .27s ease-out both}
.row-b.shake{animation:shake .45s}
.tile.bounce{animation:bounce .7s ease both}
@keyframes pop{50%{transform:scale(1.12)}}
@keyframes flipA{to{transform:rotateX(90deg)}}@keyframes flipB{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-16px)}60%{transform:translateY(4px)}80%{transform:translateY(-6px)}100%{transform:translateY(0)}}
body.rm *{animation-duration:.001s!important;animation-delay:0s!important;transition:none!important}
body.rm .bub{display:none}
@media (prefers-reduced-motion:reduce){.bub{display:none}}
/* teclado */
.kbwrap{flex:0 0 auto;width:100%;display:flex;justify-content:center}
.kb{width:100%;max-width:560px;display:flex;flex-direction:column;gap:6px}
.kr{display:flex;gap:5px;justify-content:center;touch-action:manipulation}
.key{flex:1 1 0;min-width:0;height:var(--kh);border-radius:9px;border:0;background:#2b1f55;color:#fff;font-family:var(--display);font-size:clamp(.8rem,calc(var(--kh)*.36),1.25rem);text-transform:uppercase;box-shadow:0 3px 0 #120026,0 0 0 1px rgba(255,255,255,.07) inset;padding:0;transition:transform .06s,background .2s}
.key:active{transform:translateY(2px);box-shadow:0 1px 0 #120026}
.key.wide{flex:1.55 1 0;font-size:clamp(.62rem,calc(var(--kh)*.26),.9rem)}
.key.ok{background:var(--c-ok);color:var(--c-ok-t)}.key.pr{background:var(--c-pr);color:var(--c-pr-t)}.key.ab{background:#150a30;color:#6e5fa3}
body.hc .key{background:#333}body.hc .key.ab{background:#000;color:#888;outline:1px solid #555}
.key.half{flex:.5 1 0;visibility:hidden}
/* toast */
.toast{position:fixed;left:50%;top:calc(var(--sat) + 74px);transform:translate(-50%,-10px);background:#fff;color:var(--ink);font-weight:700;padding:10px 16px;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 3px var(--pink);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30;max-width:min(92vw,520px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* modales */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(5,0,15,.72);backdrop-filter:blur(4px);padding:calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px)}
.modal[hidden]{display:none}
.card{position:relative;width:min(100%,520px);max-height:100%;overflow:auto;background:linear-gradient(160deg,#1a0840,#120026);border:2px solid var(--pink);border-radius:18px;padding:18px 18px 16px;box-shadow:0 0 28px rgba(255,62,165,.4),0 18px 50px rgba(0,0,0,.6);animation:cardin .2s ease-out}
body.hc .card{border-color:#fff;background:#000;box-shadow:none}
@keyframes cardin{from{transform:translateY(14px) scale(.97);opacity:0}}
.card h2{font-family:var(--display);margin:0 28px 10px 0;font-size:1.45rem;color:var(--yellow);text-shadow:2px 2px 0 var(--ink)}
.card h3{font-family:var(--display);font-size:.95rem;color:var(--cyan);margin:14px 0 6px}
.card p{line-height:1.4;margin:.4em 0}
.lead{font-size:1.05rem;font-weight:700}
.note{color:var(--muted);font-size:.85rem}
.note a{color:var(--cyan)}
.x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:10px;border:2px solid var(--tile-line);background:transparent;font-size:1rem}
.row{display:flex;gap:8px;justify-content:space-between;margin-top:12px}.row.wrap{flex-wrap:wrap;justify-content:center}
.btn{padding:11px 16px;border-radius:12px;border:2px solid var(--cyan);background:var(--cyan);color:var(--ink);font-family:var(--display);font-size:.85rem;text-transform:uppercase;letter-spacing:.4px;box-shadow:0 0 14px rgba(41,231,255,.45);min-height:44px}
.btn.alt{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 14px rgba(255,62,165,.5)}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--tile-line);box-shadow:none}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5}
.chk,.sw{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:.95rem}
.chk input,.sw input{width:22px;height:22px;accent-color:var(--pink);flex:0 0 auto}
.sw{padding:10px 12px;border:2px solid var(--tile-line);border-radius:12px}
.dots{display:flex;gap:6px;justify-content:center;margin:8px 0}.dots i{width:9px;height:9px;border-radius:50%;background:var(--tile-line)}.dots i.on{background:var(--pink);box-shadow:0 0 8px var(--pink)}
.ex{display:flex;gap:4px;margin:8px 0}.ex .tile{--ts:38px;font-size:20px}
.answer{font-family:var(--display);font-size:2rem;letter-spacing:4px;text-align:center;color:var(--green);text-shadow:0 0 14px var(--green);text-transform:uppercase;margin:6px 0}
.answer.lose{color:var(--pink);text-shadow:0 0 14px var(--pink)}
.def{color:var(--muted);font-size:.9rem;text-align:center;min-height:1em}
.emo{font-family:system-ui,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;line-height:1.2;font-size:1.15rem;text-align:center;margin:6px 0;white-space:pre}
.next{text-align:center;color:var(--yellow);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.stats div b{display:block;font-family:var(--display);font-size:1.7rem;color:var(--cyan)}.stats div span{font-size:.72rem;color:var(--muted)}
.dist{display:grid;gap:5px}.dist div{display:flex;align-items:center;gap:8px;font-size:.85rem}.dist i{display:block;height:20px;min-width:24px;border-radius:5px;background:var(--c-ab);color:#fff;font-style:normal;font-weight:700;text-align:right;padding:0 6px;line-height:20px}.dist i.hl{background:var(--c-ok);color:var(--c-ok-t)}
.rankform{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rankform input[type=text]{flex:1 1 180px;min-height:44px;padding:8px 12px;border-radius:12px;border:2px solid var(--tile-line);background:#0d0524;color:#fff;font-size:1rem}
.rank{list-style:none;padding:0;margin:10px 0;display:grid;gap:5px;counter-reset:r}
.rank li{counter-increment:r;display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.rank li::before{content:counter(r);font-family:var(--display);width:1.6em;color:var(--yellow)}
.rank li.me{outline:2px solid var(--cyan)}
.rank li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank li b{color:var(--green);font-family:var(--display)}.rank li em{font-style:normal;color:var(--muted);font-size:.8rem}
/* ===== responsive ===== */
@media (max-height:640px) and (orientation:portrait){.modes button[role=tab]{padding:5px 10px}.ib{width:38px;height:38px}}
/* dos columnas: teléfono horizontal, pantallas bajas o ultrawide */
@media (orientation:landscape) and (max-height:560px),(min-aspect-ratio:2/1){
  .app{gap:4px}
  .stage{flex-direction:row;align-items:center;justify-content:center;gap:clamp(12px,3vw,48px)}
  .boardwrap{flex:0 1 auto;width:auto;height:100%}
  .kbwrap{flex:0 1 min(52vw,760px);width:auto;height:100%;align-items:center}
  .kb{max-width:min(100%,760px)}
}
@media (orientation:landscape) and (max-height:560px){
  .ib{width:36px;height:36px}.ib svg{width:19px;height:19px}
  .modes button[role=tab]{padding:4px 10px;font-size:.78rem}
  .streak{padding:3px 10px}
  .toast{top:calc(var(--sat) + 52px)}
  .card{padding:12px 14px}.card h2{font-size:1.15rem}.answer{font-size:1.4rem}.emo{font-size:.95rem;line-height:1.1}
  .stats div b{font-size:1.3rem}
}
@media (min-aspect-ratio:21/9) and (min-width:1200px){.app{padding-left:calc(var(--sal) + 4vw);padding-right:calc(var(--sar) + 4vw)}}
@media (min-width:1100px) and (min-height:700px){.key{font-size:1.3rem}.kb{max-width:640px}.top,.modes{max-width:760px}}
@media (max-width:360px){.tools{gap:3px}.ib{width:34px;height:34px}.logo{display:none}}
@media (max-width:620px){
  .top{flex-wrap:wrap;justify-content:center;gap:4px}
  .brand{width:100%;justify-content:center}
  .tools{width:100%;justify-content:space-between;gap:4px}
  .ib{flex:1 1 0;max-width:52px;width:auto}
}