/* Cubic Mage website, drawn like the game's loading screen (LoadingScreen.cs):
   the dithered ink backdrop, gold magic circle and motes, the HUD frame, the gold rule with hollow diamonds.
   Type: NeoDunggeunmo Pro, the game's UI font (OFL), on its 16 px grid (16 / 24 / 32 / 48 px).
   One game pixel = 3 CSS px on wide screens, 2 on phones (--p). */

@font-face { font-family: "NeoDGM"; src: url("/assets/fonts/neodgm-regular-latin.woff") format("woff"); font-weight: 400; font-display: swap; unicode-range: U+0020-00FF, U+2013-2026, U+20A9, U+2190-2193, U+25B6; }
@font-face { font-family: "NeoDGM"; src: url("/assets/fonts/neodgm-regular-hangul.woff") format("woff"); font-weight: 400; font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF01-FF5E; }
@font-face { font-family: "NeoDGM"; src: url("/assets/fonts/neodgm-bold-latin.woff") format("woff"); font-weight: 700; font-display: swap; unicode-range: U+0020-00FF, U+2013-2026, U+20A9, U+2190-2193, U+25B6; }
@font-face { font-family: "NeoDGM"; src: url("/assets/fonts/neodgm-bold-hangul.woff") format("woff"); font-weight: 700; font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF01-FF5E; }

:root {
  --void: #0e0b07;           /* BgBot */
  --ink: #33271b;            /* BgTop */
  --veil: #1a140e;           /* the iris ink */
  --well: rgba(10, 8, 5, 0.72);
  --frame: #4e3822;          /* the HUD frame's purple-brown */
  --gold: #ffd673;
  --gold-lit: #fff3c0;
  --gold-dim: #b8862e;
  --text: #e0d1c2;           /* the loading screen's Ink */
  --muted: rgba(224, 209, 194, 0.68);
  --p: 3px;
  --max: 1080px;
  --gutter: 16px;
  color-scheme: dark;
}
@media (max-width: 640px) { :root { --p: 2px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  color: var(--text);
  background: var(--void) url("/assets/img/backdrop.png") center / cover fixed no-repeat;
  image-rendering: pixelated;
  font-family: "NeoDGM", "Malgun Gothic", "Apple SD Gothic Neo", monospace;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: none;
  letter-spacing: 0.02em;
}
img, video, iframe { image-rendering: auto; }
img.pixel, .pixel { image-rendering: pixelated; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--gold-lit); }
:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h2 { font-size: 32px; line-height: 1.3; font-weight: 400; color: var(--gold); letter-spacing: 0.08em; }
h3 { font-size: 24px; line-height: 1.35; font-weight: 400; color: var(--gold); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mt { margin-top: 16px; }

/* ---------- the HUD frame (frame.png, 9-sliced at one texel per game pixel) ---------- */
.frame {
  border: calc(var(--p) * 4) solid transparent;
  border-image: url("/assets/img/frame.png") 4 / calc(var(--p) * 4) stretch;
  background: var(--well);
  background-clip: padding-box;
}

/* ---------- the gold rule with three hollow diamonds ---------- */
.rule {
  width: min(420px, 80%); height: calc(var(--p) * 5); margin: 16px auto 0;
  background:
    url("/assets/img/diamond.png") left center / calc(var(--p) * 5) calc(var(--p) * 5) no-repeat,
    url("/assets/img/diamond.png") center / calc(var(--p) * 5) calc(var(--p) * 5) no-repeat,
    url("/assets/img/diamond.png") right center / calc(var(--p) * 5) calc(var(--p) * 5) no-repeat,
    linear-gradient(rgba(255, 214, 115, 0.6), rgba(255, 214, 115, 0.6)) center / calc(100% - var(--p) * 8) var(--p) no-repeat;
}
.rule.left { margin-left: 0; width: min(280px, 70%); }

.head { text-align: center; margin-bottom: 48px; }
.head p { color: var(--muted); margin-top: 16px; }

/* ---------- top bar ---------- */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.top.solid { position: relative; }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { font-size: 16px; letter-spacing: 0.25em; color: var(--gold); text-decoration: none; }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav a { color: var(--text); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }
.nav .lang { color: var(--gold); }
@media (max-width: 720px) { .nav .hide-sm { display: none; } .nav { gap: 16px; } }

/* ---------- buttons: the HUD frame around a dark well ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 20px;
  border: calc(var(--p) * 4) solid transparent;
  border-image: url("/assets/img/frame.png") 4 / calc(var(--p) * 4) stretch;
  background: var(--well); background-clip: padding-box;
  color: var(--text); text-decoration: none;
}
.btn:hover { background-color: var(--frame); color: var(--gold-lit); }
.btn.go { background-color: var(--gold); color: var(--void); }
.btn.go:hover { background-color: var(--gold-lit); color: var(--void); }
.btn img { width: 16px; height: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; }

/* ---------- hero: the loading screen ---------- */
.hero {
  position: relative; min-height: min(100vh, 960px); min-height: min(100svh, 960px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 96px var(--gutter) 40px; text-align: center; overflow: hidden;
}
#motes { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
#emblem { width: calc(var(--p) * 121); height: calc(var(--p) * 121); image-rendering: pixelated; position: relative; }
.hero h1 {
  position: relative; margin-top: 24px;
  font-size: 48px; line-height: 1.2; font-weight: 400; letter-spacing: 0.26em; padding-left: 0.26em;
  color: var(--gold);
}
.hero .tagline { position: relative; margin: 24px auto 32px; max-width: 32em; color: var(--text); }
.hero .btn-row { position: relative; }
.badge { position: relative; display: inline-block; margin-bottom: 8px; color: var(--muted); }
.badge::before, .badge::after { content: "·"; color: var(--gold); margin: 0 10px; }
@media (max-width: 520px) { .hero h1 { font-size: 32px; } }

.tip { position: relative; margin-top: auto; padding-top: 56px; max-width: 900px; width: 100%; color: rgba(224, 209, 194, 0.7); transition: opacity 0.2s steps(3); }
.tip.out { opacity: 0; }
.tip b { color: var(--gold); font-weight: 400; margin-right: 16px; }
.tip ul { display: none; }
.tip .bar { height: calc(var(--p) * 6); margin: 0 auto 14px; max-width: 900px; position: relative;
  background: linear-gradient(90deg, var(--gold) 0 100%) left / 100% 100% no-repeat, rgba(0, 0, 0, 0.69); }
.tip .bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--p); background: #fff2bf; }
.tip .bar::after { /* the dark segment pips */
  content: ""; position: absolute; inset: var(--p) 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 30 - var(--p)), rgba(0, 0, 0, 0.45) calc(100% / 30 - var(--p)) calc(100% / 30));
}
.tip .bar-frame { border: calc(var(--p) * 4) solid transparent; border-image: url("/assets/img/frame.png") 4 / calc(var(--p) * 4) stretch; padding: calc(var(--p) * 2); margin-bottom: 14px; }
.tip .bar-frame .bar { margin: 0; }
.tip .status { display: flex; justify-content: space-between; margin-bottom: 8px; color: rgba(224, 209, 194, 0.6); }
.tip .status span:last-child { color: rgba(255, 214, 115, 0.85); }

/* ---------- sections ---------- */
.band { padding: 96px 0; position: relative; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 40px; } }
.prose { max-width: 34em; }
.prose h2 { margin-bottom: 0; }
.prose p + p { margin-top: 16px; }
.prose .rule { margin: 16px 0 24px; }
.shot-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot-frame figcaption { padding: 8px 4px 2px; color: var(--muted); }

/* elements: a small gem each, in the element's colour */
.elements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 16px; max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) { .elements { grid-template-columns: repeat(2, 1fr); } }
.el { display: flex; align-items: center; gap: 14px; padding: 6px 12px; }
.gem {
  width: calc(var(--p) * 7); height: calc(var(--p) * 7); flex: none; background: var(--c);
  -webkit-mask: url("/assets/img/gem.png") center / 100% 100% no-repeat; mask: url("/assets/img/gem.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px var(--c));
}
.fire { --c: #ff7a4d; } .earth { --c: #c99a5b; } .wind { --c: #a8f0d6; } .lightning { --c: #ffe066; }
.water { --c: #5aa8ff; } .ice { --c: #bff2ff; } .plant { --c: #7fdc63; } .light { --c: #fff6c8; }

.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
@media (max-width: 860px) { .classes { grid-template-columns: 1fr; } }
.class { padding: 20px 20px 24px; text-align: center; }
.class p { color: var(--muted); margin-top: 8px; }
.note-line { text-align: center; color: var(--muted); margin-top: 32px; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.ticks li { display: flex; align-items: center; gap: 12px; }
.ticks li::before { content: ""; width: calc(var(--p) * 5); height: calc(var(--p) * 5); flex: none; background: url("/assets/img/diamond.png") center / 100% 100% no-repeat; image-rendering: pixelated; }
@media (max-width: 420px) { .ticks { grid-template-columns: 1fr; } }

.coop { text-align: center; }
.coop .num { font-size: 96px; line-height: 1; color: var(--gold); text-shadow: 0 0 24px rgba(255, 214, 115, 0.35); }
.coop p { max-width: 32em; margin: 16px auto 0; color: var(--text); }

/* ---------- media ---------- */
.sub { font-size: 24px; margin: 56px 0 20px; text-align: center; }
.sub:first-of-type { margin-top: 0; }
.grid { display: grid; gap: 20px; }
.videos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 380px) { .videos { grid-template-columns: 1fr; } }
.gifs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shots { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.more { text-align: center; margin-top: 32px; }

.shot, .yt, .gif {
  border: calc(var(--p) * 4) solid transparent;
  border-image: url("/assets/img/frame.png") 4 / calc(var(--p) * 4) stretch;
  background: var(--well); background-clip: padding-box;
}
.shot { padding: 0; cursor: zoom-in; aspect-ratio: 16 / 9; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.2s; }
.shot:hover img { filter: brightness(1.12); }
.yt { position: relative; aspect-ratio: 16 / 9; width: 100%; padding: 0; background-position: center; background-size: cover; background-repeat: no-repeat; cursor: pointer; }
.yt::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 32px/1 "NeoDGM", monospace; color: var(--gold); text-shadow: 0 0 12px rgba(0, 0, 0, 0.8); }
.yt:hover::after { color: var(--gold-lit); }
.yt span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 12px; background: rgba(10, 8, 5, 0.8); color: var(--text); text-align: left; font: 16px "NeoDGM", monospace; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt.playing::after { display: none; }
.gif img, .gif video { width: 100%; display: block; }
.gif figcaption { padding: 6px 10px; color: var(--muted); }
.empty { grid-column: 1 / -1; color: var(--muted); padding: 16px 20px; text-align: center; border: 1px dashed rgba(255, 214, 115, 0.35); }

.lightbox { position: fixed; inset: 0; z-index: 50; display: none; background: rgba(10, 8, 5, 0.94); padding: 24px; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 90vh; width: auto; }
.lightbox button { position: absolute; top: 16px; right: 16px; background: var(--well); color: var(--gold); border: 1px solid var(--gold-dim); padding: 4px 16px; font: 16px "NeoDGM", monospace; cursor: pointer; }

/* ---------- patch notes ---------- */
.notes { display: grid; gap: 24px; }
.notes.side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.note {
  padding: 20px 24px;
  border: calc(var(--p) * 4) solid transparent;
  border-image: url("/assets/img/frame.png") 4 / calc(var(--p) * 4) stretch;
  background: var(--well); background-clip: padding-box;
}
.note header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.note h3 { font-size: 24px; }
.note time { color: var(--muted); }
.note .body { overflow-wrap: anywhere; }
.note .body p { margin: 0 0 8px; }
.note .body p:empty { display: none; }
.note .body li p { margin: 0; }
.note .body ul, .note .body ol { margin: 0 0 12px; padding-left: 24px; }
.note .body li::marker { color: var(--gold-dim); }
.note .body h4 { margin: 16px 0 4px; font-size: 16px; color: var(--gold); font-weight: 400; }
.note .body strong { color: var(--gold); font-weight: 400; }
.note .body img { margin: 12px 0; }
.note > a { display: inline-block; margin-top: 8px; }
.note.compact .body { max-height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }

/* ---------- get it ---------- */
.getit { text-align: center; padding: 96px 0 72px; }
.getit p { margin: 24px auto 32px; max-width: 34em; }
.steam-widget { width: min(646px, 100%); height: 190px; border: 0; margin: 48px auto 0; display: block; }

/* ---------- footer ---------- */
.foot { padding: 40px 0 48px; color: var(--muted); }
.foot .rule { margin: 0 auto 32px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.social { display: flex; gap: 12px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: calc(var(--p) * 4) solid transparent; border-image: url("/assets/img/frame.png") 4 / calc(var(--p) * 4) stretch; background: var(--well); background-clip: padding-box; }
.social a:hover { background-color: var(--frame); }
.social img { width: 16px; height: auto; }
.small { opacity: 0.9; }

/* ---------- plain pages (patch notes, legal, 404) ---------- */
.page-head { text-align: center; padding: 48px 0 40px; }
.page-head p { margin-top: 20px; color: var(--muted); }
.page-body { padding: 8px 0 80px; }

.legal { max-width: 46em; }
.legal h1 { font-size: 32px; line-height: 1.3; font-weight: 400; color: var(--gold); }
.legal h2 { font-size: 24px; margin: 40px 0 12px; letter-spacing: 0.04em; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal ul { padding-left: 24px; }
.legal li + li { margin-top: 4px; }
.legal li::marker { color: var(--gold-dim); }
.legal strong { color: var(--gold); font-weight: 400; }
.legal a { overflow-wrap: anywhere; }
.legal .updated { color: var(--muted); margin: 8px 0 32px; }
.legal-nav { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.legal-nav a[aria-current="page"] { text-decoration: none; color: var(--gold-lit); }
.lang-note { padding: 10px 16px; margin-bottom: 32px; color: var(--muted); border: 1px dashed rgba(255, 214, 115, 0.35); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}