:root {
  --bg: #f7febf;
  --input-bg: #f1fda6;
  --primary: #2c34a4;
  --primary-hover: #3a46c6;
  --ink: #111;
  --muted: #b9c08a;
  --link: #3366cc;
  --font: "Lexend", system-ui, sans-serif;
  --zoom: 1.5;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* Everything is drawn 50% larger than the original recording, for small screens. */
html { zoom: var(--zoom); }

/* ---------- Lobby ---------- */
.lobby-col { width: 327px; margin: 0 auto; padding: 36px 0 30px; }
.logo { display: flex; align-items: center; gap: 8px; margin: 0 0 30px; color: var(--primary); font-size: 22px; font-weight: 500; letter-spacing: .02em; }
.logo-icon { width: 30px; height: 30px; }
.lobby-row { display: flex; justify-content: space-between; align-items: center; }
.label { font-size: 12px; }
.lobby-code { display: flex; align-items: center; gap: 4px; font-size: 19px; font-weight: 600; letter-spacing: .03em; }
.eye { width: 18px; height: 18px; color: var(--primary); }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); padding: 13px 8px; font-size: 13px; }
.btn-outline:hover { background: var(--input-bg); }
.settings { font-size: 17px; font-weight: 500; margin: 42px 0 26px; }
.field-label { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; margin: 14px 0 5px; }
.ico { color: var(--primary); font-size: 11px; }
.input { display: block; width: 100%; height: 30px; padding: 0 7px; background: var(--input-bg); border: 1.5px solid var(--primary);
  font: 500 13.5px var(--font); color: var(--ink); outline: none; border-radius: 0; appearance: none; }
.input::placeholder { color: #9aa07a; }
.input.disabled { display: flex; align-items: center; background: transparent; border-color: #e3ec9e; color: var(--muted); margin-bottom: 8px; font-weight: 400; }
.ac { position: relative; }
.ac .input { padding-right: 34px; }
.dice { position: absolute; right: 6px; top: 4px; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--primary); }
.dice svg { width: 100%; height: 100%; }
.ac-list { position: absolute; z-index: 20; left: 0; right: 0; top: 30px; height: 135px; overflow-y: scroll; background: #fff;
  border: 1.5px solid var(--primary); border-top: 0; }
.ac-item { padding: 7px 5px; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; cursor: pointer; }
.ac-item:hover, .ac-item.active { text-decoration: underline; }
.ac-loading { display: flex; height: 100%; align-items: center; justify-content: center; }
.plus-head { display: flex; justify-content: space-between; align-items: flex-end; margin: 14px 0 5px; }
.plus-head .field-label { margin: 0; }
.join { font-size: 11px; color: var(--primary); }
/* The chip row breaks out of the 327px column and is centred on the page, so all players fit. */
.players { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 44px 0 18px;
  width: min(760px, 100vw / var(--zoom) - 32px); position: relative; left: 50%; transform: translateX(-50%); }
.chip { flex: none; background: var(--primary); color: #fff; border-radius: 999px; padding: 6px 7px; font-size: 12.5px; font-weight: 500; }
.chip.me { text-decoration: underline; }
.btn-primary { width: 100%; height: 44px; border: 0; background: var(--primary); color: #fff; font-size: 14px; font-weight: 500; }
.btn-primary:hover { background: var(--primary-hover); }

.spinner { width: 22px; height: 22px; border: 2.5px solid transparent; border-bottom-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Game ---------- */
.game-head { position: sticky; top: 0; z-index: 10; height: 80px; background: var(--bg); display: flex; justify-content: center; align-items: center; }
.goal { text-align: center; }
.get-to { color: var(--primary); font-size: 16px; font-weight: 500; }
.goal-title { font-size: 19px; font-weight: 500; }
.surrender { position: absolute; right: 22px; top: 22px; width: 128px; padding: 9px 4px; font-size: 14px; font-weight: 500; line-height: 1.4; }
#article-wrap { background: #fff; min-height: calc(100vh / var(--zoom) - 80px); padding: 28px 0 60px; position: relative; }
#article-title, #article { width: 960px; max-width: calc(100% - 32px); margin: 0 auto; }
.loading { position: absolute; inset: 0; background: #fff; display: flex; justify-content: center; padding-top: 30vh; }

/* Minimal, original Wikipedia-ish article styling */
.firstHeading { font: 400 28px/1.3 "Linux Libertine", Georgia, "Times New Roman", serif; margin: 0 0 14px; }
.mw-body-content { font: 14px/1.6 sans-serif; color: #202122; }
.mw-body-content a { color: var(--link); text-decoration: none; }
.mw-body-content a:hover { text-decoration: underline; }
.mw-body-content a.new, .mw-body-content a.external { color: inherit; pointer-events: none; }
.mw-body-content h2 { font: 400 22px "Linux Libertine", Georgia, serif; border-bottom: 1px solid #a2a9b1; margin: 22px 0 8px; }
.mw-body-content h3 { font-size: 16px; margin: 16px 0 4px; }
.mw-body-content .mw-editsection { display: none; }
.mw-body-content img { max-width: 100%; height: auto; }
.mw-body-content table { border-collapse: collapse; font-size: 12.5px; }
.mw-body-content .wikitable td, .mw-body-content .wikitable th { border: 1px solid #a2a9b1; padding: 3px 6px; }
.mw-body-content .wikitable th { background: #eaecf0; }
.mw-body-content .infobox { float: right; clear: right; width: 22em; margin: 0 0 12px 18px; background: #f8f9fa; border: 1px solid #a2a9b1; padding: 3px; font-size: 12px; line-height: 1.4; }
.mw-body-content .infobox th, .mw-body-content .infobox td { padding: 3px 4px; vertical-align: top; text-align: left; }
.mw-body-content .infobox-above, .mw-body-content .infobox-title { text-align: center !important; font-weight: 700; font-size: 14px; }
.mw-body-content .infobox-image, .mw-body-content .infobox-header { text-align: center !important; }
.mw-body-content figure, .mw-body-content .thumb { margin: 4px 0 12px 18px; float: right; clear: right; font-size: 11.5px; }
.mw-body-content figure.mw-halign-left { float: left; margin: 4px 18px 12px 0; }
.mw-body-content figcaption { padding: 4px 2px; max-width: 260px; }
.mw-body-content .navbox { clear: both; width: 100%; border: 1px solid #a2a9b1; padding: 2px; margin-top: 10px; font-size: 11.5px; }
.mw-body-content .navbox-title { background: #ccccff; text-align: center; font-weight: 700; padding: 2px 4px; }
.mw-body-content .navbox-group { background: #ddddff; text-align: right; font-weight: 700; padding: 2px 6px; white-space: nowrap; }
.mw-body-content .navbox-list { padding: 2px 6px; }
.mw-body-content .navbox-abovebelow { background: #ddddff; text-align: center; }
.mw-body-content .navbar, .mw-body-content .mw-collapsible-toggle { display: none; }
.mw-body-content .toc, .mw-body-content #toc { display: inline-block; border: 1px solid #a2a9b1; background: #f8f9fa; padding: 8px 14px; font-size: 12px; }
.mw-body-content .reflist, .mw-body-content .references { font-size: 12px; }
.mw-body-content .hatnote { font-style: italic; padding-left: 1.6em; margin-bottom: 6px; }
.mw-body-content .shortdescription, .mw-body-content .noprint.portal, .mw-body-content .metadata.ambox { display: none; }
.mw-body-content sup.reference a { pointer-events: none; color: var(--link); }
.mw-body-content .plainlist ul, .mw-body-content .hlist ul { list-style: none; margin: 0; padding: 0; }
.mw-body-content .hlist li { display: inline; }
.mw-body-content .hlist li:not(:last-child)::after { content: " · "; font-weight: 700; }

/* Player pictures swapped into player pages */
.mw-body-content .player-picture { width: 220px; height: 220px; border-radius: 50%; display: block; margin: 4px auto; }
.mw-body-content .player-figure { float: right; clear: right; margin: 0 0 12px 18px; text-align: center; }

/* On arrival at a player page: confetti and flags burst out of the picture, which then bobs. */
.mw-body-content .player-pic-wrap { position: relative; display: block; width: fit-content; margin: 0 auto; }
.mw-body-content .player-pic-wrap .player-picture { animation: pic-pop .5s cubic-bezier(.3, 1.6, .5, 1) both, pic-bob 2.6s ease-in-out .6s infinite; }
@keyframes pic-pop { from { transform: scale(.6); } to { transform: scale(1); } }
@keyframes pic-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.mw-body-content .confetti { position: absolute; z-index: 5; left: 50%; top: 50%; width: 9px; height: 14px; margin: -7px 0 0 -5px;
  border-radius: 2px; font-size: 20px; line-height: 14px; pointer-events: none; opacity: 0;
  animation: confetti 1.5s cubic-bezier(.15, .7, .4, 1) both; }
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}

/* "<player> solves Web challenges at ECSC 2026." on player pages: larger, on a slowly hue-shifting pastel gradient. */
@property --shout-hue { syntax: "<number>"; inherits: false; initial-value: 0; }
.mw-body-content .shout { --shout-hue: 0; font-size: 1.5em; font-weight: 600; line-height: 1.7; padding: 3px 10px; margin-right: 4px;
  border-radius: 8px; color: #1b1f5e; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, hsl(var(--shout-hue) 95% 87%), hsl(calc(var(--shout-hue) + 70) 95% 87%));
  animation: shout-hue 5s linear infinite; }
@keyframes shout-hue { to { --shout-hue: 360; } }

/* Find-in-page highlights (CSS Custom Highlight API) */
::highlight(find-all) { background-color: #ffff00; color: #000; }
::highlight(find-active) { background-color: #ff9632; color: #000; }

/* ---------- Find bar (Chrome look-alike) ---------- */
.findbar { position: fixed; z-index: 100; top: 0; right: 92px; width: 268px; height: 36px; display: flex; align-items: center;
  background: #202124; border-radius: 0 0 9px 9px; box-shadow: 0 2px 6px rgba(0,0,0,.4); padding: 0 6px 0 12px; font-family: system-ui, sans-serif; }
#find-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #e8eaed; font-size: 11.5px; caret-color: #e8eaed; }
#find-input::selection { background: #3c64a8; }
.find-count { color: #9aa0a6; font-size: 10.5px; margin: 0 8px; white-space: nowrap; }
.find-sep { width: 1px; height: 22px; background: #5f6368; margin-right: 6px; }
.find-btn { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: #e8eaed; padding: 5px; display: grid; place-items: center; }
.find-btn:hover { background: #3c4043; }
.find-btn:disabled { color: #5f6368; background: none; }
.find-btn svg { width: 15px; height: 15px; }

/* ---------- Result ---------- */
#result { text-align: center; padding-top: 110px; }
.result-col { display: flex; flex-direction: column; align-items: center; }
.result-col .logo { margin-bottom: 24px; }
.result-title { font-size: 21px; font-weight: 500; margin: 0 0 30px; }
.your-path { color: var(--primary); font-size: 17px; font-weight: 500; margin: 0 0 6px; }
.path-list { list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: 500; line-height: 1.25; max-width: 265px; }
.path-list li.player { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 3px auto;
  padding: 2px 10px 2px 3px; border-radius: 999px; background: var(--primary); color: #fff; }
.path-list li.player img { width: 20px; height: 20px; border-radius: 50%; }
.others { display: flex; justify-content: space-around; align-items: flex-start; gap: 8px; margin: 30px 24px 40px; }
.other-name { color: #777; font-size: 12.5px; }
.other-path { font-size: 11px; font-weight: 500; margin-top: 4px; }
.others .me .other-name { color: var(--primary); text-decoration: underline; }
.others .me .other-path { max-width: 150px; }
.continue { width: 115px; height: 40px; }