/* Zeus Arcade shared game style. Version: see VERSION.
   Change it here only, then run tools/sync.sh into each game.
   Games set layout and their own world; type, colours and controls come from here. */

@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/dm-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Colours (Zeus Arcade) */
  --z-navy: #18365c;
  --z-cobalt: #2164d9;
  --z-ivory: #f8f5ef;
  --z-gold: #eab64d;
  --z-white: #ffffff;
  /* Each game may set one accent colour; everything else stays shared. */
  --z-accent: var(--z-gold);

  /* Glass over a game scene: dark enough for white text on bright scenery. */
  /* 0.62 keeps white 15px text at 4.5:1 or better even over pure white scenery (measured). */
  --z-glass: rgba(16, 36, 62, 0.62);
  --z-glass-hover: rgba(16, 36, 62, 0.74);
  --z-glass-strong: rgba(16, 36, 62, 0.72);
  --z-line: rgba(255, 255, 255, 0.34);
  --z-shadow: 0 30px 80px rgba(6, 18, 34, 0.35);
  --z-text-shadow: 0 1px 12px rgba(6, 22, 40, 0.5);

  /* Type */
  --z-font: "DM Sans", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --z-title-font: "Jost", "DM Sans", ui-sans-serif, sans-serif;
  --z-text: 16px;        /* anything you read */
  --z-small: 14px;       /* the smallest text allowed */
  --z-tag: 13px;         /* the spaced capitals line only */
  --z-title: clamp(30px, 4.2vw, 56px);
  --z-heading: clamp(30px, 5vw, 46px);

  /* Touch */
  --z-tap: 44px;         /* every button at least this tall */
  --z-radius: 99px;
  --z-radius-panel: 20px;

  /* Layout: one content width shared by the site header, pages, footer and for-sale bar.
     A game lines up its own overlay with padding-inline: max(16px, calc((100vw - var(--z-container)) / 2)). */
  --z-container: 1120px;
}

/* Title lockup: GAME NAME over SUPER INTELLIGENCE, thin and widely spaced. */
.z-lockup h1 {
  margin: 0; font-family: var(--z-title-font); font-weight: 300; text-transform: uppercase;
  font-size: var(--z-title); line-height: 1; letter-spacing: 0.3em; margin-right: -0.3em;
}
.z-lockup .z-tag {
  margin: 10px 0 0 2px; font-family: var(--z-title-font); font-weight: 300; text-transform: uppercase;
  font-size: var(--z-tag); letter-spacing: 0.42em;
}

/* Buttons */
.z-btn {
  box-sizing: border-box;
  font: 500 15px/1.2 var(--z-font); color: var(--z-white); cursor: pointer; min-height: var(--z-tap);
  padding: 10px 18px; border-radius: var(--z-radius); border: 1px solid var(--z-line);
  background: var(--z-glass); text-shadow: var(--z-text-shadow);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: background 0.2s, transform 0.15s;
}
.z-btn:hover { background: var(--z-glass-hover); }
.z-btn:active { transform: scale(0.97); }
/* White ring with a navy edge, so keyboard focus shows over bright and dark scenes alike. */
.z-btn:focus-visible, .z-sale:focus-visible { outline: 2px solid var(--z-white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--z-navy); }
.z-btn:disabled { opacity: 0.45; cursor: default; }
.z-btn--primary { background: var(--z-ivory); color: var(--z-navy); border-color: transparent; text-shadow: none; font-weight: 600; }
.z-btn--primary:hover { background: var(--z-white); }

/* A row of choices, one selected (levels). */
.z-seg {
  display: inline-flex; gap: 2px; padding: 3px; min-height: var(--z-tap); border-radius: var(--z-radius);
  border: 1px solid var(--z-line); background: var(--z-glass);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.z-seg .z-btn { border: 0; background: transparent; min-height: 36px; padding: 6px 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Each segment looks 36px tall but its tap area reaches the full 44px. */
.z-seg .z-btn { position: relative; }
.z-seg .z-btn::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.z-seg .z-btn[aria-pressed="true"] { background: var(--z-ivory); color: var(--z-navy); text-shadow: none; }

/* Status line */
.z-pill {
  display: inline-block; padding: 8px 15px; border-radius: var(--z-radius); font: 500 15px/1.2 var(--z-font);
  color: var(--z-white); background: var(--z-glass); border: 1px solid var(--z-line); text-shadow: var(--z-text-shadow);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* Panel beside the play area (lessons, help) */
.z-panel {
  padding: 16px 18px 14px; border-radius: var(--z-radius-panel); font-family: var(--z-font);
  color: var(--z-white); background: var(--z-glass-strong); border: 1px solid var(--z-line); text-shadow: var(--z-text-shadow);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.z-panel h2 { margin: 0 0 8px; font: 600 20px/1.25 var(--z-font); }
.z-panel p { margin: 0 0 8px; font-size: var(--z-text); line-height: 1.45; }

/* Centre card (results, menus) */
.z-card {
  padding: 34px 40px 30px; border-radius: 26px; font-family: var(--z-font); text-align: center;
  color: var(--z-white); background: var(--z-glass-strong); border: 1px solid var(--z-line); box-shadow: var(--z-shadow);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.z-card h2 {
  margin: 0 0 8px; font-family: var(--z-title-font); font-weight: 300; font-size: var(--z-heading);
  line-height: 1.1; letter-spacing: 0.04em;
}
.z-card p, .z-card li { font-size: var(--z-text); line-height: 1.55; }

/* "[Domain] is for sale": the pill on the game screen. Same glass as the buttons, so
   the 14px line keeps 4.5:1 even over white snow or sky (v7); a gold ring and dot make it stand out
   without competing with the game (v8). */
.z-sale {
  box-sizing: border-box;
  font: 500 var(--z-small)/1.2 var(--z-font); color: var(--z-white); text-decoration: none;
  padding: 8px 14px 8px 28px; border-radius: var(--z-radius);
  background-color: var(--z-glass);
  background-image: radial-gradient(circle, var(--z-gold) 0 3.5px, transparent 4px);
  background-repeat: no-repeat; background-position: 12px 50%; background-size: 9px 9px;
  box-shadow: inset 0 0 0 1px rgba(234, 182, 77, 0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-shadow: var(--z-text-shadow);
}
.z-sale:hover { text-decoration: underline; }
/* The link looks 33px tall; its tap area reaches 45px. A game that positions the link
   (fixed or absolute) in its own CSS overrides the relative here. */
.z-sale { position: relative; }
.z-sale::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }

/* Share card dialog (opened by zeus-share.js) */
.z-share {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 18px; overflow: auto;
  border-radius: 26px; border: 1px solid var(--z-line); background: var(--z-glass-strong); color: var(--z-white);
  font-family: var(--z-font); box-shadow: var(--z-shadow);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.z-share::backdrop { background: rgba(6, 18, 34, 0.55); }
.z-share-card { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); }
.z-share-status { min-height: 1.4em; margin: 12px 2px 4px; font-size: var(--z-small); text-align: center; }
.z-share-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.z-share-actions .z-btn { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .z-btn { transition: none; }
}

/* The shared for-sale bar on site pages (written by tools/site.mjs, run by zeus-sale.js).
   Phones and laptops: a slim bar along the bottom (one line on phones), lined up with the page. Very wide screens:
   a small card in the bottom right. It hides while the game, a page's top picture or the footer
   is on screen, and can be closed. zeus-sale.js keeps --z-salebar-h at the bar's height (0 when
   it does not span the page) so sticky things can stay clear of it.
   House breakpoints: 480, 768, 900, 1224 (and 1880 for the corner card). */
.z-salebar {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 6px calc(10px + env(safe-area-inset-bottom)) 16px;
  background: #10243e; border-top: 1px solid rgba(234, 182, 77, 0.7); color: var(--z-white);
  font-family: var(--z-font); box-shadow: 0 -8px 28px rgba(6, 18, 34, 0.35);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.z-salebar[hidden] { display: none; }
.z-salebar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
.z-salebar__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-height: var(--z-tap); }
.z-salebar__text { flex: 1; min-width: 0; }
.z-salebar__title { display: block; margin: 0; font: 600 15px/1.3 var(--z-font); }
.z-salebar__title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--z-gold); vertical-align: 1px; }
.z-salebar__credit { display: block; margin: 2px 0 0; font-size: var(--z-small); opacity: 0.85; }
.z-salebar__cta { box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--z-tap); min-width: 64px; padding: 0 14px; border-radius: var(--z-radius); background: var(--z-ivory); color: var(--z-navy); font: 600 15px/1 var(--z-font); white-space: nowrap; }
.z-salebar__cta .z-cta-long { display: none; }
.z-salebar__close { box-sizing: border-box; flex: none; width: var(--z-tap); height: var(--z-tap); border: 0; border-radius: 50%; background: transparent; color: var(--z-white); font: 400 24px/1 var(--z-font); cursor: pointer; }
.z-salebar__close:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 479px) {
  /* Phones: one line. The gold dot sits in the side margin so the words get the room. */
  .z-salebar { padding-left: 6px; padding-right: 2px; gap: 4px; }
  .z-salebar__link { gap: 8px; }
  .z-salebar__credit { display: none; }
  .z-salebar__title { font-size: var(--z-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .z-salebar__title::before { margin-right: 4px; }
  .z-salebar__cta { gap: 4px; padding: 0 10px; }
}
@media (min-width: 768px) {
  .z-salebar { padding-left: max(16px, calc((100% - var(--z-container)) / 2)); padding-right: max(6px, calc((100% - var(--z-container)) / 2)); gap: 10px; }
  .z-salebar__link { gap: 12px; }
  .z-salebar__cta { padding: 0 16px; }
  .z-salebar__cta .z-cta-long { display: inline; }
  .z-salebar__cta .z-cta-short { display: none; }
}
@media (min-width: 1880px) {
  /* Very wide screens only: a card in the bottom right, clear of the content. */
  .z-salebar { left: auto; right: 20px; bottom: 20px; width: 380px; flex-wrap: wrap; align-items: flex-start; padding: 16px 8px 16px 18px; border: 1px solid rgba(234, 182, 77, 0.7); border-radius: var(--z-radius-panel); }
  .z-salebar__link { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 1879px) { body.z-has-salebar main { padding-bottom: 96px; } }
@media (prefers-reduced-motion: reduce) { .z-salebar { transition: none; } }