/* ============================================================
   KK Studio games — the phone in each game page's hero, showing
   that game's home screen live. Shared by every game page
   (petalfin/, blob-jar/, …); each page's styles.css sets the
   --game-* values and its own title treatment.

   Everything inside the screen is measured in iPhone points
   (--pt), so the app's own layout numbers can be used as-is and
   the whole screen scales with the device.
   ============================================================ */

.device {
    --device-w: min(300px, 72vw);
    --pt: calc((var(--device-w) - 16px) / 402); /* one point on the 402pt-wide screen */
    width: var(--device-w); border-radius: calc(var(--pt) * 56 + 8px); padding: 8px;
}

.game-screen {
    position: relative; height: calc(var(--pt) * 874); border-radius: calc(var(--pt) * 56); overflow: hidden;
    isolation: isolate; background: var(--game-backdrop, #2E8A9A);
}
/* Dynamic Island */
.game-screen::after {
    content: ""; position: absolute; top: calc(var(--pt) * 13); left: 50%; width: calc(var(--pt) * 122); height: calc(var(--pt) * 36);
    margin-left: calc(var(--pt) * -61); border-radius: 999px; background: #05090B;
}
.game-canvas, .game-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-canvas { opacity: 0; transition: opacity .25s ease; }
.game-screen.live .game-canvas { opacity: 1; }
.game-fallback { object-fit: cover; z-index: 2; }

/* The menu over the game: top bar, title, tagline, buttons. Safe areas: 62pt above, 34pt below. */
.game-ui {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    padding: calc(var(--pt) * (62 + var(--game-top, 6))) 0 calc(var(--pt) * (34 + var(--game-bottom, 22)));
    color: #fff; line-height: 1.2; white-space: nowrap;
    font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', -apple-system, sans-serif;
    pointer-events: none; -webkit-user-select: none; user-select: none;
}
.game-ui svg { display: block; width: 1.15em; height: 1.15em; }
.game-bar { align-self: stretch; display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--pt) * 20); }
.game-count {
    display: flex; align-items: center; gap: calc(var(--pt) * var(--game-count-gap, 4)); height: calc(var(--pt) * var(--game-count-h, 38));
    padding: 0 calc(var(--pt) * var(--game-count-pad, 12)); border-radius: 999px; background: var(--game-chip-bg, rgba(0, 0, 0, var(--game-chip, .26)));
    box-shadow: inset 0 0 0 calc(var(--pt) * 1.5) var(--game-count-ring, transparent);
    font-size: calc(var(--pt) * var(--game-count-font, 16)); font-weight: 800; font-variant-numeric: tabular-nums;
}
.game-icon { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }
.game-gear {
    display: grid; place-items: center; width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); border-radius: 50%;
    background: var(--game-chip-bg, rgba(0, 0, 0, var(--game-chip, .26))); box-shadow: inset 0 0 0 calc(var(--pt) * 1.5) rgba(255, 255, 255, var(--game-ring, .35));
    font-size: calc(var(--pt) * 17);
}
.game-title, .game-tagline { margin: 0; }
.game-menu {
    align-self: stretch; margin-top: auto; padding: 0 calc(var(--pt) * var(--game-menu-pad, 36));
    display: grid; gap: calc(var(--pt) * var(--game-gap, 10));
}
.game-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--pt) * var(--game-pair-gap, 10)); }

/* The apps' chunky button: a gradient face, a gloss strip and a darker edge underneath. */
.game-btn {
    --h: calc(var(--pt) * 52); --drop: calc(var(--pt) * var(--game-edge, 6));
    position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 7);
    min-height: var(--h); margin-bottom: var(--drop); border-radius: calc(var(--h) * var(--game-round, .36));
    font-size: calc(var(--h) * var(--game-label, .34)); font-weight: 800; color: var(--label, #fff);
    background: linear-gradient(var(--face-top), var(--face)); box-shadow: 0 var(--drop) 0 var(--edge);
}
.game-btn::before {
    content: ""; position: absolute; top: calc(var(--pt) * var(--gloss-top, 5)); left: var(--gloss-inset, calc(var(--pt) * 10));
    right: var(--gloss-inset, calc(var(--pt) * 10)); height: calc(var(--h) * var(--gloss-h, .3));
    border-radius: calc(var(--h) * var(--gloss-round, .3)); background: rgba(255, 255, 255, var(--gloss, .26));
}
.game-btn.tall { --h: calc(var(--pt) * var(--game-tall, 74)); flex-direction: column; gap: 0; }
.game-btn.tall b { font-weight: inherit; line-height: 1.15; }
.game-btn.tall small { font-size: calc(var(--pt) * 13); font-weight: 700; opacity: var(--game-sub, .85); line-height: 1.15; }
/* A "new" dot on a button's label. */
.game-new { position: relative; display: flex; align-items: center; gap: calc(var(--pt) * 7); }
.game-new::after {
    content: ""; position: absolute; top: calc(var(--pt) * -4); right: calc(var(--pt) * -10); width: calc(var(--pt) * 10); height: calc(var(--pt) * 10);
    border-radius: 50%; background: var(--game-dot, #F4799F);
}