html,body,#root{min-height:100%;margin:0}html{overscroll-behavior:none;background:#0d0d0d;min-height:100%}body{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;background:#0d0d0d;min-height:100svh;font-family:Arial,sans-serif}*{box-sizing:border-box}img,svg{display:block}button{font:inherit;-webkit-tap-highlight-color:transparent}.app-root{background-color:#0d0d0d;min-height:100dvh;position:relative;overflow:hidden}.app-background{pointer-events:none;opacity:.95;background-image:linear-gradient(#0000001f,#0000001f),url(/assets/game_background.png);background-position:50%;background-size:cover;position:absolute;inset:0}.app-main{--layout-width:min(95vw, 78vh, 820px);z-index:1;min-height:100dvh;padding:max(env(safe-area-inset-top), 6px) 12px 24px;box-sizing:border-box;flex-direction:column;justify-content:flex-start;align-items:center;gap:clamp(10px,1.6vh,16px);display:flex;position:relative}.app-logo{width:calc(var(--layout-width) * .6);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;flex:none;max-width:none;height:auto;position:relative}.top-controls{width:var(--layout-width);z-index:4;flex-wrap:nowrap;flex:none;justify-content:center;align-items:center;gap:clamp(28px,8vw,120px);max-width:100%;display:flex;position:relative}.menu-anchor{position:relative}.icon-button{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;place-items:center;padding:0;display:grid}.icon-image{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%}.icon-button--flash{animation:.9s ease-in-out infinite alternate hintButtonFlash}@keyframes hintButtonFlash{0%{filter:brightness(.96)saturate(.95);transform:scale(.98)}to{filter:brightness(1.16)saturate(1.12)drop-shadow(0 0 14px #ffffff47);transform:scale(1.05)}}.board-wrap{width:var(--layout-width);flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,12px);max-width:100%;display:flex;position:relative;transform:none}.board-header-slot{width:100%;min-height:clamp(52px, calc(var(--layout-width) * .102), 74px);justify-content:center;align-items:center;display:flex}.level-tile-frame{padding:clamp(3px, calc(var(--layout-width) * .0075), 6px);border-radius:clamp(12px, calc(var(--layout-width) * .03), 18px);z-index:3;background:linear-gradient(135deg,#fafafa 0%,#d9d9d9 18%,#8e8e8e 34%,#f2f2f2 50%,#6f6f6f 68%,#e5e5e5 84%,#4f4f4f 100%);position:relative;bottom:auto;left:auto;transform:none;box-shadow:0 10px 22px #00000052,inset 0 1px #fff9,inset 0 -1px 4px #0000003d}.level-tile-inner{padding:clamp(6px, calc(var(--layout-width) * .014), 10px) clamp(14px, calc(var(--layout-width) * .032), 22px);border-radius:clamp(10px, calc(var(--layout-width) * .024), 14px);color:#fff;font-size:clamp(12px, calc(var(--layout-width) * .025), 16px);letter-spacing:clamp(.4px, calc(var(--layout-width) * .0014), .9px);white-space:nowrap;text-align:center;background:linear-gradient(#585858f5,#343434f5);border:1px solid #ffffff14;font-weight:700;box-shadow:inset 0 0 0 1px #1e1e1e8c,inset 0 1px 4px #ffffff1f}.level-tile-inner--banner{background:linear-gradient(180deg, #f1f5f8f5, #d7e0e8f5), linear-gradient(180deg, color-mix(in srgb, var(--level-accent) 54%, white), color-mix(in srgb, var(--level-accent) 24%, white));color:#fff;text-shadow:-1px 0 #0000008c,1px 0 #0000008c,0 -1px #0000008c,0 1px #0000008c,0 2px 4px #00000059;box-shadow:inset 0 0 0 1px #ffffff6b, inset 0 -8px 18px color-mix(in srgb, var(--level-accent) 48%, transparent)}.level-tile-inner--flash{animation:.95s ease-in-out infinite alternate startTileFlash}@keyframes startTileFlash{0%{filter:brightness(.9)saturate(.95);box-shadow:inset 0 0 0 1px #ffffff6b, inset 0 -8px 18px color-mix(in srgb, var(--level-accent) 48%, transparent), 0 0 0 #34c75900}to{filter:brightness(1.16)saturate(1.18);box-shadow:inset 0 0 0 1px #ffffff9e, inset 0 -8px 18px color-mix(in srgb, var(--level-accent) 58%, transparent), 0 0 18px #34c75973}}.bottom-controls{width:var(--layout-width);flex:none;justify-content:center;align-items:center;gap:clamp(18px,3vw,28px);max-width:100%;display:flex}.menu-popup{z-index:5;background:#232323f0;border:1px solid #ffffff1a;border-radius:16px;min-width:170px;margin-top:10px;padding:10px;position:absolute;top:100%;transform:translate(-50%);box-shadow:0 12px 28px #00000073,inset 0 1px #ffffff1f}.levels-menu-popup{min-width:190px}.menu-list-scroll{max-height:min(56vh,390px);padding-right:4px;overflow-y:auto}.menu-title{color:#fff;letter-spacing:.4px;text-align:center;margin-bottom:8px;font-size:14px;font-weight:700}.menu-item,.level-menu-item{color:#fff;text-align:center;opacity:.94;background:#ffffff14;border-radius:12px;margin-top:6px;padding:10px 12px;font-size:13px}.level-menu-item{cursor:pointer;background:#ffffff12;border:1px solid #ffffff14;align-items:center;gap:10px;width:100%;display:flex}.level-menu-item:hover{background:#ffffff1f}.level-menu-swatch{border-radius:999px;flex:none;width:14px;height:14px;box-shadow:0 0 0 1px #ffffff59,0 2px 6px #00000052}.level-menu-item--secret{background:#34c75924;border-color:#6eeb944d}.level-menu-item--secret:hover{background:#34c75938}.level-menu-swatch--secret{color:#fff;background:#34c759db;justify-content:center;align-items:center;font-size:11px;font-weight:800;display:inline-flex}.level-menu-item--reset{background:#ff50501f;border-color:#ff78783d;margin-top:10px}.level-menu-item--reset:hover{background:#ff50502e}.level-menu-swatch--reset{color:#fff;background:linear-gradient(#ff7b7b,#c62828);justify-content:center;align-items:center;font-size:12px;font-weight:800;display:inline-flex}.preview-shell{aspect-ratio:1;--level-accent:#af52de;--preview-frame-pad:clamp(6px, calc(var(--layout-width) * .014), 12px);--preview-grid-pad:clamp(6px, calc(var(--layout-width) * .014), 12px);--preview-gap:clamp(3px, calc(var(--layout-width) * .008), 7px);--preview-tile-pad:clamp(1px, calc(var(--layout-width) * .0032), 2px);--preview-cell-size:calc((100% - (var(--preview-grid-pad) * 2) - (var(--preview-gap) * 7)) / 8);width:100%}.preview-metal-frame{width:100%;height:100%;padding:var(--preview-frame-pad);border-radius:clamp(14px, calc(var(--layout-width) * .032), 20px);background:linear-gradient(135deg,#fafafa 0%,#d9d9d9 18%,#8e8e8e 34%,#f2f2f2 50%,#6f6f6f 68%,#e5e5e5 84%,#4f4f4f 100%);box-shadow:0 16px 32px #00000057,inset 0 1px #ffffffa6,inset 0 -2px 8px #0000003d}.preview-board{gap:var(--preview-gap);width:100%;height:100%;padding:var(--preview-grid-pad);border-radius:clamp(10px, calc(var(--layout-width) * .023), 14px);background:linear-gradient(#5c6b7af5,#373f47fa);grid-template-columns:repeat(8,minmax(0,1fr));display:grid;box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 12px 18px #ffffff0a,inset 0 -12px 18px #0000003d}.preview-game-tile{cursor:pointer;appearance:none;border-radius:clamp(8px, calc(var(--preview-cell-size) * .18), 12px);min-width:0;min-height:0;padding:var(--preview-tile-pad);background:linear-gradient(180deg, color-mix(in srgb, var(--level-accent) 74%, white), color-mix(in srgb, var(--level-accent) 92%, black));border:0;box-shadow:0 4px 8px #00000038,inset 0 1px #ffffff5c,inset 0 -1px 2px #0003}.preview-game-inner{border-radius:clamp(6px, calc(var(--preview-cell-size) * .14), 10px);color:#fff;text-shadow:0 1px 2px #0000008c;-webkit-user-select:none;user-select:none;text-align:center;background:linear-gradient(#fff3,#0000001a);border:1px solid #ffffff29;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.preview-game-tile.is-locked{filter:saturate(.78)brightness(.88)}.preview-game-tile:hover{transform:translateY(-1px)}.preview-game-tile:active{transform:translateY(0)}.preview-game-tile:focus-visible{outline-offset:2px;outline:2px solid #ffffffe6}.preview-game-tile.is-unlocked{box-shadow:0 4px 10px #00000047,0 0 0 1px #ffffff14,inset 0 1px #ffffff73}.preview-game-lock{width:100%;height:100%;font-size:clamp(20px, calc(var(--preview-cell-size) * 1.02), 58px);text-shadow:0 2px 4px #00000080,0 0 1px #ffffff2e;justify-content:center;align-items:center;line-height:1;display:inline-flex;transform:scale(1.16)}.preview-game-number{width:100%;height:100%;font-size:clamp(14px, calc(var(--preview-cell-size) * .58), 32px);justify-content:center;align-items:center;font-weight:800;line-height:1;display:inline-flex}@media (width<=480px){.app-main{padding-inline:8px;gap:10px;padding-bottom:16px}.top-controls,.bottom-controls,.board-wrap{width:var(--layout-width)}.level-tile-inner{padding:7px 16px;font-size:13px}}@media (width>=768px){.app-main{padding-top:max(env(safe-area-inset-top), 8px);gap:14px;padding-bottom:20px}}@media (width>=1100px){.app-main{padding-top:max(env(safe-area-inset-top), 10px)}}.icon-button:disabled .icon-image{filter:grayscale(.15)}.board-overlay-host{border-radius:clamp(12px, calc(var(--layout-width) * .03), 18px);width:100%;position:relative;overflow:hidden}.startup-board-start-overlay{z-index:5;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.startup-board-start-overlay .startup-start-button-frame{pointer-events:auto}.startup-board-dim-overlay{z-index:2;pointer-events:none;border-radius:inherit;background:0 0;animation:4s .5s forwards startupBoardDimToDark;position:absolute;inset:0}@keyframes startupBoardDimToDark{0%{background:0 0}to{background:#00000094}}.tutorial-overlay{pointer-events:none;z-index:3;position:absolute;inset:0}.tutorial-overlay-line{width:min(90%, calc(var(--layout-width) * .88));color:#fff;font-weight:900;font-size:clamp(18px, calc(var(--layout-width) * .037), 30px);letter-spacing:.2px;text-align:center;text-shadow:-1px 0 #000000bd,1px 0 #000000bd,0 -1px #000000bd,0 1px #000000bd,0 3px 10px #0006,0 7px 18px #00000047;line-height:1.05;position:absolute;left:50%;transform:translate(-50%)}.tutorial-overlay-line.is-top-primary{top:clamp(28px, calc(var(--layout-width) * .07), 54px)}.tutorial-overlay-line.is-top-secondary{top:clamp(54px, calc(var(--layout-width) * .125), 94px)}.tutorial-overlay-line.is-bottom-primary{bottom:clamp(26px, calc(var(--layout-width) * .07), 52px)}.tutorial-overlay-line.is-bottom-secondary{bottom:clamp(52px, calc(var(--layout-width) * .125), 92px)}.announcement-overlay{pointer-events:none;z-index:4;background:#00000057;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.announcement-text{color:#fff;max-width:88%;font-weight:900;font-size:clamp(24px, calc(var(--layout-width) * .043), 36px);text-align:center;text-shadow:-1px 0 #000000b8,1px 0 #000000b8,0 -1px #000000b8,0 1px #000000b8,0 4px 10px #0000006b,0 10px 24px #00000042;line-height:1.08}.announcement-text.is-level-unlock{font-size:clamp(34px, calc(var(--layout-width) * .085), 64px)}.level-tile-frame--button{cursor:pointer;pointer-events:auto;border:none}.level-tile-frame--button:hover{transform:translateY(-1px)}.level-tile-frame--button:active{transform:translateY(0)}.level-tile-frame--button:focus-visible{outline-offset:3px;outline:2px solid #fffffff2}.startup-start-button-frame{--start-accent:#34c759;min-width:clamp(132px, calc(min(var(--layout-width), 88vw) * .3), 220px);width:fit-content;min-height:clamp(56px, calc(min(var(--layout-width), 88vw) * .115), 84px);padding:clamp(4px, calc(min(var(--layout-width), 88vw) * .008), 7px);border-radius:clamp(18px, calc(min(var(--layout-width), 88vw) * .04), 28px);cursor:pointer;background:linear-gradient(135deg,#fffffff2 0%,#dfdfdff5 18%,#8c8c8cf5 36%,#f8f8f8f5 52%,#595959fa 72%,#e4e4e4f5 86%,#444444fa 100%);border:none;transition:transform .14s,filter .14s,box-shadow .14s;position:relative;box-shadow:0 16px 32px #0000005c,0 0 0 1px #ffffff2e,inset 0 1px #ffffffb8,inset 0 -3px 12px #00000038}.startup-start-button-frame:hover{transform:translateY(-1px)scale(1.01)}.startup-start-button-frame:active{transform:translateY(1px)scale(.995)}.startup-start-button-frame:focus-visible{outline-offset:4px;outline:2px solid #fffffff5}.startup-start-button-inner{--start-size-base:min(var(--layout-width), 88vw);width:100%;min-height:inherit;padding:clamp(10px, calc(var(--start-size-base) * .022), 16px) clamp(22px, calc(var(--start-size-base) * .05), 34px);border-radius:clamp(14px, calc(var(--start-size-base) * .03), 22px);background:linear-gradient(180deg, color-mix(in srgb, var(--start-accent) 44%, white) 0%, color-mix(in srgb, var(--start-accent) 78%, white) 18%, var(--start-accent) 56%, color-mix(in srgb, var(--start-accent) 88%, black) 100%);color:#fff;font-size:clamp(18px, calc(var(--start-size-base) * .04), 28px);letter-spacing:clamp(1px, calc(var(--start-size-base) * .003), 2px);text-transform:uppercase;text-shadow:0 1px 2px #0000008c,0 4px 10px #00000057;border:1px solid #ffffff2e;justify-content:center;align-items:center;font-weight:900;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 18px #00000047,0 0 0 1px #ffffff1a,inset 0 1px #ffffffa6,inset 0 -10px 16px #0003}.startup-start-button-inner:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(#ffffff61,#ffffff05);height:44%;position:absolute;top:8%;left:8%;right:8%}.startup-start-button-inner:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff24,inset 0 -2px 6px #00000024}.startup-start-button-frame--flash{animation:1.15s ease-in-out infinite alternate startupBoardStartFlash}@keyframes startupBoardStartFlash{0%{filter:brightness(.98)saturate(.97);box-shadow:0 14px 26px #00000052, 0 0 0 color-mix(in srgb, var(--start-accent,#34c759) 0%, transparent), 0 0 0 1px #ffffff26, inset 0 1px 0 #ffffff80, inset 0 -4px 12px #0000002e;transform:scale(.985)}to{filter:brightness(1.1)saturate(1.1);box-shadow:0 18px 34px #0006, 0 0 30px color-mix(in srgb, var(--start-accent,#34c759) 58%, transparent), 0 0 0 1px #fff3, inset 0 1px 0 #ffffffb8, inset 0 -4px 12px #00000038;transform:scale(1.02)}}.share-toast{left:50%;bottom:max(18px, calc(env(safe-area-inset-bottom) + 12px));color:#fff;letter-spacing:.2px;z-index:30;pointer-events:none;background:#1c1c1ceb;border:1px solid #ffffff1f;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:700;position:fixed;transform:translate(-50%);box-shadow:0 10px 28px #00000057,inset 0 1px #ffffff24}.share-sheet-backdrop{z-index:29;background:#00000047;justify-content:center;align-items:flex-end;padding:16px;display:flex;position:fixed;inset:0}.share-sheet{background:#1c1c1cf5;border:1px solid #ffffff1f;border-radius:24px;gap:10px;width:min(420px,100vw - 24px);padding:14px;display:grid;box-shadow:0 18px 40px #0000006b}.share-sheet-title{color:#fff;text-align:center;letter-spacing:.2px;padding:4px 8px 8px;font-size:18px;font-weight:800}.share-sheet-button{appearance:none;color:#111;background:#fffffff5;border:0;border-radius:18px;padding:14px 16px;font-size:17px;font-weight:800;box-shadow:inset 0 1px #ffffffe6}.share-sheet-button--cancel{color:#fff;background:#ffffff29}