/* ==========================================================================
   bonu7 game — device.css
   The phone mockup, built entirely in CSS (no photo of a phone anywhere).
   One component, reused by the hero, the download page and the screenshot
   slider. Sizing is driven by a single --dev-w custom property.
   ========================================================================== */

.device {
  --dev-w: 300px;
  --dev-r: calc(var(--dev-w) * 0.126);
  --dev-bezel: calc(var(--dev-w) * 0.030);

  position: relative;
  width: var(--dev-w);
  aspect-ratio: 9 / 19.5;
  flex: none;
  isolation: isolate;
}

/* --- Breathing aura behind the phone: the "it's alive" cue ---------------- */
.device__aura {
  position: absolute;
  inset: -22% -34%;
  z-index: -2;
  background:
    radial-gradient(ellipse 52% 42% at 50% 42%, rgba(229,52,44,.30) 0%, rgba(255,106,85,.14) 42%, transparent 72%),
    radial-gradient(ellipse 38% 30% at 62% 68%, rgba(201,162,75,.16) 0%, transparent 70%);
  filter: blur(34px);
  animation: aura-breathe 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aura-breathe {
  0%, 100% { opacity: .72; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.09); }
}

/* --- Ground shadow, breathing in counterpoint to the float ---------------- */
.device__shadow {
  position: absolute;
  left: 50%;
  bottom: -5%;
  z-index: -1;
  width: 76%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(5,39,28,.42) 0%, rgba(5,39,28,.16) 48%, transparent 74%);
  filter: blur(11px);
  animation: shadow-breathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shadow-breathe {
  0%, 100% { transform: translateX(-50%) scaleX(1) scaleY(1); opacity: .85; }
  50%      { transform: translateX(-50%) scaleX(.86) scaleY(.72); opacity: .58; }
}

/* --- The chassis --------------------------------------------------------- */
.device__body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--dev-bezel);
  border-radius: var(--dev-r);
  background:
    linear-gradient(152deg, #3d4a44 0%, #171f1b 16%, #0b100e 48%, #161d1a 82%, #38443e 100%);
  /* The chassis stays graphite on the light page — it reads as a product shot
     rather than a UI element, and it keeps the dark screenshots from floating. */
  box-shadow:
    inset 0 0 0 1px rgba(180,220,200,.16),
    inset 0 1px 2px rgba(255,255,255,.20),
    0 34px 62px -26px rgba(5,39,28,.55),
    0 8px 20px -10px rgba(5,39,28,.30),
    0 0 46px -14px rgba(229,52,44,.28);
  animation: device-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes device-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-13px) rotate(-0.5deg); }
}

/* --- Screen -------------------------------------------------------------- */
.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--dev-r) - var(--dev-bezel) * 0.7);
  overflow: hidden;
  background: #05100b;
}
.device__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* --- Travelling glass glare: light catching the panel -------------------- */
.device__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.device__glare::before {
  content: '';
  position: absolute;
  top: -50%; bottom: -50%;
  left: -40%;
  width: 34%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.05) 30%,
    rgba(210,255,232,.16) 50%,
    rgba(255,255,255,.05) 70%,
    transparent 100%);
  transform: skewX(-16deg) translateX(-160%);
  animation: glare-sweep 7s var(--ease) infinite;
}
@keyframes glare-sweep {
  0%, 58%  { transform: skewX(-16deg) translateX(-160%); }
  92%,100% { transform: skewX(-16deg) translateX(520%); }
}
/* Static top-corner sheen so the glass reads as glass even mid-cycle. */
.device__glare::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(163deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 22%, transparent 44%);
}

/* --- Dynamic-island pill ------------------------------------------------- */
.device__pill {
  position: absolute;
  top: calc(var(--dev-w) * 0.032);
  left: 50%;
  z-index: 3;
  width: calc(var(--dev-w) * 0.27);
  height: calc(var(--dev-w) * 0.075);
  transform: translateX(-50%);
  background: #040806;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.device__pill::after {
  content: '';
  position: absolute;
  top: 50%; right: 14%;
  width: calc(var(--dev-w) * 0.020);
  height: calc(var(--dev-w) * 0.020);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #1d4a3a, #050b08 68%);
  box-shadow: 0 0 5px rgba(255,106,85,.5);
}

/* --- Side hardware ------------------------------------------------------- */
.device__btn {
  position: absolute;
  width: calc(var(--dev-w) * 0.010);
  background: linear-gradient(180deg, #2c3833, #131a17 40%, #2c3833);
  border-radius: 2px;
}
.device__btn--vol {
  left: calc(var(--dev-w) * -0.008);
  top: 21%;
  height: 7%;
  box-shadow: 0 calc(var(--dev-w) * 0.10) 0 0 #222c27;
}
.device__btn--pwr {
  right: calc(var(--dev-w) * -0.008);
  top: 27%;
  height: 11%;
}

/* --- Size + pose variants ------------------------------------------------ */
.device--sm  { --dev-w: clamp(180px, 44vw, 232px); }
.device--md  { --dev-w: clamp(216px, 52vw, 300px); }
.device--lg  { --dev-w: clamp(232px, 62vw, 350px); }
.device--tilt .device__body   { transform: rotate(-4deg); animation-name: device-float-tilt; }
.device--tilt-r .device__body { transform: rotate(5deg);  animation-name: device-float-tilt-r; }
@keyframes device-float-tilt {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-13px) rotate(-5.2deg); }
}
@keyframes device-float-tilt-r {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50%      { transform: translateY(-11px) rotate(6.2deg); }
}
/* Static pose — used inside the slider, where the carousel owns the motion. */
.device--static .device__body { animation: none; }
.device--static .device__shadow { animation: none; }

/* --------------------------------------------------------------------------
   Floating info chips — orbit the device with their own drift cycles
   -------------------------------------------------------------------------- */
.device-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: var(--sp-6);
}

.float-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.62rem 0.9rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--stroke-hot), 0 12px 30px -10px rgba(5,39,28,.28), 0 2px 6px rgba(5,39,28,.08);
  clip-path: var(--cut-one);
  font-family: var(--font-ui);
  white-space: nowrap;
  animation: chip-drift 8s ease-in-out infinite;
  will-change: transform;
}
.float-chip__ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  background: linear-gradient(150deg, rgba(229,52,44,.18), rgba(255,106,85,.08));
  clip-path: var(--cut-one);
  color: var(--em-700);
}
.float-chip__ico .ico { width: 15px; height: 15px; }
.float-chip__k { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); line-height: 1.3; }
.float-chip__v { display: block; font-size: 0.92rem; font-weight: 800; color: var(--text-hi); line-height: 1.25; }
.float-chip--gold { box-shadow: inset 0 0 0 1px rgba(201,162,75,.45), 0 12px 30px -10px rgba(5,39,28,.28), 0 2px 6px rgba(5,39,28,.08); }
.float-chip--gold .float-chip__ico { background: linear-gradient(150deg, rgba(201,162,75,.22), rgba(143,111,44,.10)); color: var(--gold-lo); }
.float-chip--gold .float-chip__v { color: var(--gold-lo); }

@keyframes chip-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}

/* Placements — percentages so they track the stage, not a fixed pixel grid. */
.float-chip--tl { top: 12%;  left: -6%;  animation-delay: -0.4s; }
.float-chip--tr { top: 4%;   right: -8%; animation-delay: -2.6s; }
.float-chip--bl { bottom: 20%; left: -10%; animation-delay: -4.1s; }
.float-chip--br { bottom: 9%; right: -6%; animation-delay: -5.8s; }

/* Below 768px the chips would overhang the viewport and cause horizontal
   scroll (gotcha #6). Pull them inside the stage and shrink them. */
@media (max-width: 767px) {
  .float-chip { padding: 0.44rem 0.62rem; gap: 0.45em; }
  .float-chip__ico { width: 24px; height: 24px; }
  .float-chip__ico .ico { width: 12px; height: 12px; }
  .float-chip__k { font-size: 0.58rem; }
  .float-chip__v { font-size: 0.78rem; }
  .float-chip--tl { left: 0; top: 8%; }
  .float-chip--tr { right: 0; top: 2%; }
  .float-chip--bl { left: 0; bottom: 22%; }
  .float-chip--br { right: 0; bottom: 12%; }
}
@media (max-width: 419px) {
  .float-chip--bl, .float-chip--tr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .device__body, .device__shadow, .device__aura, .float-chip { animation: none !important; }
  .device__glare::before { display: none; }
}