@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#11152b;--ink:#f2efff;--muted:#9b9eb9;--purple:#b4a2fa;--border:#ffffff12;--board-size:440px;font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 40%,#29244280,transparent 55%),radial-gradient(ellipse at 5% 0%,#22354760,transparent 45%),var(--bg);color:var(--ink);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible{outline:2px solid #e2d3ff;outline-offset:4px}main{max-width:1080px;padding:36px 44px 22px;margin:auto;position:relative}.stars{position:fixed;inset:0;pointer-events:none;opacity:.3;background-image:radial-gradient(circle,#cbd1ff 1px,transparent 1px),radial-gradient(circle,#bdb6ff 1px,transparent 1px);background-size:139px 137px,233px 219px;background-position:38px 19px,92px 86px}header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.8px}.brand-mark{background:#a99aea18;border:1px solid #baa6ff30;border-radius:13px;font-size:32px;color:var(--purple);width:48px;height:48px;display:grid;place-items:center}.brand small{display:block;font-size:10px;letter-spacing:.3px;font-weight:500;color:var(--muted);margin-top:3px}.icon-button{position:relative;border:1px solid var(--border);border-radius:50%;width:42px;height:42px;background:#ffffff04;color:#c6bddc;font-size:21px}.off-dot{display:inline-block;width:6px;height:6px;background:#a2a4b6;border-radius:50%;position:absolute;bottom:9px;right:8px}.icon-button[aria-pressed=true] .off-dot{background:#95dfc8}.layout{display:grid;grid-template-columns:1fr 480px;gap:50px;align-items:center;margin-top:48px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--purple);font-weight:700}h1{font-size:46px;line-height:1.2;letter-spacing:-2px;margin:22px 0}h1 em{font-style:normal;color:var(--purple)}.intro{color:var(--muted);font-size:14px;line-height:1.9;margin-bottom:30px}.mission{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.mission-icon{font-size:34px;color:#edce83}.mission strong{font-size:13px}.mission p{margin:5px 0 0;font-size:12px;color:var(--muted)}.instructions{margin-top:27px;display:grid;gap:20px}.instructions>div{display:flex;gap:14px;align-items:start}.instructions b{color:#726d94;font-size:10px;margin-top:4px}.instructions span{font-size:12px;color:#aaacc2;line-height:1.8}.desktop-note{font-size:10px;color:#777c98;line-height:1.9;margin-top:25px}.game{padding:20px;background:linear-gradient(150deg,#22253d,#191c32);border:1px solid #ffffff10;border-radius:24px;box-shadow:0 24px 80px #02051445}.stats{display:flex;justify-content:space-between;padding:1px 5px 14px}.stats span{display:block;font-size:9px;color:var(--muted);letter-spacing:1.3px;font-weight:700}.stats strong{display:block;font-size:28px;font-weight:800;margin-top:5px;line-height:1.1}.stats strong small{font-size:12px;color:#82869f;font-weight:500}.moves{text-align:right}.moves strong{color:#e9c986}.progress{height:4px;border-radius:4px;background:#ffffff0b;margin:0 5px 18px;overflow:hidden}.progress>div{height:100%;width:0;background:linear-gradient(90deg,#9e8ee5,#dbc6ff);transition:width .4s}.board-wrap{position:relative}.board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:#101428;padding:8px;border:1px solid #ffffff08;border-radius:15px;touch-action:none;user-select:none}.cell{position:relative;min-width:0;padding:7px;aspect-ratio:1;background:linear-gradient(145deg,#242740,#1d2036);border:1px solid #ffffff05;border-radius:8px;display:grid;place-items:center;transition:background .15s,transform .15s,box-shadow .15s;touch-action:none}.cell:hover{background:#30334d}.cell svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 3px #0005);pointer-events:none}.cell.selected{background:#554b77;box-shadow:inset 0 0 0 2px #d4c3ff;transform:scale(1.05);z-index:1}.cell.hint{animation:hint 1s infinite}.cell.clear svg{animation:clear .25s forwards}.cell.invalid{animation:shake .3s}.cell.fall svg{animation:fall .25s}.burst{position:absolute;inset:35% 0 auto;text-align:center;font-size:32px;font-weight:800;color:white;text-shadow:0 3px 20px #000;pointer-events:none;opacity:0}.burst.show{animation:burst .6s}.status{text-align:center;min-height:39px;padding:15px 0 8px;font-size:11px;color:#c2b4e6}.controls{display:flex;gap:10px;margin-top:3px}.secondary{flex:1;border:1px solid #ffffff14;border-radius:11px;padding:12px 10px;background:#ffffff04;color:#cccadd;font-size:12px}.secondary:hover{background:#ffffff0b}.mobile-help{display:none}footer{display:flex;justify-content:space-between;font-size:10px;color:#777c97;border-top:1px solid var(--border);margin-top:40px;padding-top:20px}dialog{max-width:360px;width:calc(100% - 36px);background:#24253f;color:var(--ink);border:1px solid #c6acff30;border-radius:24px;padding:30px;text-align:center;box-shadow:0 20px 90px #0008}dialog::backdrop{background:#080b20c9;backdrop-filter:blur(6px)}.modal-symbol{font-size:60px;color:#d8bdff}h2{font-size:26px;letter-spacing:-.7px;margin:12px 0}dialog p{font-size:13px;line-height:1.9;color:#b5b4cd;white-space:pre-line}.primary{background:#baabf2;color:#17172d;font-weight:800;width:100%;border:0;border-radius:12px;padding:14px;margin-top:15px}.text-button{color:#a6a5c1;border:0;background:none;margin-top:17px;padding:6px;font-size:12px}body.light{--bg:#eef0fa;--ink:#252a45;--muted:#626a86;--border:#252a4519;background:radial-gradient(ellipse at 75% 40%,#d9d1f9,transparent 60%),#eef0fa}body.light .game{background:linear-gradient(150deg,#fff,#e6e6f5);border-color:#d1cce6}body.light .secondary{color:#555471;border-color:#c7c5db}body.light .stats strong small{color:#797a92}body.light .status{color:#665388}body.light .instructions span{color:#626a86}body.light .icon-button{color:#555471}body.light footer{color:#626a86}
@keyframes hint{50%{box-shadow:inset 0 0 0 2px #e2ce88;background:#5a4d42}}@keyframes clear{to{transform:scale(.15) rotate(35deg);opacity:0}}@keyframes fall{from{transform:translateY(-18px);opacity:.35}to{transform:translateY(0);opacity:1}}@keyframes shake{25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}}@keyframes burst{15%,70%{opacity:1;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-25px)}}
@media(max-width:900px){main{max-width:550px;padding:20px}.layout{display:block;margin-top:25px}aside{display:none}.game{padding:16px}.brand{font-size:20px}.mobile-help{display:block;text-align:center;font-size:10px;color:var(--muted);line-height:1.7;margin-top:13px}footer{margin-top:22px;padding-top:16px}footer span:last-child{display:none}.cell{padding:6px}.board{gap:4px;padding:7px}}
@media(max-width:420px){main{padding:14px 12px}.brand small{font-size:9px}.brand-mark{width:40px;height:40px}.layout{margin-top:18px}.game{padding:12px;border-radius:20px}.board{gap:3px;padding:6px}.cell{border-radius:6px;padding:5px}.stats strong{font-size:26px}.status{font-size:10px}.secondary{padding:11px 6px}footer{font-size:9px}}
@media(max-height:740px) and (max-width:900px){main{max-width:440px;padding-top:10px}.layout{margin-top:12px}.game{max-width:min(100%,calc(100svh - 230px));margin:auto;padding:10px}.brand small{display:none}.brand-mark{height:34px;width:34px}.stats{padding-bottom:9px}.stats strong{font-size:23px}.progress{margin-bottom:10px}.status{padding-top:9px;min-height:30px}.mobile-help{margin-top:8px;font-size:9px}.secondary{padding:9px 5px}footer{margin-top:12px;padding-top:10px}}
@media(max-height:480px) and (min-width:600px){main{max-width:800px;padding:12px 24px}.layout{display:grid;grid-template-columns:1fr 310px;margin-top:10px;gap:35px}aside{display:block}h1{font-size:28px;margin:12px 0}.intro,.instructions,.desktop-note,.mobile-help,footer{display:none}.mission{margin-top:15px}.game{max-width:100%;padding:10px}.brand small{display:none}.board{gap:3px;padding:4px}.cell{padding:4px}.status{padding-top:8px;min-height:25px}.secondary{padding:8px}.progress{margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.level-button{display:flex;justify-content:space-between;width:100%;background:none;border:0;border-bottom:1px solid var(--border);color:var(--purple);font-size:11px;font-weight:700;padding:0 5px 13px;margin-bottom:15px}.level-button span{font-size:9px;color:var(--muted);font-weight:500}.goals{display:flex;gap:8px;margin:0 4px 10px}.goals:empty{display:none}.goal{display:flex;align-items:center;gap:5px;border:1px solid #ffffff15;border-radius:8px;padding:4px 9px;background:#ffffff05;font-size:10px;color:var(--muted)}.goal svg{width:18px;height:20px}.goal.done{color:#95dfc8;border-color:#95dfc84d}#level-map{max-width:430px;padding:22px}.map-nav{display:flex;align-items:center;gap:15px;margin:14px 0;font-size:12px}.map-nav button{flex:0 0 45px}.map-nav span{flex:1}#map-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:45svh;overflow:auto;padding:3px}.map-level{position:relative;background:#ffffff07;border:1px solid #ffffff14;border-radius:8px;color:#cfc8eb;min-height:38px;font-size:11px}.map-level.complete{color:#9ee0c7;background:#95dfc815}.map-level.current{border:2px solid #c5aaf9}.map-level small{position:absolute;top:1px;right:4px;font-size:8px}.map-level:disabled{opacity:.28}#storage-note{font-size:10px;line-height:1.6}.board[aria-busy=true]{cursor:wait}@media(max-height:740px) and (max-width:900px){.game{max-width:min(100%,calc(100svh - 270px))}.level-button{padding-bottom:8px;margin-bottom:9px}.goals{margin-bottom:6px}.goal{padding:2px 6px}}
.board{grid-template-rows:repeat(8,minmax(0,1fr))}.cell{min-height:0}.cell svg{display:block}
.board{min-height:0}.cell{aspect-ratio:auto;overflow:hidden}
.about{margin-top:26px;border:1px solid var(--border);border-radius:12px;color:var(--muted);font-size:12px;line-height:1.9}.about summary{padding:14px 18px;cursor:pointer;font-weight:600}.about>div{padding:0 18px 12px;max-width:760px}.about h2{font-size:20px;color:var(--ink);letter-spacing:-.3px}.about h3{font-size:14px;color:var(--ink);margin-top:22px}.about a{color:var(--purple)}.no-script{border:1px solid var(--border);padding:14px;border-radius:10px;font-size:13px}@media(max-width:900px){.about{margin-top:16px;font-size:11px}.about h2{font-size:17px}.about h3{font-size:13px}}
@media(max-height:480px) and (min-width:600px){main{max-width:800px;padding:10px 24px}header{position:absolute;left:24px;top:15px}.layout{grid-template-columns:minmax(0,1fr) 250px;gap:25px;margin-top:0;align-items:start}aside{padding-top:55px}.game{max-width:250px;padding:8px}.level-button{font-size:10px;line-height:1.2;margin-bottom:5px;padding-bottom:5px}.stats{padding:1px 5px 5px}.stats span{font-size:8px;line-height:1.2}.stats strong{font-size:20px;margin-top:3px}.progress{margin-bottom:6px}.board{gap:2px;padding:4px}.cell{padding:3px}.status{font-size:9px;line-height:1.4;padding:6px 0;min-height:0}.secondary{font-size:11px;line-height:1.2;padding:6px}.about{margin-top:12px}}
.player-bar{display:flex;align-items:center;gap:12px;margin:20px 0 8px;padding:12px 16px;border:1px solid #9c86d52b;border-radius:16px;background:#a99aca09}.player-bar>div{flex:1;min-width:0}.player-bar strong{display:block;font-size:14px;overflow-wrap:anywhere}.player-bar span{display:block;font-size:11px;color:#aaa7bf;margin-top:4px}.player-bar .text-button{width:auto;margin:0;padding:8px}.player-bar .secondary{padding:10px 14px;font-size:12px;flex-shrink:0}.castle-card{display:flex;align-items:center;gap:30px;margin:28px 0 10px;padding:25px 30px;background:linear-gradient(135deg,#9c7bd517,#8bd8e00b);border:1px solid #b8a1f22e;border-radius:22px}.castle-card>div{flex:1}.castle-card h2{font-size:22px;line-height:1.3;margin:8px 0}.castle-card p{font-size:13px;line-height:1.7;color:#aaa7bf;margin:6px 0}.castle-card #castle-mini{font-weight:700;color:#d7c6f5}.castle-card .primary{width:auto;min-width:160px;flex-shrink:0}#profile-modal p{white-space:normal}#login-code{font-size:13px;padding:12px;background:#a99aca14;border-radius:10px}.login-link{display:block;text-decoration:none;text-align:center;box-sizing:border-box;margin-top:12px}.login-link[hidden],[hidden]{display:none!important}.sound-setting{margin:22px 0;text-align:left}.sound-setting label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:14px}.sound-setting input{width:100%;accent-color:#b89ce8}.sound-setting span{color:#baa3e5}#castle-modal{width:min(600px,calc(100vw - 28px));max-height:90dvh;overflow-y:auto}#castle-scene svg{width:100%;height:auto;display:block}#castle-count{font-size:14px;color:#d7c6f5}.castle-plan{text-align:left;margin:20px 0;font-size:13px}.castle-plan summary{cursor:pointer;padding:10px 0}.castle-plan ol{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}.castle-plan li{color:#9692ab;padding:7px;border-radius:8px;background:#a99aca08}.castle-plan li span{display:inline-block;width:26px}.castle-plan .built{color:#9bd5be;background:#80cba514}.castle-tip{font-size:12px!important;color:#aaa7bf}.light .player-bar,.light .castle-card{background:#ffffff88;border-color:#7463a12b}.light .player-bar span,.light .castle-card p,.light .castle-tip{color:#655e78}.light .castle-card #castle-mini{color:#70569a}.light #castle-count{color:#70569a}.light .castle-plan .built{color:#32715b}.light .castle-plan li{color:#655e78}@media(max-width:600px){.player-bar{margin-top:14px;padding:10px;gap:6px}.player-bar .secondary{padding:9px;font-size:11px}.player-bar span{font-size:10px}.castle-card{padding:20px;gap:14px;align-items:flex-start;flex-direction:column}.castle-card h2{font-size:20px}.castle-card .primary{width:100%}.castle-plan ol{grid-template-columns:1fr}.castle-card .eyebrow{font-size:10px}}
@media(max-height:480px) and (min-width:600px){.player-bar{margin:0 0 8px;padding:7px 12px;max-width:calc(100% - 285px)}.player-bar span{font-size:9px}.player-bar .secondary{padding:6px;font-size:10px}header{position:static;margin-bottom:8px}.layout{margin-top:0}aside{padding-top:5px}.game{margin-top:-105px}.castle-card{margin-top:15px}main{max-width:800px}}
@media(max-height:480px) and (min-width:600px){header{max-width:calc(100% - 285px)}.layout{grid-template-columns:minmax(0,1fr) 232px}.game{max-width:232px}}
#castle-modal{max-width:600px}
