@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#eaf3ff;background:#080d19}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden}.backdrop{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 50% 24%,#1d2441 0,#0c1428 39%,#080d19 75%)}.backdrop:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,transparent,#000 30%,transparent)}button{font:inherit;cursor:pointer}.app{width:min(1100px,calc(100% - 44px));margin:auto}.topbar{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16}.brand{display:flex;align-items:center;gap:13px}.brand-icon{display:grid;place-items:center;width:38px;height:38px;border:2px solid #5ee9f2;color:#5ee9f2;font-size:31px;line-height:1;box-shadow:0 0 20px #5ee9f244}.brand strong{display:block;font:900 27px/1 'Barlow Condensed',sans-serif;letter-spacing:2px}.brand strong span{color:#5ee9f2}.brand small{display:block;margin-top:5px;color:#758aa7;font-size:9px;font-weight:700;letter-spacing:3.3px}.top-actions{display:flex;gap:10px}.icon-button{width:40px;height:40px;border:1px solid #35506c;background:#111d30;color:#a9c2d9;border-radius:9px;font-weight:800}.icon-button:hover,.icon-button.active{border-color:#64e7f0;color:#6df3ff}.game-layout{display:grid;grid-template-columns:220px 340px 220px;gap:28px;justify-content:center;align-items:start;padding:39px 0 20px}.panel{display:flex;flex-direction:column;gap:16px;padding-top:9px}.card{border:1px solid #33425d;background:linear-gradient(145deg,#152139e8,#101b2de8);border-radius:13px;padding:18px 19px;box-shadow:0 12px 30px #0003}.card-title{display:flex;align-items:center;justify-content:space-between;color:#9ab2cb;font:800 16px 'Barlow Condensed',sans-serif;letter-spacing:2px}.card-title small{font:700 10px 'DM Sans',sans-serif;color:#657d9c;letter-spacing:1px}.hold-card canvas{display:block;margin:13px auto 0;width:124px;height:104px}.large-number{font:800 44px/1.1 'Barlow Condensed',sans-serif;letter-spacing:1px;margin:14px 0 18px}.stat-row{display:flex;justify-content:space-between;align-items:center;color:#7790aa;font-size:11px;font-weight:700;letter-spacing:1.6px}.stat-row strong{color:#eaf3ff;font:700 21px 'Barlow Condensed',sans-serif;letter-spacing:1px}.score-card .stat-row{border-top:1px solid #ffffff13;padding-top:14px}.stat-card .stat-row+.stat-row{margin-top:15px}.level-track{height:5px;background:#24364e;border-radius:5px;margin:13px 0 17px;overflow:hidden}.level-track div{height:100%;width:0;background:linear-gradient(90deg,#44cce7,#a57cff);border-radius:5px;transition:width .3s}.board-shell{width:340px}.board-bezel{position:relative;padding:18px;background:#17243a;border:1px solid #415475;border-radius:16px;box-shadow:0 25px 70px #0009,0 0 45px #4bdfff17}.board-bezel:before{content:"";pointer-events:none;position:absolute;inset:-1px;border-radius:16px;border:1px solid #5ce4f844}#board{display:block;width:300px;height:600px;background:#0a1324;border:1px solid #344c65;image-rendering:auto}.board-footer{display:flex;justify-content:space-between;padding:14px 4px;color:#7890a8;font-size:10px;letter-spacing:1.7px;font-weight:700}.board-footer i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5beed9;box-shadow:0 0 9px #5beed9;margin-right:5px}.next-canvases{display:flex;flex-direction:column;align-items:center;margin-top:12px}.next{width:124px;height:88px}.next+.next{border-top:1px solid #ffffff10}.guide-card{padding-bottom:12px}.key-row{display:flex;align-items:center;justify-content:space-between;margin-top:13px;color:#849ab4;font-size:10px;letter-spacing:1.1px;font-weight:700}.key-row span:last-child{display:flex;gap:4px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:22px;padding:0 5px;border:1px solid #435874;border-bottom-width:2px;border-radius:4px;background:#22324b;color:#d0dfef;font:700 10px 'DM Sans',sans-serif;letter-spacing:0}.overlay{position:absolute;inset:18px;background:#091325e8;display:grid;place-items:center;text-align:center;backdrop-filter:blur(4px);transition:opacity .2s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-content{padding:15px}.eyebrow{color:#58e4ed;font:700 11px 'DM Sans',sans-serif;letter-spacing:3px}.overlay h1{font:900 58px/.86 'Barlow Condensed',sans-serif;letter-spacing:1px;margin:25px 0 20px}.overlay h1 em{font-style:normal;color:#69e9f2}.overlay p{color:#a7b9cc;font-size:12px;margin-bottom:36px}.primary-button{width:210px;height:50px;background:#62e9ee;color:#071423;border:0;border-radius:7px;font:800 17px 'Barlow Condensed',sans-serif;letter-spacing:1.5px;box-shadow:0 9px 30px #53dce65a;transition:transform .15s,background .15s}.primary-button:hover{transform:translateY(-2px);background:#9dfaff}.primary-button span{margin-left:15px;font-size:20px}.overlay-hint{color:#5d718d;font-size:10px;letter-spacing:1px;margin-top:19px}.toast{pointer-events:none;position:absolute;left:50%;top:38%;transform:translate(-50%,-10px);color:#fff;font:900 28px 'Barlow Condensed',sans-serif;letter-spacing:2px;text-shadow:0 0 15px #60e8f5;opacity:0;white-space:nowrap}.toast.show{animation:toast .9s ease-out}@keyframes toast{10%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px)}}.touch-controls{display:none;gap:6px;justify-content:center;margin:7px auto 25px}.touch-controls button{min-width:47px;height:48px;flex:1;border:1px solid #42617b;border-radius:8px;color:#bde7ed;background:#1b2e46;font-weight:800;touch-action:none}.touch-controls button:active{background:#3b7f92}.page-footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff16;margin-top:20px;padding:20px 0 30px;color:#50647e;font-size:9px;letter-spacing:2px;font-weight:700}@media(max-width:850px){.game-layout{grid-template-columns:150px 320px 150px;gap:12px}.board-shell{width:320px}.board-bezel{padding:9px}.panel .card{padding:13px}.guide-card{display:none}}@media(max-width:670px){.app{width:min(400px,calc(100% - 20px))}.topbar{height:66px}.brand strong{font-size:22px}.brand small{font-size:7px}.game-layout{grid-template-columns:1fr 1fr;gap:9px;padding-top:13px}.board-shell{grid-column:1/3;grid-row:1;width:100%;max-width:340px;margin:auto}.board-bezel{padding:9px}#board{width:100%;height:auto;aspect-ratio:1/2}.overlay{inset:9px}.left-panel,.right-panel{padding:0;display:contents}.hold-card,.next-card{display:none}.score-card,.stat-card{grid-row:2;padding:12px!important}.large-number{font-size:29px;margin:4px 0}.stat-card .stat-row strong{font-size:17px}.touch-controls{display:flex}.page-footer{margin-top:0}.overlay h1{font-size:48px}}@media(max-height:790px) and (min-width:671px){.topbar{height:70px}.game-layout{padding-top:18px}.board-bezel{padding:9px}.board-shell{width:320px}.page-footer{display:none}}
.touch-controls{display:flex;width:min(340px,100%);margin:0 auto 18px}.touch-controls button{min-width:0;font-size:12px;box-shadow:inset 0 1px #ffffff32,0 3px 10px #0005}.touch-controls button:hover{border-color:#78eafa;color:#fff;background:#315a72}#board{cursor:crosshair;touch-action:none}