:root{
  --bg:#031126;--bg-2:#061a36;--surface:rgba(7,29,58,.88);--surface-2:rgba(10,39,76,.84);--surface-3:#0b2b54;
  --text:#f6fbff;--muted:#9eb6d7;--line:rgba(65,187,255,.28);--primary:#25c7ff;--primary-2:#0b7fda;--yellow:#ffd21a;--yellow-2:#ff9f10;
  --success:#39e86a;--warning:#ffd21a;--danger:#ff4b58;--danger-2:#b51f4a;--radius:24px;--radius-sm:16px;
  --shadow:0 18px 60px rgba(0,0,0,.38);--shadow-soft:0 10px 30px rgba(0,0,0,.22);--header-h:72px;--font:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--digits:4;
}
[data-theme="claro"]{--bg:#eaf3fb;--bg-2:#dcecf9;--surface:rgba(255,255,255,.92);--surface-2:#f6fbff;--surface-3:#e5f2ff;--text:#14243a;--muted:#5d7189;--line:rgba(20,139,212,.25);--primary:#138bd2;--primary-2:#0967a8;--yellow:#ffca0a;--yellow-2:#f19800;--shadow:0 18px 45px rgba(39,84,122,.15);--shadow-soft:0 8px 24px rgba(39,84,122,.10)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font);color:var(--text);background:radial-gradient(circle at 15% 20%,rgba(30,163,255,.13),transparent 28%),radial-gradient(circle at 85% 80%,rgba(255,205,22,.09),transparent 24%),linear-gradient(160deg,var(--bg),var(--bg-2));overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle at 15% 18%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 78% 15%,#4dd6ff 0 1px,transparent 1.5px),radial-gradient(circle at 45% 72%,#ffd21a 0 1px,transparent 1.5px),radial-gradient(circle at 88% 60%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 28% 84%,#3ad8ff 0 1px,transparent 1.4px);background-size:220px 220px,300px 300px,280px 280px,180px 180px,240px 240px;z-index:0}
.ambient{position:fixed;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0}.ambient-a{width:220px;height:220px;background:rgba(0,178,255,.15);left:-90px;top:25%}.ambient-b{width:260px;height:260px;background:rgba(0,88,255,.14);right:-100px;top:45%}.ambient-c{width:180px;height:180px;background:rgba(255,201,0,.10);left:40%;bottom:-90px}
button,input,select{font:inherit}button,select{outline:none}button:focus-visible,select:focus-visible,input:focus-visible{box-shadow:0 0 0 4px rgba(37,199,255,.28)}
svg{width:1em;height:1em;display:block}
.hidden{display:none!important}
.app-header{position:sticky;top:0;height:var(--header-h);display:flex;justify-content:space-between;align-items:center;padding:10px max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-right));background:linear-gradient(180deg,rgba(2,11,27,.96),rgba(2,11,27,.82));border-bottom:1px solid rgba(78,184,255,.18);backdrop-filter:blur(16px);z-index:500}
.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(31,197,255,.38))}.brand-title{display:block;font-weight:1000;letter-spacing:.14em;font-size:.97rem;line-height:1}.brand-subtitle{display:block;color:#6edaff;font-size:.52rem;letter-spacing:.17em;margin-top:5px;font-weight:800}
.header-actions{display:flex;gap:8px}.icon-btn{width:44px;height:44px;border:1px solid rgba(75,196,255,.28);background:rgba(6,32,65,.76);color:#eafaff;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-soft);transition:.18s}.icon-btn svg{width:20px;height:20px}.icon-btn:hover{transform:translateY(-2px);border-color:#4bd3ff;box-shadow:0 0 22px rgba(23,192,255,.2)}.icon-btn.surrender{color:#fff;background:linear-gradient(135deg,#da254c,#ff5d42);border-color:rgba(255,255,255,.22)}
.app-main{position:relative;z-index:1;min-height:calc(100dvh - var(--header-h));padding:18px 14px 88px}.view{display:none;min-height:calc(100dvh - var(--header-h) - 100px)}.view.active{display:flex}
.center-layout{width:min(100%,640px);margin:auto}.card{background:linear-gradient(180deg,rgba(9,40,80,.94),rgba(4,24,52,.94));border:1px solid rgba(65,194,255,.25);box-shadow:var(--shadow);border-radius:30px;padding:24px}.setup-card{display:flex;flex-direction:column;gap:18px;overflow:hidden;position:relative}.setup-card::after{content:"";position:absolute;inset:auto -90px -160px auto;width:320px;height:320px;border-radius:50%;background:rgba(0,180,255,.08);filter:blur(20px);pointer-events:none}
.hero{display:flex;align-items:center;gap:16px;position:relative}.hero-art-wrap{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(50,210,255,.18),rgba(6,34,67,.45));border:1px solid rgba(76,207,255,.2);box-shadow:inset 0 0 20px rgba(23,171,255,.12)}.hero-art{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(26,184,255,.20))}.eyebrow{font-size:.62rem;letter-spacing:.15em;color:#70dbff;font-weight:900;margin-bottom:5px}.hero h2{font-size:clamp(1.55rem,4vw,2.15rem);line-height:1.06;font-weight:1000;margin-bottom:7px}.hero p:last-child{color:var(--muted);line-height:1.42;font-size:.94rem}
.form-group{display:flex;flex-direction:column;gap:9px}.section-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-label{font-weight:900;font-size:.82rem;letter-spacing:.04em}.mini-badge{font-size:.68rem;color:#8ee6ff;background:rgba(37,199,255,.09);border:1px solid rgba(37,199,255,.2);padding:4px 8px;border-radius:999px;font-weight:800}
.length-selector{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.length-opt,.seg-btn{border:1px solid rgba(60,181,255,.2);background:rgba(12,51,96,.8);color:var(--text);border-radius:13px;min-height:46px;font-weight:900;cursor:pointer;transition:.18s}.length-opt:hover,.seg-btn:hover{border-color:rgba(65,210,255,.6);transform:translateY(-1px)}.length-opt[aria-pressed="true"]{background:linear-gradient(180deg,#16a7ef,#0864c0);border-color:#6be0ff;color:#fff;box-shadow:0 0 20px rgba(28,179,255,.24)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.seg-btn{display:flex;align-items:center;text-align:left;gap:11px;padding:12px;min-height:82px}.seg-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(28,160,243,.12);color:#58d5ff;font-size:1.4rem;flex:none}.seg-icon.trophy{color:#ffd21a}.seg-icon svg{width:20px;height:20px}.seg-btn strong{display:block;margin-bottom:4px}.seg-btn small{display:block;color:var(--muted);font-size:.74rem;line-height:1.25}.seg-btn[aria-pressed="true"]{border-color:#18baff;background:linear-gradient(180deg,rgba(8,77,143,.96),rgba(5,45,91,.96));box-shadow:0 0 24px rgba(24,183,255,.13)}
.select-wrap select,.settings-panel select{width:100%;height:48px;border-radius:14px;border:1px solid rgba(66,187,255,.27);background:rgba(6,31,63,.92);color:var(--text);padding:0 14px;font-weight:800}.select-wrap select option,.settings-panel select option{background:#09213e;color:#fff}
.clue-card{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px;border-radius:18px;background:linear-gradient(180deg,rgba(14,52,96,.82),rgba(7,33,69,.82));border:1px solid rgba(68,190,255,.18)}.clue-row{display:flex;align-items:center;gap:9px}.clue-row strong{font-size:.79rem}.clue-row small{display:block;color:var(--muted);font-size:.68rem;margin-top:2px;line-height:1.25}.clue-dot{width:13px;height:13px;border-radius:50%;display:inline-block;box-shadow:0 0 12px currentColor;flex:none}.clue-dot.green{background:var(--success);color:var(--success)}.clue-dot.yellow{background:var(--yellow);color:var(--yellow)}.text-link{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;color:#69dcff;font-weight:900;cursor:pointer;padding-top:2px}.text-link svg{width:16px;height:16px}
.primary-btn,.outline-btn,.secondary-btn,.danger-btn{min-height:50px;border-radius:999px;border:0;font-weight:1000;letter-spacing:.03em;cursor:pointer;transition:.18s}.primary-btn{background:linear-gradient(180deg,#2bceff,#0b8fdf);color:#fff;box-shadow:0 10px 25px rgba(8,168,239,.24)}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(8,168,239,.29)}.primary-large{min-height:54px;background:linear-gradient(180deg,#ffe22b,#ffbf00);color:#151200;box-shadow:0 12px 26px rgba(255,200,10,.20);display:flex;justify-content:center;align-items:center;gap:9px}.primary-large svg{width:18px;height:18px}.secondary-actions{display:flex;flex-direction:column;align-items:center;gap:9px}.secondary-actions .outline-btn{width:min(100%,280px)}.outline-btn{background:rgba(4,39,78,.76);border:1px solid rgba(47,192,255,.5);color:#6ee1ff;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:7px}.outline-btn:hover{background:rgba(10,69,121,.9)}.outline-btn svg{width:18px;height:18px}.secondary-btn{width:100%;background:#0d315c;color:#dceeff;border:1px solid rgba(73,182,255,.22);margin-top:10px}.danger-btn{width:100%;background:linear-gradient(135deg,#ff4f5b,#d81f48);color:#fff}.footer{position:relative;z-index:2;text-align:center;font-size:.67rem;color:#86a7ca;padding-top:3px}.footer a{color:#71dcff;text-decoration:none;font-weight:900}.footer a:hover{text-decoration:underline}
.game-shell{max-width:760px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:10px}.game-topbar{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}.stat-chip{min-height:50px;padding:9px 11px;border:1px solid rgba(55,195,255,.21);border-radius:15px;background:linear-gradient(180deg,rgba(8,41,80,.9),rgba(4,25,52,.9));box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center;gap:7px;font-size:.75rem;color:#a9c7e5}.stat-chip svg{width:17px;height:17px;color:#4ed9ff}.stat-chip strong{color:#ffd21a}.stat-chip>span:not(.chip-label){font-size:1.05rem;font-weight:1000;color:#54dcff}.chip-label{font-size:.67rem;color:#86a7ca}.mode-chip{flex-direction:column;gap:1px}.attempts-chip{flex-direction:column;gap:1px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 12px;border-radius:14px;border:1px solid rgba(63,191,255,.16);background:rgba(4,26,53,.75);color:#90accb;font-size:.72rem}.legend-item{display:flex;align-items:center;gap:7px}.legend-item b{color:#fff}.dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}.dot.green{background:var(--success);box-shadow:0 0 12px rgba(57,232,106,.65)}.dot.yellow{background:var(--yellow);box-shadow:0 0 12px rgba(255,210,26,.55)}
.history-panel{flex:1;min-height:185px;max-height:36dvh;overflow:auto;padding:9px;border:1px solid rgba(64,194,255,.18);border-radius:19px;background:linear-gradient(180deg,rgba(6,33,67,.9),rgba(5,24,51,.92));box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:7px}.history-empty{height:100%;min-height:170px;display:grid;place-items:center;text-align:center;color:#7d9ab9;font-size:.84rem;line-height:1.5;padding:25px}.history-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;background:linear-gradient(180deg,rgba(10,52,98,.78),rgba(7,36,72,.78));border-left:3px solid #23b9ff}.guess-digits{font-size:1.05rem;font-weight:1000;letter-spacing:.22em}.feedback-boxes{display:flex;gap:5px}.feedback-box{width:31px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:.78rem;font-weight:1000}.feedback-yellow{background:var(--yellow);color:#2d2400}.feedback-green{background:var(--success);color:#031708}.input-caption{text-align:center;color:#6ca5cb;font-size:.62rem;font-weight:1000;letter-spacing:.18em}.current-input-area{display:grid;grid-template-columns:repeat(var(--digits),minmax(0,1fr));gap:8px;max-width:560px;width:100%;margin:0 auto}.digit-slot{height:62px;border-radius:16px;border:2px solid rgba(61,191,255,.6);background:linear-gradient(180deg,rgba(4,31,65,.98),rgba(5,23,47,.98));display:grid;place-items:center;font-size:1.55rem;font-weight:1000;box-shadow:inset 0 0 18px rgba(22,154,255,.08)}.digit-slot.active{border-color:#ffd21a;box-shadow:0 0 18px rgba(255,210,26,.15),inset 0 0 16px rgba(255,210,26,.05)}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border-radius:22px 22px 0 0;border:1px solid rgba(67,198,255,.16);background:linear-gradient(180deg,rgba(7,34,68,.97),rgba(5,22,47,.97));box-shadow:0 -8px 28px rgba(0,0,0,.25);position:sticky;bottom:0}.key{min-height:56px;border:1px solid rgba(65,194,255,.16);border-radius:14px;background:linear-gradient(180deg,#0c3d76,#08294e);color:#f7fbff;font-size:1.35rem;font-weight:1000;cursor:pointer;transition:.12s;box-shadow:inset 0 -2px 0 rgba(0,0,0,.28)}.key:hover{border-color:#38c9ff}.key:active{transform:scale(.96)}.key-back{background:linear-gradient(180deg,#53213a,#381c33);color:#ff8f9b}.key-action{background:linear-gradient(180deg,#46ee67,#0ecb4f);color:#021a08;box-shadow:0 0 20px rgba(57,232,106,.16)}.key-action svg{width:24px;height:24px;margin:auto}
.modal-overlay{position:fixed;inset:0;background:rgba(1,7,17,.76);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:15px;z-index:1000}.modal-overlay.active{display:flex}.modal-content{width:min(100%,560px);max-height:min(92dvh,820px);overflow:auto;background:linear-gradient(180deg,#08264a,#04172f);border:1px solid rgba(65,195,255,.26);border-radius:28px;box-shadow:0 28px 90px rgba(0,0,0,.46);padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.modal-head h2{font-size:1.35rem}.modal-close{width:40px;height:40px;border:1px solid rgba(81,191,255,.22);border-radius:50%;display:grid;place-items:center;background:#0b2b50;color:#dff8ff;cursor:pointer}.modal-close svg{width:19px;height:19px}
.settings-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:15px}.tab-btn{border:1px solid rgba(58,185,255,.17);background:rgba(8,43,83,.82);color:#8bb4d7;border-radius:11px;min-height:40px;font-size:.73rem;font-weight:900;cursor:pointer}.tab-btn.active{background:linear-gradient(180deg,#148ee4,#0b5fba);color:#fff;border-color:#45ceff}.settings-panel{display:none;gap:17px}.settings-panel.active{display:flex;flex-direction:column}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px;border:1px solid rgba(60,193,255,.15);background:rgba(9,43,82,.58);border-radius:17px}.setting-copy strong{display:block}.setting-copy small{display:block;color:#87a9c9;margin-top:5px;line-height:1.35;font-size:.72rem}.toggle{position:relative;width:55px;height:31px;flex:none}.toggle input{position:absolute;opacity:0;inset:0}.toggle-slider{position:absolute;inset:0;background:#17395f;border-radius:999px;border:1px solid rgba(85,199,255,.15);cursor:pointer}.toggle-slider:before{content:"";position:absolute;width:23px;height:23px;top:3px;left:3px;background:#fff;border-radius:50%;box-shadow:0 2px 7px rgba(0,0,0,.28);transition:.18s}.toggle input:checked + .toggle-slider{background:#17a4ef}.toggle input:checked + .toggle-slider:before{transform:translateX(24px)}.range-row{display:flex;justify-content:space-between;align-items:center;color:#8eafd0;font-size:.75rem;font-weight:800;margin-bottom:7px}.volume-value{color:#64dcff;font-weight:1000}.settings-range{width:100%;height:5px;accent-color:#1bb6ff}.tip-card{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border-radius:15px;background:linear-gradient(180deg,rgba(0,121,189,.14),rgba(0,52,101,.28));border:1px solid rgba(52,196,255,.18);color:#9bc1dc;font-size:.74rem;line-height:1.45}.tip-card svg{width:18px;height:18px;color:#ffd21a;flex:none}.help-box{padding:14px;border-radius:18px;background:rgba(8,41,80,.58);border:1px solid rgba(64,191,255,.15);color:#96b2cf;line-height:1.5;font-size:.8rem}.help-title{display:flex;align-items:center;gap:8px;color:#fff;font-size:1rem;font-weight:1000;margin-bottom:10px}.help-title svg{width:19px;height:19px;color:#5ad8ff}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.help-grid>div{display:flex;align-items:center;gap:8px;padding:9px;background:rgba(10,50,92,.7);border-radius:13px}.help-number{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#126fb9;color:#fff;font-weight:1000;flex:none}.help-legend{display:grid;gap:8px;padding-top:5px;border-top:1px solid rgba(82,185,235,.13)}.help-legend>div{display:flex;align-items:center;gap:8px}.result-modal{text-align:center}.result-image{width:min(100%,560px);min-width:50%;max-width:100%;height:auto;display:block;margin:0 auto 14px;border-radius:22px;object-fit:contain;border:1px solid rgba(91,202,255,.2);box-shadow:0 16px 40px rgba(0,0,0,.28)}.result-icon{width:68px;height:68px;border-radius:21px;margin:0 auto 10px;display:grid;place-items:center}.result-icon svg{width:34px;height:34px}.success-icon{background:linear-gradient(180deg,rgba(53,237,103,.20),rgba(53,237,103,.07));border:1px solid rgba(58,236,107,.36);color:#59f07b;box-shadow:0 0 28px rgba(58,236,107,.10)}.danger-icon{background:linear-gradient(180deg,rgba(255,78,95,.20),rgba(255,78,95,.07));border:1px solid rgba(255,78,95,.34);color:#ff6876}.result-title{font-size:clamp(1.65rem,5vw,2.2rem);font-weight:1000;margin-bottom:7px}.result-title.success{color:#55ec7a}.result-title.danger{color:#ff6170}.result-copy{color:#9bb7d5;line-height:1.5;font-size:.88rem;margin-bottom:14px}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}.result-stat{padding:12px;border-radius:15px;background:rgba(8,39,76,.72);border:1px solid rgba(61,191,255,.13)}.result-stat span{display:block;color:#7da4c8;font-size:.68rem}.result-stat b{display:block;color:#fff;font-size:1.17rem;margin-top:3px}.result-code-card{padding:11px 12px;background:rgba(8,35,70,.72);border:1px solid rgba(65,188,255,.14);border-radius:15px;color:#8eafd0;font-size:.72rem;margin-bottom:13px}.result-code-card strong{display:block;color:#ffd21a;font-size:1.32rem;letter-spacing:.26em;margin-top:4px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}.stats-card{padding:12px;border-radius:15px;background:rgba(8,40,79,.7);border:1px solid rgba(60,191,255,.13)}.stats-card.wide{grid-column:1/-1}.stats-card span{display:block;color:#7da4c8;font-size:.65rem}.stats-card b{display:block;font-size:1.15rem;color:#fff;margin-top:3px}.history-list{display:flex;flex-direction:column;gap:7px;max-height:42dvh;overflow:auto;margin-bottom:12px}.history-list .history-row{grid-template-columns:1fr auto}.history-list small{display:block;color:#7fa6c8;font-size:.67rem;margin-top:2px}.history-modal .primary-btn{width:100%}
.music-fav{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;border:1px solid rgba(80,205,255,.4);background:linear-gradient(180deg,#082b55,#061a36);color:#9edfff;display:grid;place-items:center;font-size:1.3rem;z-index:1200;cursor:pointer;box-shadow:0 0 28px rgba(29,193,255,.13),0 10px 25px rgba(0,0,0,.3);transition:.18s}.music-fav svg{width:23px;height:23px}.music-fav.on{background:linear-gradient(180deg,#20b9ff,#0c7bd0);color:#fff;box-shadow:0 0 28px rgba(28,196,255,.28),0 10px 25px rgba(0,0,0,.3)}.music-fav:hover{transform:translateY(-2px) scale(1.02)}
.update-banner{position:fixed;left:50%;bottom:max(82px,calc(env(safe-area-inset-bottom) + 82px));transform:translateX(-50%);width:min(92vw,520px);display:none;align-items:center;gap:12px;background:linear-gradient(180deg,#0a2c55,#061a34);color:#fff;border:1px solid rgba(77,202,255,.3);border-radius:18px;padding:13px 15px;box-shadow:0 20px 50px rgba(0,0,0,.3);z-index:1400}.update-banner.active{display:flex}.update-banner svg{width:24px;height:24px;color:#5edaff;flex:none}.update-banner strong{display:block;font-size:.8rem}.update-banner p{margin-top:2px;color:#90afca;font-size:.69rem;line-height:1.35}
.toast{position:fixed;left:50%;top:calc(var(--header-h) + 10px);transform:translateX(-50%) translateY(-12px);background:#031122;color:#fff;padding:10px 14px;border:1px solid rgba(66,197,255,.28);border-radius:999px;font-weight:900;font-size:.77rem;opacity:0;pointer-events:none;transition:.25s;z-index:1500;box-shadow:0 10px 25px rgba(0,0,0,.25)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.compact-modal{text-align:center;max-width:390px}.compact-modal .result-icon{margin-bottom:12px}
@media (max-width:640px){.card{padding:19px}.hero{align-items:flex-start}.hero-art-wrap{width:74px;height:74px;border-radius:20px}.hero-art{width:68px;height:68px}.hero h2{font-size:1.42rem}.clue-card{grid-template-columns:1fr}.secondary-actions{grid-template-columns:1fr}.game-topbar{grid-template-columns:1fr 1fr}.attempts-chip{grid-column:1/-1}.legend{grid-template-columns:1fr}.history-panel{max-height:31dvh}.numpad{padding:9px}.key{min-height:54px}.settings-tabs{grid-template-columns:repeat(2,1fr)}.modal-content{padding:18px}.result-image{min-width:50%}}
@media (max-width:410px){.brand-subtitle{display:none}.brand-icon{width:39px;height:39px}.icon-btn{width:40px;height:40px}.length-selector{gap:4px}.length-opt{min-height:41px;font-size:.86rem}.mode-grid{grid-template-columns:1fr}.history-row{grid-template-columns:1fr}.feedback-boxes{justify-content:flex-start}.current-input-area{gap:6px}.digit-slot{height:56px;font-size:1.32rem}}
@media (min-width:800px){.app-main{padding-left:22px;padding-right:22px}.game-shell{max-width:780px}.numpad{max-width:520px;width:100%;margin-inline:auto}.setup-card{padding:28px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Ajustes del tema claro: los fondos de componentes también pasan a una paleta luminosa. */
[data-theme="claro"] .app-header{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,250,255,.94));border-bottom-color:rgba(20,139,212,.18)}
[data-theme="claro"] .header-actions .icon-btn{background:#eef7ff;color:#14537a;border-color:rgba(20,139,212,.24)}
[data-theme="claro"] .card{background:linear-gradient(180deg,#fff,#f3f9ff);border-color:rgba(20,139,212,.2)}
[data-theme="claro"] .hero-art-wrap{background:radial-gradient(circle at 50% 35%,rgba(50,210,255,.14),rgba(226,242,252,.78));border-color:rgba(20,139,212,.18)}
[data-theme="claro"] .length-opt,[data-theme="claro"] .seg-btn{background:#eaf5fd;border-color:rgba(20,139,212,.18);color:var(--text)}
[data-theme="claro"] .seg-btn[aria-pressed="true"]{background:linear-gradient(180deg,#e3f3ff,#d5ecfc);border-color:#18a9ee;box-shadow:0 0 20px rgba(24,183,255,.12)}
[data-theme="claro"] .select-wrap select,[data-theme="claro"] .settings-panel select{background:#fff;color:var(--text);border-color:rgba(20,139,212,.28)}
[data-theme="claro"] .select-wrap select option,[data-theme="claro"] .settings-panel select option{background:#fff;color:#14243a}
[data-theme="claro"] .clue-card{background:linear-gradient(180deg,#f4faff,#eaf4fb);border-color:rgba(20,139,212,.16)}
[data-theme="claro"] .outline-btn{background:#f4fbff;color:#0878bd;border-color:rgba(20,139,212,.35)}
[data-theme="claro"] .stat-chip{background:linear-gradient(180deg,#fff,#eef7fd);border-color:rgba(20,139,212,.2);color:#496681}
[data-theme="claro"] .stat-chip>span:not(.chip-label){color:#087fca}
[data-theme="claro"] .history-panel{background:linear-gradient(180deg,#fff,#f1f8fd);border-color:rgba(20,139,212,.18)}
[data-theme="claro"] .history-row{background:linear-gradient(180deg,#f8fcff,#eaf5fb);border-left-color:#20a9eb}
[data-theme="claro"] .guess-digits{color:#14243a}
[data-theme="claro"] .current-input-area .digit-slot{background:linear-gradient(180deg,#fff,#f3f9fd);color:#14243a;border-color:rgba(20,139,212,.45)}
[data-theme="claro"] .numpad{background:linear-gradient(180deg,#fff,#edf6fc);box-shadow:0 -8px 24px rgba(39,84,122,.10)}
[data-theme="claro"] .key{background:#e6f2fa;color:#14243a;border:1px solid rgba(20,139,212,.13)}
[data-theme="claro"] .key-back{background:#ffe7e7;color:#b22b38}
[data-theme="claro"] .modal-content{background:linear-gradient(180deg,#fff,#f3f9ff);border-color:rgba(20,139,212,.22)}
[data-theme="claro"] .modal-close{background:#edf7fd;color:#14537a;border-color:rgba(20,139,212,.2)}
[data-theme="claro"] .tab-btn{background:#eaf5fd;color:#54718b;border-color:rgba(20,139,212,.16)}
[data-theme="claro"] .tab-btn.active{background:linear-gradient(180deg,#1498e5,#0c76c0);color:#fff}
[data-theme="claro"] .setting-row{background:#f4faff;border-color:rgba(20,139,212,.16)}
[data-theme="claro"] .toggle-slider{background:#d6e8f4;border-color:rgba(20,139,212,.14)}
[data-theme="claro"] .help-box{background:#f3f9fd;border-color:rgba(20,139,212,.16);color:#526e87}
[data-theme="claro"] .help-grid>div{background:#eaf5fb}
[data-theme="claro"] .result-stat,[data-theme="claro"] .result-code-card,[data-theme="claro"] .stats-card{background:#f1f8fd;border-color:rgba(20,139,212,.14)}
[data-theme="claro"] .result-stat b,[data-theme="claro"] .stats-card b{color:#14243a}
[data-theme="claro"] .result-copy,[data-theme="claro"] .help-title{color:#3b5871}
[data-theme="claro"] .music-fav{background:linear-gradient(180deg,#eef9ff,#d9effb);color:#0a79b7;border-color:rgba(20,139,212,.25);box-shadow:0 8px 20px rgba(39,84,122,.14)}
[data-theme="claro"] .update-banner{background:linear-gradient(180deg,#fff,#eef7fc);color:#14243a;border-color:rgba(20,139,212,.24);box-shadow:0 20px 50px rgba(39,84,122,.16)}
[data-theme="claro"] .update-banner p{color:#5d7189}
[data-theme="claro"] .toast{background:#fff;color:#14243a;border-color:rgba(20,139,212,.24);box-shadow:0 10px 25px rgba(39,84,122,.16)}
[data-theme="claro"] body::before{opacity:.12}
.result-modal .primary-btn,.compact-modal .primary-btn,.compact-modal .danger-btn,.compact-modal .secondary-btn{width:100%}
.result-secret{font-size:clamp(2.4rem,11vw,4.1rem)!important;line-height:1.1;letter-spacing:.28em!important;font-weight:1000!important;padding:16px 10px!important}
@media (max-width:640px){.result-secret{font-size:clamp(2.2rem,16vw,3.3rem)!important}}
.help-section{margin:14px 0;padding:12px 13px;border-radius:15px;background:rgba(255,210,26,.08);border:1px solid rgba(255,210,26,.18);color:var(--muted);line-height:1.45}.help-section strong{color:var(--text)}.help-section p{margin-top:5px}
[data-theme="claro"] .help-section{background:#fff9df;border-color:rgba(198,151,0,.18);color:#5d6546}