:root{
  --fondo:#f1f0df;
  --panel:#faf9ed;
  --panel2:#e8ead9;
  --tinta:#173f3e;
  --tinta2:#275c59;
  --acento:#f3aa72;
  --muted:#6f7770;
  --peligro:#aa473f;
  --sombra:4px 5px 0 rgba(23,63,62,.18);
}
body[data-theme="azul"]{
  --fondo:#eaf2f4; --panel:#f8fbfc; --panel2:#dcebed; --tinta:#17374b; --tinta2:#245c78;
  --acento:#8ecae6; --muted:#62747c; --peligro:#9e4545; --sombra:4px 5px 0 rgba(23,55,75,.16);
}
body[data-theme="rosa"]{
  --fondo:#f5ecef; --panel:#fff9fa; --panel2:#eedfe4; --tinta:#512c3c; --tinta2:#7d415b;
  --acento:#f2b5c4; --muted:#7c6870; --peligro:#a54040; --sombra:4px 5px 0 rgba(81,44,60,.16);
}
body[data-theme="oscuro"]{
  --fondo:#111817; --panel:#17211f; --panel2:#1d2b28; --tinta:#d8efe7; --tinta2:#8fd5c1;
  --acento:#e9a86e; --muted:#93aaa2; --peligro:#ff8d87; --sombra:4px 5px 0 rgba(0,0,0,.32);
}
body[data-theme="lima"]{
  --fondo:#eef2d5; --panel:#fbfce9; --panel2:#e2e9bd; --tinta:#33421f; --tinta2:#5b7134;
  --acento:#c9e36e; --muted:#707a57; --peligro:#9a463e; --sombra:4px 5px 0 rgba(51,66,31,.16);
}
body[data-theme="lavanda"]{
  --fondo:#eeeaf6; --panel:#faf8ff; --panel2:#e2dcf0; --tinta:#3f315d; --tinta2:#66518e;
  --acento:#c8b5ee; --muted:#726985; --peligro:#9e4657; --sombra:4px 5px 0 rgba(63,49,93,.16);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100dvh;background:var(--fondo);color:var(--tinta);
  font-family:"Courier New",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background-image:
    linear-gradient(rgba(23,63,62,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,63,62,.02) 1px,transparent 1px);
  background-size:22px 22px;
  transition:background-color .25s,color .25s;
}
button,input{font:inherit}
button{color:inherit}
.shell{width:min(1180px,100%);min-height:100dvh;margin:auto;padding:clamp(12px,2vw,24px);display:flex;flex-direction:column}
.top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  border-bottom:3px solid var(--tinta);padding:8px 2px 14px;margin-bottom:14px;
}
.marca{
  display:flex;align-items:baseline;gap:2px;
  color:color-mix(in srgb,var(--tinta) 62%, transparent);
  font-family:Arial,sans-serif;font-weight:1000;letter-spacing:-.055em;line-height:.86
}
.marcaWord{font-size:20px}
.marcaExpansion{
  font-size:11px;letter-spacing:-.025em;
  color:color-mix(in srgb,var(--tinta2) 68%, transparent)
}
.marcaBar{display:inline-block;background:var(--tinta);color:var(--fondo);padding:3px 8px;margin-top:4px;letter-spacing:.08em}
.topRight{display:flex;align-items:center;gap:10px;position:relative}
.selectorTema{position:relative}
.themeToggle{
  border:2px solid var(--tinta);background:var(--panel);width:30px;height:30px;min-height:30px;
  padding:0;display:grid;place-items:center;
  box-shadow:2px 2px 0 color-mix(in srgb,var(--tinta) 22%,transparent);cursor:pointer
}
.themeDot{width:14px;height:14px;border-radius:50%;background:var(--acento);border:1.5px solid var(--tinta)}
.themeMenu{
  position:absolute;right:0;top:44px;z-index:50;width:190px;padding:8px;border:2px solid var(--tinta);
  background:var(--panel);box-shadow:4px 4px 0 color-mix(in srgb,var(--tinta) 22%,transparent)
}
.themeChoice{
  width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--tinta);
  padding:8px;cursor:pointer;text-align:left
}
.themeChoice:hover,.themeChoice.activo{background:var(--panel2)}
.swatch{width:24px;height:24px;border:2px solid var(--tinta);flex:0 0 auto}
.swatch.clasico{background:#f3aa72}.swatch.azul{background:#8ecae6}.swatch.rosa{background:#f2b5c4}
.swatch.oscuro{background:#17211f}.swatch.lima{background:#c9e36e}.swatch.lavanda{background:#c8b5ee}
.screen{display:none;flex:1}
.screen.active{display:flex}
#cargando,#inicio,#resultado{align-items:center;justify-content:center}
.card{
  width:min(850px,100%);border:2px solid var(--tinta);background:color-mix(in srgb,var(--panel) 90%,transparent);
  box-shadow:var(--sombra);padding:clamp(20px,4vw,46px)
}
.kicker{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
h1{margin:16px 0 12px}
.wordmarkHero{
  display:flex;align-items:baseline;gap:clamp(3px,.7vw,9px);
  font-family:Arial,sans-serif;font-weight:1000;letter-spacing:-.075em;line-height:.76;
  white-space:nowrap;color:var(--tinta)
}
.wordmarkWord{font-size:clamp(64px,13vw,132px);color:var(--tinta)}
.wordmarkExpansion{
  font-size:clamp(27px,5.2vw,54px);
  letter-spacing:-.055em;color:var(--tinta2)
}
.subtitle{font-size:clamp(14px,2vw,19px);max-width:680px;line-height:1.55;color:var(--muted)}
.loadbar{height:12px;border:2px solid var(--tinta);margin:24px 0 10px;overflow:hidden}
.loadbar>div{width:16%;height:100%;background:var(--tinta);animation:carga 1.1s ease-in-out infinite alternate}
@keyframes carga{to{width:88%}}
.status{font-size:12px;color:var(--muted);min-height:18px}
.btn{
  border:2px solid var(--tinta);background:var(--acento);padding:13px 18px;font-weight:900;
  text-transform:uppercase;box-shadow:3px 3px 0 var(--tinta);cursor:pointer;transition:.12s transform,.12s box-shadow;
}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tinta)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn.secundario{background:var(--panel)}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0}
.rule{border:2px solid var(--tinta);padding:12px;background:var(--panel);min-height:92px}
.rule b{display:block;font-size:12px;margin-bottom:8px}
.rule span{font-size:12px;line-height:1.45;color:var(--muted)}
.source{font-size:10px;color:var(--muted);line-height:1.45;margin-top:16px}
.homeActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

#juego{flex-direction:column;gap:10px}
.gameHead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.titleBlock{display:flex;align-items:end;gap:18px;min-width:0}
.gameTitle{font:1000 clamp(40px,7vw,70px)/.9 Arial,sans-serif;letter-spacing:-.065em}
.gameTitle small{display:block;font:900 11px/1.2 "Courier New",monospace;letter-spacing:.12em;margin-bottom:4px}
.prefixBox{
  border:2px solid var(--tinta);background:var(--acento);padding:8px 13px;min-width:102px;text-align:center;
  box-shadow:3px 3px 0 color-mix(in srgb,var(--tinta) 16%,transparent)
}
.prefixBox small{display:block;font-size:9px;letter-spacing:.12em;font-weight:900}
.prefixBox strong{font-size:29px;line-height:1}
.metrics{display:flex;gap:8px;align-items:flex-end;align-self:end}
.metric{
  border:2px solid var(--tinta);background:var(--panel);min-width:92px;height:58px;
  padding:5px 10px;text-align:center;display:flex;flex-direction:column;justify-content:center
}
.metric span{display:block;font-size:9px;line-height:1;letter-spacing:.12em;font-weight:900;margin-bottom:3px}
.metric b{font-size:23px;line-height:1}
.metric.time.urgent{background:var(--acento)}

.boardWrap{
  border:2px solid var(--tinta);background:color-mix(in srgb,var(--panel) 90%,transparent);
  box-shadow:var(--sombra);flex:1;min-height:430px;position:relative;overflow:hidden
}
.boardTop{
  position:absolute;z-index:5;left:14px;top:10px;right:14px;display:flex;justify-content:space-between;
  pointer-events:none;font-size:10px;font-weight:900;letter-spacing:.08em
}
.boardTop span:last-child{color:var(--muted)}
#tree{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.edge{fill:none;stroke:var(--tinta2);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.node .main{fill:var(--panel);stroke:var(--tinta);stroke-width:2.2;vector-effect:non-scaling-stroke}
.node text.letter{fill:var(--tinta);font-size:25px;font-weight:700;text-anchor:middle;dominant-baseline:central}
.node text.pathLabel{fill:var(--muted);font-size:10px;text-anchor:middle;font-weight:700}
.node.terminal .main{fill:var(--tinta2)}
.node.terminal text.letter{fill:var(--fondo)}
.node .endBadge{fill:var(--fondo);stroke:var(--tinta2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.node .endDot{fill:var(--tinta2)}
.prefixNode .main{fill:var(--acento);stroke:var(--tinta);stroke-width:3}
.prefixNode text.letter{fill:var(--tinta);font-size:21px;font-weight:900}

.entryPanel{
  border:2px solid var(--tinta);background:color-mix(in srgb,var(--panel) 92%,transparent);
  padding:10px 12px;box-shadow:3px 3px 0 color-mix(in srgb,var(--tinta) 13%,transparent)
}
.entryTop{display:flex;justify-content:space-between;gap:12px;font-size:10px;font-weight:900;margin-bottom:8px}
.form{display:grid;grid-template-columns:1fr auto;gap:8px}
.instructionBox{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 9px;border-left:4px solid var(--acento);
  background:var(--panel2);font-size:11px;line-height:1.35;color:var(--muted)
}
.instructionBox b{color:var(--tinta)}
.instructionIcon{font-size:17px;font-weight:900;color:var(--tinta2)}
.inputFrame{
  border:2px solid var(--tinta);display:flex;align-items:center;background:var(--panel);min-height:54px;overflow:hidden
}
.fixedPrefix{
  align-self:stretch;display:flex;align-items:center;
  padding:0 8px 0 11px;
  background:var(--acento);color:var(--tinta);
  border-right:2px solid var(--tinta);
  font-size:24px;font-weight:900;letter-spacing:0;text-transform:lowercase;
  flex:0 0 auto
}
#suffix{
  border:0;background:transparent;outline:0;min-width:0;width:100%;
  padding:0 12px 0 6px;
  font-size:24px;font-weight:700;color:var(--tinta);letter-spacing:0
}
#suffix::placeholder{color:color-mix(in srgb,var(--muted) 46%,transparent)}
.feedback{min-height:18px;font-size:11px;margin-top:7px;color:var(--muted)}
.feedback.ok{color:var(--tinta2);font-weight:900}
.feedback.bad{color:var(--peligro);font-weight:900}
.shake{animation:shake .22s linear}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

.resultTitle{font:1000 clamp(48px,9vw,88px)/.88 Arial,sans-serif;letter-spacing:-.065em;margin:12px 0}
.bigScore{font-size:clamp(42px,9vw,80px);font-weight:900}
.resultGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.resultGrid div{border:2px solid var(--tinta);background:var(--panel);padding:12px;text-align:center}
.resultGrid b{display:block;font-size:25px}
.resultGrid span{font-size:9px;font-weight:900;letter-spacing:.08em}

.dailyRank{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  border:2px solid var(--tinta);background:var(--acento);padding:10px 12px;margin:16px 0 4px
}
.dailyRank span{font-size:10px;font-weight:900;letter-spacing:.1em}
.dailyRank strong{font-size:24px;line-height:1;text-align:center}
.dailyRank small{font-size:10px;font-weight:900;color:var(--tinta)}

.resultTreeWrap{
  border:2px solid var(--tinta);background:var(--panel);margin:20px 0 14px;overflow:hidden
}
.resultTreeHead{
  display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 11px;
  border-bottom:2px solid var(--tinta);font-size:10px
}
.resultTreeHead span{color:var(--muted)}
#resultTree{display:block;width:100%;height:auto;max-height:360px;min-height:230px;background:color-mix(in srgb,var(--panel) 92%,transparent)}
.foundBox{border-top:2px solid var(--tinta);padding-top:14px}
.foundBox h3{font-size:11px;letter-spacing:.1em;margin:0 0 10px}
.foundList{display:flex;flex-wrap:wrap;gap:7px;max-height:190px;overflow:auto;padding-right:4px}
.chip{border:1.5px solid var(--tinta);background:var(--panel2);padding:5px 8px;font-size:11px;font-weight:700}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}


/* Clasificación anónima */
#clasificacion{align-items:center;justify-content:center}
.rankingCard{max-width:760px}
.rankingTitle{
  font:1000 clamp(46px,8vw,82px)/.9 Arial,sans-serif;
  letter-spacing:-.065em;margin:12px 0 18px
}
.rankingHero{
  border:2px solid var(--tinta);background:var(--acento);padding:18px 20px;
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  box-shadow:var(--sombra)
}
.rankingHero strong{font:1000 clamp(58px,12vw,110px)/.8 Arial,sans-serif;letter-spacing:-.06em}
.rankingHero span{font-size:12px;font-weight:900;text-align:right}
.rankingStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.rankingStats div{border:2px solid var(--tinta);background:var(--panel);padding:12px;text-align:center}
.rankingStats b{display:block;font-size:25px}
.rankingStats span{font-size:9px;font-weight:900;letter-spacing:.08em}
.rankingNote{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 14px}
.rankingTrack{
  height:18px;border:2px solid var(--tinta);background:var(--panel2);
  position:relative;margin:8px 0 22px;overflow:visible
}
.rankingTrackFill{height:100%;width:0;background:var(--acento)}
.rankingTrackMarker{
  position:absolute;top:50%;left:0;width:12px;height:28px;transform:translate(-50%,-50%);
  border:2px solid var(--tinta);background:var(--panel)
}

@media(max-width:720px){
  .shell{padding:9px}
  .top{padding-bottom:9px;margin-bottom:8px}
  .gameHead{grid-template-columns:1fr}
  .metrics{display:grid;grid-template-columns:repeat(3,1fr)}
  .metric{min-width:0;height:52px;padding:4px 6px}.metric b{font-size:19px}
  .titleBlock{justify-content:space-between}
  .boardWrap{min-height:52dvh}
  .rules{grid-template-columns:1fr}
  .form{grid-template-columns:1fr 54px}
  .form .btn{font-size:0;padding:0}.form .btn:after{content:"↵";font-size:22px}
  .resultGrid{grid-template-columns:1fr 1fr}.resultGrid div:last-child{grid-column:1/-1}
}
@media(max-height:720px) and (orientation:landscape){
  .top{display:none}.shell{padding:7px}.boardWrap{min-height:58vh}
  .gameTitle{font-size:34px}.prefixBox strong{font-size:22px}
}

/* Producción / i18n */
.controlGroup{display:flex;align-items:center;gap:8px}
.srOnly{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}

/* Selector de idioma desplegable con banderas SVG reales */
.languagePicker{position:relative}
.languageToggle{
  border:2px solid var(--tinta);background:var(--panel);color:var(--tinta);
  min-height:30px;padding:3px 6px 3px 5px;display:flex;align-items:center;gap:5px;
  font:900 10px "Courier New",monospace;text-transform:uppercase;
  box-shadow:2px 2px 0 color-mix(in srgb,var(--tinta) 22%,transparent);
  cursor:pointer
}
.languageToggle:hover{background:var(--panel2)}
.languageToggle:disabled{opacity:.55;cursor:not-allowed}
.selectedLangCode{min-width:16px;text-align:center}
.pickerChevron{font-size:10px;line-height:1}
.languageMenu{
  position:absolute;right:0;top:36px;z-index:60;width:92px;padding:5px;
  border:2px solid var(--tinta);background:var(--panel);
  box-shadow:4px 4px 0 color-mix(in srgb,var(--tinta) 22%,transparent)
}
.languageChoice{
  width:100%;border:0;background:transparent;color:var(--tinta);
  display:grid;grid-template-columns:20px 1fr;align-items:center;gap:6px;
  padding:6px 5px;cursor:pointer;text-align:left;
  font:700 10px/1.2 "Courier New",monospace
}
.languageChoice:hover,.languageChoice.active{background:var(--panel2)}
.languageChoice b{font-size:10px}
.flagCircle{
  width:16px;height:16px;border-radius:50%;border:1px solid var(--tinta);
  display:block;overflow:hidden;background-size:cover;background-position:center;
  box-shadow:none
}
.flag-es{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Cpath%20fill%3D%22%23AA151B%22%20d%3D%22M0%200h3v2H0z%22%2F%3E%3Cpath%20fill%3D%22%23F1BF00%22%20d%3D%22M0%20.5h3v1H0z%22%2F%3E%3C%2Fsvg%3E')}
.flag-en{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%0A%20%20%20%20%20%20%3Cpath%20fill%3D%22%23012169%22%20d%3D%22M0%200h60v30H0z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%20d%3D%22M0%200l60%2030M60%200L0%2030%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23C8102E%22%20stroke-width%3D%223.5%22%20d%3D%22M0%200l60%2030M60%200L0%2030%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%20d%3D%22M30%200v30M0%2015h60%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23C8102E%22%20stroke-width%3D%226%22%20d%3D%22M30%200v30M0%2015h60%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E')}
.flag-fr{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Cpath%20fill%3D%22%23002395%22%20d%3D%22M0%200h1v2H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M1%200h1v2H1z%22%2F%3E%3Cpath%20fill%3D%22%23ED2939%22%20d%3D%22M2%200h1v2H2z%22%2F%3E%3C%2Fsvg%3E')}
.flag-de{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Cpath%20d%3D%22M0%200h3v.667H0z%22%2F%3E%3Cpath%20fill%3D%22%23DD0000%22%20d%3D%22M0%20.667h3v.666H0z%22%2F%3E%3Cpath%20fill%3D%22%23FFCE00%22%20d%3D%22M0%201.333h3V2H0z%22%2F%3E%3C%2Fsvg%3E')}
.flag-it{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Cpath%20fill%3D%22%23009246%22%20d%3D%22M0%200h1v2H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M1%200h1v2H1z%22%2F%3E%3Cpath%20fill%3D%22%23CE2B37%22%20d%3D%22M2%200h1v2H2z%22%2F%3E%3C%2Fsvg%3E')}
.flag-pt{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%203%22%3E%3Cpath%20fill%3D%22%23046A38%22%20d%3D%22M0%200h2v3H0z%22%2F%3E%3Cpath%20fill%3D%22%23DA291C%22%20d%3D%22M2%200h3v3H2z%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%221.5%22%20r%3D%22.55%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%222%22%20cy%3D%221.5%22%20r%3D%22.36%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E')}
.flag-nl{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Cpath%20fill%3D%22%23AE1C28%22%20d%3D%22M0%200h3v.667H0z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%20.667h3v.666H0z%22%2F%3E%3Cpath%20fill%3D%22%2321468B%22%20d%3D%22M0%201.333h3V2H0z%22%2F%3E%3C%2Fsvg%3E')}
@media(max-width:540px){
  .topRight{gap:6px}
  .languageToggle{padding-right:5px}
}
.languageFlags{max-width:218px;gap:5px}
  .flagCircle{width:16px;height:16px;font-size:14px}
  .langCode{font-size:8px}
}

@media(max-width:520px){
  .dailyRank{grid-template-columns:1fr auto;gap:5px 10px}
  .dailyRank strong{text-align:right}
  .dailyRank small{grid-column:1/-1}
}

@media(max-width:520px){
  .wordmarkHero{white-space:normal;flex-wrap:wrap;gap:0 5px}
  .wordmarkExpansion{font-size:clamp(25px,10vw,42px)}
  .rankingStats{grid-template-columns:repeat(3,1fr)}
  .rankingStats div{padding:9px 5px}
  .rankingStats b{font-size:20px}
}

@media(max-width:640px){
  .top{align-items:flex-start}
  .topRight{justify-content:flex-end}
}