/* The account surface (client/core/account.js): the Profile tab and its Settings view
   (architecture.md §30 + §60, Design.md "Profile + Settings").

   Linked by account.js itself, so every SPA whose avatar opens the overlay gets it, and by
   /profile in its <head> so the page never paints unstyled. It loads after app.css and
   refines the page-mode rules there (.acct-overlay.is-page …).

   The look: grouped white cards on the paper, one radius family (18–22px), soft shadows,
   section titles in plain sentence case on the profile and small caps over the Settings
   groups (iOS Settings, which is what people expect a settings page to look like). */

/* ---- the header: big title, gear on the right -------------------------------------- */
.acct-gear {
  grid-column: 3; justify-self: end;
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: 0 4px 14px rgba(60, 40, 60, 0.08), inset 0 0 0 1px rgba(23, 24, 28, 0.05);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.acct-gear:active { transform: scale(.94) rotate(-20deg); }
.acct-gear .icon { display: inline-flex; }

.acct-overlay.is-page .acct-profile > .acct-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ---- profile: the hero card ---------------------------------------------------------- */
.acct-hero-signin {
  flex: none; align-self: center;
  min-height: 36px; padding: 0 16px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: #fff;
  font: 700 13.5px/1 var(--font-body); font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acct-hero-signin:active { transform: scale(.97); }
.acct-id .acct-hero-signin { margin-left: auto; }
.acct-hero-plan.is-premium { display: inline-flex; align-items: center; gap: 5px; align-self: center; }

/* ---- profile: playing together, live (client/core/coupleCard.js, §35h) ---------------
   The card under the hero: the two of you (the couple link's own pair, below), a dot and a
   line that say where your partner is right now, and — when they're waiting in a room —
   one pink "Join <name>" that goes straight in. Not linked yet: you and an empty seat. */
.acct-couple {
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  border-radius: 22px; background: #fff;
  border: 1px solid rgba(23, 24, 28, 0.05); box-shadow: 0 8px 22px rgba(60, 40, 60, 0.07);
}
.acct-couple.is-loading { opacity: .65; }
.acct-couple.is-wait { background: linear-gradient(180deg, #FFF3F7 0%, #FFFFFF 70%); border-color: rgba(236, 95, 147, 0.25); }
.acct-couple-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acct-couple .acct-link-titles small, .acct-couple .acct-link-titles b { white-space: normal; }
.acct-couple .acct-link-pair { position: relative; }
.acct-link-them.is-empty {
  display: grid; place-items: center; color: #b9bcc6;
  background: #F6F7F9; box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px #E1E3E9;
}
.acct-link-them.is-empty .icon { display: inline-flex; }
.acct-couple-dot {
  position: absolute; right: -1px; top: 1px; z-index: 3;
  width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 3px #fff;
  background: #C9CCD6;
}
.acct-couple-dot.is-on { background: #22B573; }
.acct-couple-dot.is-play { background: #5FA0FF; }
.acct-couple-dot.is-wait { background: #ec5f93; }
.acct-couple-status { font-weight: 700; }
.acct-couple-status.is-on { color: #11885A; }
.acct-couple-status.is-play { color: #2F6FD0; }
.acct-couple-status.is-wait { color: #c2416f; }
.acct-couple-hint { margin: 0; padding: 10px 12px; border-radius: 14px; background: #F6F7FB; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.acct-couple-join { text-decoration: none; }
.acct-couple-join .icon { display: inline-flex; }
.acct-link-primary.is-soft { background: #fff; color: #c2416f; border: 1.5px solid #ec5f93; box-shadow: none; text-decoration: none; }
.acct-link-primary.is-soft .icon { display: inline-flex; }
.acct-couple-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.acct-couple-off {
  min-height: 32px; padding: 0 8px; border: 0; background: none; color: var(--ink-soft);
  font: 600 12.5px/1 var(--font-body); font-family: inherit; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.acct-couple-off[hidden], .acct-couple-sure[hidden] { display: none; }
.acct-couple-sure { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; font-size: 13.5px; line-height: 1.4; color: var(--ink); text-align: center; }
.acct-couple-sure-row { display: flex; gap: 8px; }
.acct-couple-cancel, .acct-couple-go {
  flex: 1; min-height: 42px; border-radius: 12px; font: 700 14px/1 var(--font-body); font-family: inherit; cursor: pointer;
}
.acct-couple-cancel { border: 1px solid #E3E5EA; background: #fff; color: var(--ink); }
.acct-couple-go { border: 0; background: #C2334F; color: #fff; }
.acct-couple-go:disabled { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .acct-couple-dot.is-on, .acct-couple-dot.is-wait { animation: acct-couple-live 2s ease-in-out infinite; }
}
@keyframes acct-couple-live {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(34, 181, 115, 0); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(34, 181, 115, 0.22); }
}
.acct-couple-dot.is-wait { animation-name: acct-couple-wait; }
@keyframes acct-couple-wait {
  0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 3px rgba(236, 95, 147, 0); }
  50% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(236, 95, 147, 0.25); }
}

/* ---- the couple card's invites + weekly date (Fase 4, coupleCard.js, architecture.md §71)
   An invite waiting for MY answer is its own pink box at the top (who, Decline | Accept); a
   request I sent is one quiet line with Cancel; my code sits under "Invite your partner";
   "Got their code?" opens the field in place. Linked: the weekly date and the "turn on
   notifications" line are rows in the card, the editor opens in place (chips, never a
   <select>). */
.acct-couple-inv {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 16px; background: #FFF3F7; border: 1px solid rgba(236, 95, 147, 0.25);
}
.acct-couple-inv-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acct-couple-inv-who .acct-link-them { margin-left: 0; flex: none; }
.acct-couple-inv-row, .acct-week-actions { display: flex; gap: 8px; }
.acct-couple-yes, .acct-couple-no {
  flex: 1; min-height: 42px; border-radius: 12px; font: 700 14.5px/1 var(--font-body); font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acct-couple-yes { border: 0; background: #ec5f93; color: #fff; box-shadow: 0 6px 14px rgba(236, 95, 147, 0.28); }
.acct-couple-no { border: 1px solid #E3E5EA; background: #fff; color: var(--ink); }
.acct-couple-yes:disabled, .acct-couple-no:disabled { opacity: .55; }
.acct-couple-sent {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: #F6F7FB; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
}
.acct-couple-sent > span:nth-child(2) { flex: 1; min-width: 0; }
.acct-couple-sent-ic { display: inline-flex; color: #ec5f93; }
.acct-couple-sent-ic .icon { display: inline-flex; }
.acct-couple-textbtn {
  flex: none; border: 0; background: none; padding: 6px 2px; color: #c2416f;
  font: 700 14px/1.2 var(--font-body); font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acct-couple-textbtn.is-ask { align-self: center; }
.acct-couple-textbtn:disabled { opacity: .5; }
.acct-couple-textbtn[hidden], .acct-link-row[hidden] { display: none; }
.acct-couple-mycode { display: flex; flex-direction: column; gap: 6px; }
.acct-couple-play {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px;
  color: var(--ink-soft); font-size: 13px; font-weight: 700; text-decoration: none;
}
.acct-couple-play .icon { display: inline-flex; }
.acct-couple-week, .acct-couple-push {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #F6F7FB;
}
.acct-couple-push { background: #FFF8EC; }
.acct-couple-week-ic {
  flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: #FFE4EE; color: #c2416f;
}
.acct-couple-push .acct-couple-week-ic { background: #FFE9BF; color: #8A5A12; }
.acct-couple-week-ic .icon { display: inline-flex; }
.acct-couple-week-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-couple-week-copy b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.acct-couple-week-copy small { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.acct-week-edit { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.acct-week-title { font-size: 15px; font-weight: 800; }
.acct-week-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-week-chip {
  min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #E3E5EA; background: #fff;
  color: var(--ink); font: 700 13.5px/1 var(--font-body); font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.acct-week-chip.is-on { border-color: #ec5f93; background: #FFE4EE; color: #b23a66; }
.acct-week-remind {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.acct-week-toggle {
  position: relative; flex: none; width: 46px; height: 28px; border: 0; border-radius: 999px;
  background: #D9DCE3; cursor: pointer; transition: background .2s ease;
}
.acct-week-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .18); transition: transform .2s ease;
}
.acct-week-toggle.is-on { background: #ec5f93; }
.acct-week-toggle.is-on::after { transform: translateX(18px); }
.acct-week-actions .acct-couple-cancel { flex: 1; }
.acct-week-actions .acct-link-primary { flex: 2; }

/* ---- profile: the couple link (client/core/partnerLink.js) --------------------------
   One white card inside the hero: your code with Share, or your partner's code typed in;
   once linked, the two of you side by side around a heart. The link moment slides the two
   avatars together and pops the heart (.is-fresh). */
.acct-link {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 18px; background: #fff; box-shadow: 0 6px 16px rgba(60, 40, 60, 0.06);
}
.acct-link.is-loading { opacity: .65; }
.acct-link-head { display: flex; align-items: center; gap: 10px; }
.acct-link-ic {
  flex: none; width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center; background: #FFE4EE; color: #ec5f93;
}
.acct-link-ic .icon, .acct-link-code .icon, .acct-link-share .icon, .acct-link-primary .icon,
.acct-link-together > .icon, .acct-link-heart .icon { display: inline-flex; }
.acct-link-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.acct-link-titles b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-link-titles small { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.acct-link-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.acct-link-mine { display: flex; flex-direction: column; gap: 6px; }
.acct-link-primary {
  min-height: 46px; border: 0; border-radius: 14px; background: #ec5f93; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--font-body); font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 14px rgba(236, 95, 147, 0.28); -webkit-tap-highlight-color: transparent;
}
.acct-link-primary:active { transform: scale(.98); }
.acct-link-primary:disabled { opacity: .6; }
.acct-link-coderow, .acct-link-row { display: flex; gap: 8px; }
.acct-link-code {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1.5px dashed rgba(236, 95, 147, 0.5); border-radius: 14px; background: #FFF6F9; color: var(--ink);
  font: 800 18px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .14em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acct-link-code .icon { color: #ec5f93; }
.acct-link-share {
  flex: none; min-height: 46px; padding: 0 14px; border: 1.5px solid #ec5f93; border-radius: 14px;
  background: #fff; color: #c2416f; display: inline-flex; align-items: center; gap: 6px;
  font: 700 14px/1 var(--font-body); font-family: inherit; cursor: pointer;
}
.acct-link-or { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.acct-link-or::before, .acct-link-or::after { content: ''; flex: 1; height: 1px; background: rgba(23, 24, 28, 0.08); }
.acct-link-input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 14px;
  border: 1.5px solid #D9DCE3; border-radius: 14px; background: #F8F9FB; color: var(--ink); outline: none;
  font: 800 16px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase;
}
.acct-link-input::placeholder { font: 500 15px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: #9a9ca3; }
.acct-link-input:focus { border-color: #5FA0FF; background: #fff; }
.acct-link-go {
  flex: none; min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--ink); color: #fff; font: 700 15px/1 var(--font-body); font-family: inherit; cursor: pointer;
}
.acct-link-go:disabled { opacity: .35; }
.acct-link-err { margin: 0; font-size: 13px; line-height: 1.35; color: #C2334F; }
.acct-link-err:empty { display: none; }

.acct-link.is-linked { padding: 0; }
.acct-link-together {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px;
  color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.acct-link-together:active { transform: scale(.99); }
.acct-link-together > .icon { flex: none; color: var(--ink-soft); }
.acct-link-pair { position: relative; flex: none; display: flex; align-items: center; padding-bottom: 4px; }
.acct-link-me, .acct-link-them {
  width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(60, 40, 60, 0.12);
}
.acct-link-them { margin-left: -12px; }
.acct-link-me .avatar-pic, .acct-link-them .avatar-pic { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; font-size: 20px; color: #fff; }
.acct-link-me .avatar-pic img, .acct-link-them .avatar-pic img { width: 100%; height: 100%; object-fit: cover; }
.acct-link-heart {
  position: absolute; left: 50%; bottom: -4px; z-index: 2; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #ec5f93; color: #fff; box-shadow: 0 0 0 2.5px #fff;
}
.acct-link-heart svg { fill: currentColor; }
.acct-link-eyebrow { font: 700 10.5px/1.2 var(--font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: #c2416f; }
@media (prefers-reduced-motion: no-preference) {
  .acct-link.is-linked .acct-link-heart { animation: acct-link-beat 2.6s ease-in-out 1s infinite; }
  .acct-link.is-fresh .acct-link-me { animation: acct-link-l .6s cubic-bezier(.2, 1.3, .4, 1) both; }
  .acct-link.is-fresh .acct-link-them { animation: acct-link-r .6s cubic-bezier(.2, 1.3, .4, 1) both; }
  .acct-link.is-fresh .acct-link-heart { animation: acct-link-pop .5s cubic-bezier(.2, 1.6, .4, 1) .45s both, acct-link-beat 2.6s ease-in-out 1.6s infinite; }
}
@keyframes acct-link-l { from { transform: translateX(-28px); opacity: 0; } }
@keyframes acct-link-r { from { transform: translateX(28px); opacity: 0; } }
@keyframes acct-link-pop { from { transform: translateX(-50%) scale(0); } }
@keyframes acct-link-beat { 0%, 100% { transform: translateX(-50%) scale(1); } 12% { transform: translateX(-50%) scale(1.18); } 24% { transform: translateX(-50%) scale(1); } }

/* ---- profile: the plan card ---------------------------------------------------------- */
.acct-status-link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 2px;
  margin: 2px 0 0; padding: 4px 0; border: 0; background: none;
  color: #c2416f; font: 700 14px/1.2 var(--font-body); font-family: inherit;
  cursor: pointer;
}
.acct-status-link .icon { display: inline-flex; }

/* ---- profile: my strips -------------------------------------------------------------- */
.acct-strips { display: flex; flex-direction: column; gap: 10px; }
.acct-overlay.is-page .acct-strips .acct-strips-head { margin-top: 10px; }
.acct-overlay.is-page .acct-history {
  padding: 14px; border-radius: 20px; background: #fff;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
}
.acct-overlay.is-page .acct-room-card { margin: 0; }
/* Print Studio (moved here off Home): one white row, the love path's tee drawing on its
   Jump-in tint, the name and one line, a chevron. */
.acct-make {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 12px; border-radius: 20px; background: #fff;
  color: var(--ink); text-decoration: none;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.acct-make:active { transform: scale(.985); }
.acct-make-art {
  flex: none; width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-items: center; background: #DFF3E4;
}
.acct-make-art img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(60, 40, 60, 0.16)); }
.acct-make-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-make-copy b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.acct-make-copy small { font-size: 13px; color: var(--ink-soft); }
.acct-make > .icon { flex: none; display: inline-flex; color: var(--ink-soft); }
.acct-empty-go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 18px; margin-top: 4px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.acct-overlay.is-page .acct-empty { padding: 22px 0 14px; }
.acct-overlay.is-page .acct-gamelog { display: flex; flex-direction: column; gap: 10px; }
.acct-overlay.is-page .acct-gamelog-locked {
  padding: 16px; border: 0; border-radius: 18px; background: #fff;
  box-shadow: 0 6px 16px rgba(60, 40, 60, 0.05);
}

/* ---- settings: the header ------------------------------------------------------------ */
.acct-set-back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 40px; padding: 0 12px 0 4px; margin-left: -4px;
  border: 0; background: none; color: #c2416f;
  font: 700 15.5px/1 var(--font-body); font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acct-set-back .icon { display: inline-flex; }
.acct-set-spacer { grid-column: 3; }
.acct-overlay.is-page .acct-set-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
.acct-overlay.is-page .acct-set-head .acct-set-spacer { display: none; }

/* ---- settings: groups and rows ------------------------------------------------------- */
.acct-settings { gap: 18px; }
.acct-set-group { display: flex; flex-direction: column; gap: 8px; }
.acct-set-group[hidden] { display: none; }
.acct-set-title {
  margin: 4px 4px 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft);
}
.acct-set-card {
  border-radius: 20px; background: #fff; overflow: hidden;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06), inset 0 0 0 1px rgba(23, 24, 28, 0.03);
}
.acct-set-list { display: flex; flex-direction: column; }
.acct-set-note { margin: 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.acct-set-empty { display: block; padding: 16px 18px; font-size: 14px; color: var(--ink-soft); }

.acct-set-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 10px 16px;
  border: 0; background: none; color: var(--ink);
  font: inherit; text-align: left; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
.acct-set-row.is-static { cursor: default; }
.acct-set-row[hidden] { display: none; }
.acct-set-row + .acct-set-row::before {
  content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px;
  background: rgba(23, 24, 28, 0.07);
}
.acct-set-row:not(.is-static):active { background: #f6f5f9; }
@media (hover: hover) { .acct-set-row:not(.is-static):hover { background: #faf9fc; } }
.acct-set-row:disabled { opacity: .55; cursor: default; }

.acct-set-ic {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px; background: #f3f1f7; color: #4b4e58;
}
.acct-set-ic .icon { display: inline-flex; }
.acct-set-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-set-main > b {
  font-size: 15.5px; font-weight: 650; letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-set-main > small { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); }
.acct-set-value { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); }
.acct-set-end { flex: none; display: inline-flex; color: #b3b6bf; }
.acct-set-end .icon { display: inline-flex; }

.acct-set-ava {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(135deg, #ffe4ee, #e1edff);
  color: #b23a66; font-weight: 800; font-size: 14px;
}
.acct-set-ic:has(.acct-set-ava) { background: none; }

/* tones */
.acct-set-row.is-premium .acct-set-ic,
.acct-set-row.is-accent .acct-set-ic { background: #ffe4ee; color: #ec5f93; }
.acct-set-row.is-accent .acct-set-main > b { color: #d63f77; }
.acct-set-row.is-quiet .acct-set-main > b { color: var(--ink-soft); font-weight: 600; }
.acct-set-row.is-danger .acct-set-main > b { color: #c0392b; }
.acct-set-row.is-danger .acct-set-ic { background: #fdecea; color: #c0392b; }
.acct-set-row.is-danger.is-armed { background: #c0392b; }
.acct-set-row.is-danger.is-armed .acct-set-main > b { color: #fff; white-space: normal; }
.acct-set-row.is-danger.is-armed .acct-set-ic { background: rgba(255, 255, 255, 0.2); color: #fff; }
.acct-set-card > .acct-danger { gap: 0; margin: 0; }
.acct-set-card > .acct-danger > .acct-danger-note:not(:empty) { padding: 0 16px 14px; line-height: 1.45; }

/* language: the current language's round flag (client/core/langPicker.js draws it) in the
   icon's place; the row drops the picker's list */
.acct-set-ic.is-flag { background: none; border-radius: 50%; }
.acct-lang-row .acct-set-end svg { display: block; transition: transform .2s ease; }
.acct-lang-row[aria-expanded="true"] .acct-set-end svg { transform: rotate(180deg); }

/* account (guest): the sign-in buttons sit in the card with room around them */
.acct-set-card > .acct-identity { gap: 10px; padding: 16px; }
.acct-set-card > .acct-identity > .acct-note:first-child { margin: 0 0 4px; padding: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.acct-set-card .acct-email-row .acct-email { background: #f8f8fb; }

/* the gift buyer's partner code */
.acct-set-gift { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 16px 16px; }
.acct-set-gift:empty { display: none; }

/* print orders */
.ps-order .ps-order-tracks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.ps-order .ps-track { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: #2d6bcc; text-decoration: none; }
.ps-order .ps-track .icon { display: inline-flex; }
.ps-order .ps-status {
  flex: none; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: var(--paper); color: var(--ink-soft);
}
.ps-order .ps-status.is-live { background: var(--blue-tint); color: #2d6bcc; }
.ps-order .ps-status.is-ship { background: #fff3d6; color: #a96b00; }
.ps-order .ps-status.is-done { background: #eafaf1; color: #0a7d4d; }
.ps-order .ps-status.is-bad { background: #fde3e8; color: #c0344e; }

.acct-set-foot { margin: 6px 0 4px; text-align: center; font-size: 12px; color: #a0a4ab; }

/* the overlay (inside a game) keeps the panel's compact width */
.acct-overlay:not(.is-page) .acct-settings { padding-bottom: var(--s4); }

/* ======================================================================================
   The pages behind Profile (2026-10-13, after BINO's Pengaturan / Penagihan / Hadiah):
   client/core/acctPage.js builds their heads, account.js / billing.js / badges.js the rest.
   ====================================================================================== */

/* ---- a page's head: "< where back goes" (+ a button on the right), big title, one line */
.acct-sub { gap: 14px; }
.acct-sub-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 48px; padding-top: 6px;
}
.acct-overlay.is-page .acct-sub-head { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.acct-sub-back {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px 0 0; margin-left: -7px;
  border: 0; background: none; color: #c2416f;
  font: 600 16px/1 var(--font-body); font-family: inherit; /* Design.md "The back link" */
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acct-sub-back .icon { display: inline-flex; }
.acct-sub-back:active { opacity: .6; }
.acct-sub-action {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #fff; color: #c2416f;
  box-shadow: 0 4px 14px rgba(60, 40, 60, 0.08), inset 0 0 0 1px rgba(23, 24, 28, 0.05);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acct-sub-action[hidden] { display: none; }
.acct-sub-action .icon { display: inline-flex; }
.acct-sub-title {
  margin: 4px 2px 0;
  font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.1;
  letter-spacing: -0.03em; color: var(--ink);
}
.acct-sub-lead { margin: -4px 2px 6px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

/* ---- settings rows: a coloured tile with a white icon, the way a phone's settings app
   looks; a little taller, so each row reads as one thing */
.acct-sub .acct-set-row { min-height: 64px; padding: 11px 16px; }
.acct-sub .acct-set-row + .acct-set-row::before { left: 62px; }
.acct-sub .acct-set-main > b { font-size: 16px; font-weight: 650; }
.acct-sub .acct-set-main > small { font-size: 13px; }
.acct-set-ic.is-tile {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--tile, #8E95A8); color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 3px 8px rgba(60, 40, 60, 0.12);
}
.acct-set-row.is-accent .acct-set-ic.is-tile { background: var(--tile); color: #fff; }
.acct-set-row.is-danger .acct-set-ic { background: #E5484D; color: #fff; }
.acct-lang-flag { flex: none; display: inline-flex; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; }
.acct-lang-flag svg { display: block; width: 100%; height: 100%; }
.acct-set-value.is-out { color: #C2334F; }

/* ---- badges (client/core/badges.js) ------------------------------------------------- */
.bdg-pin { display: inline-grid; place-items: center; flex: none; }
.bdg-pin img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(60, 40, 60, 0.16)); }
/* a pin still to earn: the same pin in silver */
.bdg-pin.is-locked img { filter: grayscale(1) contrast(0.86) brightness(1.08) drop-shadow(0 4px 6px rgba(60, 40, 60, 0.1)); opacity: .92; }
.bdg-bar { display: block; height: 8px; border-radius: 8px; background: #ECEEF4; overflow: hidden; }
.bdg-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #FF8FB1, #8FB8FF); transition: width .7s cubic-bezier(.2, .9, .3, 1); }
.bdg-bar.is-wide { width: min(100%, 260px); height: 9px; }
.bdg-link {
  padding: 8px 0; border: 0; background: none; color: #c2416f;
  font: 700 14.5px/1 var(--font-body); font-family: inherit; cursor: pointer;
}
.bdg-stack { display: flex; align-items: center; }
.bdg-stack .bdg-pin { width: 40px; height: 40px; }
.bdg-stack .bdg-pin + .bdg-pin { margin-left: -12px; }
@keyframes bdg-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* Profile's card: the main pin, "Badges · 3 of 12", the bar, six small pins */
.bdg-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px 14px 12px; border: 0; border-radius: 22px; background: #fff;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
  color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease;
}
.bdg-card:active { transform: scale(.985); }
.bdg-card > .bdg-pin { width: 78px; height: 78px; }
.bdg-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bdg-card-head { display: flex; align-items: center; gap: 6px; }
.bdg-card-head b { flex: 1; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.bdg-card-count { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.bdg-card-head .icon { display: inline-flex; color: #b3b6bf; }
.bdg-card-row { display: flex; gap: 2px; min-height: 34px; }
.bdg-card-row .bdg-pin { width: 34px; height: 34px; }

/* the badges page: the main badge, then a card per group */
.bdg-main {
  display: flex; flex-direction: column; gap: 8px; min-height: 360px;
  padding: 18px 18px 12px; border-radius: 26px; background: #fff;
  box-shadow: 0 10px 26px rgba(60, 40, 60, 0.07);
}
.bdg-main-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bdg-main-title { align-self: flex-start; font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.bdg-main-pin { width: min(56vw, 230px); height: min(56vw, 230px); margin: 6px 0 2px; }
.bdg-main-pin img { filter: drop-shadow(0 16px 20px rgba(60, 40, 60, 0.2)); }
.bdg-main-pin.is-locked img { filter: grayscale(1) contrast(0.86) brightness(1.08) drop-shadow(0 14px 18px rgba(60, 40, 60, 0.14)); }
.bdg-main-name { font-size: 18px; font-weight: 800; }
.bdg-main-sub { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.bdg-main-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.bdg-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bdg-cat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 14px 14px 12px; border: 0; border-radius: 22px; background: #fff;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
  color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.bdg-cat:active { transform: scale(.98); }
.bdg-cat-title { align-self: flex-start; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.bdg-cat-pin { width: 96px; height: 96px; margin: 6px 0 2px; }
.bdg-cat-date { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.bdg-cat-foot { align-self: stretch; display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.bdg-cat-foot .bdg-stack .bdg-pin { width: 32px; height: 32px; }
.bdg-cat-foot .bdg-stack .bdg-pin + .bdg-pin { margin-left: -9px; }
.bdg-cat-foot .bdg-link { padding: 0; font-size: 13.5px; }

/* a group's pins in a grid: the name under each, the bar while it's under way */
.bdg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 8px; padding: 6px 0 12px; }
.bdg-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 4px 2px; border: 0; background: none; font: inherit; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: bdg-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.bdg-item .bdg-pin { width: min(26vw, 104px); height: min(26vw, 104px); transition: transform .15s ease; }
.bdg-item:active .bdg-pin { transform: scale(.94); }
.bdg-item b { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: #9AA0AE; }
.bdg-item.is-got b { color: var(--ink); font-weight: 800; }
.bdg-item small { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.bdg-item-progress { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 86%; }
.bdg-item-progress .bdg-bar { width: 100%; height: 6px; }

/* one badge: big, tilting toward your finger, swaying a little on its own, a light sweep
   crossing its face (the sweep is masked by the pin's own picture, --pin) */
.bdg-stage { display: grid; place-items: center; padding: 26px 0 10px; perspective: 900px; touch-action: pan-y; }
.bdg-tilt {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  animation: bdg-pop .8s cubic-bezier(.2, 1.2, .4, 1) both, bdg-sway 7s ease-in-out .8s infinite;
}
.bdg-tilt.is-held { animation: none; transition: transform .08s linear; }
.bdg-tilt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 48%, transparent 58%) 120% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--pin) center / contain no-repeat; mask: var(--pin) center / contain no-repeat;
  animation: bdg-shine 5s ease-in-out 1.4s infinite;
}
.bdg-tilt.is-locked::after { display: none; }
.bdg-big { width: min(70vw, 300px); height: min(70vw, 300px); }
.bdg-big img { filter: drop-shadow(0 22px 26px rgba(60, 40, 60, 0.22)); }
.bdg-big.is-locked img { filter: grayscale(1) contrast(0.86) brightness(1.08) drop-shadow(0 18px 22px rgba(60, 40, 60, 0.14)); }
@keyframes bdg-pop { from { opacity: 0; transform: scale(.7) rotateY(-40deg); } }
@keyframes bdg-sway {
  0%, 100% { transform: rotateY(-12deg) rotateX(3deg); }
  50% { transform: rotateY(12deg) rotateX(-2deg); }
}
@keyframes bdg-shine { 0% { background-position: 120% 0; } 40%, 100% { background-position: -20% 0; } }
.bdg-detail-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 12px 24px; text-align: center; }
.bdg-detail-name { margin: 6px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.bdg-detail-text { margin: 0; max-width: 34ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.bdg-detail-date { display: inline-flex; padding: 7px 13px; border-radius: 999px; background: #FFE6EE; color: #c2416f; font-size: 13px; font-weight: 700; }
.bdg-detail-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 260px); margin-top: 4px; }
.bdg-detail-progress small { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .bdg-tilt, .bdg-tilt::after, .bdg-item { animation: none; }
}

/* ---- billing (client/core/billing.js) ----------------------------------------------- */
.bil-plan {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border-radius: 22px; background: #fff; box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
}
.bil-plan.is-premium { background: linear-gradient(135deg, #FFF0F5, #EEF4FF); }
/* the picture, then the name with its pill beside it and the lines under it at full width, and
   the refresh small in the top corner (2026-10-21 — the pill and refresh had a column of their own
   and squeezed the name into a narrow stack) */
.bil-plan-top { display: flex; align-items: center; gap: 14px; }
.bil-plan-art { flex: none; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(60, 40, 60, 0.16)); }
.bil-plan-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bil-plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bil-plan-id b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.bil-plan-name .bil-pill { padding: 3px 10px; font-size: 12px; }
.bil-plan-id small { font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
.bil-refresh {
  flex: none; align-self: flex-start; width: 32px; height: 32px; margin: -4px -4px 0 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--ink-soft); cursor: pointer;
}
@media (hover: hover) { .bil-refresh:hover { background: #fff; color: var(--ink); } }
.bil-refresh .icon { display: inline-flex; }
.bil-refresh.is-spinning .icon { animation: bil-spin .8s linear infinite; }
@keyframes bil-spin { to { transform: rotate(360deg); } }
.bil-pill { flex: none; padding: 6px 11px; border-radius: 999px; background: #EEF0F4; color: #858A97; font-size: 12.5px; font-weight: 700; }
.bil-pill.is-on { background: #E3F7EC; color: #11885A; }
/* A paused web plan (architecture.md §16c): a blue pill, the group under the plan card, and its note. */
.bil-pill.is-paused { background: #E7EFFC; color: #2F5FA8; }
/* Which plan and where it was bought (2026-10-19): a line under the plan's name, a note under
   the card, and each purchase with its plan's picture. */
.bil-plan-meta { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: #6A5F86; }
.bil-plan-where { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.35; color: #4C4566; }
.bil-plan-where .icon { flex: none; margin-top: 1px; color: #8C7FB0; }
.bil-buy-art { flex: none; width: 40px; height: 40px; object-fit: contain; }
/* A cancelled plan that still runs to its end (2026-10-19): a warm pill, so it never reads Active. */
.bil-pill.is-cancelled { background: #FFF1E3; color: #9A4A08; }
/* Settings → Subscription's gift row (2026-10-19): where the partner's seat stands, as a chip. */
.acct-gift-chip { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #FDE8F0; color: #B23A66; }
.acct-gift-chip.is-open { background: #E3F7EC; color: #11764D; }
.acct-gift-chip.is-gone { background: #EEF0F4; color: #5E6371; }
.bil-pause-slot:empty { display: none; }
/* The plan card and its groups are drawn once their facts are in (2026-10-19 — they used to
   change in front of you): until then the card's shape, shimmering. A slot draws no box. */
.bil-slot { display: contents; }
.bil-plan.is-loading { min-height: 132px; }
.bil-skel {
  display: block; border-radius: 10px;
  background: linear-gradient(90deg, #F1F0F5 25%, #F9F8FB 50%, #F1F0F5 75%); background-size: 200% 100%;
  animation: bil-shimmer 1.2s ease-in-out infinite;
}
.bil-skel.is-art { flex: none; width: 64px; height: 64px; border-radius: 50%; }
.bil-skel.is-line { height: 16px; width: 62%; }
.bil-skel.is-line.is-short { height: 12px; width: 42%; margin-top: 6px; }
.bil-skel.is-note { height: 14px; width: 86%; }
@keyframes bil-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .bil-skel { animation: none; } }
/* Every purchase opens its receipt (the sheet styles itself, billing.js): the amount over a View. */
.bil-buy-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bil-buy-amt { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.bil-buy-view {
  display: inline-flex; align-items: center; gap: 1px; padding: 3px 7px 3px 9px; border-radius: 999px;
  background: #FFE8F0; color: #A8325E; font-size: 11.5px; font-weight: 800;
}
.bil-buy-view .icon { display: inline-flex; }
/* five a page, ‹ 1 2 3 › under them (billing.js pagePurchases, 2026-10-21) */
.bil-pager { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px 12px 14px; border-top: 1px solid #F1EEF4; }
.bil-pg {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; border: 1px solid #ECE8F0; background: #fff;
  color: #3E414B; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
}
.bil-pg.is-on { background: #c2416f; border-color: #c2416f; color: #fff; }
.bil-pg.is-arrow { color: #A8325E; }
.bil-pg:disabled { opacity: .35; cursor: default; }
.bil-pg .icon { display: inline-flex; }
@media (hover: hover) { .bil-pg:not(.is-on):not(:disabled):hover { background: #FFF0F5; } }
.bil-pg:focus-visible { outline: 2px solid #c2416f; outline-offset: 2px; }
.bil-pg-gap { color: #9A9DA8; font-weight: 700; padding: 0 2px; }
/* What became of the plan (2026-10-21): a status pill + its dates, under the purchase. */
.bil-buy-st { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin-top: 4px; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: #5E6371; }
.bil-buy-st > i { font-style: normal; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #EEF0F4; color: #5E6371; }
.bil-buy-st.is-active > i, .bil-buy-st.is-trial > i { background: #E3F6EC; color: #17784A; }
.bil-buy-st.is-cancelled > i, .bil-buy-st.is-refunded > i { background: #FFF1E3; color: #9A4A08; }
.bil-buy-st.is-failed > i { background: #FFEDEC; color: #B8352B; }
.bil-buy-st.is-paused > i { background: #EEF4FF; color: #2F5FB8; }
.bil-buy-st.is-once > i { background: #F3EEFF; color: #6A45C9; }
.bil-pause-note { margin: 8px 4px 0; font-size: 13.5px; font-weight: 600; color: #11885A; }
.bil-pause-note:empty { display: none; }
.bil-pause-note.is-bad { color: #D6483B; }
/* A subscription still billing that isn't the plan above (§16c, 2026-10-21): its own Cancel. */
.bil-stray-cta {
  flex: none; padding: 6px 12px; border-radius: 999px; background: #FFF0F0; color: #B8352B;
  font-size: 13px; font-weight: 800;
}
/* Local testing only (this computer + a Stripe test key): a dashed box, never in production. */
.bil-dev { margin-top: 6px; padding: 2px 10px 8px; border: 1.5px dashed #C9CCD4; border-radius: 18px; }
.bil-dev .bil-pause-note { color: #5E6371; word-break: break-all; }
.bil-plan-note { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.bil-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 54px; border: 0; border-radius: 18px; background: #EC5F93; color: #fff;
  font: 700 17px/1 var(--font-body); font-family: inherit;
  box-shadow: 0 10px 22px rgba(236, 95, 147, 0.3);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease;
}
.bil-cta:active { transform: scale(.985); }
.bil-cta .icon { display: inline-flex; }
.bil-more {
  align-self: center; display: inline-flex; align-items: center; gap: 2px; padding: 8px;
  border: 0; background: none; color: #c2416f; font: 700 14.5px/1 var(--font-body); font-family: inherit; cursor: pointer;
}
.bil-more .icon { display: inline-flex; }
.bil-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px 22px; text-align: center; }
.bil-empty img { width: min(56vw, 210px); height: auto; }
.bil-empty span { font-size: 15px; color: var(--ink-soft); }

/* ---- the plans (client/core/billing.js plansView) ------------------------------------ */
.pln-have { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px; background: #FFF0F5; color: #c2416f; font-size: 14.5px; font-weight: 700; }
.pln-have .icon { display: inline-flex; }
.pln-off { margin: 0; padding: 12px 14px; border-radius: 16px; background: #F3F4F7; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.pln-cards { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.pln-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 14px; border-radius: 24px; background: #fff;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
  animation: bdg-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.pln-card.is-lead { box-shadow: 0 0 0 2px #EC5F93, 0 14px 30px rgba(236, 95, 147, 0.16); }
.pln-ribbon {
  position: absolute; top: -12px; right: 18px; padding: 6px 12px; border-radius: 999px;
  background: #EC5F93; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 6px 14px rgba(236, 95, 147, 0.3);
}
.pln-head { display: flex; align-items: center; gap: 14px; }
.pln-art { flex: none; width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(60, 40, 60, 0.18)); }
.pln-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pln-name b { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pln-name small { font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.pln-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.pln-price b { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.pln-per { margin-left: -6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.pln-price small { font-size: 13.5px; color: #9AA0AE; }
.pln-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; border: 0; border-radius: 16px; background: var(--ink); color: #fff;
  font: 700 17px/1 var(--font-body); font-family: inherit;
  box-shadow: 0 8px 18px rgba(23, 24, 28, 0.16);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, opacity .15s ease;
}
.pln-card.is-lead .pln-cta { background: #EC5F93; box-shadow: 0 10px 22px rgba(236, 95, 147, 0.3); }
.pln-cta:active { transform: scale(.985); }
.pln-cta .icon { display: inline-flex; }
.pln-cta.is-busy { opacity: .7; pointer-events: none; }
.pln-cta.is-current, .pln-card.is-lead .pln-cta.is-current { background: #F1F2F6; color: var(--ink-soft); box-shadow: none; cursor: default; }
.pln-note { margin: -4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft); text-align: center; }
.pln-note:empty { display: none; }
.pln-note.is-bad { color: #C2334F; }
.pln-benefits { padding-top: 8px; border-top: 1px solid rgba(23, 24, 28, 0.08); }
.pln-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pln-list[hidden] { display: none; }
.pln-b { display: grid; grid-template-columns: 22px 1fr 32px; align-items: center; column-gap: 10px; min-height: 42px; }
.pln-check { display: inline-flex; color: #22A86B; }
.pln-b-text { font-size: 15px; line-height: 1.35; color: var(--ink); }
.pln-help {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: #A3A8B4; cursor: pointer;
}
.pln-help .icon { display: inline-flex; }
.pln-help[aria-expanded="true"] { color: #c2416f; background: #FFF0F5; }
.pln-b-more { grid-column: 2 / 4; margin: -2px 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.pln-b-more[hidden] { display: none; }
.pln-all {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 8px 0;
  border: 0; background: none; color: #c2416f; font: 700 15px/1 var(--font-body); font-family: inherit; cursor: pointer;
}
.pln-all .icon { display: inline-flex; transition: transform .2s ease; }
.pln-all[aria-expanded="true"] .icon { transform: rotate(180deg); }
.pln-terms { margin: 0; font-size: 12.5px; line-height: 1.45; color: #8C909B; }
.pln-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 12px 24px; text-align: center; }
.pln-foot p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #8C909B; }
.pln-links { display: flex; gap: 8px; justify-content: center; }
.pln-links a { color: var(--ink-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pln-restore { padding: 10px; border: 0; background: none; color: #c2416f; font: 700 14.5px/1 var(--font-body); font-family: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pln-card { animation: none; } }

/* ---- Profile's top (2026-10-13): who you are and your numbers -------------------------
   The hero is a white card like every other one (the pink-to-lilac-to-blue wash was the
   user's least favourite part); the colour lives in the avatar's ring now. The numbers are
   ONE white card of three columns — strips, games, member since — each led by the coloured
   tile Settings uses, in place of two pastel tiles. */
.acct-overlay.is-page .acct-hero {
  background: #fff;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
}
.acct-overlay.is-page .acct-hero-avatar { width: 64px; height: 64px; }
.acct-overlay.is-page .acct-hero-avatar:has(.avatar-pic) {
  padding: 4px;
  background: linear-gradient(135deg, #FF8FB1 0%, #B7A4F5 50%, #8FB8FF 100%);
  box-shadow: 0 6px 16px rgba(60, 40, 60, 0.12);
}
.acct-overlay.is-page .acct-hero-avatar:has(.avatar-pic) .avatar-pic { box-shadow: 0 0 0 2px #fff; }

.acct-stats.is-card {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  padding: 14px 4px 13px; border-radius: 22px; background: #fff;
  box-shadow: 0 8px 22px rgba(60, 40, 60, 0.06);
}
.acct-stats.is-card > .acct-stat,
.acct-overlay.is-page .acct-stats.is-card > .acct-stat:nth-child(n) {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0; padding: 2px 6px; border: 0; border-radius: 0;
  background: none; box-shadow: none; text-align: center;
}
.acct-stats.is-card > .acct-stat + .acct-stat::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
  background: rgba(23, 24, 28, 0.08);
}
.acct-stats.is-card .acct-set-ic.is-tile { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 3px; }
.acct-stats.is-card .acct-stat-num,
.acct-overlay.is-page .acct-stats.is-card > .acct-stat:nth-child(n) .acct-stat-num {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 21px; line-height: 1.1;
}
.acct-stats.is-card .acct-stat-label,
.acct-overlay.is-page .acct-stats.is-card > .acct-stat:nth-child(n) .acct-stat-label {
  font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ink-soft);
}

/* ---- profile: Premium, said with a little joy (account.js premiumCard, 2026-10-13) ------
   The pair-in-a-heart pin floats on a soft pink→lilac→blue card, four sparkles twinkle
   round it, a shine runs across the plan pill now and then (the three "what's open"
   chips came off — too big). The whole card opens Billing. Motion stops for reduced-motion. */
.acct-pro {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 18px 14px 16px 18px; border: 0; border-radius: 24px; overflow: hidden; text-align: left;
  background: linear-gradient(135deg, #FFE3EE 0%, #F3E6FF 52%, #DDEBFF 100%);
  box-shadow: 0 14px 34px rgba(160, 110, 200, .18), inset 0 0 0 1px rgba(255, 255, 255, .7);
  color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: acct-pro-in .55s cubic-bezier(.2, .8, .2, 1) backwards;
  transition: transform .15s ease;
}
.acct-pro:active { transform: scale(.985); }
.acct-pro-glow {
  position: absolute; right: -24%; bottom: -60%; width: 72%; height: 150%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}
.acct-pro-art {
  order: 2; flex: none; width: 98px; height: 98px; margin-left: auto; position: relative; z-index: 1;
  filter: drop-shadow(0 10px 14px rgba(120, 80, 160, .25));
  animation: acct-pro-float 3.6s ease-in-out infinite;
}
.acct-pro-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.acct-pro-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.acct-pro-pill {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; background: #fff; color: #C2416F;
  font-size: 12.5px; font-weight: 800; box-shadow: 0 4px 10px rgba(236, 95, 147, .18);
}
.acct-pro-pill .icon { display: inline-flex; color: #F2B01E; }
.acct-pro-pill::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .95) 50%, transparent 70%);
  transform: translateX(-130%); animation: acct-pro-shine 3.4s ease-in-out 1s infinite;
}
.acct-pro-title { font-size: 19px; font-weight: 850; letter-spacing: -.02em; line-height: 1.15; }
.acct-pro-sub { font-size: 13px; color: var(--ink-soft); }
.acct-pro-manage { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; font-size: 13.5px; font-weight: 800; color: #C2416F; }
.acct-pro-manage .icon { display: inline-flex; transition: transform .2s ease; }
.acct-pro:hover .acct-pro-manage .icon { transform: translateX(3px); }
.acct-pro-spark {
  position: absolute; z-index: 2; width: 12px; height: 12px; pointer-events: none; background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: acct-pro-twinkle 2.4s ease-in-out infinite;
}
.acct-pro-spark.is-1 { top: 14px; right: 116px; animation-delay: .2s; }
.acct-pro-spark.is-2 { top: 12px; right: 16px; width: 14px; height: 14px; background: #FFE08A; animation-delay: .9s; }
.acct-pro-spark.is-3 { bottom: 16px; right: 104px; width: 9px; height: 9px; animation-delay: 1.5s; }
.acct-pro-spark.is-4 { bottom: 30px; right: 10px; width: 10px; height: 10px; background: #FFD1E1; animation-delay: .5s; }
@keyframes acct-pro-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes acct-pro-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes acct-pro-shine { 0% { transform: translateX(-130%); } 35%, 100% { transform: translateX(130%); } }
@keyframes acct-pro-twinkle { 0%, 100% { opacity: .15; transform: scale(.45) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---- Settings → Language, a page (account.js languagePanel, 2026-10-13) ----------------
   No drop-down: every language a big row with its round flag, the current one ticked. */
.acct-lang-list { display: flex; flex-direction: column; gap: 10px; }
.acct-lang-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 74px; box-sizing: border-box;
  padding: 12px 16px; border: 2px solid transparent; border-radius: 20px; background: #fff;
  box-shadow: 0 6px 16px rgba(60, 40, 60, .06); color: var(--ink); font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: acct-lg-rise .4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms);
  transition: border-color .15s ease, transform .12s ease;
}
.acct-lang-opt:active { transform: scale(.98); }
.acct-lang-opt.is-on { border-color: #EC5F93; background: linear-gradient(180deg, #FFF5F8, #fff); }
.acct-lang-opt-flag { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .12); }
.acct-lang-opt-flag svg { display: block; width: 100%; height: 100%; }
.acct-lang-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-lang-opt-text b { font-size: 16.5px; font-weight: 800; }
.acct-lang-opt-text small { font-size: 13px; color: var(--ink-soft); }
.acct-lang-opt-check {
  flex: none; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #D9DCE3; color: transparent;
}
.acct-lang-opt-check .icon { display: inline-flex; }
.acct-lang-opt.is-on .acct-lang-opt-check { border-color: #EC5F93; background: #EC5F93; color: #fff; animation: acct-lg-pop .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes acct-lg-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes acct-lg-pop { from { transform: scale(.4); } to { transform: scale(1); } }

/* ---- Settings → Gender (account.js genderPanel, 2026-10-23): the two drawings ------------- */
.acct-gender-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-gender {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 10px 14px; border: 2px solid transparent; border-radius: 22px; background: #fff;
  box-shadow: 0 8px 22px rgba(60, 40, 60, .07); font: inherit; color: var(--ink); cursor: pointer;
  transition: transform .12s ease, border-color .15s ease;
}
.acct-gender:active { transform: scale(.97); }
.acct-gender.is-on { border-color: #EC5F93; box-shadow: 0 0 0 4px rgba(236, 95, 147, .14), 0 8px 22px rgba(60, 40, 60, .07); }
.acct-gender-pic { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; }
.acct-gender-pic.is-male { background: #E6F0FF; }
.acct-gender-pic.is-female { background: #FFE6EF; }
.acct-gender-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateY(6%) scale(1.06); }
.acct-gender-label { font-size: 16px; font-weight: 800; }
.acct-gender-tick {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: #EC5F93; color: #fff;
}

/* ---- Settings → Your name (account.js namePanel, 2026-10-13) ---------------------------- */
.acct-name-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 18px 18px; border-radius: 24px; background: #fff; box-shadow: 0 8px 22px rgba(60, 40, 60, .07);
}
.acct-name-ava {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(60, 40, 60, .14);
  animation: acct-name-bob 3.4s ease-in-out infinite;
}
.acct-name-ava .avatar-pic { display: grid; place-items: center; width: 100%; height: 100%; font-size: 30px; font-weight: 800; color: #fff; }
.acct-name-ava .avatar-pic img { width: 100%; height: 100%; object-fit: cover; }
.acct-name-label { align-self: flex-start; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink-soft); }
.acct-name-input {
  box-sizing: border-box; width: 100%; min-height: 54px; padding: 0 16px;
  border: 2px solid #E3E5EA; border-radius: 16px; background: #F8F9FB; color: var(--ink);
  font: 800 19px/1 var(--font-body); font-family: inherit; outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.acct-name-input:focus { border-color: #EC5F93; background: #fff; box-shadow: 0 0 0 4px rgba(236, 95, 147, .14); }
.acct-name-hint { align-self: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.acct-name-save { margin-top: 14px; }
.acct-name-save.is-done { background: #11885A; }
.acct-name-note { margin: 8px 0 0; min-height: 18px; text-align: center; font-size: 13.5px; font-weight: 700; color: #11885A; }
.acct-name-note.is-bad { color: #C2334F; }
@keyframes acct-name-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- Settings → Game log, a page (account.js gameLogPanel, 2026-10-13) ------------------
   Three numbers on top that count up, then every game by day on its own coin and tint; the
   rows rise in one after another, and a win's trophy gives a little wiggle now and then. */
.glg { display: flex; flex-direction: column; gap: 18px; }
.glg-skel { height: 64px; border-radius: 18px; background: linear-gradient(100deg, #EEF0F5 30%, #F7F8FB 50%, #EEF0F5 70%) 0 0 / 200% 100%; animation: glg-skel 1.2s ease-in-out infinite; }
.glg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.glg-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 12px 12px;
  border-radius: 20px; background: #fff; box-shadow: 0 6px 16px rgba(60, 40, 60, .06);
  animation: glg-rise .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.glg-stat-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 4px 10px rgba(60, 40, 60, .14); }
.glg-stat-ic .icon { display: inline-flex; }
.glg-stat-num { font-size: 24px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.glg-stat small { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.glg-day { display: flex; flex-direction: column; gap: 8px; }
.glg-day-h { margin: 0 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.glg-list { display: flex; flex-direction: column; gap: 8px; }
.glg-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px;
  border-radius: 20px; background: #fff; box-shadow: 0 6px 16px rgba(60, 40, 60, .06);
  animation: glg-rise .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(120ms + var(--i, 0) * 45ms);
}
.glg-item.is-won { box-shadow: 0 6px 16px rgba(17, 136, 90, .1), inset 0 0 0 1.5px rgba(17, 136, 90, .18); }
.glg-coin { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--tint); color: #4B4757; }
.glg-coin img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(60, 40, 60, .18)); }
.glg-coin svg { display: block; }
.glg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.glg-text b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glg-text small { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glg-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.glg-score { font: 700 12.5px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #4B4757; }
.glg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #F1F2F6; color: #5B5E68; }
.glg-pill .icon { display: inline-flex; }
.glg-pill.is-won { background: #E3F7EC; color: #11885A; }
.glg-pill.is-won .icon { transform-origin: 50% 80%; animation: glg-wiggle 2.6s ease-in-out 1.2s infinite; }
.glg-pill.is-lost { background: #FFE6EE; color: #C2416F; }
.glg-pill.is-team { background: #E6F0FF; color: #2F6FD0; }
.glg-empty, .glg-locked {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px 22px;
  border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 8px 22px rgba(60, 40, 60, .07);
  animation: glg-rise .45s cubic-bezier(.2, .8, .2, 1) backwards;
}
.glg-empty-art, .glg-locked-art { width: 110px; height: 110px; object-fit: contain; animation: acct-name-bob 3.4s ease-in-out infinite; }
.glg-empty b, .glg-locked b { font-size: 18px; font-weight: 850; }
.glg-empty span, .glg-locked span { max-width: 300px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.glg-empty .bil-cta, .glg-locked .bil-cta { margin-top: 8px; width: 100%; text-decoration: none; }
@keyframes glg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glg-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
@keyframes glg-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .acct-pro, .acct-pro-art, .acct-pro-pill::after, .acct-pro-spark,
  .acct-lang-opt, .acct-lang-opt.is-on .acct-lang-opt-check, .acct-name-ava,
  .glg-stat, .glg-item, .glg-skel, .glg-pill.is-won .icon, .glg-empty, .glg-locked, .glg-empty-art, .glg-locked-art { animation: none; }
}

/* ==== Profile on an iPad and on the web (768px and up, 2026-10-19, second round the same day) ===
   Beside the app's sidebar (client/core/tabbar.js). The page frame — every page CENTRED in the
   space beside the sidebar with a thin padding at its sides (--acct-pad), the one-list pages
   880px wide — is at the end of client/ui/app.css; here Profile, the plans and the badges are
   wide (up to 1440px) and Settings' two columns up to 1280px. Phones (below 768px) are
   untouched: every rule here sits under a min-width query, and the few pieces account.js,
   acctPage.js and coupleCard.js add for the wide layout (the Settings label, the empty strips'
   picture and line, the couple card's picture, a page head's sticker, Settings' two column
   wrappers) are hidden or display:contents below it.

   The ground: no flat grey. From 768px the pages sit on white with the sidebar's own pastel
   wash (soft pink from the top left, soft blue from the bottom right), and every card gets a
   hairline so white cards still read as cards on the light ground.

   Profile:
     768-1023   an iPad held upright, beside the 76px rail: one column in the phone's order, with
                the numbers lifted up to be the hero's lower half (one card: who you are over
                what you've made together).
     1024-1279  iPad landscape and small laptops: a grid. The hero card across the top with the
                numbers its lower half; then the plan beside the badges and the print studio, the
                couple card beside the room, and the strips across the whole width, where a long
                gallery can grow without unbalancing either column; log out at the foot.
     1280+      the same grid, the numbers inline on the hero's right: one row.
   Pairs share a row and stretch to one height, so the cards line up; the room's picture is what
   gives (it fills whatever height the couple card asks for). One look per kind of button:
   signing in is ink (the hero's and the couple card's are the same button), paying is pink (Try
   Unlimited, Unlock: Billing's "Choose a plan" and the plans' lead card are pink too), going to
   make something is the white pink-rimmed button ("Take one", like "Play a game together").

   My strips fill their row: four or more share it out evenly (each preview growing with its
   place, up to a cap), one to three sit centred at a generous size, so a few strips never leave
   the card half empty.

   The pages behind it: Settings has the pair waving beside its title, and from 1200px its groups
   in two columns (Personal + Your games | Subscription + print orders + About) under a head
   across both; the one-list pages keep the 880px column; the plans three across where they fit
   (the free plan centred under the other two where only two do); the badges page puts the main
   badge beside its four groups, two by two. */

/* the pieces the wide layout adds: never on a phone, nor in a game's overlay — and every picture
   among them carries its size at every width, so it can never show at its natural size */
.acct-gear-label, .acct-empty-art, .acct-empty-sub, .acct-couple-art, .acct-sub-art { display: none; }
.acct-sub-art { width: 96px; height: 79px; object-fit: contain; }
.acct-empty-art { width: 150px; height: 150px; object-fit: contain; }
.acct-couple-art { width: 210px; max-width: 100%; height: 150px; object-fit: contain; }
.acct-set-cols, .acct-set-col { display: contents; }

@media (min-width: 768px) {
  /* ---- the ground: white and the sidebar's wash, in the space beside it */
  .acct-overlay.is-page {
    --acct-ring: 0 0 0 1px rgba(23, 24, 28, 0.06);
    background:
      radial-gradient(120% 46vh at 0% 0%, rgba(255, 214, 229, .38), transparent 62%),
      radial-gradient(120% 40vh at 100% 100%, rgba(207, 223, 255, .42), transparent 62%),
      #fff;
  }
  /* cards on it: a hairline under the soft shadow */
  .acct-overlay.is-page :is(.acct-hero, .acct-stats.is-card, .acct-status-card, .bdg-card, .acct-couple, .acct-history,
    .acct-make, .acct-set-card, .acct-name-card, .acct-lang-opt:not(.is-on), .bil-plan, .pln-card:not(.is-lead), .bdg-main,
    .bdg-cat, .glg-stat, .glg-item:not(.is-won), .glg-empty, .glg-locked) {
    box-shadow: var(--acct-ring), 0 8px 24px rgba(60, 40, 60, 0.06);
  }

  /* ---- a page head's sticker, beside the title (Settings: the pair waving) */
  .acct-overlay.is-page .acct-sub { position: relative; }
  .acct-overlay.is-page .acct-sub-art {
    display: block; position: absolute; z-index: 0;
    top: calc(66px + env(safe-area-inset-top, 0px)); right: var(--acct-pad, 28px);
    width: 96px; height: 79px; pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(60, 40, 60, 0.12));
  }

  /* ---- the head: the big title, and Settings as a labelled button at the column's edge */
  .acct-overlay.is-page .acct-profile > .acct-head { gap: 16px; }
  .acct-overlay.is-page .acct-profile .acct-gear {
    display: inline-flex; align-items: center; gap: 8px;
    width: auto; height: 42px; padding: 0 17px 0 14px; border-radius: 14px;
    color: var(--ink); font: 700 14.5px/1 var(--font-body); font-family: inherit;
    transition: background-color .15s ease, transform .15s ease;
  }
  .acct-overlay.is-page .acct-profile .acct-gear .icon { transition: transform .3s ease; }
  .acct-overlay.is-page .acct-profile .acct-gear:active { transform: scale(.97); }
  .acct-overlay.is-page .acct-profile .acct-gear:active .icon { transform: rotate(-40deg); }
  .acct-overlay.is-page .acct-gear-label { display: inline; }

  /* ---- who you are: one card, the numbers its lower half (beside it from 1280px). Each half's
     shadow is clipped at the seam so the two read as one card. */
  .acct-overlay.is-page .acct-profile > .acct-hero {
    padding: 22px 24px 20px; border-radius: 24px 24px 0 0;
    clip-path: inset(-40px -40px 0 -40px);
  }
  .acct-overlay.is-page .acct-profile .acct-hero-top { gap: 18px; }
  .acct-overlay.is-page .acct-profile .acct-hero-avatar { width: 76px; height: 76px; }
  .acct-overlay.is-page .acct-profile .acct-hero-avatar-badge { width: 26px; height: 26px; }
  .acct-overlay.is-page .acct-profile .acct-hero-name { font-size: 27px; line-height: 1.15; }
  .acct-overlay.is-page .acct-profile .acct-hero-sub { margin-top: 3px; font-size: 14px; }
  .acct-overlay.is-page .acct-profile > .acct-stats.is-card {
    position: relative; margin-top: -16px; padding: 18px 12px;
    border-radius: 0 0 24px 24px;
    clip-path: inset(0 -40px -40px -40px);
  }
  .acct-overlay.is-page .acct-profile > .acct-stats.is-card::before {
    content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
    background: rgba(23, 24, 28, 0.07);
  }
  .acct-overlay.is-page .acct-profile .acct-stats.is-card > .acct-stat:nth-child(n) .acct-stat-num { font-size: 23px; }
  .acct-overlay.is-page .acct-profile .acct-stats.is-card > .acct-stat:nth-child(n) .acct-stat-label { font-size: 12.5px; }

  /* ---- one look per kind of button. Signing in: ink, the hero's and the couple card's alike. */
  .acct-overlay.is-page .acct-profile .acct-hero-signin,
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-link-primary {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 116px; min-height: 44px; padding: 0 22px;
    border: 0; border-radius: 14px; background: var(--ink); color: #fff;
    box-shadow: 0 6px 16px rgba(23, 24, 28, 0.16);
    font: 700 15px/1 var(--font-body); font-family: inherit;
    transition: background-color .15s ease, transform .15s ease;
  }
  /* Paying: pink. */
  .acct-overlay.is-page .acct-profile .acct-upgrade,
  .acct-overlay.is-page .acct-profile .acct-markbar .btn-primary {
    background: #EC5F93; color: #fff; box-shadow: 0 10px 22px rgba(236, 95, 147, 0.26);
  }
  /* Going to make something: white, a pink rim. */
  .acct-overlay.is-page .acct-profile .acct-empty-go {
    grid-area: go; justify-self: start; min-height: 44px; padding: 0 22px; margin-top: 16px;
    border: 1.5px solid #EC5F93; border-radius: 14px; background: #fff; color: #c2416f;
    font-size: 15px; font-weight: 700;
    transition: background-color .15s ease;
  }

  /* ---- your plan, the badges: the same card family, a touch roomier */
  .acct-overlay.is-page .acct-profile .acct-status-card { gap: 14px; padding: 18px 20px; border-radius: 22px; }
  .acct-overlay.is-page .acct-profile .acct-free-art { width: 62px; height: 62px; }
  .acct-overlay.is-page .acct-profile .acct-plan-free { font-size: 18px; }
  .acct-overlay.is-page .acct-profile .acct-status-sub { font-size: 13.5px; }
  .acct-overlay.is-page .acct-profile .bdg-card { padding: 16px 20px 16px 14px; }

  /* ---- the couple card for a guest: a row like the hero's, heart, words, the same Sign in */
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-couple-top { flex: 1 1 auto; }

  /* ---- my strips. Four or more share the row out (auto-fit: no empty places at its end), each
     preview as tall as its width allows (3:4, up to 320px) so a wider place shows a bigger strip;
     one to three sit centred at up to 300px each. The strip lies on the white card with a soft
     shadow, like a print, instead of in a grey box (a locked one keeps its blur). With none yet,
     the pair holding a strip beside the words (centred on the picture by the two flexible rows
     around them). */
  .acct-overlay.is-page .acct-profile .acct-history { padding: 18px; border-radius: 22px; }
  .acct-overlay.is-page .acct-profile .acct-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
  /* one, two or three strips: exactly that many places, up to 300px each, centred (counted with
     :has — an auto-fit track with a fixed maximum would count its columns by that maximum) */
  .acct-overlay.is-page .acct-profile .acct-grid:has(> .acct-thumb:first-child:last-child) { grid-template-columns: minmax(0, 300px); justify-content: center; }
  .acct-overlay.is-page .acct-profile .acct-grid:has(> .acct-thumb:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
  .acct-overlay.is-page .acct-profile .acct-grid:has(> .acct-thumb:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; }
  .acct-overlay.is-page .acct-profile .acct-thumb { padding: 10px 10px 8px; border-radius: 16px; }
  .acct-overlay.is-page .acct-profile .acct-thumb img,
  .acct-overlay.is-page .acct-profile .acct-thumb-missing { height: auto; aspect-ratio: 3 / 4; max-height: 320px; }
  .acct-overlay.is-page .acct-profile .acct-thumb img { background: transparent; }
  .acct-overlay.is-page .acct-profile .acct-thumb img:not(.is-blurred) { filter: drop-shadow(0 6px 12px rgba(60, 40, 60, 0.14)); }
  .acct-overlay.is-page .acct-profile .acct-thumb-date { margin-top: 4px; font-size: 11.5px; }
  .acct-overlay.is-page .acct-profile .acct-empty {
    display: grid; grid-template-columns: auto minmax(0, max-content);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "art ." "art title" "art sub" "art go" "art .";
    justify-content: center; align-items: start; column-gap: 28px; row-gap: 0;
    padding: 6px 12px; text-align: left;
  }
  .acct-overlay.is-page .acct-profile .acct-empty-mark { display: none; }
  .acct-overlay.is-page .acct-profile .acct-empty-art {
    display: block; grid-area: art; align-self: center;
    width: 150px; height: 150px; object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(60, 40, 60, 0.12));
  }
  .acct-overlay.is-page .acct-profile .acct-empty > .acct-note {
    grid-area: title; padding: 0;
    font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
  }
  .acct-overlay.is-page .acct-profile .acct-empty-sub {
    display: block; grid-area: sub; max-width: 30ch; margin-top: 5px;
    font-size: 14.5px; line-height: 1.45; color: var(--ink-soft);
  }

  /* the room: its words as wide as its picture (the booth's own .room-card centres a column's
     items, which only showed once the card was wider than its sentence) */
  .acct-overlay.is-page .acct-profile .acct-room-card { align-items: stretch; }

  /* ---- the pages behind Profile with more to show. The badges: a group's pins share the row
     out evenly (auto-fit, so three pins never huddle on the left of six empty places); all
     twelve go four to a row (six from 1200px), never eleven and one. The plans: side by side,
     two to a row here; where only two fit, the free plan sits centred under them at a card's
     width rather than alone on the left. */
  .acct-overlay.is-page .bdg-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .acct-overlay.is-page .bdg-grid:has(> .bdg-item:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acct-overlay.is-page .pln-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-top: 14px; }
  .acct-overlay.is-page .pln-cards > .pln-card.is-free:nth-child(odd):last-child {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px);
  }
}

/* hover only where a pointer really hovers (a tapped iPad would keep it stuck on) */
@media (min-width: 768px) and (hover: hover) {
  .acct-overlay.is-page .acct-profile .acct-gear:hover { background: #F6F6F9; }
  .acct-overlay.is-page .acct-profile .acct-hero-signin:hover,
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-link-primary:hover { background: #2C2D33; }
  .acct-overlay.is-page .acct-profile .acct-upgrade:hover:not(:disabled),
  .acct-overlay.is-page .acct-profile .acct-markbar .btn-primary:hover:not(:disabled) { background: #E2558A; }
  .acct-overlay.is-page .acct-profile .acct-empty-go:hover { background: #FFF4F8; }
  .acct-overlay.is-page .acct-profile .bdg-card:hover,
  .acct-overlay.is-page .acct-profile .acct-make:hover { box-shadow: var(--acct-ring), 0 12px 28px rgba(60, 40, 60, 0.1); }
}

/* 768-1023: one column in the phone's order, the numbers lifted up under the hero */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .acct-overlay.is-page .acct-profile > :not(.acct-head, .acct-hero, .acct-stats) { order: 1; }
  .acct-overlay.is-page .acct-profile > .acct-status:empty { display: none; }
}

/* 1024 and up: Profile's grid, the wider pages */
@media (min-width: 1024px) {
  .acct-overlay.is-page .acct-panel.acct-profile {
    max-width: 1440px;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* the plan card beside the badges and the print studio (the two short cards together are its
       height), the couple card beside the room (whose picture takes up any difference) */
    grid-template-areas:
      "head    head"
      "hero    hero"
      "stats   stats"
      "plan    badges"
      "plan    make"
      "couple  room"
      "slabel  slabel"
      "strips  strips"
      "logout  logout";
    column-gap: 22px; row-gap: 0; align-content: start; align-items: stretch;
  }
  /* no plan card on this deployment (nothing for sale): the badges and the print studio share
     a row */
  .acct-overlay.is-page .acct-panel.acct-profile:has(> .acct-status:empty) {
    grid-template-areas:
      "head    head"
      "hero    hero"
      "stats   stats"
      "badges  make"
      "couple  room"
      "slabel  slabel"
      "strips  strips"
      "logout  logout";
  }
  .acct-overlay.is-page .acct-profile > * { min-width: 0; margin-top: 20px; }
  .acct-overlay.is-page .acct-profile > .acct-head { grid-area: head; margin-top: 0; }
  .acct-overlay.is-page .acct-profile > .acct-hero { grid-area: hero; }
  .acct-overlay.is-page .acct-profile > .acct-stats.is-card { grid-area: stats; margin-top: 0; }
  .acct-overlay.is-page .acct-profile > .acct-status { grid-area: plan; }
  .acct-overlay.is-page .acct-profile > .acct-status:empty { display: none; }
  .acct-overlay.is-page .acct-profile > .acct-status > * { flex: 1 1 auto; }
  .acct-overlay.is-page .acct-profile .acct-status-card .acct-upgrade { margin-top: auto; } /* the button at the card's foot */
  .acct-overlay.is-page .acct-profile > .bdg-card { grid-area: badges; }
  .acct-overlay.is-page .acct-profile > .acct-couple { grid-area: couple; }
  /* the strips section opens up so its four pieces take their own places */
  .acct-overlay.is-page .acct-profile > .acct-strips { display: contents; }
  .acct-overlay.is-page .acct-profile .acct-strips-head { grid-area: slabel; margin-top: 34px; }
  .acct-overlay.is-page .acct-profile .acct-strips-head .acct-label { margin: 0; }
  .acct-overlay.is-page .acct-profile .acct-history { grid-area: strips; margin-top: 12px; }
  .acct-overlay.is-page .acct-profile .acct-room-card { grid-area: room; margin: 20px 0 0; }
  .acct-overlay.is-page .acct-profile .acct-room-card .room-card-pic { position: relative; flex: 1 1 auto; aspect-ratio: auto; min-height: 150px; }
  .acct-overlay.is-page .acct-profile .acct-room-card .room-card-pic img { position: absolute; inset: 0; }
  .acct-overlay.is-page .acct-profile .acct-make { grid-area: make; margin-top: 16px; }
  .acct-overlay.is-page .acct-profile:has(> .acct-status:empty) .acct-make { margin-top: 20px; }
  .acct-overlay.is-page .acct-profile > .acct-logout-wrap { grid-area: logout; justify-self: center; width: min(100%, 380px); margin: 30px 0 0; }

  /* the couple card for a guest, beside the room: the two hearts under their plane, the words,
     the same ink Sign in, centred in the card */
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest {
    flex-direction: column; justify-content: center; align-items: center; gap: 12px;
    padding: 24px 28px; text-align: center;
  }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-couple-art {
    display: block; width: 210px; height: 150px; margin-bottom: 2px;
    filter: drop-shadow(0 8px 14px rgba(60, 40, 60, 0.12));
  }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-couple-top { flex: none; flex-direction: column; gap: 0; }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-link-ic { display: none; }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-link-titles { align-items: center; gap: 5px; }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-link-titles b { font-size: 19px; }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-link-titles small { max-width: 36ch; font-size: 14px; line-height: 1.45; }
  .acct-overlay.is-page .acct-profile .acct-couple.is-guest .acct-link-primary { margin-top: 6px; }

  .acct-overlay.is-page .acct-profile .acct-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }

  /* the wider pages behind Profile, centred like the rest: the plans and the badges as wide as
     Profile (a badge on its own keeps the reading column) */
  .acct-overlay.is-page .acct-panel.pln-page { max-width: 1440px; }
  .acct-overlay.is-page .acct-panel.bdg-page:not(.bdg-detail) { max-width: 1440px; }
  .acct-overlay.is-page .bdg-item .bdg-pin { width: min(124px, 100%); height: auto; aspect-ratio: 1 / 1; }
  /* the badges page: the main badge beside its four groups, two by two, one height */
  .acct-overlay.is-page .acct-panel.bdg-page:has(> .bdg-main) {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); column-gap: 22px; align-items: stretch;
  }
  .acct-overlay.is-page .acct-panel.bdg-page:has(> .bdg-main) > :not(.bdg-main, .bdg-cats) { grid-column: 1 / -1; }
  .acct-overlay.is-page .acct-panel.bdg-page:has(> .bdg-main) > .bdg-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1200 and up: Settings in two columns under one head (up to 1280px); the plans three across
   (the free plan back in its own place) */
@media (min-width: 1200px) {
  .acct-overlay.is-page .acct-panel.acct-set-home { max-width: 1280px; }
  .acct-overlay.is-page .acct-set-home .acct-set-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start;
  }
  .acct-overlay.is-page .acct-set-home .acct-set-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .acct-overlay.is-page .pln-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acct-overlay.is-page .pln-cards > .pln-card.is-free:nth-child(odd):last-child { grid-column: auto; justify-self: stretch; width: auto; }
  .acct-overlay.is-page .bdg-grid:has(> .bdg-item:nth-child(7)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 1280 and up: the numbers move up beside who you are, the hero one row */
@media (min-width: 1280px) {
  .acct-overlay.is-page .acct-panel.acct-profile { column-gap: 24px; }
  .acct-overlay.is-page .acct-profile > .acct-hero {
    padding: 24px 28px; padding-right: calc(min(42%, 460px) + 56px);
    border-radius: 24px; clip-path: none;
  }
  .acct-overlay.is-page .acct-profile > .acct-stats.is-card {
    grid-area: hero; align-self: center; justify-self: end; z-index: 1;
    width: min(42%, 460px); margin: 20px 28px 0 0; padding: 4px 0 4px 26px;
    border-radius: 0; background: none; box-shadow: none; clip-path: none;
  }
  .acct-overlay.is-page .acct-profile > .acct-stats.is-card::before { left: 0; right: auto; top: 4%; bottom: 4%; width: 1px; height: auto; }
  /* who you are and your one action stay together on the left; the numbers are the right half */
  .acct-overlay.is-page .acct-profile .acct-hero-id { flex: 0 1 auto; }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .acct-overlay.is-page .acct-profile :is(.acct-gear, .acct-gear .icon, .acct-hero-signin, .acct-link-primary, .acct-empty-go) { transition: none; }
}

/* My strips on the Profile tab: ONE row, and "See all" beside the title opens the strips page
   (account.js, 2026-10-20). Rows after the first are 0px tall and clipped; a little padding keeps
   the cards' shadows. */
.acct-overlay.is-page .acct-profile .acct-grid.is-one-row,
.acct-grid.is-one-row { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; padding: 4px; margin: -4px; }
.acct-strips-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acct-see-all {
  flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 6px 0 12px;
  border-radius: 999px; color: #c2416f; font-size: 14px; font-weight: 700; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.acct-see-all[hidden] { display: none; }
.acct-see-all:hover { background: #FFF3F7; }
.acct-see-all:focus-visible { outline: 2px solid #c2416f; outline-offset: 2px; }