:root{
  --ui-bg:#304a60;
  --ui-surface:#2a475f;
  --ui-surface-raised:#243f56;
  --ui-surface-soft:#20384d;
  --ui-surface-deep:#172f42;
  --ui-line:#3b5a72;
  --ui-text:#f7fbff;
  --ui-text-soft:#b8cad8;
  --ui-text-muted:#8fa7b8;
  --ui-accent:#ffc229;
  --ui-accent-dark:#df8c00;
  --ui-accent-ink:#563800;
  --ui-success:#48d685;
  --ui-danger:#ff6b65;
  --ui-radius-xs:8px;
  --ui-radius-sm:11px;
  --ui-radius-md:15px;
  --ui-radius-lg:20px;
  --ui-radius-xl:26px;
  --ui-control:48px;
  --ui-shadow-sm:0 3px 0 #172f42;
  --ui-shadow-md:0 5px 0 #172f42;
  --ui-shadow-accent:0 5px 0 var(--ui-accent-dark);
  font-family:"Quicksand",system-ui,sans-serif;
  color-scheme:dark;
}

.ui-icon{width:1em;height:1em;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:1em;line-height:1;pointer-events:none}

html,body{background:var(--ui-bg);font-family:"Quicksand",system-ui,sans-serif}
button,input,select,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #fff;outline-offset:3px}

.app{background:var(--ui-bg);padding:max(10px,env(safe-area-inset-top)) clamp(10px,2.5vw,20px) max(10px,env(safe-area-inset-bottom));grid-template-rows:auto auto minmax(0,1fr) auto;gap:0}

.screen{background:var(--ui-bg);padding:20px}
.main-menu{background:var(--ui-bg)}
.loading-card,.menu-card{width:min(92vw,410px);padding:0;text-align:center}

.brand-mark{width:66px;height:66px;margin:0 auto 13px;display:grid;place-items:center;border-radius:20px;background:var(--ui-accent);color:var(--ui-accent-ink);box-shadow:0 5px 0 var(--ui-accent-dark)}
.brand-mark-large{width:76px;height:76px;border-radius:23px}
.brand-mark .ui-icon{width:35px;height:35px;font-size:35px}
.brand-mark-large .ui-icon{width:40px;height:40px;font-size:40px}
.ui-kicker{display:block;margin-bottom:6px;color:var(--ui-text-muted);font-size:10px;line-height:1;font-weight:700;letter-spacing:1.5px}
.loading-card h1,.menu-card h1{font-family:var(--display-font);font-size:clamp(38px,12vw,50px);line-height:.95;letter-spacing:.5px;color:var(--ui-text)}
.loading-card p,.menu-subtitle{max-width:330px;margin:11px auto 0;color:var(--ui-text-soft);font-size:13px;line-height:1.45;font-weight:600}
.loading-meta{display:flex;align-items:center;justify-content:space-between;margin-top:25px;color:var(--ui-text-muted);font-size:9px;font-weight:700;letter-spacing:1px}
.loading-meta strong{color:var(--ui-text);font-size:11px;font-variant-numeric:tabular-nums}
.loading-bar{height:10px;margin-top:8px;border-radius:999px;background:var(--ui-surface-deep);box-shadow:none}
.loading-bar span{background:var(--ui-accent);transition:width .18s ease}

.menu-actions{display:grid;gap:9px;margin-top:24px}
.menu-actions .big-btn{margin-top:0}
.menu-play-btn{min-height:54px}
.big-btn{min-height:var(--ui-control);margin-top:8px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-soft);box-shadow:var(--ui-shadow-sm);font-family:"Quicksand",system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.3px;transition:transform .1s ease,box-shadow .1s ease,background .12s ease}
.big-btn:hover{background:#29475f}
.big-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ui-surface-deep)}
.big-btn.primary{background:var(--ui-accent);color:var(--ui-accent-ink);box-shadow:var(--ui-shadow-accent)}
.big-btn.primary:hover{background:#ffd04c}
.big-btn.secondary{background:var(--ui-surface-raised)}
.big-btn.ghost{background:transparent;box-shadow:none;color:var(--ui-text-soft)}
.big-btn.ghost:hover{background:var(--ui-surface-soft)}
.action-btn{display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 16px;font-size:13px}
.button-main{display:flex;align-items:center;gap:10px}
.button-main .ui-icon{width:19px;height:19px;font-size:19px}
.button-tail{width:18px;height:18px;font-size:18px;opacity:.7}
.menu-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.compact-btn,.row-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
.compact-btn .ui-icon,.row-btn .ui-icon{width:17px;height:17px;font-size:17px}
.button-list{display:grid;gap:1px;margin-top:10px}
.row-btn{justify-content:flex-start;margin-top:7px}

.top-shell{width:min(100%,calc(100vh - 298px),560px);margin:0 auto 8px;display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;align-items:stretch}
.menu-float{position:static;width:42px;height:auto;min-height:54px;padding:0;display:grid;place-items:center;border-radius:var(--ui-radius-md);background:var(--ui-surface-raised);box-shadow:var(--ui-shadow-sm);backdrop-filter:none}
.menu-float:hover{background:#315068}
.menu-float:active{transform:translateY(3px);background:var(--ui-surface-raised);box-shadow:none}
.menu-float .ui-icon{width:21px;height:21px;font-size:21px;color:var(--ui-text-soft)}
.topbar{width:100%;margin:0;padding:0;display:grid;grid-template-columns:.9fr 1.1fr 1fr;gap:6px}
.top-stat{min-width:0;min-height:54px;padding:7px 9px;border-radius:var(--ui-radius-md);background:var(--ui-surface-raised);box-shadow:var(--ui-shadow-sm);display:flex;align-items:center;justify-content:center;gap:7px;text-align:left}
.score-stat{display:block;text-align:center;padding-top:7px}
.top-stat-icon{flex:0 0 auto;width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:var(--ui-surface-deep);color:var(--ui-text-soft)}
.top-stat-icon.accent{background:#4a462f;color:var(--ui-accent)}
.top-stat-icon .ui-icon{width:14px;height:14px;font-size:14px}
.top-stat-copy{min-width:0;display:flex;flex-direction:column}
.stat-label,.box-label{margin:0;color:var(--ui-text-muted);font-family:"Quicksand",system-ui,sans-serif;font-size:8px;line-height:1;font-weight:700;letter-spacing:.9px}
.stat-value{margin-top:4px;font-family:var(--display-font);font-size:21px;line-height:.9;font-weight:400}
.level-stat .stat-value{font-size:21px}
.score{margin-top:3px;font-family:var(--display-font);font-size:24px;line-height:.85;font-weight:400}
.wallet{margin-top:4px;color:var(--ui-text);font-family:var(--display-font);font-size:20px;line-height:.9;font-weight:400}
.wallet-coin{display:none}
.combo-hud{top:28px;font-size:8px;color:var(--ui-accent)}

.info-row{width:min(100%,calc(100vh - 316px),560px);margin:0 auto 9px;grid-template-columns:minmax(0,1fr) 84px;gap:8px}
.info-box{padding:8px 9px;border-radius:var(--ui-radius-md);background:var(--ui-surface-raised);box-shadow:var(--ui-shadow-sm)}
.box-head{display:flex;align-items:center;justify-content:space-between;padding:0 2px 4px}
.box-meta{color:var(--ui-text-muted);font-size:7px;font-weight:700;letter-spacing:.8px}
.goal-box .goals{min-height:60px;gap:2px}
.goal-main{min-height:58px;padding:0}
.goal-icon{width:44px;height:44px}
.goal-icon .goal-token{transform:scale(1.32)}
.goal-icon .icon-svg{width:70%;height:70%}
.line-goal-icon{width:32px;height:32px;gap:3px}
.line-goal-icon i{border-radius:4px;background:var(--ui-text);box-shadow:0 2px 0 #a9bbc8}
.goal-progress{right:-1px;bottom:0;min-width:31px;height:18px;padding:0 5px;border-radius:999px;background:var(--ui-surface-deep);box-shadow:none;font-family:"Quicksand",system-ui,sans-serif;font-size:9px;font-weight:700}
.goal-chip.done .goal-progress{background:#24734a}
.moves-box{padding:8px 6px}
.moves-value{margin-top:5px;font-family:var(--display-font);font-size:31px;line-height:.9;font-weight:400}
.moves-caption{margin-top:5px;color:var(--ui-text-muted);font-size:7px;font-weight:700;letter-spacing:1px}

.board-wrap{width:min(100%,calc(100vh - 298px),560px)}
.board{gap:4px;padding:clamp(4px,1vw,7px)}
.board-cell:after{background:#2a475f}
.connected-shape{fill:var(--ui-surface-deep);stroke:var(--ui-surface-deep)}
.ghost-cell{background:rgba(72,214,133,.26);border-color:#76e5a6}
.ghost-cell.invalid{background:rgba(255,107,101,.22);border-color:#ff8a85}

.conveyor-zone{width:min(100%,calc(100vh - 298px),560px);margin:9px auto 0}
.tray-head{display:flex;align-items:center;justify-content:space-between;margin:0 5px 6px;color:var(--ui-text-muted);font-size:8px;font-weight:700;letter-spacing:.9px}
.belt-shell{padding:8px 14px 10px;border-radius:var(--ui-radius-lg);background:var(--ui-surface-raised);box-shadow:0 5px 0 var(--ui-surface-deep);overflow:visible}
.piece-card{min-height:74px;border-radius:14px}
.piece-card:hover{transform:translateY(-2px)}
.hint{display:none}

.modal{z-index:700;padding:18px;background:rgba(12,28,40,.82);backdrop-filter:none}
.panel{width:min(92vw,400px);max-height:92vh;padding:17px;border-radius:var(--ui-radius-xl);background:var(--ui-surface);box-shadow:0 6px 0 var(--ui-surface-deep);animation:panelIn .22s cubic-bezier(.2,.85,.25,1.1)}
.panel-head{margin-bottom:13px}
.panel-title{display:flex;align-items:center;gap:11px;text-align:left}
.panel-title .ui-kicker{margin:0 0 4px}
.panel h2{font-size:25px;line-height:.9;text-align:left}
.panel-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--ui-surface-deep);color:var(--ui-text-soft)}
.panel-icon .ui-icon{width:20px;height:20px;font-size:20px}
.close-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--ui-surface-soft);box-shadow:0 3px 0 var(--ui-surface-deep);font-size:inherit}
.close-btn:active{transform:translateY(3px);box-shadow:none}
.close-btn .ui-icon{width:18px;height:18px;font-size:18px}

.levels-panel{width:min(92vw,430px)}
.level-selector-meta{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 9px;color:var(--ui-text-muted);font-size:8px;font-weight:700;letter-spacing:.8px}
.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;padding:2px;overflow:hidden}
.level-btn{position:relative;aspect-ratio:1;border:0;border-radius:13px;background:var(--ui-surface-raised);color:var(--ui-text);box-shadow:0 3px 0 var(--ui-surface-deep);font-family:var(--display-font);font-size:20px;line-height:1;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,background .12s ease}
.level-btn:hover:not(:disabled){background:#31516a;transform:translateY(-1px)}
.level-btn:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.level-btn.current{outline:3px solid var(--ui-accent);outline-offset:1px;background:#3a5366}
.level-btn .level-state-icon{position:absolute;right:5px;bottom:4px;width:auto;height:auto;font-size:9px;color:var(--ui-success)}
.level-btn:disabled{cursor:default;background:var(--ui-surface-deep);color:#607889;box-shadow:none;opacity:.72}
.level-btn:disabled .level-number{opacity:0}
.level-btn:disabled .level-state-icon{inset:0;display:grid;place-items:center;font-size:15px;color:#7890a1}
.level-pagination{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:8px;margin-top:12px}
.page-buttons{display:flex;align-items:center;justify-content:center;gap:6px}
.page-arrow,.page-number{display:grid;place-items:center;border:0;background:var(--ui-surface-soft);color:var(--ui-text-soft);box-shadow:0 3px 0 var(--ui-surface-deep);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,background .12s ease,color .12s ease}
.page-arrow{width:38px;height:36px;border-radius:11px}
.page-arrow .ui-icon{font-size:15px}
.page-number{width:32px;height:32px;border-radius:10px;font-family:var(--display-font);font-size:14px}
.page-arrow:hover:not(:disabled),.page-number:hover{background:var(--ui-surface-raised);color:var(--ui-text)}
.page-arrow:active:not(:disabled),.page-number:active{transform:translateY(3px);box-shadow:none}
.page-number.active{background:var(--ui-accent);color:var(--ui-accent-ink);box-shadow:0 3px 0 var(--ui-accent-dark)}
.page-arrow:disabled{opacity:.35;box-shadow:none;cursor:default}

.settings-list{display:grid;gap:8px}
.settings-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;margin:0;padding:10px;border-radius:var(--ui-radius-md);background:var(--ui-surface-raised);font-family:"Quicksand",system-ui,sans-serif}
.setting-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--ui-surface-deep);color:var(--ui-text-soft)}
.setting-icon .ui-icon{width:18px;height:18px;font-size:18px}
.setting-copy{display:flex;flex-direction:column;min-width:0}
.setting-copy strong{font-size:12px;line-height:1.1}
.setting-copy small{margin-top:4px;color:var(--ui-text-muted);font-size:9px;font-weight:600}
.toggle{width:48px;height:28px;padding:4px;border-radius:999px;background:var(--ui-surface-deep)}
.toggle i{width:20px;height:20px;background:#6f8798}
.toggle.on{background:var(--ui-success)}
.toggle.on i{transform:translateX(20px);background:#fff}
.settings-note{display:flex;align-items:center;gap:8px;margin-top:11px;padding:10px 11px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-deep);color:var(--ui-text-soft);font-size:10px;font-weight:600;text-align:left}
.settings-note .ui-icon{flex:0 0 auto;width:16px;height:16px;font-size:16px;color:var(--ui-success)}

.result-panel{text-align:center}
.result-panel .ui-kicker{margin-bottom:7px}
.result-panel h2{text-align:center;font-size:28px}
.result-panel p{margin:8px 0 0;color:var(--ui-text-soft);font-size:12px;font-weight:600}
.result-burst{width:70px;height:70px;margin:1px auto 15px;border-radius:20px;background:var(--ui-accent);color:var(--ui-accent-ink);box-shadow:0 5px 0 var(--ui-accent-dark);animation:none}
.result-burst .ui-icon{width:37px;height:37px;font-size:37px}
.result-score{margin:15px 0 11px;padding:10px;border-radius:var(--ui-radius-md);background:var(--ui-surface-deep)}
.result-score span{font-family:"Quicksand",system-ui,sans-serif;font-size:8px;font-weight:700}
.result-score strong{margin-top:3px;font-size:31px}


.toast{bottom:max(16px,env(safe-area-inset-bottom));padding:10px 14px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-deep);box-shadow:var(--ui-shadow-sm);font-family:"Quicksand",system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.2px}

@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

@media (max-height:650px){
  .top-shell,.info-row,.conveyor-zone{width:min(100%,calc(100vh - 272px),480px)}
  .board-wrap{width:min(100%,calc(100vh - 272px),480px)}
  .top-shell{margin-bottom:6px}
  .info-row{margin-bottom:6px}
  .conveyor-zone{margin-top:6px}
  .piece-card{min-height:65px}
  .goal-box .goals{min-height:53px}
  .goal-main{min-height:51px}
  .goal-icon{width:39px;height:39px}
}

@media (max-width:520px){
  .screen{padding:17px}
  .brand-mark{width:60px;height:60px;border-radius:18px}
  .brand-mark-large{width:70px;height:70px}
  .top-shell{grid-template-columns:39px minmax(0,1fr);gap:6px}
  .menu-float{width:39px;min-height:51px;border-radius:13px}
  .topbar{gap:5px;grid-template-columns:.8fr 1fr 1fr}
  .top-stat{min-height:51px;padding:6px;gap:5px;border-radius:13px}
  .top-stat-icon{width:23px;height:23px;border-radius:7px}
  .top-stat-icon .ui-icon{width:12px;height:12px;font-size:12px}
  .stat-label{font-size:7px}
  .stat-value,.level-stat .stat-value{font-size:18px}
  .score{font-size:21px}
  .wallet{font-size:17px}
  .info-row{grid-template-columns:minmax(0,1fr) 72px;gap:6px}
  .info-box{border-radius:13px;padding:7px}
  .goal-box .goals{min-height:55px}
  .goal-main{min-height:53px}
  .goal-icon{width:40px;height:40px}
  .moves-value{font-size:28px}
  .tray-head{margin-bottom:5px}
  .belt-shell{padding:6px 10px 8px;border-radius:17px}
  .piece-card{min-height:68px}
  .panel{padding:15px;border-radius:22px}
  .menu-secondary-actions{gap:7px}
  .level-grid{gap:7px}
  .level-btn{border-radius:11px;font-size:18px}
  .level-pagination{grid-template-columns:36px minmax(0,1fr) 36px;gap:6px;margin-top:10px}
  .page-arrow{width:36px;height:34px}
  .page-number{width:29px;height:29px;border-radius:9px;font-size:13px}
  .compact-btn{font-size:10px;padding:0 8px}
}

@media (max-width:370px){
  .top-stat-icon{display:none}
  .top-stat{padding:6px 4px}
}

.app{min-height:0}
body.modal-open{overflow:hidden}
.result-burst.loss{background:var(--ui-danger);color:#fff;box-shadow:0 5px 0 #c83e3a}
.result-x{font-family:var(--display-font);font-size:42px;line-height:1}

@media (orientation:landscape) and (max-height:520px){
  .app{
    min-height:0;
    grid-template-columns:minmax(280px,1fr) minmax(245px,.78fr);
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "play top"
      "play info"
      "play tray";
    column-gap:10px;
    row-gap:8px;
    padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));
  }
  .playfield{grid-area:play;min-width:0;min-height:0}
  .top-shell{grid-area:top;width:100%;margin:0;align-self:start}
  .info-row{grid-area:info;width:100%;margin:0;align-self:start}
  .conveyor-zone{grid-area:tray;width:100%;margin:0;align-self:end}
  .board-wrap{width:min(100%,calc(100vh - 16px),560px);min-width:0}
  .piece-card{min-height:62px}
  .goal-box .goals{min-height:52px}
  .goal-main{min-height:50px}
  .goal-icon{width:38px;height:38px}
  .tray-head{margin-bottom:4px}
  .belt-shell{padding:5px 9px 7px}
  .menu-card,.loading-card{width:min(92vw,390px)}
  .brand-mark{width:50px;height:50px;margin-bottom:8px;border-radius:15px;box-shadow:0 4px 0 var(--ui-accent-dark)}
  .brand-mark-large{width:56px;height:56px}
  .brand-mark .ui-icon{width:27px;height:27px;font-size:27px}
  .loading-card h1,.menu-card h1{font-size:36px}
  .loading-card p,.menu-subtitle{margin-top:6px;font-size:11px;line-height:1.3}
  .big-btn{min-height:42px;margin-top:6px}
  .menu-actions{margin-top:14px;gap:7px}
  .menu-actions .big-btn{margin-top:0}
  .loading-meta{margin-top:14px}
  .modal{padding:8px}
  .panel{max-height:96vh}
  .levels-panel{width:min(92vw,390px);padding:12px}
  .levels-panel .panel-head{margin-bottom:8px}
  .levels-panel .level-selector-meta{margin-bottom:6px}
  .levels-panel .level-grid{gap:6px}
  .levels-panel .level-btn{font-size:16px;border-radius:10px}
  .levels-panel .level-pagination{margin-top:8px}
}

/* BLOCK GRID$ title system */
.loading-card,.menu-card{width:min(94vw,520px)}
.game-title-wrap{position:relative;width:100%;margin:0 auto;transform-origin:50% 78%;will-change:transform,opacity}
.game-title-logo{display:block;width:100%;height:auto;margin:0 auto;pointer-events:none;-webkit-user-drag:none;user-select:none;transform-origin:50% 72%;will-change:transform}
.loading-title-wrap{animation:titleReveal .72s cubic-bezier(.18,.9,.24,1.18) both}
.loading-title-logo{animation:titleIdle 3.6s .85s ease-in-out infinite}
.menu-title-wrap{opacity:0}
.main-menu:not(.hidden) .menu-title-wrap{animation:titleReveal .62s cubic-bezier(.18,.9,.24,1.18) both}
.main-menu:not(.hidden) .menu-title-logo{animation:titleIdle 4s .7s ease-in-out infinite}
.loading-card .loading-meta,.loading-card .loading-bar{width:min(78vw,390px);margin-left:auto;margin-right:auto}
.loading-card .loading-meta{margin-top:20px}
.menu-card .menu-actions{width:min(82vw,390px);margin:21px auto 0}
@keyframes titleReveal{
  0%{opacity:0;transform:translateY(24px) scale(.72) rotate(-2.5deg)}
  62%{opacity:1;transform:translateY(-3px) scale(1.045) rotate(.7deg)}
  82%{transform:translateY(1px) scale(.985) rotate(-.25deg)}
  100%{opacity:1;transform:none}
}
@keyframes titleIdle{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  48%{transform:translateY(-5px) rotate(-.25deg) scale(1.008)}
  56%{transform:translateY(-5px) rotate(.18deg) scale(1.008)}
}
@media (max-width:520px){
  .loading-card,.menu-card{width:min(96vw,500px)}
  .menu-card .menu-actions{width:min(88vw,390px);margin-top:17px}
  .loading-card .loading-meta{margin-top:16px}
}
@media (orientation:landscape) and (max-height:520px){
  .loading-card,.menu-card{width:min(76vw,420px)}
  .game-title-wrap{width:min(100%,390px)}
  .menu-card .menu-actions{width:min(100%,360px);margin-top:10px}
  .loading-card .loading-meta{margin-top:8px}
  .loading-card .loading-bar{margin-top:5px}
}
@media (prefers-reduced-motion:reduce){
  .loading-title-wrap,.menu-title-wrap,.loading-title-logo,.menu-title-logo{animation:none!important}.menu-title-wrap{opacity:1}
}



body{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.boot-splash{z-index:650;background:#000;padding:24px;overflow:hidden;opacity:1;visibility:visible;transition:opacity .64s cubic-bezier(.42,0,.18,1),visibility .64s linear}
.boot-splash-inner{width:min(68vw,430px);display:grid;place-items:center;opacity:0;transform:translateY(18px) scale(.84);will-change:opacity,transform}
.boot-splash-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 24px rgba(132,82,255,.2));pointer-events:none;-webkit-user-drag:none;user-select:none}
.boot-splash.is-ready .boot-splash-inner{animation:bootSplashIn .56s cubic-bezier(.18,.9,.22,1.12) both}
.boot-splash.is-exiting{opacity:0;pointer-events:none}
.boot-splash.is-exiting .boot-splash-inner{animation:bootSplashOut .64s cubic-bezier(.42,0,.25,1) both}
.loading-screen{z-index:620;opacity:1;visibility:visible;pointer-events:none;background:var(--ui-bg)}
.loading-screen .loading-card{opacity:0;transform:translateY(12px) scale(.96);will-change:opacity,transform}
.loading-screen.is-revealing .loading-card{animation:loadingCardReveal .66s .08s cubic-bezier(.2,.78,.22,1) both}
.loading-screen.is-leaving{opacity:0;transition:opacity .3s ease}
.loading-title-wrap{animation:none}
.loading-screen.is-revealing .loading-title-logo{animation:titleIdle 3.6s .78s ease-in-out infinite}
@keyframes bootSplashIn{0%{opacity:0;transform:translateY(18px) scale(.84)}72%{opacity:1;transform:translateY(-2px) scale(1.025)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bootSplashOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(.91)}}
@keyframes loadingCardReveal{0%{opacity:0;transform:translateY(12px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:520px){.boot-splash-inner{width:min(72vw,330px)}}
@media (prefers-reduced-motion:reduce){.boot-splash,.boot-splash-inner,.loading-screen,.loading-screen .loading-card{animation:none!important;transition:opacity .2s linear!important}.boot-splash.is-ready .boot-splash-inner,.loading-screen.is-revealing .loading-card{opacity:1;transform:none}}


.tutorial-overlay{position:fixed;inset:0;z-index:760;pointer-events:none;overflow:hidden}
.tutorial-overlay.hidden{display:none}
.tutorial-dim{position:absolute;inset:0;background:rgba(8,16,24,.44)}
.tutorial-bubble{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);width:min(calc(100vw - 28px),410px);padding:18px 18px 16px;border-radius:22px;background:rgba(21,36,49,.97);box-shadow:0 10px 0 #172b3c,0 26px 60px rgba(0,0,0,.28),inset 0 2px rgba(255,255,255,.05);color:#fff;text-align:left;pointer-events:auto}
.tutorial-kicker{display:block;margin-bottom:6px;font:400 11px/1 var(--display-font);letter-spacing:1px;color:#ffc84e}
.tutorial-bubble h3{margin:0 0 6px;font:400 clamp(20px,5vw,26px)/1 var(--display-font);letter-spacing:.2px}
.tutorial-bubble p{margin:0;color:#c4d5e3;font:600 14px/1.45 var(--ui-font)}
.tutorial-continue{margin-top:14px}
.tutorial-hand{position:fixed;left:0;top:0;width:52px;height:auto;z-index:780;pointer-events:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.26));transform:translate3d(var(--tutorial-hand-x,0px),var(--tutorial-hand-y,0px),0)}
.tutorial-hand.is-tap{animation:tutorialTap 1.3s ease-in-out infinite}
.tutorial-hand.is-drag{animation:tutorialDrag 1.8s ease-in-out infinite}
.tutorial-focus{position:relative!important;z-index:770!important;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.tutorial-focus:after{content:"";position:absolute;inset:-8px;border-radius:20px;border:3px solid rgba(255,219,105,.96);box-shadow:0 0 0 6px rgba(255,219,105,.18),0 0 22px rgba(255,219,105,.15);pointer-events:none;animation:tutorialPulse 1.2s ease-in-out infinite}
.level-grid .tutorial-focus:after,.piece-card.tutorial-focus:after{border-radius:18px}
.board-cell.tutorial-target{position:relative;z-index:770!important}
.board-cell.tutorial-target:before{content:"";position:absolute;inset:4px;border-radius:16px;background:rgba(255,219,105,.17);border:3px solid rgba(255,219,105,.98);box-shadow:0 0 0 4px rgba(255,219,105,.12);animation:tutorialPulse 1.1s ease-in-out infinite;pointer-events:none}
.tutorial-blocked{pointer-events:none!important;opacity:.38!important;filter:grayscale(.15)!important}
body.tutorial-running .menu-float{pointer-events:none;opacity:.45}
@keyframes tutorialPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.72}}
@keyframes tutorialTap{0%,100%{transform:translate3d(var(--tutorial-hand-x,0px),var(--tutorial-hand-y,0px),0) scale(1)}45%{transform:translate3d(var(--tutorial-hand-x,0px),calc(var(--tutorial-hand-y,0px) + 6px),0) scale(.94)}70%{transform:translate3d(var(--tutorial-hand-x,0px),var(--tutorial-hand-y,0px),0) scale(1)}}
@keyframes tutorialDrag{0%{transform:translate3d(var(--tutorial-hand-start-x,0px),var(--tutorial-hand-start-y,0px),0) scale(.95)}15%{transform:translate3d(var(--tutorial-hand-start-x,0px),var(--tutorial-hand-start-y,0px),0) scale(1)}70%{transform:translate3d(var(--tutorial-hand-end-x,0px),var(--tutorial-hand-end-y,0px),0) scale(1)}100%{transform:translate3d(var(--tutorial-hand-end-x,0px),var(--tutorial-hand-end-y,0px),0) scale(.96)}}
@media (max-width: 560px){.tutorial-bubble{width:min(calc(100vw - 20px),360px);padding:16px 15px 15px}.tutorial-bubble p{font-size:13px}.tutorial-hand{width:46px}}

/* Full-screen menu navigation */
.menu-screen{
  z-index:500;
  opacity:0;
  visibility:visible;
  pointer-events:none;
  transform:translate3d(0,0,0);
  transition:transform .38s cubic-bezier(.22,.78,.22,1),opacity .28s ease,visibility 0s linear .38s;
  will-change:transform,opacity;
}
.menu-screen.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0);
  transition-delay:0s;
}
.menu-screen.is-entering-right{opacity:0;visibility:visible;transform:translate3d(12%,0,0)}
.menu-screen.is-entering-left{opacity:0;visibility:visible;transform:translate3d(-12%,0,0)}
.menu-screen.is-exiting-left{opacity:0;visibility:visible;pointer-events:none;transform:translate3d(-12%,0,0)}
.menu-screen.is-exiting-right{opacity:0;visibility:visible;pointer-events:none;transform:translate3d(12%,0,0)}
.menu-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.submenu-screen{background:var(--ui-bg);padding:clamp(16px,4vw,28px)}
.menu-page-card{width:min(92vw,460px);margin:auto}
.screen-page-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;margin-bottom:18px}
.screen-page-title{text-align:center}
.screen-page-title .ui-kicker{margin-bottom:5px}
.screen-page-title h2{margin:0;font-family:var(--display-font);font-size:clamp(28px,8vw,38px);font-weight:400;line-height:.92;letter-spacing:.4px}
.screen-back-btn{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:13px;background:var(--ui-surface-raised);color:var(--ui-text);box-shadow:var(--ui-shadow-sm);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,background .12s ease}
.screen-back-btn:hover{background:#315068}
.screen-back-btn:active{transform:translateY(3px);box-shadow:none}
.screen-back-btn .ui-icon{font-size:19px}
.screen-head-spacer{width:44px;height:44px}
.levels-screen-card .level-selector-meta{margin:0 2px 11px}
.levels-screen-card .level-grid{gap:9px}
.levels-screen-card .level-btn{border-radius:14px;font-size:21px}
.levels-screen-card .level-pagination{margin-top:14px}
.menu-title-wrap{width:80%}

/* Visual-only onboarding */
.tutorial-overlay{z-index:760;pointer-events:none}
.tutorial-dim{background:rgba(8,16,24,.18)}
.tutorial-bubble,.tutorial-kicker,.tutorial-continue{display:none!important}
.tutorial-hand{width:54px;z-index:780}
.tutorial-success{position:fixed;left:50%;top:50%;z-index:790;width:82px;height:82px;display:grid;place-items:center;border-radius:24px;background:var(--ui-success);color:#123a25;box-shadow:0 6px 0 #24734a,0 20px 50px rgba(0,0,0,.28);transform:translate(-50%,-50%);animation:tutorialSuccessPop .68s cubic-bezier(.18,.9,.24,1.18) both}
.tutorial-success.hidden{display:none}
.tutorial-success .ui-icon{font-size:44px}
@keyframes tutorialSuccessPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-8deg)}64%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (max-width:520px){
  .menu-title-wrap{width:80%}
  .menu-page-card{width:min(96vw,430px)}
  .screen-page-head{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;margin-bottom:14px}
  .screen-back-btn,.screen-head-spacer{width:40px;height:40px}
  .levels-screen-card .level-grid{gap:7px}
  .levels-screen-card .level-btn{font-size:18px;border-radius:11px}
  .tutorial-hand{width:48px}
}
@media (orientation:landscape) and (max-height:520px){
  .submenu-screen{padding:8px 16px}
  .menu-page-card{width:min(82vw,430px)}
  .screen-page-head{margin-bottom:8px}
  .screen-page-title h2{font-size:26px}
  .levels-screen-card .level-selector-meta{margin-bottom:6px}
  .levels-screen-card .level-grid{gap:5px}
  .levels-screen-card .level-btn{font-size:16px;border-radius:9px}
  .levels-screen-card .level-pagination{margin-top:7px}
  .menu-title-wrap{width:80%}
}
@media (prefers-reduced-motion:reduce){
  .menu-screen{transition:opacity .16s linear!important;transform:none!important}
}
.tutorial-hand{height:54px}
.tutorial-hand-state{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;opacity:0}
.tutorial-hand.is-drag .hand-point{animation:tutorialHandPoint 1.8s ease-in-out infinite}
.tutorial-hand.is-drag .hand-open{animation:tutorialHandOpen 1.8s ease-in-out infinite}
.tutorial-hand.is-drag .hand-closed{animation:tutorialHandClosed 1.8s ease-in-out infinite}
@keyframes tutorialHandPoint{0%,10%{opacity:1}16%,100%{opacity:0}}
@keyframes tutorialHandOpen{0%,8%{opacity:0}10%,18%{opacity:1}24%,76%{opacity:0}80%,100%{opacity:1}}
@keyframes tutorialHandClosed{0%,18%{opacity:0}24%,76%{opacity:1}82%,100%{opacity:0}}
.tutorial-hand.hidden{display:none}
@media (orientation:landscape) and (max-height:520px){
  .levels-screen-card{width:min(78vw,350px)}
  .screen-page-head{grid-template-columns:36px minmax(0,1fr) 36px;gap:7px;margin-bottom:6px}
  .screen-back-btn,.screen-head-spacer{width:36px;height:36px;border-radius:10px}
  .levels-screen-card .level-grid{gap:4px}
  .levels-screen-card .level-pagination{margin-top:6px}
  .page-arrow{height:32px}
  .page-number{width:29px;height:29px}
}

/* Solid menu navigation: never reveal gameplay behind menu screens */
body.menu-open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:498;
  background:var(--ui-bg);
  pointer-events:none;
}
body.menu-open #app,
body.menu-open #dragLayer{
  visibility:hidden;
}
.menu-screen{
  z-index:500;
  opacity:1;
  visibility:visible;
  background:var(--ui-bg);
  transform:translate3d(0,0,0);
  transition:transform .42s cubic-bezier(.22,.78,.22,1),visibility 0s linear .42s;
  will-change:transform;
  backface-visibility:hidden;
  contain:paint;
}
.main-menu.menu-screen{
  background:var(--ui-bg);
}
.menu-screen.is-active{
  z-index:501;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0);
  transition-delay:0s;
}
.menu-screen.is-entering-right{
  z-index:502;
  opacity:1;
  visibility:visible;
  transform:translate3d(100%,0,0);
}
.menu-screen.is-entering-left{
  z-index:502;
  opacity:1;
  visibility:visible;
  transform:translate3d(-100%,0,0);
}
.menu-screen.is-exiting-left{
  z-index:500;
  opacity:1;
  visibility:visible;
  pointer-events:none;
  transform:translate3d(-18%,0,0);
}
.menu-screen.is-exiting-right{
  z-index:500;
  opacity:1;
  visibility:visible;
  pointer-events:none;
  transform:translate3d(18%,0,0);
}
.menu-screen.hidden{
  opacity:1;
  visibility:hidden;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .menu-screen{transition:visibility 0s linear .16s!important}
  .menu-screen.is-entering-right,.menu-screen.is-entering-left,.menu-screen.is-exiting-left,.menu-screen.is-exiting-right{transform:none!important}
}

/* V45 — clean menu fades */
.menu-screen{
  transform:none!important;
  opacity:0;
  visibility:visible;
  background:var(--ui-bg);
  transition:opacity .22s cubic-bezier(.2,.72,.2,1),visibility 0s linear .22s!important;
  will-change:opacity;
}
.menu-screen.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none!important;
  transition-delay:0s!important;
}
.menu-screen.is-fading-in,
.menu-screen.is-fading-out,
.menu-screen.is-entering-right,
.menu-screen.is-entering-left,
.menu-screen.is-exiting-left,
.menu-screen.is-exiting-right{
  opacity:0!important;
  transform:none!important;
  pointer-events:none!important;
}
.menu-screen.hidden{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.menu-open::before{background:var(--ui-bg)}
@media (prefers-reduced-motion:reduce){
  .menu-screen{transition:opacity .12s linear,visibility 0s linear .12s!important}
}

/* Level selector polish */
.level-grid,
.levels-screen-card .level-grid{
  overflow:visible;
  padding:5px 4px 7px;
}
.levels-screen-card,
.menu-page-card{
  overflow:visible;
}
.level-btn.current{
  outline:0;
  outline-offset:0;
  background:#3a5366;
  box-shadow:0 3px 0 var(--ui-surface-deep),inset 0 0 0 0 transparent;
}
.level-btn.current::before{
  content:"";
  position:absolute;
  top:6px;
  left:6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ui-accent);
  pointer-events:none;
}
button:focus,
button:focus-visible{
  outline:0!important;
  outline-offset:0!important;
}
button:focus-visible:not(:disabled){
  filter:brightness(1.08);
}