/* Layout: one portrait "phone" frame centred on the page. Everything inside it is
   designed at 360 x 640 and scaled up or down by app.js to fit the screen. */
:root {
  --page: #241B33;
  --frame: #3B2F4A;
  --ink: #3B2F4A;
  --cream: #FFF8F1;
  --sky: #CFE3F6;
  --muted: #C9BEDB;
  --pink: #FF7FAF;
  --deep-pink: #D4537E;
  --carrot: #F28C28;
  --lilac: #E3DCEB;
  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; }
/* no blue flash or text selection when tapping and holding to play */
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
canvas { touch-action: none; outline: none; }
[hidden] { display: none !important; }
body {
  background: var(--page);
  color: var(--cream);
  font-family: var(--display);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: 16px;
  padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button { font-family: var(--display); cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

#stage {
  position: relative;
  width: min(100%, calc((100dvh - 72px) * 0.5625));
  aspect-ratio: 9 / 16;
  min-width: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--sky);
  box-shadow: 0 0 0 4px var(--frame), 0 18px 40px rgba(0,0,0,.45);
  touch-action: manipulation;
}
#layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 640px;
  transform-origin: 0 0;
}

/* Phones: fill the whole screen, no frame. app.js makes #layer as tall as the phone
   and the home screen stretches the cottage scene to use the extra height. */
@media (max-width: 700px), (pointer: coarse) and (orientation: portrait) {
  body { padding: 0; gap: 0; }
  #stage {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    background: #8F604A;
  }
  .hint { display: none; }
}
.screen { position: absolute; inset: 0; }
.hint { font-size: 14px; color: var(--muted); }

/* ---------- Home screen ---------- */
#hub { display: flex; flex-direction: column; color: var(--ink); }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
}
.topbar h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .01em; }
.pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  padding: 1px 12px 1px 4px;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.coin { width: 22px; height: 22px; flex: none; }
.round-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
.round-btn svg { width: 22px; height: 22px; }
.gift.ready { background: var(--pink); animation: wiggle 1.6s ease-in-out infinite; }
.gift.ready::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E24B4A;
  border: 2px solid var(--cream);
}
@keyframes wiggle {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(-14deg); }
  84% { transform: rotate(12deg); }
  92% { transform: rotate(-6deg); }
}

.hero { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
#heroCanvas { display: block; }
.hero-name {
  margin-top: -6px;
  background: var(--carrot);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 3px 0 #A9560E;
}

.friends {
  display: flex;
  justify-content: safe center;
  gap: 10px;
  padding: 14px 16px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.friends::-webkit-scrollbar { display: none; }
.friend { flex: none; }
.friend {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 2.5px solid var(--ink);
  background: var(--cream);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.friend canvas { display: block; }
.friend[aria-checked="true"] { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink); }
.friend.locked {
  background: var(--lilac);
  border: 2.5px dashed #8E80A3;
  color: #5F5470;
  flex-direction: column;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  gap: 1px;
}
.friend.locked svg { width: 18px; height: 18px; }

.sheet {
  flex: 1;
  background: var(--cream);
  border-radius: 26px 26px 0 0;
  border-top: 2.5px solid var(--ink);
  padding: 18px 18px 0;
  display: flex;
  flex-direction: column;
}
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; }
.game {
  position: relative;
  width: 90px;
  height: 90px;
  padding: 0;
  border: 0;
  background: none;
  transition: transform .12s;
}
.game:active { transform: scale(.93); }
.game > svg { width: 100%; height: 100%; display: block; }
.game .soon {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game .soon svg { width: 14px; height: 14px; }
.game.more {
  border-radius: 22px;
  border: 2.5px dashed #8E80A3;
  color: #5F5470;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  cursor: default;
}
.game.more svg { width: 24px; height: 24px; }

.nav {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  border-top: 2px solid var(--lilac);
  padding: 6px 0 10px;
}
.nav button {
  border: 0;
  background: none;
  color: #5F5470;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 4px;
}
.nav button svg { width: 24px; height: 24px; }
.nav button.active { color: var(--deep-pink); font-weight: 800; }

/* ---------- New home screen (Aiman's design) ----------
   Positions are the design's own spots scaled to 360 x 640. */
.home {
  display: block;
  color: #6E4A3A;
  background:
    repeating-linear-gradient(180deg, transparent 0 38px, rgba(70, 40, 25, .25) 38px 40px),
    linear-gradient(180deg, #A9785D, #8F604A);
}
.home .scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  /* the cottage takes the top 60% (Aiman's red line); the games scroll below it */
  height: 60%;
  min-height: 340px;
  background: url(img/ui/scene-wall.webp) center bottom / cover no-repeat;
  overflow: hidden;
}
/* the magic tree from Aiman's home design stands on the ledge, with the chosen animal beside it
   (placed from the bottom, so it stays on the ledge when the scene grows taller on phones) */
.scene-tree {
  position: absolute;
  left: 30px;
  bottom: 34px;
  width: 291px;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(80, 45, 30, .25));
}
/* only the chosen girl and the chosen animal sit on the ledge */
.scene-girl {
  position: absolute;
  left: 50%;
  bottom: 16px;
  height: calc(100% - 92px);
  transform: translateX(-78%);
  filter: drop-shadow(0 4px 4px rgba(80, 45, 30, .35));
}
.scene-pet {
  position: absolute;
  left: 56%;
  bottom: 30px;
  height: 22%;
  max-height: 110px;
  filter: drop-shadow(0 3px 3px rgba(80, 45, 30, .35));
  transform-origin: 50% 100%;
  animation: pet-bob 2.6s ease-in-out infinite;
}
@keyframes pet-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-3px) scale(1.02, .98); }
}
.ledge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  border-top: 3px solid #C99A78;
  background:
    radial-gradient(circle at 6% 0, #FFF 0 4px, #FFC2D6 4px 5px, transparent 5.5px),
    radial-gradient(circle at 31% 0, #FFF 0 3.5px, transparent 4px),
    radial-gradient(circle at 74% 0, #FFF 0 4px, #FFC2D6 4px 5px, transparent 5.5px),
    radial-gradient(circle at 95% 0, #FFF 0 3.5px, transparent 4px),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(70, 40, 25, .25) 88px 90px),
    linear-gradient(180deg, #B98463, #93644A);
  box-shadow: 0 -2px 5px rgba(60, 35, 20, .3);
}
.home .avatar {
  position: absolute;
  left: 16px;
  top: 10px;
  width: 43px;
  height: 43px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #FFF6EC;
  overflow: hidden;
  background: #FBEFE3;
  box-shadow: 0 2px 5px rgba(90, 50, 30, .35);
}
.home .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.35); transform-origin: 50% 30%; display: block; }
.home .avatar.guy img { object-position: 50% 0; transform: scale(1.9); transform-origin: 50% 8%; }
.home .pill {
  position: absolute;
  top: 18px;
  width: 70px;
  height: 22px;
  border: 0;
  border-radius: 12px;
  background: #FBEFE3;
  box-shadow: 0 2px 4px rgba(90, 50, 30, .3);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px 0 3px;
  font-size: 13px;
  font-weight: 800;
  color: #6E4A3A;
}
.home .pill:nth-of-type(1) { left: 64px; }
.home .pill:nth-of-type(2) { left: 142px; }
.home .pill img { width: 19px; height: 19px; border-radius: 50%; }
.home .pill b { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.home .plus {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #F1D8C3;
  color: #8B5E4A;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.home .icon-btn {
  position: absolute;
  top: 16px;
  width: 30px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  overflow: visible;
  background: none;
  box-shadow: 0 2px 4px rgba(90, 50, 30, .3);
}
.home .icon-btn img { width: 100%; height: 100%; border-radius: 9px; display: block; }
.home #giftBtn { left: 244px; }
.home #mailBtn { left: 281px; }
.home #settingsBtn { left: 318px; }
.home .gift.ready { background: none; }
/* unread mail: the same red dot as the daily gift */
.home #mailBtn.has-mail::after { content: ''; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #E24B4A; border: 2px solid var(--cream); box-shadow: 0 2px 4px rgba(90, 50, 30, .3); }
.home #mailBtn.has-mail { animation: wiggle 1.6s ease-in-out infinite; }

.home .games {
  position: absolute;
  left: 0;
  right: 0;
  top: max(60%, 340px);
  bottom: 62px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 8px 18px 12px;
  align-content: start;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 74px;
  gap: 4px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3px 3px 0;
  border: 2px solid #FFF7EE;
  border-radius: 10px;
  background: #FDEFE2;
  box-shadow: 0 2px 0 rgba(110, 70, 50, .4);
  font-family: var(--display);
  transition: transform .1s;
}
.tile:active { transform: scale(.96); }
.tile img { width: 100%; height: 50px; object-fit: cover; border-radius: 7px; display: block; }
.tile span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: #6E4A3A;
  white-space: nowrap;
}
.home .games::-webkit-scrollbar { display: none; }
.soon-tag {
  position: absolute;
  top: 5px;
  right: 5px;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  color: #8B3F4F;
  background: #FCCBC4;
  border-radius: 6px;
  padding: 0 4px;
}

.home .nav {
  position: absolute;
  left: 15px;
  bottom: 11px;
  width: 331px;
  height: 46px;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 16px;
  background: #FBEEDE;
  box-shadow: 0 3px 6px rgba(80, 45, 30, .35);
  display: flex;
  gap: 2px;
}
.home .nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  color: #6E4A3A;
}
.home .nav button img { height: 22px; display: block; }
.home .nav button.active { background: #FCCBC4; color: #6E4A3A; font-weight: 800; }

/* ---------- Playing a game ---------- */
/* games are drawn in a 360 x 640 world, centred on taller phones */
#play, #aquarium { background: linear-gradient(180deg, #A9785D, #8F604A); }
#gameCanvas, #aquariumCanvas { position: absolute; left: 0; top: 50%; display: block; width: 360px; height: 640px; transform: translateY(-50%); cursor: pointer; }
.back { position: absolute; top: 14px; left: 14px; }

/* ---------- Cards that pop up over the screen ---------- */
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.panel.dim { background: rgba(36, 27, 51, .55); pointer-events: auto; }
.card {
  pointer-events: auto;
  background: rgba(36, 27, 51, .9);
  color: var(--cream);
  border: 3px solid var(--cream);
  border-radius: 20px;
  padding: 18px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 220px;
  animation: pop .25s ease-out;
}
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.card h2 { margin: 0; font-size: 30px; line-height: 1; }
.row { display: flex; gap: 28px; font-variant-numeric: tabular-nums; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat span { font-size: 13px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.stat b { font-size: 34px; line-height: 1.1; }
.badge { font-size: 15px; color: var(--pink); min-height: 20px; }
.earned { display: flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 800; color: #F7C548; }
.earned.big { font-size: 28px; }
.earned.big .coin { width: 30px; height: 30px; }
.pause-note { margin: 0 0 4px; font-size: 15px; color: var(--muted); }
/* ---------- ID card (like Aiman's pink ID-card picture) ---------- */
.id-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pop .25s ease-out; }
.id-card {
  position: relative;
  width: 330px;
  height: 214px;
  border: 2px solid #4A4048;
  border-radius: 14px;
  background: linear-gradient(#F6CAD6 0 66%, #F6F2F4 66%);
  color: #6E4A5A;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.id-top { position: absolute; left: 12px; top: 10px; right: 12px; height: 44px; }
.id-logo { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border: 2px solid #4A4048; border-radius: 6px; background: #FFFDFB; display: grid; place-items: center; }
.id-logo img { width: 38px; height: 38px; object-fit: contain; }
.id-tag { position: absolute; left: 52px; top: 6px; padding: 0 12px; border: 2px solid #4A4048; border-radius: 11px; background: #FFFDFB; color: #D4537E; font-size: 13px; font-weight: 700; font-style: italic; letter-spacing: .05em; }
.id-number { position: absolute; right: 2px; top: 2px; max-width: 150px; padding: 1px 10px; border: 2px solid #4A4048; border-radius: 11px; background: #FFFDFB; color: #6E4A5A; font: 800 11.5px var(--display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* stars, hearts and friends: little pills with the real numbers */
.id-dots { position: absolute; left: 60px; top: 40px; display: flex; gap: 4px; }
.id-dots span { height: 22px; padding: 0 6px 0 3px; border: 2px solid #4A4048; border-radius: 12px; background: #FFFDFB; display: flex; align-items: center; gap: 2px; }
.id-dots img { width: 14px; height: 14px; }
.id-dots b { font-size: 11px; color: #6E4A5A; }
.id-line { position: absolute; left: 16px; width: 180px; display: flex; align-items: baseline; gap: 4px; font-size: 13px; font-weight: 700; font-style: italic; color: #4A4048; }
.id-line span { text-decoration: underline; flex: none; }
.id-line.small { font-size: 10.5px; }
.id-line:nth-of-type(1) { top: 70px; }
.id-line:nth-of-type(2) { top: 94px; }
.id-line:nth-of-type(3) { top: 114px; }
.id-line input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 2px dashed #4A4048;
  background: transparent;
  font: inherit;
  font-style: normal;
  font-size: 13px;
  color: #6E4A5A;
  padding: 0 2px;
  outline: none;
}
.id-line input::placeholder { color: rgba(110, 74, 90, .45); }
.id-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 73px; border-top: 2px solid #4A4048; }
.id-qr { position: absolute; left: 14px; top: 5px; width: 62px; height: 62px; border-radius: 6px; image-rendering: pixelated; }
.id-scan { position: absolute; left: 82px; top: 20px; font-size: 11px; line-height: 1.15; font-weight: 700; color: #9B7B8A; }
.id-more { position: absolute; left: 150px; top: 14px; width: 30px; height: 40px; border: 0; border-radius: 10px; background: none; color: #D4537E; font: 800 26px/1 var(--display); cursor: pointer; }
.id-more:active { background: #FCE4EA; }
.id-photo {
  position: absolute;
  right: 14px;
  top: 52px;
  width: 104px;
  height: 140px;
  border: 2px solid #4A4048;
  background: #FFFDFB;
  overflow: hidden;
}
.id-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.id-photo img.guy { object-position: 50% 0; transform: scale(1.5); transform-origin: 50% 0; }
.id-photo .c { position: absolute; width: 16px; height: 16px; border: 2px dashed #4A4048; z-index: 1; }
.id-photo .c.tl { left: 3px; top: 3px; border-right: 0; border-bottom: 0; }
.id-photo .c.br { right: 3px; bottom: 3px; border-left: 0; border-top: 0; }
/* settings: two little switches */
.settings-card { gap: 10px; min-width: 240px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 17px; font-weight: 700; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { position: relative; width: 46px; height: 26px; border-radius: 13px; background: #8E80A3; transition: background .2s; }
.switch-row i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFF8F1; transition: transform .2s; }
.switch-row input:checked + i { background: var(--pink); }
.switch-row input:checked + i::after { transform: translateX(20px); }
/* ---------- Dress Up (Aiman's Pastel Kawaii Dress-Up Room) ---------- */
/* the dressed doll's picture is wider than a girl's; this keeps her standing in the same spot */
.home .scene-girl.dressed { transform: translateX(-69.2%); }
.dressup { background: linear-gradient(#F8E6E0, #EFD7CC); color: #6E4A3A; }
.dress-top { position: absolute; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.dress-back { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: none; }
.dress-back img { width: 100%; height: 100%; display: block; }
.dress-name { flex: 1; text-align: center; padding: 5px 10px; border: 2px solid #E7C3BC; border-radius: 16px; background: #FFF6EA; font-size: 14px; color: #D2607A; }
.dress-name b { color: #6E4A3A; }
.dress-stars { display: flex; align-items: center; gap: 3px; padding: 4px 10px; border: 2px solid #E7C3BC; border-radius: 16px; background: #FFF6EA; font-size: 14px; }
.dress-stars img { width: 18px; height: 18px; }
.dress-side { position: absolute; left: 4px; top: 58px; width: 48px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.dress-side button { padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: none; box-shadow: 0 2px 4px rgba(110, 74, 58, .25); }
.dress-side button img { width: 48px; height: 52px; object-fit: cover; display: block; }
.dress-side button.on { box-shadow: 0 0 0 2.5px #FF9FB2, 0 0 8px rgba(255, 159, 178, .9); }
.dress-stage { position: absolute; left: 56px; top: 56px; width: 162px; bottom: 74px; border-radius: 16px; overflow: hidden; background: #F3E2D4 center 15% / auto 190% no-repeat; box-shadow: inset 0 0 0 2px #E7C3BC; }
.dress-stage.bg-cottage { background-size: cover; background-position: center bottom; }
.dress-rug { position: absolute; left: 6%; right: 6%; bottom: 10px; height: 34px; border-radius: 50%; background: radial-gradient(#FBD7DF, #F4BFCB); box-shadow: 0 0 0 3px #FCE4EA; }
#dressDoll { position: absolute; inset: 6px 0 16px; display: flex; justify-content: center; align-items: flex-end; }
.dress-doll { width: 100%; height: auto; max-height: 100%; filter: drop-shadow(0 4px 4px rgba(80, 45, 30, .3)); }
.dress-panel { position: absolute; right: 4px; top: 56px; width: 134px; bottom: 74px; border: 2px solid #E7C3BC; border-radius: 16px; background: #FFF6EA; display: flex; flex-direction: column; overflow: hidden; }
.dress-panel h3 { margin: 6px 0 2px; text-align: center; font-size: 15px; color: #D2607A; }
.dress-items { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; align-content: start; gap: 5px; padding: 4px 6px 8px; scrollbar-width: none; }
.dress-items::-webkit-scrollbar { display: none; }
.dress-items.list { grid-template-columns: 1fr 1fr; }
.dress-items h4 { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; color: #9B7B6A; }
.dress-item { position: relative; padding: 4px 2px 3px; border: 2px solid #F0DDD3; border-radius: 12px; background: #FFFCF8; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #6E4A3A; font: 700 9.5px/1.15 var(--display); }
.dress-item > img { width: 100%; height: 54px; object-fit: contain; }
.dress-item .swatch { width: 30px; height: 30px; border-radius: 50%; margin: 3px 0 1px; box-shadow: inset 0 0 0 1.5px rgba(110, 74, 58, .25); }
.dress-item.on { border-color: #FF9FB2; box-shadow: 0 0 6px rgba(255, 159, 178, .8); background: #FFF0F3; }
.dress-item.locked > img, .dress-item.locked .swatch { opacity: .55; filter: saturate(.6); }
.dress-item em { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; gap: 1px; padding: 0 4px; border-radius: 8px; background: #FFF6EA; box-shadow: 0 0 0 1.5px #E7C3BC; font-style: normal; font-size: 9px; }
.dress-item em img { width: 10px; height: 10px; }
.dress-note { grid-column: 1 / -1; margin: 18px 6px; text-align: center; font-size: 12px; color: #9B7B6A; }
.dress-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.dress-reset { padding: 8px 12px; border: 2px solid #E7C3BC; border-radius: 16px; background: #FFF6EA; color: #6E4A3A; font: 700 13px var(--display); }
.dress-done { padding: 0; border: 0; background: none; width: 150px; height: 62px; border-radius: 30px; overflow: hidden; }
.dress-done img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- picking a username ---------- */
.un-card { max-width: 290px; }
.un-note { margin: 0; font-size: 13px; color: var(--muted); }
.un-box { display: flex; align-items: center; width: 100%; padding: 0 12px; border: 3px solid var(--cream); border-radius: 14px; background: #FFF8F1; color: #6E4A3A; font: 800 20px var(--display); }
.un-box input { flex: 1; min-width: 0; border: 0; background: none; padding: 9px 4px; font: inherit; color: inherit; outline: none; }
.un-status { margin: 0; min-height: 18px; font-size: 13px; color: var(--muted); }
.un-status.good { color: #9FE3A4; }
.un-status.bad { color: #FFB3C1; }
.btn:disabled { opacity: .5; }

/* ---------- share menu ---------- */
.share-card { max-width: 300px; gap: 8px; }
.share-main { width: 100%; padding: 10px; border: 0; border-radius: 16px; background: var(--pink); color: #fff; font: 800 18px var(--display); display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.share-main small { font-size: 11px; font-weight: 700; opacity: .9; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.sh { display: flex; align-items: center; justify-content: center; padding: 9px 4px; border: 0; border-radius: 12px; background: #FFF8F1; color: #6E4A3A; font: 800 14px var(--display); text-decoration: none; cursor: pointer; }
.sh.wa { background: #DDF5E3; color: #1F7A3A; }
.sh.fb { background: #DFE8FB; color: #2D4F9E; }
.sh.x { background: #E9E6EE; color: #2B2730; }
.sh.tg { background: #DDF0FA; color: #1D6F9C; }
.share-link { margin: 0; font-size: 11px; color: var(--muted); word-break: break-all; }

/* ---------- Friends page (Aiman's Friends design) ---------- */
.home .nav button.has-dot { position: relative; }
.home .nav button.has-dot::after { content: ""; position: absolute; top: 4px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: #F2607D; box-shadow: 0 0 0 2px #FFF6EA; }
.friends-page { display: flex; flex-direction: column; background: linear-gradient(#FBDDE4, #F8D3DD); color: #5C3B2A; }
.fr-head { position: relative; flex: none; height: 56px; display: flex; align-items: center; justify-content: center; }
.fr-head h2 { margin: 0; font-size: 26px; font-weight: 800; color: #5C3B2A; }
.fr-back { position: absolute; left: 10px; top: 9px; width: 40px; height: 40px; border: 3px solid #E7B9C3; border-radius: 50%; background: #FFF8F3; color: #6E4A3A; display: grid; place-items: center; cursor: pointer; }
.fr-back svg { width: 22px; height: 22px; }
.fr-tools { flex: none; display: flex; gap: 6px; padding: 0 10px 8px; }
.fr-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 10px; border: 2px solid #E7B9C3; border-radius: 18px; background: #FFF8F3; color: #B9939A; }
.fr-search svg { width: 16px; height: 16px; flex: none; }
.fr-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; font: 700 12.5px var(--display); color: #5C3B2A; outline: none; }
.fr-invite { flex: none; padding: 0 12px; border: 0; border-radius: 18px; background: linear-gradient(#F48AA4, #E86A8C); color: #fff; font: 800 13px var(--display); box-shadow: 0 3px 0 #C9506F; cursor: pointer; }
.fr-list { flex: 1; overflow-y: auto; padding: 2px 10px 16px; scrollbar-width: none; }
.fr-list::-webkit-scrollbar { display: none; }
.fr-title { margin: 10px 4px 4px; font-size: 13px; font-weight: 800; color: #B05A75; }
.fr-empty { margin: 6px 6px; font-size: 12.5px; color: #9B7B8A; text-align: center; }
.fr-row { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 7px; padding: 8px 7px; border: 2px dashed #EBC1CB; border-radius: 18px; background: #FFF6F4; box-shadow: 0 2px 0 rgba(176, 90, 117, .12); }
.fr-row.mine { margin-top: 10px; border-style: solid; border-color: #F0A9BB; background: #FFF0F2; padding-top: 14px; }
.fr-my { position: absolute; left: 10px; top: -9px; padding: 1px 9px; border-radius: 9px; background: #F07A98; color: #fff; font-size: 10px; font-weight: 800; }
.fr-qr { flex: none; width: 54px; height: 54px; border-radius: 8px; border: 2px solid #F2D6DC; image-rendering: pixelated; }
.fr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fr-name b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-ava { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: contain; background: #FCE7EC; border: 1.5px solid #EBC1CB; }
.fr-id { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: #6E4A5A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-id i { font-style: normal; padding: 0 5px; border-radius: 7px; background: #F48AA4; color: #fff; font-size: 9.5px; }
.fr-stats { display: flex; gap: 4px; }
.fr-stats span { display: flex; align-items: center; gap: 2px; padding: 0 6px 0 3px; border: 1.5px solid #F2D6DC; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 800; }
.fr-stats img { width: 12px; height: 12px; }
.fr-motto { font-size: 10.5px; color: #9B7B8A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-side { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fr-pic { width: 56px; height: 56px; object-fit: cover; object-position: 50% 12%; border-radius: 10px; border: 2px solid #F2D6DC; background: #FFF8F3; }
.fr-pic.guy { object-position: 50% 0; }
.fr-online { font-size: 10px; font-weight: 800; color: #A99; display: flex; align-items: center; gap: 3px; }
.fr-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C9BDBD; }
.fr-online.on { color: #3E9B5A; }
.fr-online.on::before { background: #4CC36E; }
.fr-btn { width: 100%; padding: 4px 2px; border: 0; border-radius: 10px; background: linear-gradient(#F48AA4, #E86A8C); color: #fff; font: 800 10.5px var(--display); cursor: pointer; }
.fr-btn.ghost { background: #FCE4EA; color: #B05A75; }
.fr-btn:disabled { opacity: .5; }
/* ---------- playing together ---------- */
#duoPick, #duoWait, #invitePopup { z-index: 40; }
.duo-card { max-width: 300px; }
.duo-games { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.duo-game { padding: 4px; border: 0; border-radius: 12px; background: #FFF8F1; color: #6E4A3A; font: 800 12px var(--display); display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.duo-game img { width: 100%; height: 56px; object-fit: cover; border-radius: 8px; }
.duo-text { margin: 0; font-size: 16px; line-height: 1.35; text-align: center; }
.duo-invite-img { width: 200px; height: 104px; object-fit: cover; border-radius: 12px; border: 3px solid var(--cream); }
.duo-spin { font-size: 40px; color: var(--pink); animation: duo-beat 1s ease-in-out infinite; }
@keyframes duo-beat { 50% { transform: scale(1.25); } }
.duo-result { font-size: 16px; font-weight: 800; color: #F9D77E; }
.fr-btn.play { background: linear-gradient(#8FD0A8, #5FB583); }
/* ---------- result of a game together (Aiman's "You Won!" design) ---------- */
#duoOver { z-index: 20; }
.vs-wrap { position: relative; width: 320px; display: flex; flex-direction: column; align-items: center; animation: pop .3s ease-out; }
.vs-mascot { position: relative; z-index: 2; height: 74px; margin-bottom: -22px; filter: drop-shadow(0 3px 3px rgba(60, 35, 20, .3)); animation: pet-bob 2.6s ease-in-out infinite; }
.vs-sign { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 6px 22px 8px; margin-bottom: -14px; border: 3px solid #6E4A3A; border-radius: 16px; background: linear-gradient(#C9905F, #A8724A); box-shadow: 0 4px 0 #7A5038; }
.vs-sign b { font: 800 34px/1 var(--display); color: #FFE9A8; text-shadow: 0 2px 0 #7A5038, 0 0 2px #7A5038; white-space: nowrap; }
.vs-sign span { color: #F9D77E; font-size: 20px; text-shadow: 0 1px 0 #7A5038; }
.vs-card { width: 100%; padding: 22px 14px 14px; border: 3px solid #8B5E4A; border-radius: 22px; background: #FFF6EC; box-shadow: inset 0 0 0 4px #FFF6EC, inset 0 0 0 6px #F0D9C8; color: #5C3B2A; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vs-sub { margin: 0; font-size: 13px; font-weight: 700; color: #9B7B6A; }
.vs-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.vs-player { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 116px; }
.vs-crown { position: absolute; left: 6px; top: -16px; font-size: 26px; font-style: normal; transform: rotate(-18deg); }
.vs-face { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; background: #FFF; border: 4px solid #F07A98; }
.vs-face.guy { object-position: 50% 0; }
.them .vs-face { border-color: #6FA3D9; }
.vs-name { padding: 1px 16px; border-radius: 12px; background: #E86A8C; color: #fff; font-size: 14px; font-weight: 800; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.them .vs-name { background: #5A93CF; }
.vs-score { display: flex; align-items: center; gap: 6px; padding: 2px 16px; border: 2.5px solid #F07A98; border-radius: 14px; background: #FFF0F3; font-size: 24px; font-weight: 800; }
.them .vs-score { border-color: #6FA3D9; background: #EEF5FD; }
.vs-score em { font-style: normal; font-size: 18px; }
.vs-vs { font: 800 30px var(--display); color: #6E4A3A; }
.vs-msg { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 2.5px solid #F2D58E; border-radius: 16px; background: #FFF6D6; }
.vs-msg img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.vs-msg p { margin: 0; font-size: 15px; font-weight: 800; line-height: 1.25; }
.vs-stars { margin: 0; font-size: 13px; font-weight: 800; color: #C98A2B; }
.vs-buttons { display: flex; gap: 8px; width: 100%; }
.vs-btn { flex: 1; padding: 11px 6px; border: 3px solid #8B5E4A; border-radius: 22px; font: 800 15px var(--display); color: #5C3B2A; cursor: pointer; }
.vs-btn.home { background: linear-gradient(#FBC2D1, #F49AB1); }
.vs-btn.again { background: linear-gradient(#FFE08C, #F9C552); }
.vs-btn:disabled { opacity: .6; }
/* ---------- stickers ---------- */
#stickerPopup { z-index: 45; }
.sticker-card img { width: 190px; height: 190px; object-fit: contain; animation: sticker-in .6s ease-out; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
@keyframes sticker-in { from { transform: scale(.3) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.1) rotate(4deg); } }
.sticker-card p { margin: 0; font-size: 18px; font-weight: 800; color: #F9D77E; }
.collection-page { display: flex; flex-direction: column; background: linear-gradient(#F7E6F4, #EBDDF7); color: #5C3B2A; }
.col-count { position: absolute; right: 12px; top: 16px; padding: 2px 10px; border-radius: 12px; background: #FFF8F3; border: 2px solid #D9C2EA; font-size: 13px; font-weight: 800; }
.col-rich { flex: none; margin: 0 12px 6px; padding: 6px 10px; border-radius: 12px; background: #FFF8F3; font-size: 12.5px; font-weight: 800; color: #8B6AA8; text-align: center; }
.sticker-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: max-content; gap: 8px; padding: 2px 10px 16px; scrollbar-width: none; }
.sticker-grid::-webkit-scrollbar { display: none; }
.sticker { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 14px; background: #FFFDFB; border: 2px dashed #E3CFEF; text-align: center; }
.sticker img { width: 92px; height: 92px; object-fit: contain; }
.sticker b { font-size: 11.5px; line-height: 1.1; }
.sticker small { font-size: 9.5px; line-height: 1.15; color: #9B7B8A; }
.sticker.locked img { filter: grayscale(1) brightness(1.15); opacity: .35; }
.sticker .lock { position: absolute; top: 30px; font-size: 22px; font-style: normal; }
.home .nav button#collectionNav.has-dot { position: relative; }
.home .nav button#collectionNav.has-dot::after { content: ""; position: absolute; top: 4px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: #F2607D; box-shadow: 0 0 0 2px #FFF6EA; }
/* ---------- Daily Rewards (Aiman's 15-day design) ---------- */
#giftPopup { z-index: 25; }
.daily { position: relative; width: 330px; max-height: 96%; overflow-y: auto; padding: 12px 12px 10px; border: 3px solid #6E4A3A; border-radius: 26px; background: #FFF8F0; box-shadow: inset 0 0 0 4px #FFF8F0, inset 0 0 0 6px #F0D9C8; color: #5C3B2A; text-align: center; animation: pop .25s ease-out; scrollbar-width: none; }
.daily-x { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 3px solid #6E4A3A; border-radius: 50%; background: #F7B9C6; color: #6E4A3A; font: 800 18px var(--display); cursor: pointer; }
.daily-head { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 40px 0 0; padding: 4px 10px; border-radius: 18px; background: linear-gradient(90deg, #FCE4EA, #FFF1F4); }
.daily-cal { font-size: 26px; }
.daily-head h2 { margin: 0; font-size: 24px; letter-spacing: .02em; color: #5C3B2A; }
.daily-event { margin: 6px 0 0; font-size: 17px; font-weight: 800; }
.daily-sub { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: #8A6A5C; }
.daily-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.day { position: relative; padding: 14px 4px 8px; border: 2px solid #EAD4C6; border-radius: 14px; background: linear-gradient(#FFFCF8 70%, #FBE3E8); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.day b { font-size: 13px; }
.day-star { display: flex; align-items: center; gap: 3px; font-size: 16px; font-weight: 800; }
.day-star i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #C98A2B; border-radius: 50%; background: #FBD65E; font-size: 12px; }
.day.now { border-color: #F07A98; background: linear-gradient(#FFF6D6, #FFE9B0); box-shadow: 0 0 0 2px #FFF, 0 0 10px rgba(240, 122, 152, .6); }
.day-tag { position: absolute; top: -9px; padding: 0 9px; border-radius: 8px; background: #F07A98; color: #fff; font-size: 9.5px; font-weight: 800; }
.day-claim { margin-top: 2px; padding: 3px 8px; border: 0; border-radius: 10px; background: linear-gradient(#F48AA4, #E86A8C); color: #fff; font: 800 10.5px var(--display); cursor: pointer; animation: pet-bob 1.4s ease-in-out infinite; }
.day.done { opacity: .75; }
.day-check { position: absolute; right: 6px; top: 4px; font-size: 15px; font-weight: 800; color: #3E9B5A; }
.day-lock { position: absolute; right: 6px; top: 4px; font-size: 11px; opacity: .6; }
.daily-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px; border-radius: 16px; background: #FCEDEF; }
.daily-foot img { width: 34px; height: 34px; object-fit: contain; }
.daily-prog { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.daily-prog b { font-size: 14px; }
.daily-prog i { display: block; height: 10px; border-radius: 6px; background: #E9DCDC; overflow: hidden; }
.daily-prog span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #F48AA4, #F7B3C3); }
.daily-star { font-size: 18px; }
.daily-note { margin: 6px 0 0; font-size: 11px; font-weight: 700; color: #B05A75; }
/* ---------- mailbox (same cream style as Daily Rewards) ---------- */
#mailPopup { z-index: 25; }
.mailbox { position: relative; width: 330px; height: 88%; max-height: 560px; display: flex; flex-direction: column; padding: 12px 12px 10px; border: 3px solid #6E4A3A; border-radius: 26px; background: #FFF8F0; box-shadow: inset 0 0 0 4px #FFF8F0, inset 0 0 0 6px #F0D9C8; color: #5C3B2A; animation: pop .25s ease-out; }
.mail-list { flex: 1; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
.mail-list::-webkit-scrollbar { display: none; }
.mail-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 2px solid #F0DDD3; border-radius: 14px; background: #FFFCF8; text-align: left; }
.mail-item.unread { border-color: #F4A9BB; background: #FFF0F3; }
.mail-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #FCE4EA; font-size: 18px; }
.mail-item b { display: block; font-size: 14px; }
.mail-item p { margin: 1px 0 0; font-size: 12px; line-height: 1.25; color: #6E4A5A; }
.mail-item small { font-size: 10px; color: #B49383; }
.mail-empty { margin: 40px 10px; text-align: center; font-size: 14px; font-weight: 700; color: #9B7B8A; }
.mail-clear { margin-top: 8px; align-self: center; padding: 5px 16px; border: 2px solid #E7C3BC; border-radius: 14px; background: #FFF6EA; color: #9B7B6A; font: 800 12px var(--display); cursor: pointer; }
.settings-card { max-width: 300px; }
.cloud-title { margin: 6px 0 0; width: 100%; padding-top: 8px; border-top: 1px dashed rgba(255, 248, 241, .35); font-size: 16px; }
.cloud-box { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* small links at the bottom of Settings */
.settings-links { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; font-size: 12.5px; }
.settings-links a { color: inherit; opacity: .85; }
.delete-acc { padding: 0; border: 0; background: none; color: #FFB3C1; font: 700 12.5px var(--display); text-decoration: underline; cursor: pointer; }
.cloud-why, .cloud-who { margin: 0; font-size: 12.5px; line-height: 1.3; text-align: center; color: var(--muted); }
.cloud-who b { color: var(--cream); word-break: break-all; }
.cloud-status { margin: 0; min-height: 15px; font-size: 11.5px; color: #F9D77E; text-align: center; }
.google-btn { min-height: 44px; display: flex; justify-content: center; }
/* the app's own "Continue with Google" button (Google's button doesn't work inside apps) */
.g-native { display: flex; align-items: center; gap: 10px; width: 240px; height: 40px; padding: 0 14px; border: 1px solid #DADCE0; border-radius: 20px; background: #fff; color: #3C4043; font: 600 14px 'Roboto', Arial, sans-serif; cursor: pointer; }
.g-native .g-logo { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 800 13px Arial, sans-serif; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); }
.cloud-btns { display: flex; gap: 6px; }
.cloud-btn { padding: 6px 14px; border: 0; border-radius: 14px; background: var(--pink); color: #fff; font: 800 13px var(--display); cursor: pointer; }
.cloud-btn.ghost { background: #8E80A3; }
.gift-big { width: 56px; height: 56px; color: var(--pink); }
.buttons { display: flex; gap: 10px; margin-top: 6px; }
.btn {
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  background: var(--carrot);
  border: 3px solid var(--cream);
  border-radius: 14px;
  padding: 6px 20px;
  box-shadow: 0 4px 0 #A9560E;
}
.btn.ghost { background: var(--lilac); box-shadow: 0 4px 0 #8E80A3; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #A9560E; }

/* ---------- Friend Shop ---------- */
.shop {
  background: var(--cream);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.shop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
}
.shop-top h2 { margin: 0; font-size: 24px; font-weight: 800; }
.shop-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 4px 14px 16px;
  align-content: start;
}
.shop-card {
  background: var(--lilac);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 6px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.shop-card.owned { background: #FFF7EE; }
/* Friends page in the cottage colours from Aiman's design */
.shop { color: #6E4A3A; background: #FBEEDE; }
.shop .shop-card { background: #FDE6D3; border-color: #D9B49D; box-shadow: 0 2px 0 rgba(110, 70, 50, .3); }
.shop .shop-card.owned { background: #FFF7EE; }
.shop .shop-btn { color: #6E4A3A; border-color: #8B5E4A; }
.shop .shop-btn.short { background: #F1E3D6; color: #9B7B6A; box-shadow: 0 3px 0 #D9B49D; }
.shop .shop-btn.playing { background: #FCCBC4; color: #6E4A3A; }
.shop .round-btn, .shop .pill { border-color: #8B5E4A; color: #6E4A3A; }
.shop-card canvas { display: block; }
.shop-card img { width: 92%; aspect-ratio: 300 / 340; object-fit: cover; border-radius: 10px; display: block; }
.shop-card:not(.owned) img { filter: saturate(.75); }
.shop-tabs { display: flex; gap: 8px; padding: 0 14px 10px; }
.shop-tabs button {
  flex: 1;
  font-size: 15px;
  font-weight: 800;
  color: #6E4A3A;
  background: #FBEEDE;
  border: 2px solid #E9CDBB;
  border-radius: 12px;
  padding: 3px 0;
}
.shop-tabs button[aria-selected="true"] { background: #FCCBC4; border-color: #6E4A3A; }
.shop-name { font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; min-height: 28px; display: flex; align-items: center; }
.shop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 78px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  background: var(--carrot);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 1px 8px;
  box-shadow: 0 3px 0 #A9560E;
}
.shop-btn svg { width: 16px; height: 16px; }
.shop-btn.short { background: #E3DCEB; color: #5F5470; box-shadow: 0 3px 0 #8E80A3; }
.shop-btn.confirm { background: var(--pink); box-shadow: 0 3px 0 var(--deep-pink); }
.shop-btn.playing { background: #97C459; box-shadow: none; cursor: default; }
.shop-btn:active { transform: translateY(2px); box-shadow: none; }

/* ---------- Choose Your Girl / Friend (Aiman's cabinet designs) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.choose {
  display: flex;
  flex-direction: column;
  color: #6E4A3A;
  background: linear-gradient(180deg, #CFE8F5 0, #CFE8F5 60px, #B9DDB0 60px, #8DBB72 100%);
}
.choose-head { position: relative; flex: none; height: 72px; }
.choose-head > img { width: 360px; height: 72px; display: block; object-fit: cover; }
/* words written on the blank plaque (the Guys sign, assets/make-header-guy.mjs) */
.choose-sign {
  position: absolute;
  left: 179px;
  top: 44px;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: #5C3B2A;
  white-space: nowrap;
  pointer-events: none;
}
/* real buttons sit exactly on top of the ones painted in the design */
.choose-back {
  position: absolute;
  left: 8px;
  top: 11px;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 2px solid #E9CDBB;
  border-radius: 50%;
  background: #FFF6EC;
  color: #B8613F;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 3px rgba(90, 50, 30, .3);
}
.choose-back svg { width: 16px; height: 16px; }
.choose-count {
  position: absolute;
  left: 286px;
  top: 12px;
  width: 54px;
  height: 21px;
  border-radius: 11px;
  background: #FFF6EC;
  box-shadow: 0 2px 3px rgba(90, 50, 30, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 800;
}
.choose-count .coin { width: 15px; height: 15px; }

.choose-switch {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 5px 26px 6px;
  background: #7A5038;
}
.choose-switch button {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
  color: #6E4A3A;
  background: #FBEEDE;
  border: 2px solid #E9CDBB;
  border-radius: 12px;
  padding: 2px 0;
}
.choose-switch button[aria-selected="true"] { background: #FCCBC4; border-color: #FFF6EC; }
.choose-body { position: relative; flex: 1; min-height: 0; background: #7A5038; }
.curtain {
  position: absolute;
  top: -6px;
  bottom: 0;
  width: 30px;
  height: calc(100% + 6px);
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}
.curtain.left { left: 0; object-position: 20% top; }
.curtain.right { right: 0; object-position: 80% top; }
.cabinet {
  position: absolute;
  inset: 0 20px;
  background: #6B4429;
  border: 5px solid #A0714F;
  border-top: 0;
  box-shadow: inset 0 0 0 2px #4E2F1C;
  overflow: hidden;
}
.cubbies {
  height: 100%;
  overflow-y: auto;
  display: grid;
  /* 4 big cubbies per row on phones; the cabinet scrolls when there are more friends */
  grid-template-columns: repeat(4, 1fr);
  /* rows keep the cubbies' full height instead of squeezing them into the cabinet */
  grid-auto-rows: max-content;
  align-content: start;
  gap: 6px;
  padding: 10px 14px 16px;
  scrollbar-width: none;
}
.cubbies::-webkit-scrollbar { display: none; }
.cubby {
  position: relative;
  aspect-ratio: 1 / 1.08;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #4E2F1C;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.cubby img {
  position: absolute;
  inset: 3px 3px 5px;
  width: calc(100% - 6px);
  height: calc(100% - 8px);
  object-fit: cover;
  border-radius: 4px;
}
.cubby.girl img { object-position: 50% 12%; }
/* guys are full-body pictures: show head and shoulders on a soft cream wall */
.cubby.guy img { object-position: 50% 0; background: radial-gradient(circle at 50% 30%, #FFF8EF, #F6E3CF); }
.pick-card img.guy { object-position: 50% 0; background: radial-gradient(circle at 50% 30%, #FFF8EF, #F6E3CF); }
/* full-body animals stand whole on a soft cream wall, never cropped */
.cubby.body img { object-fit: contain; padding: 6px 4px 8px; box-sizing: border-box; background: radial-gradient(circle at 50% 40%, #FFF8EF, #F6E3CF); }
/* a strip of grass with a flower, like the design's cubbies */
.cubby::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: radial-gradient(circle at 25% 40%, #FFF 0 1.5px, transparent 2px), linear-gradient(#7FAE5B, #5E8C40);
}
.cubby.locked img { filter: saturate(.45) brightness(.92); opacity: .85; }
.cubby .price {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 3px;
  border-radius: 6px;
  background: #FFF6EC;
  font-size: 11px;
  font-weight: 800;
  color: #6E4A3A;
  z-index: 1;
}
.cubby .price svg { width: 12px; height: 12px; }
.cubby.chosen { box-shadow: 0 0 0 2.5px #FF9FB2, 0 0 8px 2px rgba(255, 159, 178, .9); }
.cubby .heart {
  position: absolute;
  right: 1px;
  top: -1px;
  font-size: 13px;
  color: #FF7FAF;
  text-shadow: 0 0 2px #FFF, 0 0 2px #FFF;
  z-index: 1;
}

.choose-tabs {
  flex: none;
  display: flex;
  gap: 3px;
  padding: 5px 6px calc(6px + env(safe-area-inset-bottom));
  background: #FBEEDE;
  border-top: 2px solid #E9CDBB;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -3px 6px rgba(80, 45, 30, .25);
}
.choose-tabs button {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 3px 0 2px;
  border: 1.5px solid #EED8C6;
  border-radius: 10px;
  background: #FFF7EE;
  color: #6E4A3A;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.choose-tabs button img { width: 26px; height: 22px; object-fit: contain; mix-blend-mode: multiply; }
.choose-tabs button[aria-selected="true"] { background: #FCCBC4; border-color: #E8A3A0; font-weight: 800; }

.pick-sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 35, 25, .55);
}
.pick-card {
  width: 230px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: #FFF7EE;
  border: 3px solid #E9CDBB;
  box-shadow: 0 6px 16px rgba(60, 35, 25, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: pop .2s ease-out;
}
.pick-card img { width: 150px; height: 170px; object-fit: cover; object-position: 50% 15%; border-radius: 14px; border: 3px solid #FDE6D3; }
.pick-card img.body { object-fit: contain; padding: 12px; box-sizing: border-box; background: radial-gradient(circle at 50% 40%, #FFF8EF, #F6E3CF); }
.pick-card h3 { margin: 4px 0 0; font-size: 22px; font-weight: 800; color: #6E4A3A; }
.pick-note { margin: 0; font-size: 13px; color: #9B7B6A; display: flex; align-items: center; gap: 3px; }
.pick-note svg, .pick-main svg { width: 15px; height: 15px; }
.pick-main {
  margin-top: 6px;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 17px;
  font-weight: 800;
  color: #6E4A3A;
  background: #FCCBC4;
  border: 2px solid #8B5E4A;
  border-radius: 14px;
  padding: 5px 16px;
  box-shadow: 0 3px 0 #C98E86;
}
.pick-main.short { background: #F1E3D6; color: #9B7B6A; box-shadow: 0 3px 0 #D9B49D; }
.pick-main.done { background: #DDF1D3; box-shadow: none; }
.pick-close { border: 0; background: none; color: #9B7B6A; font-size: 13px; font-weight: 700; padding: 4px 10px; }

/* ---------- Top 10 ---------- */
.spacer { width: 40px; }
.top-tabs { display: flex; justify-content: center; gap: 8px; padding: 0 14px 10px; }
.top-tab {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  opacity: .55;
  transition: transform .12s, opacity .12s;
}
.top-tab svg { width: 100%; height: 100%; display: block; }
.top-tab[aria-selected="true"] { opacity: 1; transform: scale(1.08); box-shadow: 0 0 0 3px var(--pink); }
.top-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 2px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 3px 12px 3px 6px;
  font-size: 16px;
}
.top-row.you { background: #FFE3EE; border-color: var(--deep-pink); }
.top-place {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: var(--lilac);
  flex: none;
}
.medal-1 .top-place { background: #F7C548; }
.medal-2 .top-place { background: #D3D1C7; }
.medal-3 .top-place { background: #E0A46B; }
.top-player { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-row b { font-variant-numeric: tabular-nums; }
.top-msg { text-align: center; color: #5F5470; padding: 30px 10px; font-size: 16px; }
.top-name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 2px solid var(--lilac);
}
.top-name label { font-size: 14px; font-weight: 800; white-space: nowrap; }
.top-name input {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: #FFFFFF;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 3px 10px;
  user-select: text;
}
.top-name input:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
.top-name .btn { font-size: 16px; padding: 3px 14px; border-color: var(--ink); margin: 0; }

/* game-over card extras */
.rank-line { font-size: 15px; color: #F7C548; min-height: 0; }
.rank-line:empty { display: none; }
.link-btn {
  background: none;
  border: 0;
  color: var(--pink);
  font-size: 15px;
  font-weight: 800;
  text-decoration: underline;
  padding: 2px;
}

/* ---------- Fish Maker ---------- */
.maker {
  background: var(--cream);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 16px 10px;
  box-sizing: border-box;
}
.maker h2 { margin: 0; font-size: 24px; font-weight: 800; }
#makerCanvas {
  width: 200px;
  height: 130px;
  display: block;
  background: #DDF1F6;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
}
#fishName {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: #FFFFFF;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 2px 12px;
  width: 200px;
  box-sizing: border-box;
  text-align: center;
  user-select: text;
}
#fishName:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
.maker-rows { width: 100%; display: flex; flex-direction: column; gap: 7px; margin: 4px 0 6px; }
.mrow { display: flex; align-items: center; gap: 6px; }
.mrow > span { width: 56px; flex: none; font-size: 14px; font-weight: 800; color: #5F5470; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  background: #FFFFFF;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 0 9px;
  line-height: 24px;
}
.chip[aria-checked="true"] { background: var(--pink); }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  padding: 0;
}
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--cream), 0 0 0 5.5px var(--ink); }
.maker .btn { border-color: var(--ink); }
.maker-note { margin: 0; font-size: 13px; color: #5F5470; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--cream);
  border-radius: 14px;
  padding: 6px 16px;
  font-size: 16px;
  animation: pop .2s ease-out;
}

/* the username picker and share menu open on top of the ID card */
#unPopup, #sharePopup { z-index: 30; }