:root {
  --sky-top:#86ddff;
  --sky-bottom:#f0fbff;
  --panel:rgba(11,19,36,.72);
  --panel-strong:rgba(10,17,31,.9);
  --text:#eef7ff;
  --muted:#adc7dc;
  --accent:#ffd34d;
  --accent-2:#ff9254;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));}
body{user-select:none;touch-action:none}
.game{position:relative;width:100%;height:100%}
canvas{display:block;width:100%;height:100%}
.ui,.overlay,.mobile-controls{position:absolute;inset:0}
.ui,.overlay{pointer-events:none}
.hud{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.panel{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.18);color:var(--text)}
.pad{padding:12px 14px}.small{font-size:12px;color:var(--muted)}
.center{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(780px,calc(100% - 28px));padding:24px}
.title{font-size:clamp(38px,7vw,84px);line-height:.92;letter-spacing:-.05em;font-weight:950;margin:0 0 10px}
.subtitle{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
button{pointer-events:auto;border:0;border-radius:14px;padding:12px 16px;background:linear-gradient(180deg,#ffe36a,#ff9b41);color:#261300;font-weight:900;cursor:pointer;box-shadow:0 10px 20px rgba(255,155,65,.18)}
button.secondary{background:rgba(255,255,255,.1);color:var(--text);box-shadow:none}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;color:var(--muted);margin-top:16px}
.toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);padding:10px 14px;border-radius:999px;background:var(--panel-strong);color:#fff;border:1px solid rgba(255,255,255,.08);font-weight:800}
.banner{position:absolute;left:50%;bottom:108px;transform:translateX(-50%);padding:10px 14px;border-radius:14px;background:var(--panel-strong);color:#fff;border:1px solid rgba(255,255,255,.08);max-width:min(92vw,560px);text-align:center}
.mobile-controls{pointer-events:none}
.touch-row{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;padding:0 14px;pointer-events:none}
.touch-cluster{display:flex;gap:10px;pointer-events:none}
.touch-btn{width:84px;height:84px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,17,31,.28);backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:900;pointer-events:auto;touch-action:none}
.touch-btn.small{width:78px;height:78px}.touch-btn:active{transform:scale(.97)}
.metric{font-size:13px}.metric strong{display:block;font-size:20px;color:#fff}
@media (max-width: 820px){.hud{top:10px;left:10px;right:10px;gap:8px}.pad{padding:10px 12px}.controls{grid-template-columns:1fr}.banner{bottom:112px;font-size:13px}.center{padding:20px}}