/* Accounts, favorites and ad spots on the home shell (2026-10-04). Extends arcade.css; same tokens.
   Coral keeps its one meaning (active / chosen): a favorited heart is coral, nothing else here is. */

/* ---------------------------------------------------------------- nav: Sign in / picture */
.acct { margin-left: auto; display: flex; align-items: center; flex: none; min-width: 2.4rem; justify-content: flex-end; }
.acct-signin {
  min-height: 2.3rem; padding: 0 .95rem; border-radius: 6px;
  background: transparent; color: var(--text); border: 1px solid #6a7386;
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.acct-signin:hover { background: rgba(255, 255, 255, .06); border-color: #9aa2b2; }
.acct-me {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden;
  background: var(--panel-2); border: 2px solid rgba(255, 255, 255, .85); text-decoration: none;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .8);
  transition: transform .3s var(--ease), border-color .15s;
}
.acct-me:hover { transform: scale(1.06); }
.acct-me[aria-current="page"] { border-color: var(--coral); }
.acct-me img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-initial { font-weight: 900; font-style: italic; font-stretch: 80%; font-size: 1.05rem; color: var(--text); }
.acct-wait { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--panel); opacity: .6; }

/* ---------------------------------------------------------------- the sign-in box (redesigned 2026-10-11): a dark
   centred card with a crest, a big title, Google and GitHub, an email field and one big rounded button.
   Same pieces on /account/ when signed out. */
.acct-ways { display: grid; gap: .65rem; }

/* Google and GitHub: full-width pills, mark and words centred together */
.acct-google, .acct-github {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.05rem; padding: 0 1.4rem; border-radius: 999px;
  font: inherit; font-size: .98rem; font-weight: 700; cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .2s, transform .2s var(--ease);
}
.acct-ways .acct-google, .acct-ways .acct-github { width: 100%; }
.acct-google { background: #fff; color: #1f1f1f; border: 1px solid #fff; }
.acct-google svg { width: 1.2rem; height: 1.2rem; flex: none; }
.acct-google:hover { background: #eef1f4; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .9); transform: translateY(-1px); }
.acct-github { background: #1c2129; color: #fff; border: 1px solid #3d4552; }
.acct-github svg { width: 1.2rem; height: 1.2rem; flex: none; }
.acct-github:hover { background: #252b35; border-color: #5d6778; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .9); transform: translateY(-1px); }
.acct-google:disabled, .acct-github:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }

.acct-or { display: flex; align-items: center; gap: .8rem; margin: .55rem 0 .15rem; color: var(--muted); font-size: .82rem; }
.acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: #2e3541; }

/* Email: a plain bold label, a deep field, one big pill. The field class is acct-field, not acct-in: account.js puts
   acct-in on <html> while someone is signed in, and the old shared name styled the whole page as a text box. */
.acct-mail { margin: 0; }
.acct-mail > div { display: grid; gap: .5rem; }
.acct-lbl { font-size: .95rem; font-weight: 700; color: var(--text); }
.acct-field {
  width: 100%; min-height: 3.1rem; padding: 0 1rem; border-radius: 10px;
  background: #0c0f13; color: var(--text); border: 1px solid #2e3541;
  font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.acct-field::placeholder { color: #7f8796; }
.acct-field:hover { border-color: #434b59; }
.acct-field:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.acct-code { font-size: 1.5rem; font-weight: 700; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.acct-code::placeholder { letter-spacing: .32em; font-weight: 400; }
.acct-send {
  margin-top: .45rem; min-height: 3.2rem; padding: 0 1.4rem; border-radius: 999px; border: 0;
  background: var(--text); color: #11141a; cursor: pointer;
  font: inherit; font-size: 1.05rem; font-weight: 900; font-style: italic; font-stretch: 80%; text-transform: uppercase; letter-spacing: .02em;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.acct-send:hover { background: #fff; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .95); transform: translateY(-1px); }
.acct-send:active { transform: translateY(0) scale(.985); }
/* not ready yet: the quiet slate pill from the reference; still clickable, so a click explains what is missing */
.acct-mail:not(.is-ready) .acct-step1 .acct-send,
.acct-mail:not(.is-full) .acct-step2 .acct-send { background: #5d6876; color: #eef1f5; box-shadow: none; transform: none; }
.acct-send:disabled { opacity: .65; cursor: progress; transform: none; }
.acct-sent { margin: 0 0 .3rem; font-size: .98rem; color: var(--text); text-align: center; overflow-wrap: anywhere; }
.acct-tip { margin: .6rem 0 0; color: var(--muted); font-size: .84rem; text-align: center; text-wrap: balance; }

/* the code screen (2026-10-11): Google, GitHub and the divider step aside, the code step slides in like a new page */
.acct-ways.is-code > .acct-google, .acct-ways.is-code > .acct-github, .acct-ways.is-code > .acct-or { display: none; }
.acct-step2:not([hidden]) { animation: acct-next .38s var(--ease) both; }
.acct-mail.is-back .acct-step1:not([hidden]) { animation: acct-prev .38s var(--ease) both; }
@keyframes acct-next { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes acct-prev { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.acct-again { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .2rem .8rem; margin: .2rem 0 0; }
.acct-link {
  padding: .3rem 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: .84rem;
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.acct-link:hover { color: var(--text); }
.acct-link:disabled { opacity: .55; cursor: default; text-decoration: none; }
.acct-ways .acct-err { margin: .2rem 0 0; }
.acct-out .acct-ways { max-width: 24rem; }
/* rounded things keep their shape when focused (arcade.css squares focus rings to 4px) */
.acct-ways button:focus-visible { border-radius: 999px; outline-offset: 3px; }
.acct-ways .acct-link:focus-visible { border-radius: 4px; }

/* the card */
.acct-dialog {
  width: min(27rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; overscroll-behavior: contain;
  padding: 2.4rem 2.2rem 1.7rem; border-radius: 16px;
  background: #121519; color: var(--text); border: 1px solid #262c36;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 80px -30px rgba(0, 0, 0, .95);
  scrollbar-width: thin; scrollbar-color: #3a4250 transparent;
}
.acct-dialog:focus { outline: none; }
.acct-dialog::backdrop { background: rgba(6, 8, 12, .78); backdrop-filter: blur(4px); }
.acct-dialog[open] { animation: acct-pop .4s var(--ease) both; }
@keyframes acct-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.acct-brand { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 0 0 1.6rem; }
.acct-brand svg { width: 2.7rem; height: 2.7rem; flex: none; }
.acct-brand span {
  font-weight: 900; font-style: italic; font-stretch: 72%; text-transform: uppercase;
  font-size: 1.2rem; line-height: .92; letter-spacing: .01em; color: var(--text);
}
.acct-dialog h2 {
  margin: 0 0 .5rem; text-align: center; color: #aebccc;
  font-weight: 900; font-style: italic; font-stretch: 72%; text-transform: uppercase; font-size: 2.5rem; line-height: .95;
}
.acct-why { margin: 0 auto 1.5rem; text-align: center; color: var(--muted); font-size: .92rem; max-width: 30ch; text-wrap: balance; }
.acct-err { margin: .8rem 0 0; color: #ffb4ab; font-size: .85rem; }
.acct-new { margin: 1.4rem 0 0; text-align: center; color: #aebccc; font-size: .92rem; font-weight: 700; }
.acct-new span { display: block; margin-top: .15rem; color: var(--muted); font-weight: 400; font-size: .84rem; }
.acct-fine { margin: .9rem 0 0; text-align: center; color: var(--muted); font-size: .76rem; }
.acct-fine a { color: var(--text); text-underline-offset: .2em; }
.acct-x {
  position: absolute; top: .75rem; right: .75rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer;
}
.acct-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.acct-x svg { width: 1.15rem; height: 1.15rem; }
.acct-back {
  position: absolute; top: .75rem; left: .75rem; width: 2.4rem; height: 2.4rem; display: none; place-items: center;
  background: transparent; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer;
}
.acct-back:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.acct-back svg { width: 1.3rem; height: 1.3rem; }
.acct-dialog.is-code .acct-back { display: grid; }
.acct-dialog.is-code .acct-why, .acct-dialog.is-code .acct-new { display: none; }
.acct-dialog.is-code h2 { margin-bottom: 1.1rem; }
@media (max-width: 480px) {
  .acct-dialog { padding: 2rem 1.25rem 1.4rem; }
  .acct-dialog h2 { font-size: 2.2rem; }
  .acct-brand { margin-bottom: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-dialog[open], .acct-mail.is-back .acct-step1:not([hidden]), .acct-step2:not([hidden]) { animation: none; }
  .acct-google:hover, .acct-github:hover, .acct-send:hover { transform: none; }
}

/* ---------------------------------------------------------------- favorite heart on a tile */
.tile { position: relative; }
.fav {
  position: absolute; right: .45rem; bottom: .45rem; z-index: 2;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(10, 12, 16, .62); color: #fff;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .8);
  opacity: 0; transform: scale(.85);
  transition: opacity .2s, transform .3s var(--ease), background-color .15s;
}
.fav svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: transform .3s var(--ease); }
.tile:hover .fav, .tile:focus-within .fav, .fav:focus-visible, .tile.is-fav .fav { opacity: 1; transform: none; }
.fav:hover { background: rgba(10, 12, 16, .85); }
.fav:hover svg { transform: scale(1.1); }
.fav[aria-pressed="true"] svg { fill: var(--coral); stroke: var(--coral); }
.fav[aria-pressed="true"] { animation: fav-pop .4s var(--ease); }
@keyframes fav-pop { 40% { transform: scale(1.25); } }
@media (hover: none) { .fav { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- ad spots (home and Learn)
   Phones and tablets: one band under the games. Wide screens: html.ad-rails (set by ads.js once the rail ads load)
   puts an ad rail each side of the games (top lined up with the first thing on the page), and the header, page and footer widen into one frame so the logo lines up
   with the left rail and the account button with the right one. 160px rails from 1200px, 300px rails from 1800px. */
.ad-band { margin: 2.6rem 0 0; padding: .7rem 0 0; border-top: 1px solid var(--line); }
.ad-band:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-label { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ad-label a { color: var(--text); letter-spacing: .06em; text-underline-offset: .2em; }
.ad-band ins.adsbygoogle { display: block; min-height: 90px; }
.ad-rail { display: none; }
@media (min-width: 1200px) {
  html.ad-rails { --rail: 160px; --rail-gap: 28px; --frame: calc(1340px + 2 * (var(--rail) + var(--rail-gap))); }
  html.ad-rails .nav {
    padding-left: max(var(--gutter), env(safe-area-inset-left), calc((100% - var(--frame)) / 2 + var(--gutter)));
    padding-right: max(var(--gutter), env(safe-area-inset-right), calc((100% - var(--frame)) / 2 + var(--gutter)));
  }
  html.ad-rails main {
    position: relative; max-width: var(--frame); min-height: 700px;
    padding-left: calc(var(--gutter) + var(--rail) + var(--rail-gap));
    padding-right: calc(var(--gutter) + var(--rail) + var(--rail-gap));
  }
  html.ad-rails .foot { max-width: var(--frame); }
  html.ad-rails .ad-band { display: none; }
  html.ad-rails .ad-rail:not([hidden]) { display: block; position: absolute; top: 0; width: var(--rail); padding: .7rem 0 0; border-top: 1px solid var(--line); }
  html.ad-rails .gp-main > .ad-rail:not([hidden]) { top: 1.1rem; }   /* game pages: level with "All games" */
  .ad-rail--left { left: var(--gutter); }
  .ad-rail--right { right: var(--gutter); }
  .ad-rail ins.adsbygoogle { display: inline-block; width: var(--rail); height: 600px; vertical-align: top; }
  .ad-rail:has(ins[data-ad-status="unfilled"]) { visibility: hidden; }
  .ad-off { display: inline-block; margin-top: .55rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-underline-offset: .2em; }
  .ad-off:hover { color: #fff; }
}
@media (min-width: 1200px) and (max-width: 1499px) { html.ad-rails .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1800px) { html.ad-rails { --rail: 300px; } }

/* ---------------------------------------------------------------- /account/ */
.acct-page { max-width: 1340px; }
.acct-head { display: flex; align-items: center; gap: 1rem 1.3rem; flex-wrap: wrap; margin: 1.8rem 0 2rem; }
.acct-head .acct-pic { width: 4.2rem; height: 4.2rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); border: 3px solid #fff; flex: none; }
.acct-head .acct-pic img { width: 100%; height: 100%; object-fit: cover; }
.acct-head .acct-pic span { font-weight: 900; font-style: italic; font-size: 1.8rem; }
.acct-who { min-width: 0; }
.acct-who h1 { font-size: clamp(2.2rem, 5.4vw, 3.2rem); overflow-wrap: anywhere; }
.acct-who p { margin: .35rem 0 0; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.acct-head .fclear { margin-left: auto; }
.acct-sec { margin: 0 0 2.8rem; }
.acct-sec > h2 {
  margin: 0 0 .9rem; font-weight: 900; font-style: italic; font-stretch: 72%; text-transform: uppercase;
  font-size: 1.6rem; line-height: 1; letter-spacing: .005em;
}
.acct-note { margin: 0; color: var(--muted); max-width: 40rem; }
.acct-out { max-width: 32rem; margin: 2.2rem 0 4rem; }
.acct-out h1 { margin-bottom: .8rem; }
.acct-out > p { color: var(--muted); margin: 0 0 1.4rem; font-size: 1rem; }
.acct-out ul { margin: 0 0 1.6rem; padding-left: 1.1rem; color: var(--text); }
.acct-out li { margin: .3rem 0; }
.noads {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  padding: 1.3rem 1.4rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  max-width: 52rem;
}
.noads h3 { margin: 0 0 .3rem; font-size: 1.15rem; font-weight: 800; }
.noads > div { flex: 1 1 20rem; }
.noads p { margin: 0; color: var(--muted); max-width: 34rem; }
.noads.is-owned { border-color: #3f6b52; background: linear-gradient(rgba(111, 213, 143, .07), rgba(111, 213, 143, .07)), var(--panel); }
.noads.is-owned h3::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .55rem; border-radius: 50%; background: var(--live-green, #6fd58f); vertical-align: .12em; }
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: .28em; min-height: 2.9rem; padding: 0 1.4rem;
  background: var(--text); color: var(--night); border: 0; border-radius: 6px;
  font: inherit; font-size: .95rem; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, transform .15s;
}
.btn-solid:hover { background: #fff; }
.btn-solid:active { transform: translateY(1px); }
.btn-solid:disabled { opacity: .6; cursor: progress; }
.acct-msg { margin: .9rem 0 0; font-size: .9rem; color: var(--text); max-width: 52rem; }
.acct-msg.is-bad { color: #ffb4ab; }
.danger-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.btn-danger {
  min-height: 2.6rem; padding: 0 1rem; border-radius: 6px; cursor: pointer;
  background: transparent; color: #ffb4ab; border: 1px solid #8a3d36; font: inherit; font-size: .85rem; font-weight: 700;
}
.btn-danger:hover { background: rgba(198, 40, 40, .14); border-color: #c0544b; }
.btn-danger.is-confirm { background: #c62828; color: #fff; border-color: #c62828; }
.acct-empty { padding: 2rem 1.2rem; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.acct-empty svg { width: 1.1rem; height: 1.1rem; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; }
.acct-off { margin: 2.2rem 0 4rem; color: var(--muted); }

/* narrow phones: the nav already holds four links, so with accounts on, Feedback steps out of the nav
   (it stays in the footer and in every game's menu) to make room for Sign in / the picture */
@media (max-width: 440px) {
  html.acct-on .nav-links a[href^="/feedback/"] { display: none; }
  .nav-links a { white-space: nowrap; }
  .fav { width: 1.95rem; height: 1.95rem; right: .3rem; bottom: .3rem; }
  .fav svg { width: 1.05rem; height: 1.05rem; }
}
@media (max-width: 520px) {
  .acct-signin { padding: 0 .7rem; font-size: .8rem; min-height: 2.1rem; }
  .acct, .acct-me, .acct-wait { min-width: 2.1rem; }
  .acct-me, .acct-wait { width: 2.1rem; height: 2.1rem; }
  .acct-head .fclear { margin-left: 0; }
}