:root{
  --navy:#0a2b58;--navy2:#0d3c79;--navy3:#08234b;--cyan:#61ddff;--cyan2:#2fb9ff;
  --gold:#ffc94f;--gold2:#ff9f2d;--cream:#fff6e7;--ink:#10223a;--muted:#c9deee;
  --wood1:#d99a5e;--wood2:#aa6835;--wood3:#75411f;--green:#27c96f;--blue:#2d8fff;--red:#ef4d4d;
  --shadow:0 24px 70px rgba(0,0,0,.28);--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%;color:white;overscroll-behavior:none;overscroll-behavior-y:none}html{overflow-x:hidden}body{min-height:100dvh;overflow-x:hidden;background:#153865}button{font:inherit}button{touch-action:manipulation}.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}
button:focus-visible{outline:4px solid rgba(255,209,90,.5);outline-offset:3px}
.app-shell{min-height:100dvh;position:relative;overflow:hidden;background:linear-gradient(180deg,#12407a 0%,#0a2b58 42%,#071f42 100%)}
.app-shell::before{content:none;display:none}
.app-shell::after{content:"";position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(97,221,255,.12),transparent 55%),linear-gradient(180deg,rgba(255,248,235,.06),transparent 28%);pointer-events:none}
.screen,.sr-only{position:relative;z-index:1}.screen{min-height:100dvh}

/* abertura (mesmo efeito do Mahjong; imagens do catalogo) */
.game-opening{position:fixed;inset:0;z-index:100000;background:#081d3b;display:grid;place-items:center;overflow:hidden}
.game-opening picture,.game-opening img{width:100%;height:100%;display:block}
.game-opening img{object-fit:contain;object-position:center;animation:openingZoom 1.2s ease both}
.game-opening.is-leaving{animation:openingFade .22s ease forwards;pointer-events:none}
@keyframes openingZoom{from{transform:scale(1.02);opacity:.88}to{transform:scale(1);opacity:1}}
@keyframes openingFade{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.game-opening img{animation:none}}

/* splash legado removido — abertura usa .game-opening */

/* global bars/buttons */
.topbar{height:76px;padding:calc(10px + var(--safe-top)) clamp(14px,2.4vw,30px) 10px;max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:10}
.game-topbar{max-width:none;position:sticky;top:0;background:linear-gradient(180deg,rgba(9,41,87,.88),rgba(7,31,67,.9));border-bottom:1px solid rgba(125,218,255,.22);backdrop-filter:blur(15px);box-shadow:0 10px 28px rgba(0,0,0,.14)}
.brand-logo{width:144px;height:auto}.top-actions{display:flex;gap:8px}.icon-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));color:#fff;display:grid;place-items:center;font-size:19px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.14);transition:.15s ease}.icon-btn:hover{transform:translateY(-1px);border-color:rgba(255,212,96,.72);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.11))}
.eyebrow{margin:0 0 7px;color:#76edff;font-size:11px;letter-spacing:.15em;font-weight:950;text-transform:uppercase}.subtitle{color:#e8f4fb;font-size:clamp(14px,1.4vw,17px);line-height:1.5;margin:14px 0 22px}
.primary-btn,.secondary-btn,.ghost-btn{min-height:52px;border-radius:17px;padding:0 20px;font-weight:950;cursor:pointer;transition:.16s ease}.primary-btn{border:2px solid rgba(255,227,142,.78);background:linear-gradient(180deg,#198bff,#0d5bd9);color:#fff;box-shadow:0 10px 0 rgba(15,70,158,.24),0 18px 34px rgba(16,66,146,.24),inset 0 1px rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;gap:9px}.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}.secondary-btn{background:rgba(255,255,255,.1);color:white;border:1px solid rgba(255,255,255,.19)}.ghost-btn{background:transparent;color:#dbeefa;border:1px solid rgba(255,255,255,.17)}.secondary-btn:hover,.ghost-btn:hover{border-color:rgba(255,211,91,.65)}

/* menu */
.menu-screen{padding-bottom:calc(24px + var(--safe-bottom))}
.topbar{max-width:640px;width:100%;margin-left:auto;margin-right:auto}
.menu-main{max-width:640px;width:100%;margin:18px auto 0;padding:0 clamp(14px,2.8vw,32px);display:flex;justify-content:center;align-items:stretch}
.menu-visual{display:none!important}
.menu-card{width:100%;max-width:640px;min-height:0;border-radius:32px;overflow:hidden;border:1px solid rgba(111,208,255,.22);box-shadow:var(--shadow);padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,rgba(14,55,112,.91),rgba(8,34,72,.95));backdrop-filter:blur(14px)}
.menu-card h1{font-size:clamp(42px,5vw,68px);line-height:.96;margin:0;letter-spacing:-.05em;background:linear-gradient(180deg,#fff,#dbeaff 42%,#ffd25c 43%,#ffa42b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(6,66,149,.45)) drop-shadow(0 8px 18px rgba(0,0,0,.15))}.choice-group{border:0;padding:0;margin:0 0 18px}.choice-group legend{font-size:12px;font-weight:900;color:#fff;margin-bottom:9px}.segmented{display:grid;gap:9px}.segmented.two{grid-template-columns:1fr 1fr}.segmented.four{grid-template-columns:repeat(4,1fr)}.segment{border:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));color:#fff;border-radius:16px;min-height:66px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;text-align:left;align-items:center;cursor:pointer;transition:.15s ease}.segment>span{grid-row:1/3;font-size:22px;color:#76edff}.segment b{font-size:13px}.segment small{font-size:10px;color:#c8e0ef}.segment:hover{border-color:rgba(255,214,105,.58);transform:translateY(-1px)}.segment.is-selected{border-color:rgba(255,220,114,.72);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.09));box-shadow:inset 0 0 0 1px rgba(255,222,118,.18),0 0 24px rgba(255,208,88,.08)}.compact .segment{display:flex;min-height:53px;align-items:center;justify-content:center;text-align:center;gap:4px;flex-direction:column;padding:7px}
.journey-panel{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:13px;background:rgba(4,24,52,.3);margin-bottom:18px}.journey-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px}.journey-head strong{font-size:12px}.journey-head span{font-size:10px;color:#c7ddeb}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.level-btn{aspect-ratio:1;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,#185eae,#0e3e80);color:#fff;font-size:12px;font-weight:900;cursor:pointer;position:relative}.level-btn::after{content:"";position:absolute;left:24%;right:24%;bottom:7px;height:2px;border-radius:4px;background:rgba(255,255,255,.16)}.level-btn.done::after{background:#76ffd1}.level-btn.current{border-color:#7ceeff}.level-btn.locked{opacity:.35;cursor:not-allowed}.level-btn.selected{background:linear-gradient(180deg,#ffca55,#ff9c27);border-color:#ffe5a0;color:#3b2106;box-shadow:0 8px 18px rgba(190,118,21,.25)}.menu-actions{display:grid;grid-template-columns:1fr auto;gap:10px}.record-strip{display:flex;gap:24px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.11)}.record-strip div{display:flex;align-items:baseline;gap:7px}.record-strip strong{font-size:21px}.record-strip span{font-size:10px;color:#c6dce9}

/* game header */
.game-brand{display:flex;align-items:center;gap:10px;min-width:0}.game-brand img{width:58px;height:auto}.game-brand>div{display:grid;gap:2px}.game-brand strong{font-size:17px}.game-brand small{font-size:10px;color:#8ff1ff;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}.game-screen{padding-bottom:calc(10px + var(--safe-bottom));min-height:100dvh;display:flex;flex-direction:column}
.game-main{max-width:1440px;width:100%;margin:10px auto 0;padding:0 clamp(10px,2vw,24px);flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.38fr);gap:14px;align-items:stretch}.play-column{min-width:0;min-height:0;display:flex;flex-direction:column;gap:8px}
.hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:0;max-width:480px;flex-shrink:0}.hud>div{min-height:64px;border:1px solid rgba(113,210,255,.2);border-radius:18px;background:linear-gradient(180deg,rgba(14,57,116,.88),rgba(8,37,78,.92));padding:10px 12px;display:grid;gap:2px;backdrop-filter:blur(12px);box-shadow:0 14px 30px rgba(0,0,0,.12)}.hud span{font-size:9px;color:#a4d8ef;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.hud strong{font-size:22px;color:#fff}
.goal-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;border:1px solid rgba(112,210,255,.22);border-radius:20px;background:linear-gradient(180deg,rgba(14,59,120,.88),rgba(8,38,81,.93));padding:12px 14px;margin-bottom:0;box-shadow:0 18px 38px rgba(0,0,0,.13);backdrop-filter:blur(12px);flex-shrink:0}.goal-copy{min-width:0}.goal-copy h2{font-size:clamp(18px,2vw,26px);margin:0;letter-spacing:-.03em;white-space:nowrap}.goal-board{
  --mini-ball:clamp(14px,2.8vw,20px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3.2vw,40px);min-height:78px;background:rgba(5,28,61,.5);border:1px solid rgba(115,213,255,.18);border-radius:16px;padding:8px 10px
}
.mini-peg{width:calc(var(--mini-ball)*2.6);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.mini-rod{width:max(4px,calc(var(--mini-ball)*.28));height:calc(var(--mini-ball)*2.6);border-radius:5px;background:linear-gradient(90deg,#6d421d,#d9a057 44%,#f3ca79 54%,#70411e);position:absolute;bottom:8px}
.mini-stack{position:relative;z-index:2;display:flex;flex-direction:column-reverse;align-items:center;gap:2px}
.mini-ball{width:var(--mini-ball);height:var(--mini-ball);border-radius:50%;box-shadow:inset 0 2px 5px rgba(255,255,255,.26),inset 0 -3px 6px rgba(0,0,0,.2),0 2px 5px rgba(0,0,0,.18);display:grid;place-items:center;font-size:0;position:relative;overflow:hidden}
.mini-ball::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,rgba(113,65,26,.1) 0 4px,rgba(255,255,255,.04) 4px 8px,rgba(77,42,16,.08) 8px 12px);mix-blend-mode:multiply}
.mini-ball::after{content:"";position:absolute;left:20%;top:15%;width:34%;height:24%;border-radius:50%;background:rgba(255,255,255,.42);filter:blur(1.5px)}
.mini-base{width:calc(var(--mini-ball)*2.2);height:max(10px,calc(var(--mini-ball)*.55));border-radius:7px;background:linear-gradient(180deg,#c07a3a,#9a5528 42%,#7d421c 46%,#6a3618 100%),repeating-linear-gradient(90deg,rgba(255,230,181,.1) 0 2px,transparent 2px 8px);margin-top:3px;position:relative;z-index:3;box-shadow:0 4px 8px rgba(0,0,0,.22),inset 0 1px rgba(255,226,179,.16);display:grid;place-items:center}
.mini-base::after{content:attr(data-label);font-size:9px;font-weight:1000;line-height:1;color:#f8ddad;text-shadow:0 1px 0 rgba(84,42,15,.85)}
.mini-rod{bottom:calc(var(--mini-ball)*.55)}
.mini-peg:nth-child(1) .mini-rod{height:calc(var(--mini-ball)*3 + 10px)}
.mini-peg:nth-child(2) .mini-rod{height:calc(var(--mini-ball)*2 + 8px)}
.mini-peg:nth-child(3) .mini-rod{height:calc(var(--mini-ball)*1 + 6px)}

/* stage */
.board-stage{border:1px solid rgba(112,210,255,.2);border-radius:28px;background:linear-gradient(180deg,rgba(13,56,113,.86),rgba(7,34,72,.92));padding:14px;box-shadow:0 22px 50px rgba(0,0,0,.16);backdrop-filter:blur(12px);flex:1;min-height:0;display:flex;flex-direction:column}.stage-topline{display:none}.stage-badges{display:none}
.board{
  --ball:clamp(40px,min(16vw,12cqw,14vh),72px);
  --ball-gap:clamp(2px,.5vw,5px);
  --rod-w:max(8px,calc(var(--ball)*.2));
  --base-h:clamp(34px,calc(var(--ball)*.72),52px);
  container-type:inline-size;
  min-height:0;
  flex:1;
  height:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,2vw,22px);
  align-items:end;
  justify-items:center;
  position:relative;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(5,23,49,.24),rgba(4,20,43,.43));
  padding:clamp(16px,2.4vw,28px) clamp(10px,2vw,18px) clamp(14px,2vw,22px);
  border:1px solid rgba(255,255,255,.07);
  overflow:visible;
}
.board::before,.board::after{display:none}
.drag-layer{
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:none;
}
.drag-layer .ball{
  position:absolute;
  left:0;
  top:0;
  margin:0!important;
  pointer-events:none;
  will-change:transform;
  transition:none!important;
  cursor:grabbing;
  filter:brightness(1.08);
  box-shadow:
    inset 0 6px 12px rgba(255,255,255,.24),
    inset 0 -8px 15px rgba(0,0,0,.22),
    0 18px 36px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,255,255,.35)!important;
}
.ball-placeholder{display:block;flex-shrink:0;border-radius:50%;opacity:0;pointer-events:none}
html.is-dragging-ball,
body.is-dragging-ball{
  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 aqui — causa deslocamento sutil ao segurar a peça. */
}
html.is-dragging-ball #app,
body.is-dragging-ball #app,
body.is-dragging-ball .app-shell,
body.is-dragging-ball .game-screen,
body.is-dragging-ball .game-main,
body.is-dragging-ball .board-stage,
body.is-dragging-ball .board,
body.is-dragging-ball .peg,
body.is-dragging-ball .ball,
body.is-dragging-ball .drag-layer{
  touch-action:none!important;
  overscroll-behavior:none!important;
}
body.is-dragging-ball .peg{cursor:grabbing}
.board,
.peg,
.balls,
.ball{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.peg{
  border:0;background:transparent;
  padding:clamp(6px,1vw,10px) clamp(2px,.8vw,8px) 0;
  min-width:0;width:100%;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  position:relative;z-index:2;cursor:pointer;border-radius:18px;
  transition:background .15s ease,box-shadow .15s ease;
  min-height:0;height:100%;
}
.peg:hover{background:transparent}
.peg.selected,
.peg.valid,
.peg.invalid-target,
.peg.drag-hover.valid,
.peg.drag-hover.invalid-target,
.peg.drag-hover.selected{
  background:transparent!important;
  box-shadow:none!important;
  transform:none;
}
.peg.invalid-flash{animation:shake .35s ease}
.peg-cap{display:none!important}
.peg-scene{
  position:relative;width:100%;
  display:flex;justify-content:center;align-items:flex-end;
  min-height:0;padding-bottom:0;margin-top:auto;flex:0 0 auto;
}
.peg:nth-child(1) .peg-scene{height:calc(var(--ball)*3 + var(--ball-gap)*2 + 6px)}
.peg:nth-child(2) .peg-scene{height:calc(var(--ball)*2 + var(--ball-gap)*1 + 6px)}
.peg:nth-child(3) .peg-scene{height:calc(var(--ball)*1 + var(--ball-gap)*0 + 6px)}
.rod{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:var(--rod-w);height:100%;border-radius:calc(var(--rod-w)*.7) calc(var(--rod-w)*.7) 3px 3px;background:linear-gradient(90deg,#6c421d,#dba45c 28%,#f5c978 51%,#8e5224 75%,#5d3517);box-shadow:0 0 0 1px rgba(255,224,167,.08),0 10px 20px rgba(0,0,0,.22);pointer-events:none}
.balls{position:relative;z-index:4;display:flex;flex-direction:column-reverse;align-items:center;gap:var(--ball-gap);padding-bottom:2px}
.ball{
  width:var(--ball);height:var(--ball);aspect-ratio:1;flex-shrink:0;
  border-radius:50%;display:grid;place-items:center;font-size:0;position:relative;overflow:hidden;
  box-shadow:inset 0 6px 12px rgba(255,255,255,.24),inset 0 -8px 15px rgba(0,0,0,.22),0 10px 18px rgba(0,0,0,.26);
  user-select:none;touch-action:none;cursor:default;
  transition:filter .16s ease,box-shadow .16s ease,transform .16s ease;
}
.ball::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,rgba(110,63,25,.1) 0 4px,rgba(255,255,255,.04) 4px 8px,rgba(80,44,17,.08) 8px 12px),radial-gradient(circle at 32% 28%,rgba(255,255,255,.19),transparent 32%);mix-blend-mode:multiply;opacity:.78}
.ball::after{content:"";position:absolute;left:20%;top:14%;width:36%;height:24%;border-radius:50%;background:rgba(255,255,255,.44);filter:blur(2px)}
.ball.top-ball{cursor:grab}
.ball.top-ball:hover{filter:brightness(1.08)}
.ball.selected-ball{transform:translateY(-6px) scale(1.04);box-shadow:inset 0 6px 12px rgba(255,255,255,.24),inset 0 -8px 15px rgba(0,0,0,.22),0 15px 25px rgba(0,0,0,.31),0 0 0 3px #ffd35c}
.ball.dragging{
  position:absolute!important;
  z-index:1!important;
  pointer-events:none;
  cursor:grabbing;
  margin:0;
  transition:none!important;
  will-change:transform;
}
.base{display:grid;place-items:center;width:min(92%,calc(var(--ball)*1.55));height:var(--base-h);margin-top:-2px;flex-shrink:0;border-radius:clamp(10px,2vw,14px);position:relative;z-index:3;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);pointer-events:none}
.peg-name{position:static;left:auto;bottom:auto;transform:none;z-index:1;margin:0;font-size:clamp(16px,calc(var(--ball)*.48),28px);font-weight:1000;line-height:1;color:#f8ddad;text-shadow:0 1px 0 rgba(84,42,15,.9),0 2px 8px rgba(0,0,0,.18);pointer-events:none}
.base.matched{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,.22),inset 0 2px rgba(255,231,188,.16),inset 0 -2px rgba(0,0,0,.12)}
.base.matched .peg-name{color:#ffe9b8;text-shadow:0 1px 0 rgba(84,42,15,.9),0 0 10px rgba(255,220,130,.35)}
.hint-ribbon{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:9;border:1px solid rgba(255,212,105,.42);background:rgba(7,30,64,.95);color:#fff0b0;border-radius:999px;padding:8px 13px;font-size:11px;font-weight:900;box-shadow:0 10px 26px rgba(0,0,0,.2)}.interaction-tip{text-align:center;color:#d8eef9;font-size:11px;margin:10px 0 0;flex-shrink:0}

/* side */
.side-panel{display:grid;align-content:start;gap:12px;min-height:0}.side-card{border:1px solid rgba(112,210,255,.2);border-radius:22px;background:linear-gradient(180deg,rgba(13,57,116,.88),rgba(8,36,76,.94));box-shadow:0 18px 40px rgba(0,0,0,.14);backdrop-filter:blur(12px)}.planner-card{padding:18px}.planner-card h2{margin:0 0 9px;font-size:clamp(22px,2.1vw,30px);letter-spacing:-.04em;line-height:1.04}.planner-card>p{margin:0;color:#e1f1fa;line-height:1.5;font-size:13px}.progress-meter{margin-top:16px}.progress-meter>span{display:block;height:9px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;border:1px solid rgba(255,255,255,.1)}.progress-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4ce1e1,#79edb4);border-radius:999px;transition:width .3s ease}.progress-meter small{display:block;margin-top:6px;color:#d9f0fb;font-size:10px}.controls-card{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.control-btn{min-height:76px;border-radius:17px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));color:#fff;display:grid;place-items:center;align-content:center;gap:3px;cursor:pointer;transition:.15s ease}.control-btn span.ctrl-ico{font-size:inherit;width:24px;height:24px;display:grid;place-items:center}.control-btn .tl-ico{width:22px;height:22px}.control-btn b{font-size:11px}.control-btn:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(255,214,100,.58)}.control-btn:disabled{opacity:.35;cursor:default}.control-btn.accent{background:linear-gradient(180deg,#ffb331,#ff9625);border-color:rgba(255,232,175,.45);color:#2d1b07}.control-btn.accent2{background:linear-gradient(180deg,#35a4ff,#2a6feb);border-color:rgba(184,224,255,.36)}.control-btn.solving{animation:solving 1.05s ease-in-out infinite}.keyboard-card{padding:16px}.keyboard-card strong{font-size:11px}.keyboard-card p{font-size:10px;color:#d4e7f2;line-height:1.5;margin:6px 0 0}.keyboard-card kbd{display:inline-grid;place-items:center;min-width:23px;height:23px;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font:800 10px/1 monospace}

/* modals — fora do .app-shell; centralizados na viewport (mobile/tablet inclusive) */
.modal{
  position:fixed!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;
  height:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  z-index:10050;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:max(12px,env(safe-area-inset-top,0px)) 16px max(12px,env(safe-area-inset-bottom,0px));
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:rgba(5,21,46,.46);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  box-sizing:border-box;
}
.modal.is-hidden{display:none!important}
.result-modal{background:rgba(4,18,39,.55)}
/* margin:auto centraliza quando cabe; se for mais alto que a tela, permite rolar o overlay inteiro */
.modal-card{
  width:min(92vw,570px);
  max-width:100%;
  max-height:none;
  overflow:visible;
  border-radius:28px;
  border:1px solid rgba(112,210,255,.22);
  background:linear-gradient(180deg,rgba(14,58,118,.97),rgba(8,36,75,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.36);
  padding:30px;
  position:relative;
  flex:0 0 auto;
  margin-top:auto;
  margin-bottom:auto;
  margin-left:auto;
  margin-right:auto;
  animation:modalIn .22s cubic-bezier(.2,.85,.2,1);
}
body.modal-open{
  overflow:hidden!important;
  touch-action:none;
  overscroll-behavior:none;
}.modal-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-size:24px;cursor:pointer;display:grid;place-items:center;padding:0}.modal-close .tl-ico{width:20px;height:20px}.tutorial-card h2,.result-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:12px}.tutorial-steps li>span{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#ffd35b,#ff9e2d);display:grid;place-items:center;color:#271707;font-weight:1000}.tutorial-steps strong{font-size:13px}.tutorial-steps p{margin:4px 0 0;color:#d5e9f5;font-size:12px;line-height:1.45}.tutorial-ok{width:100%}.result-card{text-align:center;width:min(92vw,520px);overflow:visible}.result-icon{width:70px;height:70px;margin:0 auto 14px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#ffd75f,#ff8a32);color:#2a1708;box-shadow:0 12px 28px rgba(255,151,45,.22)}.result-icon .tl-ico{width:34px;height:34px}.result-icon .result-ico--play{display:none}.result-icon.is-demo .result-ico--star{display:none}.result-icon.is-demo .result-ico--play{display:block}.result-text{color:#d5eaf6;line-height:1.5;margin:0 auto 12px;max-width:410px}.result-stars{font-size:32px;letter-spacing:4px;color:#ffd25d;text-shadow:0 0 12px rgba(255,210,93,.32);margin-bottom:13px;display:flex;justify-content:center;gap:6px;min-height:34px}.result-stars .result-star{width:28px;height:28px;color:rgba(255,255,255,.28)}.result-stars .result-star.is-filled{color:#ffd25d;fill:currentColor;stroke:none}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-stats div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:11px}.result-stats span{display:block;font-size:8px;color:#cfe9f6;text-transform:uppercase}.result-stats strong{font-size:20px}
.result-time-slides{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;margin:14px -8px 0;padding:4px 18px 10px;scrollbar-width:none}.result-time-slides::-webkit-scrollbar{display:none}.result-time-slides.is-hidden{display:none!important}
.result-time-slide{flex:0 0 min(72%,220px);scroll-snap-align:center;scroll-snap-stop:normal;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);padding:14px 12px;display:grid;gap:4px;justify-items:center;opacity:.72;transform:scale(.94);transition:opacity .2s ease,transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.result-time-slide.is-current{opacity:1;transform:scale(1);border-color:rgba(255,212,105,.55);background:linear-gradient(180deg,rgba(255,210,93,.16),rgba(255,255,255,.06));box-shadow:0 10px 28px rgba(0,0,0,.18)}
.result-time-slide-label{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#9fd8f0}
.result-time-slide.is-current .result-time-slide-label{color:#ffe29a}
.result-time-slide-time{font-size:clamp(28px,7vw,36px);line-height:1;font-weight:950;color:#fff;letter-spacing:-.03em}
.result-time-slide-meta{font-size:11px;color:#cfe9f6;font-weight:700}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.result-actions .ghost-btn{grid-column:1/-1}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-20px;width:7px;height:13px;border-radius:2px;animation:confetti 1.6s ease-out forwards}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes solving{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}@keyframes confetti{to{transform:translateY(620px) rotate(560deg);opacity:0}}

/* responsive */
@media(max-width:1100px){
  .menu-main{max-width:560px}.menu-card{padding:30px}.game-main{grid-template-columns:minmax(0,1.34fr) minmax(250px,.58fr)}
  .board{--ball:clamp(38px,min(13vw,11cqw,12vh),64px)}
}
@media(max-width:760px){
  .topbar{height:66px;padding:calc(8px + var(--safe-top)) 11px 8px;max-width:100%}.brand-logo{width:108px}.icon-btn{width:42px;height:42px}.menu-main{display:flex;justify-content:center;margin-top:6px;padding:0 10px;max-width:100%}.menu-visual{display:none!important}.menu-card{min-height:auto;border-radius:25px;padding:26px 18px;width:100%}.menu-card h1{font-size:46px}.segmented.two{grid-template-columns:1fr}.level-grid{grid-template-columns:repeat(6,1fr)}.menu-actions{grid-template-columns:1fr}.record-strip{justify-content:space-between}.game-brand img{width:42px}.game-brand strong{font-size:14px}.game-brand small{font-size:9px;max-width:40vw}
  .game-screen{min-height:100dvh;min-height:100svh}
  .game-main{display:flex;flex-direction:column;margin-top:6px;padding:0 8px calc(8px + var(--safe-bottom));gap:8px;flex:1;min-height:0}
  .play-column{flex:1;min-height:0;gap:7px}
  .hud{gap:5px;max-width:none;width:100%;padding-right:calc(var(--nb-gs-safe,60px) + 12px)}.hud>div{min-height:52px;border-radius:13px;padding:7px 8px}.hud span{font-size:7px}.hud strong{font-size:17px}
  .goal-card{grid-template-columns:auto minmax(0,1fr);padding:10px 12px;border-radius:16px;gap:10px}.goal-copy h2{font-size:18px}.goal-board{min-height:70px;padding:6px 8px}.mini-peg{width:48px}
  .board-stage{padding:10px 8px;border-radius:20px;flex:1;min-height:0}
  .board{--ball:clamp(36px,min(18vw,15cqw,11vh),58px);padding:14px 6px 12px;gap:6px;min-height:min(52vh,420px)}
  .peg{padding:8px 2px 0;border-radius:14px;width:100%}.interaction-tip{display:none}
  .side-panel{display:grid;grid-template-columns:1fr;gap:8px;flex-shrink:0}
  .planner-card{display:none}
  .controls-card{grid-template-columns:1fr 1fr;padding:8px}.control-btn{min-height:56px;border-radius:13px}.control-btn span{font-size:19px}.control-btn b{font-size:9px}.keyboard-card{display:none}
  .modal{padding:max(10px,env(safe-area-inset-top,0px)) 12px max(10px,env(safe-area-inset-bottom,0px))}
  .modal-card{padding:20px 16px;border-radius:22px;width:min(94vw,520px)}
  .result-card h2{font-size:clamp(22px,6vw,32px);margin-bottom:8px}
  .result-icon{width:56px;height:56px;margin-bottom:10px;border-radius:18px}
  .result-icon .tl-ico{width:28px;height:28px}
  .result-text{font-size:13px;margin-bottom:8px}
  .result-stars{margin-bottom:8px;min-height:28px}
  .result-stars .result-star{width:24px;height:24px}
  .result-stats{gap:6px}.result-stats div{padding:9px}.result-stats strong{font-size:16px}
  .result-time-slides{margin-top:10px;padding:2px 10px 8px}
  .result-time-slide{flex-basis:min(78%,240px);padding:12px 10px}
  .result-time-slide-time{font-size:clamp(24px,7vw,32px)}
  .result-actions{grid-template-columns:1fr;margin-top:12px;gap:8px}.result-actions .ghost-btn{grid-column:auto}
  .result-actions .primary-btn,.result-actions .secondary-btn,.result-actions .ghost-btn{min-height:48px}
}
@media(max-width:1024px){
  .modal{
    height:100svh!important;
    max-height:100svh!important;
    min-height:100svh;
  }
}
@media(max-width:420px){
  .menu-card h1{font-size:40px}.segmented.four{grid-template-columns:repeat(2,1fr)}.level-grid{grid-template-columns:repeat(4,1fr)}.hud{grid-template-columns:repeat(3,minmax(0,1fr))}.goal-board{gap:8px}.mini-peg{width:44px}
  .goal-card{grid-template-columns:1fr;justify-items:stretch}.goal-copy h2{text-align:center;width:100%}
  .board{--ball:clamp(34px,min(19vw,16cqw,12vh),54px);padding:12px 4px 10px;min-height:min(48vh,380px)}
  .controls-card{grid-template-columns:1fr 1fr}
}
@media(max-height:560px) and (orientation:landscape){
  .topbar{height:54px;padding:5px 10px}.game-topbar .icon-btn{width:38px;height:38px}.game-brand img{width:38px}
  .game-main{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:7px;margin-top:6px;padding:0 7px 7px}
  .hud{margin-bottom:0;max-width:360px}.hud>div{min-height:43px;padding:5px 7px}.hud strong{font-size:16px}
  .goal-card{grid-template-columns:auto 1fr;padding:8px 10px}.goal-copy h2{font-size:16px}.goal-board{min-height:58px;padding:4px}.mini-rod{height:42px}.mini-ball{width:17px;height:17px}.mini-base{height:12px}
  .board-stage{padding:8px}.board{--ball:clamp(26px,min(10vh,8cqw),44px);padding:6px 6px 8px;gap:5px;min-height:0}
  .peg{padding:6px 2px 0}.interaction-tip{display:none}.side-panel{gap:6px}
  .planner-card{display:block;padding:10px}.planner-card h2{font-size:15px;margin-bottom:4px}.planner-card>p{font-size:9px;line-height:1.35}.progress-meter{margin-top:8px}
  .controls-card{padding:6px;gap:5px;grid-template-columns:1fr 1fr}.control-btn{min-height:48px}.keyboard-card{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ===== Menu print · Torre de Londres (mock mobile) ===== */
body:has(.menu-screen:not(.is-hidden)){
  background:#e8eef6;
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;
}
body:has(.menu-screen:not(.is-hidden)) .app-shell{
  background:transparent;
  overflow:auto;
}
body:has(.menu-screen:not(.is-hidden)) .app-shell::before,
body:has(.menu-screen:not(.is-hidden)) .app-shell::after{
  opacity:0;
  content:none!important;
  display:none!important;
}

.menu-screen{
  --tl-navy:#0b3d7a;
  --tl-blue:#1460b8;
  --tl-blue2:#0d4a9a;
  --tl-ink:#12325a;
  --tl-muted:#6b809c;
  --tl-gold:#f0b429;
  --tl-gold2:#f6d35a;
  --tl-card:#ffffff;
  --tl-line:#e4ebf3;
  --tl-soft:#f3f7fc;
  --tl-menu-w:480px;
  --tl-menu-pad:clamp(14px,4vw,22px);
  min-height:100dvh;
  padding-bottom:0;
  background:#e8eef6;
  overflow-x:hidden;
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;
}

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

.menu-screen .menu-topbar{
  max-width:var(--tl-menu-w);
  width:100%;
  height:auto;
  padding:calc(8px + var(--safe-top)) var(--tl-menu-pad) 0;
  justify-content:flex-end;
  margin-left:auto;
  margin-right:auto;
}
.menu-screen .menu-topbar .brand-logo,
.menu-screen .menu-topbar #menuSoundBtn,
.menu-screen .menu-help-btn{display:none!important}

.menu-screen .menu-main{
  max-width:var(--tl-menu-w);
  width:100%;
  margin:0 auto;
  padding:0 var(--tl-menu-pad) calc(22px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

.menu-setup{
  width:100%;
  background:var(--tl-card);
  border-radius:26px;
  box-shadow:0 10px 28px rgba(18,50,90,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.menu-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:280px;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  background:#7ec4f5;
  flex-shrink:0;
}
.menu-hero picture,
.menu-hero-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
}
.menu-hero picture{position:absolute;inset:0}
.menu-hero-fade{
  position:absolute;
  inset:auto 0 0;
  height:28%;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.35) 55%,#fff 100%);
  pointer-events:none;
  z-index:1;
}

.menu-setup-body{
  padding:10px 16px 16px;
  background:transparent;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}

.menu-screen .menu-card,
.menu-screen .menu-setup{
  width:100%;
  max-width:none;
  margin:0;
  min-height:0;
  background:var(--tl-card)!important;
  border:0!important;
  border-radius:26px!important;
  box-shadow:0 10px 28px rgba(18,50,90,.10)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  color:var(--tl-ink);
}
.menu-screen .menu-card{
  padding:18px 16px 16px!important;
}
.menu-screen .menu-setup{
  padding:0!important;
  overflow:hidden;
}

.menu-screen .choice-group{margin:0;border:0;padding:0}
.menu-screen .section-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--tl-ink);
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.menu-screen .section-label.inline{margin:0}

/* Lucide UI icons */
.tl-ico{
  width:1em;height:1em;
  display:block;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.sound-btn{position:relative}
.sound-btn .sound-ico{width:22px;height:22px}
.sound-btn .sound-ico--off{display:none}
.sound-btn.is-muted .sound-ico--on{display:none}
.sound-btn.is-muted .sound-ico--off{display:block}

.section-ico{
  width:28px;height:28px;
  border-radius:9px;
  display:grid;place-items:center;
  position:relative;
  flex-shrink:0;
}
.section-ico .tl-ico{width:16px;height:16px}
.section-ico--mode{
  background:#e7f0ff;
  color:#0B4A92;
}
.section-ico--journey{
  background:#e7f0ff;
  color:#0B4A92;
}
.section-ico--target{
  background:#fff3e6;
  color:#d97706;
}

.menu-screen .segmented.stack{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.menu-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(--tl-line)!important;
  background:#fff!important;
  color:var(--tl-ink)!important;
  text-align:left;
  box-shadow:none;
  grid-template-columns:unset;
  grid-template-rows:unset;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.menu-screen .segment>span{grid-row:unset;font-size:inherit;color:inherit}
.menu-screen .seg-ico{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  background:#eef4fb;
}
.menu-screen .seg-ico--journey{
  background:#1a6fc4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  color:#ffe27a;
}
.menu-screen .seg-ico--journey .tl-ico--route{
  width:22px;height:22px;
}
.ico-balls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  line-height:0;
}
.ico-balls i{
  display:block;
  width:10px;height:10px;
  border-radius:50%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.12);
}
.ico-balls .ball-red{background:#ef4d4d}
.ico-balls .ball-blue{background:#2d8fff}
.ico-balls .ball-yellow{background:#f0b429}
.ball-red{background:radial-gradient(circle at 32% 28%,#ff8a8a,#ef4d4d 55%,#c62828)}
.ball-blue{background:radial-gradient(circle at 32% 28%,#7eb8ff,#2d8fff 55%,#1565c0)}
.ball-green{background:radial-gradient(circle at 32% 28%,#6ee8a0,#27c96f 55%,#1b8a4a)}
.ball-yellow{background:radial-gradient(circle at 32% 28%,#ffe27a,#f0b429 55%,#d4890a)}

.menu-screen .seg-copy{display:grid;gap:2px;min-width:0;flex:1}
.menu-screen .seg-copy b{font-size:16px;font-weight:900;letter-spacing:-.01em}
.menu-screen .seg-copy small,
.menu-screen .segment small{
  color:var(--tl-muted)!important;
  font-size:12px!important;
  line-height:1.35;
  white-space:normal;
  font-weight:700;
}
.menu-screen .seg-check{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  border:2px solid #B8CAE0;
  background:transparent;
  display:grid;
  place-items:center;
}
.menu-screen .seg-check .tl-ico--check{
  display:none;
  width:18px;height:18px;
  color:#1267C4;
}
.menu-screen .segment:hover{
  transform:translateY(-1px);
  border-color:#c5daf5!important;
}
.menu-screen .segment.is-selected{
  background:linear-gradient(180deg,#1a69c9 0%,#0d4a9a 100%)!important;
  border:2px solid var(--tl-gold)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(13,74,154,.28)!important;
}
.menu-screen .segment.is-selected .seg-ico--journey{
  background:#2a7ad4;
  box-shadow:none;
  color:#ffe27a;
}
.menu-screen .segment.is-selected small{color:rgba(255,255,255,.9)!important}
.menu-screen .segment.is-selected .seg-check{
  border-color:transparent;
  background:#fff;
}
.menu-screen .segment.is-selected .seg-check .tl-ico--check{
  display:block;
}

.menu-screen .journey-card{
  gap:12px;
  padding-bottom:14px!important;
}
.menu-screen .journey-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0;
}
.journey-badge{
  font-size:11px;
  font-weight:800;
  color:var(--tl-blue);
  background:#e7f0ff;
  padding:6px 11px;
  border-radius:999px;
  white-space:nowrap;
}

.journey-preview{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:16/9;
  background:
    radial-gradient(ellipse 55% 45% at 50% 28%,rgba(255,236,180,.7),transparent 62%),
    linear-gradient(180deg,#d7e6f6 0%,#a8bfd8 42%,#7f97b2 78%,#6a8098 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.journey-preview::before{
  content:"";
  position:absolute;
  inset:10% 8% auto;
  height:42%;
  border-radius:40% 40% 0 0 / 60% 60% 0 0;
  background:
    radial-gradient(ellipse at 20% 70%,rgba(255,255,255,.35),transparent 45%),
    radial-gradient(ellipse at 80% 70%,rgba(255,255,255,.28),transparent 45%),
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(120,140,165,.08));
  box-shadow:
    inset 18% 0 0 -12px rgba(90,110,135,.18),
    inset -18% 0 0 -12px rgba(90,110,135,.18);
  pointer-events:none;
  z-index:0;
}
.journey-preview-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%;
  z-index:2;
}
.journey-preview picture{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
}
.journey-preview-photo.is-missing{display:none}
.journey-preview:has(.journey-preview-photo:not(.is-missing)) .journey-preview-scene{display:none}
.journey-preview-scene{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(18px,6vw,36px);
  padding:18px 16px 16px;
}
.jp-glow{
  position:absolute;
  left:50%;top:18%;
  width:70%;height:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,244,200,.7),transparent 70%);
  pointer-events:none;
}
.jp-peg{
  position:relative;
  width:52px;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:3px;
  padding-bottom:12px;
  z-index:1;
}
.jp-peg--1{height:72px}
.jp-peg--2{height:96px}
.jp-peg--3{height:120px}
.jp-rod{
  position:absolute;
  bottom:10px;
  width:8px;
  border-radius:6px;
  background:linear-gradient(90deg,#8a5528,#f0c878 48%,#6e4018);
  z-index:0;
  box-shadow:0 0 8px rgba(0,0,0,.15);
}
.jp-peg--1 .jp-rod{height:42px}
.jp-peg--2 .jp-rod{height:64px}
.jp-peg--3 .jp-rod{height:92px}
.jp-base{
  position:absolute;
  left:4%;right:4%;bottom:0;
  height:12px;
  border-radius:7px;
  background:linear-gradient(180deg,#e0b066,#a86a2a);
  box-shadow:0 4px 8px rgba(80,40,10,.28);
  z-index:2;
}
.jp-ball{
  position:relative;
  z-index:1;
  width:28px;height:28px;
  border-radius:50%;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.4),
    inset 0 -4px 8px rgba(0,0,0,.22),
    0 4px 8px rgba(0,0,0,.18);
}
.jp-ball::after{
  content:"";
  position:absolute;
  left:22%;top:16%;
  width:34%;height:24%;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  filter:blur(1px);
}

.journey-challenge{
  margin:2px 0 0;
  text-align:center;
  font-size:15px;
  font-weight:900;
  color:var(--tl-ink);
}

.level-track{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items:center;
  gap:clamp(2px,1.2vw,6px);
  overflow:visible;
  padding:4px 0 8px;
}
.menu-screen .level-btn{
  flex:1 1 0;
  width:auto;
  min-width:0;
  max-width:none;
  aspect-ratio:1;
  border-radius:50%;
  border:0;
  background:#e8eef6;
  color:#7a8fa8;
  font-size:clamp(10px,2.8vw,13px);
  font-weight:900;
  font-family:inherit;
  cursor:pointer;
  position:relative;
  box-shadow:none;
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.menu-screen .level-btn::after{display:none!important}
.menu-screen .level-btn.done{
  background:#2fbf6a;
  color:transparent;
}
.menu-screen .level-btn.done::before{
  content:"";
  position:absolute;
  left:50%;top:45%;
  width:7px;height:12px;
  border:solid #fff;
  border-width:0 2.4px 2.4px 0;
  transform:translate(-50%,-55%) rotate(45deg);
}
.menu-screen .level-btn.selected{
  background:linear-gradient(180deg,#ffd25c,#f0a020);
  color:#3b2106;
  box-shadow:0 0 0 3px rgba(240,178,41,.35),0 6px 14px rgba(240,160,32,.35);
  transform:scale(1.08);
}
.menu-screen .level-btn.selected.done{
  color:#3b2106;
}
.menu-screen .level-btn.selected.done::before{display:none}
.menu-screen .level-btn.locked{
  opacity:.55;
  cursor:not-allowed;
}
.menu-screen .level-btn.current:not(.selected):not(.done){
  box-shadow:inset 0 0 0 2px #7eb8ff;
  color:var(--tl-blue);
  background:#fff;
}

.menu-screen .menu-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:4px;
  grid-template-columns:unset;
}
.menu-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;
  gap:10px;
}
.menu-screen .primary-btn::before,
.menu-screen .primary-btn::after{display:none!important}
.menu-screen .primary-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.menu-screen .play-ico{
  width:20px;height:20px;
  margin:0;
  flex-shrink:0;
  color:#fff;
  display:grid;
  place-items:center;
}
.menu-screen .play-ico .tl-ico{width:18px;height:18px}
.menu-screen .btn-castle{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  opacity:.2;
  color:#fff;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.menu-screen .btn-castle .tl-ico{width:26px;height:26px}

.menu-screen .secondary-btn{
  border:0!important;
  background:transparent!important;
  color:var(--tl-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;
}
.menu-screen .secondary-btn .info-ico{
  width:20px;height:20px;
  border-radius:50%;
  background:var(--tl-blue);
  color:#fff;
  display:grid;place-items:center;
  line-height:1;
}
.menu-screen .secondary-btn .info-ico .tl-ico{width:14px;height:14px}
.menu-screen .secondary-btn:hover{
  background:transparent!important;
  border:0!important;
  color:var(--tl-blue2)!important;
}

.menu-screen .record-strip{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:0;
  align-items:center;
  margin:2px 0 0;
  padding:14px 8px;
  border:0;
  border-radius:22px;
  background:var(--tl-card);
  box-shadow:0 10px 28px rgba(18,50,90,.10);
}
.menu-screen .record-strip > div:not(.record-divider){
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:left;
  min-width:0;
}
.menu-screen .record-divider{
  width:1px;
  height:36px;
  background:#d7e0ec;
  justify-self:center;
}
.menu-screen .record-strip .stat-ico{
  width:28px;height:28px;
  border-radius:0;
  background:transparent;
  position:relative;
  flex-shrink:0;
  display:grid;
  place-items:center;
}
.menu-screen .record-strip .stat-ico .tl-ico{width:22px;height:22px}
.menu-screen .record-strip .stat-ico.gold{color:#e89410}
.menu-screen .record-strip .stat-ico.cyan{color:#2f8fff}
.menu-screen .record-strip strong{
  font-size:20px;
  color:var(--tl-ink);
  line-height:1.1;
  font-weight:900;
  flex-shrink:0;
}
.menu-screen .record-strip span:not(.stat-ico){
  font-size:11px;
  color:var(--tl-muted);
  max-width:8.8em;
  line-height:1.2;
  font-weight:700;
}

@media(min-width:760px){
  .menu-screen{--tl-menu-w:520px}
  .menu-hero{max-height:300px}
  .menu-screen .menu-main{gap:16px}
  .menu-screen .menu-card{padding:20px 18px 18px!important;border-radius:28px!important}
  .menu-screen .menu-setup{border-radius:28px!important}
  .menu-setup-body{padding:12px 18px 18px}
  .menu-screen .segment{min-height:84px;padding:14px 16px}
  .jp-peg{width:58px}
  .jp-ball{width:32px;height:32px}
}
@media(max-width:420px){
  .menu-hero{max-height:220px}
  .menu-setup-body{padding:8px 14px 14px}
  .menu-screen .menu-card{padding:16px 14px 14px!important;border-radius:22px!important}
  .menu-screen .menu-setup{border-radius:22px!important}
  .menu-screen .segment{min-height:72px;padding:11px 12px;gap:10px}
  .menu-screen .seg-ico{width:40px;height:40px;border-radius:12px}
  .menu-screen .seg-check{width:30px;height:30px}
  .menu-screen .seg-check .tl-ico--check{width:17px;height:17px}
  .menu-screen .seg-ico--journey .tl-ico--route{width:20px;height:20px}
  .menu-screen .seg-copy b{font-size:15px}
  .menu-screen .seg-copy small{font-size:11px!important}
  .menu-screen .record-strip{padding:12px 4px;border-radius:18px}
  .menu-screen .record-strip strong{font-size:18px}
  .menu-screen .record-strip span:not(.stat-ico){font-size:10px;max-width:7.8em}
}
@media(prefers-reduced-motion:reduce){
  .menu-hero-photo{animation:none}
}

/* ===== Tela de jogo · visual 3D (referência) ===== */
.game-screen{
  --tl-ink:#173a63;
  --tl-ink-soft:#5a7696;
  --tl-blue:#1f7cff;
  --tl-blue-deep:#155dcc;
  --tl-yellow:#ffd84a;
  --tl-yellow-deep:#f0b922;
  --tl-card:#ffffff;
  position:relative;
  color:var(--tl-ink);
  font-family:"Nunito",ui-rounded,system-ui,sans-serif;
  overflow:hidden;
}
.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;
  object-position:center 58%;
}
body:has(.game-screen:not(.is-hidden)){background:#b7dcff}
body:has(.game-screen:not(.is-hidden)) .app-shell{background:transparent}
body:has(.game-screen:not(.is-hidden)) .app-shell::after{display:none}
.game-screen > :not(.game-scene){position:relative;z-index:1}

/* Layout: HUD + tabuleiro na coluna principal; desafio no painel lateral */
.game-screen .game-main{
  margin-top:calc(6px + var(--safe-top));
  gap:10px;
  align-items:stretch;
}
.game-screen .play-column{
  gap:6px;
  flex:1;
  min-height:0;
}

/* HUD — reseta grid antigo que empilhava/sobreponía números */
.game-screen .hud{
  display:block!important;
  grid-template-columns:none!important;
  gap:0!important;
  width:calc(100% - var(--nb-gs-safe,60px) - 8px);
  max-width:560px;
  padding:0!important;
  margin:0;
  flex-shrink:0;
}
.game-screen .hud-bar,
.game-screen .hud > .hud-bar{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  width:100%;
  min-height:58px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--tl-card)!important;
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 10px 28px rgba(23,58,99,.12), 0 2px 0 rgba(255,255,255,.85) inset!important;
  backdrop-filter:none!important;
}
.game-screen .hud-stat{
  display:flex;
  align-items:center;
  gap:7px;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  padding:0 4px;
}
.game-screen .hud-ico{
  width:26px;
  height:26px;
  flex:0 0 auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(23,58,99,.15));
}
.game-screen .hud-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  min-width:0;
  overflow:hidden;
}
.game-screen .hud-copy span{
  display:block;
  font-size:8px;
  color:var(--tl-ink-soft);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.game-screen .hud-copy strong,
.game-screen .hud strong{
  display:block;
  font-size:clamp(15px,4.1vw,20px);
  color:var(--tl-ink)!important;
  line-height:1.05;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Goal */
.game-screen .side-panel .goal-card{
  display:grid;
  grid-template-columns:1fr;
  justify-items:stretch;
  gap:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  position:relative;
  z-index:5;
  flex:0 0 auto;
  width:100%;
  max-width:none;
  margin-inline:0;
}
.game-screen .goal-badge-wrap{
  position:relative;
  z-index:2;
  margin-bottom:-14px;
  display:flex;
  justify-content:center;
}
.game-screen .goal-badge{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.28em;
  min-height:34px;
  padding:5px 20px;
  border-radius:999px;
  background:linear-gradient(180deg,#3d9bff 0%, var(--tl-blue) 48%, var(--tl-blue-deep) 100%);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.02em;
  box-shadow:0 8px 18px rgba(31,124,255,.35), inset 0 1px rgba(255,255,255,.45);
  white-space:nowrap;
  position:relative;
}
.game-screen .goal-badge em{
  font-style:normal;
  color:#ffe56a;
  text-shadow:0 1px 0 rgba(20,70,140,.35);
}
.game-screen .goal-badge::before,
.game-screen .goal-badge::after{
  content:"";
  position:absolute;
  top:50%;
  width:12px;
  height:12px;
  background:
    radial-gradient(circle at 50% 50%, #ffe56a 0 22%, transparent 24%),
    linear-gradient(90deg, transparent 46%, #ffe56a 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, #ffe56a 46% 54%, transparent 54%);
  transform:translateY(-50%);
  pointer-events:none;
}
.game-screen .goal-badge::before{left:-16px}
.game-screen .goal-badge::after{right:-16px}
/* Alinhamento das peças na base do pino — em CSS (CSP do Hostinger bloqueia style="" inline) */
.game-screen .peg[data-peg="0"]{--peg-base:0.09}
.game-screen .peg[data-peg="1"]{--peg-base:0.13}
.game-screen .peg[data-peg="2"]{--peg-base:0.22}
.game-screen .goal-board .mini-peg:nth-child(1){--peg-base:0.09}
.game-screen .goal-board .mini-peg:nth-child(2){--peg-base:0.13}
.game-screen .goal-board .mini-peg:nth-child(3){--peg-base:0.22}

/* Peças sem brilho em meia-lua (gradiente em folha de estilo, não via JS) */
.game-screen .ball[data-ball="0"],
.drag-layer .ball[data-ball="0"],
.game-screen .mini-ball[data-ball="0"]{
  background-image:radial-gradient(circle at 38% 32%, #ffc9c9 0%, #ef4444 40%, #dc2626 68%, #991b1b 100%)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:transparent!important;
}
.game-screen .ball[data-ball="1"],
.drag-layer .ball[data-ball="1"],
.game-screen .mini-ball[data-ball="1"]{
  background-image:radial-gradient(circle at 38% 32%, #b8d8ff 0%, #2f8cff 40%, #2563eb 68%, #1d4ed8 100%)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:transparent!important;
}
.game-screen .ball[data-ball="2"],
.drag-layer .ball[data-ball="2"],
.game-screen .mini-ball[data-ball="2"]{
  background-image:radial-gradient(circle at 38% 32%, #bbf7d0 0%, #22c55e 40%, #16a34a 68%, #15803d 100%)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:transparent!important;
}

.game-screen .goal-board{
  --mini-ball:clamp(48px, min(13vw, 11vh), 66px);
  width:100%;
  min-height:calc(var(--mini-ball) * 4.6);
  height:auto;
  padding:clamp(32px, 4vh, 44px) clamp(10px, 2.5vw, 18px) clamp(14px, 1.8vh, 20px);
  border-radius:22px;
  background:var(--tl-card);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 12px 30px rgba(23,58,99,.12);
  display:flex;
  align-items:flex-end;
  justify-content:space-evenly;
  gap:clamp(16px, 4.5vw, 40px);
  box-sizing:border-box;
}
.game-screen .mini-peg{
  width:calc(var(--mini-ball) * 1.04);
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.game-screen .mini-unit{
  position:relative;
  width:100%;
  display:block;
}
.game-screen .mini-full{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.18));
}
.game-screen .mini-stack{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:calc(var(--peg-base, .35) * 100%);
  z-index:2;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:0;
  pointer-events:none;
}
.game-screen .mini-ball{
  width:94%;
  height:auto;
  aspect-ratio:1;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
.game-screen .mini-ball::before,
.game-screen .mini-ball::after{display:none!important}
.game-screen .mini-rod,
.game-screen .mini-base,
.game-screen .mini-base-img{display:none!important}

/* Tabuleiro — pinos completos (base+haste) */
.game-screen .board-stage{
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  padding:0;
  border-radius:0;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  container-type:size;
  padding-bottom:clamp(2px, 1vh, 12px);
}
.game-screen .board{
  --ball:clamp(92px, min(29vw, 15vh), 140px);
  --ball-gap:0px;
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  flex:0 1 auto;
  min-height:0;
  height:auto;
  max-height:100%;
  width:100%;
  max-width:560px;
  margin-inline:auto;
  align-content:end;
  align-items:end;
  gap:clamp(14px, 4vw, 44px);
}
.game-screen .peg{
  height:auto;
  min-height:0;
  padding:0;
  justify-content:flex-end;
  align-items:center;
}
.game-screen .peg-unit{
  position:relative;
  width:min(100%, var(--ball));
  display:block;
}
.game-screen .peg-full{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.28));
}
.game-screen .balls{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:calc(var(--peg-base, .3) * 100%);
  z-index:3;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:flex-start;
  gap:var(--ball-gap);
  padding:0;
  pointer-events:none;
}
.game-screen .ball{
  width:94%;
  height:auto;
  aspect-ratio:1;
  flex-shrink:0;
  pointer-events:auto;
  background-color:transparent!important;
  box-shadow:none!important;
  overflow:visible;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.26));
}
.game-screen .ball::before,
.game-screen .ball::after{display:none!important}
.game-screen .ball.top-ball:hover{filter:drop-shadow(0 6px 8px rgba(0,0,0,.26)) brightness(1.06)}
.game-screen .ball.selected-ball{
  transform:translateY(-8px) scale(1.05);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.3));
  box-shadow:0 0 0 3px #ffd35c!important;
  border-radius:50%;
}
.game-screen .peg-scene,
.game-screen .rod,
.game-screen .base,
.game-screen .base-img{display:none!important}
.game-screen .peg-name{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.game-screen .peg.matched .peg-full{
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.28)) drop-shadow(0 0 12px rgba(255,208,96,.5));
}
.game-screen .peg.selected .peg-unit,
.game-screen .peg.valid .peg-unit{
  filter:drop-shadow(0 0 10px rgba(31,124,255,.28));
}
.game-screen .interaction-tip{display:none}
.game-screen .hint-ribbon{
  border:1px solid rgba(255,212,105,.55);
  background:rgba(255,255,255,.96);
  color:#8a5a00;
  box-shadow:0 10px 26px rgba(23,58,99,.16);
}

/* Controles */
.game-screen .side-card{
  border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 34px rgba(23,58,99,.12);
  backdrop-filter:blur(10px);
  color:var(--tl-ink);
}
.game-screen .planner-card h2{color:var(--tl-ink)}
.game-screen .planner-card>p{color:var(--tl-ink-soft)}
.game-screen .progress-meter>span{
  background:rgba(23,58,99,.08);
  border-color:rgba(23,58,99,.08);
}
.game-screen .progress-meter small{color:var(--tl-ink-soft)}
.game-screen .controls-card{
  padding:6px 0 0;
  gap:10px;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.game-screen .control-btn{
  min-height:56px;
  border-radius:999px;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(23,58,99,.12);
}
.game-screen .control-btn b{font-size:14px}
.game-screen .control-btn .tl-ico{width:20px;height:20px}
.game-screen .control-btn.accent2{
  background:#fff;
  border:2px solid var(--tl-blue);
  color:var(--tl-blue);
}
.game-screen .control-btn.accent2:hover:not(:disabled){
  background:#f3f8ff;
  border-color:var(--tl-blue-deep);
  color:var(--tl-blue-deep);
}
.game-screen .control-btn.accent{
  background:linear-gradient(180deg,var(--tl-yellow),var(--tl-yellow-deep));
  border:2px solid rgba(196,140,10,.35);
  color:#2b2208;
  box-shadow:0 8px 0 rgba(196,140,10,.22), 0 14px 24px rgba(196,140,10,.2);
}
.game-screen .control-btn.accent:hover:not(:disabled){filter:brightness(1.03)}
.game-screen .keyboard-card strong{color:var(--tl-ink)}
.game-screen .keyboard-card p{color:var(--tl-ink-soft)}
.game-screen .keyboard-card kbd{
  background:rgba(23,58,99,.06);
  border-color:rgba(23,58,99,.12);
  color:var(--tl-ink);
}

.drag-layer .ball{
  background-color:transparent!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.55)!important;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35)) brightness(1.05);
}
.drag-layer .ball::before,
.drag-layer .ball::after{display:none!important}

@media(max-width:760px){
  .game-screen .game-main{
    margin-top:calc(4px + var(--safe-top));
    padding:0 10px calc(8px + var(--safe-bottom));
    gap:8px;
  }
  .game-screen .play-column{gap:5px}
  .game-screen .hud{
    width:calc(100% - var(--nb-gs-safe,60px) - 6px);
    max-width:none;
  }
  .game-screen .hud-bar,
  .game-screen .hud > .hud-bar{
    min-height:52px;
    padding:6px 10px;
    gap:2px;
  }
  .game-screen .hud-stat{gap:6px;padding:0 2px}
  .game-screen .hud-ico{width:24px;height:24px}
  .game-screen .hud-copy span{font-size:7px;letter-spacing:.04em}
  .game-screen .hud-copy strong,
  .game-screen .hud strong{font-size:clamp(14px,4.6vw,18px)}
  .game-screen .goal-badge{min-height:28px;font-size:13px;padding:4px 14px}
  .game-screen .board{
    --ball:clamp(68px, min(26vw, 13vh), 102px);
    gap:clamp(14px, 3.8vw, 32px);
  }
  .game-screen .board-stage{
    justify-content:flex-end;
    padding-bottom:2px;
    flex:1 1 auto;
    min-height:0;
    max-height:min(52vh, 460px);
    overflow:hidden;
  }
  .game-screen .side-panel{gap:8px}
  .game-screen .side-panel .goal-board{
    --mini-ball:clamp(34px, min(10vw, 8vh), 48px);
    min-height:calc(var(--mini-ball) * 4.35);
    padding:28px 8px 10px;
    gap:clamp(10px, 3vw, 22px);
  }
  .game-screen .controls-card{padding:2px 0 0;gap:8px}
  .game-screen .control-btn{min-height:50px}
  .game-screen .control-btn b{font-size:13px}
}
@media(max-width:380px){
  .game-screen .hud-copy span{font-size:6.5px}
  .game-screen .hud-stat{gap:4px}
  .game-screen .side-panel .goal-board{--mini-ball:clamp(28px, 9vw, 40px)}
  .game-screen .board{--ball:clamp(64px, min(28vw, 12vh), 96px)}
  .game-screen .board-stage{max-height:min(48vh, 400px)}
}
@media(min-width:761px){
  .game-screen .hud{width:min(520px, calc(100% - var(--nb-gs-safe,60px) - 8px))}
  .game-screen .side-panel .goal-board{
    --mini-ball:clamp(36px, min(4.2vw, 7vh), 52px);
  }
  .game-screen .board{
    --ball:clamp(112px, min(14vw, 16vh, 28cqh), 150px);
    gap:clamp(28px, 4vw, 52px);
    max-width:520px;
  }
  .game-screen .board-stage{justify-content:flex-end;padding-bottom:8px}
  .game-screen .control-btn{min-height:62px}
  .game-screen .control-btn b{font-size:15px}
}
/* Desktop only — redistribui pinos/escala; mobile/tablet intactos */
@media(min-width:1024px){
  .game-screen .game-main{
    grid-template-columns:minmax(0,1fr) minmax(260px,300px);
    gap:22px;
    max-width:1360px;
    margin-top:calc(10px + var(--safe-top));
    padding:0 28px 18px;
    align-items:stretch;
  }
  .game-screen .play-column{
    gap:10px;
    min-width:0;
  }
  .game-screen .hud{
    width:min(640px, calc(100% - var(--nb-gs-safe,60px) - 16px));
    max-width:none;
  }
  .game-screen .hud-bar,
  .game-screen .hud > .hud-bar{
    min-height:58px;
    padding:8px 18px;
  }
  .game-screen .side-panel .goal-board{
    --mini-ball:clamp(30px, min(2.4vw, 4.8vh), 42px);
    min-height:calc(var(--mini-ball) * 4.35);
    padding:30px 14px 12px;
    gap:clamp(10px, 1.6vw, 20px);
    border-radius:20px;
    justify-content:center;
  }
  .game-screen .side-panel .goal-badge{
    min-height:30px;
    font-size:13px;
    padding:4px 16px;
  }
  .game-screen .side-panel .goal-badge::before,
  .game-screen .side-panel .goal-badge::after{
    width:10px;
    height:10px;
  }
  .game-screen .side-panel .goal-badge::before{left:-12px}
  .game-screen .side-panel .goal-badge::after{right:-12px}
  .game-screen .mini-peg{
    width:calc(var(--mini-ball) * 1.04);
  }
  .game-screen .board-stage{
    justify-content:flex-end;
    align-items:center;
    padding-bottom:8px;
    flex:1 1 auto;
    min-height:0;
    overflow:visible;
  }
  .game-screen .board{
    /* cabe o pino A (aspecto ~3.8) dentro da área útil */
    --ball:clamp(96px, min(8.8vw, 12vh, calc(100cqh / 3.95)), 132px);
    max-width:min(720px, 100%);
    width:100%;
    margin-inline:auto;
    gap:clamp(40px, 4.2vw, 80px);
    justify-items:center;
    align-items:end;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .game-screen .peg{
    width:100%;
    max-width:calc(var(--ball) + 12px);
  }
  .game-screen .peg-unit{
    width:var(--ball);
    max-width:100%;
  }
  .game-screen .side-panel{
    gap:14px;
    align-content:start;
    padding-top:4px;
  }
  .game-screen .controls-card{
    padding:4px 0 0;
    gap:12px;
  }
  .game-screen .control-btn{
    min-height:64px;
  }
  .game-screen .control-btn b{font-size:15px}
}
@media(min-width:1280px){
  .game-screen .game-main{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:28px;
    max-width:1440px;
    padding:0 36px 22px;
  }
  .game-screen .hud{
    width:min(680px, calc(100% - var(--nb-gs-safe,60px) - 16px));
  }
  .game-screen .side-panel .goal-board{
    --mini-ball:clamp(32px, min(2.2vw, 4.6vh), 44px);
    padding:32px 16px 14px;
    gap:clamp(12px, 1.8vw, 24px);
  }
  .game-screen .board{
    --ball:clamp(104px, min(8.5vw, 12.5vh, calc(100cqh / 3.95)), 140px);
    max-width:min(800px, 100%);
    gap:clamp(48px, 4.6vw, 92px);
  }
}
@media(min-width:1440px){
  .game-screen .board{
    --ball:clamp(112px, min(8.2vw, 13vh, calc(100cqh / 3.95)), 148px);
    max-width:min(860px, 100%);
    gap:clamp(56px, 5vw, 104px);
  }
  .game-screen .side-panel .goal-board{
    --mini-ball:clamp(34px, min(2vw, 4.4vh), 46px);
    gap:clamp(14px, 1.6vw, 26px);
  }
}
@media(max-height:700px) and (orientation:portrait){
  .game-screen .side-panel .goal-board{
    --mini-ball:clamp(28px, 7.5vw, 40px);
    padding:26px 10px 10px;
  }
  .game-screen .board{--ball:clamp(60px, min(22vw, 11vh), 92px)}
  .game-screen .board-stage{max-height:min(38vh, 320px)}
  .game-screen .hud-bar,
  .game-screen .hud > .hud-bar{min-height:48px;padding:6px 10px}
}

#helpModal .help-blog-cta{
  display:flex;
  width:100%;
  min-height:52px;
  margin-bottom:8px;
  padding:0 18px;
  border-radius:16px;
  align-items:center;
  justify-content:center;
  font-weight:950;
  text-decoration:none;
  color:#fff;
  border:0;
  background:linear-gradient(90deg,#FF9C1D 0,#F53D8B 28%,#8C46F3 57%,#0A68FF 100%);
  box-shadow:0 12px 26px rgba(95,70,230,.22);
  transition:.16s ease;
}
#helpModal .help-blog-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(95,70,230,.26);
}