/* === Wordx · Neon Glass =========================================== */
:root{
  --bg:#07080d; --bg2:#0b0f18; --panel:rgba(255,255,255,.05); --panel-2:rgba(255,255,255,.08);
  --border:rgba(129,140,248,.18); --text:#eaf1ff; --muted:#9eb0c9;
  --accent:#7c3aed; --accent-2:#22d3ee; --green:#22e3a4; --amber:#ffd166; --gray:#223044; --danger:#ff6b6b;
  --radius:16px; --shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(124,58,237,.05);
  --L:5; --R:6; --gap:clamp(6px, 1.6vw, 10px);
  --kb-space:0px;
  --rank-gap:10px;
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
html{background:var(--bg); color-scheme:dark}
body{
  margin:0; color:var(--text);
  font:400 16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  background:
    radial-gradient(900px 700px at -10% -10%, rgba(34,211,238,.20), transparent 60%) no-repeat,
    radial-gradient(900px 700px at 110% 10%, rgba(236,72,153,.18), transparent 60%) no-repeat,
    linear-gradient(180deg,#06070b,#0b0f18);
}

.hidden{display:none!important}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* Appbar */
.app{min-height:100%;display:flex;flex-direction:column}
.appbar{
  position:sticky;top:0;z-index:3;
  backdrop-filter:saturate(1.3) blur(10px);
  background:linear-gradient(180deg, rgba(7,8,13,.80), rgba(7,8,13,.55));
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 30px rgba(16,24,40,.35);
}
.brand{padding:14px 18px}

/* — Título inline: [W]ordle [D]iario + firma — */
.title-inline{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:0 }
.title-inline .ti-group{ display:inline-flex; align-items:flex-end; gap:6px; line-height:1 }
.ti-tile{
  width:clamp(28px,5vw,36px); height:clamp(28px,5vw,36px);
  border-radius:8px; font-weight:1000; font-size:clamp(16px,3.6vw,22px);
  display:inline-flex; align-items:center; justify-content:center;
  color:#eaf1ff; letter-spacing:.4px; user-select:none;
  background:linear-gradient(180deg,#111a28,#0b111c);
  border:1px solid rgba(129,140,248,.32);
  box-shadow:0 8px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(34,211,238,.10);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  transform:translateZ(0);
}
.ti-w{ background:linear-gradient(180deg, rgba(34,211,238,.32), rgba(34,211,238,.10)); border-color:rgba(34,211,238,.48); transform:rotate(-5deg) translateY(1px) }
.ti-d{ background:linear-gradient(180deg, rgba(124,58,237,.32), rgba(124,58,237,.10)); border-color:rgba(124,58,237,.48); transform:rotate(5deg) }
.ti-rest{
  font-weight:1000; letter-spacing:.3px; white-space:nowrap;
  font-size:clamp(18px,3.8vw,28px);
  background:linear-gradient(90deg,#9ae6ff,#a78bfa 35%,#ec4899 70%,#9ae6ff);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 1px rgba(0,0,0,.4), 0 2px 16px rgba(34,211,238,.20);
}
@media (prefers-reduced-motion:no-preference){
  .ti-rest{ animation:tiShimmer 6s linear infinite }
}
@keyframes tiShimmer{ from{background-position:0% center} to{background-position:200% center} }
.tt-sign{
  margin-left:6px; align-self:center;
  font-size:clamp(12px,2.5vw,15px); font-weight:700; font-style:italic;
  font-family:"Segoe Script","Lucida Handwriting","Brush Script MT","Snell Roundhand","Apple Chancery",cursive;
  color:#e7ddff; opacity:.95; transform:rotate(-1.2deg); position:relative; padding:0 6px 2px
}
.tt-sign::after{
  content:""; position:absolute; left:4px; right:4px; bottom:-4px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.65) 20%,rgba(34,211,238,.65) 80%,transparent);
  border-radius:999px; transform:skewX(-14deg)
}
@media (max-width:420px){
  .title-inline{ gap:10px }
  .title-inline .tt-sign{ order:3; flex-basis:100%; margin-left:calc(clamp(28px,5vw,36px) + 6px) }
}

/* Page / Panels */
.page{width:min(980px,100%); margin:0 auto; padding:16px; padding-bottom:calc(16px + var(--kb-space));}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; margin:12px 0; box-shadow:var(--shadow), 0 0 0 1px rgba(34,211,238,.06) inset;
  overflow-x:hidden;
}
.row{display:flex; gap:12px; align-items:center}
.header-row{justify-content:space-between}

.statusbar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.22); color:var(--muted); padding:6px 10px; border-radius:12px; font-size:13px}
.tryhint{color:var(--muted); font-size:14px}
.msg{min-height:20px; margin-top:10px; color:var(--muted)}
.msg.err{color:#ff9aa2}

/* --- Cabecera V2 --------------------------------------------------- */
.statusbar.v2{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.badge.today{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:12px;
  background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.22);
}
.badge.date{ padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--muted) }
.mini-tile{
  width:22px; height:22px; border-radius:6px; font:900 13px/22px system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
  text-align:center; color:#eaf1ff;
  background:linear-gradient(180deg, rgba(34,211,238,.32), rgba(34,211,238,.10));
  border:1px solid rgba(34,211,238,.48);
  box-shadow:0 0 0 1px rgba(34,211,238,.10);
}
.mini-label{ color:var(--muted); }

/* --- Barra de intentos --------------------------------------------- */
.trieswrap{ display:flex; align-items:center; gap:10px }
.triesbar{ display:flex; gap:6px }
.triesbar .try{
  width:16px; height:16px; border-radius:4px;
  background:#101827; border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  position:relative; overflow:hidden;
}
.triesbar .try.done{ background:linear-gradient(180deg, #0e1521, #0b121b); border-color:#2a3a52; }
.triesbar .try.done::after{
  content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:900 11px/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial; color:#93a6bf;
}

/* --- Toolbar V2 ----------------------------------------------------- */
.toolbar.v2{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:10px }
.kb-ctrl{ display:flex; align-items:center; gap:8px }
.kb-hint{ font-size:13px; color:var(--muted) }

/* Accesibilidad */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0 }

/* Grid */
.grid{
  /* tamaño objetivo por tile */
  --tile-target: clamp(46px, 8.5vw, 60px);
  /* ancho ideal según L */
  --w: calc(var(--L) * var(--tile-target) + (var(--L) - 1) * var(--gap));
  /* Nunca más ancho que su contenedor ni que 560px; mínimo 240px para L=4 */
  width: clamp(240px, min(var(--w), 100%), 560px);

  margin:12px auto 8px;
  display:grid;
  grid-template-columns: repeat(var(--L), 1fr);
  gap:var(--gap);
  touch-action:manipulation;
  container-type:inline-size;
}
@container (max-width: 380px){
  .grid{ --gap:5px; }
  .tile{ font-size: clamp(15px, 3.3vw, 20px); }
}
.tile{
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:clamp(18px, 4vw, 28px); text-transform:uppercase;
  border-radius:12px; border:1px solid rgba(129,140,248,.22);
  background:linear-gradient(180deg, #0d1220, #0a0f19); color:#e6f0ff;
  box-shadow:0 0 0 1px rgba(34,211,238,.06);
  transition:transform .08s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tile.reveal{animation:flip .46s cubic-bezier(.2,.8,.2,1)}
@keyframes flip{0%{transform:rotateX(0)}34%{transform:rotateX(92deg)}68%{transform:rotateX(0)}}
.tile.g{background:linear-gradient(180deg, rgba(34,227,164,.22), rgba(34,227,164,.12)); border-color:rgba(34,227,164,.55); color:#edfff8; box-shadow:0 0 0 1px rgba(34,227,164,.30), 0 10px 24px rgba(34,227,164,.14);}
.tile.a{background:linear-gradient(180deg, rgba(255,209,102,.22), rgba(255,209,102,.12)); border-color:rgba(255,209,102,.55); color:#fff9e8; box-shadow:0 0 0 1px rgba(255,209,102,.28), 0 10px 24px rgba(255,209,102,.12);}
.tile.x{background:linear-gradient(180deg, #0e1521, #0b121b); border-color:#243143; color:#9cb3cc;}
@media (prefers-reduced-motion:no-preference){
  .grid.shake{animation:shake .24s}
  @keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}100%{transform:translateX(0)}}
}

/* Buttons */
.toolbar{display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:10px; flex-wrap:wrap}
.tool-link{background:none; border:none; color:var(--accent-2); padding:6px 4px; cursor:pointer}
.tool-link:hover,.tool-link:focus-visible{text-decoration:underline}
.actions{display:flex; gap:8px}
.btn{
  --b:rgba(129,140,248,.25);
  border:1px solid var(--b);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text);
  padding:9px 12px; border-radius:12px; cursor:pointer;
  box-shadow:0 0 0 1px rgba(34,211,238,.06) inset;
}
.btn.thin{padding:8px 11px; border-radius:11px; font-size:14px}
.btn.ok{background:linear-gradient(180deg, rgba(124,58,237,.22), rgba(124,58,237,.10)); border-color:rgba(124,58,237,.45)}
.btn.ghost{background:transparent}
.btn.blue{background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(34,211,238,.10)); border-color:rgba(34,211,238,.45)}
.btn.danger{background:linear-gradient(180deg, rgba(255,107,107,.22), rgba(255,107,107,.10)); border-color:rgba(255,107,107,.45)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

/* Inputs */
input[type="text"], input[type="search"]{
  width:100%; background:#0f1522; color:#cfe6ff; border:1px solid var(--border);
  border-radius:10px; padding:10px 12px;
  font:600 15px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
}
input::placeholder{color:var(--muted)}

/* Base Keyboard */
.kb{
  position:sticky; bottom:0; left:0; right:0; z-index:2;
  width:100%;
  padding:10px 12px 14px;
  backdrop-filter:blur(14px) saturate(1.25);
  background:linear-gradient(180deg, rgba(7,8,13,.75), rgba(7,8,13,.92));
  border-top:1px solid var(--border);
}
.kb.hidden{display:none!important}
.kb-row{display:flex; justify-content:center; gap:8px; margin-top:8px; flex-wrap:wrap}
.key{
  min-width:clamp(34px, 8.2vw, 54px); height:clamp(38px, 9vw, 54px);
  border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--text);
  font-weight:800; letter-spacing:.4px; cursor:pointer; user-select:none;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.key.big{min-width:clamp(52px, 13vw, 88px)}
.key:hover{filter:brightness(1.05)}
.key:active{transform:translateY(1px)}
.key.g{background:rgba(34,227,164,.18); border-color:rgba(34,227,164,.45); color:#eafffb}
.key.a{background:rgba(255,209,102,.18); border-color:rgba(255,209,102,.45); color:#fff6db}
.key.x{background:#0f1522; border-color:#293244; color:#91a7bf}

/* === Ránkings · Título centrado con firma visual ==================== */
#ranksPanel .rank-title{
  margin: 6px 0 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font-weight: 1000; font-size: clamp(22px, 5.2vw, 36px); letter-spacing: .3px;
  background: linear-gradient(90deg,#eaf1ff, #a78bfa 35%, #22d3ee 70%, #eaf1ff);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 22px rgba(124,58,237,.22); position: relative;
}
@media (prefers-reduced-motion:no-preference){
  #ranksPanel .rank-title{ animation: rkShimmer 9s linear infinite; }
  @keyframes rkShimmer{ to{ background-position: 200% center; } }
}
#ranksPanel .rank-title::after{
  content: "Tabla de clasificación";
  order: 2; display: inline-block; margin-top: 2px; padding: 4px 10px;
  font: 700 clamp(11px, 2.8vw, 13px)/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
  color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 999px; backdrop-filter: blur(2px) saturate(1.05);
}
#ranksPanel .rank-title::before{
  content:""; position:absolute; left:6%; right:6%; bottom:-6px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.55) 18%, rgba(34,211,238,.65) 50%, rgba(124,58,237,.55) 82%, transparent);
  border-radius: 999px; opacity:.75;
}
#ranksPanel .tabs{ justify-content: center; }

/* Tabs + Ranks (base) */
.tabs{display:flex; gap:8px; flex-wrap:wrap}
[role="tab"][aria-selected="true"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 2px rgba(124,58,237,.18)}

/* === Ránkings · layout final (sin avatar, nombres en varias líneas) */
#ranksPanel .rank{
  table-layout: fixed; width:100%;
  margin:12px 0 0; border-collapse:separate; border-spacing:0 var(--rank-gap);
}
#ranksPanel .rank thead th{
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,14,22,.85), rgba(10,14,22,.65));
  backdrop-filter: blur(6px) saturate(1.05);
  border-bottom: 1px solid var(--border);
  text-align:left; font-size:13px; color:var(--muted); padding:6px 8px;
}
#ranksPanel .rank tbody tr{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-radius:14px; overflow:hidden;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
#ranksPanel .rank tbody tr:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  border-color: rgba(129,140,248,.28);
}
#ranksPanel .rank tbody tr.me{
  outline:2px solid rgba(124,58,237,.35);
  box-shadow:0 0 0 2px rgba(124,58,237,.18) inset, 0 8px 20px rgba(124,58,237,.12);
}
#ranksPanel .rank tbody td{ padding:12px 10px; vertical-align:middle }

/* columnas: #, Jugador, Puntos, Días */
#ranksPanel .rank th:nth-child(1), #ranksPanel .rank td:nth-child(1){ width:56px; }
#ranksPanel .rank th:nth-child(3), #ranksPanel .rank td:nth-child(3){ width:88px; text-align:right; }
#ranksPanel .rank th:nth-child(4), #ranksPanel .rank td:nth-child(4){ width:78px; text-align:right; white-space:nowrap; }

/* medallas/posición */
.pos{width:40px; height:40px; border-radius:12px; background:#111a28; display:flex; align-items:center; justify-content:center; font-weight:900}
.pos.top1{background:linear-gradient(135deg,#22d3ee,#7c3aed); color:#0b0f14}
.pos.top2{background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#0b0f14}
.pos.top3{background:linear-gradient(135deg,#22d3ee,#67e8f9); color:#0b0f14}

/* jugador (sin avatar) */
#ranksPanel .rank .avatar{ display:none !important; }
.player{ display:block; min-width:0; line-height:1.15; }
.player .who{ min-width:0; }
.player .name{
  display:inline; font-weight:900;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}
.me .me-tag{ margin-left:.5ch; padding:2px 6px; border-radius:999px; background:#0f1722; border:1px solid var(--border); font-size:12px; color:var(--muted) }

/* puntos / barras */
.scorecell{display:flex; align-items:center; gap:10px}
.scorecell .bar{--w:140px; width:var(--w); height:8px; border-radius:999px; background:#0f1522; border:1px solid var(--border); overflow:hidden}
.scorecell .bar>span{display:block; height:100%; width:30%; background:linear-gradient(90deg, #7c3aed, #22d3ee)}
.scorecell .num{min-width:56px; text-align:right; font-weight:900}

/* meta */
.meta{display:flex; gap:6px; margin-top:2px}
.tag{font-size:12px; color:var(--muted); background:#0f1522; border:1px solid var(--border); padding:2px 6px; border-radius:999px}
.pill{color:var(--muted)}

/* números tabulares para columnas */
#ranksPanel .rank, #ranksPanel .rank *{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* skeleton (carga remota) */
.lb-loading .rank tbody tr{ display:none }
.rank .skel{ display:table-row !important; }
.rank .skel td{ padding:12px 10px; }
.skel .skel-block{
  height:14px; border-radius:8px; width:100%;
  background:linear-gradient(90deg, #0f1522, #1a2233, #0f1522);
  background-size:200% 100%; animation:shimmer 1.1s linear infinite;
}
@keyframes shimmer{ to{ background-position-x:-200% } }

/* ajustes estrechos */
@media (max-width:480px){
  .scorecell .bar{ display:none }
  .scorecell .num{ font-size:16px; font-weight:900 }
}
@media (max-width:360px){
  #ranksPanel .rank th:nth-child(1), #ranksPanel .rank td:nth-child(1){ width:48px; }
  #ranksPanel .rank th:nth-child(3), #ranksPanel .rank td:nth-child(3){ width:80px; }
  #ranksPanel .rank th:nth-child(4), #ranksPanel .rank td:nth-child(4){ width:70px; }
  .pos{width:34px;height:34px}
}

/* Dialogs */
dialog::backdrop{ background:rgba(6,9,14,.90); backdrop-filter:blur(2px); }
dialog{
  width:min(520px,92vw);
  border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text); box-shadow:var(--shadow); padding:0;
}
.dlg-head{padding:14px 16px; border-bottom:1px solid var(--border)}
.dlg-body{padding:16px}
.dlg-foot{padding:10px 12px; border-top:1px solid var(--border); display:flex; gap:8px; align-items:center}
.sep{height:1px; background:var(--border); margin:10px 0}
.grow{flex:1}
legend,.legend{list-style:none; padding:0; margin:8px 0}
.legend li{display:flex; align-items:center; gap:8px; color:var(--muted)}
.chip{width:10px; height:10px; border-radius:2px; display:inline-block}
.chip.green{background:var(--green)} .chip.amber{background:var(--amber)} .chip.gray{background:#1f2937}

/* Textareas */
#exportBox,#importBox{
  width:100%; min-height:180px; background:#0f1522; color:#cfe6ff; border:1px solid var(--border);
  border-radius:10px; padding:10px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Footer */
.foot{margin:18px 0 6px; color:var(--muted); display:flex; gap:8px; justify-content:center}
.foot a{color:#a78bfa; text-decoration:none}
.foot a:hover{text-decoration:underline}

/* Responsive generales */
@media (max-width:560px){ .statusbar{flex-direction:column; align-items:flex-start} .scorecell .bar{--w:120px} }
@media (max-width:380px){ .badge{font-size:12px} .btn.thin{font-size:13px} }

/* Daltonismo opcional */
body.cb-safe{ --amber:#60a5fa; }

/* === Keyboard Fusion (Android/iOS · 10u por fila) =================== */
body.kb-fusion{
  --kb-gap:8px; --kb-radius:14px; --kb-h:clamp(40px, 7.2vw, 54px); --kb-font:clamp(16px, 4.4vw, 22px);
  --kb-bg:rgba(7,9,14,.92); --kb-border:rgba(129,140,248,.22);
  --key-bg-top:#1b2333; --key-bg-bot:#121a26; --key-edge:rgba(124,58,237,.25);
  --key-shadow:rgba(0,0,0,.5); --key-press-shadow:rgba(0,0,0,.65); --key-text:var(--text);
  --key-g-top:#0f6a4f; --key-g-bot:#0a4c39; --key-g-edge:#3dd4a4;
  --key-a-top:#8a6b1b; --key-a-bot:#5c470c; --key-a-edge:#e7c360;
  --key-x-top:#263042; --key-x-bot:#141a21; --key-x-edge:#4a5770;
}
body.kb-fusion .kb{
  position:fixed; left:0; right:0; bottom:0; width:100%;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, var(--kb-bg));
  backdrop-filter:saturate(1.1) blur(10px);
  border-top:1px solid var(--kb-border);
  z-index:40; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
body.kb-fusion .kb.hidden{display:none!important}
body.kb-fusion .kb-row{width:100%; display:flex; justify-content:center; gap:var(--kb-gap); margin:0 0 var(--kb-gap) 0; flex-wrap:nowrap; padding:0}
body.kb-fusion .kb-row:nth-child(1) .key,
body.kb-fusion .kb-row:nth-child(2) .key{flex:0 0 calc((100% - 9*var(--kb-gap))/10); min-width:0; height:var(--kb-h)}
body.kb-fusion .kb-row:nth-child(3) .key{flex:0 0 calc((100% - 8*var(--kb-gap))/10); min-width:0; height:var(--kb-h)}
body.kb-fusion .kb-row:nth-child(3) .key.big{flex-basis:calc(2 * ((100% - 8*var(--kb-gap))/10))}
body.kb-fusion .key{
  appearance:none; -webkit-appearance:none; border:0; outline:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  font:800 var(--kb-font)/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
  color:var(--key-text); border-radius:var(--kb-radius);
  background-image:linear-gradient(180deg, var(--key-bg-top), var(--key-bg-bot));
  box-shadow:0 1px 0 var(--key-edge) inset, 0 6px 14px var(--key-shadow), 0 1px 0 rgba(0,0,0,.5);
  transform:translateZ(0); transition:transform .05s ease, box-shadow .06s ease, filter .12s ease; cursor:pointer; white-space:nowrap;
}
body.kb-fusion .key.enter::after{content:" Enviar"; font-weight:700; font-size:.9em}
body.kb-fusion .key.del::after{content:" Borrar"; font-weight:700; font-size:.9em}
body.kb-fusion .key:active, body.kb-fusion .key.pressed{
  transform:translateY(1px);
  box-shadow:0 0 0 var(--key-edge) inset, 0 3px 8px var(--key-press-shadow), 0 0 0 rgba(0,0,0,0);
  filter:saturate(1.08);
}
body.kb-fusion .key.g{background-image:linear-gradient(180deg, var(--key-g-top), var(--key-g-bot)); box-shadow:0 1px 0 var(--key-g-edge) inset, 0 8px 16px rgba(16,95,70,.38), 0 1px 0 rgba(0,0,0,.45); color:#edfff8}
body.kb-fusion .key.a{background-image:linear-gradient(180deg, var(--key-a-top), var(--key-a-bot)); box-shadow:0 1px 0 var(--key-a-edge) inset, 0 8px 16px rgba(124,90,6,.36), 0 1px 0 rgba(0,0,0,.45); color:#fff6db}
body.kb-fusion .key.x{background-image:linear-gradient(180deg, var(--key-x-top), var(--key-x-bot)); box-shadow:0 1px 0 var(--key-x-edge) inset, 0 8px 16px rgba(16,22,31,.48), 0 1px 0 rgba(0,0,0,.5); color:#9fb0c5}
body.kb-fusion .key:focus-visible{outline:2px solid #22d3ee; outline-offset:2px}
@media (max-width:380px){ body.kb-fusion{--kb-gap:6px; --kb-font:15px} }
@media (min-width:720px){ body.kb-fusion .kb{padding:14px 16px calc(14px + env(safe-area-inset-bottom))} body.kb-fusion{--kb-gap:10px; --kb-radius:16px} }
@media (min-width:1024px){
  body.kb-fusion .kb{ left:50%; right:50%; transform:translateX(-50%); width:min(740px,100vw); }
}
/* Botón iconito en la barra */
.btn.icon{ width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:18px }
/* La fila del título + botón */
.appbar .brand{
  display:flex;
  align-items:center;
  gap:12px;
  /* opcional: evita saltos raros */
  flex-wrap:nowrap;
}
.appbar .brand .title-inline{ min-width:0; }

/* El botón se va al extremo derecho */
#themeToggle{ margin-left:auto; }

/* ================== Modo CLARO ================== */
html[data-theme="light"]{
  color-scheme: light;
  --bg:#f5f7fb;           /* fondo app */
  --bg2:#ffffff;          /* capas */
  --panel:rgba(0,0,0,.04);
  --panel-2:rgba(0,0,0,.06);
  --border:rgba(60,72,100,.20);
  --text:#0b1220;
  --muted:#51637a;
  --gray:#dfe6f3;
}

/* fondo general */
html[data-theme="light"] body{
  background:
    radial-gradient(900px 700px at -10% -10%, rgba(34,211,238,.10), transparent 60%) no-repeat,
    radial-gradient(900px 700px at 110% 10%, rgba(236,72,153,.10), transparent 60%) no-repeat,
    linear-gradient(180deg,#f6f8ff,#eef3ff);
  color:var(--text);
}

/* paneles */
html[data-theme="light"] .panel{
  background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015));
  border-color:var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,.08), 0 0 0 1px rgba(60,72,100,.04) inset;
}

/* cabecera sticky */
html[data-theme="light"] .appbar{
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.70));
  box-shadow:0 10px 30px rgba(16,24,40,.12);
  border-bottom-color:var(--border);
}

/* grid / tiles */
html[data-theme="light"] .tile{
  background:linear-gradient(180deg, #ffffff, #f0f4ff);
  color:#0b1220;
  border-color:rgba(60,72,100,.25);
  box-shadow:0 0 0 1px rgba(60,72,100,.06);
}
html[data-theme="light"] .tile.g{
  background:linear-gradient(180deg, rgba(16,185,129,.22), rgba(16,185,129,.12));
  border-color:rgba(16,185,129,.55);
  color:#0a2f22;
}
html[data-theme="light"] .tile.a{
  background:linear-gradient(180deg, rgba(245,158,11,.24), rgba(245,158,11,.12));
  border-color:rgba(245,158,11,.55);
  color:#3a2a05;
}
html[data-theme="light"] .tile.x{
  background:linear-gradient(180deg, #eef2f9, #e6ebf6);
  border-color:#cfd9e8;
  color:#6b7f99;
}

/* ranking */
html[data-theme="light"] .rank thead th{
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.65));
  border-bottom-color:var(--border);
  color:#3d4f66;
}
html[data-theme="light"] .rank tbody tr{
  background:rgba(0,0,0,.04);
  border-color:var(--border);
}
html[data-theme="light"] .me .me-tag{ background:#eef3ff; border-color:var(--border); color:#42556d }

/* teclado */
html[data-theme="light"] body.kb-fusion{
  --kb-bg:rgba(255,255,255,.92); --kb-border:rgba(60,72,100,.22);
  --key-bg-top:#ffffff; --key-bg-bot:#eef3ff; --key-edge:rgba(60,72,100,.24);
  --key-text:#0b1220;
  --key-g-top:#c9f2e4; --key-g-bot:#aee6d5; --key-g-edge:#5ec9a6;
  --key-a-top:#fde9bb; --key-a-bot:#f8d992; --key-a-edge:#e9c468;
  --key-x-top:#f0f4fb; --key-x-bot:#e6ebf6; --key-x-edge:#c7d3e6;
}
html[data-theme="light"] .kb{
  background:linear-gradient(180deg, transparent, var(--kb-bg));
  border-top-color:var(--kb-border);
}

/* diálogos */
html[data-theme="light"] dialog{ background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)); color:var(--text); }
html[data-theme="light"] dialog::backdrop{ background:rgba(0,0,0,.35); }

/* === Pro (>=1000 pts en Total) === */
.pro .name{
  color:#ffd54a;               /* dorado */
  text-shadow:0 0 10px rgba(255,213,74,.28);
}
.pro-badge{
  margin-left:.5ch;
  padding:2px 6px;
  border-radius:999px;
  font:900 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
  background:#07131a;          /* fondo negro */
  border:1px solid #22d3ee;    /* turquesa */
  color:#22d3ee;
}
html[data-theme="light"] .pro .name{ color:#b8860b; text-shadow:none }
html[data-theme="light"] .pro-badge{ background:#eef7fb }

/* Pleno (💯) ya existente */
.hundred-badge{ margin-left:.45ch; font-size:14px; filter:drop-shadow(0 0 6px rgba(255,107,107,.35)); }
.pleno .name{ text-shadow:0 0 10px rgba(255,107,107,.22); }

/* Casi pleno (⚡ 2/6) */
.near-badge{
  margin-left:.45ch; font-size:14px; line-height:1;
  filter: drop-shadow(0 0 6px rgba(255,209,102,.35)); /* ámbar */
}
.casi .name{ text-shadow:0 0 10px rgba(255,209,102,.25); }
html[data-theme="light"] .pleno .name,
html[data-theme="light"] .casi .name{ text-shadow:none; }