:root{
  --ink:#f6fbff;--ink-dark:#102444;--muted:#9db1ca;--navy:#0c1d38;--navy2:#142b51;
  --blue:#3f8cff;--cyan:#35c9dc;--green:#45c96b;--yellow:#ffc94b;--orange:#ff933f;--red:#ff5b65;--purple:#8e63f5;
  --shadow:0 18px 44px rgba(0,15,38,.42);--soft:0 8px 22px rgba(0,15,38,.25)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"SF Pro Rounded","Segoe UI",Arial,sans-serif;overflow-x:hidden}
body{min-height:100svh;display:flex;justify-content:center;padding:0;user-select:none;color:var(--ink);background:radial-gradient(circle at 50% -20%,#274c82 0,#0a1930 50%,#061122 100%)}
button{font:inherit;color:inherit}
.game-shell{width:min(100%,480px);min-height:100svh;display:flex;flex-direction:column;gap:8px;position:relative;padding:10px 10px 9px;background:linear-gradient(180deg,#183563 0,#10284b 14%,#0b1d38 100%);box-shadow:0 0 0 1px #34568155,inset 0 1px #ffffff22}
.topbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;padding:1px 1px 0}
.brand{font-weight:1000;font-size:clamp(20px,5.4vw,29px);letter-spacing:-.8px;white-space:nowrap;color:#fff;text-shadow:0 2px 0 #07152b99}
.brand span{background:linear-gradient(90deg,#5db5ff,#6de0d3);-webkit-background-clip:text;background-clip:text;color:transparent}
.level-pill{justify-self:center;padding:7px 12px;border-radius:999px;background:linear-gradient(180deg,#304f7d,#172d50);color:white;font-weight:1000;font-size:10px;box-shadow:0 6px 15px #020b1933,inset 0 1px #ffffff55;border:1px solid #5578a7}
.top-actions{justify-self:end;display:flex;gap:5px}
.icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid #5b79a0;background:linear-gradient(180deg,#294c78,#183458);box-shadow:var(--soft),inset 0 1px #ffffff3d;display:grid;place-items:center;cursor:pointer;font-size:17px;color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stat{background:linear-gradient(180deg,#f9fcff,#dceafb);border:1px solid #b8cce5;border-radius:13px;padding:7px 6px;text-align:center;box-shadow:0 5px 12px #06132640,inset 0 1px #fff}
.stat small{display:block;color:#6c81a0;text-transform:uppercase;letter-spacing:.7px;font-size:8px;font-weight:950}
.stat b{display:block;margin-top:1px;font-size:18px;color:#15345c;line-height:1.1}
.board-card{position:relative;flex:1;min-height:560px;border-radius:24px;border:2px solid #476991;background:linear-gradient(180deg,#1a355c,#0d203d);box-shadow:0 17px 36px #020b1855,inset 0 1px #ffffff18;overflow:hidden}
.board-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#ffffff13,transparent 22%);opacity:.7;z-index:99}
.tools{display:flex;gap:7px}
.tool-btn,.primary-btn,.secondary-btn{border:none;border-radius:15px;cursor:pointer;font-weight:1000;box-shadow:0 7px 18px rgba(1,12,28,.32),inset 0 1px rgba(255,255,255,.3)}
.tool-btn{flex:1;padding:9px 7px;background:linear-gradient(180deg,#2e5688,#17365e);border:1px solid #5f82ad;color:#eef8ff}
.tool-btn b{display:block;font-size:21px;line-height:1.05}.tool-btn span{display:block;margin-top:3px;font-size:8px;color:#c1d5ec;letter-spacing:.35px}
.tool-btn:active,.icon-btn:active{transform:translateY(1px);filter:brightness(.9)}
.primary-btn{padding:11px 18px;background:linear-gradient(180deg,#90ee60,#38be45 62%,#219631);color:#062b0d;border:1px solid #a9ff81;text-shadow:0 1px #fff7}
.secondary-btn{padding:11px 18px;background:linear-gradient(180deg,#69b8ff,#3379da);color:white;border:1px solid #8dcbff}
.toast{position:fixed;z-index:1000;left:50%;top:13%;transform:translate(-50%,-8px) scale(.96);opacity:0;padding:9px 15px;border-radius:13px;background:#0d2648f0;color:#fff;font-weight:950;box-shadow:0 12px 30px #020b1a66;border:1px solid #56769c;transition:.18s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
.modal-wrap{position:absolute;inset:0;z-index:200;display:none;place-items:center;background:rgba(6,17,36,.68);backdrop-filter:blur(5px)}.modal-wrap.show{display:grid}
.modal{width:min(88%,360px);padding:22px;border-radius:24px;background:linear-gradient(180deg,#3b2c84,#24195d 58%,#171240);border:2px solid #7e69d5;text-align:center;box-shadow:0 28px 70px #02071899,inset 0 1px #ffffff33;color:#fff}.modal .stars{font-size:42px;letter-spacing:4px;filter:drop-shadow(0 4px 3px #0006)}.modal h2{margin:8px 0 5px;font-size:26px;color:#fff}.modal p{margin:0 0 16px;color:#d6d5ff;line-height:1.45}.modal-actions{display:flex;gap:8px;justify-content:center}
.spark{position:fixed;width:8px;height:8px;border-radius:3px;z-index:1200;pointer-events:none;animation:spark .85s ease-out forwards}@keyframes spark{to{transform:translate(var(--dx),var(--dy)) rotate(280deg);opacity:0}}
@keyframes pop{50%{transform:scale(1.13)}}.pop{animation:pop .28s ease-out}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}.shake{animation:shake .25s linear}
.game-caption{text-align:center;color:#bed0e6;font-size:9px;font-weight:800;padding:3px 5px;line-height:1.35}.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;background:#eff5fb;color:#4b6688;border:1px solid #d4e1ee}
@media(max-width:430px){.game-shell{gap:7px;padding:7px}.board-card{min-height:calc(100svh - 190px)}.stats{gap:4px}.stat{padding:6px 3px}.tool-btn{padding:8px 4px}.brand{font-size:18px}.level-pill{font-size:9px;padding:6px 9px}.icon-btn{width:32px;height:32px}.game-caption{font-size:8px}}