/* Starway Online site: one portal window over the game's own footage, built from the game's own interface skin
   (assets/ui/skin, the nine-slice textures scripts/ui/ui.gd draws its windows with): bevelled button plates, the
   gold-framed button for the main action, the window frame, the brushed title strip, the grained panel and the
   sunken plate. Oxanium for headings and Arimo for reading, as in the game. */

@font-face {
  font-family: "Oxanium";
  src: url("../fonts/oxanium.woff") format("woff");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("../fonts/arimo.woff") format("woff");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #050504;
  --panel: #15140f;
  --panel-2: #0d0c09;
  --edge: #8c8c86;          /* UI.EDGE */
  --edge-mid: #57534a;
  --edge-dim: #302e28;
  --text: #ebe6da;          /* UI.TEXT */
  --text-dim: #aea591;      /* UI.TEXT_DIM, lighter to read on the panel */
  --label: #e8b04a;         /* UI.LABEL */
  --gold: #f2c14e;          /* UI.GOLD */
  --accent: #e9d38e;        /* UI.ACCENT: a pressed button's text */
  --gold-text: linear-gradient(180deg, #fff1c4 0%, #f6cf6a 45%, #d99a2e 100%);
  --ship: #79c6ff;          /* UI.SHIP_XP_TEXT */
  --humans: #6fb8ff;
  --netrods: #e0604a;
  --metal: linear-gradient(180deg, #211f1a 0%, #171510 100%);
  --metal-gold: linear-gradient(180deg, rgba(242, 193, 78, 0.2) 0%, rgba(242, 193, 78, 0.06) 100%), #17150f;
  --skin: url("../img/skin/");
  --head: "Oxanium", "Arimo", system-ui, sans-serif;
  --body: "Arimo", system-ui, sans-serif;
  --cut: 8px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.5 var(--body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a, button, summary, label[for], select, input[type="checkbox"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 30; background: var(--gold); color: #1a1408; padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }

/* gold lettering: the game's window titles */
.gold-text, .box-head h2, .title, .tile h3 {
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: 0.2em;  /* room for the dot of a capital İ: the gold paints only inside the box */
}

/* the footage behind the whole page */
.backdrop { position: fixed; inset: 0; z-index: -1; background: #000; }  /* black under the video, which is dimmed: a still picture here showed through it (the video carries its own poster until it plays) */
.backdrop video { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 18%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.88) 100%);
}

/* the portal: one window, a thin warm edge */
.portal {
  max-width: 1140px; margin: 0 auto 28px;
  border: 1px solid rgba(140, 140, 134, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85);
}

/* banner, the same on every page and symmetric about the middle: the logo and the store button on the centre line,
   the language at the top */
.banner {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 190px; padding: 18px 16px;
  background: linear-gradient(180deg, rgba(5, 5, 4, 0) 0%, rgba(5, 5, 4, 0.1) 45%, rgba(5, 5, 4, 0.85) 100%);
}
.banner-logo img { width: 360px; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(242, 193, 78, 0.18)); }
.banner-act { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.banner-tools { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; }

/* controls: chamfered plates (two corners cut, as the game's HUD frames are), a thin edge and a dark glass fill; the
   edge turns gold on hover and a gold light rises from below. The edge is the element's own colour, the fill an inner
   layer one pixel in, both cut the same way, so the corners stay clean without any shadow. */
.btn, .tabs-bar ul a, .tabs a, .subtabs a, .box-foot, .bar-menu, .lang a, .pick, .plink, .pages a, .pages strong, .editor-bar button {
  --ch: 7px; --edge-c: rgba(160, 154, 140, 0.55); --fill: rgba(16, 15, 12, 0.92); --glow: rgba(242, 193, 78, 0);
  position: relative; isolation: isolate; border: 0; color: var(--text); text-decoration: none; outline: none;
  background: var(--edge-c);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
  transition: color 0.15s;
}
.btn::before, .tabs-bar ul a::before, .tabs a::before, .subtabs a::before, .box-foot::before, .bar-menu::before, .lang a::before,
.pick::before, .plink::before, .pages a::before, .pages strong::before, .editor-bar button::before {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: linear-gradient(0deg, var(--glow) 0%, rgba(242, 193, 78, 0) 70%), var(--fill);
  clip-path: polygon(calc(var(--ch) - 0.5px) 0, 100% 0, 100% calc(100% - var(--ch) + 0.5px), calc(100% - var(--ch) + 0.5px) 100%, 0 100%, 0 calc(var(--ch) - 0.5px));
}
.btn:hover, .tabs-bar ul a:hover, .tabs a:hover, .subtabs a:hover, .box-foot:hover, .bar-menu:hover, .lang a:hover, .pick:hover,
.plink:hover, .pages a:hover, .editor-bar button:hover {
  --edge-c: rgba(242, 193, 78, 0.8); --glow: rgba(242, 193, 78, 0.14); color: #ffe08a;
}
/* the keyboard's place: the outline would be cut away with the corners, so the edge itself lights up */
.btn:focus-visible, .tabs-bar ul a:focus-visible, .tabs a:focus-visible, .subtabs a:focus-visible, .box-foot:focus-visible,
.bar-menu:focus-visible, .lang a:focus-visible, .pick:focus-visible, .plink:focus-visible, .pages a:focus-visible, .editor-bar button:focus-visible {
  --edge-c: #fff1c4; --glow: rgba(242, 193, 78, 0.22); color: #fff1c4;
}
.btn:active, .tabs-bar ul a:active, .tabs a:active, .subtabs a:active, .box-foot:active, .plink:active, .editor-bar button:active {
  --fill: rgba(5, 5, 4, 0.96); color: var(--accent);
}
.tabs-bar ul a[aria-current="page"], .tabs a[aria-current="page"], .subtabs a[aria-current="page"], .lang a[aria-current="true"],
.bar-menu[aria-expanded="true"], .pick[aria-pressed="true"], .pages strong {
  --edge-c: var(--gold); --glow: rgba(242, 193, 78, 0.22); --fill: rgba(30, 25, 14, 0.94); color: #ffe7a3;
}

/* icons: square, whatever file comes in */
.btn img, .tabs-bar ul a img, .tabs a img, .box-foot img, .plink img, .box-head h2 img, .ficon img, .fflag img, .lang img,
.tile h3 img, .play-list img, .wiki-card img, .wiki-head img {
  aspect-ratio: 1 / 1; object-fit: contain; flex: none;
}
.btn img, .tabs-bar ul a img, .tabs a img, .box-foot img, .plink img { width: 20px; height: 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  text-align: center; font: 700 13px/1.2 var(--head); letter-spacing: 0.04em;
}
.btn-big { min-height: 48px; padding: 0 24px; font-size: 15px; --ch: 10px; }
.btn-gold { --edge-c: var(--gold); --fill: rgba(42, 33, 14, 0.94); --glow: rgba(242, 193, 78, 0.2); color: #ffe08a; }
.btn-gold:hover { --edge-c: #ffe08a; --glow: rgba(242, 193, 78, 0.35); color: #fff1c4; }
.btn-soon { --edge-c: rgba(242, 193, 78, 0.5); --fill: rgba(20, 17, 10, 0.9); color: #d8bd78; cursor: default; }
.btn-soon:hover { --edge-c: rgba(242, 193, 78, 0.5); --glow: rgba(242, 193, 78, 0); color: #d8bd78; }
.btn-danger { --edge-c: rgba(224, 96, 74, 0.7); color: #ffb3a9; }
.btn-danger:hover { --edge-c: #ff7a5c; --glow: rgba(224, 96, 74, 0.2); color: #ffd6cf; }
.btn-wide { width: 100%; }

/* pieces of a line kept apart by space, never by a symbol */
.gap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.flinks.gap { justify-content: center; }

/* Apple's App Store badge: its own artwork at 48 px with clear space around it (Apple's badge rules) */
.store-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; text-decoration: none; }
.store-badge img { height: 48px; width: auto; }
.store-soon > span { color: #ffe08a; font: 700 12px var(--head); letter-spacing: 0.1em; text-transform: uppercase; }
.box .store-badge { display: flex; margin: 0 auto; }

/* the language: two flags */
.lang { display: flex; gap: 4px; }
.lang a { --ch: 5px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; font: 700 12px var(--head); }
.lang img { width: 18px; height: 18px; border-radius: 2px; }

/* the menu: one strip, not a row of buttons: centred tabs of the same width with thin dividers; the open one lit
   from below in gold with a gold line under it */
.tabs-bar {
  display: flex; justify-content: center; padding: 0;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.96), rgba(8, 7, 6, 0.96));
  border-top: 1px solid rgba(140, 140, 134, 0.3); border-bottom: 1px solid rgba(140, 140, 134, 0.3);
}
/* the tabs fill the strip, each an equal share of its width */
.tabs-bar ul { flex: 1; display: flex; gap: 0; list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.tabs-bar li { flex: 1 1 0; min-width: 0; }
.tabs-bar ul a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px;
  font: 700 13.5px var(--head); letter-spacing: 0.04em; color: #d6cfbd;
  clip-path: none; background: transparent; border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.tabs-bar ul a::before { display: none; }
.tabs-bar ul a:hover { background: rgba(242, 193, 78, 0.07); color: #ffe08a; }
.tabs-bar ul a[aria-current="page"] {
  background: linear-gradient(0deg, rgba(242, 193, 78, 0.2) 0%, rgba(242, 193, 78, 0) 85%); color: #ffe7a3;
  box-shadow: inset 0 -2px 0 var(--gold);
}
.tabs-bar ul a:focus-visible { box-shadow: inset 0 0 0 1px #fff1c4; color: #fff1c4; }
.bar-menu, .bar-lang { display: none; }

.portal-body { background: url("../img/skin/panel_grain.png") #0e0d0a; padding: 8px; }

/* boxes: a thin edge, the game's grained panel, a title strip with a cut corner and a gold line */
.box {
  position: relative; margin-bottom: 8px;
  border: 1px solid rgba(140, 140, 134, 0.32);
  background: url("../img/skin/panel_grain.png") rgba(21, 20, 15, 0.96);
}
.box:last-child { margin-bottom: 0; }
.box-head {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px;
  background: linear-gradient(90deg, rgba(242, 193, 78, 0.55), rgba(242, 193, 78, 0.12) 50%, rgba(242, 193, 78, 0) 90%) left bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 100%), rgba(10, 9, 7, 0.6);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.box-head h2 {
  display: flex; align-items: center; gap: 7px; flex: 1; margin: 0;
  font: 800 12.5px/1.2 var(--head); text-transform: uppercase; letter-spacing: 0.1em;
  filter: drop-shadow(0 1px 0 #000);
}
.box-head h2 img { width: 20px; height: 20px; }
.box-head .motion-toggle { min-height: 26px; }
.box-in { padding: 8px; }
.box-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin: 4px 6px 6px; color: #ffe08a; text-decoration: none;
  font: 700 12px var(--head); letter-spacing: 0.04em;
}

.cols { display: grid; grid-template-columns: 1fr 268px; gap: 8px; align-items: start; }

/* the call at the top of the home page: the two generals face each other across the question, the way into the
   game between them; each side lit in its faction's colour from below */
.call {
  position: relative; display: grid; grid-template-columns: 250px 1fr 250px; align-items: end; min-height: 270px;
  margin-bottom: 8px; overflow: hidden; border: 1px solid rgba(140, 140, 134, 0.32);
  background: radial-gradient(ellipse at 11% 100%, rgba(111, 184, 255, 0.3), rgba(0, 0, 0, 0) 48%),
    radial-gradient(ellipse at 89% 100%, rgba(224, 96, 74, 0.32), rgba(0, 0, 0, 0) 48%),
    linear-gradient(180deg, rgba(8, 7, 6, 0.5), rgba(8, 7, 6, 0.92)), url("../img/hero-1280.webp") center 45% / cover #0b0a08;
}
.call-side { position: relative; grid-row: 1 / 3; margin: 0; }
.call-humans { grid-column: 1; }
.call-netrods { grid-column: 3; }
.call-general { display: block; width: 100%; height: auto; }
.call-humans .call-general { filter: drop-shadow(0 0 22px rgba(111, 184, 255, 0.5)); }
.call-netrods .call-general { filter: drop-shadow(0 0 22px rgba(224, 96, 74, 0.55)); }
/* each faction's name under its general, centred on the portrait */
.call-side figcaption {
  position: relative; margin-top: 6px; padding: 0 6px 12px; text-align: center;
  font: 800 16px/1 var(--head); text-transform: uppercase; letter-spacing: 0.1em;
}
.call-humans figcaption { color: var(--humans); text-shadow: 0 0 4px #000, 0 0 10px #000, 0 0 14px rgba(111, 184, 255, 0.6), 0 1px 0 #000; }
.call-netrods figcaption { color: var(--netrods); text-shadow: 0 0 4px #000, 0 0 10px #000, 0 0 14px rgba(224, 96, 74, 0.6), 0 1px 0 #000; }
/* the question above the middle, the store badge under it: on phones it comes after the generals */
.call-title {
  grid-column: 2; grid-row: 1; align-self: end; margin: 0; padding: 0 12px; text-align: center;
  font: 800 34px/1.1 var(--head); text-transform: uppercase; letter-spacing: 0.04em;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(242, 193, 78, 0.25));
}
.call-act { grid-column: 2; grid-row: 2; align-self: start; display: flex; justify-content: center; padding-top: 12px; }
.fac { font-weight: 700; }
.fac-humans { color: var(--humans); }
.fac-netrods { color: var(--netrods); }

/* the feature tiles: the game's own scenes in its slot frames */
.tiles { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { position: relative; overflow: hidden; border: 1px solid #000; box-shadow: 0 0 0 1px #4a463d; background: #000; aspect-ratio: 16 / 10; }
.tile-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, filter 0.3s; filter: saturate(0.95) brightness(0.9); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(5, 4, 3, 0.94) 100%); }
.tile-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 8px 10px 9px; }
.tile h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font: 800 14px/1.1 var(--head); text-transform: uppercase; letter-spacing: 0.08em; filter: drop-shadow(0 1px 1px #000); }
.tile h3 img { width: 26px; height: 26px; }
.tile p { margin: 0; color: #d9d2c1; font-size: 11.5px; line-height: 1.35; text-shadow: 0 1px 2px #000; }
.tile:hover { box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(242, 193, 78, 0.3); }
.tile:hover .tile-art { transform: scale(1.06); filter: saturate(1.1) brightness(1); }

/* videos and screenshots: the chosen one large on the stage, all of them small on the strip below */
.stage { position: relative; background: #000; aspect-ratio: 16 / 9; border-bottom: 1px solid #000; }
.stage video, .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.stage video[hidden], .stage img[hidden], .stage-toggle[hidden] { display: none; }
.stage-cap {
  position: absolute; left: 0; top: 0; margin: 0; padding: 4px 10px; background: rgba(5, 4, 3, 0.8);
  color: #ffe08a; font: 700 12.5px var(--head); letter-spacing: 0.04em; pointer-events: none;
}
.stage-toggle { position: absolute; right: 8px; bottom: 8px; }
.strip { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.pick { --ch: 5px; display: block; width: 100%; padding: 2px; }
.pick img { clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.pick img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; filter: brightness(0.7) saturate(0.85); transition: filter 0.2s; }
.pick:hover img, .pick[aria-pressed="true"] img { filter: none; }
.pick-video::after {  /* a play mark on the videos */
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -7px 0 0 -4px;
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent rgba(255, 236, 180, 0.95);
  filter: drop-shadow(0 0 3px #000);
}

/* the download card: the station scene fading out, the app icon over its edge, the name, Apple's badge */

/* short lists: rows on the game's sunken plates, the first three places on gold, silver and bronze */
.mini { list-style: none; margin: 0; padding: 5px 6px 2px; }
.mini li {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: center; min-height: 28px;
  padding: 3px 8px 3px 3px; margin-top: 2px; font-size: 12.5px;
  background: rgba(5, 5, 4, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mini li:hover { background: rgba(242, 193, 78, 0.06); }
.place { display: grid; place-items: center; height: 20px; color: var(--text-dim); font: 800 11.5px var(--head); }
.place-top { border-radius: 2px; color: #1d1405; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.mini li:nth-child(1) .place-top, .board tr:nth-child(1) .place-top { background: linear-gradient(180deg, #fff0b8, #e0a63a 60%, #a8721f); }
.mini li:nth-child(2) .place-top, .board tr:nth-child(2) .place-top { background: linear-gradient(180deg, #f4f4f0, #b9b9b2 60%, #7d7d76); }
.mini li:nth-child(3) .place-top, .board tr:nth-child(3) .place-top { background: linear-gradient(180deg, #f2c79a, #c07a3e 60%, #84501f); }
.who { overflow-wrap: anywhere; }
.tag { color: var(--text-dim); }
.val { font: 800 12px var(--head); color: #f3e7c6; }

/* pages */
.title { font: 800 20px/1.2 var(--head); margin: 2px 0 4px; text-transform: uppercase; letter-spacing: 0.08em; filter: drop-shadow(0 1px 0 #000); }
.lead { color: var(--text-dim); margin: 0 0 8px; }
.page { padding: 4px; }

/* rankings */
.tabs, .subtabs nav { display: flex; flex-wrap: wrap; gap: 2px; }
.tabs { margin-bottom: 4px; }
.tabs a, .subtabs a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; text-decoration: none; font: 700 13px var(--head); letter-spacing: 0.03em; }

/* the wiki: the game's Codex as cards; a page with its picture, numbers, text and links */
.wiki-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wiki-search { display: flex; gap: 4px; }
.wiki-search input {
  width: min(280px, 60vw); min-height: 38px; padding: 6px 10px; background: rgba(5, 5, 4, 0.8); color: var(--text);
  border: 1px solid rgba(140, 140, 134, 0.45); font: 14px var(--body);
}
.wiki-search input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.wiki-search .btn { min-width: 44px; padding: 0 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wiki-grid { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.wiki-card {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  min-height: 60px; padding: 4px 8px 4px 4px; text-decoration: none; color: var(--text);
  background: rgba(5, 5, 4, 0.45); border: 1px solid rgba(140, 140, 134, 0.18);
  transition: border-color 0.15s, background-color 0.15s;
}
.wiki-card:hover { border-color: rgba(242, 193, 78, 0.7); background: rgba(242, 193, 78, 0.06); }
.wiki-card img { grid-row: 1 / 3; width: 52px; height: 52px; object-fit: contain; }
.wiki-card-name { align-self: end; font: 700 13px/1.2 var(--head); overflow-wrap: anywhere; }
.wiki-card-kind { align-self: start; color: var(--text-dim); font-size: 11.5px; }
.wiki-grid-small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.wiki-grid-small .wiki-card { grid-template-columns: 40px 1fr; min-height: 48px; }
.wiki-grid-small .wiki-card img { width: 40px; height: 40px; }
.wiki .crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font: 700 12.5px var(--head); }
.wiki .crumbs a { color: var(--gold); text-decoration: none; }
.wiki .crumbs span { color: var(--text-dim); }
.wiki-card-big { padding: 0 0 8px; }
.wiki-head { display: flex; gap: 16px; align-items: center; padding: 14px; background: linear-gradient(90deg, rgba(242, 193, 78, 0.08), rgba(242, 193, 78, 0) 60%); }
.wiki-head img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)); }
.wiki-name { margin: 0 0 2px; font: 800 24px/1.15 var(--head); text-shadow: 0 1px 2px #000; }
.wiki-kind { margin: 0 0 8px; color: var(--text-dim); font: 700 13px var(--head); text-transform: uppercase; letter-spacing: 0.08em; }
.wiki-facts { width: calc(100% - 28px); margin: 0 14px; border-collapse: collapse; font-size: 13.5px; }
.wiki-facts th { width: 34%; padding: 6px 10px; text-align: left; color: var(--label); font: 700 12px var(--head); text-transform: uppercase; letter-spacing: 0.06em; background: rgba(5, 5, 4, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.wiki-facts td { padding: 6px 10px; background: rgba(5, 5, 4, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.wiki-facts .wiki-desc { color: #ddd6c6; font-style: italic; }
.wiki-body { margin: 12px 14px 4px; max-width: 80ch; }
.wiki-two textarea { min-height: 150px; }

/* the wiki's main page, laid out as the big game wikis lay theirs: a welcome band with the search, the categories as
   portals with pictures from each, a page of the day, the latest edits */
.wiki-hero {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 34px 16px 26px; text-align: center; overflow: hidden; border: 1px solid rgba(140, 140, 134, 0.32);
  background: linear-gradient(180deg, rgba(8, 7, 6, 0.35), rgba(8, 7, 6, 0.85)), url("../img/tile-boss.webp") center 35% / cover;
}
.wiki-hero-title { margin: 0; font: 800 28px/1.15 var(--head); letter-spacing: 0.06em; text-transform: uppercase; color: #ffe08a; text-shadow: 0 2px 12px #000, 0 0 2px #000; }
.wiki-search-big input { width: min(460px, 70vw); min-height: 44px; font-size: 15px; }
.wiki-search-big .btn { min-height: 44px; }
.portals { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.portal-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; text-decoration: none; color: var(--text);
  background: rgba(5, 5, 4, 0.45); border: 1px solid rgba(140, 140, 134, 0.22); transition: border-color 0.15s, background-color 0.15s;
}
.portal-card:hover { border-color: rgba(242, 193, 78, 0.7); background: rgba(242, 193, 78, 0.06); }
.portal-pics { display: grid; grid-template-columns: repeat(2, 48px); gap: 4px; }
.portal-pics img { width: 48px; height: 48px; object-fit: contain; aspect-ratio: 1 / 1; background: rgba(255, 255, 255, 0.03); }
.portal-name { display: flex; align-items: center; gap: 6px; font: 800 14px var(--head); color: #ffe08a; text-transform: uppercase; letter-spacing: 0.06em; }
.portal-name img { width: 22px; height: 22px; aspect-ratio: 1 / 1; }
.portal-count { color: var(--text-dim); font-size: 12px; }
.wiki-columns { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px; margin-top: 8px; align-items: start; }
.wiki-columns .box { margin: 0; }
.featured { display: flex; gap: 16px; align-items: flex-start; padding: 14px; }
.featured > img { width: 128px; height: 128px; object-fit: contain; aspect-ratio: 1 / 1; flex: none; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)); }
.featured h3 { margin: 0; font: 800 20px/1.2 var(--head); }
.featured .wiki-kind { margin: 2px 0 8px; }
.featured-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0 0 12px; font-size: 13px; }
.featured-facts dt { color: var(--label); font: 700 11.5px var(--head); text-transform: uppercase; letter-spacing: 0.06em; }
.featured-facts dd { margin: 0; }

/* a wiki page: the text on the left, the infobox on the right, as the big game wikis do it */
.wiki-article { display: grid; grid-template-columns: 1fr 300px; gap: 10px; align-items: start; }
.wiki-article .infobox { grid-column: 2; grid-row: 1; }
.wiki-main { grid-column: 1; grid-row: 1; min-width: 0; padding: 4px 6px; }
.wiki-main-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wiki-main-head .wiki-name { margin: 0; color: var(--text); }
.wiki-cat-line { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; font: 700 12.5px var(--head); }
.wiki-cat-line a { color: var(--gold); text-decoration: none; }
.wiki-cat-line img { width: 18px; height: 18px; }
.wiki-section { margin: 18px 0 6px; padding-bottom: 4px; font: 800 13px var(--head); text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); border-bottom: 1px solid rgba(242, 193, 78, 0.35); }
.wiki-main .wiki-grid { padding: 4px 0; }
.wiki-main .wiki-body { margin: 0 0 8px; }
.infobox { border: 1px solid rgba(140, 140, 134, 0.4); background: rgba(10, 9, 7, 0.92); }
.infobox-name { margin: 0; padding: 9px 12px; text-align: center; font: 800 16px/1.2 var(--head); background: rgba(242, 193, 78, 0.08); border-bottom: 1px solid rgba(242, 193, 78, 0.35); }
.infobox-pic { display: grid; place-items: center; padding: 14px; background: radial-gradient(circle at 50% 55%, rgba(242, 193, 78, 0.1), rgba(0, 0, 0, 0) 65%); }
.infobox-pic img { width: 150px; height: 150px; object-fit: contain; aspect-ratio: 1 / 1; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8)); }
.infobox-kind { margin: 0; padding: 6px 12px; text-align: center; color: var(--text-dim); font: 700 12px var(--head); text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.infobox-facts { width: 100%; border-collapse: collapse; font-size: 13px; }
.infobox-facts th { width: 42%; padding: 6px 12px; text-align: left; color: var(--label); font: 700 11.5px var(--head); text-transform: uppercase; letter-spacing: 0.05em; vertical-align: top; }
.infobox-facts td { padding: 6px 12px 6px 0; }
.infobox-facts tr + tr th, .infobox-facts tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.infobox-facts .wiki-desc { padding: 8px 12px; color: #ddd6c6; font-style: italic; }
.subtabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 6px; border-bottom: 1px solid #000; }
.note { color: var(--text-dim); font-size: 12px; margin: 0; padding: 6px 8px; }

.board { padding: 4px 6px 6px; }
.board table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
.board th { text-align: left; padding: 6px 8px; color: var(--label); font: 800 11px var(--head); text-transform: uppercase; letter-spacing: 0.1em; }
.board td { padding: 6px 8px; background: rgba(5, 5, 4, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13px; }
.board .num { text-align: right; font-family: var(--head); font-weight: 800; white-space: nowrap; }
.board td.place { width: 44px; text-align: center; }
.board td.place-top { color: #1d1405; }
.dim { color: var(--ship); font-size: 11px; }
.lvl { color: var(--ship); }

/* the ranking table: rows that touch, thin dividers, a dark header strip on a gold line, medals for the first three */
.rk-note { margin-left: auto; color: var(--text-dim); font: 400 12px var(--body); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.rk { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rk thead th {
  padding: 9px 12px; text-align: left; background: rgba(5, 5, 4, 0.7); color: var(--label);
  font: 700 11px var(--head); text-transform: uppercase; letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(242, 193, 78, 0.45);
}
.rk td { padding: 0 12px; height: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 14px; vertical-align: middle; }
.rk tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.015); }
.rk tbody tr.rk-top { background: linear-gradient(90deg, rgba(242, 193, 78, 0.12), rgba(242, 193, 78, 0) 70%); }
.rk tbody tr:hover { background: rgba(242, 193, 78, 0.07); }
.rk tbody tr:last-child td { border-bottom: 0; }
.rk .num { text-align: right; white-space: nowrap; font: 700 15px var(--head); color: #f3e7c6; }
.rk th.num { font: 700 11px var(--head); color: var(--label); }
.rk .rk-c-place { width: 64px; text-align: center; }
.rk-place { color: var(--text-dim); font: 700 14px var(--head); }
.medal {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 800 13px var(--head); color: #1d1405; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}
.medal-1 { background: radial-gradient(circle at 35% 30%, #fff3c4, #e8b04a 55%, #a8721f); }
.medal-2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c4c4bd 55%, #7d7d76); }
.medal-3 { background: radial-gradient(circle at 35% 30%, #f6d2aa, #c07a3e 55%, #84501f); }
.rk-name { font-weight: 700; color: var(--text); }
.rk-top .rk-name { color: #fff1c4; }
.rk-tag {
  display: inline-block; margin-left: 8px; padding: 1px 6px; vertical-align: 1px;
  border: 1px solid rgba(140, 140, 134, 0.4); color: var(--text-dim); font: 700 10.5px var(--head); letter-spacing: 0.06em;
}
.rk-fac { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.rk-fac img { width: 20px; height: 20px; }
.rk-dim { color: var(--text-dim); }
.rk-dimtag {
  display: inline-block; margin-right: 8px; padding: 1px 5px; border: 1px solid rgba(121, 198, 255, 0.45);
  color: var(--ship); font: 700 11px var(--head); vertical-align: 2px;
}
.rk-crew { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.rk-crew span { padding: 2px 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(140, 140, 134, 0.25); font-weight: 700; }

.state { margin: 0; padding: 12px 8px; color: var(--text-dim); font-size: 12.5px; }
.state-error { color: #ff9c8f; }

/* legal pages: plain reading text inside the site's boxes */
.legal .box { margin-bottom: 8px; }
.legal-body { padding: 8px 12px 4px; font-size: 14px; line-height: 1.6; max-width: 80ch; }
.legal-body p { margin: 0 0 8px; }
.legal .board td { vertical-align: top; font-size: 13px; }
.legal code { color: #ffe08a; font: 700 12.5px Consolas, monospace; }

/* the cookie window: bottom corner, never covering the whole page; Accept and Reject the same size and look */
.consent {
  position: fixed; left: 12px; bottom: 12px; z-index: 50; width: min(440px, calc(100vw - 24px));
  padding: 12px 14px; color: var(--text); font-size: 13px;
  border: 1px solid rgba(242, 193, 78, 0.45);
  background: url("../img/skin/panel_grain.png") #15140f; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}
.consent h2 { margin: 0 0 6px; font: 800 13px var(--head); text-transform: uppercase; letter-spacing: 0.08em; color: #ffe08a; }
.consent p { margin: 0 0 10px; color: #ddd6c6; }
.consent-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.consent-act .btn { flex: 1 1 120px; }
.consent-act .linkish { min-height: 40px; padding: 0 6px; text-decoration: underline; }
.consent-settings { display: grid; gap: 6px; margin: 0 0 10px; padding: 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid #000; }
.consent-settings[hidden] { display: none; }
.consent h2:focus { outline: none; }
.consent-row { display: flex; gap: 8px; align-items: flex-start; }
.consent-settings .btn { justify-self: start; }

/* checkboxes: the game's own boxes */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  background: url("../img/skin/check_off.png") center / 100% 100%; image-rendering: pixelated;
}
input[type="checkbox"]:checked { background-image: url("../img/skin/check_on.png"); }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.8; }
.linkish { background: none; border: 0; color: var(--text); font: inherit; }
.linkish:hover { color: var(--gold); }

/* footer inside the frame, on the title strip */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 6px 12px; background: rgba(8, 7, 6, 0.96); border-top: 1px solid rgba(140, 140, 134, 0.25); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 16px; list-style: none; margin: 0; padding: 0; }
.foot-links a, .foot-links button { display: inline-block; padding: 8px 0; color: #e2dbcb; font: 12px var(--body); text-decoration: none; background: none; border: 0; text-shadow: 0 1px 0 #000; }
.foot-links a:hover, .foot-links button:hover { color: var(--gold); text-decoration: underline; }
.foot-rights { margin: 0 0 0 auto; color: var(--text-dim); font-size: 11.5px; }

@media (max-width: 1000px) {
  .cols { grid-template-columns: 1fr; }
  .col-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
  .col-side .box { margin: 0; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: repeat(5, 1fr); }
  .call { grid-template-columns: 190px 1fr 190px; min-height: 0; }
  .call-title { font-size: 28px; }
}
@media (max-width: 680px) {
  body { font-size: 14px; }
  .portal { box-shadow: none; margin-bottom: 0; }
  /* the language moves down to the menu bar, so the banner holds only the logo, in its middle */
  .banner { min-height: 0; padding: 18px 10px; }
  .banner-tools { display: none; }
  .banner-logo img { width: 240px; }
  .banner-act { width: 100%; }
  .banner-act .btn { flex: 1 1 100%; }
  /* the bar: the menu button on the left, the language on the right; the menu opens under it as a grid of tabs */
  .tabs-bar { flex-wrap: wrap; justify-content: space-between; align-items: center; padding-right: 8px; }
  .bar-menu {
    display: inline-flex; align-items: center; gap: 10px; flex: 1; min-height: 48px; padding: 0 14px; text-align: left;
    font: 700 14px var(--head); letter-spacing: 0.04em; clip-path: none; background: transparent; color: #d6cfbd;
  }
  .bar-menu::before { display: none; }
  .bar-lines { position: relative; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .bar-menu[aria-expanded="true"] { color: #ffe08a; }
  .bar-menu[aria-expanded="true"] .bar-lines { background: var(--gold); box-shadow: 0 -6px 0 var(--gold), 0 6px 0 var(--gold); }
  .bar-lang { display: flex; }
  .bar-lang a { padding: 0 9px; }
  .tabs-bar ul { flex: none; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-right: -8px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .js .tabs-bar ul { display: none; }
  .js .tabs-bar ul.open { display: grid; }
  .tabs-bar li { flex: none; }
  .tabs-bar ul a {
    width: auto; min-height: 48px; justify-content: flex-start; padding: 0 14px; border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .tabs-bar li:nth-child(odd) a { border-right: 1px solid rgba(255, 255, 255, 0.07); }
  /* phones: the question and the way in first, the two generals side by side under it */
  .call { grid-template-columns: 1fr 1fr; min-height: 0; }
  .call-title { grid-column: 1 / -1; grid-row: 1; padding: 20px 10px 8px; font-size: 24px; }
  .call-side { grid-row: 2; }
  .call-act { grid-column: 1 / -1; grid-row: 3; padding: 12px 0 14px; }
  .call-humans { grid-column: 1; }
  .call-netrods { grid-column: 2; }
  .call-general { width: 170px; margin: 0 auto; }
  .call-side figcaption { font-size: 14px; padding-bottom: 8px; }
  .col-side { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; gap: 6px; padding: 6px; }
  .tile { aspect-ratio: auto; display: grid; grid-template-columns: 112px 1fr; min-height: 76px; }
  .tile-art { position: static; height: 100%; }
  .tile::after { display: none; }
  .tile-text { position: static; padding: 6px 8px; background: rgba(5, 5, 4, 0.6); }
  .tile h3 { font-size: 13px; }
  .strip { grid-template-columns: repeat(4, 1fr); }
  .hide-s { display: none; }
  .foot-rights { margin-left: 0; width: 100%; }
  .lang a, .motion-toggle { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* the label sits in the true middle: Oxanium keeps room for descenders under its line, which left the space below
   the letters larger than above (measured 1 to 2.5 px at 13 to 15 px), so the label moves down by that share. Last in
   the file, after every rule that sets these controls' padding. */
.btn, .tabs-bar ul a, .tabs a, .subtabs a, .box-foot, .bar-menu, .lang a, .plink, .pages a, .pages strong, .editor-bar button {
  padding-top: 0.2em;
}
.lang a { padding-top: 0.08em; }  /* the flag beside it already holds the line in the middle */

/* the wiki on narrow screens: portals two by two, the infobox above the text */
@media (max-width: 1000px) {
  .portals { grid-template-columns: repeat(3, 1fr); }
  .wiki-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .portals { grid-template-columns: repeat(2, 1fr); }
  .wiki-article { grid-template-columns: 1fr; }
  .wiki-article .infobox { grid-column: 1; grid-row: 1; }
  .wiki-main { grid-column: 1; grid-row: 2; }
  .featured { flex-direction: column; align-items: center; text-align: center; }
  .featured-facts { text-align: left; }
  .wiki-hero-title { font-size: 22px; }
}
.portal-scene { width: 100px; height: 100px; object-fit: cover; aspect-ratio: 1 / 1; border: 1px solid rgba(140, 140, 134, 0.25); }

/* a feature tile opens its page in the wiki's Game Guide: the whole tile is the link */
.tile-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.tile::after { pointer-events: none; }
.tile-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 680px) {
  .tile { display: block; }
  .tile-link { position: static; display: grid; grid-template-columns: 112px 1fr; min-height: 76px; }
}

/* the announcements on the home page: the newest first, each with its date at the right of its title */
.news { list-style: none; margin: 0; padding: 0; }
.news-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid #000; }
.news-item + .news-item { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.news-title { margin: 0; font: 800 15px/1.25 var(--head); letter-spacing: 0.02em; color: #ffe08a; }
.news-date { color: var(--text-dim); font: 700 12px var(--head); white-space: nowrap; }
.news-body { grid-column: 1 / -1; color: #d9d2c1; font-size: 13.5px; line-height: 1.5; }

/* an item's sources and uses: plain lines with the pages they name as links, the droppers in a small table */
.how-list { margin: 0 0 6px; padding-left: 18px; color: #d9d2c1; font-size: 13.5px; line-height: 1.55; }
.how-list li { margin-bottom: 4px; }
.how-link { font-weight: 700; text-decoration: none; }
.how-link:hover { text-decoration: underline; }
.how-drops { width: 100%; max-width: 520px; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; }
.how-drops th { padding: 5px 8px; text-align: left; color: var(--label); font: 800 11px var(--head); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid rgba(242, 193, 78, 0.35); }
.how-drops td { padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.how-drops .num { text-align: right; white-space: nowrap; }