/* Piezas nuevas de la app real (sobre la base de app.css, que viene de la maqueta) */

/* header */
.top-r{display:flex;align-items:center;gap:8px}
.presence{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--muted);background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:5px 11px}
.presence i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.presence.on{color:var(--ink)}
.presence.on i{background:#5CC394;box-shadow:0 0 0 3px color-mix(in oklab,#5CC394 30%,transparent)}
.avatar{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--pink);color:var(--on-accent);font:800 18px/1 var(--ff-display);display:grid;place-items:center;padding:0;box-shadow:0 2px 0 var(--ink)}

/* toast con botón */
.toast{display:flex;align-items:center;gap:10px}
.toast.has-action{pointer-events:auto}
.toast-btn{border:0;background:var(--pink);color:var(--on-accent);font-weight:900;border-radius:999px;padding:5px 12px}

/* login */
.login{display:grid;gap:16px;padding-top:28px;max-width:380px;margin:0 auto}
.login-st{display:flex;justify-content:center;gap:4px}
.login-st .stk{width:74px}
.login-st .stk:nth-child(1){transform:rotate(-12deg)}.login-st .stk:nth-child(3){transform:rotate(10deg)}

/* perfil */
.card-soft{background:var(--bg);border-radius:18px;padding:14px;display:grid;gap:8px;justify-items:start}
.h3{margin:0;font:700 19px/1.1 var(--ff-display)}
#linkBox{display:flex;gap:8px;width:100%}
#linkBox:empty{display:none}
.linkout{font-size:13px}

/* subida */
.progress{height:10px;border-radius:9px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--pink);transition:width .2s}
.prev-x{width:64px;height:64px;border-radius:10px;background:var(--line);display:grid;place-items:center;font-weight:900;font-size:12px;color:var(--muted)}

/* cabecera de juegos */
.ghead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pres{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--muted);background:var(--bg);border-radius:999px;padding:5px 11px}
.pres i{width:8px;height:8px;border-radius:50%;background:var(--butter);animation:blink 1.4s infinite}
.pres.on{color:var(--ok);background:var(--mint-soft)}
.pres.on i{background:#5CC394;animation:none}
@keyframes blink{50%{opacity:.3}}
.scores{font-size:12.5px;font-weight:800;background:var(--butter-soft);border-radius:999px;padding:5px 11px;font-variant-numeric:tabular-nums}
.turn{margin:0;text-align:center;font:700 19px/1.2 var(--ff-display);color:var(--muted)}
.turn.me{color:var(--ink)}
.turn b{font-variant-numeric:tabular-nums}
.mask{letter-spacing:.25em;color:var(--pink)}

/* dibuja */
.guesses{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.gchip{font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;background:var(--pink-soft)}
.gchip.ok{background:var(--mint-soft);color:var(--ok)}

/* memorice 4×4 */
.mem.mem4{grid-template-columns:repeat(4,1fr);gap:7px}
.mem4 .mcard{aspect-ratio:1}
.mcard[disabled]{cursor:default}
.mcard.done .fb{box-shadow:0 0 0 3px var(--mint)}
.mcard.done.mine .fb{box-shadow:0 0 0 3px var(--pink)}

/* opciones */
.opts button.picked{background:var(--pink-soft);border-color:var(--pink)}
.opts button[disabled]{cursor:default}
.hist{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-weight:700;font-size:14px}
.hist li{padding:6px 12px;border-radius:12px;background:var(--pink-soft)}
.hist li.ok{background:var(--mint-soft)}

/* wordle con el otro al lado */
.wboth{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:start}
.wboth .wgrid{width:100%}
.wside{display:grid;gap:6px;justify-items:start}
.wmini{display:grid;gap:3px}
.wmini .wrow{display:grid;grid-template-columns:repeat(5,15px);gap:3px}
.wmini i{width:15px;height:15px;border-radius:4px;background:var(--line);font:900 9px/15px var(--ff-body);text-align:center;font-style:normal;color:#fff}
.wmini i.g{background:#5CC394}.wmini i.y{background:#F4BF3A;color:#3E2329}.wmini i.x{background:#B9A6AC}
@media (max-width:370px){.wboth{grid-template-columns:1fr 80px}}

/* stop */
.letter{justify-self:center;width:84px;height:84px;border-radius:24px;background:var(--pink);color:var(--on-accent);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;font:800 48px/1 var(--ff-display)}
.stopf{grid-template-columns:1fr 1fr;gap:10px}
.stopban{margin:0;text-align:center;font:800 20px/1.2 var(--ff-display);color:var(--danger);animation:blink 1s infinite}
.stopbtn{background:#FF5C7A;font-size:18px;padding:12px 28px}
.stoptable{overflow-x:auto}
.stoptable table{width:100%;border-collapse:collapse;font-size:14px}
.stoptable th,.stoptable td{padding:8px 6px;border-bottom:2px solid var(--line);text-align:left;vertical-align:top}
.stoptable thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stoptable tbody th{font-weight:800;font-size:12.5px;color:var(--muted)}
.stoptable b{display:inline-block;min-width:24px;text-align:center;border-radius:8px;font-size:12px;padding:1px 5px;background:var(--line)}
.stoptable b.p10{background:var(--mint-soft);color:var(--ok)}.stoptable b.p5{background:var(--butter-soft)}

/* rompecabezas: selección del otro */
.pc.sel2{outline:4px solid var(--mint);outline-offset:-4px}
.pc.sel.sel2{outline-color:var(--butter)}

/* invitación a activar avisos */
.pushcta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--butter-soft);border-radius:18px;padding:12px 14px}
.pushcta .gs{flex:1 1 200px;color:var(--ink)}
#pushCta:empty,#pushBox:empty{display:none}

/* que las grillas nunca se salgan de la pantalla */
.games,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.gtile,.tile{min-width:0}
.mini-mem{max-width:100%}
.feat{grid-template-columns:minmax(0,1fr) 112px}