*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0d111e}
body{
  position:fixed;inset:0;display:flex;flex-direction:column;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none;
  color:#f1f5f9;
}

/* Ambient glow */
.ambient-glow {
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 25%, rgba(243,156,18,0.12) 0%, rgba(0,206,201,0.08) 40%, transparent 70%);
}

/* Top HUD bar */
.hud {
  position:relative;z-index:10;flex:0 0 auto;
  display:flex;flex-direction:column;gap:6px;
  padding:12px 16px 8px;background:rgba(13,17,30,0.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.hud-top {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.brand {
  display:flex;align-items:center;gap:8px;
}
.brand-icon {
  width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#f39c12,#e17055);
  display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 12px rgba(243,156,18,0.4);
}
.brand-title {
  font-weight:800;font-size:1.1rem;letter-spacing:1px;
  background:linear-gradient(90deg,#fff,#fed330);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.level-badge {
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;font-weight:700;
  padding:3px 8px;border-radius:6px;background:rgba(243,156,18,0.18);
  color:#f6e58d;border:1px solid rgba(243,156,18,0.3);letter-spacing:0.5px;
}

.stats-bar {
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:0.85rem;
}
.stat-pill {
  display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.04);
  padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);
}
.stat-val {color:#f6e58d;font-weight:700}
.stat-record {color:#00cec9}
.stat-fish {color:#fd79a8}

/* Level Progress mini-bar */
.level-progress-wrap {
  width:100%;height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;
}
.level-progress-fill {
  height:100%;width:0%;background:linear-gradient(90deg,#f39c12,#00cec9,#fd79a8);
  transition:width 0.2s ease;
}

/* Control buttons header */
.controls-hud {
  display:flex;align-items:center;gap:6px;
}
.btn-icon {
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:#cbd5e1;padding:4px 8px;border-radius:6px;cursor:pointer;font-size:0.75rem;
  display:flex;align-items:center;gap:4px;font-family:inherit;transition:all 0.15s ease;
}
.btn-icon:hover{background:rgba(255,255,255,0.12);color:#fff}
.btn-icon:active{transform:scale(0.95)}

/* Active Powerup Banner */
.powerups-active {
  display:flex;gap:6px;align-items:center;
}
.pup-badge {
  display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;
  font-size:0.68rem;font-weight:700;font-family:'JetBrains Mono',monospace;animation:pulse 1s infinite;
}
.pup-shield {background:rgba(0,206,201,0.2);border:1px solid rgba(0,206,201,0.4);color:#00cec9}
.pup-turbo {background:rgba(243,156,18,0.2);border:1px solid rgba(243,156,18,0.4);color:#f39c12}

/* Canvas viewport */
#canvas-wrapper {
  position:relative;flex:1 1 auto;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
}
canvas {
  display:block;margin:auto;touch-action:none;cursor:pointer;
}

/* On-screen Touch Controls (Mobile) */
.touch-controls {
  position:absolute;bottom:16px;left:0;right:0;padding:0 20px;
  display:flex;justify-content:space-between;align-items:center;
  pointer-events:none;z-index:25;
}
.touch-btn {
  pointer-events:auto;
  width:72px;height:72px;border-radius:24px;
  background:rgba(13,17,30,0.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,0.15);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-weight:800;font-size:0.75rem;box-shadow:0 8px 24px rgba(0,0,0,0.5);
  transition:all 0.1s ease;-webkit-tap-highlight-color:transparent;
}
.touch-btn:active, .touch-btn.active {
  transform:scale(0.92);background:rgba(243,156,18,0.5);border-color:#f39c12;box-shadow:0 0 16px rgba(243,156,18,0.6);
}
.touch-btn svg {width:24px;height:24px;stroke-width:2.5}
.touch-btn-duck {border-color:rgba(0,206,201,0.35)}
.touch-btn-jump {border-color:rgba(243,156,18,0.35)}

/* Desktop Keys Help Overlay (Bottom) */
.keys-hint {
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  font-size:0.72rem;color:rgba(255,255,255,0.45);font-family:'JetBrains Mono',monospace;
  pointer-events:none;z-index:5;
}
.key-badge {
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  padding:2px 6px;border-radius:4px;color:#cbd5e1;font-weight:700;
}

@media(max-width:768px){
  .keys-hint{display:none}
}
@media(min-width:769px){
  .touch-controls{display:none}
}