@charset "UTF-8";
/* Omnia IV: colorful pixel windows, using the original website's visual language. */
:root {
  --ink:#221b4d;
  --ink-soft:#574f84;
  --night:#231c45;
  --cream:#fff8df;
  --paper:#fffceb;
  --line:#bdb0df;
  --gold:#ffd05b;
  --blue:#2277ff;
  --cyan:#73d7ff;
  --deep-blue:#102b86;
  --pink:#ff84c6;
  --purple:#9c58ff;
  --sage:#24653f;
  --sage-pale:#d7ffe5;
  --border:#231c45;
  --pixel:'Press Start 2P',monospace;
  --body:'VT323',monospace;
  --window-shadow:5px 5px 0 #231c45,8px 8px 0 #231c4538;
  font-family:var(--body);
  font-size:20px;
  color:var(--ink);
  background:#9aceee;
  font-synthesis:none;
  color-scheme:light
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-width:320px;
  min-height:100vh;
  display:flow-root;
  background:linear-gradient(180deg,#d7f5ff0a,#e2d5ff18),var(--site-background,url('https://file.garden/arKmPAsX0cG3mOhA/Omnia/image_2026-09-25_113638094.png')) center top / cover fixed no-repeat
}

button,input,textarea,select {
  font:inherit
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer;
  color:inherit
}

button:disabled {
  cursor:wait;
  opacity:.6
}

a {
  color:inherit
}

a,button {
  touch-action:manipulation
}

svg {
  vertical-align:middle;
  flex-shrink:0
}

button svg,a svg,button span {
  pointer-events:none
}

button,a,input {
  transition:background .15s,box-shadow .15s,transform .15s
}

:focus-visible {
  outline:3px solid var(--deep-blue);
  outline-offset:5px
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-weight:400
}

h1,h2 {
  font-family:var(--pixel)
}

h1 {
  line-height:1.6
}

h2 {
  font-size:15px;
  line-height:1.65
}

h3 {
  font-size:26px;
  line-height:1.25
}

p {
  font-size:22px;
  line-height:1.4
}

input,textarea,select {
  min-width:0
}

textarea {
  resize:vertical
}

.skip-link {
  position:fixed;
  left:16px;
  top:-90px;
  padding:12px;
  background:var(--gold);
  border:3px solid var(--border);
  z-index:99
}

.skip-link:focus {
  top:12px
}

.site-shell {
  width:100%;
  margin:28px auto;
  padding:0 clamp(18px,2vw,48px);
  min-height:calc(100vh - 56px)
}

/* Main menu: five beveled tabs in a floating sky-and-lilac window. */
.topbar {
  position:relative;
  min-height:108px;
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:24px;
  background:linear-gradient(180deg,#fffef4,#dff7ff 50%,#d0caff);
  color:var(--deep-blue);
  border:4px solid var(--border);
  box-shadow:inset 0 3px #fff,inset 0 -4px #ada0e9,var(--window-shadow)
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  white-space:nowrap;
  font-family:var(--pixel);
  font-size:22px;
  line-height:1.35;
  letter-spacing:-1px;
  text-shadow:2px 2px #fff,3px 3px #73d7ff
}

.brand b {
  font-weight:400;
  color:#9d387b;
  text-shadow:2px 2px #fff,3px 3px #ffbdde
}

.brand small {
  font-family:var(--body);
  display:block;
  font-size:14px;
  letter-spacing:1.2px;
  margin-top:9px;
  color:var(--ink-soft);
  text-shadow:none
}

.brand-mark {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:var(--deep-blue);
  background:linear-gradient(#fff0a8,#ffd05b);
  border:3px solid var(--border);
  box-shadow:inset 2px 2px #fff8df,inset -2px -2px #db9b28,3px 3px #9c58ff;
  transform:rotate(-4deg)
}

.topbar nav {
  display:flex;
  align-items:center;
  margin-left:auto;
  gap:7px
}

.topbar nav a {
  font-family:var(--pixel);
  font-size:8px;
  line-height:1.5;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  text-decoration:none;
  color:var(--deep-blue);
  padding:13px 11px;
  background:#fff8df;
  border:2px solid var(--border);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #d6c4ee,2px 3px #231c45
}

.topbar nav a:nth-child(2) {
  background:#d2f4ff
}

.topbar nav a:nth-child(3) {
  background:#f5d4f1
}

.topbar nav a:nth-child(4) {
  background:#e0d2ff
}

.topbar nav a:nth-child(5) {
  background:#ffebb0
}

.topbar nav a.active {
  background:linear-gradient(#fff2af,#ffd05b);
  color:var(--ink);
  box-shadow:inset 2px 2px #fff8df,inset -2px -2px #e6a638,2px 3px #231c45
}

.topbar nav a.active:after {
  content:'';
  position:absolute;
  width:6px;
  height:6px;
  background:var(--pink);
  border:1px solid var(--border);
  left:calc(50% - 3px);
  bottom:-10px;
  transform:rotate(45deg)
}

.topbar nav a:hover {
  transform:translateY(-2px);
  background:#fff
}

.top-actions {
  display:flex;
  align-items:center;
  gap:9px
}

.icon-button {
  display:grid;
  place-items:center;
  width:35px;
  min-height:35px;
  border:2px solid var(--border);
  color:var(--deep-blue);
  background:#f6e8ff;
  padding:6px;
  box-shadow:inset 2px 2px #fff,2px 2px #bba4e2
}

.account-button {
  font-size:18px;
  background:linear-gradient(#e5faff,#aeeaff);
  color:var(--deep-blue);
  border:2px solid var(--border);
  padding:9px 12px;
  max-width:165px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:inset 2px 2px #fff,2px 3px #231c45
}

.user-level {
  color:#8a285c;
  margin-left:7px
}

.mode-bar {
  margin:11px 8px 0;
  padding:8px 13px;
  background:#fff8dff5;
  font-size:14px;
  letter-spacing:.7px;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:8px;
  border:2px solid var(--border);
  box-shadow:2px 2px #231c4559
}

.mode-bar>span:not(.status-dot) {
  letter-spacing:0;
  font-size:16px
}

.mode-bar .text-button {
  margin-left:auto;
  font-size:16px;
  letter-spacing:0
}

.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#53d889;
  border:1px solid var(--border);
  box-shadow:2px 2px #231c4525;
  flex-shrink:0
}

.text-button {
  border:0;
  background:none;
  padding:0;
  color:var(--deep-blue);
  text-decoration:underline;
  text-underline-offset:4px
}

.subnav {
  display:flex;
  gap:10px;
  padding:13px 16px;
  margin-top:22px;
  background:linear-gradient(#dff7ff,#eaddff);
  border:3px solid var(--border);
  box-shadow:3px 3px #231c45;
  overflow-x:auto
}

.subnav a {
  padding:9px 13px;
  text-decoration:none;
  color:var(--deep-blue);
  font-size:19px;
  white-space:nowrap;
  position:relative;
  border:2px solid transparent
}

.subnav a[aria-current] {
  background:#fff0a8;
  border-color:var(--border);
  box-shadow:inset 2px 2px #fff,2px 2px #bda4e2
}

.subnav a:hover {
  background:#fff8df
}

main {
  min-height:65vh
}

main:focus {
  outline:none
}

/* Original game-shell layout: a compact menu beside the active pixel window. */
.game-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:23px;
  margin-top:24px;
  align-items:start
}

.game-content {
  min-width:0
}

.topbar .top-actions {
  margin-left:auto
}

.topbar .menu-toggle {
  display:none
}

.pixel-sidebar {
  position:sticky;
  top:18px;
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  padding:14px;
  background:linear-gradient(155deg,#fff8df,#fff0c0 50%,#e8f8ff);
  border:4px solid var(--border);
  box-shadow:inset 0 0 0 3px #fff,var(--window-shadow);
  scrollbar-width:thin;
  scrollbar-color:#b490db #fff8df
}

.sidebar-title {
  display:flex;
  gap:9px;
  align-items:center;
  justify-content:center;
  font-family:var(--pixel);
  font-size:13px;
  line-height:1.5;
  color:var(--deep-blue);
  padding:12px 8px;
  background:linear-gradient(90deg,#aeeaff,#d2bcff,#ffceea);
  border:2px solid var(--border);
  box-shadow:inset 0 2px #fff,2px 2px #ac87cd;
  margin-bottom:17px
}

.menu-group {
  margin-bottom:16px
}

.menu-group h2 {
  font-size:8px;
  letter-spacing:.7px;
  line-height:1.7;
  margin:0 0 9px 3px;
  color:#826098
}

.pixel-menu-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:10px 9px;
  margin:0 0 8px;
  font-family:var(--pixel);
  font-size:8px;
  line-height:1.65;
  text-decoration:none;
  color:var(--deep-blue);
  background:linear-gradient(#fffefa,#fff0c5);
  border:2px solid var(--border);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #decaa0,2px 2px #bda0d4;
  overflow-wrap:anywhere
}

.menu-group-1 .pixel-menu-link {
  background:linear-gradient(#ffeef8,#ffd1e8)
}

.menu-group-2 .pixel-menu-link {
  background:linear-gradient(#e8faff,#bceeff)
}

.menu-group-3 .pixel-menu-link {
  background:linear-gradient(#f4eaff,#dac5ff)
}

.menu-group-4 .pixel-menu-link {
  background:linear-gradient(#fff8d5,#ffe5a1)
}

.pixel-menu-link:hover {
  transform:translateX(2px);
  background:#fff
}

.pixel-menu-link.active {
  background:linear-gradient(#fff0a8,#ffd05b);
  box-shadow:inset 2px 2px #fff8df,inset -2px -2px #e5a636,2px 2px #231c45;
  color:#59316b
}

.pixel-menu-link.active span {
  color:#a63178;
  font-size:9px
}

.pixel-sidebar>.button {
  font-size:8px;
  padding:11px 8px;
  gap:7px
}

.game-content>.subnav {
  margin-top:0
}

.game-content .page-heading {
  margin-top:0
}

.game-content .hero {
  min-height:0;
  padding:0 0 27px
}

.game-content .hero-copy {
  width:100%;
  max-width:none;
  min-height:clamp(350px,25vw,450px);
  background:
    linear-gradient(90deg,#fff9e7fa 0%,#fff9e7ed 32%,#fff9e79c 48%,#fff9e712 72%),
    var(--site-background,url('https://file.garden/arKmPAsX0cG3mOhA/Omnia/image_2026-09-25_113638094.png')) center 50% / cover no-repeat
}

.game-content .hero-copy>p {
  max-width:min(650px,60%);
  font-size:clamp(23px,1.4vw,28px);
  line-height:1.45
}

.game-content .hero-actions {
  max-width:700px
}

.game-content .hero h1 {
  font-size:36px;
  line-height:1.5
}

.game-content .world-stamp {
  display:none
}

.game-content .hero-shade {
  display:none
}

.game-content .home-body {
  grid-template-columns:minmax(0,1fr) 305px;
  gap:22px
}

.game-content .section-title {
  flex-wrap:wrap
}

.game-content .home-side .section-title {
  min-height:67px
}

.game-content .home-links {
  grid-template-columns:1fr
}

.game-content .guide-layout {
  grid-template-columns:185px minmax(0,1fr);
  gap:21px
}

.game-content .adventurer-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.game-content .hero-copy:after {
  inset:8px
}

.game-layout+footer {
  margin-top:10px
}

@media(max-width:1180px) and (min-width:901px) {
  .game-content .home-body {
    grid-template-columns:1fr
  }
  .game-content .home-side {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .game-content .home-side>.section-title {
    grid-column:1/-1;
    margin:0;
    min-height:55px
  }
  .game-content .home-side .announcement-teaser {
    margin-top:0;
    align-self:start
  }
  .game-content .quest-grid {
    grid-template-columns:1fr
  }
  .game-content .guide-layout {
    grid-template-columns:1fr
  }
  .game-content .guide-index {
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:10px 17px
  }
  .game-content .guide-index .eyebrow {
    width:100%
  }
  .game-content .guide-index>a {
    padding:7px 0
  }
  .game-content .page-heading {
    display:block
  }
  .game-content .page-heading>.button {
    margin-top:20px
  }
  .game-content .community-grid {
    grid-template-columns:1fr
  }
}

@media(max-width:900px) {
  .game-layout {
    grid-template-columns:1fr;
    margin-top:24px
  }
  .pixel-sidebar {
    display:none;
    position:fixed;
    z-index:45;
    left:16px;
    top:110px;
    bottom:20px;
    width:min(290px,calc(100vw - 32px));
    max-height:none
  }
  .menu-open .pixel-sidebar {
    display:block
  }
  .topbar .menu-toggle {
    display:inline-flex;
    font-size:8px;
    padding:10px 11px;
    min-height:40px
  }
  .game-content .home-body {
    grid-template-columns:minmax(0,1fr) 305px
  }
  .game-content .guide-layout {
    grid-template-columns:1fr
  }
  .game-content .guide-index {
    position:static
  }
  .game-content .hero h1 {
    font-size:34px
  }
}

@media(max-width:800px) {
  .game-content .home-body {
    grid-template-columns:1fr
  }
  .game-content .home-links {
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:560px) {
  .topbar .menu-toggle {
    order:3;
    width:100%;
    font-size:9px;
    min-height:38px;
    padding:9px
  }
  .game-layout {
    margin-top:22px
  }
  .pixel-sidebar {
    top:160px;
    left:11px;
    width:min(290px,calc(100vw - 22px))
  }
  .game-content .hero h1 {
    font-size:29px
  }
  .game-content .home-links {
    grid-template-columns:1fr
  }
  .game-content .adventurer-grid {
    grid-template-columns:1fr
  }
  .game-content .hero-copy:after {
    inset:6px
  }
}

/* Castle scenery surrounds the welcome dialogue window. */
.hero {
  min-height:580px;
  position:relative;
  display:flex;
  align-items:center;
  padding:42px 12px 46px;
  overflow:visible
}

.hero-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 27% 54%,#cfeaff35,transparent 68%)
}

.hero-copy {
  position:relative;
  width:min(720px,66%);
  color:var(--ink);
  padding:28px 30px 25px;
  z-index:1;
  background:linear-gradient(145deg,#fffdf1fa,#fff3c9fa 57%,#e0f6fffa);
  border:4px solid var(--border);
  box-shadow:inset 0 0 0 3px #fff8df,inset 0 0 0 5px #bfaddf,6px 6px #231c45,10px 10px #fff8df80
}

.hero-copy:after {
  content:'';
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px dashed #bba5d4
}

.hero-kicker {
  position:relative;
  font-family:var(--pixel);
  font-size:9px;
  line-height:1.7;
  letter-spacing:.4px;
  color:var(--deep-blue);
  margin:-28px -30px 24px;
  padding:13px 22px;
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(90deg,#aeeaff,#daccff 58%,#ffcbe7);
  border-bottom:3px solid var(--border);
  box-shadow:inset 0 2px #fff8df
}

.tiny-cross {
  font-family:var(--body);
  font-size:25px;
  color:#9a367d
}

.hero h1 {
  font-size:clamp(21px,2.4vw,31px);
  font-weight:400;
  line-height:1.65;
  letter-spacing:-.6px;
  margin-bottom:18px;
  color:var(--deep-blue);
  text-shadow:2px 2px #fff,3px 3px #9ed9ff
}

.hero h1 em {
  font-style:normal;
  color:#a52b78;
  text-shadow:2px 2px #fff,3px 3px #ffadd5
}

.hero p {
  font-size:23px;
  line-height:1.35;
  color:#4b4275;
  margin-bottom:23px
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
  z-index:2
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 16px;
  background:linear-gradient(#d2f5ff,#73d7ff);
  color:var(--deep-blue);
  border:3px solid var(--border);
  text-decoration:none;
  font-family:var(--pixel);
  font-size:9px;
  font-weight:400;
  box-shadow:inset 2px 2px #fff,inset -3px -3px #3ba4de,3px 4px #231c45;
  line-height:1.65;
  min-height:47px
}

.button:hover {
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:inset 2px 2px #fff,inset -3px -3px #3ba4de,3px 6px #231c45
}

.button:active {
  transform:translate(2px,2px);
  box-shadow:inset 2px 2px #fff,inset -2px -2px #3ba4de,1px 2px #231c45
}

.button.gold {
  background:linear-gradient(#fff0a8,#ffd05b);
  color:var(--ink);
  box-shadow:inset 2px 2px #fff8df,inset -3px -3px #e3a732,3px 4px #231c45
}

.button.glass {
  background:linear-gradient(#ffe6f3,#ffb6da);
  color:#68225a;
  box-shadow:inset 2px 2px #fff8df,inset -3px -3px #df84b6,3px 4px #231c45
}

.button.secondary {
  background:linear-gradient(#f4eaff,#d9baff);
  color:#54257f;
  box-shadow:inset 2px 2px #fff,inset -3px -3px #aa80d4,3px 4px #231c45
}

.button.full {
  width:100%
}

.hero-footnote {
  position:relative;
  z-index:2;
  font-size:16px;
  color:#6e5889;
  margin-top:23px;
  display:flex;
  gap:8px;
  align-items:center
}

.world-stamp {
  position:absolute;
  right:4%;
  bottom:70px;
  padding:15px 19px;
  text-align:center;
  color:#fff8df;
  background:#221b4dcc;
  border:3px solid #ffeeb8;
  outline:3px solid var(--border);
  box-shadow:5px 5px #231c454d;
  text-shadow:2px 2px #231c45;
  transform:rotate(3deg)
}

.world-stamp>span {
  font-size:17px;
  letter-spacing:3px;
  color:var(--cyan)
}

.world-stamp strong {
  display:block;
  font-family:var(--pixel);
  font-size:24px;
  font-weight:400;
  letter-spacing:1px;
  line-height:1.6;
  margin:5px 0;
  color:var(--gold)
}

.world-stamp small {
  display:block;
  font-size:16px;
  letter-spacing:4px;
  border-top:1px dashed #ff84c6;
  padding-top:7px
}

.firefly {
  position:absolute;
  width:12px;
  height:12px;
  background:#fff0a8;
  clip-path:polygon(40% 0,60% 0,60% 35%,100% 35%,100% 65%,60% 65%,60% 100%,40% 100%,40% 65%,0 65%,0 35%,40% 35%);
  filter:drop-shadow(2px 2px #6f4c9b);
  animation:float 6s steps(8,end) infinite;
  pointer-events:none
}

.firefly.one {
  right:17%;
  top:53%;
  background:#ffb5df
}

.firefly.two {
  right:29%;
  top:18%;
  animation-delay:-2s
}

.firefly.three {
  right:5%;
  top:34%;
  animation-delay:-4s;
  background:#b5f0ff
}

/* Quest and character windows. */
.home-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:26px;
  padding:0 0 36px;
  align-items:start
}

.home-main {
  min-width:0;
  padding:23px;
  background:linear-gradient(150deg,#fff8dffa,#fff2c8fa 65%,#e8f7fffa);
  border:4px solid var(--border);
  box-shadow:inset 0 0 0 3px #fff,var(--window-shadow)
}

.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  gap:15px;
  padding:13px 14px;
  background:linear-gradient(90deg,#b9efff,#e1d2ff 70%,#ffdbec);
  border:2px solid var(--border);
  box-shadow:inset 0 2px #fff,2px 2px #c3a7dd
}

.section-title h2 {
  margin:6px 0 0;
  color:var(--deep-blue);
  font-size:12px;
  line-height:1.6
}

.eyebrow {
  display:block;
  font-family:var(--pixel);
  letter-spacing:.3px;
  font-size:8px;
  font-weight:400;
  color:#674a96;
  line-height:1.7
}

.inline-link {
  font-size:18px;
  text-decoration:none;
  color:var(--deep-blue);
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}

.inline-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.quest-list {
  display:grid;
  gap:15px
}

.quest-tile {
  background:linear-gradient(130deg,#fffef1,#fff6dc);
  border:3px solid var(--border);
  padding:21px;
  display:flex;
  gap:17px;
  position:relative;
  box-shadow:inset 0 0 0 2px #fff,3px 3px #cbb0e2
}

.quest-tile:nth-child(even) {
  background:linear-gradient(130deg,#f7fdff,#e8f4ff)
}

.quest-emblem {
  height:55px;
  width:48px;
  background:linear-gradient(#d2f5ff,#95dfff);
  border:3px solid var(--border);
  display:grid;
  place-items:center;
  color:var(--deep-blue);
  flex-shrink:0;
  box-shadow:inset 2px 2px #fff,3px 3px #c0a7e0
}

.quest-emblem.purple {
  color:#6b298e;
  background:linear-gradient(#f1dfff,#d5b6ff)
}

.quest-tile-body {
  flex:1;
  min-width:0
}

.quest-meta {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  color:#6d5390;
  margin-bottom:9px;
  flex-wrap:wrap
}

.tag {
  display:inline-block;
  font-family:var(--pixel);
  font-size:7px;
  letter-spacing:.2px;
  font-weight:400;
  text-transform:uppercase;
  padding:6px 7px;
  background:#ffedaa;
  border:2px solid #5b4278;
  color:#5b3171;
  white-space:nowrap;
  line-height:1.45;
  box-shadow:inset 1px 1px #fff8df
}

.tag.sage {
  background:#cdf6dc;
  border-color:#38734f;
  color:#285638
}

.quest-tile h3 {
  margin:0 0 9px;
  font-size:26px;
  color:var(--deep-blue)
}

.quest-tile h3 button,.archive-row h3 button {
  border:0;
  padding:0;
  background:transparent;
  text-align:left;
  font-weight:400;
  font:inherit;
  line-height:inherit
}

.quest-tile h3 button:hover,.archive-row h3 button:hover {
  color:#8c2e85;
  text-decoration:underline;
  text-underline-offset:4px
}

.quest-tile p {
  font-size:20px;
  color:var(--ink-soft);
  margin:0 0 16px;
  line-height:1.3;
  max-width:100%
}

.quest-bottom {
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap
}

.reward {
  color:#805410;
  font-size:18px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:400
}

.reward svg {
  color:#b27613
}

.quest-status {
  font-size:17px;
  color:#72588b;
  display:inline-flex;
  align-items:center;
  gap:5px
}

.quest-status.done {
  color:var(--sage)
}

.quest-open {
  align-self:center;
  flex-shrink:0;
  border:2px solid var(--border);
  padding:8px;
  display:grid;
  place-items:center;
  background:#ffeab0;
  color:var(--deep-blue);
  box-shadow:inset 2px 2px #fff,2px 3px #bda4dd
}

.quest-open:hover {
  background:var(--pink);
  transform:translateY(-1px)
}

.home-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:23px
}

.destination {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  border:2px solid var(--border);
  padding:16px 12px;
  color:#5e3d91;
  background:linear-gradient(#f4e5ff,#e2c9ff);
  box-shadow:inset 2px 2px #fff,3px 3px #bda0d4
}

.destination:nth-child(2) {
  background:linear-gradient(#ffe9f5,#ffd0e5)
}

.destination span {
  flex:1;
  min-width:0
}

.destination strong {
  display:block;
  color:#48246d;
  font-size:21px;
  font-weight:400;
  line-height:1.15
}

.destination small {
  font-size:17px;
  color:#715086;
  display:block;
  margin-top:6px;
  line-height:1.1
}

.home-side {
  min-width:0
}

.home-side .section-title {
  min-height:64px;
  padding:12px;
  gap:8px;
  background:linear-gradient(90deg,#ffe7a0,#ffcfec);
  box-shadow:3px 3px #231c45;
  border-width:3px
}

.home-side h2 {
  font-size:11px;
  margin:0;
  line-height:1.75
}

.home-side .tag {
  font-size:6px;
  padding:6px 5px
}

.create-card {
  min-height:332px;
  text-align:center;
  background:linear-gradient(155deg,#fff8df,#e6f8ff 58%,#f6deff);
  border:4px solid var(--border);
  padding:25px 21px 21px;
  box-shadow:inset 0 0 0 3px #fff8df,inset 0 0 0 5px #b8c6ed,var(--window-shadow);
  position:relative
}

.create-card h3 {
  font-family:var(--pixel);
  font-size:11px;
  line-height:1.8;
  margin:17px 0 11px;
  color:var(--deep-blue)
}

.create-card p {
  font-size:21px;
  color:var(--ink-soft);
  line-height:1.3;
  margin-bottom:20px
}

.create-card>small {
  font-size:17px;
  color:#785295;
  display:block;
  margin-top:15px
}

.pixel-traveler {
  height:63px;
  width:57px;
  margin:auto;
  position:relative;
  animation:travelerBob 2.2s steps(2,end) infinite
}

.pixel-traveler:before {
  content:'';
  position:absolute;
  width:24px;
  height:18px;
  left:14px;
  top:5px;
  background:#7960bd;
  box-shadow:-5px 5px #7960bd,5px 5px #7960bd,0 10px #ffd7ab,0 17px #ffd7ab,8px 0 #ff84c6
}

.pixel-traveler:after {
  content:'';
  position:absolute;
  width:27px;
  height:25px;
  left:12px;
  top:32px;
  background:#2277ff;
  box-shadow:-5px 5px #2277ff,5px 5px #2277ff,0 8px #102b86,0 11px #b79bd5;
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)
}

.pixel-traveler span {
  position:absolute;
  width:4px;
  height:31px;
  top:27px;
  left:47px;
  background:#a56845;
  transform:rotate(5deg);
  box-shadow:0 3px #6e4251
}

.pixel-traveler span:before {
  content:'';
  position:absolute;
  width:9px;
  height:9px;
  top:-4px;
  left:-2px;
  background:var(--gold);
  border:2px solid #906039;
  box-shadow:0 0 0 2px #fff0a8
}

.announcement-teaser {
  display:block;
  text-decoration:none;
  padding:20px;
  margin-top:24px;
  border:3px solid var(--border);
  background:linear-gradient(#fff5d6,#ffe8f2);
  box-shadow:inset 2px 2px #fff,4px 4px #231c45
}

.announcement-teaser .eyebrow {
  font-size:7px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#8e3a82
}

.announcement-teaser h3 {
  font-size:25px;
  margin:15px 0 8px;
  color:var(--deep-blue)
}

.announcement-teaser p {
  font-size:20px;
  line-height:1.3;
  color:var(--ink-soft);
  margin-bottom:13px
}

.own-card .adventurer-card {
  margin-bottom:17px
}

.own-card {
  overflow:visible
}

/* Boards and reading rooms. */
.page-heading {
  margin:28px 0 23px;
  padding:27px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  background:linear-gradient(135deg,#fff8dff7,#e1f6fff7 60%,#f7dffff7);
  border:4px solid var(--border);
  box-shadow:inset 0 0 0 3px #fff,var(--window-shadow)
}

.page-heading h1 {
  font-size:24px;
  margin:12px 0 14px;
  color:var(--deep-blue);
  text-shadow:2px 2px #fff,3px 3px #a4dfff
}

.page-heading p {
  font-size:23px;
  color:var(--ink-soft);
  margin:0;
  max-width:750px;
  line-height:1.3
}

.board-tools {
  display:flex;
  align-items:end;
  gap:18px;
  padding:20px 23px;
  flex-wrap:wrap;
  background:linear-gradient(#eee0ff,#e0f4ff);
  border:3px solid var(--border);
  box-shadow:3px 3px #231c45
}

.search-field {
  flex:1;
  min-width:200px
}

.select-field {
  min-width:150px
}

.board-tools label {
  font-size:19px;
  color:#5e3e89;
  font-weight:400;
  display:grid;
  gap:7px;
  margin:0
}

.board-tools input,.board-tools select {
  margin:0
}

.board-tools .muted {
  align-self:center
}

.board-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:22px 0 18px;
  padding:9px 15px;
  font-size:18px;
  color:var(--deep-blue);
  background:#fff8dff5;
  border:2px solid var(--border);
  box-shadow:2px 2px #231c454d
}

.board-caption span:last-child {
  color:#79548a
}

.quest-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding:0 0 40px
}

.quest-grid .quest-tile {
  min-height:230px;
  align-items:flex-start
}

.quest-grid .quest-open {
  align-self:end
}

.quest-grid .quest-meta {
  gap:7px
}

.quest-grid .quest-tile-body {
  display:flex;
  flex-direction:column;
  height:100%
}

.quest-grid .quest-bottom {
  margin-top:auto;
  gap:8px 16px
}

.quest-grid .quest-tile h3 {
  font-size:28px
}

.quest-grid .quest-tile p {
  font-size:21px
}

.empty {
  padding:40px 25px;
  border:3px dashed #9573c3;
  text-align:center;
  grid-column:1/-1;
  background:linear-gradient(#fff8df,#e7f4ff);
  width:100%;
  color:#685487;
  box-shadow:3px 3px #231c4560
}

.empty-symbol {
  color:#9c58ff;
  margin-bottom:16px
}

.empty h3 {
  font-family:var(--pixel);
  font-size:14px;
  line-height:1.8;
  color:var(--deep-blue)
}

.empty p {
  font-size:22px;
  max-width:470px;
  margin:0 auto 20px
}

.adventurer-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  padding:10px 0 45px
}

.adventurer-grid .adventurer-card {
  margin-bottom:15px
}

.archive-list,.posts-list {
  padding:0 0 40px
}

.archive-row {
  display:flex;
  gap:23px;
  align-items:center;
  border:3px solid var(--border);
  padding:23px;
  background:linear-gradient(#fff8df,#f0eaff);
  margin-bottom:18px;
  box-shadow:inset 2px 2px #fff,4px 4px #231c45
}

.archive-row>div:nth-child(2) {
  flex:1;
  min-width:0
}

.archive-row h3 {
  margin:8px 0;
  color:var(--deep-blue)
}

.archive-row p {
  font-size:21px;
  color:var(--ink-soft);
  margin:0
}

.historical-writing { margin-top:32px }
.historical-writing .archive-row>div:first-child { flex:1; min-width:0 }
.historical-writing .archive-row h3,.archive-prose { overflow-wrap:anywhere }
.historical-writing .board-tools { margin-block:20px }
.historical-writing .tag { flex-shrink:0 }
@media (max-width:600px) {
  .historical-writing .archive-row { flex-direction:column; align-items:flex-start; gap:8px; padding:15px }
}

.community-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  padding:0 0 40px
}

.paper-card {
  background:linear-gradient(140deg,#fff8df,#fff3d4 62%,#e9f8ff);
  border:4px solid var(--border);
  padding:27px;
  box-shadow:inset 0 0 0 2px #fff,var(--window-shadow)
}

.paper-card h2 {
  margin:18px 0 15px;
  font-size:16px;
  line-height:1.7;
  color:var(--deep-blue)
}

.paper-card p {
  font-size:23px;
  color:var(--ink-soft)
}

.card-kicker {
  color:#7c3d8d;
  font-family:var(--pixel);
  font-size:8px;
  line-height:1.8;
  display:flex;
  gap:10px;
  align-items:center
}

.paper-card-bottom {
  border-top:2px dashed #baa0dc;
  padding-top:17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}

.paper-card-bottom>span {
  font-size:20px;
  color:#72558f
}

.feature-banner {
  margin:0 0 25px;
  background:linear-gradient(100deg,#c9f2ff,#e2caff,#ffd6ea);
  padding:24px 28px;
  display:flex;
  gap:23px;
  align-items:center;
  border:3px solid var(--border);
  box-shadow:inset 2px 2px #fff,4px 4px #231c45
}

.feature-banner h3 {
  margin-bottom:9px;
  font-family:var(--pixel);
  font-size:13px;
  line-height:1.8;
  color:var(--deep-blue)
}

.feature-banner p {
  margin:0;
  font-size:22px;
  color:#574077
}

.banner-symbol {
  color:#86439b
}

.posts-list {
  max-width:1070px
}

.posts-list .paper-card {
  margin-bottom:25px
}

.post-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.post-meta time {
  color:#755583;
  font-size:18px
}

.event-dates {
  padding:13px;
  background:#e2eaff;
  border:2px solid #b79cdd;
  font-size:20px;
  color:#4f427f
}

.guide-layout {
  display:grid;
  grid-template-columns:235px minmax(0,1fr);
  gap:27px;
  margin:0 0 40px;
  align-items:start
}

.guide-index {
  padding:20px;
  background:linear-gradient(#e5f5ff,#e8d9ff);
  border:3px solid var(--border);
  box-shadow:inset 2px 2px #fff,4px 4px #231c45;
  position:sticky;
  top:20px
}

.guide-index>a {
  display:block;
  text-decoration:none;
  font-size:21px;
  line-height:1.2;
  padding:15px 0;
  border-bottom:1px dashed #9e84c7;
  color:#594184
}

.guide-index>a:hover {
  color:var(--blue)
}

.guide-content {
  min-width:0;
  padding:25px;
  background:linear-gradient(#fff8df,#fff6e6);
  border:4px solid var(--border);
  box-shadow:inset 0 0 0 2px #fff,var(--window-shadow)
}

.lore-intro {
  background:linear-gradient(125deg,#d5f3ff,#ede0ff);
  padding:23px;
  border:2px solid #8e78b5;
  margin-bottom:23px;
  box-shadow:inset 2px 2px #fff
}

.lore-intro p {
  font-size:23px;
  color:#544278;
  margin-bottom:0
}

.guide-section {
  position:relative;
  padding:15px 0 23px;
  border-bottom:2px dashed #c2abd9;
  scroll-margin-top:20px
}

.guide-section h2 {
  font-size:16px;
  margin:12px 0 17px;
  color:var(--deep-blue);
  line-height:1.75
}

.guide-section p {
  font-size:23px;
  line-height:1.45;
  color:#534772
}

.guide-number {
  font-family:var(--pixel);
  font-size:11px;
  color:#9a459f
}

.rank-ladder {
  border:2px solid #9578b8;
  margin:20px 0;
  background:#f7eeff
}

.rank-ladder>div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:13px;
  border-bottom:1px dashed #bd9bce;
  font-size:22px
}

.rank-ladder>div:nth-child(even) {
  background:#e4f5ff
}

.rank-ladder>div:last-child {
  border-bottom:0
}

.rank-ladder strong {
  color:var(--deep-blue);
  font-weight:400
}

.rank-ladder span {
  color:#7b4289
}

footer {
  display:flex;
  gap:20px;
  align-items:center;
  padding:20px 23px;
  margin:0 0 30px;
  font-size:18px;
  color:#654d80;
  border:3px solid var(--border);
  background:linear-gradient(90deg,#fff0c4,#e5f5ff,#f0ddff);
  box-shadow:inset 0 2px #fff,4px 4px #231c45
}

footer .footer-brand {
  font-family:var(--pixel);
  font-size:10px;
  line-height:1.7;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--deep-blue);
  white-space:nowrap
}

footer>div {
  margin-left:auto;
  display:flex;
  gap:20px;
  align-items:center
}

footer a {
  text-decoration:none
}

footer a:hover {
  text-decoration:underline
}

footer button {
  text-decoration:none!important;
  font:inherit
}

.boot {
  text-align:center;
  padding:70px 20px;
  margin:40px auto;
  max-width:600px;
  background:var(--cream);
  border:4px solid var(--border);
  box-shadow:var(--window-shadow)
}

.pixel-star {
  font-family:var(--pixel);
  font-size:45px;
  color:#cc8a29;
  text-shadow:3px 3px var(--pink)
}

.connection-error {
  margin-top:14px;
  padding:14px 20px;
  background:#ffe2e9;
  border:3px solid #912c5b;
  color:#772451;
  font-size:21px
}

/* Native dialogs, readable forms and the LEVEL UP celebration. */
dialog {
  width:min(680px,calc(100vw - 36px));
  max-height:90vh;
  border:4px solid var(--border);
  padding:28px;
  background:linear-gradient(145deg,#fff8df,#fff1d1 65%,#e7f8ff);
  color:var(--ink);
  box-shadow:inset 0 0 0 3px #fff8df,inset 0 0 0 5px #b49bd6,7px 7px #231c45,12px 12px #fff8df66;
  overflow-y:auto
}

dialog::backdrop {
  background:#201441ad;
  backdrop-filter:blur(2px)
}

dialog.wide {
  width:min(980px,calc(100vw - 36px))
}

.modal-heading {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:20px;
  padding:13px 16px;
  margin:-14px -14px 25px;
  border:2px solid var(--border);
  background:linear-gradient(90deg,#aeeaff,#d7c6ff,#ffc6e8);
  box-shadow:inset 0 2px #fff,2px 2px #aa8fc8
}

.modal-heading h2 {
  margin:8px 0 0;
  font-size:17px;
  line-height:1.7;
  color:var(--deep-blue)
}

.close-button {
  border:2px solid var(--border);
  min-height:35px;
  width:35px;
  background:linear-gradient(#ffe1ef,#ff9acb);
  font-size:28px;
  line-height:1;
  display:grid;
  place-items:center;
  flex-shrink:0;
  box-shadow:inset 2px 2px #fff,2px 2px #815386;
  color:#672552
}

.close-button:hover {
  background:#ffd05b
}

label {
  display:block;
  font-size:21px;
  color:#594279;
  font-weight:400;
  margin-bottom:18px;
  line-height:1.2
}

label small {
  font-size:18px;
  font-weight:400;
  color:#80619a
}

input,textarea,select {
  display:block;
  margin-top:8px;
  width:100%;
  background:#fffef5;
  border:2px solid #68508c;
  padding:11px 12px;
  color:#30204e;
  border-radius:0;
  font-size:21px;
  box-shadow:inset 2px 2px #d3c0e7;
  line-height:1.2
}

input:focus,textarea:focus,select:focus {
  outline:3px solid var(--cyan);
  outline-offset:1px;
  border-color:var(--deep-blue)
}

input::placeholder,textarea::placeholder {
  color:#8a779d
}

input[type=color] {
  height:44px;
  padding:5px
}

input[type=checkbox] {
  width:19px;
  height:19px;
  margin:0;
  accent-color:var(--purple);
  flex-shrink:0;
  box-shadow:none
}

.profile-editor {
  display:grid;
  grid-template-columns:1fr 325px;
  gap:30px
}

.appearance-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 13px
}

.form-divider {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-family:var(--pixel);
  font-size:8px;
  line-height:1.7;
  color:#74418f;
  border-top:2px dashed #b69ad0;
  padding-top:23px;
  margin:26px 0 18px
}

.editor-preview {
  background:linear-gradient(#d8f4ff,#e8d6ff);
  padding:20px 17px;
  align-self:start;
  position:sticky;
  top:0;
  border:3px solid var(--border);
  box-shadow:inset 2px 2px #fff,3px 3px #b89acc;
  text-align:center
}

.editor-preview>.eyebrow {
  margin-bottom:20px
}

.editor-preview>p {
  font-size:18px;
  color:#74538e;
  margin:18px 0 0
}

.modal-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  padding-top:20px;
  margin-top:12px;
  border-top:2px dashed #b79ace
}

.form-error {
  color:#a32654;
  font-size:21px;
  line-height:1.35;
  margin:16px 0 0
}

.form-error:empty {
  display:none
}

.quest-modal-meta {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:20px;
  color:#73528c;
  margin-bottom:22px;
  flex-wrap:wrap
}

.quest-modal-meta .reward {
  margin-left:auto
}

.quest-story p,.archive-prose p {
  font-size:24px;
  line-height:1.5;
  color:#514069;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

.objective {
  background:linear-gradient(110deg,#d8f3ff,#eee0ff);
  border:2px solid #9170b9;
  border-left:5px solid var(--blue);
  padding:20px;
  margin:23px 0;
  box-shadow:inset 2px 2px #fff
}

.objective p {
  margin:9px 0 0;
  font-size:23px;
  color:#4f3e73
}

.muted {
  font-size:20px;
  color:#78608f;
  line-height:1.35
}

.small {
  font-size:18px
}

.check-label {
  display:flex;
  align-items:start;
  gap:10px;
  font-size:21px;
  line-height:1.3
}

.check-label input {
  margin-top:3px
}

.draft-status {
  font-size:18px;
  color:#806297;
  margin-right:auto
}

.level-required {
  margin:0;
  font-size:20px;
  color:#986626
}

#toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,25px);
  padding:15px 22px;
  background:linear-gradient(#e8f9ff,#d5d4ff);
  color:var(--deep-blue);
  border:3px solid var(--border);
  box-shadow:inset 2px 2px #fff,4px 4px #231c45;
  max-width:calc(100vw - 30px);
  font-size:22px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:100
}

#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

#celebration {
  width:min(530px,calc(100vw - 36px));
  text-align:center;
  background:radial-gradient(ellipse at top,#7151b6,#32225c 70%);
  color:#fff8df;
  padding:43px 32px;
  border:4px solid var(--border);
  box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 6px #593894,7px 7px #231c45;
  overflow:hidden;
  animation:levelEntrance .35s steps(5,end)
}

#celebration .close-button {
  position:absolute;
  top:15px;
  right:15px;
  background:var(--pink);
  color:var(--border);
  z-index:2
}

#celebration .eyebrow {
  color:#c7ecff;
  margin-top:20px;
  font-size:8px
}

#celebration h2 {
  font-family:var(--pixel);
  font-size:29px;
  line-height:1.6;
  font-weight:400;
  color:var(--gold);
  margin:20px 0;
  text-shadow:3px 3px #6f397f,5px 5px #231c45
}

#celebration>p {
  font-size:23px;
  color:#e2d5ff
}

#celebration .button {
  margin-top:15px
}

.level-medallion {
  position:relative;
  color:var(--gold);
  margin:auto;
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  border:3px solid #fff0a8;
  background:#65409c;
  box-shadow:0 0 0 4px #231c45,0 0 0 7px #ff84c6,inset 0 0 25px #f4d48340;
  animation:glow 2s steps(4,end) infinite
}

.level-transition {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  font-family:var(--pixel);
  font-size:25px;
  margin:20px 0
}

.level-transition>span {
  color:#b6b3f0;
  font-size:22px
}

.level-transition>strong {
  font-weight:400;
  font-size:39px;
  color:#fff0a8;
  text-shadow:3px 3px #231c45
}

.level-sparkles {
  position:absolute;
  inset:0;
  pointer-events:none
}

.level-sparkles i {
  width:6px;
  height:6px;
  background:var(--gold);
  position:absolute;
  left:calc(5% + var(--i) * 6.8%);
  top:-20px;
  animation:fall 2.7s calc(var(--i) * -.23s) steps(18,end) infinite;
  opacity:.8
}

.level-sparkles i:nth-child(3n) {
  background:var(--pink)
}

.level-sparkles i:nth-child(3n+1) {
  background:var(--cyan)
}

@keyframes float {
  50% {
    transform:translate(8px,-15px);
    opacity:.35
  }
}

@keyframes travelerBob {
  50% {
    transform:translateY(-3px)
  }
}

@keyframes glow {
  50% {
    box-shadow:0 0 0 4px #231c45,0 0 0 7px #73d7ff,0 0 40px #ffeeb84d
  }
}

@keyframes levelEntrance {
  from {
    opacity:0;
    transform:translateY(18px) scale(.95)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes fall {
  to {
    transform:translateY(520px) rotate(90deg);
    opacity:0
  }
}

/* Reflow windows without shrinking reading text into dashboard labels. */
@media(min-width:1500px) {
  .site-shell {
    margin-top:38px
  }
  .hero {
    min-height:625px
  }
  .hero-copy {
    width:760px;
    padding:32px 34px 28px
  }
  .hero-kicker {
    margin:-32px -34px 26px
  }
  .hero h1 {
    font-size:32px
  }
  .home-body {
    grid-template-columns:minmax(0,1fr) 365px;
    gap:30px
  }
}

@media(max-width:1100px) {
  .topbar {
    gap:15px;
    padding:17px 18px;
    flex-wrap:wrap
  }
  .brand {
    font-size:21px;
    margin-right:auto
  }
  .topbar nav {
    order:3;
    width:100%;
    justify-content:center;
    margin:6px 0 0;
    gap:10px
  }
  .topbar nav a {
    flex:1;
    max-width:180px;
    font-size:9px
  }
  .account-button {
    max-width:200px
  }
  .hero-copy {
    width:71%
  }
  .hero h1 {
    font-size:26px
  }
  .hero p {
    font-size:22px
  }
  .world-stamp {
    right:2%;
    font-size:20px;
    padding:13px;
    bottom:65px
  }
  .world-stamp strong {
    font-size:20px
  }
  .home-body {
    grid-template-columns:minmax(0,1fr) 320px;
    gap:23px
  }
  .home-main {
    padding:18px
  }
  .section-title {
    padding:12px 10px;
    gap:10px
  }
  .section-title h2 {
    font-size:11px
  }
  .section-title .eyebrow {
    font-size:7px
  }
  .quest-tile {
    padding:19px 16px;
    gap:13px
  }
  .quest-grid {
    gap:18px
  }
  .quest-grid .quest-emblem {
    display:none
  }
  .quest-tile h3 {
    font-size:25px
  }
  .home-links {
    grid-template-columns:1fr;
    gap:12px
  }
  .destination {
    padding:13px
  }
  .guide-layout {
    gap:23px;
    grid-template-columns:200px minmax(0,1fr)
  }
}

@media(max-width:800px) {
  .site-shell {
    margin:18px auto;
    padding:0 15px
  }
  .game-content .hero-copy {
    min-height:0;
    background:
      linear-gradient(180deg,#fff9e700 0,#fff9e726 135px,#fff9e7ed 215px,#fff9e7fa 100%),
      var(--site-background,url('https://file.garden/arKmPAsX0cG3mOhA/Omnia/image_2026-09-25_113638094.png')) center 40% / cover no-repeat
  }
  .game-content .hero-copy h1 {
    margin-top:160px
  }
  .game-content .hero-copy>p {
    max-width:none
  }
  .topbar {
    padding:16px;
    gap:12px
  }
  .brand {
    font-size:20px
  }
  .brand small {
    font-size:13px;
    letter-spacing:.7px
  }
  .brand-mark {
    width:40px;
    height:42px
  }
  .topbar nav {
    gap:7px
  }
  .topbar nav a {
    font-size:8px;
    padding:12px 8px
  }
  .top-actions {
    gap:8px
  }
  .account-button {
    max-width:165px
  }
  .mode-bar {
    font-size:13px;
    padding:8px 10px;
    margin-left:4px;
    margin-right:4px
  }
  .mode-bar>span:not(.status-dot) {
    font-size:14px
  }
  .mode-bar .text-button {
    font-size:15px
  }
  .hero {
    min-height:530px;
    padding:34px 2px 38px
  }
  .hero-copy {
    width:86%;
    padding:26px 25px 23px
  }
  .hero-kicker {
    margin:-26px -25px 23px;
    padding:12px 17px;
    font-size:8px
  }
  .hero h1 {
    font-size:27px
  }
  .world-stamp {
    display:none
  }
  .home-body {
    grid-template-columns:1fr;
    padding-bottom:30px
  }
  .home-main {
    padding:20px
  }
  .section-title h2 {
    font-size:13px
  }
  .section-title .eyebrow {
    font-size:8px
  }
  .home-links {
    grid-template-columns:1fr 1fr
  }
  .home-side {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
  }
  .home-side>.section-title {
    grid-column:1/-1;
    margin:0;
    min-height:55px
  }
  .home-side .announcement-teaser {
    margin:0;
    padding:22px;
    align-self:start
  }
  .home-side h2 {
    font-size:13px
  }
  .home-side .tag {
    font-size:7px
  }
  .adventurer-grid {
    grid-template-columns:1fr 1fr;
    gap:23px
  }
  .page-heading {
    align-items:flex-start;
    padding:25px
  }
  .page-heading h1 {
    font-size:23px
  }
  .page-heading .button {
    white-space:nowrap;
    font-size:8px
  }
  .community-grid {
    grid-template-columns:1fr
  }
  .guide-layout {
    grid-template-columns:1fr;
    gap:23px
  }
  .guide-index {
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:4px 20px;
    padding:18px
  }
  .guide-index .eyebrow {
    width:100%
  }
  .guide-index>a {
    font-size:20px;
    padding:9px 0
  }
  .profile-editor {
    grid-template-columns:1fr 270px;
    gap:20px
  }
  .editor-preview {
    padding:16px 10px
  }
  .hero-footnote {
    font-size:16px
  }
  footer {
    flex-wrap:wrap;
    gap:13px
  }
  footer>div {
    width:100%;
    margin:7px 0 0;
    justify-content:space-between;
    gap:12px
  }
}

@media(max-width:560px) {
  .site-shell {
    margin:12px auto;
    padding:0 11px
  }
  .topbar {
    padding:13px 10px 15px;
    gap:12px 8px
  }
  .brand {
    font-size:17px;
    gap:8px;
    letter-spacing:-.8px
  }
  .brand-mark {
    width:34px;
    height:36px
  }
  .brand-mark svg {
    width:24px
  }
  .brand small {
    font-size:11px;
    letter-spacing:.2px;
    margin-top:7px
  }
  .top-actions .icon-button {
    display:none
  }
  .account-button {
    font-size:17px;
    max-width:117px;
    padding:8px
  }
  .topbar nav {
    gap:5px;
    margin-top:3px
  }
  .topbar nav a {
    font-size:6px;
    padding:12px 3px;
    min-width:0;
    line-height:1.6
  }
  .mode-bar {
    padding:7px 9px;
    font-size:13px;
    margin-top:10px
  }
  .mode-bar>span:not(.status-dot) {
    display:none
  }
  .mode-bar .text-button {
    font-size:14px
  }
  .hero {
    min-height:0;
    padding:33px 0 35px
  }
  .hero-copy {
    width:100%;
    padding:23px 20px 21px
  }
  .hero-copy:after {
    inset:6px
  }
  .hero-kicker {
    margin:-23px -20px 22px;
    padding:11px 15px;
    font-size:7px;
    gap:8px
  }
  .tiny-cross {
    font-size:23px
  }
  .hero h1 {
    font-size:clamp(19px,5.2vw,25px);
    line-height:1.65;
    letter-spacing:-.7px;
    margin-bottom:17px
  }
  .hero p {
    font-size:21px;
    line-height:1.3;
    margin-bottom:22px
  }
  .hero-actions {
    gap:12px
  }
  .hero-actions .button {
    font-size:8px;
    padding:12px 11px;
    min-height:47px
  }
  .hero-actions .button svg {
    width:17px
  }
  .hero-footnote {
    margin-top:20px;
    font-size:15px;
    line-height:1.25
  }
  .hero .firefly {
    display:none
  }
  .home-body {
    gap:24px;
    padding-bottom:28px
  }
  .home-main {
    padding:13px
  }
  .section-title {
    padding:12px 10px;
    gap:9px;
    flex-wrap:wrap;
    margin-bottom:18px
  }
  .section-title h2 {
    font-size:11px;
    line-height:1.75
  }
  .section-title .eyebrow {
    font-size:6px
  }
  .inline-link {
    font-size:18px;
    gap:5px
  }
  .quest-tile {
    padding:17px 12px;
    gap:11px;
    flex-wrap:wrap
  }
  .quest-emblem {
    width:35px;
    height:43px;
    border-width:2px
  }
  .quest-emblem svg {
    width:21px
  }
  .quest-tile h3 {
    font-size:25px
  }
  .quest-tile p {
    font-size:20px
  }
  .quest-meta {
    font-size:16px;
    gap:7px
  }
  .quest-meta .tag {
    font-size:6px;
    padding:5px
  }
  .quest-open {
    padding:7px;
    position:absolute;
    right:11px;
    bottom:13px
  }
  .quest-open svg {
    width:16px
  }
  .quest-bottom {
    gap:7px 12px;
    padding-right:27px
  }
  .reward {
    font-size:17px
  }
  .quest-status {
    font-size:16px
  }
  .home-links {
    grid-template-columns:1fr;
    gap:13px
  }
  .destination {
    gap:10px
  }
  .destination>svg:first-child {
    width:25px
  }
  .destination strong {
    font-size:23px
  }
  .destination small {
    font-size:18px
  }
  .home-side {
    grid-template-columns:1fr;
    gap:18px
  }
  .home-side h2 {
    font-size:12px
  }
  .home-side .announcement-teaser {
    margin:4px 0 0;
    padding:23px
  }
  .home-side .create-card {
    min-height:310px;
    padding:24px
  }
  .create-card h3 {
    font-size:12px
  }
  .page-heading {
    margin-top:25px;
    padding:24px 21px;
    display:block
  }
  .page-heading h1 {
    font-size:23px;
    line-height:1.65;
    overflow-wrap:anywhere
  }
  .page-heading p {
    font-size:22px
  }
  .page-heading>.button {
    margin-top:20px
  }
  .page-heading .eyebrow {
    font-size:7px
  }
  .subnav {
    gap:6px;
    padding:10px;
    margin-top:20px
  }
  .subnav a {
    font-size:19px;
    padding:8px 10px
  }
  .board-tools {
    gap:15px 12px;
    padding:17px
  }
  .search-field {
    flex-basis:100%
  }
  .select-field {
    min-width:120px;
    flex:1
  }
  .board-tools label {
    font-size:19px
  }
  .board-caption {
    margin-top:20px;
    font-size:17px;
    padding:10px 11px
  }
  .board-caption span:last-child {
    max-width:145px;
    text-align:right;
    font-size:16px
  }
  .quest-grid {
    grid-template-columns:1fr;
    gap:17px;
    padding-bottom:30px
  }
  .quest-grid .quest-emblem {
    display:grid
  }
  .quest-grid .quest-tile {
    min-height:210px
  }
  .quest-grid .quest-tile h3 {
    font-size:27px
  }
  .quest-grid .quest-tile p {
    font-size:21px
  }
  .adventurer-grid {
    grid-template-columns:1fr;
    max-width:430px;
    margin:auto;
    gap:25px
  }
  .community-grid .paper-card {
    padding:23px
  }
  .feature-banner {
    padding:21px;
    gap:15px;
    align-items:flex-start
  }
  .feature-banner h3 {
    font-size:11px
  }
  .feature-banner p {
    font-size:21px
  }
  .feature-banner svg {
    width:26px
  }
  .paper-card-bottom {
    flex-wrap:wrap
  }
  .archive-row {
    gap:13px;
    padding:20px 16px;
    flex-wrap:wrap
  }
  .archive-row>div:nth-child(2) {
    min-width:180px
  }
  .archive-row>span {
    margin-left:48px
  }
  .archive-row h3 {
    font-size:25px
  }
  .archive-row p {
    font-size:21px
  }
  .archive-row .eyebrow {
    font-size:7px
  }
  .posts-list .paper-card {
    padding:22px
  }
  .paper-card h2 {
    font-size:14px
  }
  .paper-card p {
    font-size:22px
  }
  .guide-layout {
    gap:25px
  }
  .guide-content {
    padding:21px
  }
  .guide-section h2 {
    font-size:14px
  }
  .guide-content .guide-section p {
    font-size:22px
  }
  .lore-intro {
    padding:19px
  }
  .lore-intro p {
    font-size:22px
  }
  .rank-ladder>div {
    font-size:21px;
    padding:11px 9px
  }
  .profile-editor {
    display:flex;
    flex-direction:column-reverse
  }
  .editor-preview {
    position:static;
    max-width:320px;
    width:100%;
    margin:auto
  }
  .editor-preview>p {
    display:none
  }
  .editor-preview .adventurer-card {
    min-height:0
  }
  .profile-editor .form-divider {
    font-size:7px
  }
  dialog,dialog.wide {
    padding:23px 19px;
    width:calc(100vw - 24px);
    max-height:93vh
  }
  .modal-heading {
    gap:10px;
    margin:-9px -5px 23px;
    padding:11px
  }
  .modal-heading h2 {
    font-size:14px;
    line-height:1.7
  }
  .modal-heading .eyebrow {
    font-size:7px
  }
  .modal-actions {
    flex-wrap:wrap;
    gap:13px
  }
  .modal-actions .draft-status {
    width:100%
  }
  .quest-story p,.archive-prose p {
    font-size:23px
  }
  .quest-modal-meta {
    gap:9px
  }
  .objective {
    padding:17px
  }
  .empty {
    padding:32px 18px
  }
  .empty p {
    font-size:22px
  }
  .quest-grid>.empty {
    min-height:260px
  }
  #celebration {
    padding:36px 20px
  }
  #celebration h2 {
    font-size:25px
  }
  .level-transition {
    gap:20px
  }
  footer {
    padding:19px 16px;
    font-size:18px;
    gap:11px
  }
  footer>div {
    gap:10px;
    font-size:17px;
    flex-wrap:wrap
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .firefly,.level-sparkles {
    display:none
  }
}

.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

.reduce-motion .firefly,.reduce-motion .level-sparkles {
  display:none
}