:root{
  /* Identidad PalabraDelDia: crema, tinta, terracota, verde, mostaza */
  --bg:#f7f5ef;--paper:#fffefb;--ink:#1c1a15;--muted:#73716a;--line:#e5e2d8;
  --accent:#d95f3b;--accent-2:#17735a;--yellow:#d9a72e;
  --accent-soft:color-mix(in srgb,var(--accent) 11%,var(--paper));
  --accent-2-soft:color-mix(in srgb,var(--accent-2) 10%,var(--paper));
  --yellow-soft:color-mix(in srgb,var(--yellow) 16%,var(--paper));
  --tile-empty-border:#d4d1c5;--tile-absent:#7a7b72;
  --shadow:0 20px 60px rgba(25,24,20,.08);
  --shadow-sm:0 4px 14px rgba(25,24,20,.06);
  --shadow-lift:0 14px 34px rgba(25,24,20,.12);
  --radius:24px;--radius-sm:14px;--shell:1160px;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.dark{
  --bg:#16150f;--paper:#211f19;--ink:#f3f1e8;--muted:#a9a79c;--line:#3a382f;
  --accent:#e0704d;--accent-2:#3f9c7d;--yellow:#d9a72e;
  --accent-soft:color-mix(in srgb,var(--accent) 16%,var(--paper));
  --accent-2-soft:color-mix(in srgb,var(--accent-2) 15%,var(--paper));
  --yellow-soft:color-mix(in srgb,var(--yellow) 16%,var(--paper));
  --tile-empty-border:#494c42;--tile-absent:#45463f;
  --shadow:0 20px 60px rgba(0,0,0,.3);
  --shadow-sm:0 4px 14px rgba(0,0,0,.24);
  --shadow-lift:0 14px 34px rgba(0,0,0,.4);
}
a{color:inherit}
button,input,select{font:inherit}
img{max-width:100%;display:block}
.shell{width:min(var(--shell),calc(100% - 32px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:68px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;letter-spacing:-.02em;font-size:16px}
.brand:hover .brand-mark{background:var(--accent);color:#fff;transform:rotate(-6deg)}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--ink);color:var(--bg);border-radius:10px;font-family:var(--font-display);font-weight:800;font-size:19px;transition:transform .22s ease,background .22s ease,color .22s ease}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{position:relative;text-decoration:none;color:var(--muted);font-size:14px;font-weight:650;padding:8px 12px;border-radius:10px;transition:color .15s ease,background .15s ease}
.nav-links a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.nav-links a.nav-daily{color:var(--ink);background:var(--accent-soft);font-weight:850!important}
.nav-links a.nav-daily:hover{background:color-mix(in srgb,var(--accent) 18%,var(--paper))}
.icon-btn{border:1px solid var(--line);background:var(--paper);color:var(--ink);width:40px;height:40px;border-radius:50%;cursor:pointer;font-weight:800;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.icon-btn:active{transform:translateY(0)}
.hero{min-height:600px;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;padding-block:68px}
.hero h1,.content-shell h1,.game-topbar h1{font-family:var(--font-display);font-size:clamp(46px,6.6vw,84px);line-height:1.02;letter-spacing:-.045em;margin:10px 0 24px;font-weight:760}
.hero h1 em{color:var(--accent);font-style:normal;font-weight:760}
.hero-copy>p{max-width:620px;font-size:clamp(17px,1.6vw,20px);color:var(--muted);line-height:1.55}
.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--accent);text-transform:uppercase}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:13px 22px;text-decoration:none;font-weight:750;cursor:pointer;font-size:15px;letter-spacing:.005em}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.secondary,.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn.small{padding:8px 12px;font-size:13px}
.btn.full{width:100%}
.hero-art{height:460px;position:relative}
.letter-stack{position:absolute;left:3%;top:8%;display:grid;grid-template-columns:repeat(3,74px);gap:9px;transform:rotate(-5deg)}
.tile{aspect-ratio:1;display:grid;place-items:center;border-radius:16px;font-size:38px;font-weight:800;color:white;box-shadow:var(--shadow)}
.tile.correct{background:var(--accent-2)}.tile.present{background:var(--yellow)}.tile.absent{background:var(--tile-absent)}
.year-card{position:absolute;right:4%;bottom:9%;width:230px;height:280px;background:linear-gradient(160deg,#2b4568 0%, #1e3248 100%);border-radius:26px;transform:rotate(6deg);box-shadow:var(--shadow-lift);color:#fff;display:grid;place-items:center;align-content:center;gap:22px;transition:transform .3s ease}
.year-card:hover{transform:rotate(4deg) translateY(-4px)}
.year-card>span{display:grid;place-items:center;width:100px;height:100px;border:2px solid rgba(255,255,255,.5);border-radius:50%;font-size:54px;font-family:var(--font-display)}
.year-card strong{font-size:40px;letter-spacing:.03em;font-weight:700}.year-card strong span{opacity:.45}
.section{padding-block:70px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}
.section-heading h2,.seo-band h2{font-family:var(--font-display);font-size:clamp(30px,3.6vw,40px);line-height:1.08;letter-spacing:-.028em;margin:8px 0;font-weight:720}
.section-heading>p{max-width:480px;color:var(--muted)}
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.game-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none}
.game-card-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.pill{padding:5px 10px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.06em}
.game-card h3{font-family:var(--font-display);font-size:27px;letter-spacing:-.022em;font-weight:720;margin:18px 0 5px;line-height:1.15}
.game-card p{color:var(--muted);max-width:520px;line-height:1.55}
.play-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:800;color:var(--accent);font-size:14px}
.game-card:hover .play-link{gap:10px;color:var(--ink)}
.play-link{transition:gap .18s ease, color .18s ease}
.mini-word{display:flex;gap:7px;padding:38px 0 18px}.mini-word span{width:56px;height:56px;display:grid;place-items:center;border-radius:13px;font-weight:850;font-size:26px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .2s ease}
.game-card:hover .mini-word span:nth-child(1){transform:translateY(-4px) rotate(-3deg)}
.game-card:hover .mini-word span:nth-child(3){transform:translateY(-7px)}
.game-card:hover .mini-word span:nth-child(5){transform:translateY(-4px) rotate(3deg)}
.mini-word span:nth-child(1),.mini-word span:nth-child(4){background:var(--accent-2);color:#fff}.mini-word span:nth-child(2){background:var(--yellow);color:#fff}
.photo-preview{height:170px;margin-top:26px;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(180deg,#0b1730 0%,#111f3b 100%);border:1px solid rgba(90,112,145,.25)}
.photo-preview img{display:block;width:100%;height:100%;object-fit:cover}
.photo-preview-real::after{content:"";position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(180deg,transparent 0%,rgba(7,15,29,.36) 40%,rgba(7,15,29,.78) 100%);pointer-events:none}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.category-card{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px}
.category-card:hover{border-color:var(--ink)}
.category-icon{font-size:24px}.category-card small{color:var(--muted)}
.seo-band{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;background:var(--ink);color:var(--bg);border-radius:34px;padding:50px;margin-bottom:70px}
.seo-band p{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.tool-links{display:flex;flex-direction:column;justify-content:center;gap:10px}
.tool-links a{padding:15px 18px;border:1px solid color-mix(in srgb,var(--bg) 20%,transparent);border-radius:14px;text-decoration:none;font-weight:800}
.site-footer{border-top:1px solid var(--line);padding:45px 0;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:30px}.footer-links{display:flex;gap:18px;align-items:start;flex-wrap:wrap}.footer-links a{text-decoration:none;font-size:13px}
.game-shell{padding-block:36px 70px}
.game-topbar{display:grid;grid-template-columns:120px 1fr 120px;align-items:center;margin-bottom:26px;text-align:center}
.game-topbar h1{font-size:54px;margin:4px 0}.game-topbar .icon-btn{justify-self:end}
.back-link{text-decoration:none;color:var(--muted);font-weight:800}
.word-layout,.year-layout{display:grid;grid-template-columns:minmax(0,720px) 1fr;gap:22px;align-items:start}
.game-panel,.year-game-card,.stats-panel,.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.daily-meta,.round-row{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}
.game-message{min-height:34px;text-align:center;font-weight:800;padding:6px}
.word-board{display:grid;gap:7px;max-width:355px;margin:14px auto 26px}
.word-row{display:grid;grid-template-columns:repeat(var(--word-length,5),1fr);gap:7px}
.word-tile{aspect-ratio:1;border:2px solid var(--tile-empty-border);border-radius:10px;display:grid;place-items:center;font-size:30px;font-weight:900;text-transform:uppercase;transition:border-color .15s ease,background .2s ease,color .2s ease}
.word-tile.filled{border-color:color-mix(in srgb,var(--ink) 35%,var(--tile-empty-border))}.word-tile.correct{background:var(--accent-2);border-color:var(--accent-2);color:#fff}.word-tile.present{background:var(--yellow);border-color:var(--yellow);color:#fff}.word-tile.absent{background:var(--tile-absent);border-color:var(--tile-absent);color:#fff}
.keyboard{display:grid;gap:7px;max-width:650px;margin:auto}.keyboard-row{display:flex;justify-content:center;gap:5px}.key{height:54px;min-width:37px;padding:0 9px;border:0;border-radius:8px;background:#e7e5de;color:#1b1b18;font-weight:900;cursor:pointer}.key.wide{min-width:68px;font-size:12px}.key.correct{background:var(--accent-2);color:#fff}.key.present{background:var(--yellow);color:#fff}.key.absent{background:#777871;color:#fff}
.stats-panel{position:sticky;top:96px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.stats-grid>div{background:var(--bg);padding:15px;border-radius:14px}.stats-grid strong{display:block;font-family:var(--font-display);font-weight:650;font-size:32px}.stats-grid span{font-size:12px;color:var(--muted)}
.result-box{margin-top:16px;padding:17px;background:var(--bg);border-radius:16px}.result-box h3{margin:0 0 7px;font-family:var(--font-display);font-weight:650;font-size:26px}
.year-photo-wrap{margin:18px 0 14px;border-radius:20px;overflow:hidden;background:#edece6;aspect-ratio:16/10;position:relative}.year-photo-wrap img{width:100%;height:100%;object-fit:cover}.photo-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}.photo-loading[hidden]{display:none!important}
.year-title{text-align:center;font-family:var(--font-display);font-weight:650;font-size:24px;margin:12px 0}
.year-choice{text-align:center}.year-choice span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.year-choice strong{font-family:var(--font-display);font-weight:650;font-size:58px}
.year-controls input[type=range]{width:100%;accent-color:var(--accent);margin:15px 0}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:15px}
.score-big{margin:14px 0 20px}.score-big strong{font-family:var(--font-display);font-weight:650;font-size:58px}.score-big span{color:var(--muted)}
.round-history{display:grid;gap:7px}.round-history>div{display:flex;justify-content:space-between;padding:10px 12px;background:var(--bg);border-radius:10px;font-size:13px}
.tip-card{margin-top:18px;padding:16px;border:1px dashed var(--line);border-radius:14px}.tip-card p{margin:4px 0;color:var(--muted);font-size:13px}
.year-feedback,.year-final{padding:18px;background:var(--bg);border-radius:17px;margin-top:16px}.year-feedback h3,.year-final h3{font-family:var(--font-display);font-weight:650;font-size:28px;margin:0 0 6px}.year-feedback img{border-radius:14px;margin:12px 0;max-height:250px;width:100%;object-fit:cover}.year-feedback small{color:var(--muted)}
.content-shell{padding-block:65px 90px;max-width:980px}.content-shell h1{font-size:64px}.lead{font-size:19px;color:var(--muted);max-width:760px}
.length-nav{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.length-nav a{padding:10px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:800}.length-nav a.active{background:var(--ink);color:var(--bg)}
.word-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.word-list-grid article{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:15px}.word-list-grid strong{font-size:18px}.word-list-grid p{font-size:13px;color:var(--muted);margin:5px 0}
.finder-form{display:grid;grid-template-columns:150px 1fr 1fr auto;gap:12px;align-items:end;margin:30px 0}.finder-form label,.stack-form label,.admin-form label{display:grid;gap:6px;font-size:12px;font-weight:800;color:var(--muted)}
input,select{width:100%;padding:11px 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px}
.finder-results{margin-top:35px}.empty{padding:30px;text-align:center;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:18px}.empty-page{text-align:center}
.prose h2{font-family:var(--font-display);font-weight:650;font-size:30px;margin-top:32px}.prose p{max-width:760px;color:var(--muted)}
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;max-width:760px;margin:auto;background:#161613;color:#fff;border-radius:18px;padding:17px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.cookie-banner p{margin:3px 0;color:#d3d3cd;font-size:13px}.cookie-banner button{background:white;border:0;border-radius:999px;padding:10px 16px;font-weight:800}
.flash{padding:12px 15px;border-radius:12px;margin:16px 0}.flash.success{background:#e9f7ed;border:1px solid #b9e2c3;color:#1b6030}.flash.error{background:#fff0f0;border:1px solid #ffd0d0;color:#8c1b1b}
.admin-main{padding-block:35px 70px}.admin-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.admin-heading h1{font-family:var(--font-display);font-weight:650;font-size:52px;margin:2px 0}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.admin-stats>div{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px}.admin-stats span{display:block;color:var(--muted);font-size:12px}.admin-stats strong{font-family:var(--font-display);font-weight:650;font-size:40px}
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.admin-action{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;text-decoration:none}.admin-action span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.login-card{max-width:430px;margin:80px auto;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:30px}.login-card h1{font-family:var(--font-display);font-weight:650;font-size:48px;margin:5px 0 20px}.stack-form{display:grid;gap:14px}
.admin-form{display:grid;grid-template-columns:220px 1fr auto;gap:12px;align-items:end;margin-bottom:22px}.photo-admin-form{grid-template-columns:repeat(3,1fr)}.photo-admin-form .wide{grid-column:1/-1}
.table-wrap{overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px}.admin-table{width:100%;border-collapse:collapse;min-width:760px}.admin-table th,.admin-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.admin-table th{font-size:11px;text-transform:uppercase;color:var(--muted)}.status{display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800}.status.on{background:#e5f4e8;color:#246236}.status.off{background:#efefec;color:#666}
.photo-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.photo-admin-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}.photo-admin-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.photo-admin-card>div{padding:14px}.photo-admin-card h3{margin:4px 0}.photo-admin-card p{font-size:13px;color:var(--muted)}
.calendar-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.schedule-list{display:grid;gap:6px}.schedule-list>div{display:flex;justify-content:space-between;padding:9px 10px;background:var(--bg);border-radius:9px;font-size:13px}hr{border:0;border-top:1px solid var(--line);margin:22px 0}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:50px}.hero-art{height:360px}
  .game-grid,.word-layout,.year-layout,.calendar-grid{grid-template-columns:1fr}.stats-panel{position:static}
  .category-grid{grid-template-columns:repeat(2,1fr)}.seo-band{grid-template-columns:1fr}
  .admin-stats{grid-template-columns:repeat(2,1fr)}.admin-grid,.photo-admin-grid{grid-template-columns:1fr 1fr}
  .finder-form{grid-template-columns:1fr 1fr}.finder-form .btn{grid-column:1/-1}
}
@media(max-width:650px){
  .shell{width:min(100% - 20px,var(--shell))}.nav{height:62px}.nav-links{display:none}.brand{font-size:14px}
  .hero{padding-block:36px}.hero h1{font-size:44px}.hero-copy>p{font-size:16px}.hero-art{height:280px}
  .letter-stack{grid-template-columns:repeat(3,57px)}.tile{font-size:30px}.year-card{width:180px;height:210px}.year-card>span{width:78px;height:78px;font-size:42px}.year-card strong{font-size:31px}
  .section{padding-block:44px}.section-heading{display:block}.section-heading h2,.seo-band h2{font-size:34px}
  .game-grid,.category-grid{grid-template-columns:1fr}.game-card h3{font-size:31px}
  .seo-band{margin-inline:0;border-radius:24px;padding:28px}
  .game-topbar{grid-template-columns:55px 1fr 55px}.game-topbar h1{font-size:36px}.back-link{font-size:0}.back-link::before{content:"\2190";font-size:24px}
  .game-panel,.year-game-card,.stats-panel{padding:15px}.word-board{max-width:320px}.word-tile{font-size:25px}.key{min-width:28px;padding:0 6px;height:49px;font-size:12px}.key.wide{min-width:50px}
  .word-list-grid{grid-template-columns:1fr 1fr}.content-shell h1{font-size:48px}
  .finder-form{grid-template-columns:1fr}.finder-form .btn{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}.cookie-banner{display:block}.cookie-banner button{margin-top:10px}
  .admin-stats,.admin-grid,.photo-admin-grid{grid-template-columns:1fr}.admin-form,.photo-admin-form{grid-template-columns:1fr}.photo-admin-form .wide{grid-column:auto}.admin-heading h1{font-size:42px}
}

/* === PALABRA DEL DIA: TABLERO GRANDE + CRONOMETRO === */
.word-page{
  max-width:980px;
  padding-top:30px;
  padding-bottom:90px
}
.word-page-head{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;
  gap:18px;
  text-align:center;
  margin-bottom:18px
}
.word-back{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  text-decoration:none;
  background:var(--paper);
  font-size:24px;
  line-height:1
}
.word-title-block h1{
  margin:2px 0 2px;
  font-family:var(--font-display);
  font-size:clamp(38px,5.4vw,60px);
  font-weight:740;
  letter-spacing:-.04em;
  line-height:1.04
}
.word-title-block p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px
}
.word-page-head .icon-btn{justify-self:end}

.word-statusbar{
  width:min(100%,620px);
  margin:0 auto 20px;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow-sm)
}
.word-status-item{
  min-height:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  position:relative
}
.word-status-item+ .word-status-item{border-left:1px solid var(--line)}
.word-status-item span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted)
}
.word-status-item strong{
  font-size:20px;
  letter-spacing:-.02em;
  font-weight:800
}
.word-timer-item{
  background:linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%)
}
.word-timer-item strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:30px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  font-weight:700
}

.word-focus{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:30px;
  padding:26px 22px 30px;
  box-shadow:var(--shadow-sm)
}
.word-message{
  min-height:34px;
  margin-bottom:3px;
  font-size:14px;
  opacity:0;
  transform:translateY(-4px);
  transition:.15s
}
.word-message.visible{
  opacity:1;
  transform:translateY(0)
}
/* === TABLEROS RESPONSIVE 3-11 LETRAS === */
/*
 * Sistema unificado: el ancho del tablero se calcula por número de letras
 * con variable --word-length, asegurando casillas proporcionadas en todos
 * los tamaños. Max-width nunca superior a la columna padre.
 */
.word-board.word-board-large{
  /* base para 5 letras */
  width:min(100%, calc(var(--word-length, 5) * 88px));
  max-width:min(92vw, var(--board-max, 470px));
  gap:9px;
  margin-top:0;
  margin-inline:auto;
  margin-bottom:30px;
}
.word-board-large .word-row{
  gap:9px;
}
.word-board-large .word-tile{
  min-width:0;
  border-width:2px;
  border-radius:9px;
  font-size:clamp(30px, 4.4vw, 44px);
  line-height:1;
  font-weight:850;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.015);
  aspect-ratio:1;
}

/* Tamaños específicos por longitud */
.word-board.word-board-large.word-board-3{--board-max:320px;}
.word-board.word-board-large.word-board-4{--board-max:400px;}
.word-board.word-board-large.word-board-5{--board-max:470px;}
.word-board.word-board-large.word-board-medium{--board-max:560px;}
.word-board.word-board-large.word-board-long{--board-max:640px;}
.word-board.word-board-large.word-board-xl{--board-max:710px;}

.word-board-3 .word-tile,
.word-board-4 .word-tile{
  font-size:clamp(30px, 4.2vw, 42px);
}

.word-board-medium .word-tile{
  font-size:clamp(26px, 3.5vw, 38px);
}

.word-board-long .word-row,
.word-board-xl .word-row{
  gap:6px;
}
.word-board-long .word-tile{
  font-size:clamp(22px, 3vw, 32px);
  border-radius:8px;
}
.word-board-xl .word-tile{
  font-size:clamp(19px, 2.6vw, 28px);
  border-radius:7px;
}

/* Tablets pequeñas y móviles grandes */
@media(max-width:760px){
  .word-board.word-board-large{
    width:min(100%, calc(var(--word-length, 5) * 74px));
    gap:8px;
  }
  .word-board-large .word-row{gap:8px;}
  .word-board-large .word-tile{
    font-size:clamp(26px, 8vw, 38px);
    border-radius:8px;
  }
  .word-board-3 .word-tile,
  .word-board-4 .word-tile{
    font-size:clamp(26px, 7.8vw, 36px);
  }
  .word-board-medium .word-tile{
    font-size:clamp(22px, 6.8vw, 32px);
  }
  .word-board-long .word-row,
  .word-board-xl .word-row{gap:5px;}
  .word-board-long .word-tile{
    font-size:clamp(19px, 5.6vw, 27px);
  }
  .word-board-xl .word-tile{
    font-size:clamp(16px, 4.6vw, 23px);
    border-radius:6px;
    border-width:1.5px;
  }
}

/* Móviles pequeños */
@media(max-width:430px){
  .word-board.word-board-large{
    width:min(100%, calc(var(--word-length, 5) * 62px));
    gap:7px;
    padding-inline:2px;
  }
  .word-board-large .word-row{gap:7px;}
  .word-board-large .word-tile{
    font-size:clamp(22px, 9vw, 32px);
    border-radius:7px;
  }
  .word-board-3 .word-tile,
  .word-board-4 .word-tile{
    font-size:clamp(22px, 8.5vw, 30px);
  }
  .word-board-medium .word-tile{
    font-size:clamp(18px, 6vw, 26px);
  }
  .word-board-long .word-row,
  .word-board-xl .word-row{gap:4px;}
  .word-board-long .word-tile{
    font-size:clamp(15px, 4.6vw, 21px);
    border-width:1.5px;
  }
  .word-board-xl .word-tile{
    font-size:clamp(13px, 4vw, 18px);
    border-radius:5px;
    border-width:1.5px;
  }
}

/* Móviles extra pequeños (320px) */
@media(max-width:340px){
  .word-board.word-board-large{
    width:min(100%, calc(var(--word-length, 5) * 52px));
    gap:6px;
  }
  .word-board-large .word-row{gap:6px;}
  .word-board-large .word-tile{
    font-size:clamp(18px, 10vw, 26px);
    border-width:1.5px;
  }
  .word-board-xl .word-tile{
    font-size:clamp(11px, 3.8vw, 15px);
    border-radius:4px;
  }
}

.word-keyboard-wrap{
  width:100%;
  overflow:hidden
}
.keyboard.word-keyboard-large{
  max-width:790px;
  margin:0 auto;
  gap:8px
}
.word-keyboard-large .keyboard-row{
  gap:6px
}
.word-keyboard-large .key{
  height:60px;
  min-width:48px;
  padding:0 13px;
  border-radius:10px;
  font-size:16px;
  font-weight:750;
  background:#e4e2da;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  transition:transform .08s ease, background .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease
}
.word-keyboard-large .key:hover{filter:brightness(.96);transform:translateY(-1px)}
.word-keyboard-large .key:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}
.word-keyboard-large .key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.dark .word-keyboard-large .key{
  background:#3d3f39;
  color:#f5f5ef
}
.word-keyboard-large .key.wide{
  min-width:86px;
  font-size:12px;
  letter-spacing:.01em
}
.word-keyboard-large .key.correct{background:var(--accent-2);color:#fff}
.word-keyboard-large .key.present{background:var(--yellow);color:#fff}
.word-keyboard-large .key.absent{background:#4f504c;color:#fff;border-color:#4f504c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}

.word-stats-section{
  margin-top:22px;
  padding:25px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px
}
.word-stats-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:16px
}
.word-stats-head h2{
  margin:3px 0 0;
  font-family:var(--font-display);
  font-size:34px;
  font-weight:500
}
.word-best-time{
  text-align:right
}
.word-best-time span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em
}
.word-best-time strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:24px;
  font-variant-numeric:tabular-nums
}
.word-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px
}
.word-stats-grid>div{
  text-align:center;
  background:var(--bg);
  border-radius:14px;
  padding:14px 10px
}
.word-stats-grid strong{
  display:block;
  font-family:var(--font-display);font-weight:650;
  font-size:31px;
  line-height:1.1
}
.word-stats-grid span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px
}

.word-result-panel{
  margin-top:20px;
  padding:24px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-sm);
  animation:pdd-fade-up .3s ease
}
.word-result-top{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:start
}
.word-result-top h3{
  margin:4px 0 2px;
  font-family:var(--font-display);
  font-size:clamp(28px,3.6vw,38px);
  font-weight:720;
  letter-spacing:-.03em;
  line-height:1.08
}
.word-result-top p{margin:0;color:var(--muted);font-size:14px}
.word-result-time{
  min-width:140px;
  text-align:right
}
.word-result-time span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em
}
.word-result-time strong{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:30px;
  font-variant-numeric:tabular-nums;
  font-weight:700
}
.word-answer{
  margin:18px 0;
  padding:18px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:16px
}
.word-answer>span{
  display:block;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850
}
.word-answer>strong{
  display:block;
  margin-top:3px;
  font-size:30px;
  letter-spacing:.1em;
  font-weight:800;
  color:var(--accent-2)
}
.word-answer p{margin:8px 0 0;color:var(--muted);font-size:13px}
.word-result-actions{
  display:flex;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap
}
.next-word-box{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:13px
}
.next-word-box strong{
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:18px;
  font-variant-numeric:tabular-nums;
  font-weight:700
}

@media(max-width:760px){
  .word-page{padding-top:18px;padding-bottom:55px}
  .word-page-head{grid-template-columns:44px 1fr 44px;margin-bottom:12px}
  .word-title-block h1{font-size:40px}
  .word-title-block p{font-size:12px}
  .word-statusbar{margin-bottom:12px}
  .word-status-item{min-height:64px}
  .word-timer-item strong{font-size:24px}
  .word-focus{border-radius:22px;padding:14px 8px 18px}
  .keyboard.word-keyboard-large{
    width:100%;
    gap:6px
  }
  .word-keyboard-large .keyboard-row{gap:4px}
  .word-keyboard-large .key{
    height:56px;
    min-width:0;
    flex:1 1 0;
    padding:0 4px;
    font-size:14px;
    border-radius:8px
  }
  .word-keyboard-large .key.wide{
    flex:1.55 1 0;
    min-width:0;
    font-size:10px
  }
  .word-stats-section{padding:18px 12px}
  .word-stats-head{align-items:center}
  .word-stats-head h2{font-size:29px}
  .word-stats-grid{grid-template-columns:repeat(2,1fr)}
  .word-result-top{align-items:center}
  .word-result-time strong{font-size:25px}
}

@media(max-width:430px){
  .word-page{width:calc(100% - 12px)}
  .word-page-head{gap:5px}
  .word-title-block h1{font-size:36px}
  .word-title-block p{display:none}
  .word-back,.word-page-head .icon-btn{
    width:38px;
    height:38px
  }
  .word-statusbar{
    border-radius:13px;
    margin-bottom:8px
  }
  .word-status-item{min-height:55px}
  .word-status-item strong{font-size:16px}
  .word-timer-item strong{font-size:22px}
  .word-focus{
    padding:9px 2px 14px;
    border-left:0;
    border-right:0;
    border-radius:0
  }
  .word-message{min-height:29px}
  .word-board.word-board-large{margin-bottom:18px}
  .word-keyboard-large .key{
    height:52px;
    font-size:13px
  }
  .word-stats-section{
    margin-top:10px;
    border-radius:18px
  }
  .word-stats-head{
    align-items:flex-start;
    margin-bottom:13px
  }
  .word-stats-head h2{font-size:26px}
  .word-best-time strong{font-size:21px}
  .word-result-top{
    display:grid;
    grid-template-columns:1fr auto
  }
  .word-result-time{min-width:92px}
  .word-result-actions .btn{width:100%}
}


/* === ADMIN DICCIONARIO === */
.dictionary-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:18px
}
.dictionary-number-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px
}
.dictionary-number-card span{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800
}
.dictionary-number-card strong{
  display:block;
  margin-top:5px;
  font-family:var(--font-display);font-weight:650;
  font-size:39px;
  line-height:1
}
.dictionary-card{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:30px;
  align-items:center
}
.dictionary-card h2,.dictionary-explain h2{
  margin:5px 0 8px;
  font-family:var(--font-display);
  font-size:34px;
  font-weight:500
}
.dictionary-card p,.dictionary-explain p{
  color:var(--muted)
}
.dictionary-import-box{
  background:var(--bg);
  border-radius:17px;
  padding:18px
}
.dictionary-import-box p{
  font-size:13px
}
.dictionary-last{
  margin-top:16px
}
.dictionary-last-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px
}
.dictionary-last-grid>div{
  background:var(--bg);
  border-radius:12px;
  padding:13px
}
.dictionary-last-grid span{
  display:block;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  font-weight:800
}
.dictionary-last-grid strong{
  display:block;
  margin-top:4px;
  word-break:break-word
}
.dictionary-explain{
  margin-top:16px
}
.dictionary-two-lists{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px
}
.dictionary-two-lists>div{
  background:var(--bg);
  border-radius:15px;
  padding:17px
}
.dictionary-two-lists h3{
  margin:5px 0;
  font-size:22px
}
@media(max-width:760px){
  .dictionary-summary,
  .dictionary-card,
  .dictionary-last-grid,
  .dictionary-two-lists{
    grid-template-columns:1fr
  }
}


/* === FASE COMPETITIVA: INFINITO + RETOS + SOLUCIONES === */
.word-mode-tabs{
  width:min(100%,620px);
  margin:0 auto 10px;
  display:flex;
  justify-content:center;
  gap:6px;
  padding:5px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px
}
.word-mode-tabs a{
  flex:1;
  padding:8px 12px;
  border-radius:999px;
  text-align:center;
  text-decoration:none;
  color:var(--muted);
  font-size:12px;
  font-weight:850
}
.word-mode-tabs a.active{
  background:var(--ink);
  color:var(--bg)
}
.word-result-actions{
  gap:9px;
  flex-wrap:wrap
}
.game-grid-four{
  grid-template-columns:repeat(2,1fr)
}
.infinite-preview{
  height:170px;
  margin-top:26px;
  border-radius:18px;
  background:linear-gradient(135deg,#22392f 0%,#3f6e58 55%,#7da189 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  overflow:hidden;
  position:relative
}
.infinite-preview::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(520px 200px at 82% -18%, rgba(255,255,255,.16), transparent 55%);
  pointer-events:none
}
.infinite-preview>span{
  font-family:var(--font-display);font-weight:700;
  font-size:92px;
  line-height:1
}
.infinite-preview div{
  display:flex;
  flex-direction:column;
  align-items:center
}
.infinite-preview b{
  font-family:var(--font-display);font-weight:700;
  font-size:52px;
  line-height:1
}
.infinite-preview small{
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11px;
  opacity:.85
}
.challenge-preview{
  display:flex;
  gap:8px;
  padding:54px 0 32px
}
.challenge-preview span{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--bg);
  border-radius:14px;
  font-size:26px;
  font-weight:800;
  font-family:var(--font-display);
  box-shadow:var(--shadow-sm)
}
.challenge-preview span:nth-child(odd){background:var(--ink);color:var(--bg)}
.challenge-shell{
  max-width:860px;
  padding-top:55px;
  padding-bottom:90px
}
.challenge-hero{
  text-align:center;
  max-width:720px;
  margin:35px auto
}
.challenge-hero h1,
.challenge-created-card h1{
  margin:8px 0 20px;
  font-family:var(--font-display);
  font-size:clamp(48px,7vw,76px);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.05em
}
.challenge-hero h1 em{
  color:var(--accent);
  font-weight:500
}
.challenge-hero p{
  color:var(--muted);
  font-size:18px
}
.challenge-form{
  max-width:560px;
  margin:0 auto
}
.challenge-form label{
  display:grid;
  gap:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900
}
.challenge-word-input{
  padding:18px 20px;
  text-align:center;
  text-transform:uppercase;
  font-size:32px;
  letter-spacing:.22em;
  font-weight:900
}
.challenge-form p{
  color:var(--muted);
  font-size:13px
}
.challenge-features{
  max-width:560px;
  margin:14px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}
.challenge-features>div{
  padding:14px 8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper)
}
.challenge-features strong{
  display:block;
  font-size:24px
}
.challenge-features span{
  color:var(--muted);
  font-size:11px
}
.challenge-created-card{
  max-width:650px;
  margin:35px auto;
  padding:40px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:28px;
  text-align:center
}
.challenge-created-card p{
  color:var(--muted)
}
.share-url-box{
  display:flex;
  gap:8px;
  margin:24px 0 14px
}
.share-url-box input{
  flex:1
}
.challenge-created-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap
}
.solution-summary{
  grid-template-columns:repeat(4,1fr)
}
.solution-import-card{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  gap:30px;
  margin-bottom:14px
}
.solution-import-card h2,
.calendar-autofill h2{
  margin:4px 0 6px;
  font-family:var(--font-display);
  font-size:32px;
  font-weight:500
}
.solution-import-card p,
.calendar-autofill p{
  color:var(--muted)
}
.solution-import-card form small{
  display:block;
  margin-top:8px;
  color:var(--muted)
}
.solution-explain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:28px
}
.solution-explain-grid .card{
  padding:16px
}
.solution-explain-grid p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px
}
.difficulty-dot{
  width:10px;
  height:10px;
  display:inline-block;
  border-radius:50%;
  margin-right:6px
}
.difficulty-dot.easy{background:#3f865e}
.difficulty-dot.normal{background:#d1a43b}
.difficulty-dot.hard{background:#c55745}
.compact-heading{
  margin-top:22px
}
.compact-heading h2{
  margin:3px 0;
  font-family:var(--font-display);
  font-size:34px;
  font-weight:500
}
.inline-form{
  margin:0
}
.inline-form select{
  min-width:105px;
  padding:7px
}
.calendar-autofill{
  margin-bottom:18px;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:28px;
  align-items:center
}
.autofill-form{
  display:flex;
  align-items:end;
  justify-content:flex-end;
  gap:10px
}
.autofill-form label{
  display:grid;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase
}
@media(max-width:900px){
  .solution-summary{grid-template-columns:repeat(2,1fr)}
  .solution-import-card,
  .calendar-autofill{grid-template-columns:1fr}
  .autofill-form{justify-content:flex-start}
}
@media(max-width:650px){
  .game-grid-four{grid-template-columns:1fr}
  .word-mode-tabs a{font-size:10px;padding:8px 5px}
  .challenge-shell{padding-top:25px}
  .challenge-hero{margin:25px auto}
  .challenge-hero h1,
  .challenge-created-card h1{font-size:46px}
  .challenge-features{grid-template-columns:repeat(2,1fr)}
  .challenge-created-card{padding:24px 16px}
  .share-url-box{display:grid}
  .solution-summary,
  .solution-explain-grid{grid-template-columns:1fr 1fr}
  .autofill-form{display:grid}
}


/* === WHATSAPP SHARING RETOS === */
.whatsapp-btn{
  background:#1f8f55;
  color:#fff;
  border-color:#1f8f55
}
.whatsapp-btn:hover{
  filter:brightness(.96)
}
.whatsapp-icon{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:13px;
  line-height:1;
  font-weight:900
}
.challenge-created-card>.whatsapp-btn{
  margin-top:22px;
  min-height:54px;
  font-size:16px
}
.challenge-share-preview{
  margin-top:22px;
  padding:16px 18px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:15px;
  text-align:left
}
.challenge-share-preview p{
  margin:7px 0 0;
  color:var(--ink);
  font-size:14px;
  line-height:1.65
}
@media(max-width:650px){
  .challenge-created-card>.whatsapp-btn{
    min-height:58px;
    font-size:17px
  }
  .share-url-box{
    margin-top:10px
  }
  .challenge-created-actions{
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .challenge-created-actions .btn:last-child{
    grid-column:1/-1
  }
}


/* === FIX ESTADOS TECLADO EN MODO OSCURO === */
/*
 * body.dark .word-keyboard-large .key tiene más especificidad que
 * .word-keyboard-large .key.absent/correct/present.
 * Por eso en tema oscuro se perdían los colores de estado.
 */
body.dark .word-keyboard-large .key.absent{
  background:#4a4b47;
  color:#fff;
  border-color:#4a4b47;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)
}
body.dark .word-keyboard-large .key.present{
  background:var(--yellow);
  color:#fff;
  border-color:var(--yellow)
}
body.dark .word-keyboard-large .key.correct{
  background:var(--accent-2);
  color:#fff;
  border-color:var(--accent-2)
}


/* === CONTRASTE FUERTE TECLADO OSCURO === */
/* Tecla todavía disponible */
body.dark .word-keyboard-large .key{
  background:#565852;
  color:#ffffff;
  border-color:#565852
}

/* Letra ya probada y descartada: contraste deliberadamente fuerte */
body.dark .word-keyboard-large .key.absent{
  background:#252622 !important;
  color:#8f938b !important;
  border-color:#30312d !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025) !important
}

/* Los estados útiles deben seguir destacando claramente */
body.dark .word-keyboard-large .key.present{
  background:var(--yellow) !important;
  color:#ffffff !important;
  border-color:var(--yellow) !important
}

body.dark .word-keyboard-large .key.correct{
  background:var(--accent-2) !important;
  color:#ffffff !important;
  border-color:var(--accent-2) !important
}


/* === CLASIFICACION DE RETOS === */
.challenge-competition{
  margin:18px 0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper)
}
.challenge-competition.saved{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.challenge-competition h4{
  margin:4px 0;
  font-family:var(--font-display);
  font-size:27px;
  font-weight:500
}
.challenge-competition p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5
}
.challenge-competition-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:14px
}
.challenge-competition-form input{
  min-width:0;
  padding:12px 14px
}
.mini-ranking{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line)
}
.mini-ranking-head{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:6px;
  font-size:12px
}
.mini-ranking-head a{
  color:var(--muted)
}
.mini-ranking-row{
  display:grid;
  grid-template-columns:40px 1fr 55px 70px;
  align-items:center;
  gap:8px;
  min-height:38px;
  border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  font-size:13px
}
.mini-ranking-row.you{
  margin-inline:-7px;
  padding-inline:7px;
  background:color-mix(in srgb,var(--accent-2) 10%,transparent);
  border-radius:8px
}
.mini-ranking-row time{
  text-align:right;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.ranking-page{
  max-width:850px;
  padding-top:42px;
  padding-bottom:90px
}
.ranking-top{
  display:grid;
  grid-template-columns:50px 1fr 50px;
  gap:18px;
  align-items:center;
  text-align:center
}
.ranking-top h1{
  margin:3px 0 4px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(48px,7vw,72px);
  letter-spacing:-.045em;
  line-height:1
}
.ranking-top p{
  margin:10px 0 0;
  color:var(--muted)
}
.ranking-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin:24px 0
}
.ranking-summary>div{
  padding:15px 10px;
  text-align:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px
}
.ranking-summary span{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em
}
.ranking-summary strong{
  display:block;
  margin-top:3px;
  font-family:var(--font-display);
  font-size:28px;
  font-weight:500
}
.ranking-table-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper)
}
.ranking-table-head,
.ranking-row{
  display:grid;
  grid-template-columns:70px 1fr 110px 110px;
  align-items:center;
  gap:10px
}
.ranking-table-head{
  padding:11px 18px;
  background:var(--bg);
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.08em
}
.ranking-row{
  min-height:62px;
  padding:8px 18px;
  border-top:1px solid var(--line)
}
.ranking-position{
  font-size:19px
}
.ranking-name{
  font-weight:850
}
.ranking-row time{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:800
}
.ranking-row.failed{
  opacity:.55
}
.ranking-empty{
  padding:55px 20px;
  text-align:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px
}
.ranking-empty>span{
  font-size:45px
}
.ranking-empty h2{
  margin:12px 0 5px;
  font-family:var(--font-display);
  font-size:34px;
  font-weight:500
}
.ranking-empty p{
  color:var(--muted)
}
.ranking-actions{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:18px
}
@media(max-width:650px){
  .challenge-competition.saved{
    display:block
  }
  .challenge-competition.saved .btn{
    width:100%;
    margin-top:12px
  }
  .challenge-competition-form{
    grid-template-columns:1fr
  }
  .ranking-page{
    padding-top:22px
  }
  .ranking-top{
    grid-template-columns:40px 1fr 40px;
    gap:5px
  }
  .ranking-top h1{
    font-size:44px
  }
  .ranking-top p{
    font-size:12px
  }
  .ranking-summary{
    grid-template-columns:repeat(2,1fr)
  }
  .ranking-table-head,
  .ranking-row{
    grid-template-columns:43px 1fr 58px 66px;
    gap:5px
  }
  .ranking-table-head{
    padding-inline:10px;
    font-size:9px
  }
  .ranking-row{
    padding-inline:10px;
    min-height:56px;
    font-size:12px
  }
  .ranking-position{
    font-size:16px
  }
  .ranking-actions{
    display:grid
  }
}


/* === FIX BANNER COOKIES HIDDEN === */
/*
 * La clase .cookie-banner define display:flex, por lo que el atributo
 * HTML hidden quedaba anulado por la hoja de estilos del sitio.
 */
.cookie-banner[hidden]{
  display:none !important
}


/* === CUENTA OPCIONAL + PROGRESO === */
.progress-nav-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:999px;
  text-decoration:none;
  font-size:12px;
  color:var(--muted)
}
.progress-nav-link span{
  color:var(--accent-2);
  font-size:16px;
  line-height:1
}
.progress-nav-link b{
  max-width:105px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.account-shell{
  min-height:calc(100vh - 150px);
  display:grid;
  place-items:center;
  padding-block:55px 80px
}
.account-card{
  width:min(100%,520px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:30px;
  padding:34px;
  box-shadow:var(--shadow)
}
.account-back{
  display:inline-block;
  margin-bottom:28px;
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
  font-weight:800
}
.account-card h1{
  margin:7px 0 13px;
  font-family:var(--font-display);
  font-size:52px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.045em
}
.account-lead{
  margin:0 0 24px;
  color:var(--muted)
}
.account-form label{
  text-transform:none;
  font-size:12px
}
.account-form input{
  min-height:48px;
  background:var(--bg)
}
.account-switch{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:20px;
  font-size:13px;
  color:var(--muted)
}
.account-switch a{
  color:var(--ink);
  font-weight:850
}
.continue-without{
  display:block;
  text-align:center;
  margin-top:13px;
  color:var(--muted);
  font-size:12px
}
.account-privacy-note{
  display:grid;
  gap:2px;
  margin-top:16px;
  padding:13px 15px;
  background:var(--bg);
  border-radius:13px;
  font-size:12px
}
.account-privacy-note span{
  color:var(--muted)
}
.progress-page{
  max-width:1050px;
  padding-top:45px;
  padding-bottom:90px
}
.progress-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:22px
}
.progress-head h1{
  margin:3px 0 6px;
  font-family:var(--font-display);
  font-size:clamp(48px,6vw,70px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1
}
.progress-head p{
  margin:0;
  color:var(--muted)
}
.player-chip{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:190px;
  padding:10px 13px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px
}
.player-avatar{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--font-display);font-weight:650;
  font-size:20px;
  text-transform:uppercase
}
.player-chip strong,
.player-chip small{
  display:block
}
.player-chip small{
  color:var(--muted);
  font-size:10px
}
.progress-sync-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:18px 20px;
  border-radius:18px;
  margin-bottom:16px;
  border:1px solid var(--line)
}
.progress-sync-banner.synced{
  background:color-mix(in srgb,var(--accent-2) 9%,var(--paper))
}
.progress-sync-banner.local-only{
  background:var(--paper)
}
.progress-sync-banner p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:13px
}
.progress-stats-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  margin-bottom:16px
}
.progress-stats-grid>div{
  min-width:0;
  padding:15px 10px;
  text-align:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:15px
}
.progress-stats-grid span{
  display:block;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:850
}
.progress-stats-grid strong{
  display:block;
  margin-top:3px;
  font-family:var(--font-display);
  font-size:28px;
  font-weight:500
}
.progress-main-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:14px
}
.progress-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  margin-bottom:14px
}
.progress-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.progress-card h2{
  margin:4px 0 0;
  font-family:var(--font-display);
  font-size:31px;
  font-weight:500
}
.calendar-nav{
  display:flex;
  gap:6px
}
.progress-calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:7px;
  margin-top:18px
}
.calendar-weekday{
  text-align:center;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  padding-bottom:3px
}
.calendar-day{
  aspect-ratio:1;
  min-height:54px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:7px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg);
  font-size:12px
}
.calendar-day small{
  align-self:flex-end;
  font-weight:900
}
.calendar-day.won{
  background:color-mix(in srgb,var(--accent-2) 19%,var(--paper));
  border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line))
}
.calendar-day.lost{
  background:color-mix(in srgb,#7a7b76 18%,var(--paper))
}
.calendar-day.future{
  opacity:.35
}
.calendar-day.spacer{
  visibility:hidden
}
.calendar-legend{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-top:13px;
  color:var(--muted);
  font-size:10px
}
.calendar-legend span{
  display:flex;
  align-items:center;
  gap:5px
}
.calendar-legend i{
  width:10px;
  height:10px;
  display:inline-block;
  border-radius:3px;
  border:1px solid var(--line)
}
.calendar-legend i.won{background:var(--accent-2)}
.calendar-legend i.lost{background:#6d6e69}
.calendar-legend i.empty{background:var(--bg)}
.attempt-distribution{
  display:grid;
  gap:9px;
  margin-top:20px
}
.attempt-row{
  display:grid;
  grid-template-columns:18px 1fr 30px;
  align-items:center;
  gap:8px;
  font-size:12px
}
.attempt-row>div{
  height:26px;
  display:flex;
  align-items:center;
  background:var(--bg);
  border-radius:6px;
  overflow:hidden
}
.attempt-row i{
  height:100%;
  display:block;
  background:var(--accent-2);
  border-radius:6px
}
.attempt-row strong{
  text-align:right
}
.achievement-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
  margin-top:16px
}
.achievement{
  min-height:112px;
  padding:14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--bg)
}
.achievement>span{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--paper);
  font-weight:900
}
.achievement strong,
.achievement small{
  display:block
}
.achievement small{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4
}
.achievement.locked{
  opacity:.45;
  filter:grayscale(1)
}
.achievement.unlocked{
  border-color:color-mix(in srgb,var(--accent-2) 42%,var(--line));
  background:color-mix(in srgb,var(--accent-2) 8%,var(--paper))
}
.recent-results{
  margin-top:14px;
  border-top:1px solid var(--line)
}
.recent-result{
  display:grid;
  grid-template-columns:80px 1fr 70px 80px;
  gap:12px;
  align-items:center;
  min-height:48px;
  border-bottom:1px solid var(--line);
  font-size:13px
}
.recent-result time{
  color:var(--muted);
  font-size:10px;
  font-weight:800
}
.recent-result>span,
.recent-result>b{
  text-align:right
}
.recent-result>b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.recent-result.lost{
  opacity:.58
}
.progress-empty{
  padding:25px 10px;
  color:var(--muted);
  text-align:center
}
.infinite-progress-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.infinite-progress-card p{
  margin:4px 0 0;
  color:var(--muted)
}
.infinite-progress-numbers{
  display:flex;
  gap:8px
}
.infinite-progress-numbers>div{
  min-width:95px;
  padding:11px;
  text-align:center;
  background:var(--bg);
  border-radius:12px
}
.infinite-progress-numbers strong,
.infinite-progress-numbers span{
  display:block
}
.infinite-progress-numbers strong{
  font-family:var(--font-display);font-weight:650;
  font-size:24px
}
.infinite-progress-numbers span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase
}
.progress-result-nudge{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:16px 0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--paper)
}
.progress-result-nudge>div{
  display:flex;
  align-items:center;
  gap:9px
}
.progress-result-nudge>div>span{
  font-size:22px;
  color:var(--accent-2)
}
.progress-result-nudge p{
  margin:0
}
.progress-result-nudge strong,
.progress-result-nudge small{
  display:block
}
.progress-result-nudge small{
  color:var(--muted);
  font-size:10px
}
.progress-result-nudge>a{
  flex:0 0 auto;
  font-size:11px;
  font-weight:850
}
.progress-result-nudge.synced{
  background:color-mix(in srgb,var(--accent-2) 8%,var(--paper))
}

@media(max-width:900px){
  .progress-stats-grid{
    grid-template-columns:repeat(3,1fr)
  }
  .progress-main-grid{
    grid-template-columns:1fr
  }
  .achievement-grid{
    grid-template-columns:repeat(3,1fr)
  }
}
@media(max-width:650px){
  .progress-nav-link{
    margin-left:auto;
    padding:7px 9px
  }
  .progress-nav-link b{
    display:none
  }
  .account-shell{
    padding-block:20px 50px
  }
  .account-card{
    padding:24px 16px;
    border-radius:22px
  }
  .account-card h1{
    font-size:43px
  }
  .progress-page{
    padding-top:25px
  }
  .progress-head{
    display:block
  }
  .player-chip{
    margin-top:14px;
    width:max-content
  }
  .progress-sync-banner{
    display:block
  }
  .progress-sync-banner .btn,
  .progress-sync-banner form{
    width:100%;
    margin-top:12px
  }
  .progress-stats-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .progress-card{
    padding:16px 10px
  }
  .calendar-day{
    min-height:42px;
    padding:5px;
    border-radius:8px
  }
  .achievement-grid{
    grid-template-columns:1fr
  }
  .achievement{
    min-height:auto
  }
  .recent-result{
    grid-template-columns:62px 1fr 45px 55px;
    gap:5px;
    font-size:11px
  }
  .infinite-progress-card{
    display:block
  }
  .infinite-progress-numbers{
    margin-top:13px
  }
  .infinite-progress-numbers>div{
    flex:1;
    min-width:0
  }
  .progress-result-nudge{
    display:block
  }
  .progress-result-nudge>a{
    display:inline-block;
    margin-top:8px
  }
}


/* === FASE 1 FINAL: COMUNIDAD + RANKING GLOBAL === */
.daily-community-result{
  margin:17px 0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--paper)
}
.daily-community-loading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.daily-community-loading strong{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:500
}
.daily-community-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.daily-community-head h4{
  margin:3px 0;
  font-family:var(--font-display);
  font-size:28px;
  font-weight:500
}
.daily-community-head p{
  margin:0;
  color:var(--muted);
  font-size:12px
}
.community-position{
  min-width:120px;
  padding:10px 14px;
  text-align:center;
  border-radius:13px;
  background:color-mix(in srgb,var(--accent-2) 11%,var(--bg))
}
.community-position span,
.community-position small{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:850
}
.community-position strong{
  display:block;
  margin:2px 0;
  font-family:var(--font-display);font-weight:650;
  font-size:29px;
  line-height:1
}
.community-position.not-solved{
  background:var(--bg)
}
.daily-community-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:12px;
  margin-top:14px
}
.daily-community-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px
}
.daily-community-metrics>div{
  padding:10px 7px;
  text-align:center;
  background:var(--bg);
  border-radius:10px
}
.daily-community-metrics span{
  display:block;
  color:var(--muted);
  font-size:8px;
  font-weight:850;
  text-transform:uppercase
}
.daily-community-metrics strong{
  display:block;
  margin-top:3px;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:500
}
.daily-mini-ranking{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px
}
.daily-mini-ranking-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
  font-size:10px
}
.daily-mini-ranking-head a{
  color:var(--muted)
}
.daily-mini-rank{
  display:grid;
  grid-template-columns:34px 1fr 48px 57px;
  gap:6px;
  align-items:center;
  min-height:31px;
  border-top:1px solid var(--line);
  font-size:10px
}
.daily-mini-rank time{
  text-align:right;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.daily-mini-rank.you{
  font-weight:850
}
.community-public-name{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  font-size:11px
}
.community-public-name small{
  display:block;
  margin-top:2px;
  color:var(--muted)
}
.community-name-form{
  display:flex;
  gap:6px
}
.community-name-form input{
  width:150px;
  min-height:36px;
  padding:7px 9px
}
.daily-ranking-page{
  max-width:1020px;
  padding-top:42px;
  padding-bottom:90px
}
.daily-ranking-head{
  display:grid;
  grid-template-columns:50px 1fr 50px;
  align-items:center;
  gap:15px;
  text-align:center
}
.daily-ranking-head h1{
  margin:3px 0 5px;
  font-family:var(--font-display);
  font-size:clamp(45px,6.5vw,70px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.045em
}
.daily-ranking-head p{
  margin:8px 0 0;
  color:var(--muted)
}
.ranking-spoiler-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:18px 0 0;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--paper);
  color:var(--muted);
  font-size:11px
}
.ranking-spoiler-note strong{
  color:var(--ink)
}
.community-summary-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:20px 0 14px
}
.community-summary-grid>div{
  padding:14px 8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper)
}
.community-summary-grid span{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em
}
.community-summary-grid strong{
  display:block;
  margin-top:4px;
  font-family:var(--font-display);
  font-size:27px;
  font-weight:500
}
.community-summary-grid .difficulty-text{
  font-size:21px
}
.daily-ranking-layout{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:14px
}
.daily-global-table{
  align-self:start
}
.ranking-name small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
  font-weight:500
}
.community-ranking-empty{
  display:grid;
  gap:4px;
  padding:45px 18px;
  text-align:center;
  color:var(--muted)
}
.community-ranking-empty strong{
  color:var(--ink);
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500
}
.community-distribution-card{
  margin:0;
  align-self:start
}
.community-distribution{
  display:grid;
  gap:9px;
  margin-top:18px
}
.community-distribution-row{
  display:grid;
  grid-template-columns:18px 1fr 32px;
  align-items:center;
  gap:7px;
  font-size:11px
}
.community-distribution-row>div{
  height:25px;
  overflow:hidden;
  border-radius:6px;
  background:var(--bg)
}
.community-distribution-row i{
  display:block;
  height:100%;
  border-radius:6px;
  background:var(--accent-2)
}
.community-distribution-row.failed i{
  background:#646560
}
.community-distribution-row strong{
  text-align:right
}
.community-side-note{
  margin-top:18px;
  padding:13px;
  text-align:center;
  border-radius:12px;
  background:var(--bg)
}
.community-side-note strong,
.community-side-note span{
  display:block
}
.community-side-note strong{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500
}
.community-side-note span{
  margin-top:2px;
  color:var(--muted);
  font-size:10px
}

@media(max-width:800px){
  .daily-community-grid{
    grid-template-columns:1fr
  }
  .community-summary-grid{
    grid-template-columns:repeat(3,1fr)
  }
  .daily-ranking-layout{
    grid-template-columns:1fr
  }
}
@media(max-width:650px){
  .daily-community-head{
    align-items:flex-start
  }
  .daily-community-head h4{
    font-size:23px
  }
  .community-position{
    min-width:95px
  }
  .daily-community-metrics{
    grid-template-columns:repeat(3,1fr)
  }
  .community-public-name{
    display:block
  }
  .community-name-form{
    margin-top:9px
  }
  .community-name-form input{
    width:100%;
    min-width:0
  }
  .daily-ranking-page{
    padding-top:22px
  }
  .daily-ranking-head{
    grid-template-columns:40px 1fr 40px;
    gap:5px
  }
  .daily-ranking-head h1{
    font-size:42px
  }
  .ranking-spoiler-note{
    display:block;
    text-align:center
  }
  .ranking-spoiler-note .btn{
    display:block;
    width:100%;
    margin-top:8px
  }
  .community-summary-grid{
    grid-template-columns:repeat(2,1fr)
  }
}


/* === QUE ANO FUE · FASE REAL 1 === */
.year-experience{max-width:1240px;padding-top:35px;padding-bottom:90px}
.year-experience-head{display:grid;grid-template-columns:52px 1fr 52px;gap:18px;align-items:center;text-align:center;margin-bottom:24px}
.year-experience-head h1{margin:3px 0 6px;font-family:var(--font-display);font-size:clamp(46px,6vw,72px);font-weight:500;letter-spacing:-.05em;line-height:1}
.year-experience-head p{margin:0;color:var(--muted);font-size:13px}
.year-game-pro{display:grid;grid-template-columns:minmax(0,880px) 280px;gap:18px;align-items:start}
.year-stage-card,.year-score-card,.year-how-card,.year-content-note{background:var(--paper);border:1px solid var(--line);border-radius:22px}
.year-stage-card{padding:18px}
.year-stage-meta{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:1px 4px 12px;color:var(--muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.year-stage-meta>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.year-stage-meta>strong{color:var(--ink);font-size:13px}
.year-category-chip,.year-difficulty-chip{padding:4px 7px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:9px}
.year-difficulty-chip[data-level="1"]{background:color-mix(in srgb,var(--accent-2) 11%,var(--paper))}
.year-difficulty-chip[data-level="3"]{background:color-mix(in srgb,#a75845 12%,var(--paper))}
.year-photo-cinematic{aspect-ratio:16/9;margin:0;border-radius:18px;background:#151613;box-shadow:none}
.year-photo-cinematic img{opacity:0;transition:opacity .25s ease;object-fit:contain;background:#151613}
.year-photo-cinematic img.loaded{opacity:1}
.year-controls-pro{max-width:720px;margin:18px auto 3px}
.year-controls-pro .year-choice{margin-bottom:1px}
.year-controls-pro .year-choice strong{font-size:clamp(62px,8vw,86px);line-height:1;letter-spacing:-.04em}
.year-controls-pro input[type=range]{height:28px;margin:13px 0 4px}
.year-controls-pro .range-labels{margin-bottom:13px}
.year-confirm{min-height:48px;font-weight:900}
.year-side-panel{display:grid;gap:12px;position:sticky;top:90px}
.year-score-card,.year-how-card,.year-content-note{padding:18px}
.year-score-card .score-big{margin:8px 0 13px}
.year-score-card .score-big strong{font-size:44px}
.year-round-history{display:grid;gap:6px}
.year-history-item{display:grid;grid-template-columns:26px 1fr 48px;align-items:center;gap:7px;min-height:42px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.year-history-item>span{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:var(--paper);font-size:10px;font-weight:900}
.year-history-item div strong,.year-history-item div small{display:inline}
.year-history-item div small{margin-left:4px;color:var(--muted)}
.year-history-item>b{text-align:right;font-size:11px}
.year-history-item.pending{opacity:.42}
.year-history-item.great{border-color:color-mix(in srgb,var(--accent-2) 45%,var(--line));background:color-mix(in srgb,var(--accent-2) 8%,var(--paper))}
.year-history-item.good{border-color:color-mix(in srgb,#d2a33b 45%,var(--line))}
.year-how-card>strong{display:inline-block;margin-top:9px;font-family:var(--font-display);font-size:31px;font-weight:500}
.year-how-card>span{font-size:11px;color:var(--muted)}
.year-how-card p,.year-content-note p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.year-feedback-pro{margin-top:18px;padding:18px;background:var(--bg);border:1px solid var(--line);border-radius:17px}
.year-reveal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.year-reveal-head h2{margin:3px 0 4px;font-family:var(--font-display);font-size:clamp(29px,4vw,42px);font-weight:500;letter-spacing:-.035em;line-height:1}
.year-reveal-head p{margin:0;color:var(--muted);font-size:11px}
.year-answer-badge{flex:0 0 auto;min-width:135px;padding:10px 13px;text-align:center;border-radius:13px;background:var(--paper);border:1px solid var(--line)}
.year-answer-badge span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;font-weight:900}
.year-answer-badge strong{display:block;font-family:var(--font-display);font-size:35px;font-weight:500}
.year-result-comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.year-result-comparison>div{padding:10px;text-align:center;border-radius:11px;background:var(--paper);border:1px solid var(--line)}
.year-result-comparison span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;font-weight:900}
.year-result-comparison strong{display:block;margin-top:2px;font-family:var(--font-display);font-size:24px;font-weight:500}
.year-result-comparison .points strong{color:var(--accent-2)}
.year-direction{margin:0 0 8px;font-size:11px;color:var(--muted)}
.year-event-summary{margin:0 0 14px;font-family:var(--font-display);font-weight:650;font-size:18px;line-height:1.45}
.year-attribution{padding:11px 12px;margin-bottom:13px;border-radius:11px;background:var(--paper);border:1px solid var(--line);font-size:9px;color:var(--muted)}
.year-attribution strong{display:block;margin:3px 0;color:var(--ink);font-size:10px}
.year-attribution a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.year-final-pro{text-align:center;padding:30px 18px;background:var(--bg);border:1px solid var(--line);border-radius:18px;margin-top:0}
.year-final-pro h2{margin:7px 0 8px;font-family:var(--font-display);font-size:clamp(35px,5vw,55px);font-weight:500;letter-spacing:-.04em}
.year-final-score strong{font-family:var(--font-display);font-size:clamp(62px,9vw,94px);font-weight:500;line-height:1}
.year-final-score span{color:var(--muted)}
.year-final-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:620px;margin:20px auto}
.year-final-metrics>div{padding:11px;border:1px solid var(--line);border-radius:11px;background:var(--paper)}
.year-final-metrics span,.year-final-metrics strong{display:block}.year-final-metrics span{color:var(--muted);font-size:9px;text-transform:uppercase;font-weight:850}.year-final-metrics strong{margin-top:2px}
.year-final-rounds{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:680px;margin:0 auto 20px}
.year-final-rounds>div{padding:9px 5px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.year-final-rounds span,.year-final-rounds strong,.year-final-rounds small{display:block}.year-final-rounds span{color:var(--muted);font-size:8px;font-weight:900}.year-final-rounds strong{font-family:var(--font-display);font-weight:650;font-size:20px}.year-final-rounds small{color:var(--muted);font-size:8px}
.year-final-actions{display:flex;justify-content:center;gap:8px}

/* Admin de fotografías históricas */
.photo-admin-heading p{margin:4px 0 0;color:var(--muted)}
.photo-content-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.photo-content-stats>div{padding:13px;text-align:center;border:1px solid var(--line);border-radius:13px;background:var(--paper)}
.photo-content-stats span,.photo-content-stats strong{display:block}.photo-content-stats span{color:var(--muted);font-size:9px;text-transform:uppercase;font-weight:850}.photo-content-stats strong{font-family:var(--font-display);font-size:27px;font-weight:500}
.commons-starter-card{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:14px;padding:20px}
.commons-starter-card h2,.photo-import-grid h2,.photo-library-head h2{margin:4px 0;font-family:var(--font-display);font-size:27px;font-weight:500}
.commons-starter-copy>p{max-width:740px;color:var(--muted);font-size:12px}
.commons-starter-card form{text-align:right;flex:0 0 auto}.commons-starter-card form small{display:block;margin-top:6px;color:var(--muted);font-size:9px}
.category-readiness{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.category-readiness span{padding:5px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:9px}.category-readiness span.ready{background:color-mix(in srgb,var(--accent-2) 10%,var(--paper));color:var(--ink)}
.photo-import-grid{align-items:start;margin-bottom:20px}.photo-import-grid .card{margin:0}.photo-import-grid textarea{resize:vertical;min-height:82px}.photo-import-grid .muted{font-size:11px}
.photo-library-head{display:flex;justify-content:space-between;align-items:end;margin:25px 0 12px}.photo-library-head>span{color:var(--muted);font-size:10px}
.photo-admin-grid-pro{grid-template-columns:repeat(3,minmax(0,1fr))}
.photo-admin-card{overflow:hidden}.photo-admin-image{position:relative;aspect-ratio:16/10;background:#181916}.photo-admin-image img{width:100%;height:100%;object-fit:cover}.photo-badges{position:absolute;left:8px;top:8px;display:flex;gap:4px;flex-wrap:wrap}.photo-badges span{padding:4px 6px;border-radius:999px;background:rgba(20,20,18,.78);color:#fff;font-size:8px;font-weight:900;backdrop-filter:blur(5px)}.photo-badges span.real{background:rgba(38,105,69,.88)}.photo-badges span.demo{background:rgba(153,101,38,.88)}.photo-badges span.off{background:rgba(128,57,57,.9)}
.photo-admin-body{padding:13px}.photo-admin-body h3{margin:4px 0 5px}.photo-admin-body>p{min-height:48px;margin:0;color:var(--muted);font-size:10px;line-height:1.5}.photo-license-mini{display:grid;gap:2px;margin-top:9px;padding:8px;border-radius:9px;background:var(--bg);font-size:8px}.photo-license-mini span{color:var(--muted)}.photo-license-mini a{color:var(--muted);text-decoration:underline}.photo-admin-actions{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-top:9px}.photo-admin-actions form{margin:0}.photo-admin-actions select{min-height:34px;padding:5px 8px;font-size:9px}.photo-admin-card.is-inactive{opacity:.55}

@media(max-width:1000px){.year-game-pro{grid-template-columns:1fr}.year-side-panel{position:static;grid-template-columns:1fr 1fr}.year-score-card{grid-row:span 2}.photo-admin-grid-pro{grid-template-columns:repeat(2,minmax(0,1fr))}.commons-starter-card{align-items:flex-start}}
@media(max-width:700px){.year-experience{padding-top:20px}.year-experience-head{grid-template-columns:40px 1fr 40px;gap:5px}.year-experience-head h1{font-size:42px}.year-experience-head p{font-size:11px}.year-stage-card{padding:9px}.year-photo-cinematic{border-radius:13px;aspect-ratio:4/3}.year-stage-meta{padding:2px 2px 8px}.year-controls-pro{padding-inline:5px}.year-controls-pro .year-choice strong{font-size:66px}.year-side-panel{grid-template-columns:1fr}.year-score-card{grid-row:auto}.year-reveal-head{display:block}.year-answer-badge{margin-top:10px}.year-result-comparison{grid-template-columns:repeat(3,1fr)}.year-event-summary{font-size:16px}.year-final-metrics{grid-template-columns:1fr}.year-final-rounds{grid-template-columns:repeat(5,1fr)}.year-final-actions{display:grid}.photo-content-stats{grid-template-columns:repeat(2,1fr)}.commons-starter-card{display:block}.commons-starter-card form{text-align:left;margin-top:13px}.photo-admin-grid-pro{grid-template-columns:1fr}}


/* === QUE ANO FUE: MODOS + TEMPORADA === */
.year-mode-section{
  margin:24px 0 18px
}
.year-mode-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:11px
}
.year-mode-heading h2{
  margin:3px 0 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:30px
}
.year-season-badge{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em
}
.year-mode-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px
}
.year-mode-card{
  min-width:0;
  min-height:105px;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  text-decoration:none;
  transition:transform .15s ease,border-color .15s ease,background .15s ease
}
.year-mode-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--ink) 28%,var(--line))
}
.year-mode-card.active{
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)
}
.year-mode-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--bg);
  font-size:17px
}
.year-mode-card strong{
  display:block;
  font-size:12px
}
.year-mode-card small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
  line-height:1.35
}
.year-mode-card b{
  margin-top:auto;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.04em
}
.year-mode-card.active .year-mode-icon{
  background:var(--ink);
  color:var(--bg)
}
.year-runway-admin{
  margin-bottom:18px
}
.year-runway-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px
}
.year-runway-head h2{
  margin:3px 0 5px
}
.year-runway-head p{
  margin:0;
  max-width:720px;
  color:var(--muted)
}
.year-runway-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto
}
.year-runway-form select{
  width:auto;
  min-width:105px
}
.year-runway-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  margin-top:16px
}
.year-runway-grid>div{
  padding:11px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg)
}
.year-runway-grid span,
.year-runway-grid strong,
.year-runway-grid small{
  display:block
}
.year-runway-grid span{
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase
}
.year-runway-grid strong{
  margin-top:3px;
  font-size:15px
}
.year-runway-grid small{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  line-height:1.35
}
@media(max-width:1100px){
  .year-mode-grid,
  .year-runway-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}
@media(max-width:700px){
  .year-mode-heading,
  .year-runway-head{
    display:block
  }
  .year-season-badge{
    display:inline-block;
    margin-top:8px
  }
  .year-mode-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:5px
  }
  .year-mode-card{
    flex:0 0 150px;
    scroll-snap-align:start
  }
  .year-runway-form{
    margin-top:12px
  }
  .year-runway-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}


/* === SEO FASE 1 === */
.seo-editorial{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:30px;
  align-items:start;
  padding-top:20px;
  padding-bottom:70px
}
.seo-editorial-main{
  max-width:760px
}
.seo-editorial-main h2,
.year-seo-copy h2,
.word-seo-copy h2,
.word-list-seo-copy h2,
.finder-seo-help h2{
  margin:5px 0 13px;
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.025em
}
.seo-editorial-main h2{
  font-size:clamp(34px,4.5vw,52px)
}
.seo-editorial-main p,
.year-seo-copy p,
.word-seo-copy p,
.word-list-seo-copy p,
.finder-seo-help p{
  color:var(--muted);
  line-height:1.7
}
.seo-editorial-links{
  display:grid;
  gap:5px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--paper)
}
.seo-editorial-links>strong{
  margin-bottom:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em
}
.seo-editorial-links a{
  padding:9px 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  font-weight:750
}
.year-seo-copy,
.word-seo-copy{
  display:grid;
  grid-template-columns:1fr 230px;
  gap:28px;
  margin-top:28px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper)
}
.word-seo-copy{
  display:block
}
.year-seo-copy h2,
.word-seo-copy h2{
  font-size:32px
}
.year-seo-related{
  display:grid;
  align-content:start;
  gap:4px
}
.year-seo-related>strong{
  margin-bottom:5px;
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em
}
.year-seo-related a{
  padding:7px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:12px;
  font-weight:750
}
.seo-inline-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:15px
}
.seo-inline-links a{
  font-size:12px;
  font-weight:800
}
.word-list-seo-copy,
.finder-seo-help{
  margin-top:30px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper)
}
.word-list-seo-copy h2,
.finder-seo-help h2{
  font-size:29px
}
.finder-seo-help code{
  padding:2px 5px;
  border-radius:5px;
  background:var(--bg)
}
@media(max-width:760px){
  .seo-editorial,
  .year-seo-copy{
    grid-template-columns:1fr
  }
  .seo-editorial{
    gap:18px
  }
  .year-seo-copy,
  .word-seo-copy{
    padding:17px
  }
}

/* === SELECTOR LONGITUD 3-11 === */
.word-length-switcher{
  width:min(100%,620px);
  margin:0 auto 14px;
  display:flex;
  justify-content:center;
  gap:4px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  box-shadow:var(--shadow-sm)
}
.word-length-switcher a{
  flex:1;
  min-width:0;
  padding:9px 4px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  text-align:center;
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  transition:background .15s ease, color .15s ease
}
.word-length-switcher a:hover{
  background:var(--bg);
  color:var(--ink)
}
.word-length-switcher a.active{
  background:var(--ink);
  color:var(--bg);
  font-weight:850
}
/* Las reglas de ancho/tamano de tablero estan en la seccion unificada
   "TABLEROS RESPONSIVE 3-11 LETRAS" (mas arriba). */
.challenge-length-fieldset{
  margin:0 0 18px;
  padding:0;
  border:0
}
.challenge-length-fieldset legend{
  margin-bottom:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900
}
.challenge-length-options{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:5px
}
.challenge-length-options label{
  display:block
}
.challenge-length-options input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.challenge-length-options span{
  display:grid;
  place-items:center;
  min-height:42px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
  cursor:pointer;
  font-weight:900
}
.challenge-length-options input:checked + span{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--bg)
}
.dictionary-length-card{
  margin-bottom:18px
}
.dictionary-length-card h2{
  margin:5px 0 14px
}
.dictionary-length-grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:7px
}
.dictionary-length-grid>div{
  padding:12px 8px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg);
  text-align:center
}
.dictionary-length-grid span,
.dictionary-length-grid strong{
  display:block
}
.dictionary-length-grid span{
  color:var(--muted);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase
}
.dictionary-length-grid strong{
  margin-top:4px;
  font-size:16px
}
.dictionary-length-grid .pending{
  opacity:.55
}
.admin-length-tabs{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:6px;
  margin:0 0 16px
}
.admin-length-tabs a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 5px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  text-decoration:none;
  font-weight:900
}
.admin-length-tabs a small{
  color:var(--muted);
  font-size:8px
}
.admin-length-tabs a.active{
  background:var(--ink);
  color:var(--bg)
}
.admin-length-tabs a.active small{
  color:inherit;
  opacity:.72
}
.word-unavailable-card{
  max-width:720px;
  margin:30px auto;
  text-align:center
}
.word-unavailable-card h1{
  margin:5px 0 10px;
  font-family:var(--font-display);font-weight:650;
  font-size:56px
}
.word-unavailable-card .word-length-switcher{
  margin-top:22px
}
.home-word-lengths{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:24px;
  align-items:center
}
.home-word-lengths h2{
  margin:5px 0 10px;
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,48px);
  font-weight:500
}
.home-word-length-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.home-word-length-grid a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:66px;
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--paper);
  text-decoration:none
}
.home-word-length-grid strong{
  font-size:20px
}
.home-word-length-grid span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase
}
@media(max-width:760px){
  .word-length-switcher{
    overflow-x:auto;
    scrollbar-width:none;
    padding:5px
  }
  .word-length-switcher::-webkit-scrollbar{display:none}
  .word-length-switcher a{
    flex:0 0 auto;
    min-width:44px;
    padding:9px 10px
  }
  .challenge-length-options{
    grid-template-columns:repeat(5,1fr)
  }
  .dictionary-length-grid,
  .admin-length-tabs{
    grid-template-columns:repeat(3,1fr)
  }
  .home-word-lengths{
    grid-template-columns:1fr
  }
}
@media(max-width:430px){
  .home-word-length-grid{
    grid-template-columns:repeat(2,1fr)
  }
}
.progress-word-length-grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:7px
}
.progress-length-item{
  display:grid;
  gap:3px;
  padding:12px 8px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg);
  text-align:center;
  text-decoration:none
}
.progress-length-item strong{
  font-size:19px
}
.progress-length-item span,
.progress-length-item small{
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase
}
.progress-length-item b{
  font-size:13px
}
@media(max-width:760px){
  .progress-word-length-grid{grid-template-columns:repeat(3,1fr)}
}


/* === RETO: LONGITUD AUTOMATICA === */
.challenge-auto-word-label{
  margin:0
}
.challenge-auto-word-wrap{
  position:relative;
  margin-top:8px
}
.challenge-auto-word-wrap .challenge-word-input{
  padding-right:185px;
  text-transform:uppercase;
  letter-spacing:.08em
}
.challenge-length-detected{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  max-width:165px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--muted);
  font-size:9px;
  line-height:1.15;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.035em;
  pointer-events:none
}
.challenge-length-detected.valid{
  border-color:#2f7d5c;
  color:#246247;
  background:color-mix(in srgb,#2f7d5c 10%,var(--bg))
}
.challenge-length-detected.invalid{
  border-color:#a74a42;
  color:#8c3b35;
  background:color-mix(in srgb,#a74a42 9%,var(--bg))
}
.challenge-auto-hint{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  margin:10px 0 0;
  color:var(--muted);
  font-size:10px;
  font-weight:750
}
.challenge-dictionary-note{
  margin-top:13px!important
}
.challenge-form .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none
}
body.dark .challenge-length-detected.valid{
  color:#8bd2ae
}
body.dark .challenge-length-detected.invalid{
  color:#e7a29c
}
@media(max-width:620px){
  .challenge-auto-word-wrap .challenge-word-input{
    padding-right:14px;
    padding-bottom:49px;
    font-size:20px
  }
  .challenge-length-detected{
    top:auto;
    right:auto;
    left:10px;
    bottom:9px;
    transform:none;
    max-width:calc(100% - 20px)
  }
  .challenge-auto-hint{
    display:grid;
    gap:4px
  }
}


/* === V4 MI DIARIO === */
.nav-daily{font-weight:850}
.home-daily-teaser{margin-top:22px}
.home-daily-card{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 28px;border:1px solid var(--line);border-radius:22px;
  background:var(--paper);text-decoration:none
}
.home-daily-card h2{margin:4px 0 7px;font-family:var(--font-display);font-size:32px;font-weight:500}
.home-daily-card p{margin:0;color:var(--muted);max-width:690px}
.home-daily-steps{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.home-daily-steps span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--bg);font-weight:900}
.home-daily-steps b{margin-left:7px;font-size:23px}
.daily-hub,.archive-page{padding-top:46px;padding-bottom:70px}
.daily-hub-hero,.archive-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:28px}
.daily-hub-hero h1,.archive-hero h1{margin:5px 0 10px;font-family:var(--font-display);font-size:clamp(40px,5.6vw,64px);font-weight:720;line-height:1.04;letter-spacing:-.04em}
.daily-hub-hero p,.archive-hero p{max-width:760px;color:var(--muted);line-height:1.6;margin:0;font-size:15px}
.daily-streak-card{min-width:180px;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,var(--accent-soft) 0%, var(--paper) 60%);text-align:center;box-shadow:var(--shadow-sm)}
.daily-streak-card span,.daily-streak-card small{display:block;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.daily-streak-card strong{display:block;font-size:46px;line-height:1.05;margin:6px 0;font-weight:760;font-variant-numeric:tabular-nums}
.daily-progress-card{padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:var(--paper);margin-bottom:16px;box-shadow:var(--shadow-sm)}
.daily-progress-copy{display:flex;justify-content:space-between;gap:15px;align-items:center}
.daily-progress-copy span{font-size:10px;font-weight:850;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.daily-progress-copy strong{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.daily-progress-track{height:9px;border-radius:99px;background:var(--bg);overflow:hidden;margin:12px 0 7px}
.daily-progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--yellow));border-radius:inherit;transition:width .35s ease}
.daily-progress-card>small{color:var(--muted);font-size:12px}
.daily-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.daily-task-card{position:relative;display:grid;grid-template-columns:44px 60px 1fr auto;gap:14px;align-items:center;min-height:136px;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--paper);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.daily-task-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ink) 25%,var(--line));box-shadow:var(--shadow-lift)}
.daily-task-card.core{background:var(--paper)}
.daily-task-card.done{border-color:color-mix(in srgb,var(--accent-2) 55%,var(--line));background:var(--accent-2-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 30%,transparent)}
.daily-task-number{position:absolute;top:13px;left:14px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.05em}
.daily-task-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:var(--bg);font-size:19px;font-weight:850;box-shadow:var(--shadow-sm);grid-column:2}
.daily-task-card:nth-child(1) .daily-task-icon{background:var(--accent-2-soft);color:var(--accent-2)}
.daily-task-card:nth-child(2) .daily-task-icon{background:var(--yellow-soft)}
.daily-task-card:nth-child(3) .daily-task-icon{background:var(--accent-soft)}
.daily-task-card:nth-child(4) .daily-task-icon{background:#345a7b22;color:#35506e}
body.dark .daily-task-card:nth-child(4) .daily-task-icon{color:#9db9d6}
.daily-task-icon.year{font-family:var(--font-display)}
.daily-task-copy{grid-column:3}
.daily-task-copy>span{display:block;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.daily-task-copy h2{font-size:20px;margin:4px 0 4px;font-weight:720;letter-spacing:-.018em;font-family:var(--font-display)}
.daily-task-copy p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}
.daily-task-state{grid-column:4;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.daily-task-state b{font-size:17px;transition:transform .18s ease}
.daily-task-card:hover .daily-task-state b{transform:translateX(3px)}
.daily-task-card.done .daily-task-state{color:var(--accent-2)}
.daily-complete-box{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:16px;padding:25px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.daily-complete-box[hidden]{display:none!important}
.daily-complete-box h2{margin:5px 0;font-family:var(--font-display);font-size:34px;font-weight:500}
.daily-complete-box p{max-width:650px;color:var(--muted);margin:0}
.daily-complete-actions{display:flex;gap:8px;flex:0 0 auto}
.daily-hub-links{display:flex;justify-content:space-between;gap:14px;margin-top:20px;font-size:12px;font-weight:800}
.archive-game-notice{margin:10px 0 16px;padding:10px 13px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:11px;text-align:center;background:var(--paper)}
.archive-list{display:grid;gap:8px}
.archive-day-card{display:grid;grid-template-columns:minmax(230px,1fr) 1fr auto;align-items:center;gap:20px;padding:16px 18px;border:1px solid var(--line);border-radius:15px;background:var(--paper);text-decoration:none}
.archive-day-card.complete{border-color:color-mix(in srgb,#2f8a64 55%,var(--line))}
.archive-day-card.partial{border-color:color-mix(in srgb,#c99b25 55%,var(--line))}
.archive-date strong,.archive-date span{display:block}.archive-date span{color:var(--muted);font-size:9px;margin-top:2px;text-transform:uppercase;font-weight:800}
.archive-mini-tasks{display:flex;gap:6px}
.archive-mini-tasks span{min-width:35px;height:35px;padding:0 6px;display:grid;place-items:center;border-radius:9px;background:var(--bg);font-size:11px;font-weight:900}
.archive-day-state{font-size:10px;font-weight:900;text-transform:uppercase;color:var(--muted)}
.next-game-btn{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important}
@media(max-width:800px){
  .daily-hub-hero,.archive-hero,.daily-complete-box,.home-daily-card{display:block}
  .daily-streak-card{margin-top:16px;width:150px}
  .daily-task-grid{grid-template-columns:1fr}
  .daily-complete-actions,.home-daily-steps{margin-top:16px}
  .archive-day-card{grid-template-columns:1fr auto}.archive-mini-tasks{display:none}
}
@media(max-width:520px){
  .daily-task-card{grid-template-columns:54px 1fr;gap:11px;padding:15px;min-height:125px}
  .daily-task-icon{grid-column:1}.daily-task-copy{grid-column:2}.daily-task-state{grid-column:2;justify-content:flex-start}
  .daily-hub-links{display:grid}
}

.admin-runway-card{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:18px}
.admin-runway-card h2{margin:4px 0 6px}.admin-runway-card p{max-width:700px;margin:0;color:var(--muted)}
.admin-runway-card form{display:flex;align-items:end;gap:8px;flex:0 0 auto}.admin-runway-card label{font-size:9px;font-weight:850;text-transform:uppercase;color:var(--muted)}
.admin-runway-card select{display:block;margin-top:4px;min-width:110px}
@media(max-width:800px){.admin-runway-card,.admin-runway-card form{display:block}.admin-runway-card form{margin-top:15px}.admin-runway-card label{display:block;margin-bottom:8px}.admin-runway-card select{width:100%}}

/* === V5: ANIMACIONES SUTILES === */
@keyframes pdd-pop{
  0%{transform:scale(.9)}
  60%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
@keyframes pdd-flip{
  0%{transform:rotateX(0)}
  49%{transform:rotateX(-90deg)}
  50%{transform:rotateX(90deg)}
  100%{transform:rotateX(0)}
}
@keyframes pdd-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
@keyframes pdd-fade-up{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Tile: pop al escribir */
.word-tile.filled{
  animation:pdd-pop .12s ease-out;
  border-color:var(--tile-empty-border);
  color:var(--ink);
}

/* Tile: flip al revelar resultado (status correct/present/absent tras submit) */
.word-tile.reveal{
  animation:pdd-flip .42s ease both;
  animation-delay:calc(var(--tile-index, 0) * 55ms);
}

/* Fila: shake cuando palabra inválida / no existe */
.word-row.shake{
  animation:pdd-shake .38s ease;
}

/* Teclas: feedback al pulsar */
.key{
  transition:transform .08s ease, background .15s ease, filter .15s ease, box-shadow .08s ease;
}
.key:active{
  transform:translateY(2px) scale(.985);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
}

/* Cards del home y Mi Diario: hover elevación sutil */
.game-card,.daily-task-card,.year-mode-card,.category-card,.home-word-length-grid a{
  will-change:transform;
}
.game-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.game-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
}
.game-card:active{
  transform:translateY(-1px);
}

/* Botones: feedback sutil */
.btn{
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover{
  transform:translateY(-1px);
}
.btn:active{
  transform:translateY(0);
}
.btn.primary:hover{
  background:var(--accent-2);
  color:#fff;
}

/* Mensajes del juego */
.word-message.visible{
  animation:pdd-fade-up .18s ease;
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ========================================================================== 
   V6 · MOBILE FIRST REDESIGN
   Inspirado en el sistema Midnight Lexicon del prototipo Stitch.
   Prioridades: foco de juego, navegación táctil, contraste, 3–11 letras,
   safe areas iOS/Android y una jerarquía más compacta en pantallas pequeñas.
   ========================================================================== */

:root{
  --bg:#f3f1eb;
  --paper:#fffdfa;
  --ink:#0c1629;
  --muted:#6c7483;
  --line:#dfe3e8;
  --accent:#10b981;
  --accent-2:#10b981;
  --yellow:#f2ad4b;
  --accent-soft:#e7f8f1;
  --accent-2-soft:#e7f8f1;
  --yellow-soft:#fff4df;
  --tile-empty-border:#465269;
  --tile-absent:#424b60;
  --navy:#0b1326;
  --navy-2:#111b30;
  --navy-3:#1b263d;
  --navy-4:#29344b;
  --game-ink:#e8edfb;
  --game-muted:#aeb8ca;
  --game-line:#344158;
  --shadow:0 22px 70px rgba(12,22,41,.10);
  --shadow-sm:0 8px 24px rgba(12,22,41,.07);
  --shadow-lift:0 20px 50px rgba(12,22,41,.14);
  --radius:22px;
  --radius-sm:12px;
  --shell:1180px;
}

body.dark{
  --bg:#08101f;
  --paper:#101a2d;
  --ink:#e8edfb;
  --muted:#aeb8ca;
  --line:#29364b;
  --accent:#4edea3;
  --accent-2:#4edea3;
  --yellow:#ffb95f;
  --accent-soft:#113b32;
  --accent-2-soft:#113b32;
  --yellow-soft:#3a2c16;
  --tile-empty-border:#3c4a62;
  --tile-absent:#343e52;
  --shadow:0 22px 70px rgba(0,0,0,.32);
  --shadow-sm:0 8px 24px rgba(0,0,0,.24);
  --shadow-lift:0 20px 50px rgba(0,0,0,.42);
}

html{overflow-x:hidden;overflow-y:auto;min-height:100%;background:var(--bg);-webkit-overflow-scrolling:touch}
body{overflow-x:hidden;overflow-y:auto;min-width:280px;min-height:100%;height:auto;background:var(--bg);letter-spacing:-.005em;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}
a,button{-webkit-tap-highlight-color:transparent}
button,.btn,.key,.icon-btn{touch-action:manipulation}
button,input,select,textarea{font-family:var(--font-body)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 42%,transparent);outline-offset:3px}
.shell{width:min(var(--shell),calc(100% - 32px))}

/* Header desktop */
.site-header{
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2)
}
.nav{height:72px;gap:18px}
.brand{gap:11px;font-size:18px;font-weight:820;letter-spacing:-.035em;white-space:nowrap}
.brand-mark{
  width:36px;height:36px;border-radius:9px;background:var(--navy);color:var(--accent);
  display:grid;grid-template-columns:repeat(2,5px);grid-template-rows:repeat(2,5px);gap:3px;align-content:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)
}
.brand-mark i{display:block;width:5px;height:5px;border-radius:1.5px;background:currentColor}
.brand:hover .brand-mark{transform:none;background:var(--navy);color:var(--accent)}
.nav-links{gap:2px}
.nav-links a{font-size:13px;font-weight:720;padding:9px 12px;border-radius:9px}
.nav-links a.active{color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,var(--paper))}
.nav-links a.nav-daily{background:transparent;color:var(--muted)}
.nav-links a.nav-daily.active{background:var(--accent);color:#03271a}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.progress-nav-link{margin-left:0;border-radius:999px;padding:9px 14px;background:var(--accent);color:#03271a;border:1px solid color-mix(in srgb,var(--accent) 82%,#000);box-shadow:none}
.progress-nav-link:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.progress-nav-link.active{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.icon-btn{width:42px;height:42px;border-radius:11px;background:var(--paper);box-shadow:none}
.mobile-tabbar{display:none}

/* Buttons */
.btn{min-height:46px;border-radius:11px;padding:12px 19px;font-weight:780;letter-spacing:.01em}
.btn.primary{background:var(--accent);color:#052719;border-color:var(--accent);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 20%,transparent)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 92%,#fff);color:#052719}
.btn.secondary,.btn.ghost{background:var(--paper);border-color:var(--line)}
.eyebrow{color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.17em}

/* Home */
.hero{
  min-height:560px;margin-top:30px;margin-bottom:12px;padding:56px;
  border-radius:32px;background:
    radial-gradient(circle at 84% 18%,rgba(78,222,163,.13),transparent 26%),
    radial-gradient(circle at 75% 80%,rgba(255,185,95,.08),transparent 28%),
    var(--navy);
  color:var(--game-ink);overflow:hidden;position:relative;box-shadow:0 24px 80px rgba(8,16,31,.18)
}
.hero::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.06);border-radius:inherit;pointer-events:none}
.hero h1{font-size:clamp(48px,6vw,76px);max-width:760px;margin-top:12px;color:var(--game-ink);font-weight:820;letter-spacing:-.055em}
.hero h1 em{color:var(--accent)}
.hero-copy>p{color:var(--game-muted);font-size:18px;max-width:600px}
.hero .btn.primary{background:var(--accent);color:#052719}
.hero .btn.secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);color:var(--game-ink)}
.hero-art{height:400px;min-width:360px}
.letter-stack{grid-template-columns:repeat(3,72px);gap:8px;left:5%;top:6%;transform:rotate(-4deg)}
.hero .tile{border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.year-card{right:5%;bottom:4%;width:220px;height:260px;background:linear-gradient(160deg,#1b2942,#101b31);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 55px rgba(0,0,0,.30)}

.home-daily-teaser{margin-top:18px}
.home-daily-card{
  border:0;border-radius:22px;padding:24px 26px;background:linear-gradient(120deg,var(--accent),#4edea3);
  color:#06261b;box-shadow:0 14px 36px color-mix(in srgb,var(--accent) 20%,transparent)
}
.home-daily-card .eyebrow,.home-daily-card p{color:#0b533b}
.home-daily-card h2{font-weight:820;letter-spacing:-.035em}
.home-daily-steps span{background:rgba(6,38,27,.09);color:#06261b}
.section{padding-block:58px}
.section-heading h2,.seo-band h2,.home-word-lengths h2{font-weight:800;letter-spacing:-.04em}
.game-grid{gap:16px}
.game-card{
  border-radius:20px;border-color:var(--line);padding:22px;background:var(--paper);box-shadow:0 1px 0 rgba(12,22,41,.02)
}
.game-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-3px)}
.game-card h3{font-weight:800;letter-spacing:-.035em}
.game-card .play-link{color:var(--accent);font-size:12px;letter-spacing:.05em}
.pill{background:color-mix(in srgb,var(--accent) 11%,var(--paper));color:color-mix(in srgb,var(--accent) 76%,var(--ink))}
.mini-word span{border-radius:7px}
.home-word-length-grid a,.category-card{border-radius:16px;box-shadow:none}
.home-word-length-grid a:hover,.category-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));transform:translateY(-2px)}

/* Mi Diario */
.daily-hub,.archive-page{max-width:1040px;padding-top:38px}
.daily-hub-hero,.archive-hero{
  padding:30px;border-radius:24px;background:var(--navy);color:var(--game-ink);align-items:center;margin-bottom:14px;
  background-image:radial-gradient(circle at 90% 10%,rgba(78,222,163,.13),transparent 25%)
}
.daily-hub-hero h1,.archive-hero h1{font-size:clamp(38px,5vw,58px);font-weight:820;color:var(--game-ink)}
.daily-hub-hero p,.archive-hero p{color:var(--game-muted)}
.daily-streak-card{min-width:170px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);box-shadow:none;color:var(--game-ink)}
.daily-streak-card span,.daily-streak-card small{color:var(--game-muted)}
.daily-streak-card strong{color:var(--accent);font-weight:820}
.daily-progress-card{border-radius:16px;padding:16px 18px;margin-bottom:12px;box-shadow:none}
.daily-progress-track{height:8px;background:color-mix(in srgb,var(--line) 60%,transparent)}
.daily-progress-track i{background:linear-gradient(90deg,var(--accent),var(--yellow))}
.daily-task-grid{gap:10px}
.daily-task-card{min-height:122px;border-radius:17px;padding:17px 18px;box-shadow:none;grid-template-columns:34px 54px 1fr auto}
.daily-task-card:hover{box-shadow:var(--shadow-sm)}
.daily-task-card.done{background:var(--accent-soft)}
.daily-task-icon{width:50px;height:50px;border-radius:13px;box-shadow:none}
.daily-task-copy h2{font-size:19px;font-weight:800}
.daily-complete-box{border-radius:18px}

/* Word game: focused app surface */
.word-page{max-width:900px;padding-top:24px}
.word-page-head{margin-bottom:12px}
.word-title-block h1{font-size:clamp(36px,5vw,52px);font-weight:820;letter-spacing:-.045em}
.word-mode-tabs{
  width:max-content;max-width:100%;margin:0 auto 10px;padding:4px;border-radius:11px;background:color-mix(in srgb,var(--line) 45%,transparent);
  display:flex;overflow-x:auto;scrollbar-width:none
}
.word-mode-tabs::-webkit-scrollbar,.word-length-switcher::-webkit-scrollbar,.year-mode-grid::-webkit-scrollbar{display:none}
.word-mode-tabs a{white-space:nowrap;border:0;border-radius:8px;padding:8px 13px;font-size:12px;font-weight:750;color:var(--muted)}
.word-mode-tabs a.active{background:var(--paper);color:var(--ink);box-shadow:0 2px 8px rgba(12,22,41,.07)}
.word-length-switcher{
  display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:5px;width:max-content;max-width:100%;margin:0 auto 12px;
  overflow-x:auto;padding:2px;scrollbar-width:none
}
.word-length-switcher a{min-width:38px;height:38px;border-radius:9px;padding:0;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);font-size:13px}
.word-length-switcher a.active{background:var(--navy);color:var(--game-ink);border-color:var(--navy);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent)}
.word-statusbar{width:min(100%,600px);margin-bottom:10px;border-radius:14px;box-shadow:none}
.word-status-item{min-height:64px}
.word-status-item span{font-size:9px}
.word-status-item strong{font-size:18px;font-variant-numeric:tabular-nums}
.word-timer-item{background:var(--accent-soft)}
.word-timer-item strong{font-size:25px;color:color-mix(in srgb,var(--accent) 78%,var(--ink))}
.word-focus{
  background:var(--navy);border:1px solid #1f2b42;border-radius:22px;padding:18px 18px 22px;box-shadow:0 20px 60px rgba(8,16,31,.16)
}
.word-message{color:var(--game-ink)}
.word-board.word-board-large{width:100%;max-width:var(--board-v6-max,380px);gap:6px;margin-bottom:22px}
.word-board-large .word-row{gap:6px}
.word-board-large .word-tile{
  border-color:var(--game-line);background:transparent;color:var(--game-ink);border-radius:8px;font-size:clamp(27px,4vw,39px);font-weight:800;
  box-shadow:none
}
.word-board-large .word-tile.filled{border-color:#7d8aa3;color:var(--game-ink)}
.word-board-large .word-tile.correct{background:var(--accent);border-color:var(--accent);color:#052719}
.word-board-large .word-tile.present{background:var(--yellow);border-color:var(--yellow);color:#382300}
.word-board-large .word-tile.absent{background:var(--navy-4);border-color:var(--navy-4);color:var(--game-ink)}
.word-board.word-board-large.word-board-3{--board-v6-max:242px}
.word-board.word-board-large.word-board-4{--board-v6-max:310px}
.word-board.word-board-large.word-board-5{--board-v6-max:380px}
.word-board.word-board-large.word-board-medium{--board-v6-max:500px}
.word-board.word-board-large.word-board-long{--board-v6-max:590px}
.word-board.word-board-large.word-board-xl{--board-v6-max:680px}
.word-board-long .word-row,.word-board-xl .word-row{gap:4px}
.word-board-long .word-tile,.word-board-xl .word-tile{border-radius:6px}
.word-keyboard-wrap{overflow:visible}
.keyboard.word-keyboard-large{max-width:680px;gap:6px}
.word-keyboard-large .keyboard-row{gap:4px}
.word-keyboard-large .key{
  height:52px;min-width:0;flex:1 1 0;padding:0 5px;border-radius:7px;background:var(--navy-3);border:1px solid rgba(255,255,255,.025);
  color:var(--game-ink);font-size:14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.16);user-select:none;-webkit-user-select:none
}
body.dark .word-keyboard-large .key{background:#222d43;color:var(--game-ink)}
.word-keyboard-large .key:hover{filter:brightness(1.12)}
.word-keyboard-large .key.correct{background:var(--accent);color:#052719}
.word-keyboard-large .key.present{background:var(--yellow);color:#382300}
.word-keyboard-large .key.absent{background:#343e52;border-color:#343e52;color:#9faabd}
.word-keyboard-large .key.wide{flex:1.45 1 0;min-width:0;font-size:10px}
.word-stats-section{border-radius:18px;padding:20px;box-shadow:none}
.word-stats-head h2{font-size:30px;font-weight:800}
.word-stats-grid>div{border:1px solid var(--line);background:transparent}
.word-result-panel{border-radius:16px;box-shadow:none}

/* ¿Qué año fue? */
.year-experience{max-width:1120px;padding-top:28px}
.year-experience-head h1{font-size:clamp(36px,5vw,56px);font-weight:820;letter-spacing:-.045em}
.year-mode-section{margin-bottom:14px}
.year-mode-grid{gap:8px}
.year-mode-card{border-radius:14px;box-shadow:none}
.year-mode-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.year-game-pro{gap:12px}
.year-stage-card{background:var(--navy);border-color:#1f2b42;border-radius:20px;box-shadow:0 20px 60px rgba(8,16,31,.14);color:var(--game-ink)}
.year-stage-meta{color:var(--game-muted)}
.year-stage-meta strong{color:var(--accent)}
.year-photo-cinematic{border-radius:14px;background:#111b30}
.year-controls-pro .year-choice span{color:var(--game-muted)}
.year-controls-pro .year-choice strong{color:var(--game-ink);font-weight:820}
.year-controls input[type=range]{accent-color:var(--accent);min-height:32px}
.year-controls input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
.range-labels{color:var(--game-muted)}
.year-confirm{min-height:52px}
.year-side-panel>section{border-radius:16px;box-shadow:none}
.year-score-card{background:var(--paper)}

/* Challenges, accounts, tools */
.challenge-shell,.account-shell,.content-shell{padding-top:42px}
.challenge-hero h1,.account-card h1,.content-shell h1{font-weight:820;letter-spacing:-.045em}
.challenge-form,.account-card,.finder-form.card{border-radius:20px;box-shadow:none}
.challenge-word-input{min-height:60px;font-size:24px;border-radius:12px}
.challenge-features>div{border-radius:15px}
.account-card{max-width:520px}
.stack-form input,.finder-form input,.finder-form select{min-height:48px;background:var(--paper)}
.word-list-grid article{border-radius:12px;box-shadow:none}

/* Footer */
.site-footer{margin-top:30px;background:color-mix(in srgb,var(--paper) 55%,var(--bg));padding:36px 0}

/* ========================================================================== 
   MOBILE APP MODE · <= 700 px
   ========================================================================== */
@media(max-width:700px){
  :root{--radius:18px;--shell:100%}
  html{scroll-padding-bottom:86px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom));overscroll-behavior-y:none}
  .shell{width:calc(100% - 24px)}

  /* Header: compacto; en pantallas de juego desaparece para recuperar altura */
  .site-header{position:sticky;top:0}
  .nav{height:58px;gap:8px}
  .brand{font-size:15px;gap:8px;min-width:0}
  .brand-mark{width:31px;height:31px;border-radius:8px}
  .brand-name{overflow:hidden;text-overflow:ellipsis}
  .nav-links,.progress-nav-link{display:none}
  .nav-actions{margin-left:auto}
  .icon-btn{width:38px;height:38px;border-radius:10px}
  body.is-word-game .site-header,body.is-year-game .site-header{display:none}
  body.is-word-game,body.is-year-game{padding-bottom:0}

  /* Bottom navigation */
  .mobile-tabbar{
    position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:75;
    height:60px;padding:5px;display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;
    background:color-mix(in srgb,var(--navy) 94%,transparent);border:1px solid rgba(255,255,255,.09);border-radius:17px;
    box-shadow:0 18px 55px rgba(0,0,0,.30);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
  }
  .mobile-tabbar a{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;color:#9eabc0;text-decoration:none}
  .mobile-tabbar a span{height:22px;min-width:22px;display:grid;place-items:center;font-size:16px;font-weight:850;line-height:1}
  .mobile-tabbar a b{font-size:9px;font-weight:750;line-height:1.1;white-space:nowrap}
  .mobile-tabbar a.active{background:rgba(78,222,163,.13);color:var(--accent)}
  body.is-word-game .mobile-tabbar,body.is-year-game .mobile-tabbar{display:none}

  /* Home */
  .hero{
    width:calc(100% - 20px);margin-top:10px;padding:28px 20px 20px;min-height:auto;display:block;border-radius:24px
  }
  .hero h1{font-size:clamp(40px,12vw,54px);line-height:1.01;margin:10px 0 18px}
  .hero-copy>p{font-size:15px;line-height:1.55}
  .hero-actions{display:grid;grid-template-columns:1fr;margin-top:22px;gap:8px}
  .hero-actions .btn{width:100%;min-height:50px}
  .hero-art{height:170px;min-width:0;margin-top:18px}
  .letter-stack{left:4%;top:11%;grid-template-columns:repeat(3,48px);gap:6px}
  .hero .tile{font-size:24px;border-radius:8px}
  .year-card{width:136px;height:148px;right:4%;bottom:3%;border-radius:18px;gap:8px}
  .year-card>span{width:58px;height:58px;font-size:30px}.year-card strong{font-size:23px}
  .home-daily-teaser{width:calc(100% - 20px);margin-top:10px}
  .home-daily-card{display:block;padding:20px;border-radius:18px}
  .home-daily-card h2{font-size:26px}.home-daily-card p{font-size:13px;line-height:1.5}
  .home-daily-steps{margin-top:14px;gap:5px}.home-daily-steps span{width:31px;height:31px;border-radius:8px}.home-daily-steps b{margin-left:auto}
  .section{padding-block:34px}
  .section-heading{margin-bottom:16px}.section-heading h2,.seo-band h2,.home-word-lengths h2{font-size:30px;line-height:1.05}.section-heading>p{font-size:14px}
  .game-grid,.game-grid-four{grid-template-columns:1fr;gap:10px}
  .game-card{padding:18px;border-radius:17px}
  .game-card h3{font-size:25px;margin:14px 0 5px}.game-card p{font-size:13px;line-height:1.5}
  .mini-word{margin-top:15px}
  .home-word-lengths{display:block}.home-word-length-grid{margin-top:16px;grid-template-columns:repeat(3,1fr);gap:7px}.home-word-length-grid a{padding:13px 10px;border-radius:13px}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.category-card{padding:15px 12px;min-height:118px}.category-card small{font-size:11px}
  .seo-band,.seo-editorial{border-radius:18px;padding:20px}.seo-editorial{display:block}.seo-editorial-links{margin-top:18px}

  /* Diario */
  .daily-hub,.archive-page{width:calc(100% - 20px);padding-top:10px;padding-bottom:32px}
  .daily-hub-hero,.archive-hero{display:block;padding:22px 18px;border-radius:20px;margin-bottom:10px}
  .daily-hub-hero h1,.archive-hero h1{font-size:36px;margin-top:7px}.daily-hub-hero p,.archive-hero p{font-size:13px;line-height:1.5}
  .daily-streak-card{width:100%;min-width:0;margin-top:16px;padding:12px 15px;display:grid;grid-template-columns:1fr auto auto;align-items:center;text-align:left;gap:8px;border-radius:13px}
  .daily-streak-card span,.daily-streak-card small{text-transform:none;letter-spacing:0;font-size:11px}.daily-streak-card strong{font-size:30px;margin:0}.daily-streak-card small{text-align:right}
  .daily-progress-card{padding:14px;border-radius:14px}.daily-progress-copy strong{font-size:13px}.daily-progress-card>small{font-size:11px}
  .daily-task-grid{grid-template-columns:1fr;gap:7px}
  .daily-task-card{grid-template-columns:50px minmax(0,1fr) auto;min-height:92px;padding:13px 12px;border-radius:14px;gap:10px}
  .daily-task-number{display:none}.daily-task-icon{grid-column:1;width:48px;height:48px;border-radius:12px}.daily-task-copy{grid-column:2;min-width:0}.daily-task-copy>span{font-size:8px}.daily-task-copy h2{font-size:17px;margin:2px 0}.daily-task-copy p{font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .daily-task-state{grid-column:3;justify-content:center}.daily-task-state span{display:none}.daily-task-state b{font-size:22px}
  .daily-complete-box{display:block;padding:18px}.daily-complete-box h2{font-size:27px}.daily-complete-box p{font-size:13px}.daily-complete-actions{display:grid;margin-top:14px}.daily-hub-links{display:grid;gap:7px;font-size:11px}
  .archive-day-card{grid-template-columns:1fr auto;padding:13px 14px;border-radius:13px}.archive-mini-tasks{display:none}

  /* Word game full-screen feeling */
  .word-page{width:100%;max-width:none;padding:10px 10px 28px}
  .word-page-head{grid-template-columns:40px 1fr 40px;gap:5px;margin-bottom:7px}
  .word-back,.word-page-head .icon-btn{width:38px;height:38px;border-radius:10px}
  .word-title-block .eyebrow{font-size:8px}.word-title-block h1{font-size:31px;line-height:1;margin:2px 0}.word-title-block p{display:block;margin-top:4px;font-size:10px}
  .word-mode-tabs{margin-bottom:7px;max-width:calc(100vw - 20px)}
  .word-mode-tabs a{padding:7px 11px;font-size:11px}
  .word-length-switcher{max-width:calc(100vw - 20px);margin-bottom:8px;padding-bottom:2px}
  .word-length-switcher a{min-width:36px;height:35px;font-size:12px}
  .archive-game-notice{margin:5px 0 8px;padding:7px 9px;font-size:9px}
  .word-statusbar{width:100%;margin-bottom:7px;border-radius:11px}
  .word-status-item{min-height:50px}.word-status-item span{font-size:8px}.word-status-item strong{font-size:15px}.word-timer-item strong{font-size:20px}
  .word-focus{padding:10px 6px 12px;border-radius:17px;min-height:0}
  .word-message{min-height:24px;margin:0;font-size:11px}
  .word-board.word-board-large{margin-top:0;margin-bottom:12px;gap:5px}
  .word-board-large .word-row{gap:5px}
  .word-board.word-board-large.word-board-3{max-width:210px}
  .word-board.word-board-large.word-board-4{max-width:270px}
  .word-board.word-board-large.word-board-5{max-width:330px}
  .word-board.word-board-large.word-board-medium,.word-board.word-board-large.word-board-long,.word-board.word-board-large.word-board-xl{max-width:100%}
  .word-board-large .word-tile{font-size:clamp(23px,8.5vw,32px);border-radius:7px}
  .word-board-medium .word-tile{font-size:clamp(19px,6.4vw,28px)}
  .word-board-long .word-row,.word-board-xl .word-row{gap:3px}
  .word-board-long .word-tile{font-size:clamp(15px,4.9vw,22px);border-width:1.5px}
  .word-board-xl .word-tile{font-size:clamp(12px,4.1vw,18px);border-width:1.5px;border-radius:5px}
  .keyboard.word-keyboard-large{width:100%;max-width:none;gap:5px}
  .word-keyboard-large .keyboard-row{gap:3px}
  .word-keyboard-large .key{height:clamp(44px,7.3svh,52px);padding:0 2px;border-radius:6px;font-size:clamp(11px,3.4vw,14px)}
  .word-keyboard-large .key.wide{font-size:8px;flex:1.42 1 0}
  .word-stats-section{margin-top:10px;padding:15px 10px;border-radius:15px}.word-stats-head h2{font-size:24px}.word-stats-grid{gap:6px}.word-stats-grid>div{padding:10px 6px;border-radius:10px}.word-stats-grid strong{font-size:25px}.word-stats-grid span{font-size:9px}
  .word-result-panel{padding:15px;border-radius:13px}.word-result-top h3{font-size:25px}.word-result-time{min-width:84px}.word-result-time strong{font-size:22px}.word-answer{padding:13px}.word-answer>strong{font-size:25px}.word-result-actions{display:grid}.word-result-actions .btn{width:100%}
  .word-seo-copy{margin-top:20px}

  /* Year game */
  .year-experience{width:100%;padding:10px 10px 28px;max-width:none}
  .year-experience-head{grid-template-columns:40px 1fr 40px;gap:5px;margin-bottom:9px}.year-experience-head h1{font-size:30px}.year-experience-head p{display:none}
  .year-mode-section{margin-bottom:8px}.year-mode-heading{display:none}
  .year-mode-grid{display:flex;overflow-x:auto;gap:6px;padding-bottom:2px;scrollbar-width:none}
  .year-mode-card{flex:0 0 auto;width:auto;min-width:112px;padding:10px 11px;border-radius:11px;gap:7px}.year-mode-card small,.year-mode-card b{display:none}.year-mode-icon{font-size:17px}.year-mode-card strong{font-size:11px}
  .year-game-pro{display:block}.year-stage-card{padding:8px;border-radius:16px}.year-stage-meta{padding:4px 4px 7px;font-size:10px}.year-stage-meta>div{gap:4px}.year-stage-meta strong{font-size:12px}
  .year-photo-cinematic{aspect-ratio:4/3;border-radius:11px;margin:0}  .year-controls-pro{padding:10px 6px 7px}.year-controls-pro .year-choice strong{font-size:54px;line-height:1}.year-controls-pro .year-choice span{font-size:9px}.year-controls input[type=range]{margin:11px 0 5px}.range-labels{font-size:10px;margin-bottom:10px}.year-confirm{min-height:50px}
  .year-feedback,.year-final{padding:13px;border-radius:12px}.year-side-panel{grid-template-columns:1fr;margin-top:8px;gap:7px}.year-side-panel>section{padding:13px;border-radius:12px}.year-score-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px}.year-score-card .eyebrow{grid-column:1/-1}.year-score-card .score-big{margin:0}.year-score-card .score-big strong{font-size:34px}.year-score-card .round-history{grid-column:2}.year-how-card,.year-content-note{display:none}
  .year-seo-copy{margin-top:20px}

  /* Forms and tools */
  .challenge-shell,.account-shell,.content-shell{width:calc(100% - 20px);padding-top:22px;padding-bottom:34px}
  .challenge-hero h1,.account-card h1,.content-shell h1{font-size:36px;line-height:1.03}.challenge-hero p,.account-lead,.lead{font-size:14px}
  .challenge-form,.account-card,.finder-form.card{padding:17px;border-radius:16px}
  .challenge-word-input{min-height:54px;font-size:20px}.challenge-auto-hint{grid-template-columns:1fr}
  .challenge-features{grid-template-columns:repeat(2,1fr);gap:7px}.challenge-features>div{padding:13px;border-radius:12px}
  .account-card{padding:20px 17px}.account-form input,.finder-form input,.finder-form select,input,select{font-size:16px}
  .finder-form{grid-template-columns:1fr;gap:10px}.finder-form .btn{grid-column:auto;width:100%}
  .length-nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.length-nav a{flex:0 0 auto}
  .word-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.word-list-grid article{padding:12px}.word-list-grid strong{font-size:16px}

  .site-footer{margin-top:0;padding:28px 0 95px}.footer-grid{gap:18px}.footer-grid p{font-size:12px}.footer-links{gap:12px;font-size:12px}
  body.is-word-game .site-footer,body.is-year-game .site-footer{padding-bottom:30px}
  .cookie-banner{left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom));padding:13px;border-radius:14px;font-size:12px}
  body.is-word-game .cookie-banner,body.is-year-game .cookie-banner{bottom:10px}
}

/* 390 px and below: one-hand phones */
@media(max-width:390px){
  .shell{width:calc(100% - 20px)}
  .hero h1{font-size:39px}.hero-art{height:155px}.letter-stack{grid-template-columns:repeat(3,43px)}.year-card{width:122px;height:138px}
  .category-grid{grid-template-columns:1fr 1fr}
  .daily-task-copy p{display:none}.daily-task-card{min-height:78px}.daily-task-icon{width:44px;height:44px}.daily-task-copy h2{font-size:16px}
  .word-page{padding-inline:6px}.word-title-block h1{font-size:28px}.word-title-block p{font-size:9px}
  .word-focus{padding-inline:4px}.word-board.word-board-large.word-board-3{max-width:198px}.word-board.word-board-large.word-board-4{max-width:254px}.word-board.word-board-large.word-board-5{max-width:310px}
  .word-keyboard-large .keyboard-row{gap:2px}.word-keyboard-large .key{font-size:11px;padding:0 1px}.word-keyboard-large .key.wide{font-size:7px}
  .year-experience{padding-inline:6px}.year-experience-head h1{font-size:27px}.year-controls-pro .year-choice strong{font-size:49px}
}

/* 320 px: defensive layout */
@media(max-width:340px){
  .brand-name{max-width:150px}
  .mobile-tabbar{left:5px;right:5px}.mobile-tabbar a b{font-size:8px}
  .hero{padding-inline:16px}.hero h1{font-size:35px}.year-card{display:none}.hero-art{height:145px}.letter-stack{left:50%;transform:translateX(-50%) rotate(-3deg)}
  .home-word-length-grid{grid-template-columns:repeat(3,1fr)}
  .word-page{padding-inline:4px}.word-page-head{grid-template-columns:36px 1fr 36px}.word-back,.word-page-head .icon-btn{width:34px;height:34px}.word-title-block h1{font-size:25px}
  .word-status-item{min-height:46px}.word-status-item strong{font-size:14px}.word-timer-item strong{font-size:18px}
  .word-board.word-board-large.word-board-3{max-width:186px}.word-board.word-board-large.word-board-4{max-width:238px}.word-board.word-board-large.word-board-5{max-width:292px}
  .word-board-large .word-tile{font-size:22px}.word-board-medium .word-tile{font-size:17px}.word-board-long .word-tile{font-size:13px}.word-board-xl .word-tile{font-size:11px}
  .word-keyboard-large .key{height:43px;font-size:10px}.word-keyboard-large .key.wide{font-size:6.5px}
  .year-experience-head{grid-template-columns:34px 1fr 34px}.year-experience-head .word-back,.year-experience-head .icon-btn{width:34px;height:34px}.year-experience-head h1{font-size:24px}
}

/* Landscape phone: preserve useful height for the game */
@media(max-height:520px) and (orientation:landscape) and (max-width:950px){
  body.is-word-game .word-page{padding-top:5px}
  body.is-word-game .word-page-head{margin-bottom:4px}
  body.is-word-game .word-title-block h1{font-size:24px}
  body.is-word-game .word-title-block .eyebrow,body.is-word-game .word-title-block p{display:none}
  body.is-word-game .word-mode-tabs,body.is-word-game .word-length-switcher{margin-bottom:4px}
  body.is-word-game .word-statusbar{max-width:500px;margin-bottom:4px}
  body.is-word-game .word-status-item{min-height:38px}
  body.is-word-game .word-focus{display:grid;grid-template-columns:minmax(250px,1fr) minmax(360px,1.15fr);gap:10px;align-items:center;padding:7px 10px}
  body.is-word-game .word-message{grid-column:1/-1;min-height:18px}
  body.is-word-game .word-board.word-board-large{margin-bottom:0;max-height:330px}
  body.is-word-game .keyboard.word-keyboard-large{align-self:center}
  body.is-word-game .word-keyboard-large .key{height:42px}
}

@media(prefers-reduced-motion:reduce){
  .mobile-tabbar,.site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* V6 · Mobile completion pass for secondary public screens */
@media(max-width:700px){
  .challenge-created-card{margin:8px auto 24px;padding:20px 16px;border-radius:16px;box-shadow:none}
  .challenge-created-card h1{font-size:34px;line-height:1.02}.challenge-created-card p{font-size:13px}
  .share-url-box{display:grid;grid-template-columns:1fr;gap:7px}.share-url-box input{min-height:48px;font-size:14px}.challenge-created-actions{display:grid;grid-template-columns:1fr;gap:7px}.challenge-created-actions .btn,.challenge-created-card>.whatsapp-btn{width:100%}
  .challenge-share-preview{padding:13px;border-radius:12px}.challenge-share-preview p{font-size:12px;line-height:1.5}

  .progress-page,.ranking-page,.daily-ranking-page{width:calc(100% - 20px);padding-top:18px;padding-bottom:34px}
  .progress-head,.ranking-top,.daily-ranking-head{display:block;margin-bottom:14px}
  .progress-head h1,.ranking-top h1,.daily-ranking-head h1{font-size:36px;line-height:1.02}
  .player-chip{width:100%;margin-top:12px}
  .progress-sync-banner{padding:14px;border-radius:13px}
  .progress-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.progress-stats-grid>div{padding:11px 7px;border-radius:11px}.progress-stats-grid strong{font-size:26px}
  .progress-main-grid{grid-template-columns:1fr;gap:8px}.progress-card{padding:14px 10px;border-radius:13px}.progress-card-head h2{font-size:22px}
  .progress-word-length-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.progress-length-item{padding:10px 6px;border-radius:10px}
  .achievement-grid{grid-template-columns:1fr;gap:6px}.achievement{padding:11px;border-radius:10px}
  .recent-result{grid-template-columns:55px minmax(0,1fr) 42px 48px;gap:4px;font-size:10px}
  .infinite-progress-card{display:block}.infinite-progress-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.infinite-progress-numbers>div{min-width:0;padding:10px 5px}

  .ranking-top,.daily-ranking-head{padding:18px 16px;border-radius:16px}
  .ranking-summary,.community-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.ranking-summary>div,.community-summary-grid>div{padding:11px 7px;border-radius:10px}
  .ranking-table-card{border-radius:13px;overflow:hidden}.ranking-table-head{display:none}.ranking-row{grid-template-columns:42px minmax(0,1fr) 52px 54px;gap:5px;padding:11px 9px;font-size:10px}.ranking-position{font-size:13px}.ranking-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ranking-actions{display:grid;grid-template-columns:1fr;gap:7px}.ranking-actions .btn{width:100%}
  .daily-ranking-layout{grid-template-columns:1fr;gap:8px}.community-distribution-card,.community-side-note{border-radius:13px;padding:14px}
}

/* ============================================================
   V7 · PRODUCT UX LAYER
   Games drawer · contextual help · settings · accessibility
   Mobile-first, no external font or icon dependency.
   ============================================================ */

/* Apply the early theme class before deferred JS has loaded. */
html.pdd-theme-dark body,
body.dark{
  --bg:#08101f;
  --paper:#101a2d;
  --ink:#e8edfb;
  --muted:#aeb8ca;
  --line:#29364b;
  --accent:#4edea3;
  --accent-2:#4edea3;
  --yellow:#ffb95f;
  --accent-soft:#113b32;
  --accent-2-soft:#113b32;
  --yellow-soft:#3a2c16;
  --tile-empty-border:#3c4a62;
  --tile-absent:#343e52;
  --shadow:0 22px 70px rgba(0,0,0,.32);
  --shadow-sm:0 8px 24px rgba(0,0,0,.24);
  --shadow-lift:0 20px 50px rgba(0,0,0,.42)
}

body.pdd-sheet-open{overflow:hidden;touch-action:none}

/* Desktop product navigation */
.nav-menu-button{
  appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;
  font-size:13px;font-weight:720;padding:9px 12px;border-radius:9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .16s ease,color .16s ease
}
.nav-menu-button:hover,.nav-menu-button:focus-visible{background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--ink)}
.nav-menu-button span{font-size:11px;opacity:.7}
.header-help-button,.settings-toggle{font-weight:850}

/* Global sheet / drawer */
.pdd-overlay{
  position:fixed;inset:0;z-index:118;background:rgba(3,9,19,.52);opacity:0;
  transition:opacity .18s ease;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)
}
.pdd-overlay.open{opacity:1}
.pdd-overlay[hidden],.pdd-drawer[hidden]{display:none!important}
.pdd-drawer{
  position:fixed;z-index:120;top:0;right:0;width:min(430px,calc(100vw - 24px));height:100dvh;
  background:var(--paper);color:var(--ink);border-left:1px solid var(--line);
  box-shadow:-28px 0 70px rgba(4,10,21,.20);transform:translateX(104%);opacity:.98;
  transition:transform .2s cubic-bezier(.2,.75,.25,1),opacity .2s ease;
  display:flex;flex-direction:column;overscroll-behavior:contain
}
.pdd-drawer.open{transform:translateX(0);opacity:1}
.drawer-grabber{display:none}
.drawer-header{
  min-height:82px;padding:18px 18px 14px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto
}
.drawer-header h2{margin:3px 0 0;font-size:27px;letter-spacing:-.04em}
.drawer-header .icon-btn{flex:0 0 auto}
.drawer-scroll{overflow:auto;padding:16px 16px calc(28px + env(safe-area-inset-bottom));overscroll-behavior:contain}

/* Games catalog */
.game-menu-section{padding:4px 0 18px}
.game-menu-section+.game-menu-section{border-top:1px solid var(--line);padding-top:18px}
.game-menu-label{display:block;margin:0 4px 9px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.16em}
.game-menu-featured,
.game-menu-list>a,
.game-menu-list>.game-menu-coming{
  min-height:66px;border:1px solid var(--line);border-radius:14px;background:var(--bg);
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;
  padding:10px 12px;text-decoration:none;color:var(--ink);transition:transform .15s ease,border-color .15s ease,background .15s ease
}
.game-menu-featured{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 20%,var(--paper)),var(--paper));border-color:color-mix(in srgb,var(--accent) 38%,var(--line));margin-bottom:1px}
.game-menu-featured:hover,.game-menu-list>a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 44%,var(--line))}
.game-menu-icon{
  width:42px;height:42px;border-radius:11px;background:var(--navy);color:var(--accent);display:grid;place-items:center;
  font-weight:900;font-size:18px;letter-spacing:-.04em
}
.game-menu-featured>span:nth-child(2),.game-menu-list>a>span:nth-child(2),.game-menu-coming>span:nth-child(2){min-width:0;display:grid;gap:2px}
.game-menu-featured strong,.game-menu-list strong,.game-menu-coming strong{font-size:14px;line-height:1.15}
.game-menu-featured small,.game-menu-list small,.game-menu-coming small{color:var(--muted);font-size:10px;line-height:1.35}
.game-menu-featured>b,.game-menu-list>a>b{font-size:15px;color:var(--muted)}
.game-menu-list{display:grid;gap:7px}
.game-menu-coming{opacity:.68}
.game-menu-coming em{font-style:normal;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);padding:5px 7px;border-radius:999px;background:var(--yellow-soft);white-space:nowrap}
.game-menu-list.mini>a{min-height:58px}
.game-menu-list.mini .game-menu-icon{width:37px;height:37px;font-size:15px}
.game-menu-list.mini>a{grid-template-columns:37px minmax(0,1fr) auto}
.game-menu-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.game-menu-compact-grid a{
  min-height:58px;padding:9px 10px;border:1px solid var(--line);border-radius:13px;background:var(--bg);
  display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:11px;transition:border-color .15s ease,transform .15s ease
}
.game-menu-compact-grid a:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));transform:translateY(-1px)}
.game-menu-compact-grid a>span{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,var(--paper));display:grid;place-items:center;color:var(--accent);font-size:11px;font-weight:850}
.drawer-utility-links{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:2px}
.drawer-utility-links a,.drawer-utility-links button{
  min-height:42px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);font:inherit;
  font-size:11px;font-weight:750;display:grid;place-items:center;text-decoration:none;cursor:pointer
}

/* Quick settings */
.settings-quick{padding-top:4px}
.setting-row{
  min-height:72px;padding:13px 2px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  gap:16px;cursor:pointer
}
.setting-row>span{min-width:0;display:grid;gap:3px}
.setting-row strong{font-size:13px;line-height:1.2}
.setting-row small{color:var(--muted);font-size:10px;line-height:1.35;font-weight:500}
.setting-row select{min-width:118px;height:42px;padding:0 30px 0 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:12px}
.setting-switch{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;width:45px;height:26px;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--muted) 22%,var(--bg));position:relative;cursor:pointer;transition:background .16s ease,border-color .16s ease
}
.setting-switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--paper);
  box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .16s ease
}
.setting-switch:checked{background:var(--accent);border-color:var(--accent)}
.setting-switch:checked::after{transform:translateX(19px);background:#06261b}
.settings-full-link{
  margin-top:14px;min-height:54px;padding:11px 13px;border-radius:12px;background:var(--navy);color:var(--game-ink);display:flex;
  align-items:center;justify-content:space-between;gap:12px;text-decoration:none;font-size:11px;font-weight:760
}
.settings-full-link b{color:var(--accent)}
.settings-help-link{display:block;text-align:center;padding:15px 10px 5px;color:var(--muted);font-size:11px;font-weight:720}

/* Contextual help */
.help-drawer .drawer-scroll{padding-top:12px}
.quick-help-body{display:grid;gap:14px}
.quick-help-lead{font-size:14px;line-height:1.6;color:var(--ink);margin:0}
.quick-help-example{display:grid;gap:7px}
.quick-help-example>div{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:11px;padding:8px;border-radius:11px;background:var(--bg);border:1px solid var(--line)}
.quick-help-example .word-tile{width:44px;height:44px;font-size:19px}
.quick-help-example p{margin:0;display:grid;gap:2px}.quick-help-example strong{font-size:12px}.quick-help-example small{font-size:10px;color:var(--muted)}
.quick-help-note{padding:13px;border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.quick-help-note strong{font-size:11px}.quick-help-note p{margin:4px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.quick-score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.quick-score-grid>div{padding:11px 5px;border:1px solid var(--line);border-radius:11px;background:var(--bg);text-align:center;display:grid;gap:3px}
.quick-score-grid strong{font-size:17px}.quick-score-grid span{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.quick-help-menu{display:grid;gap:6px}
.quick-help-menu a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink);text-decoration:none}
.quick-help-menu>a>span{width:38px;height:38px;border-radius:10px;background:var(--navy);color:var(--accent);display:grid;place-items:center;font-weight:900}
.quick-help-menu p{margin:0;display:grid;gap:2px}.quick-help-menu strong{font-size:11px}.quick-help-menu small{font-size:9px;color:var(--muted)}.quick-help-menu b{color:var(--muted)}

/* Full How-to and Settings pages */
.experience-page,.settings-page{padding-top:34px;padding-bottom:64px}
.experience-hero{max-width:820px;margin-bottom:24px}
.compact-hero h1{font-size:clamp(44px,6vw,72px);line-height:.98;letter-spacing:-.055em;margin:8px 0 12px}
.compact-hero p{max-width:690px;font-size:16px;line-height:1.65;color:var(--muted)}
.help-jump-nav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.help-jump-nav a{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:11px;font-weight:720;text-decoration:none}
.help-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.help-guide-card{
  scroll-margin-top:96px;min-height:240px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--paper);
  box-shadow:var(--shadow-sm);display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start
}
.help-guide-card.featured{grid-column:1/-1;grid-template-columns:64px minmax(0,760px);justify-content:start;background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 8%,var(--paper)),var(--paper))}
.help-guide-icon{width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--accent);display:grid;place-items:center;font-size:21px;font-weight:900}
.help-guide-card.featured .help-guide-icon{width:64px;height:64px;border-radius:17px;font-size:25px}
.help-guide-card h2{font-size:27px;line-height:1.06;letter-spacing:-.035em;margin:5px 0 10px}
.help-guide-card p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.help-guide-card>a,.help-guide-card div>a:not(.btn){font-size:11px;font-weight:750;color:var(--accent)}
.help-tile-example{display:flex;gap:5px;margin:13px 0}.help-tile-example .word-tile{width:48px;height:48px;font-size:19px}
.help-rules{padding-left:18px;margin:10px 0 14px;display:grid;gap:6px;color:var(--muted);font-size:12px}.help-rules strong{color:var(--ink)}
.score-explainer{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0 15px;max-width:560px}
.score-explainer>div{padding:12px 7px;border-radius:11px;background:var(--bg);border:1px solid var(--line);text-align:center;display:grid;gap:3px}
.score-explainer strong{font-size:21px}.score-explainer span{font-size:9px;color:var(--muted)}
.help-accessibility-card{margin-top:12px;padding:22px;border-radius:20px;background:var(--navy);color:var(--game-ink);display:flex;align-items:center;justify-content:space-between;gap:20px}
.help-accessibility-card h2{margin:4px 0 6px;font-size:28px}.help-accessibility-card p{margin:0;color:var(--game-muted);font-size:12px;max-width:650px}.help-accessibility-card .btn{background:var(--accent);border-color:var(--accent);color:#06261b;white-space:nowrap}

.settings-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.settings-card{padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow-sm)}
.settings-card-head{margin-bottom:3px}.settings-card-head h2{font-size:27px;margin:4px 0}.settings-card-head p{font-size:11px;line-height:1.55;color:var(--muted);margin:6px 0 0}
.settings-card .setting-row{padding-inline:0}
.settings-data-card{grid-column:1/-1}
.settings-transfer-block{padding:15px 0;border-top:1px solid var(--line);display:grid;gap:8px}
.settings-transfer-block:first-of-type{margin-top:10px}
.settings-transfer-block label{display:grid;gap:2px;font-size:12px}.settings-transfer-block label small{font-size:10px;color:var(--muted)}
.settings-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.settings-transfer-block textarea{width:100%;min-height:82px;resize:vertical;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink);padding:11px;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.settings-code-actions{display:grid;gap:7px;align-content:start}.settings-code-actions .btn{min-width:140px}
.settings-import-actions{display:flex;align-items:center;gap:10px}.settings-transfer-status{font-size:10px;color:var(--muted)}.settings-transfer-status.success{color:var(--accent-2)}.settings-transfer-status.error{color:#d85757}
.settings-account-card{grid-column:1/-1}.settings-account-card h2{font-size:28px;margin:5px 0}.settings-account-card p{font-size:12px;color:var(--muted);max-width:680px}.settings-account-actions{display:flex;gap:7px;margin-top:12px}

/* Game header actions remain available because global chrome is hidden during play on phones. */
.game-head-actions{justify-self:end;display:flex;align-items:center;gap:5px}
.game-head-actions .icon-btn{width:38px;height:38px;font-size:13px}
.word-page-head{grid-template-columns:72px minmax(0,1fr) 86px}
.year-experience-head{grid-template-columns:72px minmax(0,1fr) 86px}

/* Mobile tabbar now contains a real button for the game catalog. */
.mobile-tabbar button{
  appearance:none;border:0;background:transparent;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;border-radius:12px;color:#9eabc0;font:inherit;cursor:pointer;padding:0
}
.mobile-tabbar button span{height:22px;min-width:22px;display:grid;place-items:center;font-size:16px;font-weight:850;line-height:1}
.mobile-tabbar button b{font-size:9px;font-weight:750;line-height:1.1;white-space:nowrap}
.mobile-tabbar button.active{background:rgba(78,222,163,.13);color:var(--accent)}

/* Accessibility modes */
html.pdd-colorblind .word-tile.correct,body.pdd-colorblind .word-tile.correct,
html.pdd-colorblind .key.correct,body.pdd-colorblind .key.correct{background:#e87924!important;border-color:#e87924!important;color:#fff!important}
html.pdd-colorblind .word-tile.present,body.pdd-colorblind .word-tile.present,
html.pdd-colorblind .key.present,body.pdd-colorblind .key.present{background:#3b82f6!important;border-color:#3b82f6!important;color:#fff!important}

html.pdd-high-contrast body,body.pdd-high-contrast{--line:color-mix(in srgb,var(--ink) 38%,transparent);--tile-empty-border:#74819a}
html.pdd-high-contrast .word-tile,body.pdd-high-contrast .word-tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
html.pdd-high-contrast a:focus-visible,html.pdd-high-contrast button:focus-visible,body.pdd-high-contrast a:focus-visible,body.pdd-high-contrast button:focus-visible{outline-width:4px}

html.pdd-large-text body,body.pdd-large-text{font-size:17px}
html.pdd-large-text .nav-links a,html.pdd-large-text .nav-menu-button,body.pdd-large-text .nav-links a,body.pdd-large-text .nav-menu-button{font-size:14px}
html.pdd-large-text .setting-row strong,body.pdd-large-text .setting-row strong{font-size:14px}
html.pdd-large-text .setting-row small,body.pdd-large-text .setting-row small{font-size:11px}
html.pdd-large-text .word-board-large .word-tile,body.pdd-large-text .word-board-large .word-tile{font-size:clamp(17px,4.2vw,29px)}

html.pdd-reduce-motion *,body.pdd-reduce-motion *,
html.pdd-no-board-animations .word-tile,html.pdd-no-board-animations .word-row,
body.pdd-no-board-animations .word-tile,body.pdd-no-board-animations .word-row{
  animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important
}

/* ---------------- Mobile first behavior ---------------- */
@media(max-width:700px){
  .nav-menu-button{display:none}

  .pdd-overlay{z-index:148;background:rgba(2,8,18,.58)}
  .pdd-drawer{
    z-index:150;top:auto;right:0;bottom:0;left:0;width:100%;height:auto;max-height:min(88dvh,760px);
    border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    box-shadow:0 -24px 65px rgba(2,8,18,.28);transform:translateY(104%);padding-bottom:env(safe-area-inset-bottom)
  }
  .pdd-drawer.open{transform:translateY(0)}
  .drawer-grabber{display:block;width:40px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--muted) 45%,transparent);margin:8px auto 0;flex:0 0 auto}
  .drawer-header{min-height:64px;padding:9px 12px 9px 16px}.drawer-header h2{font-size:23px}.drawer-header .eyebrow{font-size:8px}.drawer-header .icon-btn{width:38px;height:38px}
  .drawer-scroll{padding:9px 10px calc(12px + env(safe-area-inset-bottom))}

  .game-menu-section{padding-bottom:12px}.game-menu-section+.game-menu-section{padding-top:12px}
  .game-menu-label{font-size:8px;margin-bottom:6px}
  .game-menu-featured,.game-menu-list>a,.game-menu-list>.game-menu-coming{min-height:58px;border-radius:12px;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;padding:8px 9px}
  .game-menu-icon{width:38px;height:38px;border-radius:10px;font-size:16px}.game-menu-featured strong,.game-menu-list strong,.game-menu-coming strong{font-size:12px}.game-menu-featured small,.game-menu-list small,.game-menu-coming small{font-size:9px}
  .game-menu-coming em{font-size:7px;padding:4px 5px}
  .game-menu-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.game-menu-compact-grid a{min-height:48px;padding:7px 8px;border-radius:11px;font-size:10px}.game-menu-compact-grid a>span{width:28px;height:28px;font-size:9px}
  .drawer-utility-links{gap:5px}.drawer-utility-links a,.drawer-utility-links button{min-height:38px;font-size:10px}

  .setting-row{min-height:64px;padding:10px 2px;gap:10px}.setting-row strong{font-size:12px}.setting-row small{font-size:9px}.setting-row select{min-width:108px;height:38px;font-size:11px}.setting-switch{width:43px;height:25px}.setting-switch::after{width:17px;height:17px}.setting-switch:checked::after{transform:translateX(18px)}
  .settings-full-link{min-height:48px;margin-top:10px}.settings-help-link{padding-top:12px}

  .quick-help-lead{font-size:13px}.quick-help-example>div{grid-template-columns:44px 1fr}.quick-help-example .word-tile{width:40px;height:40px}.quick-score-grid strong{font-size:15px}

  .experience-page,.settings-page{width:calc(100% - 20px);padding-top:20px;padding-bottom:36px}
  .compact-hero h1{font-size:42px}.compact-hero p{font-size:13px}.experience-hero{margin-bottom:16px}
  .help-jump-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}.help-jump-nav a{flex:0 0 auto;padding:8px 10px;font-size:10px}
  .help-guide-grid{grid-template-columns:1fr;gap:8px}.help-guide-card,.help-guide-card.featured{grid-column:auto;grid-template-columns:44px minmax(0,1fr);gap:11px;padding:15px;border-radius:15px;min-height:0;box-shadow:none}.help-guide-icon,.help-guide-card.featured .help-guide-icon{width:44px;height:44px;border-radius:12px;font-size:17px}.help-guide-card h2{font-size:22px}.help-guide-card p{font-size:11px}.help-tile-example .word-tile{width:42px;height:42px}.help-rules{font-size:10px}.score-explainer{grid-template-columns:repeat(2,1fr)}.score-explainer strong{font-size:18px}
  .help-accessibility-card{display:block;padding:16px;border-radius:15px}.help-accessibility-card h2{font-size:23px}.help-accessibility-card p{font-size:11px}.help-accessibility-card .btn{width:100%;margin-top:12px}

  .settings-layout{grid-template-columns:1fr;gap:8px}.settings-card,.settings-data-card,.settings-account-card{grid-column:auto;padding:15px;border-radius:15px;box-shadow:none}.settings-card-head h2{font-size:23px}.settings-code-row{grid-template-columns:1fr}.settings-code-actions{grid-template-columns:1fr 1fr}.settings-code-actions .btn{min-width:0}.settings-import-actions{align-items:flex-start;flex-direction:column}.settings-account-actions{display:grid;grid-template-columns:1fr 1fr}

  /* Keep two action buttons usable inside game headers. */
  .word-page-head{grid-template-columns:40px minmax(0,1fr) 78px!important}
  .year-experience-head{grid-template-columns:40px minmax(0,1fr) 78px!important}
  .game-head-actions{gap:3px}.game-head-actions .icon-btn{width:36px!important;height:36px!important;border-radius:10px!important}
  .word-title-block h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .year-experience-head>div:nth-child(2){min-width:0}.year-experience-head h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .mobile-tabbar button{min-height:100%}
}

@media(max-width:390px){
  .pdd-drawer{max-height:91dvh;border-radius:18px 18px 0 0}
  .game-menu-list>.game-menu-coming{grid-template-columns:36px minmax(0,1fr)}
  .game-menu-coming em{grid-column:2;justify-self:start;margin-top:-2px}
  .quick-score-grid{grid-template-columns:repeat(2,1fr)}
  .word-page-head{grid-template-columns:36px minmax(0,1fr) 72px!important}
  .year-experience-head{grid-template-columns:36px minmax(0,1fr) 72px!important}
  .game-head-actions .icon-btn{width:34px!important;height:34px!important}
}

@media(max-width:340px){
  .game-menu-compact-grid{grid-template-columns:1fr 1fr}
  .game-menu-featured small,.game-menu-list small,.game-menu-coming small{display:none}
  .word-page-head,.year-experience-head{grid-template-columns:34px minmax(0,1fr) 68px!important}
  .game-head-actions{gap:2px}.game-head-actions .icon-btn{width:32px!important;height:32px!important;font-size:11px}
  .settings-account-actions{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .pdd-drawer,.pdd-overlay,.game-menu-featured,.game-menu-list>a,.game-menu-compact-grid a,.setting-switch,.setting-switch::after{transition:none!important}
}

/* V7.1 · Direct length access and non-color status cues */
.game-length-strip{display:flex;gap:5px;overflow-x:auto;padding:1px 0 3px 50px;scrollbar-width:none}
.game-length-strip::-webkit-scrollbar{display:none}
.game-length-strip a{
  flex:0 0 31px;height:31px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);
  display:grid;place-items:center;text-decoration:none;font-size:10px;font-weight:850
}
.game-length-strip a:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}

html.pdd-state-labels .word-tile,body.pdd-state-labels .word-tile{position:relative}
html.pdd-state-labels .word-tile.correct::after,body.pdd-state-labels .word-tile.correct::after,
html.pdd-state-labels .word-tile.present::after,body.pdd-state-labels .word-tile.present::after,
html.pdd-state-labels .word-tile.absent::after,body.pdd-state-labels .word-tile.absent::after{
  position:absolute;right:3px;top:2px;font-size:7px;font-weight:950;line-height:1;color:currentColor;opacity:.9
}
html.pdd-state-labels .word-tile.correct::after,body.pdd-state-labels .word-tile.correct::after{content:"✓"}
html.pdd-state-labels .word-tile.present::after,body.pdd-state-labels .word-tile.present::after{content:"·";font-size:12px;top:-1px}
html.pdd-state-labels .word-tile.absent::after,body.pdd-state-labels .word-tile.absent::after{content:"×"}

@media(max-width:700px){
  .game-length-strip{padding-left:47px;gap:4px}.game-length-strip a{flex-basis:29px;height:29px;border-radius:8px;font-size:9px}
}

/* =========================================================
   V8 · Nuevos juegos funcionales
   Tildes · Contrarreloj · Frase del Día · Palabra Raíz
   ========================================================= */

.new-game-page{width:min(1040px,calc(100% - 28px));margin:0 auto;padding:24px 0 64px}
.new-game-head{display:grid;grid-template-columns:44px minmax(0,1fr) 88px;gap:12px;align-items:start;margin-bottom:18px}
.new-game-head>div:nth-child(2){min-width:0}
.new-game-head h1{margin:2px 0 4px;font-size:clamp(30px,5vw,54px);line-height:.98;letter-spacing:-.045em}
.new-game-head p{margin:0;color:var(--muted);max-width:650px;font-size:13px;line-height:1.5}
.new-game-head .game-head-actions{justify-content:flex-end}
.new-game-unavailable{width:min(760px,calc(100% - 28px));margin:0 auto;padding:34px 0 80px}
.new-game-unavailable>.word-back{margin-bottom:18px}
.new-game-unavailable-card{border:1px solid var(--line);background:var(--paper);border-radius:22px;padding:28px;box-shadow:var(--shadow-soft)}
.new-game-unavailable-card h1{margin:5px 0 8px;font-size:40px;letter-spacing:-.04em}
.new-game-unavailable-card p{color:var(--muted);line-height:1.6}
.new-game-command{overflow:auto;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px;margin:18px 0}
.new-game-command code{white-space:nowrap;font-size:12px}
.new-game-unavailable-actions,.new-game-result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* Tildes reuses the Word engine but gets an extra accent keyboard row. */
body.is-word-game .word-page .keyboard-row:nth-child(4){max-width:360px;margin-inline:auto}
body.is-word-game .word-page .keyboard-row:nth-child(4) .key{flex:1 1 0;max-width:54px}

/* Contrarreloj */
.speed-scorebar,.root-scorebar,.phrase-statusbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line);border-radius:14px;overflow:hidden;margin:0 auto 12px;max-width:620px}
.speed-scorebar>div,.root-scorebar>div,.phrase-statusbar>div{background:var(--paper);padding:10px 12px;text-align:center}
.speed-scorebar span,.root-scorebar span,.phrase-statusbar span{display:block;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.speed-scorebar strong,.root-scorebar strong,.phrase-statusbar strong{display:block;margin-top:2px;font-size:22px;font-variant-numeric:tabular-nums}
.speed-scorebar #speed-time.urgent{color:#e95c4b;animation:pddPulse .8s ease-in-out infinite alternate}
@keyframes pddPulse{to{transform:scale(1.045)}}
.speed-intro{max-width:620px;margin:0 auto 10px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--paper));border-radius:12px;padding:9px 12px;display:flex;gap:8px;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted)}
.speed-intro strong{color:var(--ink);font-size:11px}
.speed-focus{max-width:920px;margin:0 auto;background:#08111f;border:1px solid #1b2b40;border-radius:20px;padding:16px;display:grid;grid-template-columns:minmax(250px,.85fr) minmax(380px,1.2fr);gap:18px;align-items:center;box-shadow:0 20px 55px rgba(2,8,18,.18)}
.speed-focus .word-board{margin:0 auto}.speed-focus .keyboard{width:100%}
.speed-recent{max-width:920px;margin:10px auto 0;display:flex;gap:6px;align-items:center;overflow:auto;scrollbar-width:none}
.speed-recent::-webkit-scrollbar{display:none}.speed-recent>span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;flex:0 0 auto}
.speed-recent b{font-size:10px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 9px;white-space:nowrap}.speed-recent b.won{color:var(--success)}.speed-recent b.lost{color:var(--muted)}
.new-game-result{max-width:760px;margin:16px auto 0;border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:22px;box-shadow:var(--shadow-soft)}
.new-game-result h2{font-size:34px;margin:4px 0 6px;letter-spacing:-.035em}.new-game-result p{color:var(--muted);line-height:1.55}.new-game-result blockquote{margin:12px 0;padding:14px 16px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg));font-size:19px;font-weight:800;border-radius:0 12px 12px 0}

/* Frase del Día */
.phrase-statusbar{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
.phrase-hidden-card{max-width:900px;margin:0 auto 12px;padding:20px;border-radius:18px;border:1px solid #21324a;background:#08111f;color:#f5f7fb;box-shadow:0 18px 48px rgba(2,8,18,.14)}
.phrase-hidden-card .eyebrow{color:#8fa0b8}
.phrase-mask{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:14px;line-height:1}
.phrase-word{display:inline-flex;gap:3px;align-items:flex-end;white-space:nowrap}
.phrase-letter{width:20px;height:31px;display:grid;place-items:center;border-bottom:2px solid #52627a;color:#fff;font-size:18px;font-weight:900;text-transform:uppercase}
.phrase-letter.revealed{border-color:#46d39d;color:#f6fff9}
.phrase-punctuation{display:grid;place-items:end center;min-width:6px;height:31px;color:#aeb9c8;font-size:18px;font-weight:850}
.visible-space{min-height:22px;max-width:900px;margin:0 auto 4px;text-align:center}
.phrase-play-grid{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.phrase-clue-panel,.phrase-solve-panel,.root-play-card{border:1px solid var(--line);background:var(--paper);border-radius:17px;padding:16px}
.phrase-panel-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}.phrase-panel-head h2{font-size:24px;margin:2px 0 0;letter-spacing:-.03em}.phrase-panel-head>span{font-size:9px;color:var(--muted);font-weight:800;text-transform:uppercase}
.phrase-clue-history{display:grid;gap:5px;margin-bottom:10px}.phrase-clue-row{display:grid;grid-template-columns:24px 1fr;gap:7px;align-items:center}.phrase-clue-row>b{font-size:9px;color:var(--muted);text-align:center}.phrase-clue-row>div{display:grid;grid-template-columns:repeat(5,34px);gap:4px}.phrase-clue-row .word-tile{width:34px;height:34px;font-size:14px;border-radius:7px}.phrase-clue-row.empty{opacity:.38}
.phrase-input-row,.root-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.phrase-input-row input,.phrase-solve-form input,.root-input-row input{min-width:0;width:100%;height:44px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:11px;padding:0 12px;font:inherit;font-size:16px;outline:none}.phrase-input-row input:focus,.phrase-solve-form input:focus,.root-input-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent)}
.phrase-clue-panel>small{display:block;margin-top:8px;color:var(--muted);font-size:9px;line-height:1.45}.phrase-solve-form{display:grid;gap:7px}.phrase-solve-form .btn{width:100%}.text-action{border:0;background:transparent;color:var(--muted);font:inherit;font-size:10px;text-decoration:underline;cursor:pointer;margin-top:12px;padding:0}.text-action:hover{color:var(--ink)}

/* Palabra Raíz */
.root-challenge-card{max-width:520px;margin:0 auto 10px;text-align:center;border:1px solid #21324a;background:#08111f;color:#fff;border-radius:18px;padding:17px}.root-challenge-card .eyebrow{color:#8fa0b8}.root-challenge-card>strong{display:block;margin:6px 0 4px;font-size:clamp(42px,8vw,70px);letter-spacing:.18em;color:#53dda7}.root-challenge-card p{margin:0;color:#aeb9c8;font-size:10px}
.root-scorebar{max-width:620px}.root-play-card{max-width:760px;margin:0 auto}.root-input-row{grid-template-columns:minmax(0,1fr) auto}.root-legend{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 14px;color:var(--muted);font-size:9px;font-weight:750}.root-legend span{display:flex;align-items:center;gap:5px}.root-legend i{width:11px;height:11px;border-radius:3px;background:var(--tile-absent)}.root-legend i.correct{background:var(--accent-2)}.root-legend i.present{background:var(--yellow)}
.root-attempt-list{display:grid;gap:7px}.root-attempt-row{display:grid;grid-template-columns:28px minmax(0,1fr) 42px;gap:7px;align-items:center;border-top:1px solid var(--line);padding-top:7px}.root-attempt-row>b{font-size:9px;color:var(--muted)}.root-attempt-row>strong{text-align:right;font-size:11px}.root-word-tiles{display:flex;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none}.root-word-tiles::-webkit-scrollbar{display:none}.root-word-tiles .word-tile{flex:0 0 31px;width:31px;height:31px;font-size:12px;border-radius:6px}.root-finish{width:100%;margin-top:12px}.root-score-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.root-score-detail>div{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}.root-score-detail span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase}.root-score-detail strong{display:block;font-size:20px;margin-top:2px}

/* Home teaser for the new V8 games */
.home-new-games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.home-new-game{min-height:132px;border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:15px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.home-new-game:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 36%,var(--line));box-shadow:var(--shadow-soft)}.home-new-game>span{width:35px;height:35px;border-radius:10px;background:#08111f;color:#53dda7;display:grid;place-items:center;font-weight:900;margin-bottom:auto}.home-new-game strong{font-size:15px;margin-top:12px}.home-new-game small{font-size:9px;color:var(--muted);margin-top:3px;line-height:1.4}

@media(max-width:700px){
  .new-game-page{width:calc(100% - 16px);padding:5px 0 24px}.new-game-head{grid-template-columns:36px minmax(0,1fr) 76px;gap:5px;margin-bottom:7px;align-items:center}.new-game-head h1{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.new-game-head .eyebrow,.new-game-head p{display:none}.new-game-head .game-head-actions{gap:3px}.new-game-head .icon-btn{width:35px;height:35px;border-radius:10px}
  .speed-scorebar,.root-scorebar,.phrase-statusbar{margin-bottom:6px;border-radius:10px}.speed-scorebar>div,.root-scorebar>div,.phrase-statusbar>div{padding:7px 5px}.speed-scorebar span,.root-scorebar span,.phrase-statusbar span{font-size:7px}.speed-scorebar strong,.root-scorebar strong,.phrase-statusbar strong{font-size:17px}
  .speed-intro{margin-bottom:5px;padding:7px 8px;border-radius:9px;display:block;text-align:center;font-size:8px}.speed-intro strong{font-size:9px}.speed-intro span{display:block;margin-top:2px}
  .speed-focus{display:block;border-radius:13px;padding:8px 5px 6px}.speed-focus .word-board{max-width:260px;margin-bottom:7px}.speed-focus .word-tile{max-height:42px}.speed-focus .word-keyboard-large .key{height:39px;font-size:11px}.speed-recent{margin-top:5px}.new-game-result{margin-top:8px;border-radius:13px;padding:14px}.new-game-result h2{font-size:26px}.new-game-result blockquote{font-size:15px}.new-game-result-actions{display:grid;grid-template-columns:1fr 1fr}.new-game-result-actions .btn{min-width:0}
  .phrase-hidden-card{margin-bottom:6px;border-radius:12px;padding:11px 8px}.phrase-hidden-card>.eyebrow{display:none}.phrase-mask{gap:7px 9px;margin-top:0}.phrase-word{gap:2px}.phrase-letter{width:15px;height:24px;font-size:14px}.phrase-punctuation{height:24px;font-size:14px}.visible-space{min-height:18px;font-size:9px}.phrase-play-grid{grid-template-columns:1fr;gap:6px}.phrase-clue-panel,.phrase-solve-panel,.root-play-card{border-radius:12px;padding:10px}.phrase-panel-head{margin-bottom:6px}.phrase-panel-head h2{font-size:18px}.phrase-panel-head .eyebrow{font-size:7px}.phrase-clue-history{gap:3px;margin-bottom:7px}.phrase-clue-row{grid-template-columns:20px 1fr;gap:4px}.phrase-clue-row>div{grid-template-columns:repeat(5,30px);gap:3px}.phrase-clue-row .word-tile{width:30px;height:30px;font-size:12px}.phrase-input-row{grid-template-columns:1fr auto}.phrase-input-row input,.phrase-solve-form input,.root-input-row input{height:42px}.phrase-input-row .btn{padding-inline:13px}.phrase-solve-panel{padding-top:9px}
  .root-challenge-card{margin-bottom:6px;border-radius:12px;padding:9px}.root-challenge-card .eyebrow{font-size:7px}.root-challenge-card>strong{font-size:36px;margin:2px 0;letter-spacing:.14em}.root-challenge-card p{font-size:8px}.root-input-row{grid-template-columns:1fr}.root-input-row .btn{width:100%}.root-legend{margin:8px 0 10px;gap:8px}.root-attempt-row{grid-template-columns:22px minmax(0,1fr) 34px;gap:4px}.root-word-tiles .word-tile{flex-basis:27px;width:27px;height:27px;font-size:10px}
  body.is-word-game .word-page .keyboard-row:nth-child(4){max-width:270px}.word-page .keyboard-row:nth-child(4) .key{height:34px!important}
  .home-new-games{grid-template-columns:1fr 1fr}.home-new-game{min-height:112px;padding:12px;border-radius:13px}.home-new-game>span{width:31px;height:31px}.home-new-game strong{font-size:13px}.home-new-game small{font-size:8px}
}

@media(max-width:360px){
  .new-game-page{width:calc(100% - 10px)}.new-game-head{grid-template-columns:32px minmax(0,1fr) 70px}.new-game-head h1{font-size:21px}.new-game-head .icon-btn{width:32px;height:32px}.speed-focus{padding-inline:3px}.speed-focus .word-keyboard-large .key{height:36px;font-size:10px;padding:0}.phrase-letter{width:14px;height:22px;font-size:12px}.phrase-clue-row>div{grid-template-columns:repeat(5,28px)}.phrase-clue-row .word-tile{width:28px;height:28px}.root-word-tiles .word-tile{flex-basis:25px;width:25px;height:25px}.home-new-games{grid-template-columns:1fr 1fr;gap:6px}
}

@media(prefers-reduced-motion:reduce){.speed-scorebar #speed-time.urgent{animation:none}.home-new-game{transition:none}}


/* =========================================================
   ADSENSE FASE 2 · contexto editorial útil bajo los juegos
   ========================================================= */
.game-editorial{
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  gap:28px;
  margin:30px auto 0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper);
  max-width:1040px
}
.game-editorial-main{min-width:0}
.game-editorial h2{
  margin:5px 0 12px;
  font-family:var(--font-display);
  font-size:clamp(27px,3.5vw,36px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.025em
}
.game-editorial-main>p{margin:0 0 10px;color:var(--muted);line-height:1.7}
.game-editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:18px}
.game-editorial-grid article{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.game-editorial-grid strong{display:block;margin-bottom:5px;font-size:12px}
.game-editorial-grid p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
.game-editorial-links{display:grid;align-content:start;gap:4px}
.game-editorial-links>strong{margin-bottom:5px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.game-editorial-links a{padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:12px;font-weight:750}
.word-editorial-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.word-editorial-points>div{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.word-editorial-points strong,.word-editorial-points span{display:block}
.word-editorial-points strong{font-size:11px;margin-bottom:3px}
.word-editorial-points span{color:var(--muted);font-size:10px;line-height:1.45}
@media(max-width:760px){
  .game-editorial{grid-template-columns:1fr;gap:18px;margin-top:20px;padding:17px;border-radius:17px}
  .game-editorial-grid{grid-template-columns:1fr}
  .word-editorial-points{grid-template-columns:1fr}
}

/* V8.1 · Compartir retos */
.challenge-preview-grid{display:inline-block;margin:7px 0 2px;font-size:18px;line-height:1;letter-spacing:2px;white-space:nowrap}
@media(max-width:430px){.challenge-preview-grid{font-size:16px;letter-spacing:1px}}

/* V8.2 · Mobile game viewport + readable tab bar */
@media (max-width:700px){
  /* Main mobile navigation: larger labels/icons and a larger tap target. */
  body:not(.is-word-game):not(.is-year-game){
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .mobile-tabbar{
    height:70px;
    padding:6px 5px;
    border-radius:19px;
  }
  .mobile-tabbar a,
  .mobile-tabbar button{
    gap:4px;
    border-radius:13px;
  }
  .mobile-tabbar a span,
  .mobile-tabbar button span{
    height:25px;
    min-width:25px;
    font-size:20px;
  }
  .mobile-tabbar a b,
  .mobile-tabbar button b{
    font-size:11px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.01em;
  }

  /* Word game: keep board + the three keyboard rows inside a phone viewport. */
  body.is-word-game .word-page{
    padding-top:6px;
    padding-bottom:12px;
  }
  body.is-word-game .word-page-head{
    margin-bottom:5px;
  }
  body.is-word-game .word-title-block h1{
    font-size:clamp(25px,7.6vw,30px);
  }
  body.is-word-game .word-title-block p{
    margin-top:2px;
    font-size:9px;
  }
  body.is-word-game .word-mode-tabs{
    margin-bottom:5px;
  }
  body.is-word-game .word-mode-tabs a{
    padding:6px 10px;
  }
  body.is-word-game .word-length-switcher{
    margin-bottom:5px;
  }
  body.is-word-game .word-length-switcher a{
    height:32px;
    min-width:34px;
  }
  body.is-word-game .word-statusbar{
    margin-bottom:5px;
  }
  body.is-word-game .word-status-item{
    min-height:45px;
  }
  body.is-word-game .word-focus{
    padding:7px 5px 8px;
    border-radius:16px;
  }
  body.is-word-game .word-message{
    min-height:16px;
    line-height:16px;
  }
  body.is-word-game .word-board.word-board-large{
    margin-bottom:7px;
    gap:4px;
  }
  body.is-word-game .word-board-large .word-row{
    gap:4px;
  }
  body.is-word-game .word-board.word-board-large.word-board-3{max-width:min(198px,31svh)}
  body.is-word-game .word-board.word-board-large.word-board-4{max-width:min(246px,35svh)}
  body.is-word-game .word-board.word-board-large.word-board-5{max-width:min(286px,38svh)}
  body.is-word-game .word-board.word-board-large.word-board-medium{max-width:min(360px,46svh)}
  body.is-word-game .word-board.word-board-large.word-board-long,
  body.is-word-game .word-board.word-board-large.word-board-xl{max-width:100%}
  body.is-word-game .keyboard.word-keyboard-large{
    gap:4px;
  }
  body.is-word-game .word-keyboard-large .keyboard-row{
    gap:3px;
  }
  body.is-word-game .word-keyboard-large .key{
    height:clamp(39px,5.8svh,46px);
    min-height:39px;
    font-size:clamp(12px,3.45vw,14px);
  }
  body.is-word-game .word-keyboard-large .key.wide{
    font-size:clamp(7px,2.1vw,9px);
  }
}

/* Extra compression for phones with a short browser viewport (URL bar visible). */
@media (max-width:700px) and (max-height:760px){
  body.is-word-game .word-page-head{margin-bottom:3px}
  body.is-word-game .word-title-block .eyebrow{display:none}
  body.is-word-game .word-title-block h1{font-size:25px;margin:0}
  body.is-word-game .word-title-block p{font-size:8px}
  body.is-word-game .word-mode-tabs{margin-bottom:4px}
  body.is-word-game .word-mode-tabs a{padding:5px 9px;font-size:10px}
  body.is-word-game .word-length-switcher{margin-bottom:4px}
  body.is-word-game .word-length-switcher a{height:30px;min-width:32px;font-size:11px}
  body.is-word-game .word-status-item{min-height:42px}
  body.is-word-game .word-status-item span{font-size:7px}
  body.is-word-game .word-status-item strong{font-size:14px}
  body.is-word-game .word-timer-item strong{font-size:18px}
  body.is-word-game .word-focus{padding-top:5px;padding-bottom:6px}
  body.is-word-game .word-message{min-height:12px;line-height:12px;font-size:9px}
  body.is-word-game .word-board.word-board-large.word-board-3{max-width:min(184px,29svh)}
  body.is-word-game .word-board.word-board-large.word-board-4{max-width:min(226px,32svh)}
  body.is-word-game .word-board.word-board-large.word-board-5{max-width:min(258px,34svh)}
  body.is-word-game .word-keyboard-large .key{height:38px;min-height:38px}
}

@media (max-width:340px){
  .mobile-tabbar a b,
  .mobile-tabbar button b{font-size:10px}
  .mobile-tabbar a span,
  .mobile-tabbar button span{font-size:18px}
}

/* ==========================================================
   V8.3 · MOBILE GAME FOCUS
   During an active Word match we remove configuration chrome,
   enlarge the live data and give the board/keyboard more room.
   ========================================================== */
@media (max-width:700px){
  /* Bigger, more readable live match data. */
  body.is-word-game .word-statusbar{
    overflow:hidden;
  }
  body.is-word-game .word-status-item{
    min-height:56px;
    padding:7px 8px;
  }
  body.is-word-game .word-status-item span{
    font-size:10px;
    line-height:1;
    letter-spacing:.16em;
    font-weight:850;
  }
  body.is-word-game .word-status-item strong{
    margin-top:5px;
    font-size:20px;
    line-height:1;
    font-weight:900;
  }
  body.is-word-game .word-timer-item strong{
    font-size:25px;
    letter-spacing:.015em;
  }

  /* Mobile active match: remove non-essential chrome from the start. */
  body.is-word-game.word-game-active .word-mode-tabs,
  body.is-word-game.word-game-active .word-length-switcher{
    display:none;
  }
  body.is-word-game.word-game-active .word-page{
    padding-top:4px;
  }
  body.is-word-game.word-game-active .word-page-head{
    grid-template-columns:40px minmax(0,1fr) 84px;
    align-items:center;
    margin-bottom:4px;
  }
  body.is-word-game.word-game-active .word-title-block .eyebrow,
  body.is-word-game.word-game-active .word-title-block p{
    display:none;
  }
  body.is-word-game.word-game-active .word-title-block h1{
    margin:0;
    font-size:clamp(20px,6.5vw,24px);
    line-height:1.02;
  }
  body.is-word-game.word-game-active .word-back,
  body.is-word-game.word-game-active .game-head-actions .icon-btn{
    width:38px;
    height:38px;
    border-radius:10px;
  }
  body.is-word-game.word-game-active .word-statusbar{
    margin-top:2px;
    margin-bottom:6px;
  }
  body.is-word-game.word-game-active .word-focus{
    padding-top:7px;
    padding-bottom:8px;
  }
  body.is-word-game.word-game-active .word-board.word-board-large{
    margin-bottom:8px;
  }
  body.is-word-game.word-game-active:not(.word-game-finished) .word-stats-section,
  body.is-word-game.word-game-active:not(.word-game-finished) .word-seo-copy,
  body.is-word-game.word-game-active:not(.word-game-finished) ~ .site-footer{
    display:none;
  }

  /* While a match is active, the game itself fills the phone viewport. */
  body.is-word-game.word-game-active:not(.word-game-finished) .word-focus{
    min-height:calc(100svh - 118px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
  }
  body.is-word-game.word-game-active:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(328px,43svh);
  }
  body.is-word-game.word-game-active:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    max-width:min(292px,40svh);
  }
  body.is-word-game.word-game-active:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    max-width:min(236px,36svh);
  }
  body.is-word-game.word-game-active:not(.word-game-finished) .word-keyboard-large .key{
    height:clamp(42px,6.2svh,50px);
    min-height:42px;
  }

  /* Floating game chrome: compact, always readable, but not consuming a second screen. */
  body.is-word-game.word-game-active:not(.word-game-finished) .word-page-head,
  body.is-word-game.word-game-active:not(.word-game-finished) .word-statusbar{
    position:relative;
    z-index:4;
  }
  body.is-word-game.word-game-active:not(.word-game-finished) .word-statusbar{
    box-shadow:0 8px 24px rgba(12,22,41,.08);
  }

  /* While a match is active, the screen should be almost only game. */

  /* While the user is typing we keep the same compact layout. */
  body.is-word-game.word-game-playing .word-page-head{
    grid-template-columns:40px minmax(0,1fr) 84px;
    margin-bottom:4px;
  }

  /* If a result has been reached, normal navigation/configuration is visible again. */
  body.is-word-game.word-game-finished .word-mode-tabs{
    display:flex;
  }
  body.is-word-game.word-game-finished .word-length-switcher{
    display:flex;
  }
}

/* Short Android/Chrome viewport: preserve readability instead of shrinking stats. */
@media (max-width:700px) and (max-height:760px){
  body.is-word-game .word-status-item{
    min-height:50px;
    padding:6px 7px;
  }
  body.is-word-game .word-status-item span{font-size:9px}
  body.is-word-game .word-status-item strong{font-size:18px}
  body.is-word-game .word-timer-item strong{font-size:23px}
  body.is-word-game.word-game-active .word-page{
    padding-top:2px;
  }
  body.is-word-game.word-game-active .word-page-head{
    margin-bottom:3px;
  }
  body.is-word-game.word-game-active .word-title-block h1{
    font-size:22px;
  }
  body.is-word-game.word-game-active .word-back,
  body.is-word-game.word-game-active .game-head-actions .icon-btn{
    width:36px;
    height:36px;
  }
  body.is-word-game.word-game-active .word-board.word-board-large.word-board-5,
  body.is-word-game.word-game-playing .word-board.word-board-large.word-board-5{
    max-width:min(270px,36svh);
  }
}

@media (max-width:700px){
  body.is-word-game.word-game-active:not(.word-game-finished) .site-footer{
    display:none;
  }
}


/* ==========================================================
   V9.0 · YEAR RESULT UX / LIGHT CONTRAST
   The next action appears immediately below the photo and the
   reveal card always uses the current theme's readable colors.
   ========================================================== */
.year-feedback-pro{
  color:var(--ink);
  background:var(--paper);
}
.year-feedback-pro .year-reveal-head h2,
.year-feedback-pro .year-answer-badge strong,
.year-feedback-pro .year-result-comparison strong,
.year-feedback-pro .year-event-summary{
  color:var(--ink);
}
.year-feedback-pro .year-reveal-head p,
.year-feedback-pro .year-direction,
.year-feedback-pro .year-attribution,
.year-feedback-pro .year-attribution a{
  color:var(--muted);
}
.year-feedback-pro .eyebrow{
  color:var(--accent-2);
}
.year-next-photo{
  min-height:52px;
  margin:0 0 14px;
  border-radius:13px;
  font-weight:900;
  font-size:15px;
}

@media(max-width:700px){
  .year-feedback-pro{
    scroll-margin-top:8px;
    margin-top:8px;
    padding:9px;
  }
  .year-next-photo{
    min-height:54px;
    margin-bottom:10px;
    font-size:16px;
  }
  .year-reveal-head{
    padding:4px 2px 0;
  }
}


/* ==========================================================
   V9.1 · RESULTADO Y COMPARTIR PRIORITARIOS
   Al terminar, el resultado aparece antes que las estadísticas
   y Compartir es la primera acción visible en móvil.
   ========================================================== */
.word-result-actions-primary{
  margin:16px 0 4px;
}
.share-result-main{
  font-weight:900;
}
@media (max-width:700px){
  body.is-word-game.word-game-finished .word-stats-section{
    padding-top:10px;
  }
  body.is-word-game.word-game-finished .word-result-panel{
    margin-top:0;
    margin-bottom:14px;
  }
  body.is-word-game.word-game-finished .word-result-actions-primary{
    display:grid;
    grid-template-columns:1fr;
    margin:12px 0 14px;
  }
  body.is-word-game.word-game-finished .share-result-main{
    width:100%;
    min-height:52px;
    font-size:16px;
    border-radius:12px;
  }
  body.is-word-game.word-game-finished .word-stats-head{
    margin-top:6px;
  }
}


/* ==========================================================
   V9.4 · YEAR / GLOBAL MOBILE SCROLL FIX
   Keep document scrolling native on every mobile screen. The
   year game must never become a fixed-height/overflow trap.
   ========================================================== */
@media (max-width:700px){
  html,
  body{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.pdd-sheet-open){
    touch-action:pan-y pinch-zoom!important;
  }
  main,
  .shell,
  .word-page,
  .daily-hub,
  .archive-page,
  .year-experience,
  .year-game-pro,
  .year-stage-card,
  .year-feedback-pro,
  .year-final,
  .new-game-page,
  .content-shell,
  .challenge-shell,
  .account-shell{
    height:auto!important;
    max-height:none!important;
    overflow-y:visible!important;
  }

  body.is-year-game,
  body.is-year-game main,
  body.is-year-game .year-experience{
    position:static!important;
    overflow-y:visible!important;
    max-height:none!important;
    touch-action:pan-y pinch-zoom!important;
  }
  body.is-year-game .year-stage-card,
  body.is-year-game .year-photo-cinematic,
  body.is-year-game .year-feedback-pro,
  body.is-year-game .year-side-panel{
    touch-action:pan-y!important;
  }
  body.is-year-game input[type="range"]{
    touch-action:pan-x!important;
  }
  .site-footer{
    position:relative;
  }
}

/* ==========================================================
   V9.6 · YEAR RESULT LIGHT THEME CONTRAST
   Explicit theme-safe colors for the reveal/result panel.
   ========================================================== */
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro{
  background:#fffefb;
  border-color:#d9d7cf;
  color:#0b1326;
}
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-reveal-head h2,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-answer-badge strong,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-result-comparison strong,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-event-summary{
  color:#0b1326!important;
}
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-reveal-head p,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-direction,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-attribution,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-attribution a{
  color:#5f6878!important;
}
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-answer-badge,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-result-comparison>div{
  background:#fff!important;
  border-color:#bcc3cf!important;
}
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-answer-badge span,
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-result-comparison span{
  color:#657083!important;
}
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .year-result-comparison .points strong{
  color:#0aa574!important;
}
html:not(.pdd-theme-dark) body:not(.dark).is-year-game .year-feedback-pro .eyebrow{
  color:#0aa574!important;
}

html.pdd-theme-dark body.is-year-game .year-feedback-pro,
body.dark.is-year-game .year-feedback-pro{
  background:#101a2d;
  border-color:#344158;
  color:#e8edfb;
}

/* ==========================================================
   V9.7 · YEAR LIGHT MODE — DEFINITIVE CONTRAST
   The previous patch only covered the per-round feedback and
   depended on the html theme class. Light mode is determined by
   the body not having .dark, and both feedback + final result are
   explicitly themed here after every previous rule.
   ========================================================== */
body.is-year-game:not(.dark) .year-feedback-pro,
body.is-year-game:not(.dark) .year-final-pro{
  background:#fffefb!important;
  border-color:#c9ced8!important;
  color:#0c1629!important;
}

body.is-year-game:not(.dark) .year-feedback-pro .year-reveal-head h2,
body.is-year-game:not(.dark) .year-feedback-pro .year-answer-badge strong,
body.is-year-game:not(.dark) .year-feedback-pro .year-result-comparison strong,
body.is-year-game:not(.dark) .year-feedback-pro .year-event-summary,
body.is-year-game:not(.dark) .year-feedback-pro .year-attribution strong,
body.is-year-game:not(.dark) .year-final-pro h2,
body.is-year-game:not(.dark) .year-final-pro .year-final-score strong,
body.is-year-game:not(.dark) .year-final-pro .year-final-metrics strong,
body.is-year-game:not(.dark) .year-final-pro .year-final-rounds strong{
  color:#0c1629!important;
  opacity:1!important;
}

body.is-year-game:not(.dark) .year-feedback-pro .year-reveal-head p,
body.is-year-game:not(.dark) .year-feedback-pro .year-direction,
body.is-year-game:not(.dark) .year-feedback-pro .year-attribution,
body.is-year-game:not(.dark) .year-feedback-pro .year-attribution a,
body.is-year-game:not(.dark) .year-final-pro .year-final-score span,
body.is-year-game:not(.dark) .year-final-pro .year-final-metrics span,
body.is-year-game:not(.dark) .year-final-pro .year-final-rounds span,
body.is-year-game:not(.dark) .year-final-pro .year-final-rounds small{
  color:#5d6675!important;
  opacity:1!important;
}

body.is-year-game:not(.dark) .year-feedback-pro .year-answer-badge,
body.is-year-game:not(.dark) .year-feedback-pro .year-result-comparison>div,
body.is-year-game:not(.dark) .year-feedback-pro .year-attribution,
body.is-year-game:not(.dark) .year-final-pro .year-final-metrics>div,
body.is-year-game:not(.dark) .year-final-pro .year-final-rounds>div{
  background:#ffffff!important;
  border-color:#bfc6d1!important;
}

body.is-year-game:not(.dark) .year-feedback-pro .year-answer-badge span,
body.is-year-game:not(.dark) .year-feedback-pro .year-result-comparison span{
  color:#657083!important;
  opacity:1!important;
}

body.is-year-game:not(.dark) .year-feedback-pro .eyebrow,
body.is-year-game:not(.dark) .year-final-pro .eyebrow,
body.is-year-game:not(.dark) .year-feedback-pro .year-result-comparison .points strong{
  color:#07966a!important;
  opacity:1!important;
}

/* Keep action buttons using their own button colors, never inherited pale text. */
body.is-year-game:not(.dark) .year-feedback-pro .btn.primary,
body.is-year-game:not(.dark) .year-final-pro .btn.primary{
  color:#06261c!important;
}
body.is-year-game:not(.dark) .year-final-pro .btn.secondary,
body.is-year-game:not(.dark) .year-final-pro .next-game-btn{
  color:#0c1629!important;
}

@media (max-width:700px){
  .photo-preview{height:154px;border-radius:16px;margin-top:18px}
}

/* V9.9 · Home cards use product-like previews instead of generic decoration. */
.home-game-preview{
  height:170px;
  margin-top:26px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(155deg,#071226 0%,#0c1930 100%);
  border:1px solid rgba(93,112,147,.24);
  color:#edf3ff;
}
.home-word-preview{display:grid;align-content:center;gap:14px;padding:19px 18px}
.home-preview-board{display:grid;gap:7px;margin:auto;width:min(100%,310px)}
.home-preview-board>div{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.home-preview-board span{aspect-ratio:1;display:grid;place-items:center;border:2px solid #34435f;border-radius:8px;font-size:clamp(14px,2vw,21px);font-weight:900;background:#121e34;color:#f0f4fb}
.home-preview-board .correct{background:var(--accent);border-color:var(--accent);color:#06271b}
.home-preview-board .present{background:var(--yellow);border-color:var(--yellow);color:#3d2700}
.home-preview-board .absent{background:#344058;border-color:#344058;color:#eef3fb}
.home-preview-meta{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;width:min(100%,310px);margin:auto;padding:8px 11px;border:1px solid #31405b;border-radius:10px;background:#0a1528;font-size:11px;font-style:normal;text-align:center}
.home-preview-meta span{color:var(--accent);font-weight:900}.home-preview-meta em{font-style:normal;font-weight:900}.home-preview-meta b{font-weight:900}
.home-infinite-preview{display:grid;grid-template-columns:74px 1fr;grid-template-rows:auto auto;align-items:center;gap:9px 14px;padding:20px}
.home-infinite-symbol{grid-row:1/3;width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:rgba(48,220,161,.12);border:1px solid rgba(48,220,161,.38);color:var(--accent);font-size:48px;line-height:1;font-weight:500}
.home-length-chips{display:flex;gap:5px;align-self:end;overflow:hidden}
.home-length-chips span{min-width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#18253c;border:1px solid #33415b;color:#cbd3e1;font-size:11px;font-weight:850}
.home-length-chips span.active{background:var(--accent);border-color:var(--accent);color:#06271b}
.home-infinite-copy{align-self:start;display:grid;gap:1px}.home-infinite-copy strong{font-size:17px}.home-infinite-copy small{color:#9aa8bd;font-size:10px}
.home-challenge-preview{display:grid;align-content:center;gap:16px;padding:20px}
.home-challenge-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:min(100%,310px);margin:auto}
.home-challenge-tiles span{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;background:#17243c;border:1px solid #3a4966;color:#eef3fb;font-size:25px;font-weight:900}
.home-challenge-link{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:min(100%,310px);margin:auto;padding:10px 12px;border-radius:12px;background:rgba(48,220,161,.1);border:1px solid rgba(48,220,161,.32)}
.home-challenge-link>span{grid-row:1/3;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--accent);color:#06271b;font-weight:900;font-size:20px}
.home-challenge-link b{font-size:13px}.home-challenge-link small{font-size:9px;color:#a9b7c9}
@media(max-width:700px){
  .home-game-preview{height:154px;margin-top:18px;border-radius:16px}
  .home-word-preview{padding:14px 12px;gap:10px}
  .home-preview-board{width:min(100%,278px)}
  .home-preview-meta{width:min(100%,278px);padding:7px 9px}
  .home-infinite-preview,.home-challenge-preview{padding:15px}
}


/* ==========================================================
   V10.0 · YEAR RESULT MOBILE FIT + BUTTON CONTRAST
   Fix narrow-screen result layouts and ensure dark CTA labels
   remain readable in light mode.
   ========================================================== */
@media (max-width:430px){
  body.is-year-game .year-feedback-pro{
    padding:10px 9px;
  }
  body.is-year-game .year-reveal-head{
    display:block;
  }
  body.is-year-game .year-reveal-head h2{
    font-size:clamp(24px,8.2vw,32px);
    line-height:1.02;
  }
  body.is-year-game .year-answer-badge{
    margin-top:10px;
    width:100%;
    min-width:0;
  }
  body.is-year-game .year-result-comparison{
    grid-template-columns:1fr;
    gap:7px;
    margin:12px 0;
  }
  body.is-year-game .year-result-comparison > div{
    padding:12px 10px;
  }
  body.is-year-game .year-result-comparison strong{
    font-size:26px;
  }
  body.is-year-game .year-event-summary{
    font-size:15px;
    line-height:1.4;
  }
  body.is-year-game .year-final-pro{
    padding:18px 10px;
  }
  body.is-year-game .year-final-pro h2{
    font-size:clamp(28px,8.6vw,40px);
  }
  body.is-year-game .year-final-score strong{
    font-size:clamp(48px,15vw,66px);
  }
  body.is-year-game .year-final-metrics{
    grid-template-columns:1fr;
    gap:7px;
    margin:14px auto;
  }
  body.is-year-game .year-final-rounds{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  body.is-year-game .year-final-rounds > div:last-child{
    grid-column:1 / -1;
  }
  body.is-year-game .year-final-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  body.is-year-game .year-final-actions .btn,
  body.is-year-game .year-next-photo{
    width:100%;
    min-height:52px;
    padding-inline:14px;
    white-space:normal;
    line-height:1.2;
    text-align:center;
  }
}

body.is-year-game:not(.dark) .year-final-pro .next-game-btn{
  color:#f7f6f2!important;
}
body.is-year-game:not(.dark) .year-final-pro .btn.secondary{
  color:#0c1629!important;
}

/* ==========================================================
   V10.1 · PDD ICON SYSTEM
   Local 24px outline SVGs replace emoji / Unicode UI glyphs.
   ========================================================== */
.ui-icon{
  width:1.25em;
  height:1.25em;
  display:inline-block;
  flex:0 0 auto;
  vertical-align:-.18em;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ui-icon-sm{width:1em;height:1em;stroke-width:2.15}
.ui-icon-inline{width:17px;height:17px;margin-right:5px;vertical-align:-3px}
.icon-btn .ui-icon{width:20px;height:20px;stroke-width:2}
.word-back .ui-icon{width:21px;height:21px;stroke-width:2.15}
.progress-nav-link .ui-icon{width:18px;height:18px}
.nav-menu-button .ui-icon{margin-left:3px}
.mobile-tabbar a span .ui-icon,
.mobile-tabbar button span .ui-icon{width:21px;height:21px;stroke-width:2.1}
.mobile-tabbar a.active .ui-icon,
.mobile-tabbar button.active .ui-icon{stroke-width:2.35}
.game-menu-icon .ui-icon{width:22px;height:22px;stroke-width:1.9}
.game-menu-featured .game-menu-icon .ui-icon{width:24px;height:24px}
.game-menu-compact-grid a>span .ui-icon{width:23px;height:23px;stroke-width:1.9}
.year-mode-icon{display:grid;place-items:center}
.year-mode-icon .ui-icon{width:24px;height:24px;stroke-width:1.9}
.year-mode-card.active .year-mode-icon .ui-icon{stroke-width:2.3}
.archive-game-notice{display:flex;align-items:center;gap:4px}

@media(max-width:700px){
  .mobile-tabbar a span .ui-icon,
  .mobile-tabbar button span .ui-icon{width:22px;height:22px}
  .icon-btn .ui-icon{width:19px;height:19px}
  .game-menu-icon .ui-icon{width:21px;height:21px}
  .game-menu-compact-grid a>span .ui-icon{width:22px;height:22px}
}

/* V11.4 · ¿De qué año es este videoclip? */
.music-video-experience{padding-top:24px;padding-bottom:80px}.music-video-head{margin-bottom:20px}.music-video-game-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start}.music-video-stage-card{background:var(--surface,#fff);border:1px solid var(--line,#e4e0d9);border-radius:24px;padding:18px;box-shadow:0 18px 50px rgba(25,28,32,.07)}.music-video-chip{display:inline-flex;margin-left:8px;padding:4px 8px;border-radius:999px;background:rgba(223,95,63,.1);font-size:11px;font-weight:800;letter-spacing:.08em}.music-video-player-shell{position:relative;margin:14px 0 18px;border-radius:20px;overflow:hidden;background:#0b0d12;aspect-ratio:16/9}.music-video-crop{position:absolute;inset:-42px 0 -42px 0;overflow:hidden}.music-video-crop iframe{width:100%;height:calc(100% + 84px);border:0;pointer-events:none;background:#090b10}.music-video-play{position:absolute;inset:0;border:0;background:rgba(7,9,13,.72);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;font:inherit}.music-video-play .ui-icon{width:38px;height:38px}.music-video-play span{font-size:19px;font-weight:800}.music-video-play small{opacity:.72}.music-video-timer{position:absolute;left:16px;right:16px;bottom:14px;height:6px;border-radius:999px;background:rgba(255,255,255,.28);overflow:visible}.music-video-timer span{display:block;width:0;height:100%;border-radius:999px;background:#fff}.music-video-timer b{position:absolute;right:0;bottom:12px;color:#fff;font-size:13px}@keyframes mvProgress{from{width:0}to{width:100%}}.music-video-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.music-video-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:750}.music-video-form label span{display:flex;justify-content:space-between;gap:10px}.music-video-form label span b{color:var(--accent,#df5f3f)}.music-video-form input[type=text]{width:100%;min-height:48px;border:1px solid var(--line,#ddd);border-radius:13px;padding:0 13px;font:inherit;background:var(--surface,#fff);color:inherit}.music-video-year-row{grid-column:1/-1;padding:12px 0 2px}.music-video-form>.btn{grid-column:1/-1}.music-video-feedback,.music-video-final{margin-top:14px;padding:18px;border-radius:18px;background:var(--soft,#f7f5f1);border:1px solid var(--line,#e5e1da)}.mv-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.mv-result-head h2{margin:4px 0 0;font-size:22px;line-height:1.08}.mv-result-head>strong{font-size:20px;white-space:nowrap}.mv-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.mv-result-grid>div{padding:12px;border-radius:14px;background:var(--surface,#fff);border:1px solid var(--line,#ddd);display:flex;flex-direction:column;gap:4px}.mv-result-grid span,.mv-result-grid small{font-size:12px;color:var(--muted,#666)}.mv-result-grid .ok b{color:#17865c}.mv-result-grid .miss b{color:#a33}.mv-history-row{display:flex;justify-content:space-between;border-top:1px solid var(--line,#ddd);padding:8px 0}.music-video-points p{display:flex;justify-content:space-between;margin:9px 0}.music-video-points small{display:block;margin-top:10px;color:var(--muted,#666)}
@media(max-width:900px){.music-video-game-grid{grid-template-columns:1fr}.music-video-side{display:none}}
@media(max-width:700px){.music-video-experience{padding-top:8px;padding-bottom:92px}.music-video-head p{font-size:14px}.music-video-stage-card{margin:0 -4px;padding:12px;border-radius:18px}.music-video-player-shell{margin-top:10px;border-radius:15px}.music-video-form{grid-template-columns:1fr}.music-video-form label,.music-video-year-row,.music-video-form>.btn{grid-column:1}.mv-result-head{display:block}.mv-result-head>strong{display:block;margin-top:7px}.mv-result-grid{grid-template-columns:1fr}.music-video-play span{font-size:17px}}


/* V11.4.2 · reproductor limpio: vídeo visible, sin velo ni texto */
.music-video-play{
  background:transparent!important;
  color:#fff;
  gap:0!important;
}
.music-video-play::before{
  content:\"\";
  position:absolute;
  inset:0;
  background:transparent;
}
.music-video-play-icon{
  position:relative;
  z-index:1;
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(7,9,13,.58);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.music-video-play-icon .ui-icon{width:26px!important;height:26px!important;stroke-width:2.2;}
.music-video-play span:not(.music-video-play-icon),
.music-video-play small{display:none!important;}
.music-video-player-shell:hover .music-video-play-icon{transform:scale(1.04);}
.music-video-play-icon{transition:transform .16s ease,background .16s ease;}
@media(max-width:700px){
  .music-video-play-icon{width:52px;height:52px;}
  .music-video-play-icon .ui-icon{width:24px!important;height:24px!important;}
}

/* V11.4.3 · brillo real del iframe de YouTube
   Algunos videoclips tienen escenas nocturnas y el propio reproductor puede
   verse más oscuro. El filtro se aplica al iframe completo, no a un overlay. */
.music-video-crop iframe{
  filter:brightness(1.42) contrast(.94) saturate(1.06)!important;
  -webkit-filter:brightness(1.42) contrast(.94) saturate(1.06)!important;
  transform:scale(1.025);
  transform-origin:center center;
}
.music-video-player-shell{
  background:#111!important;
}

/* V11.4.4 · corrección definitiva: el oscurecimiento era el botón overlay, no YouTube */
.music-video-play{
  background:transparent!important;
  box-shadow:none!important;
  color:#fff;
  gap:0!important;
}
.music-video-play::before,
.music-video-play::after{
  content:none!important;
  display:none!important;
  background:transparent!important;
}
.music-video-play > span:not(.music-video-play-icon),
.music-video-play > small{
  display:none!important;
}
.music-video-play-icon{
  position:relative;
  z-index:2;
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(7,9,13,.58);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.music-video-play-icon .ui-icon{
  width:26px!important;
  height:26px!important;
  stroke-width:2.2;
}
.music-video-crop iframe{
  filter:none!important;
  -webkit-filter:none!important;
  transform:none!important;
  opacity:1!important;
}
@media(max-width:700px){
  .music-video-play-icon{width:52px;height:52px}
  .music-video-play-icon .ui-icon{width:24px!important;height:24px!important}
}

/* V11.4.5 · contraste tipográfico Videoclip del Año (modo claro) */
body:not(.dark) .music-video-stage-card{
  color:#0c1629;
}
body:not(.dark) .music-video-stage-card .music-video-chip{
  color:#9b3f2c;
}
body:not(.dark) .music-video-stage-card .music-video-form label{
  color:#40506a;
}
body:not(.dark) .music-video-stage-card .music-video-form label > span{
  color:#40506a!important;
}
body:not(.dark) .music-video-stage-card .music-video-form label > span b{
  color:#16a36a!important;
}
body:not(.dark) .music-video-stage-card .music-video-form input[type=text]{
  color:#0c1629!important;
  background:#fff!important;
  border-color:#aeb8c6!important;
}
body:not(.dark) .music-video-stage-card .music-video-form input[type=text]::placeholder{
  color:#667085!important;
  opacity:1!important;
}
body:not(.dark) .music-video-stage-card .music-video-year-row,
body:not(.dark) .music-video-stage-card .music-video-year-row label,
body:not(.dark) .music-video-stage-card .music-video-year-row span,
body:not(.dark) .music-video-stage-card .music-video-year-row b,
body:not(.dark) .music-video-stage-card .music-video-year-row strong{
  color:#40506a!important;
}
body:not(.dark) .music-video-stage-card .music-video-year-row output,
body:not(.dark) .music-video-stage-card .music-video-year-row .year-value,
body:not(.dark) .music-video-stage-card .music-video-year-row [data-year-value]{
  color:#172033!important;
}
body:not(.dark) .music-video-feedback,
body:not(.dark) .music-video-final{
  color:#0c1629!important;
  background:#f7f5f1!important;
  border-color:#e1ddd5!important;
}
body:not(.dark) .music-video-feedback .eyebrow,
body:not(.dark) .music-video-final .eyebrow{
  color:#17865c!important;
}
body:not(.dark) .mv-result-head h2,
body:not(.dark) .mv-result-head > strong,
body:not(.dark) .music-video-final h2,
body:not(.dark) .music-video-final h3{
  color:#0c1629!important;
}
body:not(.dark) .mv-result-grid > div{
  color:#0c1629!important;
  background:#fff!important;
  border-color:#dfe3e8!important;
}
body:not(.dark) .mv-result-grid span,
body:not(.dark) .mv-result-grid small,
body:not(.dark) .music-video-points small,
body:not(.dark) .mv-history-row small{
  color:#667085!important;
}
body:not(.dark) .mv-result-grid b,
body:not(.dark) .mv-history-row,
body:not(.dark) .music-video-points p{
  color:#172033!important;
}
body:not(.dark) .mv-result-grid .ok b{
  color:#17865c!important;
}
body:not(.dark) .mv-result-grid .miss b{
  color:#b42318!important;
}
body:not(.dark) .music-video-stage-card input[type=range] + *,
body:not(.dark) .music-video-stage-card .range-min,
body:not(.dark) .music-video-stage-card .range-max{
  color:#667085!important;
}

/* V11.4.6 · Contraste definitivo del juego de videoclips.
   La tarjeta del juego es deliberadamente clara incluso cuando el tema global es oscuro,
   así que sus textos no deben heredar --ink/--muted del tema oscuro. */
.music-video-stage-card{
  color:#172033!important;
  --mv-text:#172033;
  --mv-muted:#667085;
  --mv-soft:#40506a;
}
.music-video-stage-card .year-stage-meta,
.music-video-stage-card .year-stage-meta span{
  color:#667085!important;
}
.music-video-stage-card .year-stage-meta strong,
.music-video-stage-card #mv-score{
  color:#20b977!important;
}
.music-video-stage-card .music-video-chip{
  color:#7b6c66!important;
  background:#f9ece8!important;
}
.music-video-stage-card .music-video-form label,
.music-video-stage-card .music-video-form label > span{
  color:#40506a!important;
}
.music-video-stage-card .music-video-form label span b{
  color:#20b977!important;
}
.music-video-stage-card .music-video-form input[type=text]{
  color:#172033!important;
  background:#fff!important;
  border-color:#cfd6df!important;
}
.music-video-stage-card .music-video-form input[type=text]::placeholder{
  color:#667085!important;
  opacity:1!important;
}
.music-video-stage-card .year-choice span,
.music-video-stage-card .year-choice span b{
  color:#667085!important;
}
.music-video-stage-card .year-choice strong,
.music-video-stage-card #mv-year-value{
  color:#20304a!important;
}
.music-video-stage-card .range-labels,
.music-video-stage-card .range-labels span{
  color:#667085!important;
}
.music-video-stage-card .music-video-feedback,
.music-video-stage-card .music-video-final{
  color:#172033!important;
  background:#f7f5f1!important;
  border-color:#e1ddd5!important;
}
.music-video-stage-card .music-video-feedback .eyebrow,
.music-video-stage-card .music-video-final .eyebrow{
  color:#20a86f!important;
}
.music-video-stage-card .mv-result-head h2,
.music-video-stage-card .mv-result-head > strong,
.music-video-stage-card .music-video-final h2,
.music-video-stage-card .music-video-final h3{
  color:#172033!important;
}
.music-video-stage-card .mv-result-grid > div{
  color:#172033!important;
  background:#fff!important;
  border-color:#dfe3e8!important;
}
.music-video-stage-card .mv-result-grid span,
.music-video-stage-card .mv-result-grid small,
.music-video-stage-card .music-video-points small,
.music-video-stage-card .mv-history-row small{
  color:#667085!important;
}
.music-video-stage-card .mv-result-grid b,
.music-video-stage-card .mv-history-row,
.music-video-stage-card .music-video-points p{
  color:#172033!important;
}
.music-video-stage-card .mv-result-grid .ok b{color:#17865c!important}
.music-video-stage-card .mv-result-grid .miss b{color:#b42318!important}


/* V11.4.7 · Resultado final premium del juego de videoclips */
.music-video-player-shell[hidden]{display:none!important}
.music-video-final{padding:0!important;overflow:hidden;background:#fff!important;border-color:#dfe3e8!important}
.mv-final-hero{padding:30px 24px 22px;text-align:center;background:linear-gradient(180deg,#f7faf8 0%,#fff 100%);border-bottom:1px solid #e7ece9}
.mv-final-hero .eyebrow{display:block;margin-bottom:8px;color:#20a86f!important}
.mv-final-score{display:flex;align-items:baseline;justify-content:center;gap:7px;line-height:1}
.mv-final-score strong{font-size:clamp(48px,8vw,78px);letter-spacing:-.055em;color:#16243a!important}
.mv-final-score span{font-size:16px;font-weight:800;color:#667085!important}
.mv-final-level{display:inline-flex;margin-top:14px;padding:7px 12px;border-radius:999px;background:#eaf8f2;color:#147a55!important;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.mv-final-hero p{max-width:560px;margin:11px auto 0;color:#5d687a!important;font-size:14px;line-height:1.5}
.mv-final-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:18px 20px 8px}
.mv-final-stats>div{padding:14px 12px;border:1px solid #e2e7ec;border-radius:15px;background:#fff;text-align:center}
.mv-final-stats span{display:block;color:#667085!important;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.mv-final-stats strong{display:block;margin-top:6px;color:#172033!important;font-size:25px;line-height:1}
.mv-final-stats small{font-size:12px;color:#7a8494!important;font-weight:750}
.mv-final-rounds{padding:12px 20px 4px}
.mv-final-rounds-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#172033!important;font-size:13px;font-weight:850}
.mv-final-rounds-title b{color:#20a86f!important;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.mv-final-round{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;min-height:32px;margin:6px 0;padding:0 10px;border-radius:10px;background:#f5f7f9;overflow:hidden}
.mv-final-round span,.mv-final-round b{position:relative;z-index:1;color:#20304a!important;font-size:12px}
.mv-final-round b{text-align:right}
.mv-final-round i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:linear-gradient(90deg,rgba(32,185,119,.16),rgba(32,185,119,.06));border-right:2px solid rgba(32,185,119,.45)}
.mv-final-actions{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;padding:18px 20px 20px}
.mv-final-actions .btn{margin:0}
body.dark .music-video-final{background:#fff!important}
@media(max-width:700px){
  .mv-final-hero{padding:24px 16px 18px}
  .mv-final-score strong{font-size:54px}
  .mv-final-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 14px 4px}
  .mv-final-rounds{padding:10px 14px 2px}
  .mv-final-actions{grid-template-columns:1fr;padding:14px}
}

/* V11.5 · catalogador local de videoclips */
.mv-admin-stats{margin-bottom:18px}
.mv-admin-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:18px;align-items:start}
.mv-admin-form-card h2,.mv-csv-card h2,.mv-catalog-list-card h2{margin:.3rem 0 1rem}
.mv-admin-two,.mv-admin-three{display:grid;gap:12px}.mv-admin-two{grid-template-columns:1fr 1fr}.mv-admin-three{grid-template-columns:1fr 1fr 1fr}
.mv-admin-actions{display:flex;gap:10px;flex-wrap:wrap}.mv-admin-actions .btn{flex:1;min-width:170px}
.mv-admin-preview{margin-top:16px;border-radius:16px;overflow:hidden;background:#05070b;aspect-ratio:16/9}.mv-admin-preview iframe{border:0;width:100%;height:100%}
.mv-csv-columns{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.mv-catalog-list-card{margin-top:18px}.mv-catalog-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.mv-catalog-head input{max-width:310px}
.mv-catalog-table-wrap{overflow:auto;margin-top:14px}.mv-catalog-table{width:100%;border-collapse:collapse;min-width:820px}.mv-catalog-table th,.mv-catalog-table td{text-align:left;padding:10px;border-bottom:1px solid rgba(130,140,155,.2);vertical-align:middle}.mv-catalog-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}.mv-catalog-table td span{opacity:.72}
.mv-row-actions{display:flex;align-items:center;gap:6px}.mv-row-actions form{margin:0}.mv-row-actions .btn{padding:7px 10px;min-height:34px}.btn.danger{background:#fff0ef;color:#9d261d;border:1px solid #efc1bc}
.mv-modal[hidden]{display:none!important}.mv-modal{position:fixed;z-index:9999;inset:5vh 5vw;background:#05070b;border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.55);overflow:hidden}.mv-modal iframe{width:100%;height:100%;border:0}.mv-modal-close{position:absolute;z-index:2;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;font-size:28px;background:#fff;color:#111;cursor:pointer}
@media(max-width:900px){.mv-admin-grid{grid-template-columns:1fr}.mv-admin-two,.mv-admin-three{grid-template-columns:1fr}.mv-catalog-head{align-items:stretch;flex-direction:column}.mv-catalog-head input{max-width:none}.mv-modal{inset:12vh 3vw}}


/* V11.6 · revisión rápida de videoclips */
.mv-review-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:18px 20px;background:linear-gradient(135deg,#f7fffb,#fff)}
.mv-review-cta h2{margin:.25rem 0 .35rem}.mv-review-cta p{margin:0;max-width:720px}.mv-review-cta .btn{white-space:nowrap}
.mv-review-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.mv-review-stats{margin-bottom:18px}
.mv-review-card{max-width:980px;margin:0 auto;padding:20px}.mv-review-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.mv-review-topline h2{font-size:clamp(1.4rem,3vw,2rem);margin:.25rem 0}.mv-review-topline p{margin:.2rem 0}
.mv-review-player-wrap{background:#05070b;border-radius:18px;overflow:hidden;aspect-ratio:16/9;margin-bottom:18px}.mv-review-player-wrap iframe{width:100%;height:100%;border:0}
.mv-review-controls{display:grid;grid-template-columns:1.25fr .7fr 1.5fr;gap:12px;align-items:end}.mv-review-controls label{display:flex;flex-direction:column;gap:7px;font-weight:700}.mv-review-controls select,.mv-review-controls input{min-height:44px}
.mv-stepper{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:6px}.mv-stepper button{min-width:42px;border:1px solid var(--line,#d9dee5);border-radius:10px;background:#fff;cursor:pointer;font-weight:800}.mv-stepper input{text-align:center;min-width:75px}
.mv-review-preview-actions{display:flex;gap:10px;margin-top:14px}.mv-review-preview-actions .btn{flex:1}
.mv-review-decision-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(130,140,155,.22)}.mv-review-decision-grid .btn{min-height:48px;display:flex;align-items:center;justify-content:center}.mv-approve{font-size:1rem}
.mv-review-done{text-align:center;max-width:680px;margin:40px auto;padding:38px 24px}.mv-review-done h2{font-size:2rem;margin:.35rem 0 .5rem}
@media(max-width:760px){.mv-review-cta,.mv-review-heading,.mv-review-topline{align-items:stretch;flex-direction:column}.mv-review-controls{grid-template-columns:1fr}.mv-review-decision-grid{grid-template-columns:1fr}.mv-review-preview-actions{flex-direction:column}.mv-review-card{padding:14px}.mv-review-player-wrap{border-radius:14px}.mv-stepper{grid-template-columns:44px 44px 1fr 44px 44px}.mv-admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V11.6.1 · activación rápida por checkbox en la biblioteca */
.mv-active-toggle-form{margin:0}
.mv-active-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;white-space:nowrap}
.mv-active-toggle input{position:absolute;opacity:0;pointer-events:none}
.mv-active-switch{position:relative;width:42px;height:24px;border-radius:999px;background:#c9ced6;box-shadow:inset 0 0 0 1px rgba(40,50,65,.12);transition:.18s ease}
.mv-active-switch:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);transition:.18s ease}
.mv-active-checkbox:checked + .mv-active-switch{background:#13b981}
.mv-active-checkbox:checked + .mv-active-switch:after{transform:translateX(18px)}
.mv-active-checkbox:focus-visible + .mv-active-switch{outline:3px solid rgba(19,185,129,.25);outline-offset:2px}
.mv-active-text{font-weight:800;font-size:.84rem;min-width:58px}
.mv-active-toggle.is-saving{opacity:.55;cursor:wait}

/* V11.6.2 · acciones masivas de videoclips */
.mv-bulk-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border:1px solid var(--border,#d8dadd);border-radius:14px;background:rgba(255,255,255,.72)}
.mv-bulk-summary{min-width:118px;margin-right:auto;font-size:.92rem}.mv-bulk-summary strong{font-size:1.05rem}
.mv-select-col{width:44px;text-align:center!important}.mv-row-select,#mv-select-all{width:18px;height:18px;cursor:pointer;accent-color:#0dbd83}
@media (max-width:760px){.mv-bulk-toolbar{position:sticky;top:8px;z-index:12;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08)}.mv-bulk-toolbar .btn{flex:1 1 calc(50% - 6px);min-width:135px}.mv-bulk-summary{flex:1 0 100%;margin:0}.mv-select-col{position:sticky;left:0;background:inherit;z-index:2}}

/* === V11.6.3 PRIVACIDAD / COOKIES === */
.cookie-banner{
  background:#fffdf8;
  color:#111827;
  border:1px solid #d8d5cd;
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  max-width:900px;
  padding:18px 20px;
}
.cookie-banner-copy{min-width:0;flex:1}
.cookie-banner strong{display:block;color:#111827;font-size:16px;line-height:1.25;margin-bottom:6px}
.cookie-banner p{color:#374151;font-size:13px;line-height:1.55;margin:0 0 7px}
.cookie-banner a{color:#174ea6;text-decoration:underline;text-underline-offset:2px;font-weight:700;font-size:12px}
.cookie-banner-actions{display:flex;gap:9px;align-items:stretch;flex:0 0 auto}
.cookie-banner .cookie-choice{
  appearance:none;
  min-height:44px;
  padding:10px 15px;
  border:2px solid #111827;
  border-radius:999px;
  background:#fff;
  color:#111827;
  font:inherit;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
}
.cookie-banner .cookie-choice:hover,.cookie-banner .cookie-choice:focus-visible{background:#111827;color:#fff;outline:3px solid rgba(17,24,39,.2);outline-offset:2px}
.footer-cookie-settings{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.inline-cookie-settings{border:0;background:none;padding:0;color:#174ea6;text-decoration:underline;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:700px){
  .cookie-banner{left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));padding:15px;border-radius:16px}
  .cookie-banner-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:12px}
  .cookie-banner .cookie-choice{white-space:normal;padding:10px 8px}
}


/* V11.6.7 · Palabra Raíz · explicación inmediata */
.root-howto-inline{
  margin-top:10px;
  max-width:760px;
  border-left:3px solid var(--accent);
  padding:10px 12px;
  background:color-mix(in srgb,var(--accent) 7%,var(--paper));
  border-radius:0 12px 12px 0;
}
.root-howto-inline strong{
  display:block;
  margin-bottom:3px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
}
.root-howto-inline p{
  margin:0!important;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.root-example{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#d8e0ec;
}
.root-example>span{
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8fa0b8;
}
.root-example>strong{
  margin:0;
  font-size:15px;
  letter-spacing:.03em;
  color:#fff;
}
.root-example>strong b,
.root-example small b{
  color:#53dda7;
}
.root-example small{
  font-size:9px;
  color:#aeb9c8;
}
@media(max-width:700px){
  .root-howto-inline{
    margin-top:7px;
    padding:8px 10px;
  }
  .root-howto-inline p{font-size:11px}
  .root-example{
    margin-top:7px;
    padding:6px 8px;
    gap:4px 7px;
  }
  .root-example small{
    flex-basis:100%;
  }
}


/* V11.6.8 · SEO launch polish */
.hero-seo-title{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-sans);
  font-size:clamp(15px,1.5vw,19px);
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:900;
}
.hero-claim{display:block}

.word-list-az{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin:22px 0 20px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
}
.word-list-az strong{
  margin-right:5px;
  font-size:12px;
  letter-spacing:.08em;
}
.word-list-az a,
.word-list-az span{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
}
.word-list-az a{
  color:var(--ink);
  background:color-mix(in srgb,var(--accent) 11%,var(--paper));
  text-decoration:none;
}
.word-list-az a:hover{background:color-mix(in srgb,var(--accent) 22%,var(--paper))}
.word-list-az span{color:var(--muted);opacity:.42}
.word-list-grid article[id]{scroll-margin-top:90px}

@media(max-width:700px){
  .hero-seo-title{font-size:12px;margin-bottom:7px}
  .word-list-az{gap:4px;padding:10px}
  .word-list-az a,.word-list-az span{width:27px;height:27px;font-size:11px}
}


/* SEO landings · 5 letras */
.seo-word-summary{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px}
.seo-word-summary strong{font-size:clamp(28px,4vw,46px);line-height:1}
.seo-word-summary span{color:var(--muted);font-size:13px}
.seo-word-filters,.word-list-seo-links{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.seo-word-filters a,.word-list-seo-links a{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-size:12px;font-weight:800}
.word-list-seo-links strong{flex-basis:100%}
.seo-word-refine{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:22px 0;padding:20px}
.seo-word-refine>div{max-width:720px}
.seo-word-refine h2{margin:4px 0 7px;font-size:clamp(19px,2.4vw,27px)}
.seo-word-refine p{margin:0;color:var(--muted);line-height:1.6}
.seo-word-refine .btn{flex:0 0 auto}
.seo-word-insights{margin:30px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.seo-word-insights-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:15px}
.seo-word-insights-head h2{margin:4px 0 0;font-size:clamp(19px,2.4vw,27px)}
.seo-word-insights-head p{max-width:420px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.seo-word-insight-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.seo-word-insight-grid article{display:grid;gap:4px;padding:13px;border:1px solid var(--line);border-radius:13px;background:var(--bg)}
.seo-word-insight-grid article strong{font-size:12px}
.seo-word-insight-grid article b{font-size:20px;line-height:1.1}
.seo-word-insight-grid article span{color:var(--muted);font-size:11px;font-weight:750}
.seo-word-results{margin-top:30px}
.seo-word-results-head{max-width:820px}
.seo-word-results-head h2{margin-bottom:6px}
.seo-word-results-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.seo-word-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:7px;margin:22px 0 28px}
.seo-word-list span{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:13px;font-weight:750}
.seo-word-help,.seo-word-related{max-width:850px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.seo-word-help p{color:var(--muted);line-height:1.7}
.seo-word-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.seo-word-related{display:grid;gap:8px}
.seo-word-related a{color:var(--ink);font-weight:750}
@media(max-width:700px){.seo-word-refine{display:grid;padding:16px}.seo-word-refine .btn{width:100%}.seo-word-insights{padding:16px}.seo-word-insights-head{display:grid;gap:8px}.seo-word-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.seo-word-insight-grid article:last-child:nth-child(odd){grid-column:1/-1}.seo-word-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.seo-word-list span{font-size:11px;padding:8px 7px}}


/* V11.6.9.4 · Banner de privacidad compacto */
.cookie-banner{
  left:14px;
  right:14px;
  bottom:14px;
  max-width:980px;
  padding:0;
  border-radius:16px;
  background:#fbfaf6;
  color:#171717;
  border:1px solid rgba(17,17,17,.12);
  box-shadow:0 14px 38px rgba(0,0,0,.18);
  overflow:hidden;
  display:block;
}
.cookie-banner-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 14px;
}
.cookie-banner-copy{
  min-width:0;
  max-width:520px;
}
.cookie-banner-copy strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  margin-bottom:2px;
}
.cookie-banner-copy p{
  margin:0;
  color:#4e5560;
  font-size:11px;
  line-height:1.4;
}
.cookie-banner-copy a{
  display:inline-block;
  margin-top:3px;
  color:#183c6b;
  font-size:10px;
  font-weight:700;
}
.cookie-banner-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-shrink:0;
}
.cookie-banner .cookie-choice{
  appearance:none;
  border:1.5px solid #172033;
  background:#fff;
  color:#172033;
  border-radius:999px;
  padding:8px 12px;
  font-size:11px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.cookie-banner .cookie-choice-equal{
  min-width:112px;
}
.cookie-banner .cookie-choice-config{
  border-color:#a6adb8;
  color:#4e5560;
  min-width:88px;
}
.cookie-banner .cookie-choice:hover,
.cookie-banner .cookie-choice:focus-visible{
  background:#172033;
  color:#fff;
}
.cookie-config-panel{
  border-top:1px solid rgba(17,17,17,.11);
  padding:9px 14px 11px;
  background:#f3f1eb;
}
.cookie-config-panel[hidden]{display:none!important}
.cookie-config-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:6px 0;
}
.cookie-config-row + .cookie-config-row{
  border-top:1px solid rgba(17,17,17,.08);
}
.cookie-config-row>div{
  display:grid;
  gap:1px;
}
.cookie-config-row strong{
  font-size:11px;
}
.cookie-config-row span{
  color:#646b75;
  font-size:10px;
}
.cookie-config-row .cookie-choice{
  min-width:126px;
}

@media(max-width:760px){
  .cookie-banner{
    left:8px;
    right:8px;
    bottom:8px;
    border-radius:14px;
  }
  .cookie-banner-main{
    display:grid;
    gap:9px;
    padding:11px 12px;
  }
  .cookie-banner-copy{
    max-width:none;
  }
  .cookie-banner-copy p{
    font-size:10.5px;
  }
  .cookie-banner-actions{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:6px;
  }
  .cookie-banner .cookie-choice{
    min-width:0;
    padding:8px 9px;
    font-size:10px;
  }
  .cookie-config-panel{
    padding:7px 12px 9px;
  }
  .cookie-config-row{
    gap:8px;
  }
  .cookie-config-row span{
    font-size:9px;
  }
}

/* SEO landings: contenido editorial y estado del filtro activo */
.seo-word-filters a.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.seo-word-tips{margin:14px 0 0;padding-left:20px;color:var(--muted);line-height:1.65}
.seo-word-tips li+li{margin-top:5px}

/* ========================================================================== 
   V11.6.10.1 · BUSCADOR DE PALABRAS PRO
   ========================================================================== */
.finder-page{max-width:1040px}
.finder-hero{max-width:850px;margin-bottom:24px}
.finder-hero h1{max-width:820px;margin-bottom:16px}
.finder-hero .lead{max-width:780px}

.finder-pro{display:grid;gap:22px;margin:28px 0 14px;padding:24px}
.finder-length-fieldset{margin:0;padding:0;border:0;min-width:0}
.finder-length-fieldset legend,
.finder-pattern-field>label>span,
.finder-fields-grid label>span{display:block;margin-bottom:8px;color:var(--ink);font-size:12px;font-weight:850;letter-spacing:.01em}
.finder-length-options{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}
.finder-length-options label{position:relative;cursor:pointer}
.finder-length-options input{position:absolute;opacity:0;pointer-events:none}
.finder-length-options span{display:grid;place-items:center;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:14px;font-weight:850;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.finder-length-options label:hover span{border-color:color-mix(in srgb,var(--ink) 28%,var(--line));transform:translateY(-1px)}
.finder-length-options input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.finder-length-options input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px}

.finder-pattern-field{padding:18px;border-radius:16px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.finder-pattern-field>label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.finder-pattern-field>label>span{margin:0}
.finder-pattern-field>label small{color:var(--muted);font-size:11px;font-weight:650}
.finder-pattern-field input{min-height:58px;background:var(--paper);font-size:23px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.finder-pattern-field code,.finder-seo-help code,.finder-empty code{padding:2px 5px;border-radius:6px;background:color-mix(in srgb,var(--ink) 7%,var(--paper));font-weight:850;color:var(--ink)}

.finder-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.finder-fields-grid label{display:block}
.finder-fields-grid input{min-height:50px;background:var(--paper);font-weight:750;text-transform:uppercase}
.finder-fields-grid label small{display:block;margin-top:5px;color:var(--muted);font-size:11px;line-height:1.35}
.finder-form-actions{display:flex;align-items:center;gap:10px;padding-top:2px}
.finder-search-button{min-width:180px}
.finder-search-button:disabled{opacity:.68;cursor:wait}

.finder-examples{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:14px 0 30px;color:var(--muted);font-size:12px}
.finder-examples strong{margin-right:2px;color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.finder-examples a{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:750;text-decoration:none}
.finder-examples a:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--accent-soft)}

.finder-message{display:grid;gap:4px;margin:24px 0;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--paper)}
.finder-message strong{font-size:14px}
.finder-message span{color:var(--muted);font-size:13px}
.finder-message-error{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));background:var(--accent-soft)}

.finder-results{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.finder-results-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}
.finder-results-head h2{margin:2px 0 0;font-size:clamp(34px,5vw,52px);line-height:1;letter-spacing:-.04em}
.finder-results-head p{margin:7px 0 0;color:var(--muted);font-size:12px}
.finder-active-filters{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 18px}
.finder-active-filters span{padding:6px 9px;border-radius:999px;background:var(--accent-2-soft);color:var(--ink);font-size:11px;font-weight:800}

.finder-word-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.finder-word{min-width:0;min-height:46px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);cursor:pointer;text-align:left;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.finder-word span{display:block;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:820;white-space:nowrap}
.finder-word:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent-2) 40%,var(--line));background:var(--accent-2-soft)}
.finder-word:focus-visible{outline:3px solid color-mix(in srgb,var(--accent-2) 30%,transparent);outline-offset:2px}
.finder-word.is-copied{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.finder-copy-hint{margin:10px 0 0;color:var(--muted);font-size:11px;text-align:right}

.finder-empty{padding:30px;border:1px dashed var(--line);border-radius:18px;background:var(--paper);text-align:center}
.finder-empty strong{display:block;font-size:22px;letter-spacing:-.02em}
.finder-empty p{max-width:560px;margin:8px auto 16px;color:var(--muted);font-size:13px}

.finder-toast{position:fixed;left:50%;bottom:28px;z-index:120;transform:translate(-50%,12px);padding:10px 14px;border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow-lift);font-size:12px;font-weight:850;opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.finder-toast.is-visible{opacity:1;transform:translate(-50%,0)}

.finder-seo-help{max-width:none;margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.finder-seo-help h2{margin:6px 0 20px;font-size:clamp(28px,4vw,40px);letter-spacing:-.03em}
.finder-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.finder-help-grid article{padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.finder-help-grid strong{display:block;margin-bottom:5px;font-size:13px}
.finder-help-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.finder-related-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.finder-related-links strong{flex-basis:100%;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.finder-related-links a{padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;font-weight:800;text-decoration:none}

@media(max-width:800px){
  .finder-word-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .finder-length-options{grid-template-columns:repeat(9,42px);overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .finder-length-options::-webkit-scrollbar{display:none}
}

@media(max-width:700px){
  .finder-page{width:calc(100% - 20px)}
  .finder-hero{margin-bottom:18px}
  .finder-hero h1{font-size:38px;line-height:1.02;margin-top:7px}
  .finder-pro{gap:17px;margin-top:20px;padding:15px;border-radius:16px}
  .finder-pattern-field{padding:13px;border-radius:13px}
  .finder-pattern-field>label{display:block}
  .finder-pattern-field>label small{display:block;margin-top:3px}
  .finder-pattern-field input{min-height:54px;font-size:20px}
  .finder-fields-grid{grid-template-columns:1fr;gap:11px}
  .finder-form-actions{display:grid;grid-template-columns:1fr auto}
  .finder-form-actions .btn{min-width:0;width:100%;padding-inline:16px}
  .finder-examples{margin-bottom:24px}
  .finder-results{margin-top:26px;padding-top:24px}
  .finder-results-head{align-items:center}
  .finder-results-head h2{font-size:38px}
  .finder-results-head .btn{padding:8px 10px;font-size:11px}
  .finder-word-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .finder-word{min-height:43px;padding:8px;border-radius:9px}
  .finder-word span{font-size:12px}
  .finder-copy-hint{text-align:left}
  .finder-help-grid{grid-template-columns:1fr}
  .finder-seo-help{margin-top:38px;padding-top:28px}
  .finder-toast{bottom:calc(86px + env(safe-area-inset-bottom))}
}

@media(max-width:390px){
  .finder-word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ========================================================================== 
   V11.6.10.2 · BUSCADOR DESTACADO EN NAVEGACIÓN Y PORTADA
   ========================================================================== */
.nav-links a.nav-finder{
  color:var(--ink);
  font-weight:820;
}
.nav-links a.nav-finder::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:999px;
  background:var(--accent);
  vertical-align:2px;
}
.nav-links a.nav-finder.active{
  background:var(--accent-soft);
  color:var(--ink);
}
.header-search-button{
  display:none;
  color:var(--ink);
  text-decoration:none;
}
.header-search-button.active{
  background:var(--accent-soft);
  color:color-mix(in srgb,var(--accent) 76%,var(--ink));
}

.home-finder-teaser{margin-top:12px}
.home-finder-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:26px;
  min-height:174px;
  padding:25px 28px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:22px;
  background:
    radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 34%),
    var(--paper);
  color:var(--ink);
  text-decoration:none;
  box-shadow:0 12px 34px rgba(8,16,31,.07);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.home-finder-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--accent);
}
.home-finder-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 62%,var(--line));
  box-shadow:0 18px 44px rgba(8,16,31,.11);
}
.home-finder-copy{min-width:0}
.home-finder-copy .eyebrow{display:block;margin-bottom:5px}
.home-finder-copy h2{
  margin:0;
  font-size:clamp(27px,3.2vw,39px);
  line-height:1.05;
  font-weight:830;
  letter-spacing:-.04em;
}
.home-finder-copy p{
  max-width:690px;
  margin:8px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.home-finder-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.home-finder-tags span{
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.home-finder-pattern{display:grid;grid-template-columns:repeat(5,42px);gap:5px;transform:rotate(-2deg)}
.home-finder-pattern span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--navy);
  color:var(--game-ink);
  font-size:17px;
  font-weight:900;
  box-shadow:0 7px 16px rgba(8,16,31,.12);
}
.home-finder-pattern span:nth-child(3),
.home-finder-pattern span:nth-child(4){
  background:var(--accent-soft);
  color:color-mix(in srgb,var(--accent) 74%,var(--ink));
  border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:none;
}
.home-finder-cta{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:12px 15px;
  border-radius:12px;
  background:var(--accent);
  color:#052719;
  font-size:12px;
  font-weight:850;
  white-space:nowrap;
}
.home-finder-cta b{font-size:17px;line-height:1}
.home-finder-cta .ui-icon{width:17px;height:17px}

.game-menu-featured-finder{
  background:color-mix(in srgb,var(--accent) 10%,var(--paper));
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
}
.game-menu-featured-finder .game-menu-icon{
  background:var(--accent);
  color:#052719;
}

@media(max-width:1040px){
  .home-finder-card{grid-template-columns:minmax(0,1fr) auto;gap:18px}
  .home-finder-pattern{display:none}
}

@media(max-width:960px) and (min-width:701px){
  .nav-links a.nav-finder{display:none}
  .header-search-button{display:grid}
}

@media(max-width:700px){
  .header-search-button{display:grid}
  .home-finder-teaser{width:calc(100% - 20px);margin-top:10px}
  .home-finder-card{
    display:block;
    min-height:0;
    padding:20px 18px 18px 21px;
    border-radius:18px;
  }
  .home-finder-copy h2{font-size:27px}
  .home-finder-copy p{font-size:12px;line-height:1.5}
  .home-finder-tags{margin-top:11px;gap:5px}
  .home-finder-tags span{padding:5px 7px;font-size:9px}
  .home-finder-cta{justify-content:center;width:100%;margin-top:15px;min-height:48px;font-size:12px}
}

@media(max-width:360px){
  .home-finder-tags span:nth-child(4){display:none}
}


/* === SEO BUSCADOR DE PALABRAS v11.6.10.3 === */
.finder-hero-note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:700
}
.finder-hero .lead strong{
  color:var(--ink);
  font-weight:850
}
.finder-seo-copy{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:0 0 30px
}
.finder-seo-copy p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75
}
.finder-seo-help>h3,
.finder-use-cases h3,
.finder-popular h3,
.finder-faq h3{
  margin:7px 0 17px;
  color:var(--ink);
  font-size:clamp(22px,3vw,29px);
  line-height:1.12;
  letter-spacing:-.025em
}
.finder-help-grid-six{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.finder-help-grid-six article{
  min-height:126px
}
.finder-use-cases,
.finder-popular,
.finder-faq{
  margin-top:38px;
  padding-top:30px;
  border-top:1px solid var(--line)
}
.finder-use-cases{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:28px;
  align-items:start
}
.finder-use-case-list{
  display:grid;
  gap:10px
}
.finder-use-case-list p{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--paper);
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.finder-use-case-list strong{color:var(--ink)}
.finder-popular-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.finder-popular-links a{
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  text-decoration:none
}
.finder-popular-links a:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:var(--accent-soft)
}
.finder-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.finder-faq-grid article{
  padding:17px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper)
}
.finder-faq-grid strong{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:13px;
  line-height:1.4
}
.finder-faq-grid p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.65
}
.finder-faq-grid code{
  padding:2px 5px;
  border-radius:6px;
  background:color-mix(in srgb,var(--ink) 7%,var(--paper));
  color:var(--ink);
  font-weight:850
}
@media(max-width:800px){
  .finder-help-grid-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder-use-cases{grid-template-columns:1fr;gap:12px}
}
@media(max-width:650px){
  .finder-hero-note{font-size:11px;line-height:1.5}
  .finder-seo-copy{grid-template-columns:1fr;gap:12px}
  .finder-seo-copy p{font-size:13px;line-height:1.7}
  .finder-help-grid-six,
  .finder-faq-grid{grid-template-columns:1fr}
  .finder-help-grid-six article{min-height:0}
  .finder-use-cases,
  .finder-popular,
  .finder-faq{margin-top:30px;padding-top:24px}
  .finder-popular-links{display:grid;grid-template-columns:1fr}
  .finder-popular-links a{border-radius:11px;padding:11px 12px}
}


/* CSP hardening: evita estilos inline. */
.gtm-noscript-frame{display:none;visibility:hidden}
.bar-width-0{width:0%!important}
.bar-width-1{width:1%!important}
.bar-width-2{width:2%!important}
.bar-width-3{width:3%!important}
.bar-width-4{width:4%!important}
.bar-width-5{width:5%!important}
.bar-width-6{width:6%!important}
.bar-width-7{width:7%!important}
.bar-width-8{width:8%!important}
.bar-width-9{width:9%!important}
.bar-width-10{width:10%!important}
.bar-width-11{width:11%!important}
.bar-width-12{width:12%!important}
.bar-width-13{width:13%!important}
.bar-width-14{width:14%!important}
.bar-width-15{width:15%!important}
.bar-width-16{width:16%!important}
.bar-width-17{width:17%!important}
.bar-width-18{width:18%!important}
.bar-width-19{width:19%!important}
.bar-width-20{width:20%!important}
.bar-width-21{width:21%!important}
.bar-width-22{width:22%!important}
.bar-width-23{width:23%!important}
.bar-width-24{width:24%!important}
.bar-width-25{width:25%!important}
.bar-width-26{width:26%!important}
.bar-width-27{width:27%!important}
.bar-width-28{width:28%!important}
.bar-width-29{width:29%!important}
.bar-width-30{width:30%!important}
.bar-width-31{width:31%!important}
.bar-width-32{width:32%!important}
.bar-width-33{width:33%!important}
.bar-width-34{width:34%!important}
.bar-width-35{width:35%!important}
.bar-width-36{width:36%!important}
.bar-width-37{width:37%!important}
.bar-width-38{width:38%!important}
.bar-width-39{width:39%!important}
.bar-width-40{width:40%!important}
.bar-width-41{width:41%!important}
.bar-width-42{width:42%!important}
.bar-width-43{width:43%!important}
.bar-width-44{width:44%!important}
.bar-width-45{width:45%!important}
.bar-width-46{width:46%!important}
.bar-width-47{width:47%!important}
.bar-width-48{width:48%!important}
.bar-width-49{width:49%!important}
.bar-width-50{width:50%!important}
.bar-width-51{width:51%!important}
.bar-width-52{width:52%!important}
.bar-width-53{width:53%!important}
.bar-width-54{width:54%!important}
.bar-width-55{width:55%!important}
.bar-width-56{width:56%!important}
.bar-width-57{width:57%!important}
.bar-width-58{width:58%!important}
.bar-width-59{width:59%!important}
.bar-width-60{width:60%!important}
.bar-width-61{width:61%!important}
.bar-width-62{width:62%!important}
.bar-width-63{width:63%!important}
.bar-width-64{width:64%!important}
.bar-width-65{width:65%!important}
.bar-width-66{width:66%!important}
.bar-width-67{width:67%!important}
.bar-width-68{width:68%!important}
.bar-width-69{width:69%!important}
.bar-width-70{width:70%!important}
.bar-width-71{width:71%!important}
.bar-width-72{width:72%!important}
.bar-width-73{width:73%!important}
.bar-width-74{width:74%!important}
.bar-width-75{width:75%!important}
.bar-width-76{width:76%!important}
.bar-width-77{width:77%!important}
.bar-width-78{width:78%!important}
.bar-width-79{width:79%!important}
.bar-width-80{width:80%!important}
.bar-width-81{width:81%!important}
.bar-width-82{width:82%!important}
.bar-width-83{width:83%!important}
.bar-width-84{width:84%!important}
.bar-width-85{width:85%!important}
.bar-width-86{width:86%!important}
.bar-width-87{width:87%!important}
.bar-width-88{width:88%!important}
.bar-width-89{width:89%!important}
.bar-width-90{width:90%!important}
.bar-width-91{width:91%!important}
.bar-width-92{width:92%!important}
.bar-width-93{width:93%!important}
.bar-width-94{width:94%!important}
.bar-width-95{width:95%!important}
.bar-width-96{width:96%!important}
.bar-width-97{width:97%!important}
.bar-width-98{width:98%!important}
.bar-width-99{width:99%!important}
.bar-width-100{width:100%!important}

.pdd-clipboard-helper{position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none}
.word-length-3{--word-length:3}
.word-length-4{--word-length:4}
.word-length-5{--word-length:5}
.word-length-6{--word-length:6}
.word-length-7{--word-length:7}
.word-length-8{--word-length:8}
.word-length-9{--word-length:9}
.word-length-10{--word-length:10}
.word-length-11{--word-length:11}
.tile-index-0{--tile-index:0}
.tile-index-1{--tile-index:1}
.tile-index-2{--tile-index:2}
.tile-index-3{--tile-index:3}
.tile-index-4{--tile-index:4}
.tile-index-5{--tile-index:5}
.tile-index-6{--tile-index:6}
.tile-index-7{--tile-index:7}
.tile-index-8{--tile-index:8}
.tile-index-9{--tile-index:9}
.tile-index-10{--tile-index:10}
.tile-index-11{--tile-index:11}
.music-video-timer span.mv-duration-1{animation:mvProgress 1s linear forwards}
.music-video-timer span.mv-duration-2{animation:mvProgress 2s linear forwards}
.music-video-timer span.mv-duration-3{animation:mvProgress 3s linear forwards}
.music-video-timer span.mv-duration-4{animation:mvProgress 4s linear forwards}
.music-video-timer span.mv-duration-5{animation:mvProgress 5s linear forwards}
.music-video-timer span.mv-duration-6{animation:mvProgress 6s linear forwards}
.music-video-timer span.mv-duration-7{animation:mvProgress 7s linear forwards}
.music-video-timer span.mv-duration-8{animation:mvProgress 8s linear forwards}
.music-video-timer span.mv-duration-9{animation:mvProgress 9s linear forwards}
.music-video-timer span.mv-duration-10{animation:mvProgress 10s linear forwards}
.music-video-timer span.mv-duration-11{animation:mvProgress 11s linear forwards}
.music-video-timer span.mv-duration-12{animation:mvProgress 12s linear forwards}
.music-video-timer span.mv-duration-13{animation:mvProgress 13s linear forwards}
.music-video-timer span.mv-duration-14{animation:mvProgress 14s linear forwards}
.music-video-timer span.mv-duration-15{animation:mvProgress 15s linear forwards}
.music-video-timer span.mv-duration-16{animation:mvProgress 16s linear forwards}
.music-video-timer span.mv-duration-17{animation:mvProgress 17s linear forwards}
.music-video-timer span.mv-duration-18{animation:mvProgress 18s linear forwards}
.music-video-timer span.mv-duration-19{animation:mvProgress 19s linear forwards}
.music-video-timer span.mv-duration-20{animation:mvProgress 20s linear forwards}
.music-video-timer span.mv-duration-21{animation:mvProgress 21s linear forwards}
.music-video-timer span.mv-duration-22{animation:mvProgress 22s linear forwards}
.music-video-timer span.mv-duration-23{animation:mvProgress 23s linear forwards}
.music-video-timer span.mv-duration-24{animation:mvProgress 24s linear forwards}
.music-video-timer span.mv-duration-25{animation:mvProgress 25s linear forwards}
.music-video-timer span.mv-duration-26{animation:mvProgress 26s linear forwards}
.music-video-timer span.mv-duration-27{animation:mvProgress 27s linear forwards}
.music-video-timer span.mv-duration-28{animation:mvProgress 28s linear forwards}
.music-video-timer span.mv-duration-29{animation:mvProgress 29s linear forwards}
.music-video-timer span.mv-duration-30{animation:mvProgress 30s linear forwards}
.music-video-timer span.mv-duration-31{animation:mvProgress 31s linear forwards}
.music-video-timer span.mv-duration-32{animation:mvProgress 32s linear forwards}
.music-video-timer span.mv-duration-33{animation:mvProgress 33s linear forwards}
.music-video-timer span.mv-duration-34{animation:mvProgress 34s linear forwards}
.music-video-timer span.mv-duration-35{animation:mvProgress 35s linear forwards}
.music-video-timer span.mv-duration-36{animation:mvProgress 36s linear forwards}
.music-video-timer span.mv-duration-37{animation:mvProgress 37s linear forwards}
.music-video-timer span.mv-duration-38{animation:mvProgress 38s linear forwards}
.music-video-timer span.mv-duration-39{animation:mvProgress 39s linear forwards}
.music-video-timer span.mv-duration-40{animation:mvProgress 40s linear forwards}
.music-video-timer span.mv-duration-41{animation:mvProgress 41s linear forwards}
.music-video-timer span.mv-duration-42{animation:mvProgress 42s linear forwards}
.music-video-timer span.mv-duration-43{animation:mvProgress 43s linear forwards}
.music-video-timer span.mv-duration-44{animation:mvProgress 44s linear forwards}
.music-video-timer span.mv-duration-45{animation:mvProgress 45s linear forwards}
.music-video-timer span.mv-duration-46{animation:mvProgress 46s linear forwards}
.music-video-timer span.mv-duration-47{animation:mvProgress 47s linear forwards}
.music-video-timer span.mv-duration-48{animation:mvProgress 48s linear forwards}
.music-video-timer span.mv-duration-49{animation:mvProgress 49s linear forwards}
.music-video-timer span.mv-duration-50{animation:mvProgress 50s linear forwards}
.music-video-timer span.mv-duration-51{animation:mvProgress 51s linear forwards}
.music-video-timer span.mv-duration-52{animation:mvProgress 52s linear forwards}
.music-video-timer span.mv-duration-53{animation:mvProgress 53s linear forwards}
.music-video-timer span.mv-duration-54{animation:mvProgress 54s linear forwards}
.music-video-timer span.mv-duration-55{animation:mvProgress 55s linear forwards}
.music-video-timer span.mv-duration-56{animation:mvProgress 56s linear forwards}
.music-video-timer span.mv-duration-57{animation:mvProgress 57s linear forwards}
.music-video-timer span.mv-duration-58{animation:mvProgress 58s linear forwards}
.music-video-timer span.mv-duration-59{animation:mvProgress 59s linear forwards}
.music-video-timer span.mv-duration-60{animation:mvProgress 60s linear forwards}


/* === CALENDARIO 5 LETRAS · REGENERACIÓN Y REVISIÓN === */
.five-letter-rebuild-card{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center;margin-bottom:14px;border:1px solid var(--line)}
.five-letter-rebuild-card h2,.five-letter-review h2{margin:4px 0 7px;font-family:var(--font-display);font-size:32px;font-weight:500}
.five-letter-rebuild-card p,.five-letter-review p{color:var(--muted)}
.rebuild-five-form{display:grid;gap:10px;align-content:center}
.rebuild-five-form label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}
.rebuild-five-form small{color:var(--muted);line-height:1.4}
.today-protected-word{display:inline-flex;align-items:center;gap:9px;margin-top:8px;padding:8px 11px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.today-protected-word span,.today-protected-word small{color:var(--muted);font-size:12px}
.today-protected-word strong{letter-spacing:.08em}
.five-letter-review{margin:18px 0}
.five-letter-review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:14px}
.five-letter-mini-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.five-letter-mini-stats span{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:12px;white-space:nowrap}
.future-five-list{display:grid;gap:6px;max-height:560px;overflow:auto;padding-right:4px}
.future-five-row{display:grid;grid-template-columns:100px minmax(90px,1fr) 88px 72px auto;align-items:center;gap:9px;padding:9px 10px;background:var(--bg);border-radius:10px;border:1px solid transparent}
.future-five-row:hover{border-color:var(--line)}
.future-five-row time,.future-five-row small{color:var(--muted);font-size:12px}
.future-five-row strong{letter-spacing:.06em}
.difficulty-pill{display:inline-flex;justify-content:center;padding:4px 7px;border-radius:999px;font-size:11px;font-weight:800}
.difficulty-pill.easy{background:rgba(63,134,94,.12);color:#34734f}
.difficulty-pill.normal{background:rgba(209,164,59,.14);color:#88681d}
.difficulty-pill.hard{background:rgba(197,87,69,.12);color:#9c4436}
.muted-copy{color:var(--muted)}
@media(max-width:900px){.five-letter-rebuild-card{grid-template-columns:1fr}.five-letter-review-head{display:grid}.five-letter-mini-stats{justify-content:flex-start}}
@media(max-width:650px){.future-five-row{grid-template-columns:1fr auto;gap:6px 10px}.future-five-row time{grid-column:1}.future-five-row strong{grid-column:1;font-size:16px}.future-five-row .difficulty-pill{grid-column:2;grid-row:1}.future-five-row small{grid-column:2;grid-row:2;text-align:right}.future-five-row .btn{grid-column:1 / -1;width:100%}}

/* ===== Analítica interna admin ===== */
.admin-analytics-preview{margin-top:18px;padding:22px}
.admin-analytics-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.admin-analytics-preview-head h2,.admin-section-head h2{margin:5px 0 6px}
.admin-analytics-preview-head p,.admin-analytics-heading p,.admin-analytics-note p,.admin-empty-copy{color:var(--muted);margin:0;line-height:1.55}
.admin-analytics-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.admin-analytics-kpis>div{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.admin-analytics-preview .admin-analytics-kpis>div{background:var(--surface,#f7f6f1)}
.admin-analytics-kpis span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.admin-analytics-kpis strong{display:block;font-family:var(--font-display);font-size:34px;line-height:1.05;margin-top:6px}
.admin-analytics-kpis small{display:block;color:var(--muted);font-size:11px;margin-top:6px}
.admin-analytics-kpis-main{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.admin-analytics-heading{align-items:flex-end}
.admin-analytics-note{margin-bottom:18px;padding:18px 20px}
.admin-analytics-note strong{display:block;margin-bottom:5px}
.admin-analytics-two-col{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px;margin-top:18px;align-items:start}
.admin-analytics-two-col>.card{padding:20px;min-width:0}
.admin-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.admin-analytics-table-wrap{border-radius:14px}
.admin-analytics-table{min-width:620px}
.admin-ranking-list{display:grid;gap:8px}
.admin-ranking-list>div{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}
.admin-ranking-list>div:last-child{border-bottom:0}
.admin-ranking-list code{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;background:none;padding:0}
.admin-ranking-list strong{font-size:15px}
.admin-rank-number{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--surface,#f1f0eb);font-size:11px;font-weight:900;color:var(--muted)}
.admin-game-funnel-table{min-width:560px}
@media(max-width:1000px){.admin-analytics-kpis-main{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-analytics-two-col{grid-template-columns:1fr}}
@media(max-width:700px){.admin-analytics-preview-head{display:block}.admin-analytics-preview-head .btn{margin-top:12px}.admin-analytics-kpis,.admin-analytics-kpis-main{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-analytics-kpis strong{font-size:28px}.admin-analytics-two-col>.card{padding:14px}}

/* ===== Recuperación de contraseña ===== */
.account-forgot{display:block;text-align:center;margin-top:2px;font-size:.92rem;font-weight:650;color:var(--muted,#666);text-decoration:none}
.account-forgot:hover{text-decoration:underline;color:var(--ink,#171717)}


/* V5.3 · páginas de confianza, contacto y SEO institucional */
.trust-page{padding-top:34px}.page-breadcrumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:34px}.page-breadcrumbs a{color:inherit;text-decoration:none}.page-breadcrumbs a:hover{text-decoration:underline}.trust-hero{max-width:900px;margin-bottom:38px}.trust-hero h1{max-width:900px;line-height:.98;margin:10px 0 18px}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 54px}.trust-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px}.trust-card h2{font-family:var(--font-display);font-size:28px;font-weight:650;margin:12px 0 10px}.trust-card p{color:var(--muted);line-height:1.65;margin:0}.trust-number{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--muted)}.trust-prose{max-width:820px}.trust-prose p{line-height:1.72}.trust-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:var(--bg);border-radius:26px;padding:28px 30px;margin-top:50px}.trust-cta h2{font-family:var(--font-display);font-size:34px;margin:5px 0}.trust-cta p{color:#d7d6d0;margin:0;max-width:650px}.trust-cta .btn.primary{background:var(--bg);color:var(--ink);white-space:nowrap}.contact-hero{max-width:760px}.contact-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);gap:18px;align-items:start}.contact-form-card,.contact-info-card{background:var(--paper);border:1px solid var(--line);border-radius:22px}.contact-form-card{padding:26px}.contact-form{display:grid;gap:17px}.contact-form label{display:grid;gap:7px;font-size:13px;font-weight:800}.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form textarea{width:100%;resize:vertical;min-height:160px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;line-height:1.5}.contact-privacy{grid-template-columns:20px 1fr!important;align-items:start;font-weight:500!important;line-height:1.45;color:var(--muted)}.contact-privacy input{width:18px;height:18px;margin-top:1px}.contact-privacy a{color:var(--ink)}.contact-submit{justify-self:start;min-width:180px}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.contact-aside{display:grid;gap:14px}.contact-info-card{padding:23px}.contact-info-card h2{font-family:var(--font-display);font-size:27px;line-height:1.05;margin:8px 0 13px}.contact-info-card p{color:var(--muted);line-height:1.55}.contact-email{font-weight:850;color:var(--ink);overflow-wrap:anywhere}.text-link{font-weight:850;color:var(--ink);text-decoration:none}.contact-success{padding:20px 4px}.contact-success strong{display:block;font-family:var(--font-display);font-size:38px}.contact-success p{color:var(--muted);margin:8px 0 24px}
@media(max-width:800px){.trust-grid{grid-template-columns:1fr}.contact-layout{grid-template-columns:1fr}.trust-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.trust-page{padding-top:22px}.page-breadcrumbs{margin-bottom:24px}.trust-hero h1{font-size:44px}.trust-grid{margin:26px 0 38px}.trust-card{padding:20px}.trust-cta{padding:24px;margin-top:38px}.contact-form-card{padding:18px}.contact-form-grid{grid-template-columns:1fr}.contact-submit{width:100%;justify-content:center}}

/* Fase 2A · Hub SEO de palabras */
.word-hub-page{padding-bottom:42px}
.word-hub-hero{max-width:850px;margin-bottom:34px}
.word-hub-hero h1{margin:7px 0 10px;font-size:clamp(42px,7vw,72px);line-height:.98;letter-spacing:-.05em}
.word-hub-total{margin:12px 0 0;color:var(--muted);font-size:13px}
.word-hub-total strong{color:var(--ink)}
.word-hub-section{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.word-hub-section h2{margin:5px 0 18px;font-size:clamp(27px,4vw,40px);letter-spacing:-.035em}
.word-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.word-hub-card{position:relative;display:grid;gap:5px;padding:18px 44px 18px 18px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink);text-decoration:none;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.word-hub-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:var(--accent-soft)}
.word-hub-card strong{font-size:18px}
.word-hub-card span{color:var(--muted);font-size:12px}
.word-hub-card b{position:absolute;right:17px;top:50%;transform:translateY(-50%);font-size:20px}
.word-hub-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.word-hub-filter-grid a{display:grid;gap:6px;padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none}
.word-hub-filter-grid a:hover{border-color:color-mix(in srgb,var(--accent-2) 38%,var(--line));background:var(--accent-2-soft)}
.word-hub-filter-grid strong{font-size:14px}
.word-hub-filter-grid span{color:var(--muted);font-size:12px;line-height:1.5}
.word-hub-search{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:34px;padding:22px}
.word-hub-search h2{margin:4px 0 7px;font-size:25px;letter-spacing:-.03em}
.word-hub-search p{max-width:680px;margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.word-list-hub-link{margin:18px 0 0}
.word-list-hub-link a{font-weight:800;text-decoration:none}
@media (max-width:760px){
  .word-hub-page{width:calc(100% - 20px)}
  .word-hub-hero h1{font-size:39px}
  .word-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .word-hub-filter-grid{grid-template-columns:1fr}
  .word-hub-search{display:grid;padding:18px}
  .word-hub-search .btn{width:100%}
}

/* Fase 2B · Directorio SEO de palabras de 5 letras */
.word-hub-directory>p{max-width:760px;margin:-8px 0 16px;color:var(--muted);font-size:13px;line-height:1.6}
.word-hub-letter-cloud,.word-hub-ending-cloud{display:flex;flex-wrap:wrap;gap:8px}
.word-hub-letter-cloud a,.word-hub-ending-cloud a{display:grid;place-items:center;min-width:42px;min-height:42px;padding:8px 11px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:850;text-decoration:none;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.word-hub-letter-cloud a:hover,.word-hub-ending-cloud a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--accent-soft)}
.word-hub-ending-cloud a{min-width:50px}
.word-list-directory{display:grid;gap:16px;margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.word-list-directory>div{display:grid;grid-template-columns:115px minmax(0,1fr);gap:12px;align-items:start}
.word-list-directory>div>strong{padding-top:7px;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.word-list-directory nav{display:flex;flex-wrap:wrap;gap:6px}
.word-list-directory nav a{display:grid;place-items:center;min-width:34px;min-height:34px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font-size:11px;font-weight:850;text-decoration:none}
.word-list-directory nav a:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:var(--accent-soft)}
.word-list-wordle-link{justify-self:start;font-size:13px;font-weight:850;text-decoration:none}
@media(max-width:650px){
  .word-hub-letter-cloud,.word-hub-ending-cloud{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .word-hub-letter-cloud a,.word-hub-ending-cloud a{min-width:0;min-height:39px;padding:6px 4px;border-radius:10px}
  .word-list-directory{padding:14px}
  .word-list-directory>div{grid-template-columns:1fr;gap:7px}
  .word-list-directory>div>strong{padding-top:0}
  .word-list-directory nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .word-list-directory nav a{min-width:0;padding:5px 2px}
}
@media(max-width:390px){
  .word-hub-letter-cloud,.word-hub-ending-cloud,.word-list-directory nav{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* === FASE 3A · VOCABULARIO EDITORIAL === */
.vocab-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding-block:72px 52px}
.vocab-hero h1,.vocab-article-hero h1{font-family:var(--font-display);font-size:clamp(44px,6vw,76px);line-height:1.02;letter-spacing:-.045em;margin:10px 0 22px;font-weight:760}
.vocab-hero-copy>p,.vocab-article-lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:720px}
.vocab-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.vocab-hero-wordcloud{min-height:330px;background:var(--paper);border:1px solid var(--line);border-radius:32px;padding:28px;display:flex;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;box-shadow:var(--shadow-sm);transform:rotate(1.5deg)}
.vocab-hero-wordcloud span{display:inline-flex;padding:10px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-weight:800;font-size:clamp(14px,1.7vw,22px)}
.vocab-hero-wordcloud span:nth-child(2n){background:var(--accent-soft)}
.vocab-hero-wordcloud span:nth-child(3n){background:var(--accent-2-soft)}
.vocab-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vocab-card{display:flex;flex-direction:column;min-height:310px;padding:26px;background:var(--paper);border:1px solid var(--line);border-radius:24px;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.vocab-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ink) 25%,var(--line));box-shadow:var(--shadow-lift)}
.vocab-card-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:850}
.vocab-card h3{font-family:var(--font-display);font-size:30px;line-height:1.1;letter-spacing:-.025em;margin:10px 0 12px}
.vocab-card p{color:var(--muted);margin:0 0 18px}
.vocab-card-samples{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;margin-bottom:18px}
.vocab-card-samples span{font-size:12px;font-weight:800;padding:6px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.vocab-card>strong{color:var(--accent);font-size:14px}
.vocab-method{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vocab-method h2,.vocab-next h2,.vocab-source-note h2{font-family:var(--font-display);font-size:clamp(30px,3.6vw,42px);line-height:1.08;letter-spacing:-.03em;margin:8px 0}
.vocab-method-copy p,.vocab-source-note>p{color:var(--muted);max-width:760px}
.vocab-next{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.vocab-next p{color:var(--muted);max-width:650px}
.vocab-next .tool-links a{border-color:var(--line);background:var(--paper)}
.vocab-article-hero{padding-block:58px 34px;max-width:930px}
.vocab-back{display:inline-flex;margin-bottom:24px;color:var(--muted);text-decoration:none;font-weight:800;font-size:14px}
.vocab-article-hero>p:not(.vocab-article-lead){max-width:820px;color:var(--muted);font-size:16px}
.vocab-word-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:48px}
.vocab-word-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:22px;scroll-margin-top:90px}
.vocab-word-heading{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.vocab-word-number{display:grid;place-items:center;min-width:38px;height:38px;border-radius:11px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:900;letter-spacing:.08em}
.vocab-word-heading h2{font-family:var(--font-display);font-size:29px;line-height:1;margin:1px 0 5px;letter-spacing:-.02em}
.vocab-word-type{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:850}
.vocab-word-meaning{font-size:16px;line-height:1.6;margin:0 0 12px}
.vocab-word-example,.vocab-word-note{font-size:14px;line-height:1.55;color:var(--muted);margin:9px 0}
.vocab-word-example strong,.vocab-word-note strong{color:var(--ink)}
.vocab-dle-link{display:inline-flex;margin-top:10px;font-size:12px;font-weight:800;color:var(--accent);text-decoration:none}
.vocab-dle-link:hover{text-decoration:underline}
.vocab-source-note{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vocab-related{padding-bottom:36px}
.vocab-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vocab-related-grid a{display:flex;flex-direction:column;gap:9px;min-height:200px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-decoration:none}
.vocab-related-grid strong{font-family:var(--font-display);font-size:21px;line-height:1.15}
.vocab-related-grid span{color:var(--muted);font-size:13px}
.vocab-related-grid b{margin-top:auto;color:var(--accent);font-size:13px}
.home-vocab-teaser{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.home-vocab-intro,.home-vocab-links{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:26px}
.home-vocab-intro h2{font-family:var(--font-display);font-size:34px;line-height:1.08;letter-spacing:-.03em;margin:8px 0 12px}
.home-vocab-intro p{color:var(--muted)}
.home-vocab-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-vocab-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;text-decoration:none;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;font-weight:800;font-size:14px}
.home-vocab-links a:hover{border-color:var(--ink)}
@media(max-width:900px){
  .vocab-hero,.vocab-method,.vocab-next,.vocab-source-note{grid-template-columns:1fr}
  .vocab-hero-wordcloud{min-height:230px;transform:none}
  .vocab-related-grid{grid-template-columns:1fr}
  .home-vocab-teaser{grid-template-columns:1fr}
}
@media(max-width:650px){
  .vocab-hero{padding-block:38px 28px;gap:24px}.vocab-hero h1,.vocab-article-hero h1{font-size:44px}
  .vocab-card-grid,.vocab-word-list{grid-template-columns:1fr}
  .vocab-card{min-height:auto}.vocab-word-card{padding:18px}
  .vocab-article-hero{padding-block:38px 24px}.vocab-word-heading h2{font-size:26px}
  .home-vocab-links{grid-template-columns:1fr}
}
/* FASE 3B · Vocabulario ampliado */
.vocab-group{margin-top:34px}
.vocab-group:first-of-type{margin-top:18px}
.vocab-group-heading{display:grid;grid-template-columns:minmax(0,.9fr) minmax(260px,1.1fr);gap:32px;align-items:end;margin-bottom:18px;padding-top:22px;border-top:1px solid var(--line)}
.vocab-group-heading h3{font-family:var(--font-display);font-size:30px;line-height:1.08;letter-spacing:-.025em;margin:6px 0 0}
.vocab-group-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.vocab-group .vocab-card-grid{margin-top:0}
.vocab-group .vocab-card h4{font-family:var(--font-display);font-size:21px;line-height:1.15;letter-spacing:-.02em;margin:0}
@media(max-width:700px){.vocab-group{margin-top:28px}.vocab-group-heading{grid-template-columns:1fr;gap:8px}.vocab-group-heading h3{font-size:25px}}


/* V11.6.11.4 · ocultar de verdad el overlay central del reproductor */
.music-video-play[hidden]{
  display:none!important;
}


/* ==========================================================
   V11.6.13 · MOBILE WORD FOCUS MODE
   Selección visible, teclado grande y chrome auto-ocultable.
   ========================================================== */
.word-tile.editable{
  position:relative;
  cursor:pointer;
}
.word-tile.editable.selected{
  border-width:3px!important;
  border-color:var(--accent)!important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)!important;
}
.word-tile.editable.selected::after{
  content:'';
  position:absolute;
  width:3px;
  height:48%;
  border-radius:999px;
  background:var(--accent);
  opacity:.9;
  animation:pddCellCaret 1s steps(1,end) infinite;
}
.word-tile.editable.filled.selected::after{display:none}
@keyframes pddCellCaret{50%{opacity:0}}

@media(max-width:700px){
  body.is-word-game .word-keyboard-large .key{
    height:58px!important;
    min-height:58px!important;
    padding-inline:2px!important;
    font-size:16px!important;
    font-weight:850!important;
    border-radius:9px!important;
  }
  body.is-word-game .word-keyboard-large .keyboard-row{gap:4px!important}
  body.is-word-game .word-keyboard-large .key.enter-key{
    flex:2.2 1 0!important;
    min-width:70px!important;
    font-size:12px!important;
    letter-spacing:.02em;
    background:var(--accent)!important;
    color:#fff!important;
  }
  body.is-word-game .word-keyboard-large .key.backspace-key{
    flex:1.6 1 0!important;
    min-width:58px!important;
    font-size:18px!important;
  }

  /* Título + selector de modo + selector de longitud se recogen juntos. */
  body.is-word-game .word-page-head,
  body.is-word-game .word-mode-tabs,
  body.is-word-game .word-length-switcher{
    overflow:hidden;
    transition:max-height .22s ease,opacity .18s ease,transform .22s ease,margin .22s ease,padding .22s ease;
  }
  body.is-word-game .word-page-head{max-height:84px}
  body.is-word-game .word-mode-tabs{max-height:54px}
  body.is-word-game .word-length-switcher{max-height:54px}

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page-head,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-mode-tabs,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-length-switcher{
    max-height:0!important;
    min-height:0!important;
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    border-width:0!important;
  }

  /* También desaparece la navegación inferior para liberar altura real. */
  body.is-word-game .mobile-tabbar{
    transition:transform .22s ease,opacity .18s ease!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .mobile-tabbar{
    transform:translateY(calc(100% + 28px))!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page{
    padding-top:4px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-statusbar{
    cursor:pointer;
    margin-bottom:4px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus{
    min-height:calc(100svh - 58px)!important;
    padding-top:6px!important;
  }

  /* Con el chrome recogido aprovechamos el ancho para letras/casillas mayores. */
  body.is-word-game.word-game-header-hidden .word-board.word-board-large.word-board-3{max-width:230px!important}
  body.is-word-game.word-game-header-hidden .word-board.word-board-large.word-board-4{max-width:290px!important}
  body.is-word-game.word-game-header-hidden .word-board.word-board-large.word-board-5{max-width:352px!important}
  body.is-word-game.word-game-header-hidden .word-board-large .word-tile{font-size:clamp(27px,9.2vw,36px)!important}
  body.is-word-game.word-game-header-hidden .word-board-medium .word-tile{font-size:clamp(21px,6.8vw,30px)!important}
  body.is-word-game.word-game-header-hidden .word-board-long .word-tile{font-size:clamp(16px,5.2vw,24px)!important}
  body.is-word-game.word-game-header-hidden .word-board-xl .word-tile{font-size:clamp(13px,4.3vw,20px)!important}
}

@media(max-width:430px){
  body.is-word-game .word-keyboard-large .key{height:56px!important;min-height:56px!important;font-size:15px!important}
  body.is-word-game .word-keyboard-large .key.enter-key{font-size:11px!important;min-width:66px!important}
}
@media(max-width:340px){
  body.is-word-game .word-keyboard-large .key{height:52px!important;min-height:52px!important;font-size:13px!important}
  body.is-word-game .word-keyboard-large .key.enter-key{font-size:9px!important;min-width:58px!important}
}


/* V5.3.9 · móvil focus real: ocultación completa tras la cuenta atrás */
@media(max-width:700px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished){
    padding-top:0!important;
    padding-bottom:0!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page-head,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-mode-tabs,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-length-switcher,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .mobile-tabbar{
    display:none!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page{
    width:100%!important;
    max-width:none!important;
    padding:2px 6px 0!important;
    margin:0!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-statusbar{
    margin:0 4px 3px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus{
    min-height:calc(100svh - 58px)!important;
    height:calc(100svh - 58px)!important;
    max-height:calc(100svh - 58px)!important;
    margin:0!important;
    border-radius:14px!important;
    padding:4px 5px max(4px,env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board{
    margin-top:2px!important;
    margin-bottom:4px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-wrap{
    margin-top:auto!important;
    width:100%!important;
  }
}


/* V5.4.0 · salida visible del modo pantalla completa móvil */
.word-focus-menu-button{display:none}
@media(max-width:700px){
  body.is-word-game .word-focus-menu-button{
    position:fixed;
    top:max(8px,env(safe-area-inset-top));
    right:9px;
    z-index:120;
    min-height:42px;
    padding:8px 12px;
    border:1px solid color-mix(in srgb,var(--accent) 72%,#000);
    border-radius:999px;
    background:color-mix(in srgb,var(--paper) 94%,transparent);
    color:var(--ink);
    box-shadow:0 7px 22px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    align-items:center;
    gap:6px;
    font:inherit;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus-menu-button{
    display:inline-flex!important;
  }
  .word-focus-menu-button span{font-size:18px;line-height:1}
  .word-focus-menu-button b{font-size:12px;line-height:1}
}


/* V5.4.1 · focus móvil REAL: ocultar también la cabecera global de la web */
@media(max-width:700px){
  body.is-word-game .site-header{
    overflow:hidden;
    transition:max-height .22s ease,opacity .18s ease,transform .22s ease,border .18s ease!important;
    max-height:72px;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .site-header{
    display:none!important;
    max-height:0!important;
    min-height:0!important;
    height:0!important;
    opacity:0!important;
    pointer-events:none!important;
    border:0!important;
    margin:0!important;
    padding:0!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) main{
    min-height:100svh!important;
    padding:0!important;
    margin:0!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page{
    min-height:100svh!important;
    height:100svh!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus{
    min-height:calc(100svh - 49px)!important;
    height:calc(100svh - 49px)!important;
    max-height:calc(100svh - 49px)!important;
  }

  /* Salida visible: no depende de la cabecera que acabamos de ocultar. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus-menu-button{
    display:inline-flex!important;
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    right:8px!important;
    z-index:10000!important;
  }
}


/* V5.4.2 · restauración robusta del menú móvil desde modo focus */
@media(max-width:700px){
  body.is-word-game.word-game-controls-open .site-header{
    display:block!important;
    max-height:none!important;
    min-height:0!important;
    height:auto!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    border-bottom:1px solid var(--line)!important;
    margin:0!important;
  }
  body.is-word-game.word-game-controls-open main{
    min-height:0!important;
    padding:0!important;
    margin:0!important;
  }
  body.is-word-game.word-game-controls-open .word-page-head,
  body.is-word-game.word-game-controls-open .word-mode-tabs,
  body.is-word-game.word-game-controls-open .word-length-switcher,
  body.is-word-game.word-game-controls-open .mobile-tabbar{
    display:flex!important;
    max-height:none!important;
    min-height:0!important;
    height:auto!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  body.is-word-game.word-game-controls-open .word-mode-tabs,
  body.is-word-game.word-game-controls-open .word-length-switcher{
    overflow-x:auto!important;
  }
  body.is-word-game.word-game-controls-open .mobile-tabbar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
  }
  body.is-word-game.word-game-controls-open .word-page{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    width:min(100% - 20px,var(--shell))!important;
    margin-inline:auto!important;
    padding-top:0!important;
  }
  body.is-word-game.word-game-controls-open .word-focus{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
  }
  body.is-word-game.word-game-controls-open .word-focus-menu-button{
    display:none!important;
  }
}

/* V5.4.3 · teclado móvil siempre completo + restauración correcta del menú */
@media (max-width:700px){
  /* Cada fila del teclado ocupa exactamente el ancho disponible. Esto evita
     que ENTER/Borrar expulsen letras fuera de la pantalla en móviles estrechos. */
  body.is-word-game .keyboard.word-keyboard-large{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.is-word-game .word-keyboard-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  body.is-word-game .word-keyboard-large .keyboard-row{
    width:100%!important;
    max-width:100%!important;
    margin-inline:auto!important;
    display:grid!important;
    gap:4px!important;
    box-sizing:border-box!important;
  }
  body.is-word-game .word-keyboard-large .keyboard-row:nth-child(1),
  body.is-word-game .word-keyboard-large .keyboard-row:nth-child(2){
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
  }
  body.is-word-game .word-keyboard-large .keyboard-row:nth-child(3){
    grid-template-columns:minmax(46px,1.65fr) repeat(7,minmax(0,1fr)) minmax(42px,1.45fr)!important;
  }
  body.is-word-game .word-keyboard-large .keyboard-row:nth-child(4){
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    max-width:300px!important;
  }
  body.is-word-game .word-keyboard-large .key,
  body.is-word-game .word-keyboard-large .key.wide,
  body.is-word-game .word-keyboard-large .key.enter-key,
  body.is-word-game .word-keyboard-large .key.backspace-key{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding-inline:1px!important;
    box-sizing:border-box!important;
  }
  body.is-word-game .word-keyboard-large .key{
    height:54px!important;
    min-height:54px!important;
    font-size:clamp(13px,3.8vw,16px)!important;
  }
  body.is-word-game .word-keyboard-large .key.enter-key{
    font-size:10px!important;
  }
  body.is-word-game .word-keyboard-large .key.backspace-key{
    font-size:19px!important;
  }

  /* Al abrir controles se restaura la barra móvil con su layout original:
     cinco columnas iguales, centrada y con margen seguro respecto al borde. */
  body.is-word-game.word-game-controls-open .mobile-tabbar{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:min(calc(100vw - 16px),430px)!important;
    height:70px!important;
    padding:6px 5px!important;
    transform:translateX(-50%)!important;
    opacity:1!important;
    pointer-events:auto!important;
    z-index:1000!important;
    box-sizing:border-box!important;
  }
  body.is-word-game.word-game-controls-open .mobile-tabbar > a,
  body.is-word-game.word-game-controls-open .mobile-tabbar > button{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  /* Con los controles abiertos dejamos espacio real para la barra inferior. */
  body.is-word-game.word-game-controls-open{
    padding-bottom:calc(86px + env(safe-area-inset-bottom))!important;
  }
  body.is-word-game.word-game-controls-open .word-page{
    padding-bottom:12px!important;
  }
}

@media (max-width:360px){
  body.is-word-game .word-keyboard-large .keyboard-row{gap:3px!important}
  body.is-word-game .word-keyboard-large .keyboard-row:nth-child(3){
    grid-template-columns:minmax(42px,1.55fr) repeat(7,minmax(0,1fr)) minmax(38px,1.35fr)!important;
  }
  body.is-word-game .word-keyboard-large .key{
    height:51px!important;
    min-height:51px!important;
    font-size:13px!important;
  }
  body.is-word-game .word-keyboard-large .key.enter-key{font-size:9px!important}
}

/* V5.4.4 · focus móvil: reservar siempre espacio para las 3 filas del teclado */
@media (max-width:700px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus{
    overflow:hidden!important;
    justify-content:flex-start!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-message{
    flex:0 0 auto!important;
  }

  /* El tablero puede crecer, pero nunca a costa de expulsar el teclado. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board{
    flex:1 1 auto!important;
    min-height:0!important;
    margin-top:1px!important;
    margin-bottom:4px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    max-width:min(230px,31svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    max-width:min(290px,35svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(352px,38svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-medium{
    max-width:min(390px,43svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-long,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-xl{
    max-width:min(100%,48svh)!important;
  }

  /* El teclado es una zona no comprimible: siempre deben verse todas sus filas. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-wrap{
    flex:0 0 auto!important;
    margin-top:auto!important;
    padding-bottom:max(2px,env(safe-area-inset-bottom))!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key{
    height:clamp(44px,6.5svh,52px)!important;
    min-height:44px!important;
  }
}

/* Viewports cortos: priorizar teclado completo antes que tamaño máximo de tablero. */
@media (max-width:700px) and (max-height:700px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(292px,34svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    max-width:min(258px,31svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    max-width:min(214px,28svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key{
    height:42px!important;
    min-height:42px!important;
  }
}

/* V5.4.5 · FIX definitivo: el modo focus nunca puede recortar el teclado.
   La versión anterior fijaba height/max-height y overflow:hidden al activarse
   word-game-header-hidden. En algunos móviles la tercera fila seguía en el DOM
   pero quedaba fuera del área visible. Priorizamos siempre las 3 filas completas. */
@media (max-width:700px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) main{
    min-height:100dvh!important;
    height:auto!important;
    overflow:visible!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page{
    min-height:100dvh!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus{
    min-height:calc(100dvh - 52px)!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board{
    flex:1 1 auto!important;
    min-height:0!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-wrap,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .keyboard.word-keyboard-large,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row{
    flex-shrink:0!important;
    overflow:visible!important;
    visibility:visible!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-wrap{
    margin-top:auto!important;
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
  }
}

/* En móviles bajos reducimos antes el tablero; nunca el teclado. */
@media (max-width:700px) and (max-height:760px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(300px,34dvh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    max-width:min(258px,30dvh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    max-width:min(214px,27dvh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key{
    height:42px!important;
    min-height:42px!important;
  }
}

/* V5.4.6 · focus móvil sin redimensionar el tablero.
   Al ocultar cabeceras ganamos espacio, pero el tablero conserva exactamente
   su geometría de partida activa: no se estira, no separa filas y no encoge
   las casillas al aparecer el botón flotante de Menú. */
@media (max-width:700px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board{
    flex:0 0 auto!important;
    align-self:center!important;
    width:100%!important;
    min-height:0!important;
    margin-top:2px!important;
    margin-bottom:8px!important;
    gap:4px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board .word-row{
    gap:4px!important;
  }

  /* Mismos tamaños que durante la partida antes de activar focus. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    max-width:min(236px,36svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    max-width:min(292px,40svh)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(328px,43svh)!important;
  }

  /* El tamaño de letra tampoco cambia al entrar/salir de focus. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board-large .word-tile{
    font-size:clamp(23px,8.5vw,32px)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board-medium .word-tile{
    font-size:clamp(19px,6.4vw,28px)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board-long .word-tile{
    font-size:clamp(15px,4.9vw,22px)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board-xl .word-tile{
    font-size:clamp(12px,4.1vw,18px)!important;
  }
}

@media (max-width:700px) and (max-height:760px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(270px,36svh)!important;
  }
}

/* V5.4.7 · móvil definitivo: tablero grande + teclado completo, sin recortes por altura.
   En focus solo desaparece navegación. El área de juego fluye de forma natural;
   si un viewport es corto, se permite scroll antes que sacrificar una fila. */
@media (max-width:700px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished),
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) main,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished){
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-page{
    padding-top:4px!important;
    padding-bottom:6px!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus{
    display:block!important;
  }

  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-message{
    min-height:0!important;
    margin:0 0 2px!important;
  }

  /* Casillas algo mayores. El tamaño depende del ancho, no del alto de pantalla. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board{
    display:grid!important;
    width:100%!important;
    margin:2px auto 10px!important;
    gap:5px!important;
    flex:none!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board .word-row{
    gap:5px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    max-width:min(270px,76vw)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    max-width:min(326px,86vw)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(370px,94vw)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board-large .word-tile{
    font-size:clamp(28px,9.5vw,38px)!important;
  }

  /* El teclado nunca participa en cálculos flex de altura. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-wrap,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .keyboard.word-keyboard-large,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row{
    display:grid!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    flex:none!important;
    flex-shrink:0!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-wrap{
    width:100%!important;
    margin:0 auto!important;
    padding:0 2px max(8px,env(safe-area-inset-bottom))!important;
    position:relative!important;
    z-index:5!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .keyboard.word-keyboard-large{
    width:100%!important;
    max-width:680px!important;
    margin:0 auto!important;
    gap:6px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row{
    width:100%!important;
    gap:4px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(1),
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(2){
    grid-template-columns:repeat(10,minmax(0,1fr))!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(3){
    grid-template-columns:minmax(58px,1.7fr) repeat(7,minmax(0,1fr)) minmax(50px,1.5fr)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(4){
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    max-width:330px!important;
    margin-inline:auto!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.wide,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.enter-key,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.backspace-key{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 2px!important;
    box-sizing:border-box!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key{
    font-size:clamp(14px,4vw,17px)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.enter-key{
    font-size:10px!important;
    font-weight:900!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.backspace-key{
    font-size:21px!important;
  }

  /* Botón de salida flotante: nunca ocupa espacio dentro del juego. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus-menu-button{
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    right:10px!important;
    bottom:auto!important;
    left:auto!important;
    margin:0!important;
    z-index:2000!important;
  }
}

@media (max-width:370px){
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:340px!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row{gap:3px!important}
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(3){
    grid-template-columns:minmax(52px,1.6fr) repeat(7,minmax(0,1fr)) minmax(46px,1.4fr)!important;
  }
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key,
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.wide{
    height:55px!important;
    min-height:55px!important;
  }
}

/* V5.4.8 · modo focus neutro: ocultar navegación SIN tocar la geometría del juego.
   El estado antes de mostrar “☰ Menú” es la referencia visual correcta. Cuando
   entra word-game-header-hidden, tablero y teclado conservan exactamente las
   mismas medidas, filas y distribución; solo se ocultan cabeceras/menús. */
@media (max-width:700px){
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-focus{
    min-height:calc(100svh - 118px)!important;
    height:auto!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    overflow:visible!important;
    padding-top:7px!important;
    padding-bottom:8px!important;
  }

  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board{
    display:grid!important;
    width:auto!important;
    flex:0 0 auto!important;
    align-self:center!important;
    margin-top:14px!important;
    margin-bottom:8px!important;
    gap:7px!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board .word-row{
    gap:7px!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(328px,43svh)!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    max-width:min(292px,40svh)!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    max-width:min(236px,36svh)!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board-large .word-tile{
    font-size:30px!important;
  }

  /* Restaurar el teclado exactamente como en el estado previo al focus. */
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-wrap{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .keyboard.word-keyboard-large{
    display:grid!important;
    width:100%!important;
    max-width:650px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    gap:7px!important;
    overflow:visible!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row,
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(1),
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(2),
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(3),
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .keyboard-row:nth-child(4){
    display:flex!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:none!important;
    justify-content:center!important;
    gap:4px!important;
    margin:0!important;
    overflow:visible!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 2px!important;
    font-size:16px!important;
    font-weight:850!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.enter-key{
    flex:2.2 1 0!important;
    min-width:70px!important;
    font-size:12px!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key.backspace-key{
    flex:1.6 1 0!important;
    min-width:58px!important;
    font-size:18px!important;
  }

  /* El botón es una capa fija y no participa jamás en el layout. */
  body.is-word-game.word-game-header-hidden:not(.word-game-finished) .word-focus-menu-button{
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    right:10px!important;
    bottom:auto!important;
    left:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    z-index:3000!important;
    transform:none!important;
  }
}

@media (max-width:700px) and (max-height:760px){
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    max-width:min(270px,36svh)!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-keyboard-large .key{
    height:58px!important;
    min-height:58px!important;
  }
}

/* V5.4.9 · tablero grande y estable en focus móvil.
   El teclado de V5.4.8 queda intacto. Eliminamos cualquier límite por altura
   (svh), que encogía las casillas justo al aparecer el botón ☰ Menú. */
@media (max-width:700px){
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-focus{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }

  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board{
    width:100%!important;
    flex:0 0 auto!important;
    margin:10px auto 10px!important;
    gap:7px!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board .word-row{
    gap:7px!important;
  }

  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    width:min(92vw,368px)!important;
    max-width:min(92vw,368px)!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-4{
    width:min(82vw,310px)!important;
    max-width:min(82vw,310px)!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-3{
    width:min(68vw,244px)!important;
    max-width:min(68vw,244px)!important;
  }
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board-large .word-tile{
    font-size:clamp(30px,9vw,38px)!important;
  }
}

/* En móviles bajos NO reducimos el tablero por altura. Si hace falta,
   permitimos scroll antes que sacrificar casillas o teclado. */
@media (max-width:700px) and (max-height:760px){
  body.is-word-game.word-game-active.word-game-header-hidden:not(.word-game-finished) .word-board.word-board-large.word-board-5{
    width:min(92vw,356px)!important;
    max-width:min(92vw,356px)!important;
  }
}

/* ==========================================================
   V5.5.0 · MOBILE WORD GAME · PANTALLA ESTABLE
   El tablero/teclado no cambian de posición al escribir,
   borrar, seleccionar casillas ni abrir el menú.
   ========================================================== */
@media(max-width:700px){
  body.is-word-game:not(.word-game-finished) .site-header,
  body.is-word-game:not(.word-game-finished) .word-page-head,
  body.is-word-game:not(.word-game-finished) .word-mode-tabs,
  body.is-word-game:not(.word-game-finished) .word-length-switcher,
  body.is-word-game:not(.word-game-finished) .mobile-tabbar{
    display:none!important;
    transition:none!important;
  }

  body.is-word-game:not(.word-game-finished){
    padding-top:0!important;
    padding-bottom:0!important;
  }

  body.is-word-game:not(.word-game-finished) main{
    min-height:100svh!important;
    padding:0!important;
    margin:0!important;
  }

  body.is-word-game:not(.word-game-finished) .word-page{
    width:100%!important;
    max-width:none!important;
    min-height:100svh!important;
    height:100svh!important;
    margin:0!important;
    padding:2px 6px 0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.is-word-game:not(.word-game-finished) .word-statusbar{
    margin:0 4px 3px!important;
    cursor:default!important;
  }

  body.is-word-game:not(.word-game-finished) .word-focus{
    min-height:calc(100svh - 49px)!important;
    height:calc(100svh - 49px)!important;
    max-height:calc(100svh - 49px)!important;
    margin:0!important;
    border-radius:14px!important;
    padding:4px 5px max(4px,env(safe-area-inset-bottom))!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    transition:none!important;
  }

  body.is-word-game:not(.word-game-finished) .word-board{
    margin-top:2px!important;
    margin-bottom:4px!important;
  }

  body.is-word-game:not(.word-game-finished) .word-keyboard-wrap{
    margin-top:auto!important;
    width:100%!important;
  }

  /* El botón está siempre en el mismo sitio: pulsarlo abre el drawer,
     que se superpone a la partida y no cambia su geometría. */
  body.is-word-game:not(.word-game-finished) .word-focus-menu-button{
    display:inline-flex!important;
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    right:8px!important;
    z-index:10000!important;
  }
}

/* ==========================================================
   V11.6.14.0 · PORTADA = PALABRA DEL DÍA 5L
   La raíz reutiliza el juego real. En móvil, mientras la partida
   está activa, el contenido editorial inferior no compite con el
   tablero; reaparece al terminar. El botón flotante de Menú se
   conserva exactamente como en el resto de partidas de palabras.
   ========================================================== */
.word-back[type="button"]{
  color:var(--ink);
  padding:0;
  cursor:pointer;
  font:inherit;
}

@media(max-width:700px){
  body.is-home-word-game:not(.word-game-finished) .home-after-game{
    display:none!important;
  }
}

/* ============================================================
   V11.6.15.0 · PWA INSTALL EXPERIENCE
   Instalación progresiva sin interferir con el juego.
   ============================================================ */
.pwa-install-nav{
  min-height:38px;padding:0 11px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:10px;
  background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--ink);font:inherit;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;transition:border-color .15s ease,transform .15s ease,background .15s ease
}
.pwa-install-nav:hover,.pwa-install-nav:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--paper));transform:translateY(-1px)}
.pwa-install-nav[hidden],.pwa-menu-section[hidden]{display:none!important}
.pwa-install-card{
  width:100%;min-height:66px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:14px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 17%,var(--paper)),var(--paper));color:var(--ink);
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 12px;text-align:left;font:inherit;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease
}
.pwa-install-card:hover,.pwa-install-card:focus-visible{transform:translateY(-1px);border-color:var(--accent)}
.pwa-install-card>span:nth-child(2){min-width:0;display:grid;gap:2px}.pwa-install-card strong{font-size:14px;line-height:1.15}.pwa-install-card small{color:var(--muted);font-size:10px;line-height:1.35}.pwa-install-card>b{font-size:15px;color:var(--muted)}
.pwa-install-help{display:grid;gap:16px}.pwa-install-intro{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}
.pwa-install-steps{display:grid;gap:8px;counter-reset:pwa-step}.pwa-install-step{counter-increment:pwa-step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pwa-install-step::before{content:counter(pwa-step);width:30px;height:30px;border-radius:9px;background:var(--navy);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:900}
.pwa-install-step strong{display:block;font-size:12px;line-height:1.35}.pwa-install-step span{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.5}
.pwa-install-note{padding:13px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,var(--bg));font-size:11px;line-height:1.55;color:var(--muted)}
.pwa-install-note strong{color:var(--ink)}.pwa-install-native{width:100%;min-height:48px;border:0;border-radius:12px;background:var(--navy);color:var(--game-ink);font:inherit;font-size:12px;font-weight:850;cursor:pointer}.pwa-install-native .ui-icon{color:var(--accent)}
.pwa-install-success{padding:18px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 10%,var(--bg));text-align:center}.pwa-install-success strong{display:block;font-size:16px}.pwa-install-success p{margin:6px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
@media(max-width:980px){.pwa-install-nav{display:none!important}}
@media(display-mode:standalone){[data-pwa-install],[data-pwa-entry]{display:none!important}}

/* SEO editorial: guías de hiato/diptongo */
.vocab-quick-guide,.vocab-study-guide,.vocab-faq{border-top:1px solid var(--line)}
.vocab-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vocab-quick-grid article,.vocab-study-grid article{border:1px solid var(--line);border-radius:18px;background:var(--paper);padding:20px}
.vocab-quick-grid h3,.vocab-study-grid h3{font-family:var(--font-display);font-size:22px;line-height:1.15;margin:0 0 10px;letter-spacing:-.02em}
.vocab-quick-grid p,.vocab-study-grid p,.vocab-faq-list p{color:var(--muted);line-height:1.6}
.vocab-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.vocab-chip-list span{display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-weight:750;font-size:13px}
.vocab-study-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vocab-faq-list{display:grid;gap:10px;max-width:900px}
.vocab-faq-list details{border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:0 18px}
.vocab-faq-list summary{cursor:pointer;font-weight:850;padding:16px 0}
.vocab-faq-list details p{margin:0;padding:0 0 16px}
@media (max-width:760px){.vocab-quick-grid,.vocab-study-grid{grid-template-columns:1fr}}