:root{
  --accent: #00a2ff;
  --bg1: #0b7a12;
  --bg2: #2fc24a;
  --field-line: rgba(255,255,255,0.6);
}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
html,body{height:100%;margin:0;background:black;color:#fff;}
.topbar{position:fixed;left:0;right:0;top:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.1));z-index:50}
.topbar h1{font-size:18px;margin:0;color:var(--accent);letter-spacing:0.5px}
.topbar .score{font-weight:600;color:#fff}
.stage{height:100vh;display:flex;align-items:center;justify-content:center;padding-top:64px;}

/* Canvas and field look */
canvas{display:block;background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);border:12px solid rgba(0,0,0,0.4);box-shadow:0 10px 30px rgba(0,0,0,0.6);max-width:100%;height:auto;}
.canvas-overlay{position:absolute;left:0;right:0;top:64px;bottom:0;pointer-events:none;}

/* Controls */
.controls{position:fixed;left:18px;bottom:18px;display:flex;gap:8px;z-index:60}
button{background:transparent;border:2px solid rgba(255,255,255,0.08);padding:8px 12px;border-radius:8px;color:#fff;cursor:pointer}
button:hover{border-color:var(--accent);transform:translateY(-1px)}

/* Loader */
#loader{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;z-index:9999;transition:opacity .5s ease;}
#loader.fade-out{opacity:0;pointer-events:none}
.spinner{width:72px;height:72px;border-radius:50%;border:8px solid rgba(255,255,255,0.08);border-top-color:var(--accent);animation:spin 1s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg);}}
#loader p{color:var(--accent);font-weight:600;letter-spacing:0.6px}

/* Responsive */
@media(max-width:700px){
  .topbar{height:56px;padding:0 12px}
  canvas{width:100%}
  .controls{left:12px;bottom:12px}
}