/* The page around the game, in the game's own look (see ADR-0014): the void,
   two pixel faces, hard corners, cyan for anything you can touch, magenta for
   focus, amber for a warning, lime for you. Nothing here rounds a corner. */

@font-face { font-family: 'Press Start 2P'; src: url('PressStart2P-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('Silkscreen-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --void: #05060d; --panel: #0b1020; --raised: #141c33; --well: #03040a;
  --cyan: #2ce8ff; --magenta: #ff2f9c; --amber: #ffb347; --lime: #64ffa0;
  --bright: #e6f7ff; --text: #a8c6d8; --dim: #7f97ab; --ghost: #2f3d4d;
  --display: 'Press Start 2P', 'Courier New', monospace;
  --body: 'Silkscreen', 'Courier New', monospace;
  --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);
}

html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body { background: var(--void); color: var(--text); overflow: hidden; overscroll-behavior: none; touch-action: none; font: 700 16px/1.5 var(--body); -webkit-tap-highlight-color: transparent; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center; font-family: var(--display); font-size: 12px; line-height: 2; color: var(--amber); }

/* The stage: a starfield behind a cabinet. On a phone the cabinet is the whole
   screen; wider than that it is framed, and beside it stands the marquee. */
#stage {
  position: fixed; inset: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 48px;
  padding: 0;
  background-color: var(--void);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(230,247,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 34%, rgba(230,247,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 41% 72%, rgba(230,247,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 87% 86%, rgba(44,232,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 56%, rgba(255,47,156,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 9%, rgba(230,247,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 61%, rgba(230,247,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 92%, rgba(230,247,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 30%, rgba(44,232,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 12%, rgba(230,247,255,.7) 50%, transparent 51%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(44,232,255,.08), transparent 70%);
  background-size: 240px 240px, 320px 320px, 280px 280px, 360px 360px, 300px 300px, 260px 260px, 340px 340px, 220px 220px, 380px 380px, 400px 400px, 100% 100%;
  animation: drift 240s linear infinite;
}
@keyframes drift { to { background-position: 0 240px, 0 320px, 0 280px, 0 360px, 0 300px, 0 260px, 0 340px, 0 220px, 0 380px, 0 400px, 0 0; } }
html:not(.framed) #stage { animation: none; }
@media (prefers-reduced-motion: reduce) { #stage { animation: none; } }

#cabinet { position: relative; flex: none; background: var(--void); }
.framed #cabinet { box-shadow: 0 0 0 1px rgba(44,232,255,.55), 0 0 0 3px var(--void), 0 0 0 4px rgba(44,232,255,.14), 0 0 48px rgba(44,232,255,.14), 0 24px 80px rgba(0,0,0,.6); }
#canvas { display: block; touch-action: none; outline: none; }

#marquee { flex: none; width: 304px; display: flex; flex-direction: column; gap: 24px; color: var(--text); }
#marquee[hidden] { display: none; }
.wordmark { margin: 0; font: 400 32px/1.25 var(--display); color: var(--cyan); text-shadow: 0 0 2px rgba(44,232,255,.9), 0 0 18px rgba(44,232,255,.45); letter-spacing: 0; }
.tagline { margin: 0; font: 400 10px/2 var(--display); color: var(--amber); text-transform: uppercase; letter-spacing: 1px; }
.controls { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; border-top: 1px solid var(--ghost); border-bottom: 1px solid var(--ghost); padding: 16px 0; }
.controls dt { font: 400 8px/2 var(--display); color: var(--dim); text-transform: uppercase; align-self: center; }
.controls dd { margin: 0; color: var(--bright); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Buttons and fields, shared by the marquee, the loader and every dialog. */
button, input, select { font: inherit; color: inherit; }
.chip, .jeema-online button, .jeema-signin-offer button, .jeema-fullscreen button, #load-retry {
  appearance: none; cursor: pointer; margin: 0; min-height: 44px; padding: 12px 16px; box-sizing: border-box;
  font: 400 10px/1.6 var(--display); text-transform: uppercase; letter-spacing: 0;
  color: var(--cyan); background: var(--panel); border: 1px solid var(--cyan); border-radius: 0;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.chip:hover, .jeema-online button:hover, .jeema-signin-offer button:hover, #load-retry:hover { background: var(--raised); box-shadow: 0 0 12px rgba(44,232,255,.25); }
.chip:active, .jeema-online button:active, .jeema-signin-offer button:active { transform: translateY(1px); }
.jeema-online button.primary, .jeema-signin-offer button.primary { color: var(--void); background: var(--cyan); }
.jeema-online button.primary:hover, .jeema-signin-offer button.primary:hover { background: var(--bright); box-shadow: 0 0 16px rgba(44,232,255,.45); }
.jeema-online button.danger { color: var(--amber); border-color: var(--amber); }
.jeema-online button.danger:hover { box-shadow: 0 0 12px rgba(255,179,71,.25); }
.jeema-online button.quiet, .jeema-signin-offer button.quiet { color: var(--text); border-color: var(--ghost); }
.jeema-online button:disabled { color: var(--ghost); border-color: var(--ghost); cursor: default; box-shadow: none; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
.jeema-online input, .jeema-online select {
  display: block; width: 100%; box-sizing: border-box; margin: 0; min-height: 44px; padding: 10px 12px;
  color: var(--bright); background: var(--well); border: 1px solid var(--dim); border-radius: 0; font: 700 16px/1.5 var(--body);
}
.jeema-online input:focus, .jeema-online select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 1px var(--cyan); }
.jeema-online input::placeholder { color: var(--ghost); }
.jeema-online select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

/* The loader: the wordmark and a hard-edged progress bar, gone with a fade. */
#status { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--void); visibility: hidden; transition: opacity .4s ease-out; }
#status.done { opacity: 0; pointer-events: none; }
.loader { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(100% - 48px, 320px); text-align: center; }
.loader .wordmark { font-size: 40px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { text-shadow: 0 0 2px rgba(44,232,255,.9), 0 0 28px rgba(44,232,255,.7); } }
@media (prefers-reduced-motion: reduce) { .loader .wordmark { animation: none; } }
#status-progress { appearance: none; -webkit-appearance: none; display: none; width: 100%; height: 12px; border: 1px solid var(--cyan); background: var(--well); overflow: hidden; }
#status-progress::-webkit-progress-bar { background: var(--well); }
#status-progress::-webkit-progress-value { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width .2s; }
#status-progress::-moz-progress-bar { background: var(--cyan); }
#status-progress:indeterminate::-webkit-progress-value { width: 30%; animation: scan 1.2s linear infinite; }
@keyframes scan { from { margin-left: -30%; } to { margin-left: 100%; } }
#load-label { margin: 0; font: 400 10px/2 var(--display); color: var(--cyan); text-transform: uppercase; }
#load-retry { width: 100%; }
#status-notice { display: none; width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--amber); color: var(--amber); font: 700 14px/1.5 var(--body); text-align: left; overflow-wrap: anywhere; }

/* Dialogs: a sheet from the bottom on a phone, a card in the middle of a
   framed stage. Header, scrolling body, and a footer that is always reachable. */
.jeema-online {
  position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100%); z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; box-sizing: border-box;
  padding: max(12px, var(--safe-top)) var(--safe-right) 0 var(--safe-left);
  background: rgba(5,6,13,.78); touch-action: pan-y; animation: shade .18s ease-out;
}
.framed .jeema-online { justify-content: center; padding: 24px; }
@keyframes shade { from { opacity: 0; } }
.jeema-online section {
  display: flex; flex-direction: column; width: min(100%, 520px); max-height: 100%; min-height: 0; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--cyan); border-bottom: 0; outline: none;
  box-shadow: 0 0 0 1px var(--void), 0 0 32px rgba(44,232,255,.18), 0 -16px 48px rgba(0,0,0,.5);
  animation: rise .22s cubic-bezier(.2,.8,.2,1);
}
.framed .jeema-online section { border-bottom: 1px solid var(--cyan); max-height: min(100%, 860px); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jeema-online, .jeema-online section { animation: none; } }
.jeema-online header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ghost); flex: none; touch-action: none; cursor: grab; }
.jeema-online section { transition: transform .18s ease-out; }
/* The pull handle a phone expects on a sheet. */
.jeema-online header::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 3px; margin-left: -20px; background: var(--ghost); }
.jeema-online section { position: relative; }
.framed .jeema-online header::before { display: none; }
.framed .jeema-online header { cursor: default; }
.jeema-online h2 { margin: 0; font: 400 14px/1.5 var(--display); color: var(--cyan); text-transform: uppercase; text-shadow: 0 0 10px rgba(44,232,255,.35); }
.jeema-online .close { flex: none; width: 44px; min-height: 44px; padding: 0; font-size: 14px; line-height: 1; border-color: var(--ghost); color: var(--text); }
.jeema-online .close:hover { color: var(--cyan); border-color: var(--cyan); }
.jeema-online .body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 20px 24px; }
.jeema-online footer { flex: none; display: grid; gap: 8px; padding: 12px 20px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--ghost); background: var(--panel); }
.framed .jeema-online footer { padding-bottom: 12px; }
.jeema-online h3 { margin: 24px 0 8px; font: 400 8px/2 var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.jeema-online h3:first-child { margin-top: 0; }
.jeema-online p { margin: 0 0 12px; }

/* The exact chat message stays selectable when clipboard access is unavailable. */
.jeema-online .share-panel { border-color: var(--cyan); }
.jeema-online .share-panel h2 { min-width: 0; font-size: clamp(10px, 3.2vw, 14px); overflow-wrap: anywhere; }
.jeema-online .share-panel .body { min-height: 0; min-width: 0; padding: 12px 16px 16px; }
.jeema-online .share-panel header { padding: 12px 16px; gap: 12px; }
.jeema-online .share-panel footer { padding-left: 16px; padding-right: 16px; }
.jeema-online .share-result {
  position: relative; isolation: isolate; overflow: hidden; margin: 12px 0; padding: 20px 12px;
  background: radial-gradient(ellipse at 85% 15%, rgba(44,232,255,.12), transparent 60%), radial-gradient(ellipse at 10% 75%, rgba(255,47,156,.09), transparent 60%), var(--well);
  border: 1px solid var(--ghost); color: var(--bright); text-align: center;
  font: 700 16px/1.8 var(--body); white-space: normal; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text;
}
.jeema-online .share-result::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: radial-gradient(1px 1px at 15% 20%, var(--bright) 50%, transparent 51%), radial-gradient(1px 1px at 76% 68%, var(--cyan) 50%, transparent 51%), radial-gradient(1px 1px at 48% 35%, var(--bright) 50%, transparent 51%);
  background-size: 104px 112px, 137px 157px, 191px 179px;
}
.jeema-online .share-result::after { content: ''; position: absolute; width: 260px; height: 260px; top: -180px; right: -110px; border: 1px solid rgba(44,232,255,.18); border-radius: 50%; box-shadow: 0 0 0 24px rgba(44,232,255,.025), 0 0 0 48px rgba(44,232,255,.02); z-index: -1; pointer-events: none; }
.jeema-online .share-result > span { display: block; position: relative; }
.jeema-online .share-brand { font: 400 12px/1.8 var(--display); color: var(--cyan); }
.jeema-online .share-verdict { margin: 14px 0 20px; font: 400 8px/1.8 var(--display); color: var(--lime); letter-spacing: 1px; }
.jeema-online .share-attempt-count { display: block; font: 400 clamp(36px, 12vw, 56px)/1.3 var(--display); color: var(--bright); text-shadow: 0 0 22px rgba(44,232,255,.25); }
.jeema-online .share-attempt-count.long-count { font-size: 24px; }
.jeema-online .share-attempt-unit { display: block; margin-top: 8px; font: 400 8px/1.8 var(--display); color: var(--dim); letter-spacing: 2px; }
.jeema-online .share-gap { height: 20px; }
.jeema-online .share-challenge { color: var(--bright); }
.jeema-online .share-link { margin-top: 8px; font-size: 12px; color: var(--cyan); }
.jeema-online .share-actions { display: grid; gap: 8px; }
.jeema-online .share-whatsapp { display: block; min-height: 44px; padding: 12px 16px; box-sizing: border-box; border: 1px solid var(--lime); background: var(--lime); color: var(--void); text-decoration: none; text-align: center; font: 400 10px/1.6 var(--display); text-transform: uppercase; }
.jeema-online .share-whatsapp:hover { background: var(--bright); border-color: var(--bright); }
@media (max-height: 700px) {
  .jeema-online .share-panel .body { padding-top: 8px; padding-bottom: 12px; }
  .jeema-online .share-panel .body > .muted { font-size: 12px; }
  .jeema-online .share-result { padding-top: 14px; padding-bottom: 14px; margin: 8px 0; }
  .jeema-online .share-verdict { margin: 10px 0 12px; }
  .jeema-online .share-attempt-count { font-size: 36px; }
  .jeema-online .share-attempt-count.long-count { font-size: 24px; }
  .jeema-online .share-gap { height: 12px; }
}
@media (min-width: 480px) and (max-height: 500px) {
  .jeema-online .share-panel footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jeema-online .share-panel .share-actions { display: contents; }
}
.jeema-online p:last-child { margin-bottom: 0; }
.jeema-online .body > button, .jeema-online details > button { width: 100%; margin: 8px 0 0; }
.jeema-online button + p { margin-top: 16px; }
.jeema-online label { display: block; margin: 16px 0 0; font: 400 8px/2 var(--display); color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.jeema-online label input { margin-top: 4px; text-transform: uppercase; }
.jeema-online .own { color: var(--lime); }
.jeema-online .note { color: var(--amber); }
.jeema-online .muted { color: var(--dim); font-size: 14px; }
.jeema-online [role="status"]:not(:empty) { margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--amber); color: var(--amber); font-size: 14px; }
.jeema-online .loading { color: var(--dim); font: 400 10px/2 var(--display); text-transform: uppercase; }
.jeema-online .loading::after { content: '▮'; margin-left: 6px; color: var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Figures that matter sit in tiles: a caption and a value, you in lime. */
.jeema-online .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; padding: 0; }
.jeema-online .stat { margin: 0; padding: 12px 10px; background: var(--void); border: 1px solid var(--ghost); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jeema-online .stat dt { font: 400 8px/1.6 var(--display); color: var(--dim); text-transform: uppercase; }
.jeema-online .stat dd { margin: 0; font: 400 14px/1.4 var(--display); color: var(--bright); text-transform: uppercase; overflow-wrap: anywhere; }
.jeema-online .stat.own dd { color: var(--lime); text-shadow: 0 0 10px rgba(100,255,160,.35); }
.jeema-online .stat small { display: block; font: 700 14px/1.4 var(--body); color: var(--text); }
.jeema-online .stats.community-attempts { grid-template-columns: 1fr; text-align: center; }
.jeema-online .community-attempts dd { font-size: 24px; color: var(--lime); }

.jeema-online table { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.jeema-online th { padding: 4px 6px 8px; font: 400 8px/1.6 var(--display); color: var(--dim); text-transform: uppercase; text-align: left; letter-spacing: 1px; border-bottom: 1px solid var(--ghost); }
.jeema-online td { padding: 10px 6px; color: var(--bright); border-bottom: 1px solid rgba(47,61,77,.5); }
.jeema-online td:first-child { color: var(--dim); font: 400 10px/1.6 var(--display); width: 2.5em; }
.jeema-online th:last-child, .jeema-online td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.jeema-online tr.own td { color: var(--lime); background: rgba(100,255,160,.07); }
.jeema-online tr.own td:first-child { box-shadow: inset 2px 0 var(--lime); }
.jeema-online tr.own td:first-child { color: var(--lime); }

.jeema-online details { margin-top: 24px; border-top: 1px solid var(--ghost); }
.jeema-online summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 0; font: 400 10px/1.6 var(--display); color: var(--cyan); text-transform: uppercase; }
.jeema-online summary::-webkit-details-marker { display: none; }
.jeema-online summary::after { content: '+'; font-size: 14px; color: var(--dim); }
.jeema-online details[open] summary::after { content: '−'; }
.jeema-online details > p { color: var(--text); font-size: 14px; }

.jeema-online .bars { display: grid; gap: 6px; margin: 8px 0 16px; }
.jeema-online .bar { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 8px; min-height: 20px; font-size: 14px; color: var(--text); }
.jeema-online .bar i { display: block; height: 12px; background: var(--cyan); min-width: 2px; box-shadow: 0 0 6px rgba(44,232,255,.35); transform-origin: left; animation: grow .4s ease-out; }
@keyframes grow { from { transform: scaleX(0); } }
.jeema-online .bar b { text-align: right; font-weight: 700; color: var(--bright); font-variant-numeric: tabular-nums; }
.jeema-online .bar.own, .jeema-online .bar.own b { color: var(--lime); }
.jeema-online .bar.own i { background: var(--lime); box-shadow: 0 0 8px rgba(100,255,160,.5); }

/* The sign-in offer: a card that rises from the bottom and takes no focus. */
.jeema-signin-offer {
  position: fixed; left: 50%; top: calc(var(--vvt, 0px) + max(12px, var(--safe-top))); z-index: 15; transform: translateX(-50%);
  width: min(100% - 24px, 520px); box-sizing: border-box; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 12px; background: var(--panel); border: 1px solid var(--cyan); box-shadow: 0 0 0 1px var(--void), 0 0 24px rgba(44,232,255,.2), 0 12px 32px rgba(0,0,0,.5);
  color: var(--bright); animation: drop .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes drop { from { transform: translate(-50%, -24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jeema-signin-offer { animation: none; } }

/* The once-only full-screen ribbon on a phone: a pill under the notch. */
.jeema-fullscreen {
  position: fixed; right: max(8px, var(--safe-right)); top: calc(var(--vvt, 0px) + max(8px, var(--safe-top))); z-index: 14;
  display: flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); box-sizing: border-box;
  background: rgba(11,16,32,.92); border: 1px solid var(--cyan); box-shadow: 0 0 12px rgba(44,232,255,.25); animation: fade .3s ease-out 1.2s both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.jeema-fullscreen button { min-height: 36px; padding: 8px 10px; font-size: 8px; border: 0; background: transparent; }
.jeema-fullscreen button:hover { box-shadow: none; }
.jeema-fullscreen .close { width: 36px; padding: 0; font-size: 14px; color: var(--dim); }
.jeema-fullscreen p { margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--bright); }
.jeema-signin-offer span { font-size: 14px; }
.jeema-signin-offer button { padding: 10px 14px; }
@media (max-width: 420px) { .jeema-signin-offer { grid-template-columns: 1fr 1fr; } .jeema-signin-offer span { grid-column: 1 / -1; } }