/* ============================================================
   Pegasus BolBol — vanilla clone of the Unity / Figma design.

   Design space is 375 x 812, the same reference resolution the
   Unity CanvasScaler uses, and 1rem == 1 design unit. Every
   position below was measured off the exported design boards in
   web/design/, so the layout is a direct transcription.
   ============================================================ */

@font-face{
  font-family:"Ballooning";
  src:url("../assets/fonts/Ballooning.otf") format("opentype");
  font-weight:400; font-display:block;
}
@font-face{
  font-family:"Nunito";
  src:url("../assets/fonts/Nunito-Regular.ttf") format("truetype");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("../assets/fonts/Nunito-Bold.ttf") format("truetype");
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:"Nunito";
  src:url("../assets/fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight:800; font-display:swap;
}

:root{
  --green-face:#92D34F;
  --green-lip:#4FA24B;
  --red-face:#F3001C;
  --red-lip:#C00016;
  --icon-yellow:#FDC43E;
  --icon-orange:#F17B48;
  --wash:#FBBE27;
  --cream:#FFF9ED;
  --ink:#525252;
  --body-ink:#333333;
  --time-low:#FF1B1B;
}

/* 1rem == 1 design unit. Unity scales the canvas by width; the second
   term keeps the whole board visible on short or wide viewports. */
html{
  font-size:min(calc(100vw / 375), calc(100vh / 812));
  background:#FDC43D;
}

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

body{
  margin:0;
  font-family:"Nunito",system-ui,sans-serif;
  color:#fff;
  overflow:hidden;
  background:#FDC43D;
  -webkit-user-select:none; user-select:none;
  -webkit-font-smoothing:antialiased;
}

#stage{
  position:relative;
  width:375rem;
  height:100vh;
  margin:0 auto;
  overflow:hidden;
  background:#000;
}

.screen{ position:absolute; inset:0; }
.screen[hidden]{ display:none !important; }

/* ---------- shared ---------- */

.sky, .city-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

#screen-howto{ background:#F1F9FC; }

.wash{ position:absolute; inset:0; background:var(--wash); opacity:.93; }

.pegasus-logo{
  position:absolute;
  left:50%; bottom:30rem;
  width:119.5rem; height:auto;
  transform:translateX(-50%);
}

/* ---------- buttons ---------- */

.btn{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11rem;
  border:0;
  padding:0 0 7rem;
  font-family:"Nunito",sans-serif;
  font-weight:800;
  color:#fff;
  letter-spacing:.8rem;
  cursor:pointer;
  border-radius:999rem;
  text-transform:uppercase;
  line-height:1;
}
.btn:active{ transform:translateY(2rem); }
.btn-green{ background:var(--green-face); box-shadow:inset 0 -7rem 0 0 var(--green-lip); }
.btn-red{ background:var(--red-face); box-shadow:inset 0 -7rem 0 0 var(--red-lip); }

.btn-start{
  left:87.5rem; top:428.5rem;
  width:200rem; height:59rem;
  font-size:19rem;
  transform-origin:center;
  transform-style:preserve-3d;
  will-change:transform;
  /* Unity: PlayButton.anim at 0.3x, then DöngüSallanma.anim at 0.3x. */
  animation:
    unity-start-button-in 2.944444s linear both,
    unity-start-button-idle 5.444444s linear 2.944444s infinite;
}
.btn-start:active{ filter:brightness(.92); }
.btn-play-now{
  left:87.5rem; top:594.5rem;
  width:200rem; height:59rem;
  font-size:19rem;
  transform-origin:center;
  transform-style:preserve-3d;
  will-change:transform;
  animation:
    unity-start-button-in 2.944444s linear both,
    unity-start-button-idle 5.444444s linear 2.944444s infinite;
}
.btn-play-now:active{ filter:brightness(.92); }
.play-triangle{
  width:0; height:0;
  border-left:16rem solid #fff;
  border-top:10rem solid transparent;
  border-bottom:10rem solid transparent;
  margin-bottom:1rem;
}

/* ---------- 1. welcome ---------- */

.start-logo{
  position:absolute;
  left:52.5rem; top:163.3rem;
  width:270rem; height:234rem;
  transform-origin:center;
  will-change:transform;
  /* Unity: GameLogo.anim is a 0.633333s clip played at 0.4x. */
  animation:unity-start-logo-in 1.583333s linear both;
}

/* Exact keyframe timing transcribed from Assets/Animations/GameLogo.anim. */
@keyframes unity-start-logo-in{
  0%, 21.0526%{ transform:scale(0); }
  60.5263%{ transform:scale(.5); }
  100%{ transform:scale(1); }
}

/*
   PlayButton.anim keeps the control at zero size for its first 23 frames,
   grows it with a small overshoot, and finishes with Unity's quick wobble.
*/
@keyframes unity-start-button-in{
  0%, 43.3962%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(0deg) scale(0);
  }
  73.5849%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(0deg) scale(.82);
  }
  81.1321%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(15deg) scale(.94);
  }
  86.7925%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(-15deg) scale(1.03);
  }
  88.6792%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(-7.222deg) scale(1.05);
  }
  90.5660%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(7.222deg) scale(1.04);
  }
  92.4528%, 94.3396%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(15deg) scale(1.025);
  }
  98.1132%, 100%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(0deg) scale(1);
  }
}

/* Exact loop cadence transcribed from DöngüSallanma.anim. */
@keyframes unity-start-button-idle{
  0%, 66.3265%, 83.6735%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(0deg);
  }
  87.7551%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(15deg);
  }
  91.8367%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(-15deg);
  }
  95.9184%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(15deg);
  }
  100%{
    transform:perspective(600rem) rotateY(-7.016deg) rotateZ(0deg);
  }
}

/* ---------- 2. how to play ---------- */

.howto-title{
  position:absolute;
  left:63.635rem; top:144.76rem;
  width:247.73rem; height:83.2105rem;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Ballooning",sans-serif;
  font-weight:400;
  font-size:32rem;
  line-height:36.5rem;
  letter-spacing:.6rem;
  text-align:center;
  color:var(--body-ink);
  text-transform:uppercase;
  transform-origin:center;
  animation:unity-howto-title-in 1.25s linear both;
}
.howto-text1{
  position:absolute;
  left:29.28rem; top:238.28rem;
  width:313.42rem; height:52.87rem;
  margin:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  font-size:13rem;
  line-height:20rem;
  text-align:center;
  color:var(--body-ink);
  transform-origin:center;
  animation:unity-howto-copy-in 1.25s linear both;
}
.howto-figure{
  position:absolute;
  left:55.5rem; top:317rem;
  width:272rem; height:174rem;
  transform-origin:center;
  animation:unity-howto-figure-in 1.25s linear both;
}
.howto-image{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  z-index:0;
}
.howto-pill{
  left:136rem; top:-20.9rem;
  width:120rem; height:48rem;
  z-index:1;
}
.howto-text2{
  position:absolute;
  left:15.75rem; top:512.11rem;
  width:335.49rem; height:59.2rem;
  margin:0;
  font-size:13rem;
  line-height:20rem;
  text-align:center;
  color:var(--body-ink);
  transform-origin:center;
  animation:unity-howto-copy-in 1.25s linear both;
}

/* HowToPlay scene animators, all 0.5s Unity clips played at 0.4x. */
@keyframes unity-howto-title-in{
  0%{ transform:scale(0); }
  83.3333%{ transform:scale(1); }
  100%{ transform:scale(1); }
}
@keyframes unity-howto-copy-in{
  0%{ transform:scale(0); }
  83.3333%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}
@keyframes unity-howto-figure-in{
  0%{ transform:scale(0); }
  83.3333%{ transform:scale(1.048,1.063); }
  100%{ transform:scale(1); }
}

/* coin + green pill */
.coin-pill{ position:absolute; }
.coin-pill-bg{ position:absolute; inset:0; width:100%; height:100%; }
.coin-pill-value{
  position:absolute;
  left:35.7%; right:0;
  top:20.9%; height:60.7%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Ballooning",sans-serif;
  font-size:25rem;
  line-height:1;
  color:#fff;
  letter-spacing:.6rem;
}

/* ---------- yellow wash screens ---------- */

.wash-title{
  position:absolute;
  left:10rem; right:10rem; top:361.2rem;
  margin:0;
  font-family:"Ballooning",sans-serif;
  font-weight:400;
  font-size:40.5rem;
  line-height:48rem;
  letter-spacing:.55rem;
  text-align:center;
  color:#fff;
  text-transform:uppercase;
}
.wash-text{
  position:absolute;
  left:37rem; right:37rem; top:513rem;
  margin:0;
  font-size:13.4rem;
  line-height:20rem;
  text-align:center;
  color:#fff;
}
.quit-title{
  top:330.4rem;
  font-size:30.5rem;
  line-height:37rem;
  letter-spacing:.65rem;
  left:14rem; right:14rem;
}
.quit-buttons{
  position:absolute;
  left:46rem; top:423rem;
  width:284rem; height:58.5rem;
  display:flex;
  justify-content:space-between;
}
.quit-buttons .btn{
  position:static;
  width:134rem; height:58.5rem;
  font-size:20rem;
}

/* ---------- game board ---------- */

.hud-time{
  position:absolute;
  left:33rem; top:35rem;
  height:50rem;
  display:flex;
  align-items:center;
  gap:3rem;
  z-index:10;
  pointer-events:none;
}
.hud-icon{ width:50rem; height:50rem; display:block; }
.time-value{
  font-family:"Ballooning",sans-serif;
  font-size:35rem;
  line-height:50rem;
  color:#fff;
  letter-spacing:1rem;
}
.time-value.low{ color:var(--time-low); }

.city-label{
  position:absolute;
  left:36.5rem; top:93.1rem;
  width:149.1rem; height:40.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15rem;
  background:var(--icon-yellow);
  color:#fff;
  font-family:"Ballooning",sans-serif;
  font-size:20rem;
  line-height:1;
  letter-spacing:.4rem;
  z-index:10;
  pointer-events:none;
}

.hud-options{
  position:absolute;
  right:35rem; top:35rem;
  width:50rem; height:50rem;
  /* Keep the menu above the full-screen hotspot layer so the gear,
     volume and power controls remain clickable. */
  z-index:10;
}
.hud-btn{
  position:absolute;
  left:0; top:0;
  width:50rem; height:50rem;
  padding:0; border:0; background:none; cursor:pointer;
}
.hud-btn img{ width:100%; height:100%; display:block; }
.hud-btn-sub{
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease, opacity .18s ease;
}
.hud-options.open .hud-btn-sub{ opacity:1; pointer-events:auto; }
.hud-options.open .hud-btn-sub[data-slot="1"]{ transform:translateY(69rem); }
.hud-options.open .hud-btn-sub[data-slot="2"]{ transform:translateY(138rem); }

.hotspots{ position:absolute; inset:0; }
.hotspot{
  position:absolute;
  padding:0; border:0; background:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hotspot::before{
  content:"";
  width:22.5rem; height:22.5rem;
  border-radius:50%;
  background:var(--icon-yellow);
  border:3.5rem solid #fff;
  box-shadow:0 2rem 5rem rgba(0,0,0,.25);
}
.hotspot.found{ display:none; }

/* found popup */
.found-card{
  position:absolute;
  left:95rem; top:313rem;
  width:185.5rem; height:185.5rem;
  background:var(--cream);
  border-radius:34rem;
  box-shadow:0 6rem 18rem rgba(0,0,0,.18);
  transform-origin:center;
}
.found-card[hidden]{ display:none !important; }
.found-card.is-showing{
  /* FoundObje.anim: 0.5s clip at 0.4x. */
  animation:unity-found-card 1.25s linear both;
}
@keyframes unity-found-card{
  0%{ transform:scale(0); }
  83.3333%{ transform:scale(1); }
  100%{ transform:scale(0); }
}
.found-card-icon{
  position:absolute;
  left:50%; top:22rem;
  width:100rem; height:100rem;
  margin-left:-50rem;
  object-fit:contain;
}
.found-card-name{
  position:absolute;
  left:6rem; right:6rem; bottom:22rem;
  font-family:"Ballooning",sans-serif;
  font-size:30rem;
  line-height:1;
  text-align:center;
  color:var(--ink);
  text-transform:uppercase;
}
.found-card-check{
  position:absolute;
  left:157rem; top:-27.5rem;
  width:59.5rem; height:59.5rem;
}

/* bottom object bar */
.object-bar{
  position:absolute;
  left:0; right:0; bottom:57rem;
  height:81.5rem;
  display:flex;
  justify-content:center;
  gap:20rem;
}
.object-slot{
  position:relative;
  width:78.5rem; height:81.5rem;
  background:var(--cream);
  border:3rem solid #fff;
  border-radius:19rem;
  box-shadow:0 3rem 8rem rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  padding-bottom:7rem;
}
.object-slot.found{ background:var(--icon-yellow); }
.object-slot-icon{
  width:46rem; height:46rem;
  object-fit:contain;
  margin-bottom:2rem;
}
.object-slot-name{
  font-family:"Ballooning",sans-serif;
  font-size:13rem;
  line-height:1;
  color:var(--ink);
  text-transform:uppercase;
  max-width:70rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.object-slot.found .object-slot-name{ color:#fff; }
.object-slot-check{
  position:absolute;
  left:-9rem; top:-15rem;
  width:34rem; height:34rem;
  display:none;
}
.object-slot.found .object-slot-check{ display:block; }

/* ---------- time over ---------- */

.over-title{
  position:absolute;
  left:10rem; right:10rem; top:354.2rem;
  margin:0;
  font-family:"Ballooning",sans-serif;
  font-weight:400;
  font-size:47.2rem;
  line-height:51.5rem;
  letter-spacing:1.18rem;
  text-align:center;
  color:#fff;
  text-transform:uppercase;
  transform-origin:center;
  /* GameOverTextAnimasyon.anim: 1s clip at 0.4x. */
  animation:unity-timeover-title-in 2.5s linear both;
}
.over-text{
  position:absolute;
  left:37rem; right:37rem; top:513rem;
  margin:0;
  font-size:13.4rem;
  line-height:20rem;
  text-align:center;
  color:#fff;
  transform-origin:center;
  /* Açıklama.anim: 0.5s clip at 0.3x. */
  animation:unity-end-copy-in 1.666667s linear both;
}

#screen-gameover .wash-title{
  transform-origin:center;
  /* GameOverAnimasyonu.anim: 0.5s clip at 0.3x. */
  animation:unity-gameover-title-in 1.666667s linear both;
}

@keyframes unity-timeover-title-in{
  0%{ transform:scale(0) rotate(0deg); }
  75%{ transform:scale(1) rotate(0deg); }
  80%{ transform:scale(1) rotate(15deg); }
  86.6667%,93.3333%{ transform:scale(1) rotate(-15deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes unity-gameover-title-in{
  0%,66.6667%{ transform:scale(0) rotate(0deg); }
  76.6667%{ transform:scale(1.11,1) rotate(15deg); }
  86.6667%{ transform:scale(1.06,1) rotate(-15deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes unity-end-copy-in{
  0%,10%{ transform:scale(0); }
  83.3333%{ transform:scale(1.11); }
  100%{ transform:scale(1); }
}

/* ---------- level completed ---------- */

.completed-panel{
  position:absolute;
  left:25rem; top:147rem;
  width:324.5rem; height:335rem;
  transform-origin:center;
  /* TebrikKısmı.anim: 0.583333s clip at 0.4x. */
  animation:unity-completed-panel-in 1.458333s linear both;
}
.panel-bg{
  position:absolute;
  left:0; bottom:0;
  width:324.5rem; height:282.2rem;
}
.panel-stars{
  position:absolute;
  left:50%; top:0;
  width:292rem; height:auto;
  margin-left:-146rem;
}
.panel-title{
  position:absolute;
  left:35.1rem; right:35.1rem; top:147.2rem;
  margin:0;
  font-family:"Ballooning",sans-serif;
  font-weight:400;
  font-size:28rem;
  line-height:36rem;
  letter-spacing:.2rem;
  text-align:center;
  color:#fff;
  text-transform:uppercase;
  white-space:pre-line;
}
.panel-pill{
  left:70rem; top:277.5rem;
  width:182rem; height:66rem;
}
.completed-text{
  position:absolute;
  left:55rem; right:55rem; top:513rem;
  margin:0;
  font-size:19rem;
  line-height:25rem;
  text-align:center;
  color:#fff;
  transform-origin:center;
  animation:unity-end-copy-in 1.666667s linear both;
}

@keyframes unity-completed-panel-in{
  0%,14.2857%{ transform:scale(0); }
  100%{ transform:scale(1); }
}

/* ---------- overlays ---------- */

.wait-panel{
  position:absolute;
  left:0; right:0; top:36rem;
  min-height:72rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10rem 26rem;
  background:rgba(238,236,64,.60);
  font-size:17rem;
  line-height:1.25;
  text-align:center;
  color:#fff;
  z-index:40;
}
.wait-panel[hidden]{ display:none !important; }

.error-layer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20rem;
  background:rgba(255,255,255,.92);
  z-index:50;
}
.error-layer[hidden]{ display:none !important; }
.error-text{
  margin:0;
  max-width:335rem;
  font-family:"Ballooning",sans-serif;
  font-size:29rem;
  line-height:1.25;
  text-align:center;
  color:#D8232A;
}

/* dev only: ?debugDesign=<n> overlays the matching board for pixel diffing */
#design-overlay{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.5;
  pointer-events:none;
  z-index:100;
}
#design-overlay[hidden]{ display:none !important; }