/* Colors, fonts, page reset, the 3D canvas and the full-screen effect layers. */
:root {
  --ink: #eef0ff;
  --ink-dim: rgba(222, 226, 255, .66);
  --gold: #ffd35a;
  --pink: #ff7aa8;
  --mint: #8ff7cf;
  --lilac: #c7a8ff;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* Scrollbars (cards that scroll on small screens): thin, with a soft see-through handle and no track. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); }
::-webkit-scrollbar-button { display: none; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  /* Shown only while the game loads; after that the sky is drawn by the GPU (js/world/backdrop.js). */
  background: radial-gradient(120% 90% at 50% 0%, #2b1d63 0%, #1a1142 42%, #0c0924 100%) fixed #0c0924;
  color: var(--ink);
  font-family: var(--font);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 3D canvas ---------- */
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
body.playing #game { cursor: none; }

/* ---------- Full-screen effects ---------- */
#vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(6, 4, 22, .55) 100%);
}
#flash {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 130, 190, .38) 100%);
}
#flash.on { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
#slowmoTint {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(90, 210, 255, .35) 100%);
}
body.slowmo #slowmoTint { opacity: 1; }
/* Solar storm: the screen edges glow orange. Lightning: a quick double flash. */
#solarTint {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 150, 60, .38) 100%);
}
body.solar #solarTint { opacity: 1; }
#bolt {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(220, 235, 255, .35), rgba(200, 220, 255, .12));
}
#bolt.on { animation: bolt .5s ease-out; }
@keyframes bolt { 0% { opacity: 1; } 15% { opacity: .1; } 25% { opacity: .8; } 100% { opacity: 0; } }
#fx { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#warp {
  position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, #fff 0%, #fff2ff 35%, rgba(210, 170, 255, .95) 70%, rgba(130, 90, 255, .9) 100%);
}
#warp.on { animation: warp 1.8s ease-out forwards; }
@keyframes warp { 0% { opacity: 0; } 12% { opacity: 1; } 45% { opacity: 1; } 100% { opacity: 0; } }