/* 24, a 2000s candybar phone: dark blue shell, green backlit LCD,
   rubber keys. Everything scales off --pw, the phone's width. */
:root {
  --pw: min(92vw, 420px, calc((100svh - 120px) * 0.56));
  --shell: #20335f;
  --shell-hi: #34508c;
  --shell-lo: #121d38;
  --key: #aebbd2;
  --key-hi: #dfe6f2;
  --key-lo: #7d8aa3;
  --ink: #16213b;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 56px 12px 24px;
  background: radial-gradient(ellipse at 50% 30%, #3b3f4a 0%, #1f2229 55%, #121418 100%);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #d6dae4;
  -webkit-tap-highlight-color: transparent;
}

.nav-back-games {
  position: fixed; top: 12px; left: 12px; z-index: 99999;
  text-decoration: none; font: 700 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.3px;
  color: #eef2fb; background: linear-gradient(180deg, var(--shell-hi), var(--shell));
  border: 1px solid #0c1428; border-radius: 12px; padding: 8px 14px 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 0 #0a1122;
}

/* ---- the shell ---------------------------------------------------------- */
.phone {
  width: var(--pw);
  padding: calc(var(--pw) * 0.06) calc(var(--pw) * 0.06) calc(var(--pw) * 0.07);
  border-radius: calc(var(--pw) * 0.2) calc(var(--pw) * 0.2) calc(var(--pw) * 0.28) calc(var(--pw) * 0.28) / calc(var(--pw) * 0.16) calc(var(--pw) * 0.16) calc(var(--pw) * 0.3) calc(var(--pw) * 0.3);
  background:
    radial-gradient(ellipse at 30% 8%, rgba(255,255,255,0.18), transparent 45%),
    linear-gradient(100deg, var(--shell-lo) 0%, var(--shell) 18%, var(--shell-hi) 50%, var(--shell) 82%, var(--shell-lo) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.25), inset 0 -6px 12px rgba(0,0,0,0.45),
    0 24px 40px rgba(0,0,0,0.55), 0 4px 0 #0b1328;
  display: flex; flex-direction: column; align-items: center;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.earpiece {
  width: 26%; height: calc(var(--pw) * 0.022); border-radius: 99px;
  background: repeating-linear-gradient(90deg, #070b16 0 4px, #1a2748 4px 7px);
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,0.15);
}
.brand {
  margin: calc(var(--pw) * 0.03) 0 calc(var(--pw) * 0.025);
  font: 800 calc(var(--pw) * 0.045)/1 "Arial Black", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.22em; color: #dfe5f2;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.bezel {
  width: 100%; padding: calc(var(--pw) * 0.022);
  border-radius: calc(var(--pw) * 0.06) calc(var(--pw) * 0.06) calc(var(--pw) * 0.1) calc(var(--pw) * 0.1);
  background: linear-gradient(180deg, #0c1222, #182340);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.18);
}
.glass {
  position: relative; width: 100%;
  display: flex; justify-content: center;
  padding: calc(var(--pw) * 0.02) 0;
  border-radius: calc(var(--pw) * 0.02);
  background: #b9dfc6;
  box-shadow: inset 0 0 calc(var(--pw) * 0.05) rgba(40, 70, 45, 0.45);
}
/* The glass over the LCD: a soft glare and a vignette from the backlight. */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 32%, transparent 33%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(30, 60, 35, 0.22) 100%);
}
#lcd { display: block; image-rendering: pixelated; cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- keys ------------------------------------------------------------------ */
.key {
  font: inherit; color: var(--ink); cursor: pointer; border: 0; padding: 0;
  background: linear-gradient(180deg, var(--key-hi), var(--key) 55%, var(--key-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 3px 0 #0b1430, 0 5px 8px rgba(0,0,0,0.35);
  transition: transform 0.05s ease, box-shadow 0.05s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.key.down, .key:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0 #0b1430, 0 2px 3px rgba(0,0,0,0.35);
}
.key:focus-visible { outline: 2px solid #ffd479; outline-offset: 2px; }

.controls {
  width: 100%; display: grid; grid-template-columns: 1fr 1.7fr 1fr; align-items: center;
  gap: calc(var(--pw) * 0.03); margin: calc(var(--pw) * 0.05) 0 calc(var(--pw) * 0.045);
}
.clear {
  justify-self: start; width: 82%; aspect-ratio: 1.35;
  border-radius: 45% 45% 50% 50%;
  font-weight: 800; font-size: calc(var(--pw) * 0.055);
}
/* The Navi key: a wide "smile" under the screen. */
.navi {
  height: calc(var(--pw) * 0.15);
  border-radius: 18% 18% 50% 50% / 30% 30% 70% 70%;
  background: linear-gradient(180deg, #8fb0ea, #5f86cf 55%, #3e62a8);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), 0 3px 0 #0b1430, 0 6px 10px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.navi span { width: 30%; height: 3px; border-radius: 3px; background: rgba(20,35,70,0.55); }
.rocker {
  justify-self: end; width: 82%; display: flex; flex-direction: column; gap: 3px;
}
.rocker .key { height: calc(var(--pw) * 0.065); font-size: calc(var(--pw) * 0.035); }
.rocker .up { border-radius: 50% 50% 18% 18%; }
.rocker .down { border-radius: 18% 18% 50% 50%; }

.keypad {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--pw) * 0.035) calc(var(--pw) * 0.05);
}
.num {
  height: calc(var(--pw) * 0.12);
  border-radius: 40% 40% 46% 46% / 50% 50% 60% 60%;
  display: flex; align-items: baseline; justify-content: center; gap: 0.35em;
  padding-top: calc(var(--pw) * 0.02);
}
.num b { font-size: calc(var(--pw) * 0.062); font-weight: 800; line-height: 1; }
.num small { font-size: calc(var(--pw) * 0.034); font-weight: 700; color: #33415f; letter-spacing: 0.02em; }
.num small.op { font-size: calc(var(--pw) * 0.058); font-weight: 800; color: #1d2a4a; line-height: 1; }
.mic { width: 3%; aspect-ratio: 1; border-radius: 50%; margin-top: calc(var(--pw) * 0.05); background: #070b16; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,0.15); }

.keys-help { margin: 0; max-width: 560px; text-align: center; font-size: 0.8rem; line-height: 1.5; color: #9aa1b0; }
.keys-help b, .keys-help .gs-kbd { color: #d6dae4; font-weight: 700; }
/* The copy box, for when the clipboard isn't allowed: a slab of the phone's
   shell with the result on a backlit LCD in a dark bezel. (No display here:
   it's shown and hidden with [hidden].) */
.share-out {
  max-width: 420px; width: 92vw; text-align: center; font-size: 0.85rem;
  padding: 10px 12px 14px; color: #eef2fb;
  background: linear-gradient(180deg, var(--shell-hi), var(--shell));
  border: 1px solid #0c1428; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 0 #0a1122;
}
.share-out p { margin: 0 0 8px; font-weight: 700; letter-spacing: 0.3px; }
.share-out textarea {
  display: block; width: 100%; resize: none;
  font: 0.85rem/1.4 ui-monospace, monospace; color: #43523d; background: #c7f0d8;
  border: 3px solid #0c1222; border-radius: 8px; padding: 8px;
  box-shadow: inset 0 0 10px rgba(40, 70, 45, 0.45), 0 1px 0 rgba(255,255,255,0.18);
}
.share-out textarea:focus-visible { outline: 2px solid #ffd479; outline-offset: 2px; }