/*
 * VOID DRIFTER — DARK reskin of nebez/floppybird (Apache-2.0).
 * Layout/keyframe skeleton adapted from the original main.css (Apache-2.0).
 * EVERY visual here is pure CSS / procedural — there are NO bitmap sprites.
 * The original Flappy Bird sprite sheet (bird, pipes, sky, land, scoreboard,
 * splash, fonts, medals) has been removed entirely. Palette is DAJAI DARK.
 */

:root {
   --bg: #0a0908;
   --surface: #0d0c0f;
   --border: #1a1a24;
   --red: #FF2D55;        /* blood-red orb */
   --red-deep: #7a0f25;
   --gold: #ffd400;       /* score accent */
   --ink: #f4f1ea;
   --muted: #8c8794;
   --mono: var(--font-space-mono), "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

   /* derived play-field colors */
   --sky-top: #0a0908;
   --sky-bot: #131019;
   --pipe-core: #131119;
   --pipe-edge: #26242f;
   --land-top: #0d0c0f;
   --land-bot: #060506;
}

/* ---- pixel/synth-drift animations from the original (timings preserved) ---- */
@-webkit-keyframes animLand { 0% { background-position: 0px 0px; } 100% { background-position: -48px 0px; } }
@keyframes animLand { 0% { background-position: 0px 0px; } 100% { background-position: -48px 0px; } }

@-webkit-keyframes animSky { 0% { background-position: 0px 0px; } 100% { background-position: -64px 0px; } }
@keyframes animSky { 0% { background-position: 0px 0px; } 100% { background-position: -64px 0px; } }

@-webkit-keyframes animPipe { 0% { left: 900px; } 100% { left: -100px; } }
@keyframes animPipe { 0% { left: 900px; } 100% { left: -100px; } }

@-webkit-keyframes animCeiling { 0% { background-position: 0px 0px; } 100% { background-position: -48px 0px; } }
@keyframes animCeiling { 0% { background-position: 0px 0px; } 100% { background-position: -48px 0px; } }

/* drifter pulse (replaces the bird wing-flap sprite animation) */
@-webkit-keyframes animDrift {
   0%, 100% { box-shadow: 0 0 10px rgba(255,45,85,.6), 0 0 22px rgba(255,45,85,.28); }
   50% { box-shadow: 0 0 16px rgba(255,212,0,.65), 0 0 32px rgba(255,45,85,.45); }
}
@keyframes animDrift {
   0%, 100% { box-shadow: 0 0 10px rgba(255,45,85,.6), 0 0 22px rgba(255,45,85,.28); }
   50% { box-shadow: 0 0 16px rgba(255,212,0,.65), 0 0 32px rgba(255,45,85,.45); }
}

/* parallax far-star drift (slower than the near starfield = depth) */
@-webkit-keyframes animSkyFar { 0% { background-position: 0px 0px; } 100% { background-position: -64px 0px; } }
@keyframes animSkyFar { 0% { background-position: 0px 0px; } 100% { background-position: -64px 0px; } }

/* ---- JUICE keyframes (all additive, GPU-cheap transform/opacity) ---- */

/* flap pop: quick upward squash-and-stretch on the orb */
@-webkit-keyframes animFlapPop {
   0%   { transform: scale(1, 1); }
   35%  { transform: scale(.78, 1.32); }
   70%  { transform: scale(1.14, .9); }
   100% { transform: scale(1, 1); }
}
@keyframes animFlapPop {
   0%   { transform: scale(1, 1); }
   35%  { transform: scale(.78, 1.32); }
   70%  { transform: scale(1.14, .9); }
   100% { transform: scale(1, 1); }
}

/* gold score popup (+1) floats up and fades */
@-webkit-keyframes animScorePop {
   0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
   18%  { transform: translate(-50%, -6px) scale(1.25); opacity: 1; }
   100% { transform: translate(-50%, -46px) scale(1); opacity: 0; }
}
@keyframes animScorePop {
   0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
   18%  { transform: translate(-50%, -6px) scale(1.25); opacity: 1; }
   100% { transform: translate(-50%, -46px) scale(1); opacity: 0; }
}

/* near-miss WHEW spark */
@-webkit-keyframes animWhew {
   0%   { transform: translate(-50%, 0) scale(.7); opacity: 0; }
   20%  { transform: translate(-50%, -4px) scale(1.1); opacity: 1; }
   100% { transform: translate(-50%, -30px) scale(.95); opacity: 0; }
}
@keyframes animWhew {
   0%   { transform: translate(-50%, 0) scale(.7); opacity: 0; }
   20%  { transform: translate(-50%, -4px) scale(1.1); opacity: 1; }
   100% { transform: translate(-50%, -30px) scale(.95); opacity: 0; }
}

/* generic particle: rises/drifts via JS-set custom props, fades + shrinks */
@-webkit-keyframes animParticle {
   0%   { transform: translate(0,0) scale(1); opacity: 1; }
   100% { transform: translate(var(--dx,0), var(--dy,0)) scale(.2); opacity: 0; }
}
@keyframes animParticle {
   0%   { transform: translate(0,0) scale(1); opacity: 1; }
   100% { transform: translate(var(--dx,0), var(--dy,0)) scale(.2); opacity: 0; }
}

/* trail mote: spawned behind the orb, fades in place */
@-webkit-keyframes animTrail {
   0%   { transform: scale(1); opacity: .8; }
   100% { transform: scale(.1); opacity: 0; }
}
@keyframes animTrail {
   0%   { transform: scale(1); opacity: .8; }
   100% { transform: scale(.1); opacity: 0; }
}

/* full-screen red flash on crash */
@-webkit-keyframes animFlash { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes animFlash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* screen shake */
@-webkit-keyframes animShake {
   0%,100% { transform: translate(0,0); }
   15% { transform: translate(-7px, 4px); }
   30% { transform: translate(6px, -5px); }
   45% { transform: translate(-5px, -3px); }
   60% { transform: translate(5px, 4px); }
   75% { transform: translate(-3px, 2px); }
   90% { transform: translate(2px, -2px); }
}
@keyframes animShake {
   0%,100% { transform: translate(0,0); }
   15% { transform: translate(-7px, 4px); }
   30% { transform: translate(6px, -5px); }
   45% { transform: translate(-5px, -3px); }
   60% { transform: translate(5px, 4px); }
   75% { transform: translate(-3px, 2px); }
   90% { transform: translate(2px, -2px); }
}

/* score pulse when a point lands */
@-webkit-keyframes animScorePulse {
   0%   { transform: scale(1); }
   40%  { transform: scale(1.35); }
   100% { transform: scale(1); }
}
@keyframes animScorePulse {
   0%   { transform: scale(1); }
   40%  { transform: scale(1.35); }
   100% { transform: scale(1); }
}

/* NEW BEST banner shimmer */
@-webkit-keyframes animNewBest {
   0%   { transform: translate(-50%,8px) scale(.8); opacity: 0; }
   30%  { transform: translate(-50%,0) scale(1.1); opacity: 1; }
   100% { transform: translate(-50%,0) scale(1); opacity: 1; }
}
@keyframes animNewBest {
   0%   { transform: translate(-50%,8px) scale(.8); opacity: 0; }
   30%  { transform: translate(-50%,0) scale(1.1); opacity: 1; }
   100% { transform: translate(-50%,0) scale(1); opacity: 1; }
}

*,
*:before,
*:after
{
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: translate3d(0,0,0);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

html,
body
{
   height: 100%;
   overflow: hidden;
   font-family: var(--mono);
   font-size: 12px;
   color: var(--ink);
   background: var(--bg);
   /* lock the page: no scroll / pinch-zoom / double-tap-zoom while playing */
   touch-action: none;
   -ms-touch-action: none;
   overscroll-behavior: none;
   position: fixed;
   width: 100%;
   -webkit-tap-highlight-color: transparent;
}

#gamecontainer
{
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 525px;
   background: var(--bg);
}

/*
Screen - Game
*/
#gamescreen
{
   position: absolute;
   width: 100%;
   height: 100%;
}

#sky
{
   position: absolute;
   top: 0;
   width: 100%;
   height: 80%;
   /* base gradient + a radial vignette glow rising off the horizon */
   background-color: var(--sky-bot);
   background-image:
      radial-gradient(120% 80% at 50% 120%, rgba(255,45,85,.10) 0%, transparent 60%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
   background-repeat: no-repeat, no-repeat;
   background-size: 100% 100%, 100% 100%;
   overflow: hidden;
}

/* near starfield (fast) — the original sky layer */
#sky:before {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(244,241,234,.8) 50%, transparent 51%),
      radial-gradient(1px 1px at 70% 60%, rgba(255,212,0,.6) 50%, transparent 51%),
      radial-gradient(1px 1px at 45% 80%, rgba(244,241,234,.55) 50%, transparent 51%),
      radial-gradient(2px 2px at 90% 20%, rgba(255,45,85,.55) 50%, transparent 51%);
   background-repeat: repeat-x;
   background-size: 64px 100%;
   -webkit-animation: animSky 11s linear infinite;
   animation: animSky 11s linear infinite;
}

/* far starfield (slow) — parallax depth layer behind the near one */
#sky:after {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(1px 1px at 12% 50%, rgba(244,241,234,.35) 50%, transparent 51%),
      radial-gradient(1px 1px at 55% 22%, rgba(244,241,234,.30) 50%, transparent 51%),
      radial-gradient(1px 1px at 82% 70%, rgba(255,212,0,.30) 50%, transparent 51%);
   background-repeat: repeat-x;
   background-size: 96px 100%;
   opacity: .8;
   -webkit-animation: animSkyFar 26s linear infinite;
   animation: animSkyFar 26s linear infinite;
}

#flyarea
{
   position: absolute;
   bottom: 0;
   height: 420px;
   width: 100%;
}

#ceiling
{
   position: absolute;
   top: -16px;
   height: 16px;
   width: 100%;
   background-color: var(--surface);
   background-image: repeating-linear-gradient(90deg, var(--border) 0 12px, var(--surface) 12px 24px);

   -webkit-animation: animCeiling 962ms linear infinite;
   animation: animCeiling 962ms linear infinite;
}

#land
{
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 20%;
   background-color: var(--land-bot);
   background-image:
      repeating-linear-gradient(90deg, rgba(255,45,85,.12) 0 2px, transparent 2px 24px),
      linear-gradient(180deg, var(--land-top) 0%, var(--land-bot) 100%);
   background-repeat: repeat-x, no-repeat;
   background-size: 48px 100%, 100% 100%;
   border-top: 2px solid var(--red);
   box-shadow: 0 -4px 18px rgba(255,45,85,.3) inset;

   -webkit-animation: animLand 1400ms linear infinite;
   animation: animLand 1400ms linear infinite;
}

#bigscore
{
   position: absolute;
   top: 24px;
   left: 0;
   width: 100%;
   text-align: center;
   z-index: 100;
}

.digit {
   display: inline-block;
   font-family: var(--mono);
   font-weight: 700;
   color: var(--gold);
   text-shadow: 0 0 10px rgba(255,212,0,.65), 0 2px 0 #000;
}
.digit-big { font-size: 48px; padding: 0 2px; }
.digit-small { font-size: 14px; color: var(--ink); text-shadow: 0 1px 0 #000; padding: 0 1px; }

/* ---- splash (procedural title card) ---- */
#splash
{
   position: absolute;
   opacity: 0;
   top: 70px;
   left: 50%;
   transform: translateX(-50%);
   width: 260px;
   max-width: 86%;
   padding: 20px 16px;
   text-align: center;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: rgba(12,12,18,.78);
   box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,45,85,.15) inset;
   backdrop-filter: blur(6px);
}
#splash .splash-title {
   font-family: var(--mono);
   font-size: 22px;
   font-weight: 700;
   letter-spacing: 2px;
   color: var(--red);
   text-shadow: 0 0 12px rgba(255,45,85,.5);
}
#splash .splash-sub {
   margin-top: 10px;
   font-size: 11px;
   color: var(--muted);
   line-height: 1.5;
}
#splash .splash-tap {
   margin-top: 14px;
   font-size: 12px;
   color: var(--gold);
   animation: animDrift 1.4s ease-in-out infinite;
   border-radius: 6px;
   display: inline-block;
   padding: 6px 12px;
   border: 1px solid var(--border);
}

/* ---- scoreboard (procedural card) ---- */
#scoreboard
{
   position: absolute;
   display: none;
   opacity: 0;
   top: 64px;
   left: 50%;
   transform: translateX(-50%);
   width: 240px;
   max-width: 86%;
   padding: 18px 18px 22px;
   text-align: center;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: rgba(12,12,18,.9);
   box-shadow: 0 12px 44px rgba(0,0,0,.65);

   z-index: 1000;
}
.sb-heading {
   font-family: var(--mono);
   font-size: 16px;
   font-weight: 700;
   color: var(--gold);
   letter-spacing: 2px;
   margin-bottom: 14px;
   text-shadow: 0 0 10px rgba(255,212,0,.4);
}
.sb-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 4px;
   border-top: 1px solid var(--border);
}
.sb-label { font-size: 10px; color: var(--muted); letter-spacing: 1px; }

#medal
{
   opacity: 0;
   margin: 6px auto 12px;
   width: 52px;
   height: 52px;
}
.medal-disc {
   width: 52px;
   height: 52px;
   margin: 0 auto;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--mono);
   font-weight: 700;
   font-size: 20px;
   color: #060608;
   box-shadow: 0 0 16px rgba(0,0,0,.5), 0 0 0 2px rgba(0,0,0,.4) inset;
}
.medal-bronze   { background: radial-gradient(circle at 35% 30%, #d39a6a, #8a5a32); }
.medal-silver   { background: radial-gradient(circle at 35% 30%, #e6e6ee, #8f8f9c); }
.medal-gold     { background: radial-gradient(circle at 35% 30%, #f3d98a, #b9923c); }
.medal-platinum { background: radial-gradient(circle at 35% 30%, #bfeaff, #6fb6c9); }

#currentscore, #highscore { min-width: 60px; text-align: right; }

#replay
{
   margin-top: 14px;
   opacity: 0;
   cursor: pointer;
   display: inline-block;
   padding: 10px 22px;
   font-family: var(--mono);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #fff;
   background: var(--red);
   border: none;
   border-radius: 8px;
   box-shadow: 0 6px 18px rgba(255,45,85,.35);
}
#replay:hover { background: #c71f40; }

.boundingbox
{
   position: absolute;
   display: none;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border: 1px solid var(--red);
}

#player
{
   left: 60px;
   top: 200px;
   z-index: 95; /* glowing orb rides above the monoliths + trail layer */
}

/* the drifter — procedural glowing orb (replaces bird.png) */
.bird
{
   position: absolute;
   width: 30px;
   height: 28px;
   background: radial-gradient(circle at 36% 34%, #fff 0%, var(--gold) 16%, var(--red) 58%, var(--red-deep) 100%);
   border-radius: 50%;
   border: 1px solid rgba(255,212,0,.45);
   /* squash-stretch + flap pop are applied to an inner wrapper, so the orb
      element itself only carries glow + rotation from JS */
   -webkit-animation: animDrift 360ms ease-in-out infinite;
   animation: animDrift 360ms ease-in-out infinite;
   will-change: transform, box-shadow;
}
/* inner core highlight */
.bird:before {
   content: "";
   position: absolute;
   top: 4px;
   left: 5px;
   width: 9px;
   height: 8px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
   pointer-events: none;
}
.bird:after {
   /* trailing spark */
   content: "";
   position: absolute;
   top: 9px;
   left: -9px;
   width: 10px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255,45,85,.55);
   filter: blur(2px);
   pointer-events: none;
}
/* flap pop class toggled by JS for one cycle */
.bird.flap {
   -webkit-animation: animFlapPop 220ms ease-out, animDrift 360ms ease-in-out infinite;
   animation: animFlapPop 220ms ease-out, animDrift 360ms ease-in-out infinite;
}

/* ---- JUICE: effect layers (DOM, jQuery-spawned) ---- */
#fxlayer {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 90;
   overflow: hidden;
}
.particle {
   position: absolute;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   pointer-events: none;
   will-change: transform, opacity;
   -webkit-animation: animParticle var(--life, 700ms) cubic-bezier(.2,.6,.3,1) forwards;
   animation: animParticle var(--life, 700ms) cubic-bezier(.2,.6,.3,1) forwards;
}
.particle.gold  { background: var(--gold); box-shadow: 0 0 6px rgba(255,212,0,.8); }
.particle.red   { background: var(--red);  box-shadow: 0 0 6px rgba(255,45,85,.8); }
.particle.white { background: #fff;        box-shadow: 0 0 6px rgba(255,255,255,.8); }
.particle.shard { width: 4px; height: 10px; border-radius: 1px; }

.trailmote {
   position: absolute;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   pointer-events: none;
   background: radial-gradient(circle, rgba(255,45,85,.7), rgba(255,45,85,0) 70%);
   will-change: transform, opacity;
   -webkit-animation: animTrail var(--life, 480ms) linear forwards;
   animation: animTrail var(--life, 480ms) linear forwards;
}

.scorepop {
   position: absolute;
   transform: translate(-50%, 0);
   font-family: var(--mono);
   font-weight: 700;
   font-size: 22px;
   color: var(--gold);
   text-shadow: 0 0 10px rgba(255,212,0,.7), 0 2px 0 #000;
   pointer-events: none;
   white-space: nowrap;
   -webkit-animation: animScorePop 760ms ease-out forwards;
   animation: animScorePop 760ms ease-out forwards;
}
.whewpop {
   position: absolute;
   transform: translate(-50%, 0);
   font-family: var(--mono);
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 2px;
   color: #fff;
   text-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 18px rgba(255,45,85,.6);
   pointer-events: none;
   white-space: nowrap;
   -webkit-animation: animWhew 620ms ease-out forwards;
   animation: animWhew 620ms ease-out forwards;
}

/* full-screen crash flash */
#crashflash {
   position: absolute;
   inset: 0;
   z-index: 1300;
   pointer-events: none;
   opacity: 0;
   background: radial-gradient(circle at 50% 45%, rgba(255,45,85,.6), rgba(255,45,85,.25) 55%, rgba(10,9,8,0) 80%);
}
#crashflash.fire {
   -webkit-animation: animFlash 420ms ease-out forwards;
   animation: animFlash 420ms ease-out forwards;
}

/* screen shake wrapper */
#gamescreen.shake {
   -webkit-animation: animShake 360ms ease-in-out;
   animation: animShake 360ms ease-in-out;
}

/* score pulse — applied to the inner digit wrapper so centering is preserved */
#bigscore .scorewrap {
   display: inline-block;
   transform-origin: center;
}
#bigscore .scorewrap.pulse {
   -webkit-animation: animScorePulse 260ms ease-out;
   animation: animScorePulse 260ms ease-out;
}

/* NEW BEST banner on the scoreboard */
#newbest {
   position: absolute;
   top: -16px;
   left: 50%;
   transform: translate(-50%, 0);
   font-family: var(--mono);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2px;
   color: #060608;
   background: linear-gradient(90deg, var(--gold), #fff5b0, var(--gold));
   padding: 4px 12px;
   border-radius: 6px;
   box-shadow: 0 0 16px rgba(255,212,0,.6);
   display: none;
}
#newbest.show {
   display: block;
   -webkit-animation: animNewBest 600ms ease-out forwards;
   animation: animNewBest 600ms ease-out forwards;
}

.pipe
{
   position: absolute;
   left: -100px;
   width: 52px;
   height: 100%;
   z-index: 10;

   -webkit-animation: animPipe 7500ms linear;
   animation: animPipe 7500ms linear;
}

/* monolith columns (replace pipe.png / pipe-up / pipe-down) */
.pipe_upper, .pipe_lower
{
   position: absolute;
   width: 52px;
   background:
      linear-gradient(90deg, #000 0%, var(--pipe-core) 18%, var(--pipe-edge) 50%, var(--pipe-core) 82%, #000 100%);
   border-left: 1px solid var(--border);
   border-right: 1px solid var(--border);
   box-shadow: 0 0 10px rgba(255,45,85,.15);
}
.pipe_upper { top: 0; }
.pipe_lower { bottom: 0; }

.pipe_upper:after
{
   content: "";
   position: absolute;
   bottom: 0;
   left: -3px;
   width: 58px;
   height: 26px;
   background: linear-gradient(180deg, var(--pipe-edge), var(--pipe-core));
   border: 1px solid var(--border);
   border-bottom: 3px solid var(--red);
   border-radius: 0 0 3px 3px;
   box-shadow: 0 4px 14px rgba(255,45,85,.3);
}

.pipe_lower:after
{
   content: "";
   position: absolute;
   top: 0;
   left: -3px;
   width: 58px;
   height: 26px;
   background: linear-gradient(0deg, var(--pipe-edge), var(--pipe-core));
   border: 1px solid var(--border);
   border-top: 3px solid var(--red);
   border-radius: 3px 3px 0 0;
   box-shadow: 0 -4px 14px rgba(255,45,85,.3);
}

/* ---- HUD chrome (sound toggle + title bug) ---- */
#hud {
   position: absolute;
   top: 8px;
   left: 8px;
   right: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1200;
   pointer-events: none;
}
#title-bug {
   font-family: var(--mono);
   font-size: 12px;
   letter-spacing: 2px;
   color: var(--gold);
   text-shadow: 0 0 8px rgba(255,212,0,.4);
}
#soundtoggle {
   pointer-events: auto;
   cursor: pointer;
   font-family: var(--mono);
   font-size: 15px;
   line-height: 1;
   color: var(--ink);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 6px 9px;
   transition: border-color .15s ease, transform .1s ease;
   touch-action: manipulation;
}
#soundtoggle:hover { border-color: var(--red); }
#soundtoggle:active { transform: scale(.92); }

/* ---- accessibility: respect reduced-motion (kill the jarring shake/flash,
   keep gameplay-critical motion). The game stays fully playable. ---- */
@media (prefers-reduced-motion: reduce) {
   #gamescreen.shake { -webkit-animation: none; animation: none; }
   #crashflash.fire  { -webkit-animation: none; animation: none; }
   .particle, .trailmote { -webkit-animation-duration: .3s; animation-duration: .3s; }
}