:root{
  --bg:#07162f;--bg2:#0d2142;--panel:#0d203d;--panel2:#11294d;--ink:#f7fbff;--muted:#9db0c9;
  --cyan:#2fd8ff;--teal:#26d6c8;--gold:#ffc75a;--gold2:#f39c2d;--coral:#ff6d77;--violet:#8c72ff;--green:#51df9d;
  --line:rgba(117,173,233,.22);--shadow:0 26px 80px rgba(1,8,22,.38);--radius-xl:30px;--radius-lg:22px;--radius-md:16px;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);overscroll-behavior:none;overscroll-behavior-y:none}body{min-height:100dvh;overflow-x:hidden}button{font:inherit;touch-action:manipulation}button:focus-visible,[tabindex]:focus-visible{outline:4px solid rgba(47,216,255,.3);outline-offset:3px}.is-hidden{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{min-height:100dvh;position:relative;overflow:hidden;background:
 radial-gradient(circle at 12% 8%,rgba(47,216,255,.12),transparent 24rem),
 radial-gradient(circle at 90% 78%,rgba(140,114,255,.14),transparent 26rem),
 linear-gradient(155deg,#061126,#0b1c39 52%,#07162f)}
.app-shell::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 78%)}
.screen{min-height:100dvh}.splash-screen{display:grid;place-items:center;background:#050b18;overflow:hidden}.splash-picture{width:100%;height:100dvh}.splash-art{width:100%;height:100%;object-fit:contain;display:block}
.topbar{height:74px;padding:calc(10px + var(--safe-top)) clamp(12px,2.4vw,30px) 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:10}.setup-topbar{max-width:640px;margin:auto;width:100%}.brand-logo{width:136px;height:auto;display:block}.top-actions{display:flex;gap:8px}.icon-btn{width:46px;height:46px;border-radius:15px;border:1px solid rgba(120,174,235,.22);background:rgba(9,25,51,.78);color:#fff;display:grid;place-items:center;font-weight:900;font-size:19px;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.18);transition:.16s ease}.icon-btn:hover{transform:translateY(-1px);border-color:rgba(47,216,255,.55);background:#0f2c53}
.setup-screen{padding-bottom:calc(28px + var(--safe-bottom))}.setup-main{max-width:640px;margin:18px auto 0;padding:0 clamp(14px,3vw,34px);display:flex;justify-content:center;align-items:stretch}.setup-visual{display:none!important}.setup-card{width:100%;max-width:640px;min-height:0;border-radius:32px;border:1px solid rgba(116,173,235,.2);box-shadow:var(--shadow);overflow:hidden;position:relative}
.temple-stage{width:100%;position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:10px;padding:0 2% 52px;border-bottom:22px solid #8b5a34;box-shadow:0 16px 0 #5f3822,0 28px 45px rgba(0,0,0,.35)}.demo-peg{height:310px;position:relative;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start}.demo-peg>i{position:absolute;bottom:0;width:15px;height:270px;border-radius:8px;background:linear-gradient(90deg,#b9782f,#ffd27a 48%,#8a4c1a);box-shadow:0 0 18px rgba(255,189,76,.18)}.demo-peg::after{content:"";position:absolute;bottom:-12px;width:86%;height:24px;border-radius:14px;background:linear-gradient(#c37b39,#7b4626);box-shadow:0 6px 14px rgba(0,0,0,.25)}.demo-peg.goal>i{background:linear-gradient(90deg,#8f6820,#ffe793 50%,#b47218);box-shadow:0 0 24px rgba(255,217,91,.45)}.goal-ring{position:absolute;bottom:30px;width:110px;height:36px;border:3px solid rgba(255,222,103,.6);border-radius:50%;box-shadow:0 0 30px rgba(255,215,79,.25)}
.demo-disk{height:30px;margin-bottom:5px;border-radius:16px;position:relative;z-index:2;box-shadow:0 5px 12px rgba(0,0,0,.28),inset 0 2px rgba(255,255,255,.28),inset 0 -3px rgba(0,0,0,.16)}.d5{width:88%;background:linear-gradient(180deg,#ff7d79,#d94e67)}.d4{width:75%;background:linear-gradient(180deg,#ffca5d,#e68b27)}.d3{width:62%;background:linear-gradient(180deg,#5ce1ce,#20aa9d)}.d2{width:49%;background:linear-gradient(180deg,#78b8ff,#3a7cd8)}.d1{width:36%;background:linear-gradient(180deg,#a68cff,#7057d8)}.visual-caption{position:absolute;left:40px;top:42px;z-index:3;margin:0;color:#cfe8ff;font-size:18px;line-height:1.45}.visual-caption strong{font-size:28px;color:#fff}
.setup-card{background:linear-gradient(180deg,rgba(16,39,74,.98),rgba(8,23,48,.98));padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}.eyebrow{margin:0 0 8px;color:#74e9ff;font-weight:900;font-size:11px;letter-spacing:.15em;text-transform:uppercase}.setup-card h1{margin:0;font-size:clamp(40px,5vw,64px);line-height:.98;letter-spacing:-.045em;background:linear-gradient(180deg,#fff3a8,#ffc857 45%,#f5a12a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 rgba(80,43,8,.28))}.subtitle{color:#c3d1e2;font-size:clamp(15px,1.5vw,18px);line-height:1.55;margin:18px 0 24px;max-width:570px}.choice-group{border:0;padding:0;margin:0 0 17px}.choice-group legend{font-size:12px;font-weight:900;margin-bottom:8px;color:#f4f8ff}.segmented{display:grid;gap:10px}.segmented.two{grid-template-columns:1fr 1fr}.segment,.disk-choice{border:1px solid rgba(112,173,234,.22);background:#0e2a4d;color:#eef8ff;border-radius:15px;min-height:60px;padding:10px 12px;cursor:pointer;transition:.16s ease}.segment{display:grid;gap:3px;text-align:left}.segment b{font-size:14px}.segment small,.disk-choice small{color:#8daac0;font-size:10px}.segment:hover,.disk-choice:hover{border-color:rgba(47,216,255,.5);transform:translateY(-1px)}.segment.is-selected,.disk-choice.is-selected{background:linear-gradient(180deg,#16426b,#103255);border-color:#36d9ff;box-shadow:inset 0 0 0 1px rgba(54,217,255,.28),0 0 22px rgba(54,217,255,.12)}.disk-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.disk-choice{text-align:center;display:grid;gap:1px;align-content:center}.disk-choice b{font-size:21px}.journey-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.journey-level{min-height:70px;border-radius:16px;border:1px solid rgba(112,173,234,.2);background:#0e2a4d;color:#fff;display:grid;place-items:center;padding:8px;cursor:pointer;position:relative}.journey-level b{font-size:18px}.journey-level small{font-size:9px;color:#8daac0}.journey-level .level-stars{font-size:10px;letter-spacing:1px;color:#ffd465}.journey-level.is-selected{border-color:#36d9ff;box-shadow:0 0 20px rgba(54,217,255,.12)}.journey-level.locked{opacity:.48;cursor:not-allowed}.journey-level.locked::after{content:"🔒";position:absolute;right:6px;top:5px;font-size:11px}.setup-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:4px}.primary-btn,.secondary-btn,.ghost-btn{border-radius:16px;min-height:54px;padding:0 20px;font-weight:900;cursor:pointer;transition:.16s ease}.primary-btn{border:0;background:linear-gradient(135deg,#ffdd6b,#ffab35 60%,#ff8643);color:#241606;box-shadow:0 12px 28px rgba(255,170,48,.22)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,170,48,.3)}.secondary-btn{border:1px solid rgba(112,173,234,.24);background:#102f54;color:#dceeff}.secondary-btn:hover,.ghost-btn:hover{border-color:rgba(47,216,255,.5)}.ghost-btn{border:1px solid rgba(112,173,234,.18);background:transparent;color:#a8bed3}.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px;padding-top:17px;border-top:1px solid rgba(118,170,222,.15)}.stats-strip div{display:grid;gap:1px;text-align:center;justify-items:center}.stats-strip strong{font-size:21px}.stats-strip span{font-size:9px;color:#8fa5bc}
.game-topbar{position:sticky;top:0;background:rgba(5,18,39,.75);border-bottom:1px solid rgba(118,170,222,.12);backdrop-filter:blur(12px)}.game-brand{display:flex;align-items:center;gap:10px;min-width:0}.game-brand img{width:62px}.game-brand>div{display:grid;gap:2px}.game-brand strong{font-size:16px}.game-brand small{font-size:10px;color:#77e3fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}.game-main{max-width:1440px;margin:16px auto 0;padding:0 clamp(10px,2vw,26px) calc(16px + var(--safe-bottom));display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:16px}.play-column{min-width:0}.hud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:9px;max-width:360px}.hud-card{min-height:64px;border-radius:17px;border:1px solid rgba(105,170,229,.18);background:linear-gradient(180deg,rgba(13,42,76,.96),rgba(8,29,56,.96));display:grid;place-items:center;padding:8px;box-shadow:0 10px 24px rgba(0,0,0,.12)}.hud-card span{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#87a4bc;font-weight:800}.hud-card strong{font-size:24px}.status-pill{height:48px;border-radius:15px;margin-bottom:9px;border:1px solid rgba(47,216,255,.2);background:rgba(8,34,61,.9);display:flex;align-items:center;justify-content:center;gap:9px;color:#dff8ff}.status-orb{width:10px;height:10px;border-radius:50%;background:#35dcff;box-shadow:0 0 14px rgba(53,220,255,.65)}.status-pill strong{font-size:13px}.board-shell{position:relative;min-height:560px;border-radius:30px;overflow:hidden;border:1px solid rgba(126,184,239,.2);background:
 radial-gradient(circle at 50% 15%,rgba(255,219,121,.12),transparent 23rem),
 linear-gradient(180deg,#112c53 0%,#102543 50%,#0a1b31 100%);box-shadow:0 24px 62px rgba(0,0,0,.28);padding:28px clamp(10px,2vw,24px) 24px}.board-shell::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.22));pointer-events:none}.temple-backdrop{position:absolute;inset:0;pointer-events:none;opacity:.5}.temple-backdrop i{position:absolute;bottom:21%;width:24%;height:48%;background:linear-gradient(155deg,transparent 49%,#17375b 50%);clip-path:polygon(0 100%,50% 0,100% 100%)}.temple-backdrop i:nth-child(1){left:-4%;height:42%}.temple-backdrop i:nth-child(2){left:37%;height:54%;opacity:.75}.temple-backdrop i:nth-child(3){right:-5%;height:46%}.hanoi-board{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(7px,1.3vw,18px);align-items:end;min-height:500px}.peg-zone{min-width:0;border-radius:22px;padding:10px 5px 0;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:.16s ease;outline:none}.peg-zone:hover{background:rgba(47,216,255,.035)}.peg-zone.selected-zone{background:transparent;box-shadow:none}.peg-zone.valid-target,.peg-zone.invalid-target{background:transparent;box-shadow:none}.peg-heading{height:42px;display:flex;align-items:center;gap:6px}.peg-heading strong{font-size:18px;color:#fff}.peg-heading small{font-size:9px;color:#87a4bb;text-transform:uppercase;letter-spacing:.05em}.peg-heading b{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#402807;background:linear-gradient(135deg,#ffe28b,#ffb83c);padding:3px 7px;border-radius:999px}.peg-visual{position:relative;width:100%;height:385px;display:flex;align-items:flex-end;justify-content:center}.peg-rod{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:94%;width:14px;border-radius:9px 9px 3px 3px;background:linear-gradient(90deg,#8d5825,#ffd27c 43%,#f4ac48 55%,#7f481c);box-shadow:0 0 16px rgba(255,194,81,.12);z-index:1}.goal-rod{background:linear-gradient(90deg,#907124,#fff0a6 48%,#bf7c19);box-shadow:0 0 22px rgba(255,222,92,.35)}.peg-glow{position:absolute;bottom:-5px;width:76%;height:18%;border-radius:50%;background:radial-gradient(ellipse,rgba(47,216,255,.12),transparent 68%);filter:blur(8px)}.goal-aura{position:absolute;bottom:2%;width:100%;height:80%;background:radial-gradient(ellipse at 50% 70%,rgba(255,214,83,.14),transparent 58%);filter:blur(3px)}.disk-stack{position:relative;z-index:4;width:100%;display:flex;flex-direction:column-reverse;align-items:center}.disk{height:clamp(25px,3vw,35px);margin-bottom:5px;border-radius:18px;position:relative;box-shadow:0 7px 14px rgba(0,0,0,.28),inset 0 2px 1px rgba(255,255,255,.28),inset 0 -4px 5px rgba(0,0,0,.14);touch-action:none;user-select:none;-webkit-user-drag:none;transition:filter .16s ease,box-shadow .16s ease,transform .16s ease}.disk::before,.disk::after{content:none;display:none}.disk::after{display:none}.disk.top-disk{cursor:grab}.disk.selected{filter:brightness(1.12);box-shadow:0 13px 24px rgba(0,0,0,.3),0 0 0 3px rgba(255,211,93,.75),0 0 24px rgba(255,211,93,.35);transform:translateY(-7px)}.disk.dragging{cursor:grabbing;filter:brightness(1.12);box-shadow:0 22px 40px rgba(0,0,0,.42),0 0 0 3px rgba(255,255,255,.5);transition:none;touch-action:none;will-change:transform}.disk-placeholder{flex-shrink:0;visibility:hidden;pointer-events:none}.peg-base{width:90%;height:24px;border-radius:14px;margin-top:4px;background:linear-gradient(180deg,#a86632,#6a3e24);box-shadow:0 9px 16px rgba(0,0,0,.26),inset 0 2px rgba(255,224,180,.18);position:relative;z-index:4}.peg-base span{position:absolute;left:10%;right:10%;top:5px;height:4px;border-radius:99px;background:rgba(255,255,255,.12)}.goal-base{background:linear-gradient(180deg,#be8d32,#765016);box-shadow:0 9px 16px rgba(0,0,0,.28),0 0 20px rgba(255,210,76,.18)}.progress-nodes{position:absolute;right:12%;bottom:14px;top:20px;z-index:2;display:flex;flex-direction:column-reverse;justify-content:space-around}.progress-node{width:9px;height:9px;border-radius:50%;background:#596b75;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);transition:.2s ease}.progress-node.lit{background:#ffdb64;box-shadow:0 0 0 3px rgba(255,219,100,.12),0 0 14px rgba(255,219,100,.7)}.hint-ribbon{position:absolute;z-index:8;left:50%;top:14px;transform:translateX(-50%);max-width:90%;border-radius:999px;background:#07182d;color:#fff;border:1px solid rgba(255,204,80,.35);padding:9px 14px;font-size:12px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.3)}.keyboard-tip{text-align:center;margin:9px 0 0;color:#7c99b0;font-size:10px}.keyboard-tip strong{color:#cde6f7}.side-panel{display:grid;gap:12px;align-content:start}.side-card{border-radius:23px;border:1px solid rgba(108,173,233,.17);background:linear-gradient(180deg,rgba(13,42,76,.96),rgba(8,28,54,.97));box-shadow:0 18px 44px rgba(0,0,0,.18)}.objective-card{padding:24px}.objective-card h2{font-size:clamp(23px,2.2vw,31px);margin:0 0 9px;line-height:1.05;letter-spacing:-.035em}.objective-card>p:not(.eyebrow){font-size:12px;line-height:1.5;color:#a9bed0;margin:0}.objective-card strong{color:#ffe082}.mini-progress{height:9px;border-radius:99px;background:#0a213d;margin-top:18px;overflow:hidden}.mini-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2bd7c9,#ffd45e);box-shadow:0 0 13px rgba(43,215,201,.35);transition:.25s ease}.objective-card>small{display:block;margin-top:7px;color:#7997ad;font-size:9px}.controls-card{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.control-btn{min-height:68px;border-radius:16px;border:1px solid rgba(109,174,234,.18);background:#0c2a4c;color:#eaf8ff;display:grid;place-items:center;gap:2px;cursor:pointer;font-size:18px;transition:.15s ease}.control-btn b{font-size:11px}.control-btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(47,216,255,.45)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.accent{background:linear-gradient(145deg,#2a496d,#15395a);border-color:rgba(255,199,90,.32)}.control-btn.accent2{background:linear-gradient(145deg,#3a2f72,#24315c);border-color:rgba(140,114,255,.38)}.best-card{padding:16px;display:flex;align-items:center;gap:12px}.best-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#ffdb65,#f0952d);color:#2c1a07;display:grid;place-items:center;font-size:24px}.best-card>div:last-child{display:grid;gap:1px}.best-card span{font-size:9px;color:#87a3b9}.best-card strong{font-size:22px}.best-card small{font-size:9px;color:#6f8ca3}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(2,9,21,.5);backdrop-filter:blur(3px)}.result-modal{background:rgba(2,9,21,.34);backdrop-filter:blur(1.5px)}.modal-card{width:min(92vw,560px);max-height:90dvh;overflow:auto;border-radius:27px;border:1px solid rgba(112,182,239,.24);background:linear-gradient(180deg,rgba(15,44,79,.99),rgba(7,25,49,.99));box-shadow:0 30px 90px rgba(0,0,0,.48);padding:29px;position:relative;animation:modalIn .22s cubic-bezier(.2,.85,.2,1)}.modal-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(113,180,233,.2);background:#0c2b50;color:#fff;font-size:24px;cursor:pointer}.tutorial-card h2,.solve-card h2,.victory-card h2{margin:0 0 12px;font-size:clamp(28px,5vw,42px);letter-spacing:-.04em}.tutorial-steps{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:12px}.tutorial-steps li{display:grid;grid-template-columns:42px 1fr;gap:11px}.tutorial-steps li>span{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#2cd7ff,#1c8cff);display:grid;place-items:center;color:#07182d;font-weight:1000}.tutorial-steps strong{font-size:13px}.tutorial-steps p{margin:4px 0 0;color:#9db4c6;font-size:12px;line-height:1.45}.tutorial-ok{width:100%}.solve-card{text-align:center;width:min(92vw,500px)}.modal-icon{width:66px;height:66px;border-radius:21px;margin:0 auto 14px;background:linear-gradient(145deg,#8f75ff,#4d58c8);display:grid;place-items:center;font-size:30px;box-shadow:0 12px 26px rgba(101,87,230,.23)}.solve-card>p:not(.eyebrow){color:#a7bccd;line-height:1.5;font-size:13px}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.victory-card{text-align:center;width:min(92vw,510px);overflow:hidden}.victory-icon{width:70px;height:70px;border-radius:23px;margin:0 auto 12px;display:grid;place-items:center;background:linear-gradient(145deg,#ffe06d,#ff9632);color:#2c1808;font-size:34px;box-shadow:0 12px 30px rgba(255,164,49,.22)}.victory-card>p:not(.eyebrow){color:#a8bdce;line-height:1.5}.stars{font-size:32px;color:#ffd960;letter-spacing:4px;margin:15px 0}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-grid div{border-radius:15px;background:#092847;padding:11px;display:grid;gap:2px}.result-grid span{font-size:9px;color:#7f9eb6;text-transform:uppercase}.result-grid strong{font-size:21px}.victory-card .modal-actions{grid-template-columns:1fr 1fr}.victory-card .ghost-btn{grid-column:1/-1}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;width:8px;height:14px;border-radius:2px;animation:confettiFall 1.55s ease-out forwards}
.peg-zone.shake{animation:shake .34s ease}.board-shell.solve-mode{box-shadow:0 24px 62px rgba(0,0,0,.28),0 0 0 2px rgba(140,114,255,.2),0 0 32px rgba(140,114,255,.12)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(520px) rotate(540deg);opacity:0}}@keyframes nodePulse{0%{transform:scale(.7)}60%{transform:scale(1.55)}100%{transform:scale(1)}}
@media(max-width:1080px){.setup-main{max-width:560px;gap:0}.setup-card{min-height:0}.game-main{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr)}.board-shell{min-height:520px}.hanoi-board{min-height:460px}.peg-visual{height:350px}.controls-card{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.topbar{height:66px;padding:calc(8px + var(--safe-top)) 11px 8px}.brand-logo{width:110px}.icon-btn{width:42px;height:42px;border-radius:13px}.setup-main{display:flex;justify-content:center;margin-top:6px;padding:0 10px 20px;max-width:100%}.setup-visual{display:none!important}.setup-card{min-height:auto;border-radius:25px;padding:27px 18px;width:100%}.setup-card h1{font-size:45px}.segmented.two{grid-template-columns:1fr}.disk-picker{grid-template-columns:repeat(5,1fr);gap:5px}.disk-choice{min-height:56px;padding:7px 3px}.journey-levels{grid-template-columns:repeat(5,1fr);gap:5px}.journey-level{min-height:63px;padding:5px}.setup-actions{grid-template-columns:1fr}.stats-strip{gap:5px}.game-brand img{width:48px}.game-brand strong{font-size:14px}.game-brand small{max-width:35vw;font-size:9px}.game-main{display:flex;flex-direction:column;margin-top:8px;padding:0 8px calc(12px + var(--safe-bottom));gap:10px}.hud{gap:5px;max-width:none;width:100%;padding-right:calc(var(--nb-gs-safe,60px) + 8px)}.hud-card{min-height:56px;border-radius:14px}.hud-card span{font-size:8px}.hud-card strong{font-size:20px}.status-pill{height:42px;border-radius:13px}.board-shell{min-height:420px;border-radius:24px;padding:14px 5px 15px}.hanoi-board{min-height:390px;gap:3px}.peg-zone{padding:7px 1px 0;border-radius:16px}.peg-heading{height:36px;gap:3px}.peg-heading strong{font-size:16px}.peg-heading small{font-size:8px}.peg-heading b{font-size:7px;padding:2px 5px}.peg-visual{height:305px}.peg-rod{width:11px}.disk{height:clamp(22px,6vw,29px);margin-bottom:4px}.peg-base{height:20px}.keyboard-tip{display:none}.side-panel{width:100%}.objective-card{padding:17px;border-radius:20px}.objective-card h2{font-size:22px}.controls-card{grid-template-columns:1fr 1fr;padding:8px}.control-btn{min-height:59px;border-radius:14px}.control-btn b{font-size:9px}.best-card{border-radius:20px}.modal{padding:11px}.modal-card{padding:25px 18px;border-radius:23px}.modal-actions,.victory-card .modal-actions{grid-template-columns:1fr}.victory-card .ghost-btn{grid-column:auto}.result-grid{gap:5px}}
@media(max-width:420px){.disk-picker,.journey-levels{grid-template-columns:repeat(5,1fr)}.disk-choice b{font-size:18px}.disk-choice small{font-size:8px}.journey-level b{font-size:15px}.hud-card strong{font-size:18px}.board-shell{min-height:385px}.hanoi-board{min-height:355px}.peg-visual{height:275px}.disk{height:22px}.peg-heading small{display:none}.controls-card{grid-template-columns:1fr 1fr}.control-btn{min-height:56px}}
@media(max-height:560px) and (orientation:landscape){.topbar{height:54px;padding:5px 9px}.game-topbar .icon-btn{width:38px;height:38px}.game-brand img{width:40px}.game-main{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:7px;margin-top:6px;padding:0 7px 7px}.hud{margin-bottom:5px;max-width:280px}.hud-card{min-height:45px}.hud-card strong{font-size:17px}.status-pill{height:34px;margin-bottom:5px}.board-shell{min-height:calc(100dvh - 150px);padding:7px 4px 9px;border-radius:18px}.hanoi-board{min-height:calc(100dvh - 170px)}.peg-visual{height:calc(100dvh - 225px);min-height:220px}.disk{height:clamp(17px,4.1vh,25px);margin-bottom:3px}.peg-heading{height:28px}.peg-base{height:16px}.keyboard-tip{display:none}.side-panel{gap:6px}.objective-card{padding:11px}.objective-card h2{font-size:18px;margin-bottom:5px}.objective-card>p:not(.eyebrow){font-size:9px;line-height:1.35}.mini-progress{margin-top:8px}.controls-card{grid-template-columns:1fr 1fr;padding:6px;gap:5px}.control-btn{min-height:46px}.best-card{padding:8px}.best-icon{width:38px;height:38px}.best-card strong{font-size:17px}.modal-card{max-height:92dvh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}


/* ===== NeuroBrincadeiras · Torre de Hanói · wood edition aligned to approved covers ===== */
.setup-screen,
.game-screen{position:relative;isolation:isolate}
.setup-screen::before,
.game-screen::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url('../assets/catalogo/torre-de-hanoi-desktop.webp?v=capa-1') center/cover no-repeat;
  filter:blur(18px) brightness(.33) saturate(.95);
  transform:scale(1.06);
  pointer-events:none;
}
.setup-screen::after,
.game-screen::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,199,94,.16),transparent 14rem),
    radial-gradient(circle at 82% 12%,rgba(90,184,255,.15),transparent 16rem),
    linear-gradient(180deg,rgba(4,17,36,.42),rgba(7,22,46,.8) 42%,rgba(7,20,39,.95));
  pointer-events:none;
}

.setup-main{max-width:640px;width:100%;margin-left:auto;margin-right:auto;gap:0;justify-content:center}
.setup-visual{display:none!important}
.setup-card,.board-shell,.hud-card,.side-card,.status-pill,.modal-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.setup-card{
  width:100%;
  max-width:640px;
  min-height:0;
  margin:0 auto;
  background:linear-gradient(180deg,rgba(11,36,74,.86),rgba(7,24,50,.92));
  border-color:rgba(112,199,255,.22);
  box-shadow:0 26px 80px rgba(1,8,22,.34), inset 0 1px rgba(255,255,255,.04);
}
.setup-card h1{background:linear-gradient(180deg,#ffffff,#cce8ff 32%,#ffdb6f 33%,#ffb33d 72%,#f28c20);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 0 rgba(80,43,8,.24))}
.subtitle{color:#d4e6f3}
.segment,.disk-choice,.journey-level,.secondary-btn,.ghost-btn{background:linear-gradient(180deg,rgba(19,59,109,.94),rgba(12,38,74,.94));border-color:rgba(123,192,242,.22)}
.segment.is-selected,.disk-choice.is-selected,.journey-level.is-selected{background:linear-gradient(180deg,#1a5597,#123f71);border-color:#5ce3ff;box-shadow:inset 0 0 0 1px rgba(92,227,255,.3),0 0 22px rgba(92,227,255,.12)}
.primary-btn{box-shadow:0 14px 30px rgba(255,170,48,.22), inset 0 1px rgba(255,255,255,.3)}

.game-topbar{
  background:linear-gradient(180deg,rgba(6,23,47,.78),rgba(6,23,47,.64));
  border-bottom:1px solid rgba(124,191,242,.16);
}
.game-main{max-width:1480px;gap:18px}
.hud-card,.side-card,.status-pill{
  background:linear-gradient(180deg,rgba(13,44,79,.82),rgba(8,30,56,.9));
  border-color:rgba(122,189,241,.2);
  box-shadow:0 18px 44px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.04);
}
.status-pill{background:linear-gradient(180deg,rgba(14,50,92,.82),rgba(10,33,64,.92))}
.status-pill strong{font-size:14px}
.board-shell{
  min-height:590px;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.board-shell::before{display:none!important;content:none!important;background:none!important}
.board-shell::after{height:36%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.34));z-index:1}
.temple-backdrop{display:none}
.hanoi-board{position:relative;z-index:2;min-height:525px;gap:12px;align-items:end;padding:8px 8px 0}
.peg-zone{padding:10px 8px 0;border-radius:24px}
.peg-zone:hover{background:transparent}
.peg-zone.selected-zone,
.peg-zone.valid-target,
.peg-zone.invalid-target,
.peg-zone.drag-hover.valid-target,
.peg-zone.drag-hover.invalid-target,
.peg-zone.drag-hover.selected-zone{
  background:transparent!important;
  box-shadow:none!important;
}
.peg-heading{display:none!important}
.peg-visual{height:410px}
.peg-rod{
  width:16px;
  height:90%;
  background:
    linear-gradient(90deg,#6b3916,#a35c2a 18%,#e6be71 50%,#a65f2c 72%,#5f3214),
    repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 8px,rgba(0,0,0,.02) 8px 16px);
  box-shadow:0 0 0 1px rgba(255,217,159,.08),0 12px 18px rgba(0,0,0,.24);
}
.goal-rod{background:
    linear-gradient(90deg,#75461d,#bd7d35 18%,#ffe1a1 50%,#b56f2f 72%,#683c19),
    repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 8px,rgba(0,0,0,.02) 8px 16px);
  box-shadow:0 0 0 1px rgba(255,230,170,.1),0 0 18px rgba(255,202,101,.18),0 12px 18px rgba(0,0,0,.24)}
.peg-glow,.goal-aura,.progress-nodes{display:none!important}
.disk-stack{width:100%;padding-bottom:0;gap:0;margin-bottom:0}
.disk{
  height:clamp(26px,3vw,36px);
  border-radius:999px;
  margin-bottom:0;
  position:relative;
  border:2.5px solid rgba(42,22,8,.72);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.3);
  overflow:hidden;
}
.disk::before{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:1!important;
  background:
    repeating-linear-gradient(100deg,
      rgba(255,255,255,.07) 0 2px,
      rgba(55,28,10,.14) 2px 3px,
      transparent 3px 9px,
      rgba(30,14,6,.1) 9px 10px,
      transparent 10px 16px),
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 34%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.22) 100%);
  box-shadow:none!important;
  width:auto!important;
  height:auto!important;
}
.disk::after{content:none!important;display:none!important}
.disk.top-disk{cursor:grab}
.disk.selected{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(0,0,0,.22),
    0 0 0 3px rgba(255,215,108,.8),
    0 6px 14px rgba(0,0,0,.28);
}
.disk.dragging{transition:none;will-change:transform}
.disk-placeholder{flex-shrink:0;visibility:hidden;pointer-events:none;margin:0}
.peg-base{
  width:92%;
  height:44px;
  margin-top:-2px;
  border-radius:14px;
  background:
    linear-gradient(180deg,#c07a3a,#9a5528 42%,#7d421c 46%,#6a3618 100%),
    repeating-linear-gradient(90deg,rgba(255,230,181,.1) 0 3px,transparent 3px 16px);
  box-shadow:0 10px 18px rgba(0,0,0,.28), inset 0 2px rgba(255,226,179,.18), inset 0 -2px rgba(0,0,0,.14);
  display:grid;
  place-items:center;
}
.peg-base span{display:none}
.peg-base::after{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  font-weight:1000;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1;
  color:#f8ddad;
  text-shadow:0 1px 0 rgba(84,42,15,.9),0 2px 8px rgba(0,0,0,.18);
}
.peg-zone[data-peg="0"] .peg-base::after{content:"A"}
.peg-zone[data-peg="1"] .peg-base::after{content:"B"}
.peg-zone[data-peg="2"] .peg-base::after{content:"C"}
.goal-base{background:
    linear-gradient(180deg,#b27837,#94561f 45%,#7f4418 46%,#6f3914 100%),
    repeating-linear-gradient(90deg,rgba(255,233,178,.08) 0 3px,transparent 3px 18px);
  box-shadow:0 12px 20px rgba(0,0,0,.26),0 0 18px rgba(255,208,96,.14), inset 0 2px rgba(255,231,188,.16), inset 0 -2px rgba(0,0,0,.12)}
.progress-node{background:#5f6a79}
.progress-node.lit{background:#ffdf78;box-shadow:0 0 0 3px rgba(255,223,120,.12),0 0 12px rgba(255,223,120,.7)}
.keyboard-tip{color:#9cb4c7}
.objective-card h2,.best-card strong{letter-spacing:-.03em}
.objective-card,
.objective-card h2,
.objective-card p,
.objective-card strong,
.objective-card small{
  color:#d4e6f3!important;
}
.best-icon{color:#2b1805}
.mini-progress{background:rgba(0,0,0,.28)}
.mini-progress span{background:linear-gradient(90deg,#53d9d6,#ffcf69)}
.controls-card{gap:9px}
.control-btn{background:linear-gradient(180deg,rgba(19,56,96,.95),rgba(10,34,63,.95));border-color:rgba(124,191,242,.18)}
.control-btn.accent{background:linear-gradient(145deg,#ffda78,#ffb144 58%,#ff9a2f);color:#2b1705;border-color:rgba(255,221,163,.34)}
.control-btn.accent2{background:linear-gradient(145deg,#41b0ff,#2d7bf4);border-color:rgba(155,214,255,.34)}
.best-icon{background:linear-gradient(145deg,#ffdd6c,#f39a2d)}

@media(max-width:1100px){
  .setup-screen::before,.game-screen::before{background-image:url('../assets/catalogo/torre-de-hanoi-tablet.webp?v=capa-1')}
  .game-main{grid-template-columns:minmax(0,1.42fr) minmax(260px,.58fr)}
}
@media(max-width:760px){
  .setup-screen::before,.game-screen::before{background-image:url('../assets/catalogo/torre-de-hanoi-mobile.webp?v=capa-1');filter:blur(12px) brightness(.36) saturate(.94);transform:scale(1.03)}
  .setup-card{padding:24px 18px}
  .setup-card h1{font-size:43px}
  .board-shell{min-height:445px;padding:14px 6px 15px;border-radius:0}
  .hanoi-board{min-height:400px;gap:4px;padding:2px 1px 0}
  .peg-zone{padding:6px 2px 0;border-radius:18px}
  .peg-visual{height:312px}
  .peg-rod{width:11px}
  .disk{height:clamp(21px,6vw,29px);margin-bottom:0}
  .peg-base{height:40px;margin-top:-2px}
  .peg-base::after{font-size:clamp(18px,6vw,26px)}
}
@media(max-width:420px){
  .board-shell{min-height:402px}
  .hanoi-board{min-height:362px}
  .peg-visual{height:282px}
  .peg-base{height:38px}
}
@media(max-height:560px) and (orientation:landscape){
  .board-shell{min-height:calc(100dvh - 152px);padding:7px 4px 9px}
  .hanoi-board{min-height:calc(100dvh - 174px);padding-top:0}
  .peg-visual{height:calc(100dvh - 233px);min-height:228px}
  .peg-base{height:34px;margin-top:-2px}
  .peg-base::after{font-size:18px}
  .disk{margin-bottom:0}
}

/* Patch visual + arraste */
.setup-visual{display:none!important}
.progress-nodes,.peg-glow,.goal-aura{display:none!important}
.board-shell,
.hanoi-board,
.peg-zone,
.disk-stack,
.disk{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.disk.top-disk{
  cursor:grab;
  touch-action:none;
  position:relative;
  z-index:5;
}
body.is-dragging-disk,
html.is-dragging-disk{
  overflow:hidden!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  overscroll-behavior:none!important;
  overscroll-behavior-y:none!important;
  overscroll-behavior-x:none!important;
  /* NÃO usar position:fixed — causa deslocamento sutil ao segurar o disco. */
}
html.is-dragging-disk #app,
body.is-dragging-disk #app,
body.is-dragging-disk .game-screen,
body.is-dragging-disk .board-shell,
body.is-dragging-disk .hanoi-board,
body.is-dragging-disk .peg-zone,
body.is-dragging-disk .disk,
body.is-dragging-disk .drag-layer{
  touch-action:none!important;
  overscroll-behavior:none!important;
}
.drag-layer{
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:none;
}
.drag-layer .disk{
  position:absolute;
  left:0;
  top:0;
  margin:0!important;
  pointer-events:none;
  will-change:transform;
  transition:none!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(0,0,0,.22),
    0 18px 36px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,255,255,.35)!important;
}
.disk{
  margin-bottom:0!important;
  border:2.5px solid rgba(42,22,8,.72)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.3)!important;
  overflow:hidden;
  touch-action:none;
}
.disk::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  opacity:1!important;
  width:auto!important;
  height:auto!important;
  background:
    repeating-linear-gradient(100deg,
      rgba(255,255,255,.07) 0 2px,
      rgba(55,28,10,.14) 2px 3px,
      transparent 3px 9px,
      rgba(30,14,6,.1) 9px 10px,
      transparent 10px 16px),
    linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 34%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.22) 100%)!important;
  box-shadow:none!important;
}
.disk::after,
.demo-disk::after{
  content:none!important;
  display:none!important;
}
.disk.selected{
  transform:none!important;
  filter:none!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -3px 5px rgba(0,0,0,.22),
    0 0 0 3px rgba(255,215,108,.8),
    0 6px 14px rgba(0,0,0,.28)!important;
}
.disk.dragging{
  cursor:grabbing!important;
  filter:none!important;
  opacity:1!important;
  transition:none!important;
}
.disk-placeholder{
  flex-shrink:0;
  visibility:hidden;
  pointer-events:none;
  margin:0!important;
}
.disk-stack{padding-bottom:0!important;gap:0!important}
.peg-base{
  height:44px!important;
  margin-top:-2px!important;
}
.d5{background:#FF2A2A!important}
.d4{background:#FFD000!important}
.d3{background:#12E86A!important}
.d2{background:#00B7FF!important}
.d1{background:#7A3BFF!important}


/* ===== Setup screen · print visual ===== */
body:has(.setup-screen:not(.is-hidden)){
  background:#b7dbf5;
  color:#123a66;
}
body:has(.setup-screen:not(.is-hidden)) .app-shell{
  background:transparent;
}
body:has(.setup-screen:not(.is-hidden)) .app-shell::before{opacity:0}

.setup-screen{
  min-height:100dvh;
  padding-bottom:0;
  background:linear-gradient(180deg,#9ec9f0 0%,#c5e4f8 38%,#e8f4fc 72%,#f4fafd 100%);
  overflow-x:hidden;
}
.setup-screen::before,
.setup-screen::after{display:none!important;content:none!important}

.setup-sky{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.setup-sky .cloud{
  position:absolute;
  background:#fff;
  border-radius:999px;
  opacity:.92;
  box-shadow:
    28px 8px 0 -4px #fff,
    52px 4px 0 -10px #fff,
    -22px 6px 0 -8px #fff;
}
.setup-sky .c1{width:90px;height:34px;top:6%;left:4%}
.setup-sky .c2{width:120px;height:40px;top:3%;right:8%;opacity:.85}
.setup-sky .c3{width:70px;height:28px;top:14%;left:38%;opacity:.7}
.setup-sky .bush{
  position:absolute;
  bottom:-28px;
  width:220px;height:140px;
  background:radial-gradient(ellipse at 50% 70%,#6fc86a 0%,#4eaa52 55%,transparent 72%);
  filter:blur(.2px);
}
.setup-sky .bush-l{left:-60px;transform:scaleX(-1)}
.setup-sky .bush-r{right:-50px;width:260px;height:160px}

.setup-screen .topbar,
.setup-screen .setup-main{position:relative;z-index:1}

.setup-screen .setup-topbar{
  max-width:920px;
  height:auto;
  padding:calc(10px + var(--safe-top)) 14px 0;
  justify-content:flex-end;
}
.setup-screen .setup-topbar .brand-logo,
.setup-screen .setup-topbar #setupSoundBtn{display:none}
.setup-screen .setup-help-btn{
  width:48px;height:48px;
  border-radius:50%;
  border:0;
  background:#123a66;
  color:#fff;
  font-size:22px;
  font-weight:900;
  box-shadow:0 8px 20px rgba(18,58,102,.28);
}
.setup-screen .setup-help-btn:hover{
  background:#0c2b4f;
  transform:translateY(-1px);
  border-color:transparent;
}

.setup-main{
  max-width:920px;
  margin:0 auto;
  padding:0 16px calc(18px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}

.setup-hero{
  display:grid;
  grid-template-columns:110px 1fr 110px;
  align-items:end;
  gap:8px;
  margin-top:4px;
}
.setup-intro{
  text-align:center;
  min-width:0;
  padding-top:0;
  margin:0;
  max-width:none;
}
.setup-intro picture{
  display:block;
  width:min(100%,420px);
  margin:0 auto;
}
.setup-logo{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 10px 18px rgba(20,60,110,.2));
  animation:th-logo-in .55s ease both;
}
@keyframes th-logo-in{
  from{opacity:0;transform:translateY(-8px) scale(.96)}
  to{opacity:1;transform:none}
}
.setup-deco{display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.deco-base{
  position:relative;
  width:92px;height:88px;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:3px;
  padding-bottom:14px;
}
.deco-base::after{
  content:"";
  position:absolute;
  left:4%;right:4%;bottom:0;
  height:14px;
  border-radius:8px;
  background:linear-gradient(180deg,#e0b066,#a86a2a);
  box-shadow:0 4px 10px rgba(80,40,10,.25);
}
.deco-rod{
  position:absolute;
  bottom:12px;
  width:8px;height:70px;
  border-radius:6px;
  background:linear-gradient(90deg,#b87830,#f2cf7a 45%,#9a6028);
  box-shadow:0 0 8px rgba(255,200,80,.2);
  z-index:1;
}
.deco-base.tri{width:108px;flex-direction:row;align-items:flex-end;justify-content:space-around;gap:0}
.deco-base.tri .deco-rod{position:relative;bottom:0;height:62px;margin-bottom:12px}
.deco-base.tri .deco-rod.goal{
  background:linear-gradient(90deg,#d4a018,#ffe98a 48%,#c48910);
  box-shadow:0 0 16px rgba(255,210,60,.7);
}
.goal-rays{
  position:absolute;
  right:4px;top:4px;
  width:48px;height:48px;
  background:
    conic-gradient(from 0deg,transparent 0 12deg,#ffd84a 12deg 16deg,transparent 16deg 40deg,#ffd84a 40deg 44deg,transparent 44deg 70deg,#ffd84a 70deg 74deg,transparent 74deg);
  opacity:.85;
  filter:blur(.3px);
  pointer-events:none;
}
.dsk{
  position:relative;z-index:2;
  height:11px;border-radius:999px;
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 2px 3px rgba(0,0,0,.2);
}
.dsk-5{width:78%;background:#9b4dff}
.dsk-4{width:66%;background:#2f9bff}
.dsk-3{width:54%;background:#2fd36a}
.dsk-2{width:42%;background:#ff9a2a}

.setup-card{
  width:100%;
  max-width:none;
  margin:0;
  background:#fff!important;
  border:0!important;
  border-radius:28px!important;
  box-shadow:0 18px 40px rgba(28,70,120,.14)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:22px 22px 20px!important;
  display:flex;
  flex-direction:column;
  gap:0;
}

.setup-screen .choice-group{margin:0 0 18px}
.setup-screen .section-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#123a66;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.section-ico{
  width:22px;height:22px;
  border-radius:8px;
  display:grid;place-items:center;
  background:#e8f1fb;
  color:#2f7cf6;
  font-size:12px;
}
.section-ico.target{color:#e67e22;background:#fff3e6}

.setup-screen .segmented.two{gap:12px}
.setup-screen .segment{
  display:flex!important;
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  min-height:92px;
  padding:14px 16px;
  border-radius:18px!important;
  border:2px solid #e4edf6!important;
  background:#fff!important;
  color:#123a66!important;
  text-align:left;
  box-shadow:0 4px 12px rgba(28,56,87,.05);
}
.setup-screen .seg-ico{
  flex-shrink:0;
  width:36px;height:36px;
  border-radius:12px;
  display:grid;place-items:center;
  background:#eef4fb;
  font-size:18px;
}
.setup-screen .seg-ico--livre{
  background:linear-gradient(145deg,#fff7e0,#ffe8b8);
  box-shadow:inset 0 0 0 1px rgba(230,160,40,.25);
}
.livre-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  width:22px;
  height:20px;
}
.livre-stack i{
  display:block;
  height:5px;
  border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.livre-stack i:nth-child(1){width:100%;background:linear-gradient(90deg,#ff6b6b,#ff8e53)}
.livre-stack i:nth-child(2){width:72%;background:linear-gradient(90deg,#4ecdc4,#45b7d1)}
.livre-stack i:nth-child(3){width:44%;background:linear-gradient(90deg,#ffe66d,#f9a825)}
.setup-screen .segment.is-selected .seg-ico--livre{
  background:rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.setup-screen .seg-copy{display:grid;gap:3px;min-width:0}
.setup-screen .seg-copy b{font-size:15px;font-weight:900}
.setup-screen .seg-copy small,
.setup-screen .segment small{
  color:#6b7f96!important;
  font-size:11px!important;
  line-height:1.35;
  white-space:normal;
}
.setup-screen .segment:hover{
  transform:translateY(-1px);
  border-color:#c9daf0!important;
}
.setup-screen .segment.is-selected{
  background:linear-gradient(135deg,#3d9bff 0%,#2f76f6 100%)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(47,118,246,.32)!important;
}
.setup-screen .segment.is-selected .seg-ico{background:rgba(255,255,255,.22)}
.setup-screen .segment.is-selected small{color:rgba(255,255,255,.9)!important}

.setup-screen .disk-picker{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.setup-screen .disk-choice{
  position:relative;
  min-height:148px;
  padding:12px 6px 10px;
  border-radius:18px!important;
  border:2px solid #e6eef6!important;
  background:#fff!important;
  color:#123a66!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  box-shadow:0 4px 12px rgba(28,56,87,.05);
}
.setup-screen .disk-choice b{
  font-size:26px;
  font-weight:1000;
  line-height:1;
  letter-spacing:-.04em;
}
.setup-screen .disk-choice small{
  color:#6b7f96!important;
  font-size:10px!important;
  font-weight:700;
  line-height:1.2;
}
.setup-screen .disk-choice em{
  margin-top:auto;
  font-style:normal;
  font-size:10px;
  font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  letter-spacing:.02em;
}
.setup-screen .disk-choice.diff-facil em{background:#e6f8ea;color:#1f9d4a}
.setup-screen .disk-choice.diff-medio em{background:#e5f0ff;color:#2f76f6}
.setup-screen .disk-choice.diff-desafio em{background:#fff0e0;color:#e67e22}
.setup-screen .disk-choice.diff-experiente em{background:#ffe6e8;color:#e74c5c}
.setup-screen .disk-choice.diff-expert em{background:#f0e8ff;color:#7c4dff}

.mini-stack{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:2px;
  width:100%;
  min-height:36px;
  margin:2px 0;
}
.mini-stack i{
  display:block;
  height:6px;
  border-radius:999px;
  background:#8eb8e8;
}
.mini-stack i:nth-child(1){width:78%}
.mini-stack i:nth-child(2){width:66%}
.mini-stack i:nth-child(3){width:54%}
.mini-stack i:nth-child(4){width:42%}
.mini-stack i:nth-child(5){width:34%}
.mini-stack i:nth-child(6){width:28%}
.mini-stack i:nth-child(7){width:22%}
.diff-facil .mini-stack i{background:#6bcf7a}
.diff-medio .mini-stack i{background:#5b9dff}
.diff-desafio .mini-stack i{background:#ff9a3c}
.diff-experiente .mini-stack i{background:#f06775}
.diff-expert .mini-stack i{background:#9b6dff}

.setup-screen .disk-choice:hover{transform:translateY(-2px)}
.setup-screen .disk-choice.is-selected{
  border-color:#2f76f6!important;
  border-width:3px!important;
  box-shadow:0 0 0 3px rgba(47,118,246,.22),0 12px 24px rgba(47,118,246,.16)!important;
  background:#eef5ff!important;
  color:#123a66!important;
  transform:translateY(-3px) scale(1.03);
}
.setup-screen .disk-choice.is-selected::after{content:none;display:none}
.setup-screen .disk-choice.is-selected small{color:#4a6a88!important}

.disk-summary{
  margin:12px 0 0;
  padding:10px 16px;
  border-radius:999px;
  background:#e8f2ff;
  color:#1e4f8c;
  font-size:13px;
  font-weight:800;
  text-align:center;
}

.setup-screen .journey-level{
  background:#fff!important;
  border:2px solid #e6eef6!important;
  color:#123a66!important;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(28,56,87,.05);
}
.setup-screen .journey-level small{color:#6b7f96!important}
.setup-screen .journey-level .level-stars{color:#d4a017}
.setup-screen .journey-level.is-selected{
  border-color:#2f76f6!important;
  border-width:3px!important;
  background:#eef5ff!important;
  box-shadow:0 0 0 3px rgba(47,118,246,.2),0 12px 24px rgba(47,118,246,.16)!important;
  color:#123a66!important;
  transform:translateY(-3px) scale(1.03);
}
.setup-screen .journey-level.is-selected small{color:#4a6a88!important}
.setup-screen .journey-level.locked{opacity:.45}

.setup-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:4px;
  grid-template-columns:unset;
}
.setup-screen .primary-btn{
  position:relative;
  width:min(100%,420px);
  min-height:58px;
  border-radius:999px;
  border:0;
  background:linear-gradient(180deg,#ffe36a 0%,#ffb02e 55%,#ff8f1f 100%);
  color:#123a66;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.04em;
  box-shadow:
    0 12px 28px rgba(255,160,40,.35),
    inset 0 2px 0 rgba(255,255,255,.55);
}
.setup-screen .primary-btn::before,
.setup-screen .primary-btn::after{
  content:"";
  position:absolute;
  top:50%;
  width:18px;height:18px;
  background:
    linear-gradient(#ffd24a,#ffd24a) center/2px 100% no-repeat,
    linear-gradient(#ffd24a,#ffd24a) center/100% 2px no-repeat;
  opacity:.9;
  pointer-events:none;
}
.setup-screen .primary-btn::before{left:-10px;transform:translateY(-50%) rotate(18deg)}
.setup-screen .primary-btn::after{right:-10px;transform:translateY(-50%) rotate(-18deg)}
.setup-screen .primary-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(255,160,40,.4), inset 0 2px 0 rgba(255,255,255,.55);
}
.setup-screen .primary-btn span{margin-right:8px}

.setup-screen .secondary-btn{
  border:0!important;
  background:transparent!important;
  color:#2f76f6!important;
  min-height:36px;
  font-weight:800;
  box-shadow:none!important;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
}
.setup-screen .secondary-btn span{
  width:22px;height:22px;
  border-radius:50%;
  background:#2f76f6;
  color:#fff;
  font-size:13px;
  font-weight:900;
  display:grid;place-items:center;
}
.setup-screen .secondary-btn:hover{
  background:transparent!important;
  border:0!important;
  color:#1a5ed0!important;
}

.setup-screen .stats-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:0;
  padding:14px 12px;
  border:0;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 28px rgba(28,70,120,.1);
}
.setup-screen .stats-strip div{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:6px;
  row-gap:0;
  align-items:center;
  justify-content:center;
  text-align:left;
}
.setup-screen .stats-strip .stat-ico{
  grid-row:1 / span 2;
  width:28px;height:28px;
  border-radius:10px;
  display:grid;place-items:center;
  font-size:14px;
}
.setup-screen .stats-strip .stat-ico.gold{background:#fff3d0}
.setup-screen .stats-strip .stat-ico.blue{background:#e5f0ff}
.setup-screen .stats-strip .stat-ico.purple{background:#f0e8ff}
.setup-screen .stats-strip strong{
  font-size:18px;
  color:#123a66;
  line-height:1.1;
}
.setup-screen .stats-strip span:not(.stat-ico){
  font-size:9px;
  color:#6b7f96;
  max-width:9.5em;
  line-height:1.2;
}

@media(max-width:760px){
  .setup-hero{grid-template-columns:1fr;gap:0}
  .setup-deco{display:none}
  .setup-intro picture{width:min(100%,340px)}
  .setup-screen .setup-card{padding:18px 14px 16px!important;border-radius:24px!important}
  .setup-screen .segmented.two{grid-template-columns:1fr}
  .setup-screen .segment{min-height:78px;padding:12px 14px}
  .setup-screen .disk-picker{gap:6px}
  .setup-screen .disk-choice{min-height:132px;padding:10px 4px 8px;border-radius:14px!important}
  .setup-screen .disk-choice b{font-size:20px}
  .setup-screen .disk-choice small{font-size:8px!important}
  .setup-screen .disk-choice em{font-size:8px;padding:3px 5px}
  .mini-stack{min-height:28px}
  .setup-screen .stats-strip{padding:12px 8px;gap:4px;border-radius:18px}
  .setup-screen .stats-strip strong{font-size:16px}
  .setup-screen .stats-strip span:not(.stat-ico){font-size:8px}
  .setup-sky .bush{width:160px;height:100px;bottom:-20px}
}
@media(max-width:420px){
  .setup-screen .disk-choice em{display:none}
  .disk-summary{font-size:12px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  .setup-logo{animation:none}
}

/* ===== Final setup cascade: this block intentionally stays last ===== */
body:has(#setup:not(.is-hidden)) .setup-topbar{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-topbar .brand-logo,
body:has(#setup:not(.is-hidden)) .setup-topbar .top-actions,
body:has(#setup:not(.is-hidden)) .setup-sound-btn,
body:has(#setup:not(.is-hidden)) .setup-help-btn{
  display:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-main{
  width:100%!important;
  max-width:540px!important;
  margin:0 auto!important;
  padding:16px clamp(14px,4vw,22px) calc(22px + var(--safe-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  box-sizing:border-box!important;
}
body:has(#setup:not(.is-hidden)) .setup-panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 16px 34px rgba(18,50,90,.12),0 1px 0 rgba(255,255,255,.85) inset!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/6.9!important;
  max-height:212px!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  background:#123a66!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero-photo{
  object-fit:cover!important;
  object-position:center 70%!important;
  filter:saturate(1.04) contrast(1.03)!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 56%,rgba(255,255,255,.52) 84%,#fff 100%);
}
body:has(#setup:not(.is-hidden)) .setup-hero-fade{display:none!important}
body:has(#setup:not(.is-hidden)) .setup-intro{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-2px!important;
  z-index:2!important;
  margin:0!important;
  padding:0 clamp(42px,10vw,62px)!important;
  text-align:center!important;
  pointer-events:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-intro picture{
  display:block!important;
  width:min(100%,315px)!important;
  margin:0 auto!important;
}
body:has(#setup:not(.is-hidden)) .setup-logo{
  display:block!important;
  width:100%!important;
  height:auto!important;
  filter:drop-shadow(0 10px 18px rgba(10,43,88,.24))!important;
}
body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  padding:14px 16px 16px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
body:has(#setup:not(.is-hidden)) .stats-strip{
  width:100%!important;
  margin:0!important;
  border-radius:22px!important;
  box-shadow:0 10px 24px rgba(18,50,90,.09)!important;
}
@media(min-width:761px){
  body:has(#setup:not(.is-hidden)) .setup-hero-photo{
    object-fit:contain!important;
    object-position:center center!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero::after{
    background:linear-gradient(180deg,rgba(255,255,255,0) 66%,rgba(255,255,255,.54) 88%,#fff 100%);
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture,
  body:has(#setup:not(.is-hidden)) .setup-logo{
    display:none!important;
  }
}
@media(max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    max-width:430px!important;
    padding-top:58px!important;
    gap:10px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-panel{border-radius:24px!important}
  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:2.34/1!important;
    max-height:150px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero-photo{object-position:center 56%!important}
  body:has(#setup:not(.is-hidden)) .setup-intro{
    padding:0 clamp(34px,10vw,44px)!important;
    bottom:0!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture{width:min(100%,250px)!important}
  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{padding:12px 14px 14px!important}
  body:has(#setup:not(.is-hidden)) .choice-group{margin-bottom:10px!important}
  body:has(#setup:not(.is-hidden)) .segment{
    min-height:68px!important;
    padding:10px 12px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-picker{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice{
    min-height:110px!important;
    padding:9px 4px 8px!important;
    gap:5px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice b{font-size:20px!important}
  body:has(#setup:not(.is-hidden)) .disk-choice small{font-size:8.5px!important}
  body:has(#setup:not(.is-hidden)) .disk-choice em{
    font-size:8px!important;
    padding:3px 5px!important;
    margin-top:4px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-summary{
    margin-top:10px!important;
    padding:8px 12px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    padding:8px 6px!important;
    gap:0!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip div{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    justify-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:1px!important;
    padding:0 3px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip .stat-ico{
    grid-row:auto!important;
    width:24px!important;
    height:24px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip strong{font-size:17px!important}
  body:has(#setup:not(.is-hidden)) .stats-strip span:not(.stat-ico){
    max-width:7.8em!important;
    font-size:8.5px!important;
    line-height:1.12!important;
  }
}
@media(max-width:380px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero{aspect-ratio:2.02/1!important}
  body:has(#setup:not(.is-hidden)) .setup-intro picture{width:min(100%,230px)!important}
  body:has(#setup:not(.is-hidden)) .disk-picker{
    display:flex!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:1px 2px 6px!important;
    margin:0 -2px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-picker::-webkit-scrollbar{height:0}
  body:has(#setup:not(.is-hidden)) .disk-choice{
    flex:0 0 72px!important;
    min-width:72px!important;
    scroll-snap-align:start;
  }
}
@media(max-height:740px) and (max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{padding-top:52px!important}
  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:3/1!important;
    max-height:112px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture{width:min(100%,218px)!important}
  body:has(#setup:not(.is-hidden)) .segment{min-height:64px!important}
  body:has(#setup:not(.is-hidden)) .disk-choice{min-height:102px!important}
}

/* ===== Final desktop polish: preserve the hero art and keep the menu balanced ===== */
@media(min-width:761px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen:not(.setup-screen--scene) .setup-main{
    max-width:600px!important;
    padding-top:18px!important;
    padding-bottom:24px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel{
    border-radius:30px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero{
    aspect-ratio:16/7.05!important;
    max-height:236px!important;
    background:#0b2f5c!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-picture,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-photo{
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-photo{
    object-fit:cover!important;
    object-position:center 36%!important;
    filter:saturate(1.06) contrast(1.04)!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero::after{
    background:linear-gradient(180deg,rgba(255,255,255,0) 64%,rgba(255,255,255,.38) 88%,#fff 100%)!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-intro{
    display:none!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel .setup-card{
    padding:16px 18px 18px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .segment{
    min-height:76px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-picker{
    gap:9px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice{
    min-height:116px!important;
  }
}

@media(min-width:761px) and (max-height:760px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-main{
    max-width:520px!important;
    padding-top:8px!important;
    padding-bottom:12px!important;
    gap:8px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero{
    aspect-ratio:16/5.1!important;
    max-height:152px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-photo{
    object-position:center 22%!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel .setup-card{
    padding:10px 14px 12px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .choice-group{
    margin-bottom:10px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .section-label{
    margin-bottom:7px!important;
    font-size:10px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-mode-grid{
    gap:8px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .segment{
    min-height:58px!important;
    padding:8px 10px!important;
    border-radius:16px!important;
    gap:8px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .segment small{
    font-size:10px!important;
    line-height:1.18!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .seg-ico{
    width:34px!important;
    height:34px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-picker{
    gap:7px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice{
    min-height:80px!important;
    padding:7px 4px 6px!important;
    border-radius:14px!important;
    gap:4px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice b{
    font-size:20px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice small{
    font-size:8px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice em{
    font-size:8px!important;
    padding:3px 5px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice .mini-stack{
    height:23px!important;
    gap:2px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice .mini-stack i{
    height:4px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-summary{
    margin-top:8px!important;
    padding:7px 12px!important;
    font-size:12px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-actions{
    gap:8px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .primary-btn,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .secondary-btn{
    min-height:46px!important;
    border-radius:14px!important;
    padding-inline:14px!important;
    font-size:11px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip{
    padding:8px 12px!important;
    min-height:0!important;
    border-radius:18px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip .stat-ico{
    width:28px!important;
    height:28px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip strong{
    font-size:18px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip span:not(.stat-ico){
    font-size:8px!important;
    line-height:1.1!important;
  }
}

/* ===== Setup final cascade · keep after legacy setup blocks ===== */
body:has(#setup:not(.is-hidden)) .setup-screen{
  padding:0!important;
  background:
    radial-gradient(circle at 18% 4%,rgba(47,143,255,.10),transparent 18rem),
    radial-gradient(circle at 88% 26%,rgba(240,180,41,.10),transparent 16rem),
    #e8eef6!important;
}

body:has(#setup:not(.is-hidden)) .setup-topbar{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-topbar .brand-logo,
body:has(#setup:not(.is-hidden)) .setup-topbar .top-actions,
body:has(#setup:not(.is-hidden)) .setup-sound-btn,
body:has(#setup:not(.is-hidden)) .setup-help-btn{
  display:none!important;
}
body:has(#setup:not(.is-hidden)) #nbGameSettingsRoot{
  top:max(6px, env(safe-area-inset-top, 0px))!important;
  right:max(6px, env(safe-area-inset-right, 0px))!important;
}
body:has(#setup:not(.is-hidden)) .nb-gs-safe{
  width:54px!important;
  height:54px!important;
  margin:0!important;
}
body:has(#setup:not(.is-hidden)) .nb-gs-gear{
  width:42px!important;
  height:42px!important;
}

body:has(#setup:not(.is-hidden)) .setup-main{
  width:100%!important;
  max-width:540px!important;
  margin:0 auto!important;
  padding:16px clamp(14px,4vw,22px) calc(22px + var(--safe-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  box-sizing:border-box!important;
}
body:has(#setup:not(.is-hidden)) .setup-panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 16px 34px rgba(18,50,90,.12),0 1px 0 rgba(255,255,255,.85) inset!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/6.9!important;
  max-height:212px!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  background:#123a66!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero-photo{
  object-fit:cover!important;
  object-position:center 70%!important;
  filter:saturate(1.04) contrast(1.03)!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 56%,rgba(255,255,255,.52) 84%,#fff 100%);
}
body:has(#setup:not(.is-hidden)) .setup-hero-fade{
  display:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-intro{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-2px!important;
  z-index:2!important;
  margin:0!important;
  padding:0 clamp(42px,10vw,62px)!important;
  text-align:center!important;
  pointer-events:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-intro picture{
  display:block!important;
  width:min(100%,315px)!important;
  margin:0 auto!important;
}
body:has(#setup:not(.is-hidden)) .setup-logo{
  display:block!important;
  width:100%!important;
  height:auto!important;
  filter:drop-shadow(0 10px 18px rgba(10,43,88,.24))!important;
}
body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  padding:14px 16px 16px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
body:has(#setup:not(.is-hidden)) .choice-group{
  margin:0 0 15px!important;
}
body:has(#setup:not(.is-hidden)) .disk-choice .mini-stack i{
  height:7px;
}
body:has(#setup:not(.is-hidden)) .setup-actions{
  margin-top:0!important;
}
body:has(#setup:not(.is-hidden)) .primary-btn{
  min-height:58px!important;
}
body:has(#setup:not(.is-hidden)) .stats-strip{
  width:100%!important;
  margin:0!important;
  border-radius:22px!important;
  box-shadow:0 10px 24px rgba(18,50,90,.09)!important;
}

@media(max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    max-width:430px!important;
    padding-top:58px!important;
    gap:10px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-panel{
    border-radius:24px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:2.18/1!important;
    max-height:166px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero-photo{
    object-position:center 56%!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro{
    padding:0 clamp(34px,10vw,44px)!important;
    bottom:0!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture{
    width:min(100%,250px)!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
    padding:12px 14px 14px!important;
  }
  body:has(#setup:not(.is-hidden)) .segment{
    min-height:68px!important;
    padding:10px 12px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-picker{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice{
    min-height:110px!important;
    padding:9px 4px 8px!important;
    gap:5px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice b{
    font-size:20px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice small{
    font-size:8.5px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice em{
    font-size:8px!important;
    padding:3px 5px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice .mini-stack{
    min-height:29px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice .mini-stack i{
    height:6px;
  }
  body:has(#setup:not(.is-hidden)) .disk-summary{
    margin-top:10px!important;
    padding:8px 12px!important;
  }
  body:has(#setup:not(.is-hidden)) .primary-btn{
    min-height:56px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    padding:10px 6px!important;
    gap:0!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip div{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    justify-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:1px!important;
    padding:0 3px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip .stat-ico{
    grid-row:auto!important;
    width:24px!important;
    height:24px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip .stat-ico .th-ico{
    width:20px!important;
    height:20px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip strong{
    font-size:17px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip span:not(.stat-ico){
    max-width:7.8em!important;
    font-size:8.5px!important;
    line-height:1.12!important;
  }
}

@media(max-width:380px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:2.02/1!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture{
    width:min(100%,230px)!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-picker{
    display:flex!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:1px 2px 6px!important;
    margin:0 -2px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-picker::-webkit-scrollbar{
    height:0;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice{
    flex:0 0 72px!important;
    min-width:72px!important;
    scroll-snap-align:start;
  }
}

@media(max-height:740px) and (max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    padding-top:52px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:3/1!important;
    max-height:112px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture{
    width:min(100%,218px)!important;
  }
  body:has(#setup:not(.is-hidden)) .segment{
    min-height:64px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice{
    min-height:102px!important;
  }
}

/* ===== Setup polish v2 · stronger responsive guardrails ===== */
body:has(#setup:not(.is-hidden)) .setup-screen{
  padding:0!important;
  background:
    radial-gradient(circle at 18% 4%,rgba(47,143,255,.10),transparent 18rem),
    radial-gradient(circle at 88% 26%,rgba(240,180,41,.10),transparent 16rem),
    #e8eef6!important;
}

body:has(#setup:not(.is-hidden)) .setup-topbar{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

body:has(#setup:not(.is-hidden)) .setup-topbar .brand-logo,
body:has(#setup:not(.is-hidden)) .setup-topbar .top-actions,
body:has(#setup:not(.is-hidden)) .setup-sound-btn,
body:has(#setup:not(.is-hidden)) .setup-help-btn{
  display:none!important;
}

body:has(#setup:not(.is-hidden)) #nbGameSettingsRoot{
  top:max(6px, env(safe-area-inset-top, 0px))!important;
  right:max(6px, env(safe-area-inset-right, 0px))!important;
}

body:has(#setup:not(.is-hidden)) .nb-gs-safe{
  width:54px!important;
  height:54px!important;
  margin:0!important;
}

body:has(#setup:not(.is-hidden)) .nb-gs-gear{
  width:42px!important;
  height:42px!important;
  box-shadow:0 8px 18px rgba(15,39,72,.24)!important;
}

body:has(#setup:not(.is-hidden)) .setup-main{
  width:100%!important;
  max-width:540px!important;
  margin:0 auto!important;
  padding:16px clamp(14px,4vw,22px) calc(22px + var(--safe-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  box-sizing:border-box!important;
}

body:has(#setup:not(.is-hidden)) .setup-panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:
    0 16px 34px rgba(18,50,90,.12),
    0 1px 0 rgba(255,255,255,.85) inset!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

body:has(#setup:not(.is-hidden)) .setup-hero{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/6.9!important;
  max-height:212px!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  background:#123a66!important;
}

body:has(#setup:not(.is-hidden)) .setup-hero-photo{
  object-fit:cover!important;
  object-position:center 70%!important;
  filter:saturate(1.04) contrast(1.03)!important;
}

body:has(#setup:not(.is-hidden)) .setup-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,27,58,.03) 0%,rgba(7,27,58,0) 35%),
    linear-gradient(180deg,rgba(255,255,255,0) 56%,rgba(255,255,255,.52) 84%,#fff 100%);
}

body:has(#setup:not(.is-hidden)) .setup-hero-fade{
  display:none!important;
}

body:has(#setup:not(.is-hidden)) .setup-intro{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-2px!important;
  z-index:2!important;
  margin:0!important;
  padding:0 clamp(42px,10vw,62px)!important;
  text-align:center!important;
  pointer-events:none!important;
}

body:has(#setup:not(.is-hidden)) .setup-intro picture{
  display:block!important;
  width:min(100%,315px)!important;
  margin:0 auto!important;
}

body:has(#setup:not(.is-hidden)) .setup-logo{
  display:block!important;
  width:100%!important;
  height:auto!important;
  filter:drop-shadow(0 10px 18px rgba(10,43,88,.24))!important;
}

body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  padding:14px 16px 16px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}

body:has(#setup:not(.is-hidden)) .choice-group{
  margin:0 0 15px!important;
}

body:has(#setup:not(.is-hidden)) .section-label{
  margin-bottom:10px!important;
}

body:has(#setup:not(.is-hidden)) .segment{
  box-shadow:0 1px 0 rgba(18,50,90,.03)!important;
}

body:has(#setup:not(.is-hidden)) .segment.is-selected{
  box-shadow:
    0 12px 22px rgba(13,74,154,.22),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

body:has(#setup:not(.is-hidden)) .disk-choice{
  isolation:isolate;
  box-shadow:0 1px 0 rgba(18,50,90,.04)!important;
}

body:has(#setup:not(.is-hidden)) .disk-choice .mini-stack{
  width:100%;
}

body:has(#setup:not(.is-hidden)) .disk-choice .mini-stack i{
  height:7px;
}

body:has(#setup:not(.is-hidden)) .disk-choice.is-selected{
  box-shadow:
    0 0 0 3px rgba(240,178,41,.18),
    0 10px 18px rgba(240,160,32,.12)!important;
}

body:has(#setup:not(.is-hidden)) .setup-actions{
  margin-top:0!important;
}

body:has(#setup:not(.is-hidden)) .primary-btn{
  min-height:58px!important;
}

body:has(#setup:not(.is-hidden)) .stats-strip{
  width:100%!important;
  margin:0!important;
  border-radius:22px!important;
  box-shadow:0 10px 24px rgba(18,50,90,.09)!important;
}

@media(max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    max-width:430px!important;
    padding-top:58px!important;
    gap:10px!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-panel{
    border-radius:24px!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:2.18/1!important;
    max-height:166px!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-hero-photo{
    object-position:center 56%!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-intro{
    padding:0 clamp(34px,10vw,44px)!important;
    bottom:0!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-intro picture{
    width:min(100%,250px)!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
    padding:12px 14px 14px!important;
  }

  body:has(#setup:not(.is-hidden)) .segment{
    min-height:68px!important;
    padding:10px 12px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-picker{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice{
    min-height:110px!important;
    padding:9px 4px 8px!important;
    gap:5px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice b{
    font-size:20px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice small{
    font-size:8.5px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice em{
    font-size:8px!important;
    padding:3px 5px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice .mini-stack{
    min-height:29px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice .mini-stack i{
    height:6px;
  }

  body:has(#setup:not(.is-hidden)) .disk-summary{
    margin-top:10px!important;
    padding:8px 12px!important;
  }

  body:has(#setup:not(.is-hidden)) .primary-btn{
    min-height:56px!important;
  }

  body:has(#setup:not(.is-hidden)) .stats-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    padding:10px 6px!important;
    gap:0!important;
  }

  body:has(#setup:not(.is-hidden)) .stats-strip div{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    justify-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:1px!important;
    padding:0 3px!important;
  }

  body:has(#setup:not(.is-hidden)) .stats-strip .stat-ico{
    grid-row:auto!important;
    width:24px!important;
    height:24px!important;
  }

  body:has(#setup:not(.is-hidden)) .stats-strip .stat-ico .th-ico{
    width:20px!important;
    height:20px!important;
  }

  body:has(#setup:not(.is-hidden)) .stats-strip strong{
    font-size:17px!important;
  }

  body:has(#setup:not(.is-hidden)) .stats-strip span:not(.stat-ico){
    max-width:7.8em!important;
    font-size:8.5px!important;
    line-height:1.12!important;
  }
}

@media(max-width:380px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:2.02/1!important;
  }

  body:has(#setup:not(.is-hidden)) .seg-ico{
    width:38px!important;
    height:38px!important;
  }

  body:has(#setup:not(.is-hidden)) .seg-check{
    width:28px!important;
    height:28px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-picker{
    display:flex!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:1px 2px 6px!important;
    margin:0 -2px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-picker::-webkit-scrollbar{
    height:0;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice{
    flex:0 0 72px!important;
    min-width:72px!important;
    scroll-snap-align:start;
  }
}

@media(max-height:740px) and (max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    padding-top:52px!important;
  }

  body:has(#setup:not(.is-hidden)) .setup-hero{
    max-height:146px!important;
  }

  body:has(#setup:not(.is-hidden)) .segment{
    min-height:64px!important;
  }

  body:has(#setup:not(.is-hidden)) .disk-choice{
    min-height:102px!important;
  }
}

/* ===== Setup visual refresh · inspired by Torre de Londres ===== */
.th-ico{
  width:1em;
  height:1em;
  display:block;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

body:has(.setup-screen:not(.is-hidden)){
  background:#e8eef6;
  color:#12325a;
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;
}
body:has(.setup-screen:not(.is-hidden)) .app-shell{
  background:transparent;
  overflow:auto;
}
body:has(.setup-screen:not(.is-hidden)) .app-shell::before,
body:has(.setup-screen:not(.is-hidden)) .app-shell::after{
  content:none!important;
  display:none!important;
}

.setup-screen{
  --th-blue:#1460b8;
  --th-blue2:#0d4a9a;
  --th-ink:#12325a;
  --th-muted:#6b809c;
  --th-gold:#f0b429;
  --th-line:#e4ebf3;
  --th-card:#ffffff;
  --th-soft:#f3f7fc;
  --th-menu-w:520px;
  --th-pad:clamp(14px,4vw,22px);
  min-height:100dvh;
  padding-bottom:0;
  background:#e8eef6;
  color:var(--th-ink);
  overflow-x:hidden;
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;
}
.setup-screen::before,
.setup-screen::after,
.setup-sky{
  content:none!important;
  display:none!important;
}

.setup-screen .topbar,
.setup-screen .setup-main{
  position:relative;
  z-index:1;
}
.setup-screen .setup-topbar{
  max-width:var(--th-menu-w);
  width:100%;
  height:auto;
  min-height:calc(8px + var(--safe-top));
  padding:calc(8px + var(--safe-top)) var(--th-pad) 0;
  justify-content:flex-end;
  margin-left:auto;
  margin-right:auto;
}
.setup-screen .setup-topbar .brand-logo,
.setup-screen .setup-sound-btn,
.setup-screen .setup-help-btn{
  display:none!important;
}

.setup-main{
  max-width:var(--th-menu-w);
  width:100%;
  margin:0 auto;
  padding:0 var(--th-pad) calc(22px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}
.setup-panel{
  width:100%;
  background:var(--th-card);
  border-radius:26px;
  box-shadow:0 10px 28px rgba(18,50,90,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.setup-hero{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1400/747;
  max-height:236px;
  margin:0;
  overflow:hidden;
  background:#0f3a68;
}
.setup-hero-picture,
.setup-hero-photo{
  display:block;
  width:100%;
  height:100%;
}
.setup-hero-picture{
  position:absolute;
  inset:0;
}
.setup-hero-photo{
  object-fit:cover;
  object-position:center 40%;
}
.setup-hero-fade{
  position:absolute;
  inset:auto 0 0;
  height:34%;
  z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.48) 58%,#fff 100%);
  pointer-events:none;
}
.setup-intro{
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  z-index:2;
  margin:0;
  padding:0 52px;
  text-align:center;
  pointer-events:none;
}
.setup-intro picture{
  display:block;
  width:min(100%,330px);
  margin:0 auto;
}
.setup-logo{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 10px 18px rgba(10,43,88,.24));
  animation:th-logo-in .55s ease both;
}

.setup-panel .setup-card{
  width:100%;
  max-width:none;
  margin:0;
  min-height:0;
  padding:14px 16px 16px!important;
  color:var(--th-ink);
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:visible;
}

.setup-screen .choice-group{
  margin:0 0 16px;
  border:0;
  padding:0;
}
.setup-screen .section-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--th-ink);
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.setup-screen .section-ico{
  width:28px;
  height:28px;
  border-radius:9px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:16px;
}
.setup-screen .section-ico .th-ico{
  width:16px;
  height:16px;
}
.setup-screen .section-ico--mode,
.setup-screen .section-ico--journey{
  background:#e7f0ff;
  color:#0b4a92;
}
.setup-screen .section-ico--target{
  background:#fff3e6;
  color:#d97706;
}

.setup-screen .setup-mode-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.setup-screen .segment{
  display:flex!important;
  flex-direction:row;
  align-items:center;
  gap:12px;
  min-height:78px;
  padding:12px 14px;
  border-radius:18px!important;
  border:1.5px solid var(--th-line)!important;
  background:#fff!important;
  color:var(--th-ink)!important;
  text-align:left;
  box-shadow:none;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
}
.setup-screen .segment:hover{
  transform:translateY(-1px);
  border-color:#c5daf5!important;
}
.setup-screen .seg-ico{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#eef4fb;
  color:var(--th-blue);
  font-size:18px;
}
.setup-screen .seg-ico--livre{
  background:#fff3df;
  color:#d97706;
  box-shadow:none;
}
.setup-screen .seg-ico--journey{
  background:#e7f0ff;
  color:#0b4a92;
}
.setup-screen .seg-ico .th-ico{
  width:22px;
  height:22px;
}
.setup-screen .seg-copy{
  display:grid;
  gap:2px;
  min-width:0;
  flex:1;
}
.setup-screen .seg-copy b{
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
}
.setup-screen .seg-copy small,
.setup-screen .segment small{
  color:var(--th-muted)!important;
  font-size:12px!important;
  line-height:1.35;
  white-space:normal;
  font-weight:700;
}
.setup-screen .seg-check{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid #b8cae0;
  display:grid;
  place-items:center;
  color:var(--th-blue);
}
.setup-screen .seg-check .th-ico{
  display:none;
  width:18px;
  height:18px;
}
.setup-screen .segment.is-selected{
  background:linear-gradient(180deg,#1a69c9 0%,#0d4a9a 100%)!important;
  border:2px solid var(--th-gold)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(13,74,154,.28)!important;
  transform:none;
}
.setup-screen .segment.is-selected .seg-ico{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.setup-screen .segment.is-selected small{
  color:rgba(255,255,255,.9)!important;
}
.setup-screen .segment.is-selected .seg-check{
  border-color:transparent;
  background:#fff;
}
.setup-screen .segment.is-selected .seg-check .th-ico{
  display:block;
}

.livre-stack{
  width:23px;
  height:22px;
}
.livre-stack i{
  height:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

.setup-screen .disk-picker{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.setup-screen .disk-choice{
  position:relative;
  min-height:120px;
  padding:12px 6px 10px;
  border-radius:16px!important;
  border:1.5px solid var(--th-line)!important;
  background:#fff!important;
  color:var(--th-ink)!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  box-shadow:none;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
}
.setup-screen .disk-choice:hover{
  transform:translateY(-2px);
  border-color:#c5daf5!important;
}
.setup-screen .disk-choice b{
  font-size:25px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
}
.setup-screen .disk-choice small{
  color:var(--th-muted)!important;
  font-size:10px!important;
  font-weight:700;
  line-height:1.2;
}
.setup-screen .disk-choice em{
  margin-top:auto;
  max-width:100%;
  font-style:normal;
  font-size:10px;
  font-weight:900;
  line-height:1.1;
  padding:4px 7px;
  border-radius:999px;
  white-space:normal;
}
.setup-screen .disk-choice.is-selected{
  border-color:var(--th-gold)!important;
  border-width:2px!important;
  background:#fff8eb!important;
  box-shadow:0 0 0 3px rgba(240,178,41,.2),0 10px 20px rgba(240,160,32,.12)!important;
  color:var(--th-ink)!important;
  transform:translateY(-2px);
}
.setup-screen .disk-choice.is-selected::after{
  content:"";
  position:absolute;
  top:8px;
  right:8px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--th-blue);
  box-shadow:0 0 0 2px #fff;
}
.setup-screen .disk-choice.is-selected::before{
  content:"";
  position:absolute;
  top:11px;
  right:13px;
  z-index:1;
  width:4px;
  height:8px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.setup-screen .disk-choice.is-selected small{
  color:#4a6a88!important;
}

.mini-stack{
  min-height:36px;
  margin:1px 0;
  gap:2px;
}
.mini-stack i{
  height:6px;
  border-radius:999px;
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.12);
}
.diff-facil .mini-stack i{background:#2fbf6a}
.diff-medio .mini-stack i{background:#2f8fff}
.diff-desafio .mini-stack i{background:#ff9f2d}
.diff-experiente .mini-stack i{background:#ef4d4d}
.diff-expert .mini-stack i{background:#8c72ff}

.disk-summary{
  margin:12px 0 0;
  padding:10px 16px;
  border-radius:999px;
  background:#e7f0ff;
  color:var(--th-blue);
  font-size:13px;
  font-weight:900;
  text-align:center;
}

.setup-screen .journey-levels{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.setup-screen .journey-level{
  min-height:76px;
  border-radius:16px;
  border:1.5px solid var(--th-line)!important;
  background:#fff!important;
  color:var(--th-ink)!important;
  display:grid;
  place-items:center;
  padding:8px 5px;
  box-shadow:none;
}
.setup-screen .journey-level b{
  font-size:18px;
}
.setup-screen .journey-level small{
  color:var(--th-muted)!important;
  font-size:9px;
  text-align:center;
}
.setup-screen .journey-level .level-stars{
  color:#d4a017;
  font-size:10px;
  letter-spacing:1px;
}
.setup-screen .journey-level.is-selected{
  border-color:var(--th-gold)!important;
  border-width:2px!important;
  background:#fff8eb!important;
  box-shadow:0 0 0 3px rgba(240,178,41,.2),0 10px 20px rgba(240,160,32,.12)!important;
  transform:translateY(-2px);
}
.setup-screen .journey-level.locked{
  opacity:.45;
}
.setup-screen .journey-level.locked::after{
  content:"";
  right:8px;
  top:8px;
  width:11px;
  height:8px;
  border:2px solid #8ba2bc;
  border-top:0;
  border-radius:2px;
}
.setup-screen .journey-level.locked::before{
  content:"";
  position:absolute;
  right:10px;
  top:3px;
  width:7px;
  height:8px;
  border:2px solid #8ba2bc;
  border-bottom:0;
  border-radius:8px 8px 0 0;
}

.setup-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:2px;
  grid-template-columns:unset;
}
.setup-screen .primary-btn{
  position:relative;
  width:100%;
  min-height:56px;
  border-radius:999px;
  border:0;
  background:linear-gradient(180deg,#2f8fff 0%,#1460b8 48%,#0d4a9a 100%);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.05em;
  font-family:inherit;
  box-shadow:0 12px 24px rgba(13,74,154,.32),inset 0 1px 0 rgba(255,255,255,.28);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.setup-screen .primary-btn::before,
.setup-screen .primary-btn::after{
  content:none!important;
  display:none!important;
}
.setup-screen .primary-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.setup-screen .primary-btn span{
  margin:0;
}
.setup-screen .play-ico,
.setup-screen .info-ico{
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.setup-screen .play-ico{
  width:20px;
  height:20px;
}
.setup-screen .play-ico .th-ico{
  width:18px;
  height:18px;
}
.setup-screen .secondary-btn{
  border:0!important;
  background:transparent!important;
  color:var(--th-blue)!important;
  min-height:34px;
  font-weight:800;
  font-family:inherit;
  box-shadow:none!important;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 8px;
}
.setup-screen .info-ico{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--th-blue);
  color:#fff;
}
.setup-screen .info-ico .th-ico{
  width:14px;
  height:14px;
}
.setup-screen .secondary-btn:hover{
  background:transparent!important;
  border:0!important;
  color:var(--th-blue2)!important;
}

.setup-screen .stats-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  align-items:center;
  margin:0;
  padding:14px 8px;
  border:0;
  border-radius:22px;
  background:var(--th-card);
  box-shadow:0 10px 28px rgba(18,50,90,.10);
}
.setup-screen .stats-strip div{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:7px;
  row-gap:0;
  align-items:center;
  justify-content:center;
  text-align:left;
  min-width:0;
}
.setup-screen .stats-strip .stat-ico{
  grid-row:1 / span 2;
  width:28px;
  height:28px;
  border-radius:0;
  background:transparent!important;
  display:grid;
  place-items:center;
  font-size:18px;
}
.setup-screen .stats-strip .stat-ico .th-ico{
  width:22px;
  height:22px;
}
.setup-screen .stats-strip .stat-ico.gold{color:#e89410}
.setup-screen .stats-strip .stat-ico.blue{color:#2f8fff}
.setup-screen .stats-strip .stat-ico.purple{color:#8c72ff}
.setup-screen .stats-strip strong{
  font-size:20px;
  color:var(--th-ink);
  line-height:1.1;
  font-weight:900;
}
.setup-screen .stats-strip span:not(.stat-ico){
  font-size:10px;
  color:var(--th-muted);
  max-width:8.4em;
  line-height:1.15;
  font-weight:700;
}

@media(min-width:760px){
  .setup-screen{--th-menu-w:540px}
  .setup-hero{max-height:220px}
  .setup-intro{padding:0 58px}
  .setup-intro picture{width:min(100%,350px)}
  .setup-panel .setup-card{padding:16px 18px 18px!important}
}
@media(max-width:760px){
  .setup-main{
    max-width:var(--th-menu-w);
    padding:0 var(--th-pad) calc(18px + var(--safe-bottom));
    gap:12px;
  }
  .setup-hero{
    aspect-ratio:2.3/1;
    max-height:178px;
  }
  .setup-intro{
    padding:0 42px;
  }
  .setup-intro picture{
    width:min(100%,300px);
  }
  .setup-panel{
    border-radius:24px;
  }
  .setup-panel .setup-card{
    padding:12px 14px 14px!important;
  }
  .setup-screen .segment{
    min-height:72px;
    padding:11px 12px;
    gap:10px;
  }
  .setup-screen .seg-ico{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .setup-screen .seg-check{
    width:30px;
    height:30px;
  }
  .setup-screen .seg-copy b{
    font-size:15px;
  }
  .setup-screen .seg-copy small{
    font-size:11px!important;
  }
  .setup-screen .disk-picker{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
  }
  .setup-screen .disk-choice{
    min-height:118px;
    padding:10px 4px 8px;
  }
  .setup-screen .disk-choice b{
    font-size:20px;
  }
  .setup-screen .disk-choice small{
    font-size:9px!important;
  }
  .setup-screen .disk-choice em{
    font-size:8px;
    padding:3px 5px;
  }
  .mini-stack{
    min-height:28px;
  }
  .setup-screen .journey-levels{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
  }
  .setup-screen .journey-level{
    min-height:66px;
    padding:6px 3px;
  }
  .setup-screen .stats-strip{
    padding:12px 4px;
    border-radius:18px;
  }
  .setup-screen .stats-strip strong{
    font-size:18px;
  }
  .setup-screen .stats-strip span:not(.stat-ico){
    font-size:9px;
    max-width:7.5em;
  }
}
@media(max-width:420px){
  .setup-screen{
    --th-pad:12px;
  }
  .setup-hero{
    aspect-ratio:2.05/1;
  }
  .setup-intro{
    padding:0 34px;
    bottom:0;
  }
  .setup-intro picture{
    width:min(100%,270px);
  }
  .setup-screen .section-label{
    font-size:12px;
  }
  .setup-screen .disk-picker{
    gap:6px;
  }
  .setup-screen .disk-choice{
    min-height:98px;
    border-radius:14px!important;
  }
  .setup-screen .disk-choice em{
    display:block;
    font-size:8px;
  }
  .disk-summary{
    font-size:12px;
    padding:8px 12px;
  }
  .setup-screen .stats-strip{
    grid-template-columns:1fr;
    gap:8px;
  }
  .setup-screen .stats-strip div{
    justify-content:start;
    padding:0 16px;
  }
  .setup-screen .stats-strip span:not(.stat-ico){
    max-width:none;
    font-size:10px;
  }
}
@media(prefers-reduced-motion:reduce){
  .setup-logo{animation:none}
}
/* ===== Final setup cascade: this block intentionally stays last ===== */
body:has(#setup:not(.is-hidden)) .setup-topbar{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-topbar .brand-logo,
body:has(#setup:not(.is-hidden)) .setup-topbar .top-actions,
body:has(#setup:not(.is-hidden)) .setup-sound-btn,
body:has(#setup:not(.is-hidden)) .setup-help-btn{
  display:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-main{
  width:100%!important;
  max-width:540px!important;
  margin:0 auto!important;
  padding:16px clamp(14px,4vw,22px) calc(22px + var(--safe-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:12px!important;
  box-sizing:border-box!important;
}
body:has(#setup:not(.is-hidden)) .setup-panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 16px 34px rgba(18,50,90,.12),0 1px 0 rgba(255,255,255,.85) inset!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/6.9!important;
  max-height:212px!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  background:#123a66!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero-photo{
  object-fit:cover!important;
  object-position:center 70%!important;
  filter:saturate(1.04) contrast(1.03)!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 56%,rgba(255,255,255,.52) 84%,#fff 100%);
}
body:has(#setup:not(.is-hidden)) .setup-hero-fade{display:none!important}
body:has(#setup:not(.is-hidden)) .setup-intro{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-2px!important;
  z-index:2!important;
  margin:0!important;
  padding:0 clamp(42px,10vw,62px)!important;
  text-align:center!important;
  pointer-events:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-intro picture{
  display:block!important;
  width:min(100%,315px)!important;
  margin:0 auto!important;
}
body:has(#setup:not(.is-hidden)) .setup-logo{
  display:block!important;
  width:100%!important;
  height:auto!important;
  filter:drop-shadow(0 10px 18px rgba(10,43,88,.24))!important;
}
body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  padding:14px 16px 16px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
body:has(#setup:not(.is-hidden)) .stats-strip{
  width:100%!important;
  margin:0!important;
  border-radius:22px!important;
  box-shadow:0 10px 24px rgba(18,50,90,.09)!important;
}
@media(max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    max-width:430px!important;
    padding-top:58px!important;
    gap:10px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-panel{border-radius:24px!important}
  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:2.18/1!important;
    max-height:166px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero-photo{object-position:center 56%!important}
  body:has(#setup:not(.is-hidden)) .setup-intro{
    padding:0 clamp(34px,10vw,44px)!important;
    bottom:0!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture{width:min(100%,250px)!important}
  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{padding:12px 14px 14px!important}
  body:has(#setup:not(.is-hidden)) .segment{
    min-height:68px!important;
    padding:10px 12px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-picker{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice{
    min-height:110px!important;
    padding:9px 4px 8px!important;
    gap:5px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-choice b{font-size:20px!important}
  body:has(#setup:not(.is-hidden)) .disk-choice small{font-size:8.5px!important}
  body:has(#setup:not(.is-hidden)) .disk-choice em{
    font-size:8px!important;
    padding:3px 5px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-summary{
    margin-top:10px!important;
    padding:8px 12px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    padding:10px 6px!important;
    gap:0!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip div{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    justify-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:1px!important;
    padding:0 3px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip .stat-ico{
    grid-row:auto!important;
    width:24px!important;
    height:24px!important;
  }
  body:has(#setup:not(.is-hidden)) .stats-strip strong{font-size:17px!important}
  body:has(#setup:not(.is-hidden)) .stats-strip span:not(.stat-ico){
    max-width:7.8em!important;
    font-size:8.5px!important;
    line-height:1.12!important;
  }
}
@media(max-width:380px){
  body:has(#setup:not(.is-hidden)) .setup-main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-panel .setup-card{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-hero{aspect-ratio:2.02/1!important}
  body:has(#setup:not(.is-hidden)) .setup-intro picture{width:min(100%,230px)!important}
  body:has(#setup:not(.is-hidden)) .disk-picker{
    display:flex!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:1px 2px 6px!important;
    margin:0 -2px!important;
  }
  body:has(#setup:not(.is-hidden)) .disk-picker::-webkit-scrollbar{height:0}
  body:has(#setup:not(.is-hidden)) .disk-choice{
    flex:0 0 72px!important;
    min-width:72px!important;
    scroll-snap-align:start;
  }
}
@media(max-height:740px) and (max-width:760px){
  body:has(#setup:not(.is-hidden)) .setup-main{padding-top:52px!important}
  body:has(#setup:not(.is-hidden)) .setup-hero{
    aspect-ratio:3/1!important;
    max-height:112px!important;
  }
  body:has(#setup:not(.is-hidden)) .setup-intro picture{width:min(100%,218px)!important}
  body:has(#setup:not(.is-hidden)) .segment{min-height:64px!important}
  body:has(#setup:not(.is-hidden)) .disk-choice{min-height:102px!important}
}

/* ===== Final mobile polish: keep the first screen tidy on phones ===== */
@media(max-width:760px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero{
    aspect-ratio:1400/747!important;
    max-height:168px!important;
    background:#0f3a68!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-picture,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-photo{
    display:block!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-intro{
    display:none!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel .setup-card{
    padding:10px 14px 12px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .choice-group{
    margin-bottom:10px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .section-label{
    margin-bottom:8px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice{
    min-height:102px!important;
    padding:7px 4px 6px!important;
    gap:4px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice .mini-stack{
    height:24px!important;
    gap:2px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice .mini-stack i{
    height:4px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice em{
    margin-top:4px!important;
    padding:3px 5px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-summary{
    margin-top:8px!important;
    padding:7px 12px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip{
    padding:8px 6px!important;
    border-radius:20px!important;
  }
}

@media(max-height:740px) and (max-width:760px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero{
    aspect-ratio:3.25/1!important;
    max-height:104px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel .setup-card{
    padding-top:9px!important;
    padding-bottom:10px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-choice{
    min-height:92px!important;
  }
}

@media(max-width:380px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel .setup-card,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .choice-group{
    min-width:0!important;
    min-inline-size:0!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .disk-picker{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:1px 0 6px!important;
  }
}

/* ===== Setup hero capa SEO (REFERENCIA/capa-torre-de-hanoi.png) ===== */
body:has(#setup:not(.is-hidden)) .setup-hero{
  aspect-ratio:1400/747!important;
  max-height:236px!important;
  background:#0f3a68!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero-picture,
body:has(#setup:not(.is-hidden)) .setup-hero-photo{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero-photo{
  object-fit:cover!important;
  object-position:center 40%!important;
  filter:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-intro{
  display:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero::after{
  display:none!important;
}
body:has(#setup:not(.is-hidden)) .setup-hero-fade{
  display:block!important;
  height:34%!important;
  z-index:1!important;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.48) 58%,#fff 100%)!important;
}

@media(max-width:760px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero{
    aspect-ratio:1400/747!important;
    max-height:168px!important;
    background:#0f3a68!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-picture,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-photo{
    display:block!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-intro{
    display:none!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero-photo{
    object-position:center 36%!important;
  }
}

@media(max-height:740px) and (max-width:760px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero{
    max-height:128px!important;
  }
}

/* Como jogar — mesma paleta e componentes do modal do Resta 1 */
#tutorialModal.help-modal{
  z-index:2000;
  padding:20px;
  background:rgba(12,23,62,.56);
  backdrop-filter:blur(8px);
}
#tutorialModal.help-modal .modal-card{
  width:min(580px,100%);
  max-height:90vh;
  padding:32px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 5%,rgba(245,61,139,.12),transparent 12rem),
    radial-gradient(circle at 92% 3%,rgba(10,104,255,.12),transparent 12rem),
    #fff;
  box-shadow:0 30px 80px rgba(25,61,105,.18);
  text-align:center;
  color:#111957;
  animation:helpModalIn .2s cubic-bezier(.2,.75,.2,1) both;
}
#tutorialModal.help-modal .modal-close{
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#F1F7FC;
  color:#0752D6;
  font-size:1.55rem;
}
#tutorialModal.help-modal .modal-kicker{
  display:inline-block;
  margin-bottom:8px;
  color:#0752D6;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.12em;
}
#tutorialModal.help-modal h2{
  margin:0;
  font-size:clamp(1.7rem,4vw,2.2rem);
  letter-spacing:-.035em;
  color:#111957;
}
#tutorialModal.help-modal .tutorial-steps{
  margin:18px 0;
  padding:0;
  display:grid;
  gap:8px;
  list-style:none;
  text-align:left;
}
#tutorialModal.help-modal .tutorial-steps li{
  padding:11px;
  border:1px solid #E1EAF2;
  border-radius:15px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  background:#FAFCFE;
}
#tutorialModal.help-modal .tutorial-steps li>span{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#EAF5FF;
  color:#0752D6;
  font-weight:950;
}
#tutorialModal.help-modal .tutorial-steps strong{
  display:block;
  font-size:.85rem;
  color:#111957;
}
#tutorialModal.help-modal .tutorial-steps small{
  display:block;
  margin-top:2px;
  color:#6E7894;
  font-size:.72rem;
  line-height:1.35;
}
#tutorialModal.help-modal .modal-actions--help{
  grid-template-columns:1fr;
  margin-top:16px;
  gap:8px;
}
#tutorialModal.help-modal .primary-button,
#tutorialModal.help-modal .secondary-button{
  min-height:52px;
  padding:0 18px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:850;
  cursor:pointer;
  text-decoration:none;
  transition:.16s cubic-bezier(.2,.75,.2,1);
}
#tutorialModal.help-modal .primary-button--full,
#tutorialModal.help-modal .secondary-button--full{
  width:100%;
}
#tutorialModal.help-modal .help-blog-cta{
  border:0;
  color:#fff;
  font-weight:950;
  background:linear-gradient(90deg,#FF9C1D 0,#F53D8B 28%,#8C46F3 57%,#0A68FF 100%);
  box-shadow:0 12px 26px rgba(95,70,230,.22);
}
#tutorialModal.help-modal .help-blog-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(95,70,230,.26);
}
#tutorialModal.help-modal .secondary-button{
  border:1.5px solid #CFE0F0;
  background:#fff;
  color:#0752D6;
}
@keyframes helpModalIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}
@media(max-width:520px){
  #tutorialModal.help-modal{
    padding:10px;
    align-items:end;
  }
  #tutorialModal.help-modal .modal-card{
    width:100%;
    max-height:88dvh;
    padding:26px 14px 16px;
    border-radius:24px 24px 18px 18px;
  }
}

/* ===== Tela de jogo · fit viewport + mesa + anti-scroll ===== */
.game-screen{
  --th-play-ink:#173a63;
  --th-play-muted:#5a7696;
  --th-play-blue:#1f7cff;
  --th-play-blue-deep:#155dcc;
  --th-play-yellow:#ffd84a;
  --th-play-yellow-deep:#f0b922;
  --th-play-card:#fff;
  --th-play-vh:100dvh;
  /* Pinos como antes; peças (discos) bem mais altas/grossas */
  --th-disk-h:clamp(30px,4vh,40px);
  --th-peg-rod-w:clamp(18px,4.2vw,28px);
  --th-peg-visual-h:clamp(240px,44vh,380px);
  position:relative;
  overflow:hidden;
  height:var(--th-play-vh);
  max-height:var(--th-play-vh);
  min-height:0;
  display:flex;
  flex-direction:column;
  color:var(--th-play-ink);
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;
  touch-action:manipulation;
  overscroll-behavior:none;
}
@supports (height:100svh){
  .game-screen{--th-play-vh:100svh}
}
.game-scene{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.game-scene picture,
.game-scene img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;          /* sem esticar / distorcer */
  object-position:center 72%;
  image-rendering:auto;
}
html.is-playing-hanoi,
body.is-playing-hanoi{
  height:var(--th-play-vh,100dvh)!important;
  max-height:var(--th-play-vh,100dvh)!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.is-playing-hanoi{background:#071628!important}
body.is-playing-hanoi .app-shell{
  background:transparent!important;
  height:var(--th-play-vh,100dvh)!important;
  max-height:var(--th-play-vh,100dvh)!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.is-playing-hanoi .app-shell::before{opacity:0!important}
body.is-playing-hanoi .game-screen::before,
body.is-playing-hanoi .game-screen::after{display:none!important}
body.is-playing-hanoi,
html.is-playing-hanoi{
  position:relative;
}
.game-screen > :not(.game-scene){
  position:relative;
  z-index:1;
}
.game-screen .game-main{
  flex:1 1 auto;
  width:100%;
  max-width:1480px;
  margin:0 auto;
  /* topo alinhado à margem da engrenagem (.nb-gs-safe) */
  padding:max(8px,var(--safe-top)) clamp(10px,2.4vw,18px) calc(6px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  height:100%;
  max-height:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.game-screen .play-column{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  gap:4px;
  overflow:hidden;
}
.game-screen .hud{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:6px!important;
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  /* padding simétrico = centro real + folga da engrenagem */
  padding:0 var(--nb-gs-safe,60px)!important;
  box-sizing:border-box!important;
  flex:0 0 auto;
  min-height:var(--nb-gs-safe,60px)!important;
}
.game-screen .hud-card{
  flex:0 1 150px;
  width:clamp(108px,28vw,160px);
  min-width:0;
  min-height:46px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(255,255,255,.98)!important;
  box-shadow:0 8px 20px rgba(23,58,99,.12),0 2px 0 rgba(255,255,255,.85) inset!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.game-screen .hud-card span{
  font-size:8px!important;
  letter-spacing:.06em!important;
  color:var(--th-play-muted)!important;
  font-weight:800!important;
}
.game-screen .hud-card strong{
  font-size:clamp(16px,4.4vw,22px)!important;
  color:var(--th-play-ink)!important;
  font-weight:900!important;
}
.game-screen .status-pill{
  display:none!important;
  flex:1 1 220px;
  width:auto;
  max-width:340px;
  min-width:0;
  min-height:46px!important;
  height:auto!important;
  margin:0!important;
  padding:8px 14px!important;
  border-radius:14px!important;
  box-sizing:border-box;
}
.game-screen .board-shell{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0 2px!important;
  overflow:hidden!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  touch-action:none;
}
.game-screen .board-shell::after{display:none!important}
.game-screen .hanoi-board{
  flex:0 0 auto!important;
  width:100%;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  gap:clamp(2px,1.2vw,14px)!important;
  align-items:end!important;
  touch-action:none;
}
.game-screen .peg-zone{
  padding:0 2px!important;
  height:auto!important;
  min-height:0;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  touch-action:none;
}
.game-screen .peg-visual{
  position:relative!important;
  flex:0 0 auto!important;
  width:100%;
  height:var(--th-peg-visual-h)!important;
  min-height:var(--th-peg-visual-h)!important;
  max-height:var(--th-peg-visual-h)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
}
.game-screen .peg-rod{
  width:var(--th-peg-rod-w)!important;
  height:94%!important;
  max-height:100%!important;
  /* topo arredondado, base reta — não afina ao encontrar a plataforma */
  border-radius:999px 999px 0 0!important;
  background:
    linear-gradient(90deg,#6b3916 0%,#b87435 16%,#f0d089 48%,#c6863d 72%,#5f3214 100%)!important;
  box-shadow:
    0 0 0 1px rgba(255,217,159,.14),
    0 10px 18px rgba(0,0,0,.28),
    inset 0 0 6px rgba(255,236,190,.18)!important;
}
.game-screen .goal-rod{
  background:
    linear-gradient(90deg,#75461d 0%,#d0923c 16%,#ffe7a8 48%,#c07a30 72%,#683c19 100%)!important;
  box-shadow:
    0 0 0 1px rgba(255,230,170,.16),
    0 0 16px rgba(255,202,101,.16),
    0 10px 18px rgba(0,0,0,.28)!important;
}
.game-screen .disk-stack{
  width:100%;
  max-height:100%;
}
.game-screen .peg-base{
  flex:0 0 auto;
  height:clamp(40px,5.6vh,52px)!important;
  width:94%!important;
  margin-top:0!important;
  border-radius:16px!important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.28),
    0 2px 0 rgba(0,0,0,.08),
    inset 0 2px rgba(255,226,179,.18),
    inset 0 -2px rgba(0,0,0,.14)!important;
}
.game-screen .peg-base::before{content:none!important;display:none!important}
.game-screen .peg-base::after{
  font-size:clamp(20px,2.6vw,28px)!important;
}
.game-screen .disk{
  height:var(--th-disk-h)!important;
  border-radius:16px!important;
  border-width:3px!important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.34),
    inset 0 -5px 7px rgba(0,0,0,.26),
    0 4px 8px rgba(0,0,0,.34)!important;
  touch-action:none!important;
}
.game-screen .disk::before{
  background:
    repeating-linear-gradient(100deg,
      rgba(255,255,255,.11) 0 3px,
      rgba(55,28,10,.16) 3px 5px,
      transparent 5px 13px,
      rgba(30,14,6,.12) 13px 15px,
      transparent 15px 24px),
    linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.08) 34%,rgba(0,0,0,.1) 62%,rgba(0,0,0,.28) 100%)!important;
}
.game-screen .keyboard-tip{display:none!important}
.game-screen .side-panel{
  display:block;
  width:100%;
  flex:0 0 auto;
  margin:0;
  max-height:42%;
  overflow:hidden;
}
.game-screen .game-dock{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 34px rgba(23,58,99,.14),0 2px 0 rgba(255,255,255,.9) inset;
  padding:12px 12px 10px;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.game-screen .objective-card{
  padding:0;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.game-screen .objective-card,
.game-screen .objective-card h2,
.game-screen .objective-card p,
.game-screen .objective-card strong,
.game-screen .objective-card small{
  color:var(--th-play-ink)!important;
}
.game-screen .objective-card h2{
  margin:0 0 4px!important;
  font-size:clamp(17px,4.6vw,22px)!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
}
.game-screen .objective-ideal{
  margin:0 0 8px!important;
  font-size:12px!important;
  color:var(--th-play-muted)!important;
  line-height:1.3!important;
}
.game-screen .objective-ideal strong{
  color:var(--th-play-muted)!important;
  font-weight:800!important;
}
.game-screen .objective-rules{display:none}
.game-screen .objective-progress{
  display:grid;
  grid-template-columns:1fr minmax(72px,32%);
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.game-screen .objective-progress small{
  margin:0!important;
  font-size:10px!important;
  color:var(--th-play-muted)!important;
  font-weight:700!important;
}
.game-screen .mini-progress{
  height:7px!important;
  margin:0!important;
  background:rgba(23,58,99,.1)!important;
  border:0!important;
}
.game-screen .mini-progress span{
  background:linear-gradient(90deg,#53d9d6,#ffcf69)!important;
  box-shadow:none!important;
}
.game-screen .controls-card{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.game-screen .control-btn{
  min-height:46px!important;
  border-radius:14px!important;
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 10px!important;
  font-weight:900!important;
}
.game-screen .control-btn .ctrl-ico,
.game-screen .control-btn > span:not(.ctrl-ico){
  font-size:16px;
  line-height:1;
}
.game-screen .control-btn b{font-size:12px!important}
.game-screen .control-btn.accent2{
  background:#fff!important;
  border:2px solid var(--th-play-blue)!important;
  color:var(--th-play-blue)!important;
  box-shadow:0 6px 16px rgba(31,124,255,.12)!important;
}
.game-screen .control-btn.accent{
  background:linear-gradient(180deg,var(--th-play-yellow),var(--th-play-yellow-deep))!important;
  border:2px solid rgba(196,140,10,.28)!important;
  color:#2b2208!important;
  box-shadow:0 5px 0 rgba(196,140,10,.18),0 10px 18px rgba(196,140,10,.18)!important;
}
.game-screen .best-card{
  margin-top:8px;
  padding:8px 0 0!important;
  border-top:1px solid rgba(23,58,99,.1)!important;
  border-radius:0!important;
  background:transparent!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  display:flex;
  align-items:center;
  gap:10px!important;
}
.game-screen .best-icon{
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#fff6d6,#ffe08a)!important;
  color:#c8860a!important;
  font-size:16px!important;
  box-shadow:inset 0 0 0 1px rgba(200,134,10,.12)!important;
}
.game-screen .best-card span{
  font-size:9px!important;
  color:var(--th-play-muted)!important;
  font-weight:800!important;
}
.game-screen .best-card strong{
  font-size:17px!important;
  color:var(--th-play-ink)!important;
}
.game-screen .best-card small{
  font-size:8px!important;
  color:var(--th-play-muted)!important;
}
.game-screen .hint-ribbon{
  background:rgba(255,255,255,.96)!important;
  color:#8a5a00!important;
  border:1px solid rgba(255,212,105,.55)!important;
  box-shadow:0 10px 26px rgba(23,58,99,.14)!important;
}
body.is-playing-hanoi #nbGameSettingsRoot .nb-gs-gear{
  background:linear-gradient(180deg,#1a4a7a,#0f2748)!important;
  box-shadow:0 8px 22px rgba(15,39,72,.32)!important;
}

/* Arraste: tela 100% estática */
html.is-dragging-disk,
body.is-dragging-disk{
  overflow:hidden!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}
body.is-dragging-disk .game-screen,
body.is-dragging-disk .game-main,
body.is-dragging-disk .board-shell,
body.is-dragging-disk .hanoi-board,
body.is-dragging-disk .peg-zone,
body.is-dragging-disk .disk,
body.is-dragging-disk .drag-layer{
  touch-action:none!important;
  overscroll-behavior:none!important;
}

/* Mobile + tablet: coluna única, tudo na viewport, sem scroll */
@media(max-width:1024px){
  .game-scene img,
  .game-scene picture{object-position:center 68%}
  .game-screen .game-main{
    display:flex!important;
    flex-direction:column!important;
    gap:4px;
    padding:max(8px,var(--safe-top)) 8px calc(4px + var(--safe-bottom));
  }
  .game-screen .hud{
    gap:5px!important;
    width:100%!important;
    padding:0 var(--nb-gs-safe,60px)!important;
    min-height:var(--nb-gs-safe,60px)!important;
    justify-content:center!important;
    align-items:center!important;
  }
  .game-screen .hud-card{min-height:44px!important}
  .game-screen .side-panel{max-height:none}
  .game-screen .game-dock{
    border-radius:18px 18px 14px 14px;
    padding:10px 10px 8px;
  }
  .game-screen .objective-card h2{font-size:clamp(16px,4.4vw,20px)!important}
  .game-screen .objective-ideal{margin:0 0 6px!important;font-size:11px!important}
  .game-screen .objective-progress{margin-bottom:8px}
  .game-screen .control-btn{min-height:44px!important}
  .game-screen .best-card small{display:none}
  .game-screen{
    --th-disk-h:clamp(28px,3.8vh,38px);
    --th-peg-rod-w:clamp(18px,5vw,26px);
    --th-peg-visual-h:clamp(220px,42vh,340px);
  }
  .game-screen .peg-base{height:clamp(40px,5.4vh,50px)!important}
}

@media(max-width:760px){
  .game-scene img,
  .game-scene picture{object-position:center 66%}
  .game-screen .side-panel{max-height:38%}
  .game-screen{
    --th-disk-h:clamp(26px,3.6vh,36px);
    --th-peg-rod-w:clamp(17px,5.4vw,24px);
    --th-peg-visual-h:clamp(200px,40vh,320px);
  }
}

@media(max-height:740px) and (max-width:1024px){
  .game-screen .hud-card{min-height:40px!important}
  .game-screen .best-card{display:none}
  .game-screen .objective-ideal{margin-bottom:4px!important}
  .game-screen .control-btn{min-height:42px!important}
  .game-screen .game-dock{padding:8px 10px}
  .game-screen{
    --th-disk-h:clamp(22px,3.4vh,30px);
    --th-peg-rod-w:clamp(16px,4.8vw,22px);
    --th-peg-visual-h:clamp(180px,36vh,280px);
  }
}

@media(max-height:640px) and (max-width:1024px){
  .game-screen .objective-progress small{font-size:9px!important}
  .game-screen .control-btn b{font-size:11px!important}
  .game-screen .peg-base{height:36px!important}
  .game-screen{
    --th-disk-h:clamp(20px,3.2vh,26px);
    --th-peg-rod-w:clamp(15px,4.5vw,20px);
    --th-peg-visual-h:clamp(160px,34vh,240px);
  }
}

/* Desktop largo: duas colunas, ainda sem overflow */
@media(min-width:1025px){
  .game-scene img,
  .game-scene picture{object-position:center 74%}
  .game-screen{
    --th-disk-h:clamp(32px,4.1vh,42px);
    --th-peg-rod-w:clamp(22px,2.2vw,30px);
    --th-peg-visual-h:clamp(260px,46vh,400px);
  }
  .game-screen .game-main{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);
    grid-template-rows:auto 1fr;
    align-items:stretch;
    gap:14px;
    padding:max(8px,var(--safe-top)) clamp(12px,2vw,22px) calc(10px + var(--safe-bottom));
  }
  .game-screen .hud{
    grid-column:1 / -1;
    grid-row:1;
    gap:8px!important;
    justify-content:center!important;
  }
  .game-screen .play-column{
    grid-column:1;
    grid-row:2;
    min-height:0;
    height:100%;
  }
  .game-screen .side-panel{
    grid-column:2;
    grid-row:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:100%;
    max-height:none;
    min-height:0;
    overflow:hidden;
  }
  .game-screen .game-dock{
    padding:16px 14px 12px;
    width:100%;
  }
  .game-screen .objective-rules{
    display:block;
    margin:0 0 10px!important;
    font-size:12px!important;
    color:var(--th-play-muted)!important;
    line-height:1.4!important;
  }
  .game-screen .status-pill{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    flex:1 1 240px;
    max-width:360px;
    min-height:52px!important;
    background:rgba(255,255,255,.9)!important;
    border:1px solid rgba(255,255,255,.95)!important;
    color:var(--th-play-ink)!important;
    box-shadow:0 8px 22px rgba(23,58,99,.1)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .game-screen .status-pill strong{
    color:var(--th-play-ink)!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.25!important;
    text-align:center;
  }
  .game-screen .status-orb{
    flex:0 0 auto;
    background:var(--th-play-blue)!important;
    box-shadow:0 0 12px rgba(31,124,255,.45)!important;
  }
  .game-screen .hud-card{
    flex:0 1 160px;
    width:clamp(120px,12vw,170px);
    min-height:52px!important;
  }
  .game-screen .control-btn{min-height:50px!important}
  .game-screen .peg-base{height:clamp(44px,5.2vh,54px)!important}
}

@media(max-height:560px) and (orientation:landscape){
  .game-screen .status-pill{display:none!important}
  .game-screen .game-dock{padding:8px 10px}
  .game-screen .objective-rules{display:none!important}
  .game-screen .best-card{display:none}
  .game-screen .hud-card{min-height:38px!important}
  .game-screen .control-btn{min-height:40px!important}
  .game-screen .peg-base{height:32px!important}
  .game-screen{
    --th-disk-h:clamp(18px,3.4vh,24px);
    --th-peg-rod-w:clamp(14px,3vh,20px);
    --th-peg-visual-h:clamp(140px,42vh,220px);
  }
}

/* ===== Setup responsivo v4 · artes setup-bg-mobile / setup-bg-tablet (novo) ===== */
.setup-backdrop{display:none}
html body:has(#setup:not(.is-hidden)){
  background:#0a2845!important;
}
html body:has(#setup:not(.is-hidden)) .app-shell{
  min-height:100dvh!important;
  background:transparent!important;
  overflow:hidden!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen{
  background:transparent!important;
  position:relative!important;
  isolation:isolate;
  min-height:100dvh!important;
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  padding:0!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop picture,
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop-photo{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop-photo{
  object-fit:cover!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop-scrim{
  display:none!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-topbar,
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-main{
  position:relative!important;
  z-index:2!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-hero{
  display:none!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-main{
  width:100%!important;
  max-width:none!important;
  min-height:100dvh!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel{
  box-shadow:0 18px 42px rgba(8,30,58,.28),0 1px 0 rgba(255,255,255,.95) inset!important;
}
@media(max-width:599px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop-photo{
    object-fit:cover!important;
    object-position:50% top!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-main{
    justify-content:flex-end!important;
    padding:calc(46px + var(--safe-top)) 10px calc(10px + var(--safe-bottom))!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip{
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    flex-shrink:0!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel{
    max-height:min(58dvh,560px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}
@media(min-width:600px) and (max-width:900px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-main{
    align-items:center!important;
    justify-content:flex-start!important;
    padding:calc(clamp(300px,33vh,38vh) + var(--safe-top)) clamp(14px,3vw,22px) calc(12px + var(--safe-bottom))!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip{
    width:100%!important;
    max-width:min(500px,92vw)!important;
    flex-shrink:0!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel{
    max-height:min(52dvh,540px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop-photo{
    object-fit:cover!important;
    object-position:50% top!important;
  }
}
@media(min-width:600px) and (max-width:900px) and (min-height:900px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-main{
    padding-top:calc(clamp(320px,35vh,40vh) + var(--safe-top))!important;
  }
}
@media(min-width:600px) and (max-width:900px) and (orientation:landscape){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-main{
    align-items:flex-end!important;
    justify-content:center!important;
    padding:calc(10px + var(--safe-top)) clamp(14px,3vw,28px) calc(12px + var(--safe-bottom))!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-panel{
    max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom))!important;
    width:min(368px,40vw)!important;
    max-width:368px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .stats-strip{
    width:min(368px,40vw)!important;
    max-width:368px!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen .setup-backdrop-photo{
    object-position:50% top!important;
  }
}
/* Setup com cena: nunca usar a capa antiga do catálogo (PLANEJE/PENSE…) */
html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene::before,
html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene::after{
  content:none!important;
  display:none!important;
}
@media(min-width:901px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene{
    /* Mais à direita, sem cobrir o tabuleiro da arte setup-bg-desktop */
    --th-setup-menu-inset:clamp(860px,72vw,calc(100vw - 408px));
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene .setup-backdrop-photo{
    object-fit:cover!important;
    object-position:50% center!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene .setup-main{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:12px!important;
    width:min(392px,34vw)!important;
    max-width:392px!important;
    min-height:100dvh!important;
    height:100dvh!important;
    margin:0!important;
    margin-left:var(--th-setup-menu-inset)!important;
    padding:calc(14px + var(--safe-top)) 0 calc(20px + var(--safe-bottom))!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene .setup-panel,
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene .stats-strip{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    flex-shrink:0!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene .setup-panel{
    max-height:calc(100dvh - 110px - var(--safe-top) - var(--safe-bottom))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
}
@media(min-width:1600px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene{
    --th-setup-menu-inset:clamp(980px,62vw,calc(100vw - 420px));
  }
}
@media(min-width:901px) and (max-height:760px){
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene .setup-main{
    justify-content:flex-start!important;
    padding-top:calc(8px + var(--safe-top))!important;
  }
  html body:has(#setup:not(.is-hidden)) #setup.setup-screen.setup-screen--scene .setup-panel .setup-card{
    padding:12px 14px 14px!important;
  }
}