/*
 * styles.css — the plastic.
 *
 * An egg you could lose in a coat pocket, finished in loud injection-moulded
 * colour with a chunky bezel and a keyring you were definitely going to break.
 * Case colours are driven by --shell / --shell-trim / --lcd-bg, which main.js
 * rewrites on the fly.
 *
 * Sizing is thumb-first. Every dimension that matters on a phone is a clamp()
 * against viewport width, so the shell keeps its egg proportions from a 320px
 * handset up to a desktop, and the keys stay big enough to hit without looking.
 */

:root {
  --shell: #f4713c;
  --shell-trim: #c14a1d;
  --lcd-bg: #8ba844;

  --page: #14161c;
  --page-2: #1c1f28;
  --ink: #eef1f6;
  --ink-dim: #9aa3b2;
  --rule: #2c313d;

  --bezel: #23262e;
  --bezel-hi: #3a3f4b;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 50% -10%, #232838 0%, transparent 70%),
    var(--page);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Stops the page rubber-banding under the thumb while jabbing the keys. */
  overscroll-behavior-y: contain;
}

/* --------------------------------------------------------------- version -- */

/*
 * The build number, top right, on every screen size. This is the software
 * version and changes every edit; the marking on the shell is the model and
 * does not. They are deliberately different things in different places.
 */
.version {
  position: fixed;
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(0.5rem, env(safe-area-inset-right));
  z-index: 20;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.82);
  backdrop-filter: blur(6px);
  font: 600 0.66rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  pointer-events: none;
}

.stage {
  max-width: 60rem;
  margin: 0 auto;
  padding:
    clamp(2.6rem, 5vw, 3.5rem)
    clamp(0.75rem, 4vw, 2rem)
    clamp(2rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------- masthead -- */

.masthead {
  text-align: center;
  max-width: 34rem;
}

.kicker {
  margin: 0 0 0.3rem;
  font: 700 0.64rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--shell);
  transition: color 400ms ease;
}

.masthead h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.9rem, 9vw, 3.25rem);
  letter-spacing: 0.14em;
  font-weight: 800;
  background: linear-gradient(180deg, #fff 0%, var(--shell) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background 400ms ease;
}

.tagline {
  margin: 0;
  color: var(--ink-dim);
  font-size: clamp(0.86rem, 3.4vw, 0.98rem);
  text-wrap: balance;
}

/* ----------------------------------------------------------------- shell -- */

.shell {
  position: relative;
  width: min(24rem, 100%);
  /*
   * An egg is narrower than its bounding box everywhere except the middle, so
   * the screen has to be inset far enough to stay inside the curve. The first
   * pass used a deep vertical radius (38%) with thin side padding and the
   * bezel punched straight out through the shell on a phone.
   *
   * Two changes hold it in: a shallower dome, so the sides run parallel
   * through the band where the screen sits, and side padding proportional to
   * the viewport rather than a near-fixed 1rem.
   */
  padding:
    clamp(3.2rem, 12vw, 3.8rem)
    clamp(1.9rem, 8.5vw, 2.4rem)
    clamp(2.2rem, 7vw, 2.8rem);
  border-radius: 50% 50% 48% 48% / 18% 18% 21% 21%;
  background:
    radial-gradient(120% 80% at 30% 8%, rgba(255, 255, 255, 0.38) 0%, transparent 46%),
    linear-gradient(170deg, var(--shell) 0%, var(--shell-trim) 100%);
  box-shadow:
    inset 0 -1.4rem 2.4rem rgba(0, 0, 0, 0.28),
    inset 0 0.9rem 1.6rem rgba(255, 255, 255, 0.22),
    0 1.6rem 3rem rgba(0, 0, 0, 0.45),
    0 0.2rem 0 rgba(255, 255, 255, 0.12);
  transition: background 400ms ease;
}

/* The keyring loop at the crown. */
.keyring {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(1.9rem, 7vw, 2.4rem);
  height: clamp(1.2rem, 4.5vw, 1.5rem);
  border: 0.3rem solid var(--shell-trim);
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.12rem rgba(255, 255, 255, 0.25);
}

.bezel {
  border-radius: clamp(0.9rem, 3.5vw, 1.4rem);
  padding: clamp(0.5rem, 2.4vw, 0.85rem) clamp(0.5rem, 2.4vw, 0.85rem) clamp(0.35rem, 1.6vw, 0.5rem);
  background: linear-gradient(160deg, var(--bezel-hi) 0%, var(--bezel) 60%);
  box-shadow:
    inset 0 0.15rem 0.4rem rgba(255, 255, 255, 0.14),
    inset 0 -0.2rem 0.5rem rgba(0, 0, 0, 0.55),
    0 0.4rem 1rem rgba(0, 0, 0, 0.4);
}

.glass {
  position: relative;
  border-radius: 0.5rem;
  padding: clamp(0.22rem, 1.2vw, 0.35rem) clamp(0.2rem, 1vw, 0.3rem);
  background: var(--lcd-bg);
  box-shadow:
    inset 0 0 0 0.12rem rgba(0, 0, 0, 0.4),
    inset 0 0.2rem 0.6rem rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: background 400ms ease;
}

.lcd-main,
.lcd-strip {
  display: block;
  width: 100%;
  height: auto;
  /* Keep the cells hard-edged at any scale — this is the whole aesthetic. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The icon strips are separate panels of the same glass. With the canvases
   flush against each other the three read as one continuous field and the
   icons blur into the screen content, so hold them apart with bare LCD. */
.lcd-main {
  margin: clamp(0.2rem, 1vw, 0.32rem) 0;
}

.lcd-strip {
  opacity: 0.95;
}

/* A single diagonal sheen across the panel. */
.glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.08) 26%,
    transparent 46%
  );
}

.brandmark {
  margin: 0.4rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: clamp(0.5rem, 2vw, 0.6rem);
  letter-spacing: 0.3em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
}

/* The model marking. Not the build number — that lives in the page corner. */
.brandmark span {
  letter-spacing: 0.14em;
  opacity: 0.65;
}

/* --------------------------------------------------------------- buttons -- */

.buttons {
  margin-top: clamp(0.9rem, 4vw, 1.6rem);
  /* The shell tapers toward its base, so the key row is inset to stay within
     the curve — without this the outer keys and their labels overhang. */
  padding: 0 clamp(0.8rem, 5vw, 1.4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  justify-items: center;
  gap: clamp(0.2rem, 1.5vw, 0.5rem);
}

.key {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Big enough to hit with a thumb without aiming. The clamp floor is well past
 * the 44px minimum touch target, and the arrows carry the meaning so nobody
 * has to remember what "C" did.
 */
.key-face {
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 17vw, 4.1rem);
  height: clamp(3.5rem, 17vw, 4.1rem);
  border-radius: 50%;
  font-weight: 700;
  font-size: clamp(1.15rem, 5.5vw, 1.45rem);
  line-height: 1;
  color: rgba(0, 0, 0, 0.62);
  background:
    radial-gradient(90% 80% at 34% 22%, rgba(255, 255, 255, 0.85) 0%, transparent 55%),
    linear-gradient(180deg, #f7f8fa 0%, #c9cdd6 100%);
  box-shadow:
    0 0.34rem 0 #8f949f,
    0 0.6rem 1rem rgba(0, 0, 0, 0.42),
    inset 0 -0.15rem 0.3rem rgba(0, 0, 0, 0.16);
  transition: transform 70ms ease, box-shadow 70ms ease;
}

/* The middle key sat proud of the other two on the real thing. */
.key--mid .key-face {
  width: clamp(3.9rem, 19vw, 4.6rem);
  height: clamp(3.9rem, 19vw, 4.6rem);
  font-size: clamp(1rem, 4.6vw, 1.25rem);
}

.key-hint {
  font-size: clamp(0.56rem, 2.4vw, 0.64rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.48);
  font-weight: 700;
}

.key:hover .key-face {
  transform: translateY(-0.06rem);
}

.key:active .key-face,
.key.is-pressed .key-face {
  transform: translateY(0.3rem);
  box-shadow:
    0 0.04rem 0 #8f949f,
    0 0.12rem 0.35rem rgba(0, 0, 0, 0.45),
    inset 0 -0.1rem 0.25rem rgba(0, 0, 0, 0.2);
}

.key:focus-visible .key-face {
  outline: 0.18rem solid #fff;
  outline-offset: 0.2rem;
}

/* -------------------------------------------------------------- controls -- */

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.chip {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  background: var(--page-2);
  color: var(--ink);
  font: 700 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  touch-action: manipulation;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.chip:hover {
  border-color: var(--shell);
  color: #fff;
}

.chip:focus-visible {
  outline: 2px solid var(--shell);
  outline-offset: 2px;
}

.chip--tiny {
  padding: 0.4rem 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.chip--danger:hover {
  border-color: #e2564d;
  color: #ffb4ae;
}

/* --------------------------------------------------------------- friends -- */

.friends {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  padding: clamp(0.9rem, 3.5vw, 1.4rem);
  background: rgba(28, 31, 40, 0.6);
}

.friends h2 {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.friends-blurb {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  color: var(--ink-dim);
}

.friends-io {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
}

.field {
  display: block;
}

.field-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.field-row {
  display: flex;
  gap: 0.4rem;
}

.field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: #0f1117;
  color: var(--ink);
  font: 500 0.76rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.field input:focus-visible {
  outline: 2px solid var(--shell);
  outline-offset: 1px;
}

.friends-note {
  min-height: 1.2rem;
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity 200ms ease;
}

.friends-note.is-live {
  opacity: 1;
  color: var(--shell);
}

.friends-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.friend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: #12141b;
}

.friend-who {
  display: flex;
  flex-direction: column;
  min-width: 8rem;
}

.friend-who b {
  font: 700 0.82rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}

.friend-who span {
  font-size: 0.7rem;
  color: var(--ink-dim);
}

.friend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.friends-empty,
.friends-foot {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
}

.linklike {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--shell);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------- ad -- */

/*
 * The ad region matches the manual and colophon rather than trying to blend
 * into the toy. An ad dressed as part of the shell would be a mis-tap waiting
 * to happen, and the wrong side of AdSense's rules on ads that resemble page
 * content.
 *
 * Height is reserved by the engine on the inner slot, not here, so the space
 * exists from first paint and nothing reflows when the fill lands.
 */
.ad-region {
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

.ad-label {
  margin: 0 0 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a93a4;
  text-align: center;
}

/*
 * Hidden until an ad is confirmed filled (see watchFill in src/ads.js), so a
 * blocked or unsold slot leaves no label and no gap. `[hidden]` needs the
 * explicit rule because .ad-region sets display.
 */
.ad-region:not(:has(#ad-slot[data-filled])) .ad-label {
  visibility: hidden;
}

.ad-region[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- manual -- */

.manual {
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1rem, 3.5vw, 1.6rem);
}

.manual > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.3rem 0;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
}

.manual > summary::-webkit-details-marker {
  display: none;
}

.manual > summary::before {
  content: "▸";
  letter-spacing: 0;
  transition: transform 160ms ease;
  display: inline-block;
}

.manual[open] > summary::before {
  transform: rotate(90deg);
}

.summary-hint {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: none;
  opacity: 0.6;
  font-weight: 500;
}

.manual-inner {
  padding-top: 0.9rem;
}

.manual-lede {
  margin: 0 0 1.4rem;
  max-width: 44rem;
  font-size: clamp(0.86rem, 3.2vw, 0.95rem);
  color: var(--ink);
}

.manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.1rem, 3vw, 2rem);
}

.manual h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--shell);
  transition: color 400ms ease;
}

.manual p {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: var(--ink-dim);
}

.manual dl {
  margin: 0 0 0.7rem;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.35rem 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-dim);
}

.manual dt {
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}

.manual dd {
  margin: 0;
}

.icon-list {
  margin: 0;
  padding-left: 1.05rem;
  font-size: 0.88rem;
  color: var(--ink-dim);
}

.icon-list li {
  margin-bottom: 0.35rem;
}

.icon-list b,
.manual em {
  color: var(--ink);
}

.manual em {
  font-style: normal;
  font-weight: 600;
}

.note {
  font-size: 0.8rem !important;
  color: #7c8698 !important;
}

kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
  background: var(--page-2);
  font: 600 0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
}

.colophon {
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}

.colophon p {
  margin: 0;
  font-size: 0.76rem;
  color: #6e7789;
  text-align: center;
}

.noscript {
  text-align: center;
  color: #ffb4ae;
  padding: 1rem;
}

/* ---------------------------------------------------------------- phones -- */

@media (max-width: 30rem) {
  /* Give the screen as much of the shell as the egg shape can spare, and put
     the keys where a thumb already is. */
  .stage {
    gap: 1rem;
  }

  .shell {
    width: 100%;
    max-width: 22rem;
  }

  .masthead h1 {
    letter-spacing: 0.1em;
  }

  .buttons {
    margin-top: 1rem;
    gap: 0.2rem;
  }

  .controls .chip {
    padding: 0.55rem 0.8rem;
  }

  .friend {
    flex-direction: column;
    align-items: flex-start;
  }
}

/*
 * Short viewports — which is most phones held upright. The masthead is the
 * only thing competing with the device for height, so it gives way first: the
 * kicker goes, the wordmark shrinks, and the shell tightens a little. The
 * point is that the keys land above the fold, under a thumb, without anyone
 * having to scroll to find them.
 */
@media (max-height: 47rem) {
  .stage {
    padding-top: 2.1rem;
    gap: 0.7rem;
  }

  .kicker {
    display: none;
  }

  .masthead h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    margin-bottom: 0.2rem;
  }

  .tagline {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .shell {
    max-width: 20.5rem;
  }
}

/* Respect a stated preference for less motion — the LCD still animates, but
   the plastic stops moving under the cursor. */
@media (prefers-reduced-motion: reduce) {
  .key,
  .key-face,
  .chip,
  .shell,
  .masthead h1,
  .manual > summary::before {
    transition: none;
  }
  .key:hover .key-face {
    transform: none;
  }
}