* { margin: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #12263a;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #fdf4df; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud-top { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.hud-chip { background: rgba(13, 27, 38, 0.65); border: 1px solid rgba(253, 244, 223, 0.25);
  border-radius: 10px; padding: 6px 12px; font-size: 13px; letter-spacing: 1px; }
.hud-chip b { font-size: 16px; color: #ffd23e; }
#tilt-board { position: absolute; right: 18px; top: 14px; width: 44px; height: 44px;
  border: 2px solid rgba(253, 244, 223, 0.4); border-radius: 50%; }
#tilt-dot { position: absolute; left: 17px; top: 17px; width: 10px; height: 10px;
  background: #ff8f6a; border-radius: 50%; opacity: 0.35; transition: opacity 0.2s; }
#toast { position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  background: rgba(13, 27, 38, 0.8); border: 1px solid rgba(255, 210, 62, 0.4);
  padding: 8px 18px; border-radius: 12px; font-size: 15px; opacity: 0; transition: opacity 0.4s;
  max-width: 86vw; text-align: center; }
#touch-pads { position: fixed; left: 16px; bottom: 16px; width: 180px; height: 170px;
  z-index: 6; opacity: 0.85; }
.pad { position: absolute; width: 52px; height: 52px; border-radius: 14px; font-size: 20px;
  background: rgba(13, 27, 38, 0.55); color: #fdf4df; border: 1px solid rgba(253, 244, 223, 0.35);
  touch-action: none; -webkit-user-select: none; user-select: none; }
.pad:active { background: rgba(255, 143, 106, 0.6); }
#start-screen, #end-screen { position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(9, 18, 30, 0.72); z-index: 10; }
.panel { background: linear-gradient(160deg, #16324a, #0d1b26); border: 1px solid rgba(255, 210, 62, 0.35);
  border-radius: 18px; padding: 28px 34px; max-width: min(520px, 88vw); text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.panel h1 { font-size: clamp(26px, 6vw, 40px); letter-spacing: 4px; color: #ffd23e; margin-bottom: 12px; }
.panel p { font-size: 15px; line-height: 1.55; margin-bottom: 14px; color: #e8dcc4; }
.keys { list-style: none; text-align: left; font-size: 14px; margin: 0 0 18px; }
.keys li { padding: 4px 0; }
.keys li::before { content: "\25B8 "; color: #ff8f6a; }
#start-button, #end-button { pointer-events: auto; cursor: pointer; font-size: 18px;
  font-weight: 700; letter-spacing: 1px; color: #0d1b26; background: #ffd23e;
  border: none; border-radius: 12px; padding: 12px 30px; }
#start-button:hover, #end-button:hover { background: #ff8f6a; }
.hidden { display: none !important; }
@media (pointer: fine) { #touch-pads { opacity: 0.25; } #touch-pads:hover { opacity: 0.9; } }