/* ---------------------------------------------------------- Flappy Ravi CSS */
:root{
  --gold:#ffc93c;
  --gold-2:#ff9f1c;
  --saffron:#ff7b00;
  --green:#2ec27e;
  --ink:#1a1024;
  --pink:#ff2e88;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{
  height:100%;
  background:#120a1c radial-gradient(1200px 700px at 50% 0%, #3a1856 0%, #120a1c 70%);
  font-family:"Trebuchet MS","Verdana",system-ui,sans-serif;
  color:#fff;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;                 /* no pull-to-refresh mid-flap */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}

#app{
  height:100dvh;
  display:grid;place-items:center;
  padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
}

#stage{
  position:relative;
  /* fill the phone, cap on desktop — whichever constraint bites first */
  width:min(480px, 100vw - 16px, (100dvh - 16px) * 0.6667);
  aspect-ratio:480/720;
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 4px rgba(0,0,0,.5),
    0 0 70px rgba(255,201,60,.30),
    0 30px 70px rgba(0,0,0,.65);
  background:#6ec6ff;
  isolation:isolate;
}

/* glass rim + inner vignette: cheap, and it lifts the whole frame */
#stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:7;
  border-radius:20px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.22);
}

canvas{display:block;width:100%;height:100%;image-rendering:auto}

/* phones: full-bleed board — the canvas widens to match the screen instead of
   stretching, so there are no letterbox bars */
@media (max-width:820px) and (pointer:coarse){
  #app{padding:0}
  #stage{
    width:100vw;height:100dvh;
    aspect-ratio:auto;
    border-radius:0;
    box-shadow:none;
  }
  #stage::after{border-radius:0;box-shadow:inset 0 0 80px rgba(0,0,0,.4)}
  /* keep the HUD and buttons clear of notches and the home indicator */
  #hud-score{top:calc(16px + env(safe-area-inset-top))}
  #hud-coins{top:calc(20px + env(safe-area-inset-top))}
  #swag-meter{top:calc(52px + env(safe-area-inset-top))}
  .icon-btn{bottom:calc(38px + env(safe-area-inset-bottom))}
  #ticker{padding-bottom:env(safe-area-inset-bottom);height:calc(26px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------------ screens */
.screen{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px;text-align:center;
  background:radial-gradient(120% 90% at 50% 20%, rgba(52,16,80,.72), rgba(10,4,20,.92));
  backdrop-filter:blur(3px);
  z-index:5;
  animation:fadein .22s ease both;
}
.screen.show{display:flex}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.kicker{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);opacity:.9;margin-bottom:6px;
}

.logo{
  font-size:clamp(38px,11vw,60px);
  line-height:.92;font-weight:900;font-style:italic;letter-spacing:-1px;
  color:#fff;
  text-shadow:0 3px 0 var(--saffron),0 6px 0 #b23e00,0 10px 22px rgba(0,0,0,.6);
  transform:rotate(-3deg);
}
.logo span{
  display:block;
  background:linear-gradient(180deg,#fff3c4,var(--gold) 45%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.28em;
  filter:drop-shadow(0 4px 0 #7a3b00);
}

.tagline{
  margin-top:12px;font-size:15px;font-style:italic;color:#ffe9a8;
  min-height:2.4em;max-width:340px;
  animation:pop .35s ease;
}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* ------------------------------------------------------------------ buttons */
.btn{
  border:0;cursor:pointer;font-family:inherit;font-weight:800;
  border-radius:999px;padding:14px 26px;font-size:16px;
  color:#3a1a00;
  background:linear-gradient(180deg,#ffe27a,var(--gold) 40%,var(--gold-2));
  box-shadow:0 5px 0 #a35a00, 0 12px 24px rgba(0,0,0,.4);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s;
  letter-spacing:.02em;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #a35a00,0 6px 14px rgba(0,0,0,.4)}
.btn-big{font-size:18px;padding:16px 30px}
.btn-ghost{
  background:transparent;color:#ffd777;
  box-shadow:inset 0 0 0 2px rgba(255,201,60,.5);
  padding:9px 20px;font-size:14px;
}
.btn-ghost:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px rgba(255,201,60,.5)}

.modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{
  cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;
  border:0;border-radius:999px;padding:8px 16px;
  color:#ffdca8;background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 1.5px rgba(255,201,60,.35);
}
.chip.is-on{color:#3a1a00;background:linear-gradient(180deg,#ffe27a,var(--gold-2));box-shadow:none}

/* Only shown while audio is still blocked — gives a gesture that unlocks
   sound without also starting a run. */
.chip-sound{display:none;animation:nudge 1.8s ease-in-out infinite}
.chip-sound.show{display:inline-block}
@keyframes nudge{50%{transform:scale(1.06)}}

.hint{font-size:12px;color:#cbb8e6;letter-spacing:.04em}
.credits{font-size:10.5px;color:#8f7bb0;position:absolute;bottom:12px}

/* ---------------------------------------------------------------- game over */
.stamp{
  position:absolute;top:12%;
  font-size:clamp(20px,6.4vw,30px);font-weight:900;line-height:1.05;
  color:#ff4d4d;letter-spacing:.06em;
  border:5px solid #ff4d4d;border-radius:10px;padding:10px 18px;
  transform:rotate(-11deg);opacity:.92;
  text-shadow:0 0 14px rgba(255,77,77,.6);
  box-shadow:0 0 22px rgba(255,77,77,.35), inset 0 0 22px rgba(255,77,77,.25);
  animation:slam .45s cubic-bezier(.2,1.6,.4,1) both;
}
.stamp small{font-size:.52em;letter-spacing:.2em}
@keyframes slam{0%{transform:rotate(-11deg) scale(3);opacity:0}70%{opacity:1}100%{transform:rotate(-11deg) scale(1);opacity:.92}}

.over-card{margin-top:16vh;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.over-line{
  font-size:13.5px;font-style:italic;color:#ffe9a8;max-width:330px;line-height:1.5;
}
.scores{display:flex;gap:10px}
.score-box{
  background:rgba(255,255,255,.08);border-radius:14px;padding:10px 16px;min-width:82px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);
}
.score-box span{display:block;font-size:10px;letter-spacing:.18em;color:#bda8dd}
.score-box b{font-size:26px;color:#fff}
.score-box.best b{color:var(--gold)}
.rank{font-size:15px;font-weight:800;color:#fff}
.newbest{
  display:none;font-size:14px;font-weight:900;color:#3a1a00;
  background:linear-gradient(180deg,#ffe27a,var(--gold-2));
  padding:6px 16px;border-radius:999px;
  animation:blink 1s steps(2,end) infinite;
}
.newbest.show{display:block}
@keyframes blink{50%{filter:brightness(1.35)}}

.pause-title{font-size:34px;font-weight:900;color:var(--gold)}
.pause-sub{font-size:13px;color:#cbb8e6;margin-top:-8px;margin-bottom:8px}

/* ---------------------------------------------------------------------- HUD */
#hud{position:absolute;inset:0;pointer-events:none;z-index:3}
#hud-score{
  position:absolute;top:16px;left:0;right:0;text-align:center;
  font-size:56px;font-weight:900;font-style:italic;color:#fff;
  text-shadow:0 3px 0 var(--saffron),0 6px 0 #8c3200,0 8px 18px rgba(0,0,0,.5);
  transition:transform .1s ease;
}
#hud-score.bump{transform:scale(1.28)}
#hud-coins{
  position:absolute;top:20px;right:14px;
  font-size:17px;font-weight:900;color:var(--gold);
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
#swag-meter{
  position:absolute;top:52px;right:14px;width:88px;height:8px;
  border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden;opacity:0;
  transition:opacity .2s;
}
#swag-meter.on{opacity:1}
#swag-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--gold))}

/* ------------------------------------------------------------------- toasts */
#toasts{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.toast{
  position:absolute;left:50%;top:38%;
  transform:translate(-50%,0) rotate(var(--rot,-4deg));
  font-size:clamp(17px,5vw,23px);font-weight:900;font-style:italic;
  color:#fff;white-space:nowrap;
  text-shadow:0 2px 0 var(--saffron),0 4px 0 #8c3200,0 6px 16px rgba(0,0,0,.6);
  animation:toast 1.5s ease-out forwards;
}
.toast.gold{color:var(--gold)}
@keyframes toast{
  0%{opacity:0;transform:translate(-50%,26px) rotate(var(--rot,-4deg)) scale(.5)}
  18%{opacity:1;transform:translate(-50%,0) rotate(var(--rot,-4deg)) scale(1.12)}
  30%{transform:translate(-50%,-4px) rotate(var(--rot,-4deg)) scale(1)}
  100%{opacity:0;transform:translate(-50%,-72px) rotate(var(--rot,-4deg)) scale(1)}
}

/* ------------------------------------------------------------------- ticker */
#ticker{
  position:absolute;left:0;right:0;bottom:0;height:26px;z-index:4;
  background:linear-gradient(90deg,#c8102e,#ff4d1c);
  border-top:2px solid rgba(255,255,255,.35);
  overflow:hidden;display:flex;align-items:center;
}
#ticker-track{
  white-space:nowrap;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
  animation:scrollx 26s linear infinite;padding-left:100%;
}
@keyframes scrollx{to{transform:translateX(-100%)}}

/* ----------------------------------------------------------------- icon btn */
.icon-btn{
  position:absolute;bottom:34px;left:12px;z-index:6;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  font-size:17px;background:rgba(0,0,0,.4);color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);
}
.icon-btn:active{transform:scale(.93)}

/* ------------------------------------------------------------------ loading */
#screen-load{gap:18px;z-index:9;background:radial-gradient(120% 90% at 50% 35%, #3a1856, #0b0413)}
.load-face{font-size:56px;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(-8deg)}}
.load-title{
  font-size:24px;font-weight:900;font-style:italic;letter-spacing:.14em;
  color:var(--gold);text-shadow:0 3px 0 #7a3b00;
}
.load-bar{
  width:min(240px,62%);height:9px;border-radius:999px;
  background:rgba(255,255,255,.12);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,201,60,.3);
}
.load-bar i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--saffron),var(--gold));
  transition:width .25s ease;
}
.load-note{font-size:12.5px;color:#c3ade4;font-style:italic;min-height:1.4em}

/* ------------------------------------------------------- touch ergonomics */
@media (pointer:coarse){
  .btn{padding:17px 30px;font-size:17px}
  .btn-big{padding:19px 34px;font-size:19px}
  .btn-ghost{padding:13px 24px;font-size:15px}
  .chip{padding:11px 18px;font-size:14px}
  .icon-btn{width:46px;height:46px;font-size:19px;bottom:38px}
  .hint{font-size:13px}
  #hud-score{font-size:64px}
}

/* short screens: keep everything on one page */
@media (max-height:700px){
  .logo{font-size:clamp(32px,9vw,46px)}
  .tagline{font-size:13px;margin-top:8px}
  .over-card{margin-top:15vh;gap:11px}
  .score-box{padding:8px 13px;min-width:72px}
  .score-box b{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------------------------- shakes */
#stage.shake{animation:shake .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translate(-2px,1px)}
  20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-7px,2px)}
  40%,60%{transform:translate(7px,-1px)}
}

@media (max-height:640px){
  .over-card{margin-top:19vh}
  .credits{display:none}
}