:root{--ink: #0d1926;--card: rgba(13, 25, 38, .94);--edge: #35506b;--text: #f5f3e7;--dim: #9db8b5;--gold: #ffc64b;--teal: #2ec4b6;--good: #59d99d;--bad: #ff6b5e;--bay: #35c04a;font-family:Trebuchet MS,Segoe UI,sans-serif}html,body{margin:0;height:100%;overflow:hidden;background:#0b2530}#app,#app canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#ui{position:fixed;inset:0;pointer-events:none;color:var(--text)}#ui *{box-sizing:border-box}.card{background:var(--card);border:2px solid var(--edge);border-radius:13px;padding:8px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 18px #0006}#hud{position:absolute;inset:0;display:none}#hud .top{position:absolute;top:16px;left:16px;right:16px;display:flex;gap:12px;align-items:flex-start}#hud .lvl b{color:var(--gold);margin-left:6px}#hud .obj{margin:0 auto}#hud .obj .chip{width:38px;height:38px;border-radius:8px;flex:none;background:#123c5e;border:2px solid #5b87ab;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;color:#fff}#hud .obj .task{font-size:15px;font-weight:700;line-height:1.25}#hud .obj .task span{color:var(--gold)}#hud .timer{font-family:Consolas,Menlo,monospace;font-size:24px;font-weight:700}#hud .timer.danger{color:var(--bad);animation:pulse .5s infinite alternate}#hud .pips{display:flex;gap:6px;margin-top:8px}#hud .pips i{width:24px;height:12px;border-radius:3px;background:var(--good)}#hud .pips i.dead{background:var(--bad)}#hud .left{display:flex;flex-direction:column;align-items:flex-start}#hud .btn{pointer-events:auto;cursor:pointer;width:50px;height:50px;padding:0;justify-content:center;font-size:20px;font-weight:700;color:var(--text);transition:transform .1s;user-select:none}#hud .btn:hover{transform:scale(1.1)}#hud .btn:active{transform:scale(.94)}#hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0b2530c7;padding:6px 14px;border-radius:8px;font-size:16px;white-space:nowrap;transition:opacity .7s}#combo{position:absolute;top:84px;left:50%;transform:translate(-50%);color:var(--teal);font-weight:700}.pop{position:absolute;transform:translate(-50%,-50%);font-weight:700;text-shadow:0 2px 0 var(--ink),0 0 12px rgba(0,0,0,.6);animation:popfly 1.1s ease-out forwards;pointer-events:none;white-space:nowrap}@keyframes popfly{0%{opacity:0;scale:.4}12%{opacity:1;scale:1.1}20%{scale:1}70%{opacity:1;translate:0 -30px}to{opacity:0;translate:0 -70px}}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.12)}}.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#0b1e29d1;pointer-events:auto;text-align:center}.screen.open{display:flex}.screen h1{font-size:64px;margin:0;color:var(--text);text-shadow:0 4px 0 var(--ink);letter-spacing:2px}.screen h1 .gold{color:var(--gold)}.screen h2{font-size:40px;margin:0;color:var(--gold)}.screen p{margin:0;color:var(--dim);font-size:18px}.bigbtn{cursor:pointer;border:none;border-radius:12px;padding:14px 44px;font-size:24px;font-weight:700;font-family:inherit;background:var(--gold);color:var(--ink);box-shadow:0 5px #8f6c1c;transition:transform .1s}.bigbtn.alt{background:#17766e;color:var(--text);box-shadow:0 5px #0c4a45}.bigbtn:hover{transform:scale(1.05)}.bigbtn:active{transform:scale(.96) translateY(3px);box-shadow:none}#grid{display:grid;grid-template-columns:repeat(5,150px);gap:16px}.cell{background:var(--card);border:2px solid var(--edge);border-radius:12px;padding:12px 6px;cursor:pointer;transition:transform .12s}.cell:hover{transform:scale(1.06)}.cell.locked{opacity:.45;cursor:not-allowed}.cell .n{font-size:34px;font-weight:700}.cell .nm{font-size:13px;color:var(--gold);font-weight:700;min-height:16px}.cell .st{font-size:18px;color:var(--gold);letter-spacing:2px}.cell .bt{font-size:11px;color:var(--dim);min-height:13px}.stars{font-size:56px;letter-spacing:10px;color:var(--gold)}.stars .off{color:#2c4a55}.breakdown{font-size:17px;color:var(--dim);line-height:1.7}.breakdown b{color:var(--good);float:right;margin-left:40px}.breakdown b.neg{color:var(--bad)}.score{font-size:44px;font-weight:700;color:var(--gold)}.row{display:flex;gap:14px}.tag{color:var(--good);font-weight:700;font-size:20px}#tut table{border-spacing:14px 8px;font-size:18px;text-align:left}#tut td:first-child{color:var(--teal);font-family:Consolas,monospace;font-weight:700}.blink{animation:pulse .7s infinite alternate;color:var(--gold)}small.note{color:var(--dim)}
