:root{--bg:#080c1b;--panel:#111a35;--line:#253454;--ink:#eff9ff;--muted:#91a6c0;--mint:#62f5e4;--purple:#aa89ff;--rose:#ff739a;--gold:#ffd58b;--shadow:0 24px 75px #02061780;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.ambient{position:fixed;inset:0;background:radial-gradient(ellipse at 20% -20%,#132c55 0,transparent 55%),radial-gradient(ellipse at 90% 95%,#251544 0,transparent 52%);pointer-events:none}#app{position:relative;max-width:1260px;min-height:100svh;margin:auto;padding:0 38px;display:flex;flex-direction:column}.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}.brand{display:flex;align-items:center;gap:13px;letter-spacing:.22em;font-size:14px}.brand small{display:block;color:var(--mint);letter-spacing:.37em;font-size:9px;margin-top:4px}.sigil{font-size:34px;color:var(--mint);text-shadow:0 0 18px #62f5e488}.head-actions{display:flex;align-items:center;gap:10px}.credit{background:#121f37;border:1px solid #33435e;padding:9px 16px;border-radius:99px;font-variant-numeric:tabular-nums}.credit span{color:var(--gold)}.icon-btn{border:1px solid #2c405f;background:#111b31;width:39px;height:39px;border-radius:13px;font-size:18px}.layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.25fr);gap:60px;flex:1;padding:49px 0 30px}.sidebar{padding-top:45px;display:flex;flex-direction:column;min-width:0}.eyebrow{font-size:11px;letter-spacing:.25em;color:var(--mint);font-weight:750}.sidebar h1{font-size:clamp(34px,4.9vw,65px);line-height:1.06;letter-spacing:-.055em;font-weight:780;margin:21px 0}.sidebar em{font-style:normal;background:linear-gradient(100deg,var(--mint),var(--purple));color:transparent;background-clip:text}.intro{max-width:390px;font-size:15px;color:#afbed1;line-height:1.8;margin:1px 0 43px}.mission{border:1px solid #2f4165;background:linear-gradient(160deg,#182643aa,#131c38aa);border-radius:20px;padding:19px 20px 15px;max-width:415px}.mission-top{display:flex;justify-content:space-between;letter-spacing:.15em;font-size:11px;font-weight:800}.mission-top b{color:var(--mint);letter-spacing:0}.track{height:7px;border-radius:12px;background:#253451;margin:15px 0 7px;overflow:hidden}.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#63dfee,#c19aff);transition:width .6s}.mission p{color:#adbfce;font-size:12px;margin:9px 0}.city{height:120px;position:relative;overflow:hidden;border-bottom:1px solid #62f5e499;background:repeating-linear-gradient(90deg,transparent 0 18px,#4b659111 19px 20px);display:flex;align-items:end;justify-content:space-evenly}.building{width:12%;background:linear-gradient(180deg,#26395f,#111a35);border:1px solid #465b7d;border-radius:3px 3px 0 0;position:relative;box-shadow:0 0 15px #30f1d611}.building:after{content:'';position:absolute;inset:6px 24%;background:repeating-linear-gradient(180deg,var(--mint) 0 3px,transparent 3px 11px);opacity:.13}.building.on{border-color:var(--mint);box-shadow:0 0 25px #56e6e744}.building.on:after{opacity:.83}.sidebar-bottom{margin-top:auto;padding-top:40px;font-size:11px;color:#7892ae;display:flex;gap:11px;flex-wrap:wrap}.play-area{min-width:0}.level-header{display:flex;justify-content:space-between;align-items:start;gap:12px;margin:5px 0 25px}.level-header h2{font-size:25px;letter-spacing:.02em;margin:7px 0 0}.level-counter{text-align:right;min-width:100px}.level-badge{border:1px solid #38526f;background:#141f35;border-radius:9px;padding:7px 10px;font-size:11px;letter-spacing:.11em}.level-badge b{color:var(--mint);font-size:16px;margin-left:6px}#stars-earned{display:block;color:var(--gold);letter-spacing:3px;margin-top:7px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:15px}.stat{min-width:0;background:#151f37b3;border:1px solid #2a3751;padding:12px 8px;text-align:center;border-radius:12px}.stat span{display:block;color:#849ab4;font-size:9px;letter-spacing:.08em;white-space:nowrap}.stat strong{font-size:19px;display:block;margin-top:6px;font-variant-numeric:tabular-nums}.board-outer{position:relative;padding:14px;border:1px solid #3a4d74;border-radius:23px;background:linear-gradient(140deg,#182540dd,#11192edb);box-shadow:var(--shadow);isolation:isolate}.rays{z-index:-1;position:absolute;inset:0;border-radius:23px;background:radial-gradient(circle at center,#56dfe612,transparent 67%)}#board{width:100%;aspect-ratio:1;background:radial-gradient(circle,#142d46 0%,#0b162d 90%);border:1px solid #344d6e;border-radius:13px;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:3px;padding:7px;touch-action:manipulation;overflow:hidden}.tile{background:#18294a50;border:1px solid #38547333;border-radius:7px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.tile:nth-child(3n+1){background:#182d5055}.tile.glow{background:#264356bb}.arrow{width:88%;height:88%;border:0;border-radius:10px;background:linear-gradient(140deg,#19415b,#122848);box-shadow:0 3px 7px #03071577,inset 0 1px 1px #ffffff20;color:var(--mint);display:grid;place-items:center;transition:transform .25s,background .2s;position:relative;touch-action:manipulation}.arrow.v1{color:#ccb3ff;background:linear-gradient(140deg,#3b2c67,#24234c)}.arrow.v2{color:#ffd6a0;background:linear-gradient(140deg,#534027,#2c2944)}.arrow.v3{color:#ff9cae;background:linear-gradient(140deg,#512d4d,#2a2348)}.arrow svg{width:67%;height:67%;max-width:43px;max-height:43px;overflow:visible;filter:drop-shadow(0 0 4px currentColor)}.arrow svg path{stroke:currentColor;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;fill:none}.arrow.safe{outline:1px solid #62f5e414}.arrow.hinted{outline:3px solid var(--gold);box-shadow:0 0 20px #ffca7777;animation:pulse 1s infinite}.arrow.blocked{animation:shake .28s}.arrow.flying{z-index:5;pointer-events:none;transform:translate(var(--tx),var(--ty)) rotate(var(--rotate)) scale(.74);opacity:0;transition:transform .37s cubic-bezier(.4,0,.85,.7),opacity .33s}.tile.pop{animation:pop .45s}.burst{position:absolute;color:var(--gold);font-weight:850;font-size:15px;pointer-events:none;animation:rise .85s forwards}.toolbelt{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}.tool{border:1px solid #304361;background:linear-gradient(#192642,#111c33);padding:9px 4px 8px;border-radius:11px;display:flex;align-items:center;flex-direction:column;gap:2px;min-width:0}.tool:hover{background:#213450}.tool b{font-size:23px;line-height:1.3;color:var(--mint);font-weight:550}.tool span{letter-spacing:.1em;font-size:10px;font-weight:750}.tool small{font-size:9px;color:#8aa2b8}.tip{font-size:12px;line-height:1.5;color:#8ea9bb;margin:15px auto 0;text-align:center}.tip-dot{display:inline-block;background:#65f5e4;border-radius:50%;width:6px;height:6px;vertical-align:middle;margin-right:6px}footer{font-size:10px;text-align:center;color:#657c9b;padding:16px;border-top:1px solid #ffffff10}.overlay{position:fixed;z-index:30;inset:0;background:#030817e8;display:flex;justify-content:center;align-items:center;padding:18px;backdrop-filter:blur(7px)}.hidden{display:none!important}.dialog{position:relative;background:linear-gradient(160deg,#1b2b4c,#111c36);border:1px solid #4b5d82;border-radius:20px;width:min(100%,540px);max-height:90svh;overflow-y:auto;box-shadow:0 30px 120px #0008;padding:35px 28px;text-align:center}.dismiss{position:absolute;right:17px;top:14px;background:transparent;border:0;color:#93abc4;font-size:21px}.dialog h3{font-size:31px;letter-spacing:-.025em;margin:9px 0}.dialog p{font-size:14px;line-height:1.65;color:#aab9d1}.dialog .spark{font-size:32px;color:var(--gold)}.dialog .summary{font-size:14px;color:var(--mint);font-weight:750}.primary{border:0;border-radius:13px;background:linear-gradient(120deg,#6de9e4,#b8a0ff);color:#0a1730;padding:13px 24px;font-weight:850;letter-spacing:.07em;margin:11px 5px}.secondary{border:1px solid #566988;border-radius:13px;background:#16233e;padding:13px 24px;margin:11px 5px}.level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:17px 0}.level-button{border:1px solid #354563;border-radius:9px;background:#1e2d4e;padding:8px 1px;font-variant-numeric:tabular-nums;font-weight:700;min-height:51px}.level-button small{display:block;color:var(--gold);font-size:9px;letter-spacing:-1px;margin-top:3px}.level-button.locked{opacity:.38}.level-button:not(.locked):hover{border-color:var(--mint)}#toast{position:absolute;z-index:12;top:46%;left:50%;transform:translate(-50%,-50%);background:#09182edc;border:1px solid #70e7da;color:#d9fffb;border-radius:99px;padding:10px 21px;white-space:nowrap;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}@keyframes pulse{50%{filter:brightness(1.7);transform:scale(1.08)}}@keyframes shake{25%{transform:translateX(-3px)}65%{transform:translateX(3px)}}@keyframes rise{to{transform:translateY(-35px);opacity:0}}@keyframes pop{50%{background:#3a8b80}}@media(max-width:900px){#app{padding:0 20px}.layout{gap:24px;grid-template-columns:minmax(240px,.85fr) minmax(0,1fr)}.sidebar{padding-top:30px}.sidebar h1{font-size:39px}}@media(max-width:710px){#app{padding:0 13px}.topbar{min-height:64px}.brand{font-size:11px;gap:7px}.sigil{font-size:28px}.brand small{font-size:8px}.credit{padding:8px 9px;font-size:12px}.head-actions{gap:6px}.icon-btn{height:35px;width:35px}.layout{display:flex;flex-direction:column;gap:0;padding:18px 0 16px}.sidebar{order:2;padding-top:26px}.sidebar h1{font-size:29px;margin:10px 0}.intro{font-size:12px;margin:0 0 19px}.sidebar .mission{max-width:none}.sidebar-bottom{padding-top:16px}.play-area{order:1}.level-header{margin:3px 4px 12px}.level-header h2{font-size:21px}.eyebrow{font-size:9px}.level-badge{padding:5px 7px}.stats{gap:5px;margin-bottom:10px}.stat{padding:8px 2px;border-radius:9px}.stat strong{font-size:17px;margin-top:3px}.stat span{font-size:8px}.board-outer{padding:8px;border-radius:13px}#board{padding:5px;gap:3px}.tile{border-radius:5px}.arrow{border-radius:6px}.arrow svg{width:72%;height:72%}.toolbelt{gap:6px;margin-top:11px}.tool{padding:7px 2px}.tool b{font-size:21px}.tool span{font-size:9px}.tool small{font-size:8px}.tip{font-size:10px;margin-top:10px}footer{font-size:9px}.dialog{padding:31px 16px}.level-grid{gap:5px}.level-button{font-size:11px;min-height:45px}}
/* CrazyGames' compact 907×510 desktop iframe */
@media (min-width:711px) and (max-height:610px){
  #app{max-width:1160px;padding:0 20px}
  .topbar{min-height:45px}
  .layout{padding:8px 0 4px;gap:20px;grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr)}
  .sidebar{padding-top:18px}
  .sidebar h1{font-size:clamp(26px,3vw,38px);margin:7px 0}
  .intro{font-size:11px;line-height:1.45;margin:0 0 10px}
  .mission{padding:8px 11px 5px;border-radius:10px}
  .mission .track{margin:7px 0 4px}
  .city{height:46px}
  .sidebar-bottom{padding-top:12px;font-size:9px}
  .level-header{margin:2px 0 6px}
  .level-header h2{font-size:17px;margin:2px 0 0}
  .level-badge{padding:2px 7px}
  #stars-earned{margin-top:1px}
  .stats{gap:5px;margin-bottom:5px}
  .stat{padding:4px 2px;border-radius:7px}
  .stat span{font-size:8px}
  .stat strong{font-size:14px;margin-top:2px}
  .board-outer{padding:5px;max-width:380px;margin:auto}
  #board{width:min(100%,calc(100svh - 240px));margin:0 auto;gap:2px;padding:3px}
  .toolbelt{max-width:380px;margin:7px auto 0}
  .tool{padding:3px 1px;gap:0}
  .tool b{font-size:17px}
  .tool span{font-size:8px}
  .tool small{font-size:7px}
  .tip{font-size:9px;margin-top:3px}
  footer{padding:4px;font-size:9px}
}