/* =====================================================
   TAP TAP - styles

   RESPONSIVE IDEA (read this first):
   The game area always has a fixed 9:16 "portrait" shape.
     - Phone:  the area fills the whole screen.
     - Laptop: the area is as tall as the window, centred, with the
               same 9:16 proportions (dark bars on the left and right).
   Every size below is written in "u" units. 1u = 1% of the game
   area's WIDTH, so when the game area gets bigger or smaller,
   text, buttons and emoji all scale with it and look the same.
   ===================================================== */

/* ---------- Page basics ---------- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* no grey flash when tapping on phones */
}

html, body {
  margin: 0;
  height: 100%;
  background: #062a1f;       /* the dark bars you see around the game on wide screens */
  font-family: system-ui, Arial, sans-serif;
  color: #fff;
  /* Stop text selection, long-press menus, pull-to-refresh and zoom gestures */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  overscroll-behavior: none;
  overflow: hidden;
}

/* ---------- The game area ---------- */
:root {
  /* Width = the full screen width, but never wider than 9/16 of the screen HEIGHT: the play area is always the same
     portrait shape, whatever the screen. (Desktop adds a maximum below.) */
  --w: min(100vw, calc(100dvh * 9 / 16));
}

#game {
  /* Width = the full screen width, but never wider than 9/16 of the screen
     HEIGHT. On a laptop the height is the limit, so the area stays a tall
     rectangle. On a phone the width is the limit, so it fills the screen. */
  /* --w (the game width) is defined on :root just below so the side panels can use it too. */
  --u: calc(var(--w) / 100);   /* 1u = 1% of the game width */

  position: relative;
  width: var(--w);
  height: 100vh;               /* fallback for older browsers */
  height: 100dvh;              /* dvh = visible height on phones (excludes the address bar) */
  margin: 0 auto;              /* centres the game horizontally */
  display: flex;
  flex-direction: column;
  background: linear-gradient(#145a43, #0b3d2e);
  overflow: hidden;
}

/* Only when there are side bars (wide screens), add a soft edge so the game
   area looks like a framed "cabinet". */
@media (min-aspect-ratio: 9/16) {
  #game { box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
}

/* ---------- Top bar ---------- */
#top-bar {
  display: flex;
  justify-content: space-between;
  /* env(safe-area-inset-top) keeps the bar clear of phone notches */
  padding: calc(var(--u) * 3.2 + env(safe-area-inset-top)) calc(var(--u) * 4.3) calc(var(--u) * 3.2);
  background: rgba(0, 0, 0, 0.35);
  font-size: calc(var(--u) * 4.8);
  z-index: 5;
}
.stat span { font-weight: bold; font-size: calc(var(--u) * 6); }

/* Pause button sits in the middle of the top bar */
#pause-btn {
  min-width: calc(var(--u) * 12);
  min-height: calc(var(--u) * 10);
  font-size: calc(var(--u) * 4);
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: calc(var(--u) * 2.7);
  cursor: pointer;
  z-index: 6;
}
#pause-btn:active { background: rgba(255, 255, 255, 0.3); }

/* ---------- Streak (top-center, overlaid on the play area) ---------- */
#streak-box {
  position: absolute;
  top: calc(var(--u) * 16 + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 4;
  pointer-events: none;   /* taps pass through to the items */
}
#streak-label { font-size: calc(var(--u) * 3.4); letter-spacing: calc(var(--u) * 0.8); opacity: 0.8; }
#streak { font-size: calc(var(--u) * 13.6); font-weight: bold; color: #ffd54a; line-height: 1; }
#streak.pop { animation: pop 0.2s; }
@keyframes pop {
  50% { transform: scale(1.35); }
}

/* ---------- Play area & items ---------- */
#play-area {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* The outer .item is moved by JavaScript (transform: translate).
   The inner .emoji gets the pop animation, so the two never fight over "transform". */
.item {
  position: absolute;
  top: 0;
  left: 0;
  padding: calc(var(--u) * 2.7);   /* invisible padding = bigger finger-sized tap target */
  cursor: pointer;
  will-change: transform;
  touch-action: none;
}
.emoji {
  display: block;
  font-size: calc(var(--u) * 14);  /* item size is relative to the game width */
  line-height: 1;
}

/* POP ANIMATION: shown for a moment after an item is tapped, then it's removed */
.item.popped, .bug.popped { pointer-events: none; }
.item.popped .emoji, .bug.popped .emoji { animation: item-pop 0.25s ease-out forwards; }
@keyframes item-pop {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(2);   opacity: 0; }
}

/* Floating "+points" text */
.float-text {
  position: absolute;
  font-size: calc(var(--u) * 6.8);
  font-weight: bold;
  pointer-events: none;
  animation: float-up 0.8s ease-out forwards;
  z-index: 3;
}
.float-text.good { color: #7dff9b; }
.float-text.bad  { color: #ff6b6b; }
@keyframes float-up {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(calc(var(--u) * -16)); }
}

/* ---------- Overlays (start, countdown, results) ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;   /* when content is taller than the screen, start at the top so it can scroll */
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 4.3);
  background: rgba(0, 0, 0, 0.88);
  font-size: calc(var(--u) * 5.5);
  text-align: center;
  overflow-y: auto;              /* results screen can scroll on short windows */
  touch-action: pan-y;
}
.overlay.clear { background: rgba(0, 0, 0, 0.35); pointer-events: none; }
.overlay h1 { font-size: calc(var(--u) * 11); margin: 0 0 calc(var(--u) * 2); }
.overlay h2 { font-size: calc(var(--u) * 5); margin: calc(var(--u) * 3.5) 0 calc(var(--u) * 1); color: #ffd54a; }
.overlay p { margin: calc(var(--u) * 1) 0; }
.hint { opacity: 0.8; font-size: calc(var(--u) * 4.7); }
.label {
  margin-top: calc(var(--u) * 4.8) !important;
  font-size: calc(var(--u) * 4.3);
  opacity: 0.7;
  letter-spacing: calc(var(--u) * 0.5);
  text-transform: uppercase;
}

/* Time selector buttons */
#duration-picker { display: flex; gap: calc(var(--u) * 2.7); }
.duration-btn {
  min-width: calc(var(--u) * 21);
  min-height: calc(var(--u) * 14);   /* keeps a finger-friendly touch size */
  font-size: calc(var(--u) * 5.5);
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: 2px solid #ffd54a;
  border-radius: calc(var(--u) * 3.2);
  cursor: pointer;
}
.duration-btn.selected { color: #0b3d2e; background: #ffd54a; }

/* Difficulty buttons share the duration button look, with the multiplier underneath */
#difficulty-picker { display: flex; gap: calc(var(--u) * 2.7); }
.difficulty-btn {
  min-width: calc(var(--u) * 25);
  min-height: calc(var(--u) * 15);
  font-size: calc(var(--u) * 5);
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: 2px solid #ffd54a;
  border-radius: calc(var(--u) * 3.2);
  cursor: pointer;
}
.difficulty-btn small { display: block; font-size: calc(var(--u) * 3.4); font-weight: normal; opacity: 0.8; }
.difficulty-btn.selected { color: #0b3d2e; background: #ffd54a; }

/* "Player: Ada  Change" line on the start and results screens */
.player-line { font-size: calc(var(--u) * 4.7); }
.player-line strong { color: #ffd54a; }
.link-btn.inline { margin: 0; min-height: 0; padding: calc(var(--u) * 1) calc(var(--u) * 2); font-size: calc(var(--u) * 4); }

/* Name entry */
#name-input, .text-input {
  width: 100%;
  max-width: calc(var(--u) * 75);
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 3.5);
  font-size: calc(var(--u) * 6);
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid #ffd54a;
  border-radius: calc(var(--u) * 3.2);
  user-select: text;             /* the page blocks selection elsewhere, but typing needs it */
  -webkit-user-select: text;
  touch-action: manipulation;
}
.error { min-height: calc(var(--u) * 6); color: #ff8a8a; font-size: calc(var(--u) * 4); }

.best-line { margin-top: calc(var(--u) * 4.3) !important; }

.big-btn {
  margin-top: calc(var(--u) * 5.3);
  padding: calc(var(--u) * 4.8) calc(var(--u) * 14);
  font-size: calc(var(--u) * 8.5);
  font-weight: bold;
  color: #0b3d2e;
  background: #ffd54a;
  border: none;
  border-radius: calc(var(--u) * 4.3);
  cursor: pointer;
}
.big-btn:active { transform: scale(0.96); }

.link-btn {
  margin-top: calc(var(--u) * 2);
  min-height: calc(var(--u) * 12);
  padding: calc(var(--u) * 2) calc(var(--u) * 4.3);
  font-size: calc(var(--u) * 4.3);
  color: #fff;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.new-best { color: #7dff9b; font-weight: bold; animation: pop 0.6s 2; }

/* Countdown number */
#countdown-number { font-size: calc(var(--u) * 38); font-weight: bold; color: #ffd54a; }
#countdown-number.tick { animation: tick 0.9s ease-out; }
@keyframes tick {
  from { transform: scale(1.8); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Leaderboard */
#leaderboard {
  width: 100%;
  max-width: calc(var(--u) * 85);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--u) * 4.3);
  text-align: left;
}
#leaderboard li {
  display: flex;
  justify-content: space-between;
  padding: calc(var(--u) * 1) calc(var(--u) * 2.7);
  border-radius: calc(var(--u) * 1.6);
}
#leaderboard li.current { background: #ffd54a; color: #0b3d2e; font-weight: bold; }
#leaderboard .date { opacity: 0.6; font-size: calc(var(--u) * 3.6); }

/* ---------- Credits, menu buttons ---------- */
.credits-line { font-size: calc(var(--u) * 4.7); }
.credits-line strong { color: #7dff9b; }
.credit-reward { color: #7dff9b; font-weight: bold; min-height: calc(var(--u) * 6); }

.menu-row { display: flex; gap: calc(var(--u) * 2.7); margin-top: calc(var(--u) * 5); width: 100%; max-width: calc(var(--u) * 90); }
.menu-btn {
  flex: 1;
  min-height: calc(var(--u) * 15);
  padding: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 4.4);
  font-weight: bold;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid #ffd54a;
  border-radius: calc(var(--u) * 3.2);
  cursor: pointer;
}
.menu-btn small { display: block; font-size: calc(var(--u) * 3); font-weight: normal; opacity: 0.85; margin-top: calc(var(--u) * 0.5); }
.menu-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.big-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Mosquito Smash screen ---------- */
#mini-screen {
  position: absolute;
  inset: 0;
  z-index: 8;                    /* above the normal game, below the menus (z-index 10) */
  display: flex;
  flex-direction: column;
  background: linear-gradient(#1d4a5c, #0b2a36);
}
.mini-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--u) * 3.2 + env(safe-area-inset-top)) calc(var(--u) * 4.3) calc(var(--u) * 3.2);
  background: rgba(0, 0, 0, 0.35);
  font-size: calc(var(--u) * 4.8);
}
#spray-btn {
  min-width: calc(var(--u) * 20);
  min-height: calc(var(--u) * 10);
  font-size: calc(var(--u) * 4);
  color: #fff;
  background: rgba(80, 160, 255, 0.45);
  border: none;
  border-radius: calc(var(--u) * 2.7);
  cursor: pointer;
}
#spray-btn:disabled { opacity: 0.5; cursor: default; }
#mini-arena { position: relative; flex: 1; overflow: hidden; --bug-pad: 2; }
#mini-arena.sprayed { box-shadow: inset 0 0 0 calc(var(--u) * 1.2) rgba(120, 190, 255, 0.55); background: rgba(80, 160, 255, 0.12); }

/* A flying bug. Moved by JavaScript (transform); the padding is the tap area. */
.bug {
  position: absolute;
  top: 0;
  left: 0;
  padding: calc(var(--u) * var(--bug-pad));
  cursor: pointer;
  will-change: transform;
  touch-action: none;
  animation: bug-in 0.25s ease-out;
}
@keyframes bug-in { from { opacity: 0; } to { opacity: 1; } }
.bug.leaving { opacity: 0; transition: opacity 0.3s; pointer-events: none; }
/* With the Bigger Swatter, a faint circle shows the larger tap area */
#mini-arena.has-swatter .bug { background: rgba(255, 255, 255, 0.12); border-radius: 50%; box-shadow: 0 0 0 calc(var(--u) * 0.5) rgba(255, 255, 255, 0.4); }   /* a visible ring: the bigger tap area */

/* ---------- Shop ---------- */
#shop-list { display: flex; flex-direction: column; gap: calc(var(--u) * 2.5); width: 100%; max-width: calc(var(--u) * 90); }
.shop-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  text-align: left;
  font-size: calc(var(--u) * 4.4);
  background: rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--u) * 3);
}
.shop-info small { display: block; margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 3.4); opacity: 0.75; }
.buy-btn {
  flex: none;
  min-height: calc(var(--u) * 11);
  padding: 0 calc(var(--u) * 3);
  font-size: calc(var(--u) * 3.8);
  font-weight: bold;
  color: #0b3d2e;
  background: #ffd54a;
  border: none;
  border-radius: calc(var(--u) * 2.7);
  cursor: pointer;
}
.buy-btn:disabled { color: #fff; background: rgba(255, 255, 255, 0.2); cursor: default; }
/* The shop and name panels are solid, so the start screen doesn't show through */
#shop-screen, #name-screen, #auth-screen, #account-screen, #username-screen, #lobby-screen, #room-screen, #social-screen, #chat-screen, #match-screen { background: #0a1f17; }
#target-list { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 2.5); }
.target-btn {
  min-height: calc(var(--u) * 11);
  padding: 0 calc(var(--u) * 3);
  font-size: calc(var(--u) * 4);
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: 2px solid #ffd54a;
  border-radius: calc(var(--u) * 3);
  cursor: pointer;
}
.target-btn.selected { color: #0b3d2e; background: #ffd54a; }
.shop-message { min-height: calc(var(--u) * 6); font-size: calc(var(--u) * 4); color: #ffd54a; }

/* ---------- Sign in / account screens ---------- */
.tab-row { display: flex; gap: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 2); }
.tab-btn {
  min-height: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 4);
  font-size: calc(var(--u) * 4.4);
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: 2px solid #ffd54a;
  border-radius: calc(var(--u) * 3);
  cursor: pointer;
}
.tab-btn.selected { color: #0b3d2e; background: #ffd54a; }
/* Leaderboard period tabs and the "your rank" line */
.tab-btn.small { min-height: calc(var(--u) * 9); padding: 0 calc(var(--u) * 3); font-size: calc(var(--u) * 3.6); }
.my-rank { margin-top: calc(var(--u) * 2) !important; font-size: calc(var(--u) * 4.2); color: #ffd54a; min-height: calc(var(--u) * 5); }
#leaderboard .score-val { font-weight: bold; }
.text-input { margin-top: calc(var(--u) * 2) !important; }
.menu-btn.narrow { flex: none; width: 100%; max-width: calc(var(--u) * 75); margin-top: calc(var(--u) * 2); }
.account-status { max-width: calc(var(--u) * 85); font-size: calc(var(--u) * 4.2); }
#upgrade-box { display: flex; flex-direction: column; align-items: center; width: 100%; }
.error.ok { color: #7dff9b; }

/* ---------- Multiplayer lobby ---------- */
.online-count { margin: 0; font-size: calc(var(--u) * 3.8); color: #7dff9b; }
.lobby-block { display: flex; flex-direction: column; align-items: center; width: 100%; }
.searching { font-size: calc(var(--u) * 6); font-weight: bold; color: #ffd54a; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.code-input { text-align: center; letter-spacing: calc(var(--u) * 1.5); text-transform: uppercase; }
.room-code {
  font-size: calc(var(--u) * 15);
  font-weight: bold;
  letter-spacing: calc(var(--u) * 2);
  color: #ffd54a;
  line-height: 1;
}
#room-members {
  list-style: none;
  margin: calc(var(--u) * 2) 0;
  padding: 0;
  width: 100%;
  max-width: calc(var(--u) * 75);
}
#room-members li {
  display: flex;
  justify-content: space-between;
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 4.6);
  background: rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--u) * 2.5);
}
#room-members li.me { border: 2px solid #ffd54a; }
#room-members .tag { font-size: calc(var(--u) * 3.4); color: #ffd54a; }

/* ---------- Friends, chat, gifts ---------- */
.badge {
  display: inline-block;
  min-width: calc(var(--u) * 6);
  margin-left: calc(var(--u) * 1.5);
  padding: 0 calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 3.4);
  line-height: calc(var(--u) * 6);
  text-align: center;
  color: #0b3d2e;
  background: #ff8a65;
  border-radius: calc(var(--u) * 3);
}
.social-tab { width: 100%; max-width: calc(var(--u) * 90); }
.chat-box { width: 100%; max-width: calc(var(--u) * 80); margin-top: calc(var(--u) * 2); }
.chat-log {
  width: 100%;
  max-height: calc(var(--u) * 45);
  min-height: calc(var(--u) * 18);
  overflow-y: auto;
  padding: calc(var(--u) * 2);
  text-align: left;
  font-size: calc(var(--u) * 4);
  background: rgba(255, 255, 255, 0.06);
  border-radius: calc(var(--u) * 2.5);
}
.chat-log.tall { max-height: calc(var(--u) * 85); min-height: calc(var(--u) * 50); }
.chat-msg { margin-bottom: calc(var(--u) * 2); word-wrap: break-word; }
.chat-msg .who { font-weight: bold; color: #ffd54a; }
.chat-msg.mine .who { color: #7dff9b; }
.chat-msg .acts { margin-left: calc(var(--u) * 2); opacity: 0.6; font-size: calc(var(--u) * 3.2); }
.chat-msg .acts button, .row-acts button {
  margin-left: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 2);
  font-size: calc(var(--u) * 3.2);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  border-radius: calc(var(--u) * 1.5);
  cursor: pointer;
}
.chat-input-row { display: flex; gap: calc(var(--u) * 2); width: 100%; margin-top: calc(var(--u) * 2); }
.chat-input { flex: 1; margin-top: 0 !important; font-size: calc(var(--u) * 4.4) !important; padding: calc(var(--u) * 2.5) !important; }
.chat-send { flex: none !important; min-height: 0 !important; padding: 0 calc(var(--u) * 4) !important; }
.person-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 4.4);
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--u) * 2.5);
}
.person-row .meta { font-size: calc(var(--u) * 3.4); opacity: 0.75; }
.section-title { margin: calc(var(--u) * 3) 0 calc(var(--u) * 1.5); font-size: calc(var(--u) * 3.6); letter-spacing: calc(var(--u) * 0.4); text-transform: uppercase; opacity: 0.7; text-align: left; }
.alert-row.unread { border-left: calc(var(--u) * 1) solid #ff8a65; }
#room-members li { flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
#room-members .row-acts { flex-basis: 100%; text-align: right; }
.dialog { z-index: 20; }
#toasts {
  position: absolute;
  top: calc(var(--u) * 2 + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: calc(var(--u) * 90);
  pointer-events: none;
}
.toast {
  margin-bottom: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  font-size: calc(var(--u) * 4.2);
  color: #0b3d2e;
  background: #ffd54a;
  border-radius: calc(var(--u) * 3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }

/* ---------- 1v1 matches ---------- */
.match-panel { width: 100%; max-width: calc(var(--u) * 80); margin-top: calc(var(--u) * 3); }
.match-status { font-size: calc(var(--u) * 4.6); font-weight: bold; color: #ffd54a; min-height: calc(var(--u) * 6); }
.match-actions { display: flex; gap: calc(var(--u) * 2); justify-content: center; flex-wrap: wrap; }
.match-actions button {
  min-height: calc(var(--u) * 11);
  padding: 0 calc(var(--u) * 5);
  font-size: calc(var(--u) * 4.4);
  font-weight: bold;
  color: #0b3d2e;
  background: #ffd54a;
  border: none;
  border-radius: calc(var(--u) * 3);
  cursor: pointer;
}
.match-actions button.secondary { color: #fff; background: rgba(255, 255, 255, 0.15); }
.match-text { max-width: calc(var(--u) * 85); font-size: calc(var(--u) * 5); }
.match-scoreboard { display: flex; gap: calc(var(--u) * 6); margin: calc(var(--u) * 3) 0; }
.match-scoreboard .side { padding: calc(var(--u) * 3) calc(var(--u) * 5); background: rgba(255, 255, 255, 0.08); border-radius: calc(var(--u) * 3); }
.match-scoreboard .side.winner { border: 2px solid #ffd54a; }
.match-scoreboard .side b { display: block; font-size: calc(var(--u) * 9); color: #ffd54a; }

.hidden { display: none !important; }


/* ---------- Advertising (see ads.js) ---------- */
/* Banners live only on menu screens (start, lobby, results), never over the tap area. */
.ad-slot { width: 100%; max-width: calc(var(--u) * 80); margin: calc(var(--u) * 1) 0; }
.ad-body {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); flex-wrap: wrap;
  width: 100%; padding: calc(var(--u) * 2); border: 1px dashed rgba(255, 213, 74, 0.6); border-radius: calc(var(--u) * 2);
  background: rgba(255, 255, 255, 0.07); color: inherit; font: inherit; font-size: calc(var(--u) * 4); cursor: pointer;
}
.ad-tag, .sponsored-tag {
  font-size: calc(var(--u) * 2.6); font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase;
  background: #ffd54a; color: #222; padding: 0 calc(var(--u) * 1.5); border-radius: calc(var(--u) * 1);
}
.ad-asset { font-size: calc(var(--u) * 8); line-height: 1; }
.ad-image { width: calc(var(--u) * 10); height: calc(var(--u) * 10); object-fit: contain; border-radius: calc(var(--u) * 1); }
.ad-sub { font-size: calc(var(--u) * 3); opacity: 0.8; }
.ad-report-wrap { display: flex; gap: calc(var(--u) * 1.5); align-items: center; justify-content: center; flex-wrap: wrap; margin-top: calc(var(--u) * 0.5); }
.ad-report { font-size: calc(var(--u) * 3); opacity: 0.7; }
.ad-report-select { width: auto; font-size: calc(var(--u) * 3.2); padding: calc(var(--u) * 0.8); }
.ad-report-msg { font-size: calc(var(--u) * 3); }
/* The sponsored falling item: same size as the others, with its label underneath. */
.item .sponsored-tag { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.item img.emoji { width: calc(var(--u) * 14); height: calc(var(--u) * 14); object-fit: contain; }


/* ---------- Sponsored rooms (see brand.js) ---------- */
/* While in a room the game takes the sponsor's colours. (Colours come from the server and are checked to be #rrggbb.) */
#game.branded { background: linear-gradient(var(--brand-bg), #000); }
#game.branded .overlay h1, #game.branded .overlay h2 { color: var(--brand-accent); }
#game.branded .big-btn { background: var(--brand-accent); color: #111; }
#game.branded .item .emoji { filter: drop-shadow(0 0 6px var(--brand-accent)); }
.foot-link { font-size: calc(var(--u) * 3.2); opacity: 0.75; margin-top: calc(var(--u) * 1); text-decoration: underline; color: inherit; }
#brand-list { width: 100%; max-width: calc(var(--u) * 88); display: flex; flex-direction: column; gap: calc(var(--u) * 2.5); }
.brand-card { border: 2px solid #ffd54a; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 3); text-align: left; position: relative; }
.brand-head { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.brand-sprite { font-size: calc(var(--u) * 12); line-height: 1; width: calc(var(--u) * 12); height: calc(var(--u) * 12); object-fit: contain; }
.brand-name { font-size: calc(var(--u) * 6); font-weight: bold; }
.brand-sub { font-size: calc(var(--u) * 3.4); opacity: 0.85; margin-top: calc(var(--u) * 0.8); }
.brand-actions { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2); }
.brand-card .ad-tag { position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); }
.brand-board { margin-top: calc(var(--u) * 2); padding: 0; list-style: none; }
.brand-board .board-tabs-li { background: none; padding: 0; }


/* ---------- Audience numbers (see stats.js) ---------- */
.audience { width: 100%; max-width: calc(var(--u) * 80); margin: 0; }
.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 24), 1fr)); gap: calc(var(--u) * 1.6); }
.aud-cell { background: rgba(255, 255, 255, 0.08); border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 1); display: flex; flex-direction: column; align-items: center; }
.aud-num { font-size: calc(var(--u) * 6); line-height: 1.1; }
.aud-label { font-size: calc(var(--u) * 2.9); opacity: 0.8; }
.aud-live .aud-num { color: #7dff9b; }
.aud-live .aud-label::before { content: "\25CF  "; color: #7dff9b; }


/* ---------- Bug pictures (see game.js: targetVisual) ---------- */
/* A bug drawn as a picture (used when the device cannot draw its emoji) is the same size as an emoji. */
.bug img.emoji.bug-img, .bug .bug-img { width: calc(var(--u) * 14); height: calc(var(--u) * 14); object-fit: contain; display: block; }
/* If there is neither an emoji nor a picture, the bug's name is shown instead. */
.bug .bug-label { font-size: calc(var(--u) * 5); font-weight: bold; background: rgba(255, 255, 255, 0.85); color: #222; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1) calc(var(--u) * 2); }
.target-btn .target-pic { display: inline-block; vertical-align: middle; }
.target-btn img.target-pic { width: 1.3em; height: 1.3em; object-fit: contain; }


/* ---------- Top players (see top.js) ---------- */
.top-today { margin: 0; font-size: calc(var(--u) * 4); color: #ffd54a; font-weight: bold; }
#top-list { width: 100%; max-width: calc(var(--u) * 85); margin: 0; padding: 0; list-style: none; font-size: calc(var(--u) * 4.3); text-align: left; }
#top-list li { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 1.2) calc(var(--u) * 2.7); border-radius: calc(var(--u) * 1.6); }
#top-list li.current { background: #ffd54a; color: #0b3d2e; font-weight: bold; }
#top-list li.champion { background: rgba(255, 213, 74, 0.18); font-size: calc(var(--u) * 5); }
#top-list li.champion.current { background: #ffd54a; }
#top-list .top-medal { display: inline-block; min-width: calc(var(--u) * 7); }
#top-list .top-right { display: flex; flex-direction: column; align-items: flex-end; }
#top-list .top-board { opacity: 0.65; font-size: calc(var(--u) * 3); }


/* =====================================================
   DESKTOP LAYOUT (wide screens, 900px and up)
   The play area keeps its fixed 9:16 shape (so the game is identical and fair on every device) and is scaled up to fill
   the window's height, to a sensible maximum. Because every size is in "u" units, items, text, the HUD and the pause
   button all grow with it. NOTHING about speed, spawning or scoring depends on these sizes: the game's movement is
   measured in fractions of the play area and driven by time, so only the drawing is bigger.
   ===================================================== */
@media (min-width: 900px) {
  :root { --w: min(100vw, calc(100dvh * 9 / 16), 1000px); }          /* the maximum: 1000px wide */
  body { display: flex; align-items: center; justify-content: center; }
  #game {
    height: calc(var(--w) * 16 / 9);        /* always exactly 9:16 (also when the maximum is reached) */
    max-height: 100dvh;
    flex: none;
  }

  /* A larger, clearer HUD: time, score, streak and the pause button. */
  #top-bar { font-size: calc(var(--u) * 5.6); padding-top: calc(var(--u) * 3.6); padding-bottom: calc(var(--u) * 3.6); background: rgba(0, 0, 0, 0.5); }
  .stat span { font-size: calc(var(--u) * 7.4); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
  #pause-btn { min-width: calc(var(--u) * 17); min-height: calc(var(--u) * 13); font-size: calc(var(--u) * 5.6); background: rgba(255, 255, 255, 0.22); border: 2px solid rgba(255, 255, 255, 0.55); }
  #pause-btn:hover { background: rgba(255, 255, 255, 0.34); }
  #streak-label { font-size: calc(var(--u) * 3.8); opacity: 0.95; }
  #streak { font-size: calc(var(--u) * 15); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
}

/* The side panels: only when there is real room on each side (a wide window), never on phones. */
.side { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    top: 0;
    bottom: 0;
    width: calc((100vw - var(--w)) / 2);       /* exactly the free space beside the play area */
    padding: 24px clamp(16px, 2vw, 36px);
    overflow: hidden;
    justify-content: center;
    font-size: 16px;
    z-index: 1;
  }
  #side-left  { left: 0; }
  #side-right { right: 0; }
  .side-card {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 213, 74, 0.35);
    border-radius: 14px;
  }
  .side-card h2 { margin: 0 0 10px; font-size: 20px; color: #ffd54a; }
  .side-card p { margin: 6px 0; line-height: 1.4; }
  .side-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
  .side-tab { flex: 1; padding: 6px 4px; font: inherit; font-size: 14px; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 213, 74, 0.4); border-radius: 8px; cursor: pointer; }
  .side-tab.selected { color: #0b3d2e; background: #ffd54a; font-weight: bold; }
  #side-top-list { list-style: none; margin: 0; padding: 0; }
  #side-top-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
  #side-top-list li.current { background: #ffd54a; color: #0b3d2e; font-weight: bold; }
  #side-top-list li.champion { background: rgba(255, 213, 74, 0.16); font-size: 17px; }
  #side-top-list li.champion.current { background: #ffd54a; }
  #side-top-list .side-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #side-top-list .side-medal { display: inline-block; min-width: 26px; }
  #side-top-list .side-score { display: flex; flex-direction: column; align-items: flex-end; }
  #side-top-list .side-score small { opacity: 0.65; font-size: 12px; }
  #side-top-list .side-note { opacity: 0.7; justify-content: center; }
  .side-sign { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
               border: 2px dashed rgba(255, 213, 74, 0.55); background: rgba(255, 213, 74, 0.05); }
  .side-sign small { opacity: 0.75; }
  .side-sign a { color: #ffd54a; }
  #side-stats { margin: 0; }
  #side-stats .aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #side-stats .aud-cell { background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; }
  #side-stats .aud-num { font-size: 24px; }
  #side-stats .aud-label { font-size: 12px; opacity: 0.8; text-align: center; }
  #side-stats .aud-live .aud-num { color: #7dff9b; }
}

/* =====================================================
   MY ACCOUNT screen (myacct.js): a stack of simple cards
   ===================================================== */
.ma-card { width: 100%; max-width: calc(var(--u) * 90); padding: calc(var(--u) * 3); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 213, 74, 0.3); border-radius: calc(var(--u) * 3); text-align: left; }
.ma-card h2 { margin-top: 0; }
.ma-card .text-input { width: 100%; box-sizing: border-box; }
.ma-warn { border-color: #ff8a8a; background: rgba(255, 90, 90, 0.12); }
.ma-warn ul { margin: 0; padding-left: 1.2em; }
.ma-list { list-style: none; margin: 0; padding: 0; font-size: 0.85em; }
.ma-list li { display: flex; gap: calc(var(--u) * 2); align-items: baseline; padding: calc(var(--u) * 0.8) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ma-list .ma-what { flex: 1; }
.ma-list .plus { color: #7dff9b; }
.ma-list .minus { color: #ff8a8a; }
.ma-list .ma-when { opacity: 0.6; }
.ma-empty { opacity: 0.7; }
.ma-table { width: 100%; border-collapse: collapse; font-size: 0.85em; text-align: center; }
.ma-table th, .ma-table td { padding: calc(var(--u) * 1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ma-table th { color: #ffd54a; font-weight: normal; }
.ma-check { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1) 0; }
.ma-check input { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.ma-card textarea.text-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }

/* =====================================================
   SPONSORED ROOM PREVIEW (preview.js): banner, TEST PREVIEW label. Only drawn on the lobby and results screens,
   never over the tap area while a round is being played.
   ===================================================== */
.preview-banner { width: 100%; max-width: calc(var(--u) * 88); border: 2px solid #ffd54a; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 3); background: rgba(0, 0, 0, 0.35); text-align: left; box-sizing: border-box; }
.preview-banner-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * 1); }
.preview-banner-body { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.preview-banner-emoji { font-size: calc(var(--u) * 10); line-height: 1; }
.preview-banner-name { font-size: calc(var(--u) * 6); font-weight: bold; }
.preview-banner-tag { font-size: calc(var(--u) * 3.8); opacity: 0.9; }
.test-badge { background: #e63946; color: #fff; font-weight: bold; font-size: calc(var(--u) * 3); padding: calc(var(--u) * 0.6) calc(var(--u) * 2); border-radius: 999px; letter-spacing: 0.08em; }
.preview-lobby { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.preview-error { z-index: 40; }
.board-note { list-style: none; opacity: 0.8; font-size: calc(var(--u) * 3.4); }
.brand-board li { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 0.8) calc(var(--u) * 2); }
.brand-board { width: 100%; max-width: calc(var(--u) * 80); }

/* Advertising is hidden until the owner opens it in the admin dashboard (myacct.js switches this class off when the server says ads are open). */
.ads-off .ads-ui { display: none !important; }

/* =====================================================
   BROADCASTS (broadcast.js)
   ===================================================== */
.bc-compose { width: 100%; max-width: calc(var(--u) * 88); }
.bc-compose textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.bc-row { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 3); }
.bc-list { width: 100%; max-width: calc(var(--u) * 88); display: flex; flex-direction: column; gap: calc(var(--u) * 2); text-align: left; }
.bc-post { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 213, 74, 0.25); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); }
.bc-post.mine { border-color: #ffd54a; }
.bc-head small { opacity: 0.7; }
.bc-body { margin: calc(var(--u) * 1) 0; overflow-wrap: anywhere; font-size: calc(var(--u) * 4.4); }
.bc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 1.5); }
.bc-react { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid transparent; border-radius: 999px; padding: calc(var(--u) * 0.8) calc(var(--u) * 2); font: inherit; font-size: calc(var(--u) * 4); cursor: pointer; }
.bc-react.on { border-color: #ffd54a; background: rgba(255, 213, 74, 0.25); }
.bc-react small { font-size: calc(var(--u) * 3.2); min-width: 0.6em; }
.bc-tools { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
.bc-select { width: auto; min-height: calc(var(--u) * 8); font-size: calc(var(--u) * 3.4); }

/* PLAYER CARD (playercard.js) */
.card-body { width: 100%; max-width: calc(var(--u) * 80); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.5); }
.card-name { margin: 0; font-size: calc(var(--u) * 9); }
.card-stats { width: 100%; background: rgba(255, 255, 255, 0.07); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 3); text-align: left; }
.card-row { display: flex; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 1) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.card-row:last-child { border-bottom: 0; }
.card-actions { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1); width: 100%; }
.card-more { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); flex-wrap: wrap; }
.bc-who { font-weight: bold; font-size: inherit; text-decoration: underline; }
#card-screen { background: #05140f; z-index: 20; }   /* solid, so the screen behind it does not show through */
.overlay .card-body .card-name { font-size: calc(var(--u) * 9); color: #ffd54a; }

/* SMASH: bought items that work by themselves are shown, and the Long Tennis Bat swing is visible */
.mini-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.2) calc(var(--u) * 2); background: rgba(0, 0, 0, 0.35); }
.perk-chip { font-size: calc(var(--u) * 3.4); background: rgba(255, 213, 74, 0.2); border: 1px solid rgba(255, 213, 74, 0.6); border-radius: 999px; padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4); }
.bat-ring { position: absolute; z-index: 5; border: calc(var(--u) * 0.8) solid rgba(255, 213, 74, 0.9); border-radius: 50%; background: rgba(255, 213, 74, 0.15); pointer-events: none; animation: bat-swing 0.45s ease-out forwards; }
@keyframes bat-swing { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.bat-text { position: absolute; z-index: 6; transform: translate(-50%, -50%); font-weight: bold; font-size: calc(var(--u) * 7); color: #ffd54a; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); pointer-events: none; animation: bat-text 0.8s ease-out forwards; }
@keyframes bat-text { from { opacity: 1; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 0; transform: translate(-50%, -140%) scale(1.2); } }
.shop-how { color: #7dff9b; }

/* Music: the little button on the menu */
.music-btn { width: calc(var(--u) * 10); height: calc(var(--u) * 10); flex: none; border-radius: 50%; border: 1px solid rgba(255, 213, 74, 0.5); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: calc(var(--u) * 5); line-height: 1; cursor: pointer; padding: 0; }
.music-btn.off { opacity: 0.6; }

.music-name { font-size: calc(var(--u) * 3.4); background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 213, 74, 0.5); border-radius: 999px; padding: calc(var(--u) * 0.8) calc(var(--u) * 3); margin-right: auto; }

/* Password screens sit above everything else */
#forgot-screen, #reset-screen { z-index: 30; background: #05140f; }

/* The music buttons: a row at the top of the menu, aligned to the right, above the title */
.menu-tools { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 2); min-height: calc(var(--u) * 10); }
/* A solid menu background, so the game's own score bar does not show faintly behind the title */
#start-screen { background: #040f0b; }

/* ---------- Places and polls (places.js) ---------- */
.pl-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 2); width: 100%; max-width: calc(var(--u) * 88); }
.pl-pick .text-input { width: auto; flex: 1 1 calc(var(--u) * 30); }
.pl-period { padding: calc(var(--u) * 1.5) calc(var(--u) * 4); color: #fff; background: none; border: 2px solid #ffd54a; border-radius: 999px; font: inherit; font-size: calc(var(--u) * 4); cursor: pointer; }
.pl-period.on { background: #ffd54a; color: #3b2300; font-weight: bold; }
.pl-box { width: 100%; max-width: calc(var(--u) * 88); text-align: left; }
.pl-box h2 { text-align: center; }
.pl-row { display: flex; gap: calc(var(--u) * 2); align-items: center; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); margin-top: calc(var(--u) * 1); background: rgba(255, 255, 255, 0.07); border-radius: calc(var(--u) * 3); font-size: calc(var(--u) * 4.4); }
.pl-row.mine { border: 1px solid #ffd54a; }
.pl-rank { min-width: 2.4em; opacity: 0.8; }
.pl-name { flex: 1; overflow-wrap: anywhere; }
.poll-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 213, 74, 0.25); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 3); }
.poll-scope { opacity: 0.7; font-size: calc(var(--u) * 3.4); }
.poll-q { margin: calc(var(--u) * 1) 0 calc(var(--u) * 2); font-weight: bold; overflow-wrap: anywhere; }
.poll-opt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 2); width: 100%; margin-bottom: calc(var(--u) * 1.5); padding: calc(var(--u) * 2.2) calc(var(--u) * 3); overflow: hidden; color: #fff; text-align: left; background: rgba(255, 255, 255, 0.08); border: 2px solid transparent; border-radius: calc(var(--u) * 2.5); font: inherit; font-size: calc(var(--u) * 4.4); cursor: pointer; }
.poll-opt.on { border-color: #ffd54a; }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(255, 213, 74, 0.22); }
.poll-label, .poll-pct { position: relative; }
.poll-total { margin-left: auto; opacity: 0.7; }
.pl-pick .text-input { font-size: calc(var(--u) * 4.2); min-height: 0; padding: calc(var(--u) * 2) calc(var(--u) * 2.5); }
.pl-sponsor { width: 100%; max-width: calc(var(--u) * 88); display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); border: 2px solid #ffd54a; border-radius: calc(var(--u) * 3); }
.pl-sponsor small { opacity: 0.7; font-size: calc(var(--u) * 3.2); }
.pl-sponsor span { font-size: calc(var(--u) * 4); opacity: 0.9; }
#pl-input { font-size: calc(var(--u) * 4); }

/* ---------- Share (share.js) ---------- */
.share-btn { display: block; box-sizing: border-box; width: 100%; max-width: calc(var(--u) * 80); text-align: center; text-decoration: none; }
.share-preview { max-width: calc(var(--u) * 80); overflow-wrap: anywhere; opacity: 0.85; font-size: calc(var(--u) * 4); }
#share-screen { z-index: 40; }