/* Inter, served from this site (subset, OFL licence in /static/fonts/OFL.txt): the same typeface everywhere, with no request to anyone else's server. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/inter-700.woff2") format("woff2"); }
/* buttons, inputs and the like do not inherit the page font by themselves: make them. */
button, input, select, textarea, summary, optgroup { font-family: inherit; letter-spacing: inherit; }
/* Quorix website - "Launcher" direction: dark, violet gradient, matches the app (Inter, Quorix Dark).
   Deliberately a single dark look: every colour is set explicitly below. */
:root {
  --bg: #0b0a16; --panel: #141228; --line: #28244a; --fg: #f3f1ff; --mut: #a7a3cc;
  --a1: #7c5cff; --a2: #c05bff; --ok: #34d399; --warn: #fbbf24; --bad: #f87171;
  --link: #b9a8ff; --prose: #dcd8f5; --faint: #8e8ab8; --code-bg: #1d1a3a; --pre-bg: #100f20; --nav-bg: rgba(11, 10, 22, .82);
  --chip-bg: rgba(124, 92, 255, .18); --chip-fg: #cfc3ff; --state-bg: rgba(20, 18, 40, .6); --glow: rgba(124, 92, 255, .30);
  --notice-fg: #1a1a1a; --shadow: rgba(0, 0, 0, .55);
}
/* Light palette: used when the visitor's system prefers light (unless they chose dark) or when they pressed the theme button. */
:root[data-theme="light"] {
  --bg: #f6f5fb; --panel: #ffffff; --line: #dcd8ee; --fg: #1b1833; --mut: #55517c;
  --a1: #6a49ee; --a2: #b04bef; --ok: #0f9d6b; --warn: #b7791f; --bad: #c53030;
  --link: #5a3de0; --prose: #2b2850; --faint: #6c6896; --code-bg: #eceaf8; --pre-bg: #f0eefb; --nav-bg: rgba(246, 245, 251, .88);
  --chip-bg: rgba(106, 73, 238, .12); --chip-fg: #4a30c8; --state-bg: rgba(255, 255, 255, .7); --glow: rgba(124, 92, 255, .16);
  --shadow: rgba(40, 30, 90, .18);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f5fb; --panel: #ffffff; --line: #dcd8ee; --fg: #1b1833; --mut: #55517c;
    --a1: #6a49ee; --a2: #b04bef; --ok: #0f9d6b; --warn: #b7791f; --bad: #c53030;
    --link: #5a3de0; --prose: #2b2850; --faint: #6c6896; --code-bg: #eceaf8; --pre-bg: #f0eefb; --nav-bg: rgba(246, 245, 251, .88);
    --chip-bg: rgba(106, 73, 238, .12); --chip-fg: #4a30c8; --state-bg: rgba(255, 255, 255, .7); --glow: rgba(124, 92, 255, .16);
    --shadow: rgba(40, 30, 90, .18);
  }
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }
body {
  margin: 0; color: var(--fg); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55;
  background: radial-gradient(900px 420px at 80% -10%, var(--glow), transparent 60%), var(--bg);
  background-repeat: no-repeat;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--a1); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 820px; }

/* server notice (filled in by live.js from status.json; hidden when there is none) */
.notice { padding: 10px 16px; text-align: center; font-weight: 600; font-size: 14.5px; color: var(--notice-fg); background: #f5b84b; }
.notice.back { background: var(--ok); }
.notice.info { background: var(--a1); color: #fff; }
.notice[hidden] { display: none; }

/* nav */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.topnav { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 14px 0 10px; }
.topnav ul { grid-column: 1 / -1; }
.brand { font-weight: 800; font-size: 20px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.topnav ul { display: flex; gap: 6px 15px; list-style: none; margin: 0; padding: 0; font-size: 14px; flex-wrap: wrap; }
.topnav ul a { color: var(--mut); } .topnav ul a:hover { color: var(--fg); text-decoration: none; }

/* buttons */
.btn { display: inline-block; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 10px 30px rgba(124, 92, 255, .4); border: 0; cursor: pointer; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost { background: transparent; box-shadow: none; border: 1px solid var(--line); color: var(--fg); }
.btn.light { background: #fff; color: #3a1fc0; box-shadow: none; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; align-items: center; padding: 34px 0 54px; }
.hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 16px; font-weight: 800; text-wrap: balance; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--mut); font-size: 17px; line-height: 1.6; max-width: 36em; margin: 0 0 24px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.shot { border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 30px 80px var(--shadow), 0 0 0 6px rgba(124, 92, 255, .08); overflow: hidden; min-width: 0; }
.shot .bar { height: 30px; display: flex; gap: 6px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line); }
.shot .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3562; }

/* live strip */
.live { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); margin-bottom: 54px; }
.live > div { flex: 1 1 150px; min-width: 0; }
.live b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.live span { font-size: 12.5px; color: var(--mut); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6b6891; margin-right: 6px; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.dot.off { background: var(--bad); }

/* headings, sections */
h1.page { font-size: clamp(30px, 4.5vw, 44px); letter-spacing: -.03em; margin: 26px 0 10px; font-weight: 800; }
h2.sec { font-size: 24px; letter-spacing: -.02em; margin: 0 0 18px; }
h2.sec small { color: var(--mut); font-weight: 500; font-size: 15px; margin-left: 6px; }
.more { margin: -34px 0 54px; }

/* game tiles */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 54px; }
.tile { border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; min-width: 0; }
.tile .art { aspect-ratio: 16 / 10; display: grid; place-items: center; font-weight: 800; font-size: 30px; color: rgba(255, 255, 255, .95); }
.tile p { margin: 0; padding: 10px 12px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tile small { display: block; color: var(--mut); font-weight: 400; font-size: 11.5px; }

/* feature row */
.feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 54px; }
.feat > div { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(124, 92, 255, .14), transparent 60%), var(--panel); }
.feat b { display: block; font-size: 16px; margin-bottom: 6px; }
.feat span { color: var(--mut); font-size: 14px; line-height: 1.5; }

/* cards, news, changelog, docs */
.card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--fg); margin-bottom: 14px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.card ul { margin: 0 0 10px; padding-left: 20px; color: var(--mut); }
.card li { margin-bottom: 6px; }
.news { margin-bottom: 54px; }
.doclist { display: grid; gap: 12px; margin-top: 20px; }
.doclist a.card { margin: 0; transition: border-color .15s; }
.doclist a.card:hover { border-color: var(--a1); text-decoration: none; }
.doclist b { display: block; font-size: 17px; }
.doclist span { color: var(--mut); display: block; margin: 4px 0; }
.doclist small { color: var(--faint); font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

/* download box */
.dl { border-radius: 22px; padding: 34px; margin: 20px 0 40px; background: linear-gradient(135deg, #5b3df0, #b64cf0); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.dl h2 { font-size: 30px; margin: 0 0 8px; letter-spacing: -.02em; }
.dl p { margin: 0 0 16px; opacity: .92; }
.dl ol { margin: 0; padding-left: 20px; line-height: 1.8; font-size: 15px; }

/* download page and prose */
.steps { padding-left: 22px; line-height: 1.7; } .steps li { margin-bottom: 12px; }
.plain { padding-left: 20px; line-height: 1.7; } .plain li { margin-bottom: 8px; }
code { font-family: ui-monospace, Consolas, "Cascadia Mono", monospace; font-size: .9em; background: var(--code-bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
pre { background: var(--pre-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
.muted { color: var(--mut); font-size: 14px; }
.src { margin-top: 30px; } .crumb { margin: 22px 0 0; font-size: 14px; }
.prose { padding: 8px 0 20px; overflow-wrap: anywhere; }
.prose h1 { font-size: clamp(30px, 4.5vw, 42px); letter-spacing: -.03em; margin: 20px 0 14px; }
.prose h2 { font-size: 26px; margin: 38px 0 12px; letter-spacing: -.02em; padding-top: 14px; border-top: 1px solid var(--line); }
.prose h3 { font-size: 19px; margin: 26px 0 8px; } .prose h4 { margin: 20px 0 6px; }
.prose p, .prose li { color: var(--prose); line-height: 1.7; } .prose li { margin-bottom: 4px; }
.prose table { display: block; overflow-x: auto; border-collapse: collapse; margin: 16px 0; max-width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; font-size: 14px; }
.prose th { background: var(--panel); }
.prose blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--a1); color: var(--mut); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 22px 0 36px; color: var(--mut); font-size: 13px; display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: space-between; margin-top: 30px; }

@media (max-width: 820px) {
  .hero, .dl { grid-template-columns: minmax(0, 1fr); }
  .dl { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- shared page furniture: leaderboards, stats, Dominion, states ---- */
.lead { margin-bottom: 18px; }
h1.page { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; margin: 8px 0 12px; font-weight: 800; text-wrap: balance; }
h2 { font-size: 22px; letter-spacing: -.02em; margin: 28px 0 10px; }
.mut { color: var(--mut); } .small { font-size: 13.5px; }
.state { padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--mut); background: var(--state-bg); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; margin: 18px 0 54px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; min-width: 0; }
.card h3 { margin: 0 0 2px; font-size: 17px; letter-spacing: -.01em; }
.card p { margin: 6px 0; }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--chip-bg); color: var(--chip-fg); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
table.board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th, .board td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.board tr:last-child td { border-bottom: 0; }
.board th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.board .num { text-align: right; }
.pager { display: flex; gap: 14px; align-items: center; margin: 18px 0 54px; }
.live.big { margin-bottom: 8px; }
input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: min(100%, 320px); }
input:focus-visible { outline: 3px solid var(--a1); outline-offset: 2px; }
.map-scroll { overflow: auto; max-width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.map { --cell: 34px; display: grid; gap: 2px; width: max-content; margin: 0 auto; }
@media (min-width: 900px) { .map { --cell: 52px; } .cell { font-size: 14px; } }
.cell { width: var(--cell); height: var(--cell); border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 54px; align-items: center; font-size: 14px; }
.key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* nav: sticky, and a single scrolling row on phones instead of wrapping into a tall block */
@media (max-width: 720px) {
  .topnav ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .topnav ul li { flex: none; }
}

/* polish: skip link, gentle hover on cards/tiles, readable account form */
.skip { position: absolute; left: -999px; top: 8px; background: var(--a1); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.tile, .card, .feat > div { transition: transform .15s, border-color .15s; }
.tile:hover, .cards .card:hover { transform: translateY(-2px); border-color: var(--a1); }
.prose form p { margin: 0 0 14px; } .prose label { font-weight: 600; font-size: 14px; }
.prose [role=alert] { color: var(--bad); }

/* theme + menu buttons, loading skeletons, forms, status messages */
.navtools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.iconbtn { font: inherit; font-size: 14px; color: var(--mut); background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.iconbtn:hover { color: var(--fg); border-color: var(--a1); }
.iconbtn:focus-visible { outline: 3px solid var(--a1); outline-offset: 2px; }
.menubtn { display: none; }
.skel { display: block; height: 1em; min-width: 3ch; border-radius: 6px; background: linear-gradient(90deg, var(--line), transparent, var(--line)); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form .hint { color: var(--mut); font-size: 13px; margin: 4px 0 0; }
.form .field { margin: 0 0 16px; }
.alert { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bad); color: var(--fg); background: color-mix(in srgb, var(--bad) 14%, transparent); margin: 0 0 16px; }
.okmsg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); margin: 0 0 16px; }
.balance { font-size: 40px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 4px 0; }
@media (max-width: 720px) {
  .js .menubtn { display: inline-block; }
  .js .topnav ul { display: none; flex-direction: column; flex-wrap: nowrap; overflow: visible; padding: 8px 0; border-top: 1px solid var(--line); }
  .js .topnav.open ul { display: flex; }
  .js .topnav ul a { display: block; padding: 8px 2px; font-size: 16px; }
  .navtools .btn { padding: 10px 14px; }
}
@media (max-width: 520px) { .board th, .board td { padding: 9px 8px; } .board th { font-size: 11px; letter-spacing: .03em; } }

/* voting */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.poll { margin-top: 18px; }
.pollq { margin: 0 0 4px; font-size: 22px; }
fieldset.options { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; min-width: 0; }
.opt { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; }
.opt.mine { border-color: var(--a1); }
.opt label { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; cursor: pointer; margin: 0; }
.opt input[type=radio] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--a1); }
.opt .otitle { font-weight: 700; }
.opt .odesc { grid-column: 2; color: var(--mut); font-size: 14px; font-weight: 400; }
.opt .bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.opt .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.opt .count { font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
fieldset[disabled] .opt label { cursor: default; }
textarea { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: min(100%, 640px); }
textarea:focus-visible { outline: 3px solid var(--a1); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
details > form { margin-top: 10px; }
summary.btn { font: inherit; font-size: 15px; font-weight: 700; list-style: none; }
summary.btn::-webkit-details-marker { display: none; }

/* ---- brand logo, game pages, features grid, home slideshow ---- */
.mark { background: url("quorix_logo.svg") center / contain no-repeat; border-radius: 0; }
a.tile { display: block; color: var(--fg); transition: transform .15s, border-color .15s; }
a.tile:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--a1); }
.tile[hidden] { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.chipbtn { font: inherit; font-size: 14px; font-weight: 600; color: var(--mut); background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.chipbtn:hover { color: var(--fg); border-color: var(--a1); }
.chipbtn.on { color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); border-color: transparent; }
.gamehero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: center; padding: 24px; border-radius: 22px; margin: 14px 0 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ga) 30%, var(--panel)), color-mix(in srgb, var(--gb) 22%, var(--panel))); border: 1px solid var(--line); }
.gamehero .gart { aspect-ratio: 1; border-radius: 26px; display: grid; place-items: center; font-weight: 800; font-size: 54px; color: rgba(255, 255, 255, .96);
  background: linear-gradient(135deg, var(--ga), var(--gb)); box-shadow: 0 18px 40px var(--shadow); }
.gamehero h1.page { margin: 0 0 6px; }
.gamehero .lead { margin: 0 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.howto { font-size: 17px; line-height: 1.7; max-width: 46em; color: var(--prose); }
.featgrid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.feat-card h3 { font-size: 19px; }
@media (max-width: 560px) { .gamehero { grid-template-columns: minmax(0, 1fr); } .gamehero .gart { width: 96px; font-size: 36px; border-radius: 20px; } }

.show { position: relative; margin: 6px 0 40px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(160deg, color-mix(in srgb, var(--a1) 12%, var(--panel)), var(--panel) 60%); overflow: hidden; box-shadow: 0 30px 80px var(--shadow); }
.show-viewport { overflow: hidden; touch-action: pan-y; }
.show-track { display: flex; }
.show.is-js .show-track { transition: transform .75s cubic-bezier(.22, .8, .24, 1); }
.slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 30px; align-items: center; padding: 38px 38px 26px; }
.slide-text h1, .slide-text h2 { font-size: clamp(27px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 14px; font-weight: 800; text-wrap: balance; }
.slide-text p { color: var(--mut); font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.slide-text .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a1); margin: 0 0 10px; }
.slide-text .cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.slide-img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px var(--shadow); }
.slide-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.slide-tiles .tile { background: var(--bg); }
.slide-final { background: radial-gradient(500px 260px at 85% 40%, color-mix(in srgb, var(--a2) 28%, transparent), transparent 70%); }
/* content fades in (and the picture eases up) each time its slide becomes the current one */
.show.is-js .slide .slide-text > *, .show.is-js .slide .slide-img, .show.is-js .slide .slide-tiles { opacity: 0; transform: translateY(14px); }
.show.is-js .slide.active .slide-text > *, .show.is-js .slide.active .slide-img, .show.is-js .slide.active .slide-tiles { animation: rise .7s cubic-bezier(.22, .8, .24, 1) forwards; }
.show.is-js .slide.active .slide-text > :nth-child(2) { animation-delay: .12s; }
.show.is-js .slide.active .slide-text > :nth-child(3) { animation-delay: .24s; }
.show.is-js .slide.active .slide-text > :nth-child(4) { animation-delay: .36s; }
.show.is-js .slide.active .slide-img, .show.is-js .slide.active .slide-tiles { animation-delay: .2s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.show-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 16px 18px; flex-wrap: wrap; }
.dots { display: flex; gap: 8px; }
.dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.dot[aria-current="true"] { background: linear-gradient(135deg, var(--a1), var(--a2)); transform: scale(1.3); }
.dot:focus-visible, .iconbtn:focus-visible { outline: 3px solid var(--a1); outline-offset: 3px; }
.iconbtn:disabled { opacity: .4; cursor: default; }
.show-progress { height: 3px; background: transparent; }
.show-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--a1), var(--a2)); }
.show:not(.is-js) .show-bar, .show:not(.is-js) .show-progress { display: none; }
.show:not(.is-js) .show-track { flex-direction: column; }
@media (max-width: 820px) {
  .show.is-js .show-track { align-items: flex-start; }
  .slide-tiles .tile:nth-child(n+5) { display: none; }
  .slide-tiles .tile .art { aspect-ratio: 16 / 8; font-size: 24px; }
  .slide { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px 14px; }
  .slide-img { order: -1; }
  .slide-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); order: -1; }
  .slide-text p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .show.is-js .show-track { transition: none; }
  .show.is-js .slide .slide-text > *, .show.is-js .slide .slide-img, .show.is-js .slide .slide-tiles { opacity: 1; transform: none; animation: none !important; }
  .show-progress i { transition: none !important; }
}


/* Dominion map: one SVG, scales to the screen */
.dommap { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #162a42; max-width: 1000px; margin: 0 auto; }
.dommap svg { display: block; width: 100%; height: auto; }
.dommap path { transition: fill .4s; cursor: default; }
.dommap path:hover { filter: brightness(1.18); }
.domtip { position: absolute; z-index: 2; padding: 6px 10px; border-radius: 8px; background: rgba(10, 8, 24, .92); color: #fff; font-size: 13px; pointer-events: none; white-space: nowrap; }

/* FAQ */
.faq { display: grid; gap: 10px; margin: 18px 0 26px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 0 18px; transition: border-color .2s; }
.faq details[open] { border-color: var(--a1); }
.faq summary { cursor: pointer; padding: 15px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--a1); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--mut); line-height: 1.65; }

/* games search */
.gsearch { width: 100%; max-width: 420px; margin: 4px 0 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; }
.gsearch:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.gempty { color: var(--mut); margin: 18px 0; }

/* game of the day */
.gotd { display: flex; align-items: center; gap: 18px; padding: 16px 18px; margin: 0 0 40px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.gotd .gart { width: 86px; height: 86px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 28px; color: #fff; flex: none; background: linear-gradient(135deg, var(--ga), var(--gb)); }
.gotd h2 { margin: 0 0 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--a1); }
.gotd p { margin: 0 0 8px; color: var(--mut); }
.gotd b { color: var(--fg); font-size: 20px; }
@media (max-width: 520px) { .gotd { flex-direction: column; align-items: flex-start; } }
a.gotd, a.gotd:hover { color: var(--fg); text-decoration: none; }
a.gotd:hover { border-color: var(--a1); }


/* ---- theme switch (top right): a day/night slider ---- */
.themeswitch { position: relative; width: 62px; height: 32px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: none; flex: none; -webkit-tap-highlight-color: transparent; }
.themeswitch:focus-visible { outline: 3px solid var(--a1); outline-offset: 3px; }
.ts-track { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, #1a1442, #3b2a8f); transition: background .6s ease; }
.ts-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #5b4bb0; background: #e8e4ff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transform: translateX(30px); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), background .4s, color .4s; }
.ts-knob svg { position: absolute; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.ts-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.ts-moon { opacity: 1; transform: none; }
.ts-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .9; transition: opacity .4s, transform .5s; animation: twinkle 2.4s ease-in-out infinite; }
.s1 { left: 9px; top: 8px; } .s2 { left: 20px; top: 19px; width: 2px; height: 2px; animation-delay: .8s; } .s3 { left: 30px; top: 7px; width: 2px; height: 2px; animation-delay: 1.5s; }
@keyframes twinkle { 50% { opacity: .25; transform: scale(.6); } }
.ts-cloud { position: absolute; right: 8px; bottom: 6px; width: 20px; height: 8px; border-radius: 8px; background: #fff; opacity: 0; transform: translateX(14px); transition: opacity .4s, transform .6s ease; box-shadow: -7px -4px 0 -1px #fff; }
.themeswitch[aria-checked="false"] .ts-track { background: linear-gradient(135deg, #6fb7ff, #ffd36b); }
.themeswitch[aria-checked="false"] .ts-knob { transform: none; background: #fff6d6; color: #f59e0b; }
.themeswitch[aria-checked="false"] .ts-sun { opacity: 1; transform: none; }
.themeswitch[aria-checked="false"] .ts-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
.themeswitch[aria-checked="false"] .ts-star { opacity: 0; transform: translateY(-8px); animation: none; }
.themeswitch[aria-checked="false"] .ts-cloud { opacity: .95; transform: none; }
.themeswitch:hover .ts-knob { filter: brightness(1.06); }
.themeswitch:active .ts-knob { width: 30px; }
.searchbtn { display: inline-grid; place-items: center; padding: 7px 9px; }
.searchbtn[hidden] { display: none; }
.btn.pulse { animation: glowpulse 3.2s ease-in-out infinite; }
@keyframes glowpulse { 0%, 100% { box-shadow: 0 10px 30px rgba(124, 92, 255, .4); } 50% { box-shadow: 0 10px 38px rgba(192, 91, 255, .75), 0 0 0 5px rgba(124, 92, 255, .16); } }
@media (max-width: 720px) { .navtools { gap: 8px; } .signin-link { display: none; } .themeswitch { width: 54px; height: 30px; } .ts-knob { width: 24px; height: 24px; transform: translateX(24px); } }
@media (max-width: 720px) {
  .topnav { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
  .brand { white-space: nowrap; }
  .searchbtn { display: none !important; }
  .navtools .btn { padding: 9px 12px; font-size: 14px; }
}

.only-phone { display: none; }
@media (max-width: 720px) { .only-phone { display: list-item; } }

/* try-it page */
.trygrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 10px 0 24px; }
@media (max-width: 820px) { .trygrid { grid-template-columns: minmax(0, 1fr); } }
.trybox { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.trybox h2 { margin: 0 0 4px; }
.trystats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 14px 0 0; color: var(--mut); }
.trystats b { color: var(--fg); font-variant-numeric: tabular-nums; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.rxpad { display: grid; place-items: center; width: 100%; height: 220px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 22px; font-weight: 800; color: #fff; user-select: none; background: #4a3fb5; transition: background .15s, transform .15s; }
.rxpad:active { transform: scale(.985); }
.rxpad[data-state="wait"] { background: #c0392b; }
.rxpad[data-state="go"] { background: #14b866; }
.rxpad[data-state="early"] { background: #b9770e; }
.rxpad[data-state="done"] { background: #2563eb; }
.mmgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mmcard { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.mmin { position: relative; display: block; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.4, 0, .2, 1); transform-style: preserve-3d; }
.mmcard.up .mmin, .mmcard.done .mmin { transform: rotateY(180deg); }
.mmback, .mmfront { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-weight: 800; font-size: 26px; color: #fff; }
.mmback { background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18); }
.mmfront { transform: rotateY(180deg); }
.mmcard.done .mmfront { box-shadow: 0 0 0 3px var(--ok); }
.mmcard:focus-visible { outline: 3px solid var(--a1); outline-offset: 3px; border-radius: 14px; }
.mmwin { margin: 12px 0 0; font-weight: 700; color: var(--ok); }

/* find-your-game quiz */
.quiz { margin: 16px 0 30px; }
.qstep, .qresult { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.qstep.in { animation: lbin .4s cubic-bezier(.22, .8, .24, 1); }
.qstep h2, .qresult h2 { margin: 0 0 16px; }
.qopts { display: grid; gap: 10px; }
.qopt { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.qopt:hover { transform: translateX(6px); border-color: var(--a1); background: var(--chip-bg); }
.qdots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.qdots i { width: 28px; height: 5px; border-radius: 4px; background: var(--line); transition: background .3s; }
.qdots i.on { background: linear-gradient(90deg, var(--a1), var(--a2)); }

/* game page actions and favourite star */
.gactions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.gactions [hidden] { display: none; }
.favbtn b { color: var(--mut); transition: color .2s, transform .3s; display: inline-block; }
.favbtn.on b { color: #f5b84b; transform: rotate(72deg) scale(1.2); }
.favbtn.on { border-color: #f5b84b; }

@media (prefers-reduced-motion: reduce) { .rxpad, .mmin { transition: none; } }

.feat-card h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; }
.gotd h2 { color: var(--link); }

/* the logo is the word itself (static/quorix_wordmark.svg), no symbol */
.brand .wordmark { display: block; height: 30px; width: auto; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), filter .3s; }
.brand:hover .wordmark { transform: scale(1.05) rotate(-1deg); filter: drop-shadow(0 4px 14px var(--glow)); }

/* launch anticipation: "coming soon" bar, road to launch, soon box */
.soonbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 16px; font-size: 13.5px; font-weight: 600; color: #fff; background: linear-gradient(90deg, #4f3fd1, #8b3fd1, #4f3fd1); background-size: 200% 100%; animation: soonshift 6s linear infinite; }
.soonbar:hover { text-decoration: none; filter: brightness(1.1); }
@keyframes soonshift { to { background-position: -200% 0; } }
.soondot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: ping2 1.8s ease-out infinite; }
@keyframes ping2 { to { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } }
.soonbtn { filter: saturate(.9); }
.soon-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin: 0 0 6px; }
.road { list-style: none; margin: 8px 0 30px; padding: 0; display: grid; gap: 10px; position: relative; }
.road li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.road li b { display: block; }
.road li span { color: var(--mut); font-size: 14px; }
.road li em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.road-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--line); color: var(--mut); }
.road-done .road-dot { background: var(--ok); color: #06281c; }
.road-done em { color: var(--ok); }
.road-doing { border-color: var(--a1); }
.road-doing .road-dot { background: var(--a1); color: #fff; animation: ring 2s ease-out infinite; }
.road-doing em { color: var(--link); }
@media (max-width: 520px) { .road li { grid-template-columns: 30px minmax(0, 1fr); } .road li em { grid-column: 2; } }
.dl-soon .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .5); margin-left: 8px; }
.soonlist { margin: 0; padding-left: 20px; display: grid; gap: 10px; align-content: center; }

/* progress timeline */
.timeline { list-style: none; margin: 18px 0 30px; padding: 0 0 0 22px; border-left: 2px solid var(--line); display: grid; gap: 18px; }
.timeline li { position: relative; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.timeline li::before { content: ""; position: absolute; left: -31px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 0 0 4px var(--bg); }
.timeline time { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--link); margin-bottom: 2px; }
.timeline b { display: block; font-size: 17px; }
.timeline span { color: var(--mut); }
.navtools .btn { white-space: nowrap; }
@media (max-width: 720px) { .soonbtn { padding: 9px 11px !important; font-size: 13px !important; } .soonbar { font-size: 12.5px; padding: 6px 12px; } }
@media (max-width: 360px) { .brand .wordmark { height: 24px; } .navtools { gap: 5px; } .menubtn { padding: 7px 8px; } .navtools .btn { padding: 8px 9px !important; font-size: 12.5px !important; } }

/* "Coming soon" popup that opens when a Download button is pressed */
.soondlg { border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px 24px; width: min(92vw, 460px); background: var(--panel); color: var(--fg); text-align: center; box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
.soondlg::backdrop { background: rgba(6, 4, 20, .65); backdrop-filter: blur(5px); }
.soondlg[open] { animation: lbin .35s cubic-bezier(.22, .8, .24, 1); }
.soondlg h2 { margin: 6px 0 8px; font-size: 28px; letter-spacing: -.02em; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.soondlg p { color: var(--mut); line-height: 1.6; margin: 0 0 14px; }
.soondlg .soonbtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 18px 0 0; }
.soonart { display: flex; justify-content: center; gap: 8px; height: 34px; align-items: flex-end; }
.soonart span { width: 10px; border-radius: 6px; background: linear-gradient(180deg, var(--a1), var(--a2)); animation: bars 1.1s ease-in-out infinite; }
.soonart span:nth-child(1) { height: 14px; } .soonart span:nth-child(2) { height: 30px; animation-delay: .15s; } .soonart span:nth-child(3) { height: 20px; animation-delay: .3s; }
@keyframes bars { 50% { transform: scaleY(.45); } }
.soonnote { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--a1); background: var(--chip-bg); margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) { .soondlg[open], .soonart span, .soonbar, .soondot { animation: none; } }

/* quiz v2 */
.qprog { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; color: var(--mut); font-size: 13px; }
.qbar { flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.qbar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--a1), var(--a2)); transition: width .5s cubic-bezier(.22, .8, .24, 1); }
.qhint { color: var(--mut); margin: -6px 0 14px; }
.qname { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 17px; margin: 0 0 14px; }
.qname:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.qrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.qopt { display: grid; gap: 2px; text-align: left; }
.qopt b { font-weight: 700; } .qopt span { color: var(--mut); font-weight: 400; font-size: 14px; }
.qopt.picked { border-color: var(--a1); background: var(--chip-bg); }
.qback { margin-top: 16px; background: none; border: 0; color: var(--mut); cursor: pointer; padding: 4px 0; }
.qback:hover { color: var(--fg); }
.qlast { color: var(--mut); text-align: center; margin: 14px 0 0; }
.qpicks { display: grid; gap: 12px; margin: 0 0 6px; }
.qpick { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); animation: lbin .5s cubic-bezier(.22, .8, .24, 1) backwards; animation-delay: var(--d, 0s); transition: transform .25s, border-color .2s; }
.qpick:hover { text-decoration: none; transform: translateX(6px); border-color: var(--a1); }
.qpick.top { border-color: var(--a1); box-shadow: 0 14px 40px -20px var(--glow); }
.qart { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--ga), var(--gb)); }
.qbody b { display: block; } .qtag { display: block; color: var(--mut); font-size: 14px; margin: 1px 0 6px; }
.qchips { display: flex; flex-wrap: wrap; gap: 6px; }
.qpct { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 520px) { .qpick { grid-template-columns: 52px minmax(0, 1fr); } .qart { width: 52px; height: 52px; } .qpct { grid-column: 2; } }

.gtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 14px; }
.gtools[hidden] { display: none; }
.gtools label { color: var(--mut); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.gtools select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
.qprog[hidden], .qresult[hidden], .qstep[hidden], .qlast[hidden] { display: none; }

.kindlinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 20px; }
a.chip:hover { text-decoration: none; filter: brightness(1.15); }
.cmp-pick { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin: 6px 0 16px; }
.cmp-pick label { display: grid; gap: 4px; color: var(--mut); font-size: 13px; flex: 1; min-width: 150px; }
.cmp-pick select { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 15px; }
.cmp-table table { width: 100%; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { font-size: 17px; }
.cmp-table tbody th { color: var(--mut); font-weight: 600; width: 28%; }
.cmp-table tr.diff td { background: var(--chip-bg); }
.gloss { display: grid; gap: 10px; margin: 16px 0 30px; }
.gloss > div { padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.gloss dt { font-weight: 700; margin-bottom: 2px; }
.gloss dd { margin: 0; color: var(--mut); line-height: 1.6; }

/* accent colour choices (footer): violet is the default and needs nothing here */
:root[data-accent="ocean"] { --a1:#2f7bff;--a2:#14c3e0;--link:#9cc2ff;--glow:rgba(47,123,255,.30);--chip-bg:rgba(47,123,255,.18);--chip-fg:#bcd6ff; }
:root[data-accent="ocean"][data-theme="light"] { --a1:#2f7bff;--a2:#14c3e0;--link:#1d5fd6;--glow:rgba(47,123,255,.30);--chip-bg:rgba(47,123,255,.12);--chip-fg:#1b4fb0; }
@media (prefers-color-scheme: light) { :root[data-accent="ocean"]:not([data-theme="dark"]) { --a1:#2f7bff;--a2:#14c3e0;--link:#1d5fd6;--glow:rgba(47,123,255,.30);--chip-bg:rgba(47,123,255,.12);--chip-fg:#1b4fb0; } }
:root[data-accent="forest"] { --a1:#10b981;--a2:#84cc16;--link:#86efac;--glow:rgba(16,185,129,.30);--chip-bg:rgba(16,185,129,.18);--chip-fg:#b7f5d6; }
:root[data-accent="forest"][data-theme="light"] { --a1:#10b981;--a2:#84cc16;--link:#0b7a55;--glow:rgba(16,185,129,.30);--chip-bg:rgba(16,185,129,.12);--chip-fg:#0b6a49; }
@media (prefers-color-scheme: light) { :root[data-accent="forest"]:not([data-theme="dark"]) { --a1:#10b981;--a2:#84cc16;--link:#0b7a55;--glow:rgba(16,185,129,.30);--chip-bg:rgba(16,185,129,.12);--chip-fg:#0b6a49; } }
:root[data-accent="sunset"] { --a1:#f97316;--a2:#ec4899;--link:#fdba74;--glow:rgba(249,115,22,.30);--chip-bg:rgba(249,115,22,.18);--chip-fg:#fed7aa; }
:root[data-accent="sunset"][data-theme="light"] { --a1:#f97316;--a2:#ec4899;--link:#c2410c;--glow:rgba(249,115,22,.30);--chip-bg:rgba(249,115,22,.12);--chip-fg:#9a3412; }
@media (prefers-color-scheme: light) { :root[data-accent="sunset"]:not([data-theme="dark"]) { --a1:#f97316;--a2:#ec4899;--link:#c2410c;--glow:rgba(249,115,22,.30);--chip-bg:rgba(249,115,22,.12);--chip-fg:#9a3412; } }
.accents { display: flex; align-items: center; gap: 8px; }
.accents button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .2s; }
.accents button:hover { transform: scale(1.2); }
.accents button[aria-pressed="true"] { border-color: var(--fg); transform: scale(1.12); }
.accents button:focus-visible { outline: 3px solid var(--a1); outline-offset: 2px; }
.accents [data-accent-pick="violet"] { background: linear-gradient(135deg, #7c5cff, #c05bff); }
.accents [data-accent-pick="ocean"] { background: linear-gradient(135deg, #2f7bff, #14c3e0); }
.accents [data-accent-pick="forest"] { background: linear-gradient(135deg, #10b981, #84cc16); }
.accents [data-accent-pick="sunset"] { background: linear-gradient(135deg, #f97316, #ec4899); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 120; padding: 12px 20px; border-radius: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 14px 40px rgba(0, 0, 0, .4); opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; z-index: 119; pointer-events: none; }
.cmp .more, .kindlinks + .more, .qresult .more, .trygrid + .more, .records + .more { margin: 16px 0 40px; }

/* badges */
.badgecount { color: var(--mut); margin: 0 0 12px; } .badgecount b { color: var(--fg); font-size: 22px; }
.badges { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.badges li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); opacity: .62; transition: opacity .3s, border-color .3s; }
.badges li.got { opacity: 1; border-color: #f5b84b; }
.badges .bico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--mut); font-size: 17px; }
.badges li.got .bico { background: linear-gradient(135deg, #f5b84b, #f97316); color: #fff; animation: tick .6s cubic-bezier(.34, 1.56, .64, 1); }
.badges b { display: block; } .badges li span { color: var(--mut); font-size: 14px; }
.badges em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.badges li.got em { color: var(--link); }
@media (max-width: 520px) { .badges li { grid-template-columns: 36px minmax(0, 1fr); } .badges em { grid-column: 2; } }

.tttbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.tttbar label { color: var(--mut); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.tttbar select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.tttgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 320px; margin: 0 auto; }
.tttcell { aspect-ratio: 1; border: 0; border-radius: 14px; font-size: 44px; font-weight: 800; cursor: pointer; background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 2px var(--line); transition: transform .15s, box-shadow .2s, background .2s; }
.tttcell:not(:disabled):hover { transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--a1); }
.tttcell.x { color: var(--a1); } .tttcell.o { color: var(--a2); }
.tttcell:disabled { cursor: default; }
.records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.records > div { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); text-align: center; }
.records b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; } .records span { color: var(--mut); font-size: 13px; }
@media (max-width: 720px) { .records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trygrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* print: just the page's content, black on white (e.g. a game's rules) */
@media print {
  body::before, body::after, .spot, .progress-top, .totop, .topbar, .soonbar, .foot, .splash, .gactions, .btn, .dl, .toast, dialog, .accents, .filters, .crumb, .more { display: none !important; }
  :root, body { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; }
  a { color: #000 !important; text-decoration: underline; }
  .wrap, .narrow { max-width: none !important; padding: 0 !important; }
  .gamehero { background: none !important; border: 0 !important; padding: 0 !important; }
  .gamehero .gart { border: 2px solid #000; color: #000 !important; background: #fff !important; }
  .faq details { border: 0; padding: 0; } .faq details > * { display: block !important; } .faq summary::after { display: none; }
  .tile, .card { border: 1px solid #999 !important; break-inside: avoid; }
  [data-rv] { opacity: 1 !important; transform: none !important; }
}

/* text size, shortcuts help, FAQ anchors */
html[data-size="small"] body { zoom: .92; } html[data-size="large"] body { zoom: 1.12; } html[data-size="xlarge"] body { zoom: 1.28; }
.sizes { display: inline-flex; gap: 4px; margin-left: 10px; } .sizes button, .kbdbtn { border: 1px solid var(--line); background: transparent; color: var(--mut); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sizes button[aria-pressed="true"] { color: var(--fg); border-color: var(--a1); } .sizes button:hover, .kbdbtn:hover { color: var(--fg); }
.kbdbtn { margin-left: 8px; width: 26px; padding: 2px 0; }
.shortcuts { padding: 22px 24px 8px; } .shortcuts h2 { margin: 0 0 12px; } .shortcuts dl { margin: 0 0 8px; display: grid; gap: 10px; } .shortcuts dl > div { display: flex; justify-content: space-between; gap: 18px; } .shortcuts dt { white-space: nowrap; } .shortcuts dd { margin: 0; color: var(--mut); text-align: right; }
.faq details[id] { scroll-margin-top: 130px; }

.dyk { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 0 0 22px; padding: 12px 18px; border-radius: 14px; border: 1px dashed var(--line); color: var(--mut); }
.dyk b { color: var(--link); } .dyk span { transition: opacity .35s, transform .35s; display: inline-block; } .dyk span.out { opacity: 0; transform: translateY(6px); }
.accents { flex-wrap: wrap; row-gap: 8px; }
.sizes { gap: 6px; margin-left: 6px; } .sizes button { min-width: 34px; padding: 3px 6px; }

.favcard { position: relative; } .favcard .tile { display: block; height: 100%; }
.favx { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(8, 6, 20, .7); color: #fff; font-size: 18px; line-height: 1; transition: transform .2s, background .2s; }
.favx:hover { transform: scale(1.15); background: #c53030; }

.chipbtn2 { border: 0; cursor: pointer; font: inherit; } .chipbtn2:hover { filter: brightness(1.2); }

/* "Motion: off" in the footer: no animations or transitions at all, and no pointer light / aurora */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] body::before, html[data-motion="off"] body::after, html[data-motion="off"] .spot { display: none !important; }
.motionbtn { width: auto; padding: 2px 10px; }
.card h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }

/* ---- first-visit intro: game tiles fly in from every side and collapse into a spark, a ring bursts out, QUORIX rises letter by letter, then the screen
   closes like an iris onto the page. About 2.7 s, once per tab session, click or Esc to skip. Always dark (it is a brand moment, not a themed page). ---- */
.splash { display: none; }
.splashing .splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: #0b0a16; color: #fff; animation: sp-iris .65s cubic-bezier(.7, 0, .84, 0) 1.85s forwards; }
.sp-glow { position: absolute; inset: -20%; background: radial-gradient(40% 40% at 30% 35%, rgba(124, 92, 255, .55), transparent 70%), radial-gradient(38% 38% at 72% 62%, rgba(192, 38, 211, .45), transparent 70%), radial-gradient(30% 30% at 55% 20%, rgba(34, 211, 238, .30), transparent 70%); animation: sp-fade .7s ease forwards; opacity: 0; }
.sp-tiles { position: absolute; inset: 0; display: grid; place-items: center; }
.sp-tiles i { position: absolute; width: clamp(54px, 9vmin, 84px); height: clamp(54px, 9vmin, 84px); border-radius: 18%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: clamp(18px, 3vmin, 28px); color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); opacity: 0;
  animation: sp-tile .9s cubic-bezier(.5, 0, .2, 1) calc(var(--i) * 30ms) forwards; }
@keyframes sp-tile { 0% { transform: translate(var(--sx), var(--sy)) rotate(var(--r)) scale(1.3); opacity: 0; } 18% { opacity: 1; } 70% { transform: translate(0, 0) rotate(0deg) scale(.9); opacity: 1; } 85% { transform: scale(1.35); opacity: .95; } 100% { transform: scale(0); opacity: 0; } }
.sp-ring { position: absolute; width: 22vmin; height: 22vmin; border-radius: 50%; border: 3px solid transparent; background: linear-gradient(#0b0a16, #0b0a16) padding-box, linear-gradient(135deg, #22d3ee, #7a5cff, #c026d3) border-box; opacity: 0; animation: sp-ring .8s cubic-bezier(.2, .7, .2, 1) .9s forwards; }
.sp-ring.r2 { animation-delay: 1s; border-width: 2px; }
@keyframes sp-ring { 0% { transform: scale(0); opacity: .95; } 100% { transform: scale(5); opacity: 0; } }
.sp-center { position: relative; z-index: 2; text-align: center; padding: 0 16px; }
.sp-word { display: flex; justify-content: center; font-size: clamp(56px, 15vmin, 150px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.sp-word span { display: inline-block; color: var(--c); opacity: 0; transform: translateY(.5em) scale(.7); animation: sp-letter .6s cubic-bezier(.2, .9, .25, 1.2) calc(.85s + var(--i) * 60ms) forwards; }
@keyframes sp-letter { to { opacity: 1; transform: none; } }
.sp-bar { width: min(340px, 60vw); height: 3px; margin: 18px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; opacity: 0; animation: sp-fade .3s ease 1s forwards; }
.sp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22d3ee, #7a5cff, #c026d3); animation: sp-fill .8s cubic-bezier(.3, .6, .2, 1) 1s forwards; }
@keyframes sp-fill { to { width: 100%; } }
.sp-tag { margin: 16px 0 0; font-size: clamp(14px, 2.4vmin, 20px); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); opacity: 0; animation: sp-rise .5s ease 1.3s forwards; }
@keyframes sp-fade { to { opacity: 1; } } @keyframes sp-rise { from { transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sp-iris { from { clip-path: circle(150vmax at 50% 50%); } to { clip-path: circle(0% at 50% 50%); visibility: hidden; } }
.sp-skip { position: absolute; right: 18px; bottom: 18px; z-index: 3; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font-size: 13px; cursor: pointer; }
.sp-skip:hover { background: rgba(255, 255, 255, .18); }
@media (prefers-reduced-motion: reduce) { .splashing .splash { display: none; } }
html[data-motion="off"] .splash { display: none !important; }

/* phone tab bar (bottom): Home / Games / Play / Find / More */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 2px; padding: 4px 0; border: 0; background: none; color: var(--mut); font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 12px; transition: color .2s, transform .2s; }
  .tabbar svg { width: 24px; height: 24px; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar [aria-current="page"] { color: var(--link); }
  .tabbar [aria-current="page"] svg { transform: translateY(-2px) scale(1.12); }
  .tabbar a:active, .tabbar button:active { transform: scale(.94); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .totop { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .tabbar { display: none !important; } }

.more { margin: 16px 0 40px; }

/* hygiene: anchors land below the sticky header */
html { scroll-padding-top: 140px; }
/* footer as a site map */
.foot { flex-direction: column; align-items: stretch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; margin-top: 8px; }
.foot-cols > div { display: grid; gap: 6px; align-content: start; }
.foot-cols b { color: var(--fg); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.foot-cols a { color: var(--mut); font-size: 14px; } .foot-cols a:hover { color: var(--fg); }
@media (max-width: 520px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gcount { color: var(--mut); font-size: 14px; margin: 0 0 10px; }
.chipbtn small { opacity: .65; margin-left: 4px; }

/* game page: at a glance + rules as steps */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 6px; }
.glance > div { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 1px; }
.glance span { color: var(--mut); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .glance b { font-size: 18px; } .glance small { color: var(--mut); font-size: 12.5px; }
@media (max-width: 620px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.howsteps { margin: 0; padding: 0; list-style: none; counter-reset: hs; display: grid; gap: 10px; max-width: 46em; }
.howsteps li { counter-increment: hs; position: relative; padding: 4px 0 4px 46px; line-height: 1.65; color: var(--prose); font-size: 17px; }
.howsteps li::before { content: counter(hs); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); }

.foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .foot-tools .sizes { margin-left: 0; } .foot-tools .kbdbtn { margin-left: 0; }

.palette li.grp { padding: 8px 12px 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

.kindtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 44px; }
.kindtiles a { display: grid; gap: 2px; padding: 16px; border-radius: 16px; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--ga), var(--gb)); position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.22, .8, .24, 1), box-shadow .3s; }
.kindtiles a::before { content: ""; position: absolute; inset: 0; background: rgba(8, 6, 20, .38); }
.kindtiles a > * { position: relative; } .kindtiles b { font-size: 18px; } .kindtiles span { font-weight: 700; font-size: 13px; opacity: .95; } .kindtiles small { font-size: 12.5px; opacity: .9; line-height: 1.4; }
.kindtiles a:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .6); text-decoration: none; }

.offbar { position: fixed; left: 0; right: 0; top: 0; z-index: 130; padding: 8px 16px; text-align: center; font-size: 14px; font-weight: 600; background: #b45309; color: #fff; }
.offbar[hidden] { display: none; }

.glance { margin-bottom: 28px; } .howsteps, .howto { margin-bottom: 26px; }

/* whole-card links: the title is the link and its click area covers the card (no separate "more ->" text) */
.card { position: relative; }
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
.card h2 a::after, .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(h2 a:hover), .card:has(h3 a:hover) { border-color: var(--a1); }
.card h2 a:focus-visible, .card h3 a:focus-visible { outline: none; } .card:has(a:focus-visible) { outline: 3px solid var(--a1); outline-offset: 2px; }
.dyk { min-height: calc(2 * 1.55em + 26px); } @media (max-width: 520px) { .dyk { min-height: calc(4 * 1.55em + 26px); } }

/* Game night planner */
.gn { display: grid; gap: 16px; }
.gnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gnrow > b { min-width: 64px; }
.gnlist { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.gnlist li::marker { font-weight: 700; color: var(--a1); }
.gnlist a { font-weight: 700; }
.gnlist small { color: var(--mut); }

/* Main menu: grouped into three drop-downs (Play, Live, Learn) so the laptop bar is one calm row instead of twelve links.
   On a phone the groups are plain headings with their links listed underneath. */
.topnav ul > li { position: relative; }
.subbtn { font: inherit; font-size: 14px; color: var(--mut); background: none; border: 0; padding: 6px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.subbtn::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.subbtn:hover, .has-sub.open .subbtn { color: var(--fg); }
.has-sub.open .subbtn::after { transform: translateY(1px) rotate(225deg); }
@media (min-width: 721px) {
  .topnav { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 28px; padding: 12px 0; }
  .topnav .brand { grid-column: 1; grid-row: 1; }
  .topnav ul#site-menu { grid-column: 2; grid-row: 1; flex-wrap: nowrap; gap: 4px 22px; align-items: center; }
  .navtools { grid-column: 3; grid-row: 1; }
  .menubtn { display: none; }
  .has-sub > .sub { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 210px; padding: 8px; margin: 0; list-style: none; display: none; flex-direction: column; gap: 2px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(10, 5, 40, .5); z-index: 40; }
  .has-sub > .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { display: flex; }
  .has-sub .sub a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--fg); }
  .has-sub .sub a:hover { background: var(--chip-bg); text-decoration: none; }
}
@media (max-width: 720px) {
  .subbtn { pointer-events: none; font-weight: 700; color: var(--fg); padding: 8px 0 2px; }
  .subbtn::after { display: none; }
  .has-sub > .sub { list-style: none; margin: 0; padding: 0 0 4px 12px; display: flex; flex-direction: column; gap: 4px; }
}

/* secret: two names on screen for a few seconds (press V, K, J) */
.secretnames { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center; background: rgba(8, 6, 20, .93); opacity: 0; transition: opacity .5s; cursor: pointer; }
.secretnames.show { opacity: 1; }
.secretnames span { display: block; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #c9c2ff; margin-bottom: 18px; }
.secretnames b { display: block; font-size: clamp(30px, 7vw, 76px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; background: linear-gradient(135deg, #7c5cff, #22d3ee, #c05bff); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(14px) scale(.96); transition: transform .7s cubic-bezier(.22, .8, .24, 1); }
.secretnames.show b { transform: none; }
.secretnames.show b + b { transition-delay: .25s; }
[data-motion="off"] .secretnames, [data-motion="off"] .secretnames b { transition: none; }
@media print { .secretnames { display: none; } }