/*
 * 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: #06060a;
   --surface: #0c0c12;
   --border: #1a1a24;
   --red: #E0264A;
   --gold: #e8c87a;
   --ink: #f4f1ea;
   --muted: #9a96a6;
   --mono: var(--font-space-mono), "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

   /* derived play-field colors */
   --sky-top: #06060a;
   --sky-bot: #11101c;
   --pipe-core: #15151f;
   --pipe-edge: #2a2a3a;
   --land-top: #0c0c12;
   --land-bot: #060608;
}

/* ---- 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(224,38,74,.55), 0 0 22px rgba(224,38,74,.25); }
   50% { box-shadow: 0 0 16px rgba(232,200,122,.7), 0 0 30px rgba(224,38,74,.4); }
}
@keyframes animDrift {
   0%, 100% { box-shadow: 0 0 10px rgba(224,38,74,.55), 0 0 22px rgba(224,38,74,.25); }
   50% { box-shadow: 0 0 16px rgba(232,200,122,.7), 0 0 30px rgba(224,38,74,.4); }
}

*,
*: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);
}

#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%;
   /* layered procedural starfield over a dark vertical gradient */
   background-color: var(--sky-bot);
   background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(244,241,234,.7) 50%, transparent 51%),
      radial-gradient(1px 1px at 70% 60%, rgba(232,200,122,.6) 50%, transparent 51%),
      radial-gradient(1px 1px at 45% 80%, rgba(244,241,234,.5) 50%, transparent 51%),
      radial-gradient(2px 2px at 90% 20%, rgba(224,38,74,.5) 50%, transparent 51%),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%);
   background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
   background-size: 64px 100%, 64px 100%, 64px 100%, 64px 100%, 100% 100%;

   -webkit-animation: animSky 14s linear infinite;
   animation: animSky 14s 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(224,38,74,.10) 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(224,38,74,.25) 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 8px rgba(232,200,122,.6), 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(224,38,74,.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(224,38,74,.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(232,200,122,.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(224,38,74,.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;
}

/* the drifter — procedural diamond orb (replaces bird.png) */
.bird
{
   position: absolute;
   width: 34px;
   height: 24px;
   background: radial-gradient(circle at 38% 38%, var(--gold) 0%, var(--red) 55%, #7a0f25 100%);
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
   border: 1px solid rgba(232,200,122,.5);

   -webkit-animation: animDrift 360ms ease-in-out infinite;
   animation: animDrift 360ms ease-in-out infinite;
}
.bird:after {
   /* trailing spark */
   content: "";
   position: absolute;
   top: 8px;
   left: -8px;
   width: 8px;
   height: 6px;
   border-radius: 50%;
   background: rgba(224,38,74,.5);
   filter: blur(2px);
}

.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(224,38,74,.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(224,38,74,.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(224,38,74,.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(232,200,122,.4);
}
#soundtoggle {
   pointer-events: auto;
   cursor: pointer;
   font-family: var(--mono);
   font-size: 11px;
   color: var(--ink);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 4px 8px;
}
#soundtoggle:hover { border-color: var(--red); }