/* Peetako — shared styles. Palette from GDD v0.1. */
:root {
  --night: #1E1B4B;
  --night-2: #2E2A6B;
  --jungle: #16A34A;
  --gold: #F5B700;
  --hibiscus: #E11D48;
  --sunset: #FB923C;
  --cyan: #67E8F9;
  --paper: #FFF8EC;
  --ink: #1B1A2E;
  --muted: #5B587A;
  --card: #FFFFFF;
  --line: #1B1A2E;
  --radius: 18px;
  --shadow: 4px 4px 0 var(--line);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
a { color: #4338CA; }
a[href^="mailto:"] { display: inline-block; padding: 12px 0; } /* finger-sized tap area */
img, svg { max-width: 100%; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Header */
.site-header {
  background: var(--night);
  color: #fff;
  border-bottom: 4px solid var(--gold);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.logo-mark { width: 38px; height: 38px; }
.logo-text { font-family: 'Bangers', 'Nunito', sans-serif; font-size: 30px; letter-spacing: 1.5px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: #E0E7FF; text-decoration: none; font-weight: 700; padding: 6px 10px; border-radius: 10px; font-size: 15px; }
.nav a[aria-current="page"] { background: var(--night-2); color: #fff; }
/* Hover effects only on devices that really hover (mouse/trackpad), so they don't stick after a tap on iPad/iPhone. */
@media (hover: hover) { .nav a:hover { background: var(--night-2); color: #fff; } }

/* Footer */
.site-footer { margin-top: 48px; background: var(--night); color: #C7D2FE; font-size: 14px; }
.site-footer .wrap { padding-top: 20px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.site-footer a { color: #E0E7FF; display: inline-block; padding: 10px 6px; margin: -10px -6px; }
.linkbtn { font: inherit; color: #E0E7FF; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 10px 6px; margin: -10px -6px; touch-action: manipulation; }
.linkbtn[hidden] { display: none; }

/* Headings */
h1, h2, h3 { font-family: 'Bangers', 'Nunito', sans-serif; letter-spacing: 1px; font-weight: 400; line-height: 1.15; }
h1 { font-size: 42px; margin: 28px 0 8px; }
h2 { font-size: 30px; margin: 32px 0 8px; }
h3 { font-size: 22px; margin: 20px 0 6px; }
.lead { font-size: 18px; color: var(--muted); margin-top: 0; }

/* Comic card */
.card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 800 16px/1.2 'Nunito', sans-serif;
  padding: 12px 18px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--line);
  cursor: pointer;
  touch-action: manipulation; /* no double-tap zoom on iPad/iPhone when tapping care buttons quickly */
  text-decoration: none;
  transition: transform .06s, box-shadow .06s;
  min-height: 48px;
}
@media (hover: hover) { .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); } }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--line); }
.btn.secondary { background: #fff; }
.btn.green { background: var(--jungle); color: #fff; }
.btn.red { background: var(--hibiscus); color: #fff; }
.btn.small { font-size: 14px; padding: 6px 12px; min-height: 44px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Forms */
label { font-weight: 800; display: block; margin-bottom: 4px; }
input[type="text"] {
  width: 100%;
  font: 600 17px 'Nunito', sans-serif;
  padding: 9px 12px;
  border: 3px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
input[type="text"]:focus { outline: 3px solid var(--cyan); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 14px; line-height: 1.3; margin: 8px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin-top: 0; flex: none; }
.field { margin: 10px 0; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }
.game .screen .hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.error { background: #FFE4E6; border: 2px solid var(--hibiscus); color: #881337; border-radius: 12px; padding: 8px 10px; font-weight: 700; margin: 8px 0; }
.error:empty { display: none; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--night); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 800; border: 2px solid var(--gold); z-index: 10; width: max-content; max-width: min(calc(100% - 32px), 440px); text-align: center; }
.toast[hidden] { display: none; }

/* Content sections */
.content { margin-top: 12px; }
.content p, .content li { font-size: 17px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.faq dt { font-weight: 900; font-size: 18px; margin-top: 18px; }
.faq dd { margin: 4px 0 0; }
.tier-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tier-table th, .tier-table td { border-bottom: 2px solid #E2E8F0; padding: 6px 8px; text-align: left; }
.table-scroll { overflow-x: auto; }

@media (max-width: 520px) {
  h1 { font-size: 34px; }
  /* Single-row header: wordmark hidden (the mark still links home) to keep the game above the fold. */
  .site-header .wrap { flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; gap: 8px; }
  .logo-text { display: none; }
  .logo-mark { width: 34px; height: 34px; }
  .nav { flex-wrap: nowrap; gap: 0; }
  .nav a { padding: 6px 7px; font-size: 14px; }
  .site-footer .wrap > span:last-child { display: flex; flex-wrap: wrap; gap: 0 14px; }}


/* Very narrow phones: logo already links home, so drop the redundant "Play" link. */
@media (max-width: 340px) { .nav a[href="/"] { display: none; } }

[tabindex="-1"]:focus { outline: none; }

/* =====================================================================================================
   Peetako game — retro frame (Phase 2B)
   Colours come from the pet's palette as CSS variables set by app.js:
   --pg (page around the frame), --card (frame card), --ink (outline/text), --gold, --body, --spot, --b1..--b4.
   Two views of the same parts: Classic (framed, like the retro mockup; default on desktop) and Immersive (full screen, CRT look;
   default on phones, and a portrait frame on desktop).
   ===================================================================================================== */
.game.retro {
  --pg: #1A1840; --card: #FEF3C7; --ink: #1E1B4B; --gold: #F5B700; --body: #4ADE80; --spot: #16A34A;
  --b1: #FB923C; --b2: #F5B700; --b3: #67E8F9; --b4: #C4B5FD;
  --scr: min(100%, 44dvh);
  max-width: 480px; margin: 10px auto 0; padding: 12px; background: var(--pg); color: var(--ink);
  font: 400 20px/1.25 'VT323', ui-monospace, monospace; border: 3px solid #000; box-shadow: var(--shadow);
}
@supports not (height: 1dvh) { .game.retro { --scr: min(100%, 44vh); } }
.retro .px, .sheet .px { font-family: 'Press Start 2P', ui-monospace, monospace; font-weight: 400; letter-spacing: .5px; }
.retro h1.px { font-size: 18px; line-height: 1.4; margin: 10px 0 6px; }
.retro h2.px, .retro h3.px, .sheet h2.px { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.retro p { font-size: 20px; line-height: 1.2; margin: 6px 0; }
.retro .lead { font-size: 20px; color: inherit; margin: 0 0 10px; }
.retro .hint { font-size: 17px; opacity: .85; margin: 4px 0 0; }
.screen[hidden], .pv[hidden], [hidden].pv-end, [hidden].pv-alive { display: none !important; }

/* Framed card used by every non-pet screen and by the pet screen in Classic view */
.frame, .game[data-view="classic"] .pv {
  background: var(--card); border: 4px solid var(--ink); box-shadow: 6px 6px 0 #000; padding: 12px;
}
.welcome { text-align: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.btn-row.center { justify-content: center; }

/* Retro buttons */
.rbtn {
  --b: var(--b2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 8px 14px;
  font: 400 10px/1.4 'Press Start 2P', ui-monospace, monospace; color: var(--ink); background: var(--b);
  border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; touch-action: manipulation; text-align: center;
}
.rbtn.light { --b: #FFFFFF; }
.rbtn.small { min-height: 44px; padding: 6px 10px; font-size: 9px; }
.rbtn.wide { width: 100%; margin-top: 10px; }
.rbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rbtn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--ink); }
.rbtn:focus-visible, .ctl:focus-visible, .icon-btn:focus-visible, .pal:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer; touch-action: manipulation;
  background: var(--card); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 700 18px/1 sans-serif;
}
.icon-btn[hidden] { display: none; }
.bell[aria-pressed="true"] { background: var(--gold); }
.bell[aria-pressed="false"] .bell-body { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* Forms inside the retro card */
.retro label, .sheet label { font-weight: 400; }
.retro .field > label { font: 400 10px/1.6 'Press Start 2P', monospace; display: block; margin-bottom: 4px; }
.retro input[type="text"] { font: 400 22px 'VT323', monospace; border: 3px solid var(--ink); border-radius: 0; padding: 6px 10px; background: #fff; color: var(--ink); }
.retro input[type="text"]:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.retro .check, .sheet .check { font: 400 19px/1.15 'VT323', monospace; }
.retro .error, .sheet .error { border-radius: 0; font: 400 19px/1.2 'VT323', monospace; }
.retro .warn, .sheet .warn { border-radius: 0; font: 400 19px/1.2 'VT323', monospace; background: #FEF3C7; color: #78350F; }
fieldset.plain { border: 0; padding: 0; margin: 0 0 8px; }
fieldset.plain legend { font: 400 10px/1.6 'Press Start 2P', monospace; margin-bottom: 6px; }
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-option { position: relative; display: flex; }
.type-option input { position: absolute; opacity: 0; inset: 0; }
.type-option .tile { flex: 1; min-width: 0; box-sizing: border-box; border: 4px solid var(--ink); padding: 6px; text-align: center; background: #fff; cursor: pointer; }
.type-option .tile svg { width: 90px; height: 90px; display: block; margin: 0 auto; }
.type-option .tile strong { font: 400 10px/1.6 'Press Start 2P', monospace; display: block; }
.type-option .tile span { font-size: 17px; line-height: 1.1; display: block; }
.type-option input:checked + .tile { background: var(--gold); box-shadow: inset 0 0 0 3px var(--ink); }
.type-option input:focus-visible + .tile { outline: 3px solid var(--gold); outline-offset: 2px; }
.key-box { font: 400 clamp(22px, 6vw, 30px)/1.2 'VT323', monospace; background: var(--ink); color: var(--gold); border: 4px solid #000; border-radius: 0; padding: 10px; text-align: center; word-break: break-word; margin: 8px 0; user-select: all; }

/* Square "screen" (scene + pet + scanlines) */
.screen-box, .pv-screen { position: relative; overflow: hidden; }
.screen-box { width: min(100%, 34dvh); aspect-ratio: 1 / 1; margin: 0 auto; border: 4px solid var(--ink); }
.scene-layer, .pet-layer, .fx-layer, .scan { position: absolute; inset: 0; }
.scene-layer svg, .pet-layer svg, .fx-layer svg { width: 100%; height: 100%; display: block; }
.fx-layer { pointer-events: none; }
.fx-layer svg { overflow: visible; }
.scan { pointer-events: none; background: repeating-linear-gradient(0deg, rgba(15, 13, 46, .2) 0, rgba(15, 13, 46, .2) 1px, transparent 1px, transparent 3px); }
.pet-box { position: absolute; inset: 0; }
.pv-screen.dead .scene-layer { filter: grayscale(.85) brightness(.7); }

/* ---------- Pet screen parts ---------- */
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.leds { display: inline-flex; gap: 5px; }
.leds i { width: 10px; height: 10px; border: 2px solid var(--ink); background: var(--spot); }
.leds i:nth-child(2) { background: var(--gold); }
.leds i:nth-child(3) { background: var(--body); }
.pv-name { font: 400 22px/1 'VT323', monospace; margin: 0; letter-spacing: 1px; }
.pv-tier { font: 400 9px/1.3 'Press Start 2P', monospace; }
.pv-tools { display: flex; gap: 8px; flex: none; }
.pv-badges { position: absolute; left: 8px; top: 8px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.chip { font: 400 8px/1 'Press Start 2P', monospace; padding: 5px 7px; border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.chip[hidden] { display: none; }
.chip.active { background: #BBF7D0; }
.chip.dormant { background: #FDE68A; }
.chip.dead { background: #E5E7EB; }
.chip.ascended { background: var(--gold); }
.pv-place { position: absolute; right: 8px; bottom: 6px; margin: 0 !important; max-width: 70%; text-align: right; z-index: 2;
  font-size: 16px !important; line-height: 1.1 !important; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 4px #000; }

.pv-stats { display: grid; gap: 3px; }
.stat { display: grid; grid-template-columns: 56px 1fr 28px; align-items: center; gap: 8px; }
.stat .px { font-size: 8px; }
.stat .segs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.stat .segs i { height: 10px; border: 2px solid var(--ink); }
.stat .num { font-size: 16px; text-align: right; }

.pv-dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ctl {
  --b: var(--b1);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 56px; padding: 4px 2px; background: var(--b); color: var(--ink); cursor: pointer; touch-action: manipulation;
  border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.ctl .px { font-size: 8px; line-height: 1.2; }
.ctl:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ctl:disabled { cursor: progress; }
.ctl .meter { display: none; width: 80%; height: 8px; border: 2px solid var(--ink); background: rgba(255, 255, 255, .6); }
.ctl .meter i { display: block; height: 100%; background: var(--ink); }
.ctl .bang {
  position: absolute; top: -10px; right: -8px; width: 22px; height: 22px; display: grid; place-items: center;
  font: 400 11px/1 'Press Start 2P', monospace; color: #fff; background: #E11D48; border: 3px solid var(--ink);
  animation: bang 1s ease-in-out infinite;
}
@keyframes bang { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

.pv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.fact { border: 2px solid var(--ink); background: #fff; padding: 1px 6px; min-width: 0; }
.fact b { display: block; font: 400 7px/1.4 'Press Start 2P', monospace; }
.fact span { display: block; font-size: 16px; line-height: 1.05; }
.fact.urgent { background: #FFE4E6; border-color: #E11D48; }
.streak-line { display: block; width: 100%; margin-top: 5px; border: 2px solid var(--ink); background: #FFF7E0; color: var(--ink); padding: 4px 8px;
  font: inherit; font-size: 15px; line-height: 1.15; text-align: left; cursor: pointer; touch-action: manipulation; }
.streak-line[hidden] { display: none; }
.streak-line.done { background: #fff; cursor: default; }
.streak-line.risk { background: #FFE4E6; border-color: #E11D48; color: #9F1239; animation: soc-pulse 1.6s ease-in-out infinite; }
.streak-line:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pv-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px; border: 3px solid var(--gold); background: var(--ink); color: var(--card); }
.pv-code .px { font-size: 8px; color: var(--gold); }
.pv-code #call-code { font-size: 20px; letter-spacing: 2px; white-space: nowrap; }
.pv-code .pv-country { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-end { padding: 4px 0; }
.ascension { padding: 6px 8px; border: 3px dashed var(--ink); background: #FFFBEB; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ascension[hidden] { display: none; }
.ascension p { margin: 0 !important; flex: 1 1 200px; font-size: 18px !important; }

/* ---------- Classic view: everything inside one retro frame ---------- */
.game[data-view="classic"] .pv { display: flex; flex-direction: column; gap: 10px; }
.game[data-view="classic"] .pv-screen { width: var(--scr); aspect-ratio: 1 / 1; margin: 0 auto; border: 4px solid var(--ink); }
.game[data-view="classic"] .pv-alive { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Immersive view: the scene fills the window; thin bar on top, control dock at the bottom ---------- */
body.immersive { overflow: hidden; }
body.immersive .site-header, body.immersive .site-footer, body.immersive .content { display: none; }
body.immersive .game.retro {
  position: fixed; inset: 0; z-index: 20; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: var(--pg);
}
body.immersive .pv {
  position: relative; height: 100dvh; display: flex; flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
@supports not (height: 1dvh) { body.immersive .pv { height: 100vh; } }
body.immersive .pv-top { position: relative; z-index: 2; background: var(--pg); color: var(--card); border: 3px solid var(--ink); padding: 6px 8px; box-shadow: 0 3px 0 #000; }
body.immersive .pv-top .leds i { border-color: #000; }
/* The stage is the free space between the top bar and the dock; the pet stands at its bottom edge. */
body.immersive .pv-screen { position: relative; flex: 1; min-height: 120px; overflow: visible; }
body.immersive .pv-screen .scene-layer { position: fixed; inset: 0; z-index: 0; }
/* CRT look in Immersive: scanlines over the whole window (thicker and darker than Classic so they still read
   at full-screen size), plus a soft vignette */
body.immersive .pv-screen .scan {
  position: fixed; inset: 0; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(15, 13, 46, .3) 0, rgba(15, 13, 46, .3) 2px, transparent 2px, transparent 4px);
}
body.immersive .pv-screen .scan::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(15, 13, 46, .55) 100%);
}
body.immersive .pet-box { inset: auto; left: 50%; bottom: -6%; height: 106%; max-width: 92vw; aspect-ratio: 1 / 1; transform: translateX(-50%); z-index: 1; }
body.immersive .pv-badges { top: 8px; left: 2px; }
body.immersive .pv-place { top: 10px; right: 2px; bottom: auto; max-width: 55%; }
body.immersive .pv-alive, body.immersive .pv-end { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
body.immersive .pv-stats { display: none; }
body.immersive .pv-facts { background: var(--pg); border: 3px solid var(--ink); padding: 4px; box-shadow: 0 3px 0 #000; }
body.immersive .pv-dock {
  background: var(--pg); border: 3px solid var(--ink); padding: 14px 8px 8px; box-shadow: 0 3px 0 #000; position: relative;
}
/* Gold tumpal trim along the top of the dock (triangle band, inspired by the tumpal motif) */
body.immersive .pv-dock::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: linear-gradient(135deg, var(--gold) 25%, transparent 25%) 0 0 / 12px 8px, linear-gradient(225deg, var(--gold) 25%, transparent 25%) 0 0 / 12px 8px;
}
body.immersive .ctl { min-height: 78px; }
body.immersive .ctl .meter { display: block; }
body.immersive .pv-code { position: relative; z-index: 2; margin-top: 8px; padding: 4px 10px; border-width: 3px; }
body.immersive .pv-code #call-code { font-size: 22px; }
body.immersive .pv-end { background: var(--card); border: 4px solid var(--ink); padding: 10px; box-shadow: 0 4px 0 #000; }
body.immersive .ascension, body.immersive #dormant-note { margin: 0; }
body.immersive .toast { top: 76px; bottom: auto; }

/* ---------- Bigger screens ---------- */
@media (min-width: 900px) and (orientation: landscape) {
  /* Classic: the square screen takes two thirds of the frame, the controls the other third (retro desktop mockup).
     The site header is hidden on the pet screen to give the screen more height. The frame is as wide as the screen's
     height allows: screen side S = 100dvh - 140px, controls S/2, gap 24px, frame padding and border 30px, so the
     columns stay 2:1 and the screen stays square. Never narrower than 760px, never wider than 1280px. */
  body.on-pet:not(.immersive) .site-header { display: none; }
  body.on-pet:not(.immersive) main.wrap { max-width: 1344px; } /* the page column (960px) would cap the frame */
  body:not(.immersive) .game.retro:has(.pv:not([hidden])) { max-width: max(760px, min(1280px, calc((100dvh - 140px) * 1.5 + 54px))); }
  .game[data-view="classic"] .pv {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 14px 24px;
    grid-template-areas: "top top" "screen alive" "screen code";
  }
  .game[data-view="classic"] .pv-top { grid-area: top; }
  .game[data-view="classic"] .pv-screen { grid-area: screen; width: min(100%, calc(100dvh - 140px)); align-self: start; }
  .game[data-view="classic"] .pv-alive, .game[data-view="classic"] .pv-end { grid-area: alive; align-self: center; }
  .game[data-view="classic"] .pv-code { grid-area: code; }
  .game[data-view="classic"] .ctl { min-height: 68px; }
  .game[data-view="classic"] .ctl svg { width: 26px; height: 26px; }
  .game[data-view="classic"] .ctl .px { font-size: 9px; }
  .game[data-view="classic"] .stat .segs i { height: 12px; }
  /* Narrow controls column: buttons 2x2, facts 2 + 1, social 3 per row */
  .game[data-view="classic"] .pv-dock { grid-template-columns: 1fr 1fr; gap: 8px; }
  .game[data-view="classic"] .pv-facts { grid-template-columns: 1fr 1fr; }
  .game[data-view="classic"] .pv-facts .fact:last-child { grid-column: 1 / -1; }
  .game[data-view="classic"] .pv-social { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game[data-view="classic"] .soc { min-height: 40px; }
  /* Call Code strip: the country drops to its own line in the narrow column instead of being clipped */
  .game[data-view="classic"] .pv-code { flex-wrap: wrap; row-gap: 0; }
  .game[data-view="classic"] .pv-code .pv-country { flex-basis: 100%; justify-content: flex-end; }

  /* Immersive on desktop: the same layout as a phone, in a portrait frame in the middle of the window with a
     neutral surround. The transform makes the frame the containing block for the fixed scene and scanline layers,
     so they fill the frame instead of the whole window. */
  body.immersive .game.retro { background: #14131F; }
  body.immersive .pv {
    width: min(100%, 460px); margin: 0 auto; overflow: hidden; transform: translateZ(0);
    border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); box-sizing: border-box;
  }
  body.immersive .pet-box { max-width: 92%; }
}
@media (max-height: 700px) {
  .game.retro { --scr: min(100%, 38dvh); }
  .retro .hint { display: none; }
  body.immersive .ctl { min-height: 62px; }
  body.immersive .pv-facts .fact span { font-size: 16px; }
}

/* ---------- Menu and dialogs ---------- */
.sheet {
  --pg: #1A1840; --card: #FEF3C7; --ink: #1E1B4B; --gold: #F5B700; --b1: #FB923C; --b2: #F5B700;
  width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 14px 16px;
  background: var(--card); color: var(--ink); border: 4px solid var(--ink); box-shadow: 6px 6px 0 #000; border-radius: 0;
  font: 400 20px/1.2 'VT323', ui-monospace, monospace;
}
.sheet::backdrop { background: rgba(11, 16, 38, .65); }
.sheet ul { padding-left: 20px; margin: 6px 0 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--ink); }
.seg label { position: relative; margin: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; place-items: center; min-height: 44px; font: 400 9px/1.3 'Press Start 2P', monospace; cursor: pointer; background: #fff; }
.seg label + label span { border-left: 3px solid var(--ink); }
.seg input:checked + span { background: var(--gold); }
.seg input:focus-visible + span { outline: 3px solid var(--b1); outline-offset: -5px; }
.palette-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pal { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; cursor: pointer; text-align: left;
  font: 400 19px/1 'VT323', monospace; background: #fff; color: var(--ink); border: 3px solid var(--ink); }
.pal .sw { width: 26px; height: 26px; flex: none; border: 3px solid var(--ink); background: linear-gradient(135deg, var(--sw) 0 55%, var(--sh) 55% 75%, var(--sb) 75%); }
.pal.on { background: var(--gold); box-shadow: inset 0 0 0 2px var(--ink); }
/* Hatch screen: the palettes are radio buttons (chosen once). */
label.pal { position: relative; margin: 0; }
label.pal input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
label.pal:has(input:checked) { background: var(--gold); box-shadow: inset 0 0 0 2px var(--ink); }
label.pal:has(input:focus-visible) { outline: 3px solid var(--b1); outline-offset: 2px; }
.warn-hint { font-weight: 700; }
.sheet-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.sheet-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.sheet-links a { color: var(--ink); font-size: 20px; padding: 8px 4px; }

/* ---------- Motion ---------- */
.bob { animation: bob 2.6s ease-in-out infinite; transform-origin: 150px 262px; }
.pv-screen.dormant .bob, .pv-screen.dead .bob { animation: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.orbit { animation: sway 4s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.float { animation: bob 3.2s ease-in-out infinite; }
.twinkle { animation: twinkle 2.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Floating mood symbols. Each kind moves differently. */
.fx { transform-box: fill-box; transform-origin: center; }
.fx-rise { animation: fx-rise 2.8s ease-in infinite; }
.fx-pulse { animation: fx-pulse 2.4s ease-in-out infinite; }
.fx-bob { animation: fx-bob 3s ease-in-out infinite; }
.fx-rain { animation: fx-rain 1.1s linear infinite; }
.fx-twinkle { animation: fx-twinkle 1.6s ease-in-out infinite; }
.fx.d2 { animation-delay: .9s; }
.fx.d3 { animation-delay: 1.8s; }
@keyframes fx-rise { 0% { transform: translateY(10px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes fx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fx-rain { 0% { transform: translateY(-3px); opacity: 1; } 100% { transform: translateY(7px); opacity: .2; } }
@keyframes fx-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
/* Cute moves (antics.js). JS sets data-act on the pet container for the length of one move. */
.pet-layer { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pet-layer .pk { cursor: pointer; }
.pk, .pk-head, .pk-tail, .pk-foot-l, .pk-foot-r, .pk-x { transform-box: fill-box; }
.pk { transform-origin: 50% 100%; }
.pk-head { transform-origin: 50% 100%; }
.pk-tail { transform-origin: 8% 80%; }
.pk-foot-l, .pk-foot-r { transform-origin: 50% 100%; }
.pk-x { opacity: 0; }
.pk-tongue { transform-origin: 50% 0%; }
.pk-q { transform-origin: 0% 100%; }
[data-act="wink"] .pk-lid { animation: pk-flash .65s ease-in-out; }
[data-act="hop"] .pk { animation: pk-hop .75s ease-out; }
[data-act="wiggle"] .pk { animation: pk-wiggle 1s ease-in-out; }
[data-act="tongue"] .pk-tongue { animation: pk-tongue 1s ease-in-out; }
[data-act="tongue"] .pk-spark { animation: pk-spark 1s steps(1, end); }
[data-act="tilt"] .pk-head { animation: pk-tilt 1.4s ease-in-out; }
[data-act="tilt"] .pk-q { animation: pk-q 1.4s ease-out; }
[data-act="wag"] .pk-tail { animation: pk-wag 1s ease-in-out; }
[data-act="stomp"] .pk-foot-l { animation: pk-stomp .5s ease-in-out 2; }
[data-act="stomp"] .pk-foot-r { animation: pk-stomp .5s ease-in-out .25s 2; }
[data-act="stomp"] .pk { animation: pk-sway 1s ease-in-out; }
[data-act="spin"] .pk { transform-origin: 50% 50%; animation: pk-spin .9s ease-in-out; }
[data-act="giggle"] .pk { animation: pk-giggle 1.1s linear; }
[data-act="giggle"] .pk-lid { animation: pk-flash 1.1s ease-in-out; }
[data-act="wobble"] .pk { animation: pk-wiggle .9s ease-in-out; }
@keyframes pk-flash { 0%, 100% { opacity: 0; } 15%, 75% { opacity: 1; } }
@keyframes pk-hop {
  0% { transform: none; } 15% { transform: scale(1.08, .9); } 45% { transform: translateY(-26px) scale(.95, 1.06); }
  75% { transform: scale(1.06, .94); } 100% { transform: none; } }
@keyframes pk-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-8deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-5deg); } 88% { transform: rotate(3deg); } }
@keyframes pk-tongue { 0%, 100% { opacity: 0; transform: scaleY(0); } 20%, 75% { opacity: 1; transform: scaleY(1); } 45% { transform: scaleY(.8); } }
@keyframes pk-spark { 0%, 100% { opacity: 0; } 10%, 30%, 55%, 80% { opacity: 1; } 20%, 45%, 70% { opacity: 0; } }
@keyframes pk-tilt { 0%, 100% { transform: none; } 25%, 75% { transform: rotate(13deg); } }
@keyframes pk-q { 0%, 100% { opacity: 0; transform: scale(.4); } 25%, 75% { opacity: 1; transform: scale(1); } }
@keyframes pk-wag { 0%, 100% { transform: none; } 15%, 55% { transform: rotate(-14deg); } 35%, 75% { transform: rotate(10deg); } }
@keyframes pk-stomp { 0%, 100% { transform: none; } 40% { transform: translateY(-12px); } }
@keyframes pk-sway { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes pk-spin { 0%, 100% { transform: none; } 25% { transform: translateY(-10px) scaleX(.1); } 50% { transform: translateY(-14px) scaleX(-1); }
  75% { transform: translateY(-10px) scaleX(-.1); } }
@keyframes pk-giggle { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: rotate(-3deg) translateX(-2px); } 20%, 40%, 60%, 80% { transform: rotate(3deg) translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  .bob, .orbit, .float, .twinkle, .ctl .bang, .fx, .fx-rain { animation: none !important; }
  .fx { opacity: 1; }
}

/* =====================================================================================================
   Phase 2C — Call Code and PIN, coins, social bar, shop, friends, leaderboards, share, mini-game, arena
   ===================================================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.retro input[type="password"], .sheet input[type="password"], .sheet input[type="text"] {
  font: 400 22px 'VT323', monospace; border: 3px solid var(--ink); border-radius: 0; padding: 6px 10px; background: #fff; color: var(--ink); width: 100%; min-height: 44px;
}
.retro input[type="password"]:focus, .sheet input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.sheet .field > label { font: 400 10px/1.6 'Press Start 2P', monospace; display: block; margin-bottom: 4px; }
.code-row { align-items: stretch; }
.code-prefix { display: grid; place-items: center; padding: 0 8px; font: 400 22px 'VT323', monospace; background: var(--ink); color: var(--gold); border: 3px solid var(--ink); }
.code-row input { text-transform: uppercase; letter-spacing: 2px; }
.pin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pin-pair label { font: 400 10px/1.6 'Press Start 2P', monospace; display: block; margin-bottom: 4px; }
.pin-pair input { letter-spacing: 6px; }
.ok-hint { color: #166534; font-weight: 700; opacity: 1 !important; }
.warn-hint { color: #9F1239; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips:empty { display: none; }
.chip-btn { font: 400 18px/1 'VT323', monospace; min-height: 36px; padding: 4px 10px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.chip-btn:hover, .chip-btn:focus-visible { background: var(--gold); }
.invite-note { font: 400 19px/1.2 'VT323', monospace; background: #DCFCE7; border: 3px solid #166534; padding: 6px 10px; margin: 6px 0; }
.invite-note[hidden] { display: none; }

/* Coins in the top bar */
.coin-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; cursor: pointer; touch-action: manipulation;
  background: var(--card); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 400 22px/1 'VT323', monospace; }
.coin-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.coin-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Social bar */
.pv-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 5px; }
.soc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 42px; padding: 3px 2px; cursor: pointer; touch-action: manipulation;
  background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 16px; line-height: 1; }
.soc .px { font-size: 7px; line-height: 1.2; }
.soc.gold { background: var(--gold); animation: soc-pulse 1.6s ease-in-out infinite; }
.soc[hidden] { display: none; }
.soc:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.soc:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@keyframes soc-pulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.15); } }
body.immersive .pv-social { background: var(--pg); border: 3px solid var(--ink); padding: 4px; box-shadow: 0 3px 0 #000; }
body.immersive .soc { min-height: 44px; }
@media (max-height: 700px) { body.immersive .soc > span[aria-hidden] { display: none; } body.immersive .soc { min-height: 36px; } }

/* Sheets for 2C */
.wide-sheet { width: min(640px, calc(100% - 24px)); }
.sheet .hint { font-size: 17px; opacity: .85; margin: 4px 0 8px; }
.sheet h3.px { font-size: 10px; margin: 12px 0 6px; }
.linkbtn.dark { color: var(--ink); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.shop-item { display: flex; flex-direction: column; gap: 4px; align-items: stretch; border: 3px solid var(--ink); background: #fff; padding: 6px; }
.shop-item.on { background: #FEF3C7; box-shadow: inset 0 0 0 2px var(--gold); }
.shop-pic { display: block; width: 100%; aspect-ratio: 1 / 1; }
.shop-pic svg { width: 100%; height: 100%; display: block; }
.shop-name { font-size: 19px; line-height: 1.05; }
.shop-name small { display: block; font-size: 15px; opacity: .75; }
.visit { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; margin: 8px 0; }
.visit-pic { width: 120px; height: 120px; border: 3px solid var(--ink); background: linear-gradient(#BAE6FD, #E0F2FE 70%, #BBF7D0 70%); }
.visit-pic svg { width: 100%; height: 100%; }
.visit-info p { margin: 2px 0; }
.visit-name { font-size: 24px; }
.visit-meta { font-size: 9px; }
.visit-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.gift-pick { border: 3px dashed var(--ink); padding: 6px; margin-top: 8px; }
.gift-pick[hidden] { display: none; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gift-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 3px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; font: 400 16px/1 'VT323', monospace; }
.gift-opt .shop-pic { width: 64px; }
.gift-opt:disabled { opacity: .45; cursor: not-allowed; }
.board { list-style: none; padding: 0; margin: 6px 0; }
.board li { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border-bottom: 2px solid #E2E8F0; }
.board li.me { background: #FEF3C7; }
.board .rank, .board .score { font-size: 10px; }
.board .who a { color: var(--ink); font-size: 20px; }
.board .who small { display: block; font-size: 15px; opacity: .7; }
.share-block { border-top: 3px solid var(--ink); padding-top: 6px; margin-top: 8px; }
.share-url { display: flex; gap: 6px; }
.share-url input { flex: 1; min-width: 0; font-size: 18px !important; }
.share-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.share-row a.rbtn { text-decoration: none; }
.result-score { font-size: 22px !important; margin: 6px 0; }
.result-score small { font-size: 10px; }

/* Tangkap Kelip-kelip: the whole window is the game */
body.kelip-open { overflow: hidden; }
.kelip { position: fixed; inset: 0; z-index: 60; background: #0B1030; touch-action: none; user-select: none; -webkit-user-select: none; }
.kelip-canvas { position: absolute; inset: 0; display: block; cursor: crosshair; }
.kelip-pet { position: absolute; left: 0; bottom: 0; width: min(34vw, 28vh); aspect-ratio: 1 / 1; pointer-events: none; opacity: .95; }
.kelip-pet svg { width: 100%; height: 100%; }
.kelip-hud { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.kelip-hud .px { color: #FDE047; font-size: 18px; text-shadow: 2px 2px 0 #000; }
.kelip-time { margin-left: auto; color: #fff !important; }
.kelip-quit { pointer-events: auto; }
.kelip-intro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 420px); text-align: center; color: #fff;
  background: rgba(15, 13, 46, .85); border: 4px solid #FDE047; padding: 14px; font: 400 21px/1.2 'VT323', monospace; }
.kelip-intro[hidden] { display: none; }
.kelip-intro h2 { font-size: 13px; color: #FDE047; margin: 0 0 8px; }
.kelip-count { font-size: 40px !important; color: #FDE047; margin: 10px 0 0; }

/* Pamper and battle arena */
.arena { position: fixed; inset: 0; z-index: 60; background: #0B1030; overflow: hidden; outline: none; }
.arena-bg { position: absolute; inset: 0; }
.arena-bg svg { width: 100%; height: 100%; display: block; }
.arena-pet { position: absolute; bottom: 4%; width: min(44vw, 52vh); aspect-ratio: 1 / 1; transition: transform .35s ease-out; }
.arena-pet.left { left: 4%; }
.arena-pet.right { right: 4%; }
.arena-pet.right .arena-sprite { transform: scaleX(-1); }
.arena-sprite, .arena-sprite svg { width: 100%; height: 100%; display: block; }
.arena-fx { position: absolute; left: 25%; top: 10%; width: 50%; height: 50%; pointer-events: none; }
.arena-fx svg { width: 100%; height: 100%; overflow: visible; }
.arena-names { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; }
.arena-names .px { font-size: 10px; color: #fff; background: rgba(15, 13, 46, .8); border: 3px solid #000; padding: 6px 8px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); margin: 0; font-size: 14px; color: #FDE047; text-shadow: 3px 3px 0 #000; text-align: center; width: 90%; }
.arena-close { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; }
.arena-close[hidden] { display: none; }
.arena-pet.left.lunge { animation: lunge-r .38s ease-in-out; }
.arena-pet.right.lunge { animation: lunge-l .38s ease-in-out; }
.arena-pet.hit { animation: hit .42s ease-in-out; }
.arena-pet.left.approach { transform: translateX(22vw); }
.arena-pet.happy-hop { animation: happy-hop .6s ease-out 2; }
@keyframes lunge-r { 50% { transform: translateX(18vw) rotate(6deg); } }
@keyframes lunge-l { 50% { transform: translateX(-18vw) rotate(-6deg); } }
@keyframes hit { 20%, 60% { transform: translateX(-10px); filter: brightness(1.6); } 40%, 80% { transform: translateX(10px); } }
@keyframes happy-hop { 40% { transform: translateY(-24px); } }
.arena-pet.left.approach.happy-hop { animation: none; }
.flicker { animation: twinkle .4s ease-in-out infinite; }

/* Public pet page (/p/<Call Code>) */
.pub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pub-screen { position: relative; width: min(100%, 44dvh); aspect-ratio: 1 / 1; margin: 0 auto; border: 4px solid var(--ink); overflow: hidden; }
.pub-name { font: 400 30px/1 'VT323', monospace; margin: 0; }
.pub-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  .soc.gold, .flicker, .streak-line.risk { animation: none; }
}

/* =====================================================================================================
   Countries (17 Oct 2026): flags, the country picker, leaderboard views
   ===================================================================================================== */
.flag { width: 24px; height: 18px; object-fit: cover; vertical-align: -3px; border: 1px solid rgba(0, 0, 0, .35); border-radius: 2px; background: #fff; }
.flag.emoji, .flag.globe { width: auto; height: auto; border: 0; background: none; font-size: 18px; line-height: 1; vertical-align: -2px; }
.cp { display: grid; gap: 0; }
.cp-search, .cp-select, .sheet input.cp-search { width: 100%; min-height: 44px; box-sizing: border-box; font: 400 22px 'VT323', monospace; border: 3px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink); padding: 4px 10px; }
.cp-select { margin-top: 6px; }
.cp-search:focus, .cp-select:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.cp-suggest { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-suggest:empty { display: none; }
.cp-preview { margin: 6px 0 0; font: 400 22px/1.2 'VT323', monospace; min-height: 1.2em; }
.seg.grid4 { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.seg.grid4 label:nth-child(3) span { border-left: 0; }
.seg.grid4 label:nth-child(n + 3) span { border-top: 3px solid var(--ink); }
.board-filters .field { margin: 8px 0 0; }
.board .who .cn { font-size: 20px; }
.board .who small .flag { vertical-align: -3px; }
.pv-country { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; color: var(--card); }
.pub-country { margin: 4px 0 0; font-size: 20px; }

/* ---------- Alignment with the GDD (20 Oct 2026) ---------- */
/* Mentor Boost chip */
.chip.mentor { background: #FEF3C7; }

/* Kelip daily top-3 medals beside a name: shape and letter carry the meaning, colour only adds to it */
#pet-medals:empty { display: none; }
.medals { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.medal { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px;
  border: 2px solid #1E1B4B; font: 400 8px/1 'Press Start 2P', monospace; color: #1E1B4B; }
.medal.gold { background: #F5B700; }
.medal.silver { background: #CBD5E1; }
.medal.bronze { background: #E7A26B; }

/* Bond */
.bond { display: grid; gap: 4px; margin: 6px 0 8px; font-weight: 700; }
.bond small { font-weight: 600; opacity: .85; }
.bond-bar { display: block; height: 10px; border: 2px solid var(--ink); background: #fff; }
.bond-bar i { display: block; height: 100%; background: var(--b4, #FB7185); }
.bond-badge { display: inline-block; padding: 2px 6px; border: 2px solid var(--ink); background: #FFE4E6; color: #1E1B4B;
  font: 400 8px/1.4 'Press Start 2P', monospace; white-space: nowrap; }
.bond-badge.l3, .bond-badge.l4 { background: #FDE68A; }

/* Saved friends and blocked pets */
.friend-list, .blocked-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.friend-list li { display: flex; gap: 6px; align-items: stretch; }
.friend-list li .friend { flex: 1; min-width: 0; }
.cuit-btn { flex: 0 0 auto; align-self: center; }
.checkin-status.done { color: #166534; font-weight: 700; }
.checkin-status.todo { color: #9A3412; }
.rbtn.danger { color: #991B1B; }
.friend { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; width: 100%; min-height: 56px; padding: 4px 8px;
  border: 2px solid var(--ink); background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.friend:hover, .friend:focus-visible { background: var(--gold); }
.friend-pic { width: 48px; height: 48px; }
.friend-pic svg { width: 100%; height: 100%; }
.friend-who { display: grid; gap: 2px; min-width: 0; }
.friend-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-who small { opacity: .85; }
.friend-who .bond-badge { justify-self: start; }
.blocked summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.blocked-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* QR codes in the Share dialog and on the public page */
.share-qr { display: inline-grid; justify-items: center; gap: 2px; margin: 4px 0 6px; }
.share-qr .qr, .pub-qr .qr { width: 132px; height: 132px; border: 3px solid var(--ink); background: #fff; }
.pub-qr { display: grid; justify-items: center; gap: 4px; margin: 6px 0; }

/* Tangkap Kelip-kelip HUD: combo and misses left */
.kelip-hud .kelip-combo { color: #F5B700; min-width: 3ch; }
.kelip-hud .kelip-lives { letter-spacing: 2px; color: #FB7185; }

/* Legacy Egg dialog */
.legacy-grid { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.legacy-preview { width: 110px; height: 110px; border: 3px solid var(--ink); background: linear-gradient(#BAE6FD, #E0F2FE 70%, #BBF7D0 70%); }
.legacy-preview svg { width: 100%; height: 100%; }

/* Ad container: sized for 320×50 (phone) and 728×90 (desktop); hidden until AdSense is approved */
.ad-slot { display: block; width: 320px; max-width: 100%; height: 50px; margin: 12px auto; overflow: hidden; }
.ad-slot[hidden] { display: none; }
@media (min-width: 900px) { .ad-slot { width: 728px; height: 90px; } }

/* =====================================================================================================
   More mini-games (20 Oct 2026): game menu, Ikut Rentak, Lidah Pantas, Padan Motif, Panjat Pokok
   ===================================================================================================== */
.game-picks { display: grid; gap: 8px; margin: 8px 0; }
.game-pick { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; width: 100%;
  min-height: 72px; padding: 8px 10px; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; font: inherit; }
.game-pick:hover { background: #FEF9C3; }
.game-pick:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.game-pick:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.game-pick-icon svg { width: 52px; height: 52px; display: block; }
.game-pick-text { display: grid; gap: 2px; min-width: 0; }
.game-pick-text b { font-size: 10px; line-height: 1.5; }
.game-pick-text span { font: 400 18px/1.15 'VT323', monospace; }
.game-pick-text small { font: 400 16px/1.1 'VT323', monospace; color: var(--muted); }

.mg-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 12px 16px; }
.mg:not(:has(canvas)) { background: radial-gradient(circle at 50% 30%, #2E2A6B, #0B1030 70%); }
.mg-status { color: #fff; font-size: 12px; text-align: center; min-height: 1.6em; margin: 0 0 10px; text-shadow: 2px 2px 0 #000; }
.mg .kelip-hud .mg-round, .mg .kelip-hud .mg-board, .mg .kelip-hud .mg-misses { color: #fff; }

/* Ikut Rentak: four big pads */
.mg-rentak .mg-stage { align-content: center; }
.rentak-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(92vw, 62vh, 460px); }
.rentak-pad { aspect-ratio: 1 / 1; display: grid; place-items: center; align-content: center; gap: 6px; background: color-mix(in srgb, var(--c) 45%, #1B1A2E);
  border: 4px solid #000; box-shadow: 0 6px 0 #000; color: #fff; cursor: pointer; padding: 8px; transition: transform .06s, background .1s, filter .1s; }
.rentak-pad .px { font-size: 9px; line-height: 1.4; }
.rentak-icon svg { width: min(16vw, 72px); height: min(16vw, 72px); display: block; filter: grayscale(.5) brightness(.85); }
.rentak-pad.on { background: var(--c); transform: translateY(4px); box-shadow: 0 2px 0 #000; filter: brightness(1.15); }
.rentak-pad.on .rentak-icon svg { filter: none; transform: scale(1.12); }
.rentak-pad:disabled { cursor: default; }
.rentak-pad:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Padan Motif: card grid */
.motif-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px;
  width: min(94vw, calc((100dvh - 120px) * var(--cols) / 5.2), 520px); }
.motif-card { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 3px solid #000; box-shadow: 0 4px 0 #000; background: #fff; cursor: pointer; }
.motif-back { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #7F1D1D 0 8px, #991B1B 8px 16px);
  display: grid; place-items: center; }
.motif-back::after { content: ''; width: 34%; aspect-ratio: 1; transform: rotate(45deg); border: 3px solid #FEF3C7; }
.motif-face { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 2px; background: #FFF8EC; }
.motif-face svg { width: 70%; height: auto; }
.motif-name { font: 400 14px/1 'VT323', monospace; color: var(--ink); }
.motif-card.up .motif-face { display: grid; }
.motif-card.up .motif-back { display: none; }
.motif-card.matched { background: #DCFCE7; box-shadow: 0 1px 0 #000; transform: translateY(3px); }
.motif-card.matched .motif-face { background: #DCFCE7; }
.motif-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Panjat Pokok: timer bar in the HUD */
.mg-timer { flex: 1; max-width: 220px; height: 14px; border: 3px solid #000; background: rgba(0,0,0,.35); }
.mg-timer i { display: block; height: 100%; width: 100%; background: #22C55E; transition: width .1s linear; }
.mg-timer i.low { background: #E11D48; }
.mg-panjat .kelip-canvas, .mg-lidah .kelip-canvas { cursor: pointer; }
.mg-lidah .kelip-hud .kelip-score, .mg-lidah .kelip-hud .kelip-time, .mg-panjat .kelip-hud .kelip-score { color: #fff; }
.mg .kelip-quit { margin-left: auto; }