@font-face{font-family:Original;src:url('assets/fonts/original.ttf') format('truetype');font-display:swap}
:root{--navy:#121c70;--ink:#171b56;--cream:#fff9ed;--gold:#ffe276;--muted:#a7b3e8;--purple:#723be0;--line:#ffffff20;--green:#70de13}
*{box-sizing:border-box}body{margin:0;background:#090e3b;color:white;font-family:Original,'Trebuchet MS',sans-serif;min-height:100svh}button,input,select{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.42}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button:active:not(:disabled){transform:translateY(2px)}button:hover:not(:disabled){filter:brightness(1.12)}button{transition:filter .16s,transform .16s}p,h1,h2{margin:0;text-wrap:pretty}img{max-width:100%}.workspace{width:min(1120px,100%);min-height:100svh;margin:auto;display:grid;grid-template-columns:1fr 540px;gap:70px;align-items:center;padding:30px 40px;background:radial-gradient(ellipse at 20% 32%,#1b26714d,transparent 60%)}.intro{padding:12px 0 30px}.collection{font-size:11px;letter-spacing:3px;text-decoration:none;color:#a4afe0}.collection span{color:#ffe276;padding-left:18px}.intro>.eyebrow{margin-top:65px}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2px}.intro h1{font-size:clamp(54px,6.7vw,88px);line-height:1.03;letter-spacing:-4px;margin:18px 0 25px}.intro-copy{color:#bac5ee;font-size:17px;line-height:1.8;max-width:290px}.intro-line{width:45px;height:2px;background:var(--gold);margin:36px 0 25px}.edition{font-size:13px;line-height:1.8;color:#7d8bc1}.text-button{display:block;background:none;border:0;padding:16px 0;color:inherit;font-size:14px}.intro>.text-button{font-size:12px;color:#b9c5f6;margin-top:12px}.text-button span{margin-left:12px}.game{height:min(930px,calc(100svh - 60px));min-height:700px;width:100%;position:relative;display:flex;flex-direction:column;padding:23px 24px 18px;overflow:hidden;border-radius:27px;background:var(--navy);border:1px solid #7e8bec38;box-shadow:0 35px 90px #0005,inset 0 0 100px #2336a81f}.game:before{content:'';position:absolute;width:480px;height:480px;left:-250px;bottom:-280px;border:1px solid #6b7ae51c;border-radius:50%;pointer-events:none}.game:after{content:'';position:absolute;width:580px;height:580px;right:-400px;top:190px;border:1px solid #6b7ae514;border-radius:50%;pointer-events:none}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;height:63px;flex-shrink:0;position:relative;z-index:2}.nav-button{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:10px 0;font-size:12px;color:#ccd5ff}.grid-icon{display:block;width:17px;height:17px;background:linear-gradient(90deg,white 6px,transparent 6px 10px,white 10px);mask:linear-gradient(white 6px,transparent 6px 10px,white 10px);opacity:.8}.icon-button{background:none;border:0;padding:0;width:48px;height:48px;flex-shrink:0}.icon-button img{width:48px;height:48px;object-fit:contain}.stage-heading{display:flex;align-items:center;justify-content:space-between;margin-top:25px;text-align:center;position:relative;z-index:2}.stage-heading p{font-size:13px;color:var(--gold);letter-spacing:3px;margin-bottom:8px}.stage-heading h2{font-size:27px;line-height:1.15;font-weight:normal}.small-button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#29379060;font-size:28px;color:#c1cdfd;line-height:1}.sound-button{font-size:24px}.sound-button.muted:after{content:'';position:absolute;width:29px;height:2px;background:#f1c57c;transform:rotate(-40deg);margin-left:-24px;margin-top:10px}.stats{display:flex;align-items:center;justify-content:center;gap:19px;margin:22px 0 4px;color:#8fa0e6;font-size:9px;letter-spacing:1.2px}.stats strong{font-size:16px;letter-spacing:0;color:#fff;display:inline-block;margin-right:5px;font-weight:normal}.stats i{width:1px;height:15px;background:var(--line)}.playfield{position:relative;flex:1;min-height:280px;margin:0 -14px}canvas{display:block;width:100%;height:100%;position:absolute;inset:0}#bottle-hits{position:absolute;inset:0;z-index:2}.bottle-hit{position:absolute;border:0;background:none;border-radius:24px;touch-action:manipulation}.bottle-hit.selected{background:radial-gradient(ellipse at 50% 100%,#ddc25a1f,transparent 65%)}.bottle-hit:focus-visible{outline-offset:-4px}.bottle-hit.hinted{outline:2px dashed var(--gold);outline-offset:5px;animation:hint-pulse 1s infinite alternate}.instruction{font-size:13px;color:#c7d0fb;min-height:38px;line-height:1.5;text-align:center;max-width:340px;align-self:center;position:relative;z-index:2}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 5px 18px;flex-shrink:0;position:relative;z-index:2}.tool{border:0;background:none;display:flex;flex-direction:column;align-items:center;padding:0;position:relative;font-size:14px;gap:5px}.tool>img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 5px 4px #0003)}.tool small{font-size:10px;color:#8ea0e5;margin-top:0}.hint-image{display:grid;place-items:center;width:61px;height:61px;border:2px solid #f7bd31;border-radius:19px;background:radial-gradient(at 32% 12%,#c187ff,#7d2ddd 70%);box-shadow:inset 0 0 0 3px #b588fe,inset 0 -5px 0 #4e238e,0 4px 0 #080b3f;font-size:40px;color:white;margin:1px 0 2px}.game-footnote{display:flex;justify-content:center;align-items:center;gap:6px;font-size:9px;color:#8291d0;padding-top:8px;border-top:1px solid #7283dc20;position:relative;z-index:2}.save-dot{width:4px;height:4px;background:#9bda89;border-radius:50%}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#cbd5ff}#loading[hidden]{display:none}#toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);background:#fff9ed;color:var(--ink);border-radius:14px;box-shadow:0 8px 40px #0006;padding:14px 20px;z-index:20;opacity:0;pointer-events:none;text-align:center;width:max-content;max-width:min(90vw,420px);font-size:14px;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #e0c680;border-radius:25px;background:var(--cream);color:var(--ink);padding:42px 34px 27px;width:min(420px,calc(100vw - 32px));max-height:90svh;box-shadow:0 30px 90px #0008;overflow:auto}dialog::backdrop{background:#070c38ba;backdrop-filter:blur(6px)}dialog h2{font-size:29px;font-weight:normal;letter-spacing:-.6px;margin-bottom:20px;text-align:center}.dialog-eyebrow{font-size:9px;letter-spacing:1.8px;color:#9c7b3d;text-align:center;margin-bottom:10px}.close{position:absolute;right:14px;top:12px;border:0;background:#eee4d8;color:#7e7582;border-radius:50%;width:30px;height:30px;font-size:24px;line-height:1}.dialog-note{font-size:14px;color:#72708a;line-height:1.7;margin:15px 0;text-align:center}.primary{border:2px solid #55b612;background:linear-gradient(#a8f13f,#64dc0e);border-radius:14px;box-shadow:inset 0 0 0 2px #d2fa75,inset 0 -4px 0 #57b82a,0 4px 0 #368512;color:#184b0d;min-height:53px;width:100%;font-size:18px;padding:10px 20px;margin-top:12px;text-shadow:0 1px #e1ffaf}.primary span{margin-left:15px}.setting{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8dfd4;padding:19px 0;font-size:17px}.setting input{appearance:none;width:49px;height:27px;border-radius:20px;background:#c4bfd0;position:relative;cursor:pointer}.setting input:after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;transition:transform .2s}.setting input:checked{background:#7ed822}.setting input:checked:after{transform:translateX(22px)}.wide-dialog{width:min(510px,calc(100vw - 32px))}.picker-controls{display:flex;justify-content:space-between;align-items:center;margin:20px 0;color:#7c7197;font-size:14px}.picker-controls select{padding:8px 28px 8px 12px;background:#ece3f5;border:1px solid #d5c6e7;border-radius:8px;color:#514573}#stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}#stage-grid button{min-height:54px;border:1px solid #d8cce3;border-radius:11px;background:#eee7f6;color:#6b538e;font-size:18px;position:relative}#stage-grid button.current{background:#773cd0;color:white;border-color:#ffd256;box-shadow:inset 0 0 0 2px #ffd256}#stage-grid button.done{background:#e4f1cd;border-color:#b8d392;color:#538026}#stage-grid button.done:after{content:'\2713';position:absolute;right:5px;top:2px;font-size:11px}.source-note{font-size:11px;line-height:1.7;color:#8a8296;margin-top:20px;text-align:center}.victory-dialog{text-align:center;padding-top:35px;overflow:visible}.victory-stars img{width:245px;max-height:85px;object-fit:contain;margin-top:-55px;margin-bottom:15px;filter:drop-shadow(0 5px 3px #ac7b2450)}.victory-dialog h2{font-size:31px;margin-bottom:9px}.victory-subtitle{color:#9181a1;font-size:16px}.victory-stats{display:flex;justify-content:center;gap:33px;margin:28px 0 24px}.victory-stats div{display:flex;flex-direction:column;gap:7px}.victory-stats strong{font-size:26px;color:#6e39b4;font-weight:normal}.victory-stats span{font-size:9px;letter-spacing:1px;color:#9c8ba6}.victory-dialog .text-button,#confirm-restart .text-button{margin:8px auto 0;color:#8d8299;font-size:13px}.about-rules{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:12px;line-height:1.6;margin-top:24px}.about-rules b{display:block;color:#7242ab;font-size:14px;margin-bottom:4px}body:not(.ready) .tools{pointer-events:none;opacity:.4}@keyframes hint-pulse{to{outline-color:#fff7c4;background:#ffe27610}}
@media(min-width:1500px){.workspace{gap:100px;width:1200px;grid-template-columns:1fr 560px}.intro h1{font-size:100px}}
@media(max-width:950px){.workspace{grid-template-columns:1fr;width:560px;padding:18px;gap:0}.intro{display:none}.game{height:calc(100svh - 36px);min-height:660px}}
@media(max-width:560px){body{background:var(--navy)}.workspace{padding:0;width:100%;display:block}.game{height:100svh;min-height:610px;border:0;border-radius:0;padding:calc(14px + env(safe-area-inset-top)) 19px calc(12px + env(safe-area-inset-bottom));box-shadow:none}.topbar{height:55px}.icon-button,.icon-button img{width:43px;height:43px}.stage-heading{margin-top:20px}.stage-heading p{font-size:11px;margin-bottom:7px}.stage-heading h2{font-size:25px}.stats{gap:14px;margin-top:18px}.stats strong{font-size:15px}.stats{font-size:8px}.tools{padding:13px 0 14px;gap:13px}.tool>img{width:60px;height:60px}.hint-image{width:57px;height:57px;border-radius:18px}.tool{font-size:13px}.instruction{font-size:12px;max-width:290px}.nav-button{font-size:11px;gap:6px}.game-footnote{font-size:8px}.playfield{min-height:250px}.stage-heading .small-button{width:38px;height:38px}}
@media(max-height:700px) and (max-width:560px){.stage-heading{margin-top:10px}.stats{margin-top:12px}.topbar{height:48px}.tools{padding-top:5px}.instruction{min-height:28px;font-size:11px}.tool>img{width:50px;height:50px}.hint-image{width:48px;height:48px;font-size:30px}.playfield{min-height:235px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
