/* Game host styles — start menu, top bar, loading, countdown and result card. Made by Vortaxis Studio.
   Colours: --acc (accent) and --acc2 (second accent) are set per game in index.html. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("fonts/unbounded-var.woff2") format("woff2"); }
:root { --gc-font-display: "Unbounded", system-ui, sans-serif; --gc-font-body: "Inter", system-ui, sans-serif; --acc: #22e4ff; --acc2: #ff2ea6;
  --ink: #f4f2ff; --muted: #b3aed6; --panel: rgba(18, 15, 40, .78); --line: rgba(255, 255, 255, .12); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0816; color: var(--ink); font-family: var(--gc-font-body);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body.is-playing { touch-action: none; }
button { font: inherit; }
#gh-stage { position: fixed; inset: 0; overflow: hidden; }
#gh-stage > * { width: 100%; height: 100%; }

/* ---------- start menu ---------- */
.gh-menu { position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1100px 600px at 15% -10%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, color-mix(in srgb, var(--acc2) 24%, transparent), transparent 60%),
    var(--menu-bg, #0a0816) center / cover no-repeat; }
.gh-menu::before { content: ""; position: fixed; inset: 0; background: rgba(8, 6, 20, .55); pointer-events: none; }
.gh-menu__inner { position: relative; width: min(520px, 100%); display: grid; justify-items: center; gap: 14px; text-align: center; }
.gh-kicker { margin: 0; font: 800 12px/1 var(--gc-font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.gh-title { margin: 0; font: 900 clamp(34px, 9vw, 64px)/1.02 var(--gc-font-display); letter-spacing: -.02em; text-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.gh-title em { font-style: normal; color: var(--acc); text-shadow: 0 0 28px color-mix(in srgb, var(--acc) 60%, transparent); }
.gh-lead { margin: 0; max-width: 42ch; color: #dcd8f5; font: 500 16px/1.5 var(--gc-font-body); }
.gh-card { width: 100%; display: grid; gap: 12px; padding: 20px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gh-label { font: 700 12px/1 var(--gc-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gh-diff { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gh-diff button { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--ink); font: 700 14px/1 var(--gc-font-body); cursor: pointer; transition: background .15s, border-color .15s; }
.gh-diff button:hover { border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.gh-diff button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #071018; }
.gh-hint { margin: 0; min-height: 2.8em; color: var(--muted); font: 500 14px/1.4 var(--gc-font-body); }
.gh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gh-btn { min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); color: var(--ink);
  font: 800 16px/1 var(--gc-font-body); cursor: pointer; transition: transform .12s, filter .12s; }
.gh-btn:hover { filter: brightness(1.12); }
.gh-btn:active { transform: translateY(1px); }
.gh-btn--primary { border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 85%, #fff), var(--acc)); color: #071018;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--acc) 40%, transparent); }
.gh-btn:focus-visible, .gh-diff button:focus-visible, .gh-bar button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gh-how { margin: 0; max-width: 46ch; color: var(--muted); font: 500 13px/1.5 var(--gc-font-body); }
.gh-back { justify-self: start; margin-bottom: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10, 8, 24, .55);
  color: var(--ink); font: 700 13px/1 var(--gc-font-body); text-decoration: none; }
.gh-back:hover { border-color: var(--acc); }
.gh-back:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gh-credit { margin: 0; color: #8f8ab3; font: 500 12px/1 var(--gc-font-body); }
.gh-credit b { color: #cfcaf0; }

/* ---------- top bar while playing ---------- */
.gh-bar { position: fixed; z-index: 25; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; gap: 8px; }
@media (max-width: 720px) { .gh-bar--mb { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); } }
.gh-bar button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(10, 8, 24, .6); color: var(--ink); font-size: 18px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gh-bar svg { width: 20px; height: 20px; }

/* ---------- overlay: loading, countdown, result ---------- */
.gh-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 16, .55); }
.gh-overlay--result { background: rgba(6, 5, 16, .5); }
.gh-loading { display: grid; justify-items: center; gap: 14px; font: 600 15px/1.4 var(--gc-font-body); color: #dcd8f5; }
.gh-ring { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .15); border-top-color: var(--acc); animation: gh-spin .8s linear infinite; }
@keyframes gh-spin { to { transform: rotate(360deg); } }
.gh-count { font: 900 clamp(70px, 18vw, 140px)/1 var(--gc-font-display); color: var(--acc); text-shadow: 0 0 40px color-mix(in srgb, var(--acc) 70%, transparent); animation: gh-pop .42s ease-out; }
@keyframes gh-pop { from { transform: scale(1.5); opacity: 0; } to { transform: none; opacity: 1; } }
.gh-res { width: min(380px, 100%); display: grid; justify-items: center; gap: 10px; padding: 24px 20px; border-radius: 24px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gh-res__k { font: 800 12px/1 var(--gc-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.gh-res__t { font: 900 30px/1.1 var(--gc-font-display); }
.gh-res__p { margin: 0 0 6px; color: var(--muted); font: 500 14px/1.4 var(--gc-font-body); }
@media (prefers-reduced-motion: reduce) { .gh-ring, .gh-count { animation: none; } }