/*
 * The KichiCreator hub pages. The engine website's colours (night blue and lamp gold on
 * cool paper, mmorpgmaker site/style.css), with the game's own tiles and animals as the
 * pixel-RPG trim (hub-plans.md 11). Light and dark follow the device.
 */
@font-face { font-family: 'Press Start 2P'; src: url(assets/font/press-start-2p-latin-400-normal.woff2) format('woff2'); font-display: swap; }

:root {
  --bg: #f3f4f7; --surface: #ffffff; --surface-2: #e8ebf1; --ink: #141823; --ink-2: #434b5c; --ink-3: #5a6274;
  --rule: #d5d9e2; --rule-2: #b6bdcb; --link: #7f5b0c; --lamp: #e7c35a; --on-lamp: #17130b;
  --night: #0e1016; --night-2: #1b1f2a; --night-rule: #2f3545; --on-night: #e8ebf2; --on-night-2: #aab1c2;
  --good: #1f7a45; --good-soft: #dcf2e4; --bad: #b3261e; --bad-soft: #fbe3e1; --warn: #8a5a00; --warn-soft: #fbefd2;
  --busy: #2f5d86; --busy-soft: #e3ebf3; --focus: #2563c9; --shadow: rgb(10 14 24 / 0.14);
  --font-pixel: 'Press Start 2P', ui-monospace, monospace;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --radius: 8px; --page: 74rem; --side: 13.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1218; --surface: #161a23; --surface-2: #1d222d; --ink: #e8ebf2; --ink-2: #b9c0ce; --ink-3: #959daf;
    --rule: #282e3a; --rule-2: #3a4251; --link: #e7c35a; --night: #07080c; --night-2: #141821; --night-rule: #262c39;
    --good: #6fd39a; --good-soft: #13301f; --bad: #ff8a80; --bad-soft: #3a1714; --warn: #f2c66b; --warn-soft: #3a2d0f;
    --busy: #93bce2; --busy-soft: #172333; --focus: #8ab4ff; --shadow: rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font-body); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
code, pre { font-family: var(--font-mono); font-size: .9em; }
.pixel { font-family: var(--font-pixel); font-weight: 400; letter-spacing: .02em; line-height: 1.45; font-size: clamp(1.05rem, .8rem + 1.3vw, 1.75rem); }
.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
.center { text-align: center; }
.lede { font-size: 1.125rem; color: var(--ink-2); max-width: 46rem; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: var(--surface); padding: 8px 12px; }
.wrap { width: min(var(--page), 100% - 2rem); margin-inline: auto; }
.wrap.narrow { width: min(46rem, 100% - 2rem); }
.noscript { padding: 2rem; }

/* Icons from the Tabler set, coloured by the text; item pictures from the game. */
.ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; vertical-align: -0.2em; }
.item-ico { display: inline-block; width: 32px; height: 32px; flex: none; background-image: url(assets/items.png); background-size: 512px 512px; image-rendering: pixelated; vertical-align: middle; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 2.5rem; padding: .45rem 1rem; border-radius: var(--radius); border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--lamp); border-color: #b8952f; color: var(--on-lamp); }
.btn.primary:hover { background: #f0d277; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.small { min-height: 2rem; padding: .25rem .65rem; font-size: .875rem; }
.btn.big { min-height: 3rem; padding: .6rem 1.4rem; font-size: 1.05rem; }
.btn.block { display: flex; width: 100%; }
.linkish { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .75rem; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .3em; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; vertical-align: middle; margin-left: .35rem; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.busy { background: var(--busy-soft); color: var(--busy); }
.badge.soft { background: var(--surface-2); color: var(--ink-2); }

/* Cards, forms, tables */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 2px var(--shadow); margin-bottom: 1rem; min-width: 0; }
.card.soft { background: var(--surface-2); box-shadow: none; }
.card.empty { text-align: center; padding: 2rem 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.grid-2 > .card { margin: 0; }
.stack { display: flex; flex-direction: column; gap: .9rem; }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field.check { flex-direction: row; align-items: flex-start; gap: .55rem; }
.field.check input { margin-top: .3rem; }
.field label { font-weight: 600; }
.hint { font-size: .85rem; color: var(--ink-3); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 6px; padding: .5rem .65rem; min-height: 2.5rem; width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--lamp); }
input[type=range] { padding: 0; border: 0; background: none; accent-color: #b8952f; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.inline-form input { flex: 1 1 12rem; width: auto; }
.form-error, .dlg-error { color: var(--bad); font-weight: 600; min-height: 1.2em; margin: .25rem 0 0; }
.form-error:empty, .dlg-error:empty { display: none; }
.table-wrap { position: relative; overflow-x: auto; margin-bottom: 1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); background: var(--surface-2); }
.table td.actions { text-align: right; white-space: nowrap; }
.table td.actions .btn + .btn { margin-left: .35rem; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li + li { margin-top: .35rem; }
.notice { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: .55rem .8rem; font-weight: 600; }
.notice.bad { background: var(--bad-soft); color: var(--bad); }
.hint-good { color: var(--good); font-weight: 700; }
.code-block { background: var(--night); color: var(--on-night); padding: .75rem 1rem; border-radius: 8px; overflow-x: auto; margin: 0; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: .75rem 0; }
dl.facts dt { color: var(--ink-3); }
dl.facts dd { margin: 0; }

/* Notices */
#toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 1rem); max-width: min(34rem, calc(100% - 2rem)); background: var(--night-2); color: var(--on-night); padding: .7rem 1rem; border-radius: 10px; box-shadow: 0 8px 24px var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: #5c1612; }
#toast.good { background: #14432a; }

/* Dialogs */
.overlay { position: fixed; inset: 0; background: rgb(5 7 12 / .55); display: grid; place-items: center; padding: 1rem; z-index: 40; overflow-y: auto; }
.dlg { width: min(28rem, 100%); background: var(--surface); border-radius: 14px; padding: 1.25rem; box-shadow: 0 20px 50px rgb(0 0 0 / .35); max-height: calc(100vh - 2rem); overflow-y: auto; }
.dlg.wide { width: min(38rem, 100%); }
.dlg-title { font-size: 1.2rem; }
.dlg-form { display: flex; flex-direction: column; gap: .85rem; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }


/* ---------------------------------------------------------------- the website */
.logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--lamp); text-decoration: none; font-family: var(--font-pixel); font-size: .95rem; white-space: nowrap; }
.logo-cat { width: 62px; height: 62px; margin: -8px -6px -8px -4px; flex: none; image-rendering: pixelated; }
.site-head { background: var(--night); color: var(--on-night); position: relative; z-index: 5; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; }
.site-nav a { color: var(--on-night-2); text-decoration: none; font-weight: 600; }
.site-nav a:hover, .site-nav a[aria-current=page] { color: var(--on-night); }
.site-nav a[aria-current=page] { text-decoration: underline; text-decoration-color: var(--lamp); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.site-nav .btn { color: var(--on-lamp); }
.nav-toggle { display: none; background: none; border: 1px solid var(--night-rule); color: var(--on-night); border-radius: 8px; width: 2.75rem; height: 2.75rem; font-size: 1.25rem; cursor: pointer; }
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .head-row { flex-wrap: wrap; }
  /* The phone menu opens in the page's flow, so it pushes the page down rather than covering it. */
  .site-nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 0 1rem; border-top: 1px solid var(--night-rule); }
  .site-nav a { padding: .7rem .25rem; }
  .site-nav .btn { margin-top: .5rem; }
  body.nav-open .site-nav { display: flex; }
}

/* The game's grass, with Kichi and friends walking along it. */
.grass-strip { position: relative; height: 64px; background: url(assets/strip-grass.png) 0 0 / 384px 64px repeat-x; image-rendering: pixelated; overflow: hidden; }
.walkers { position: absolute; inset: 0; pointer-events: none; }
.walker { position: absolute; bottom: 0; left: 0; image-rendering: pixelated; background-repeat: no-repeat; background-position: var(--x0) var(--y);
  animation: walk-frames var(--ms) steps(var(--steps)) infinite, walk-across var(--trip) linear infinite; animation-delay: 0s, var(--delay); }
@keyframes walk-frames { from { background-position: var(--x0) var(--y); } to { background-position: var(--x1) var(--y); } }
@keyframes walk-across { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 20px)); } }
@media (prefers-reduced-motion: reduce) {
  .walker { animation: none; }
  .walker:nth-child(1) { transform: translateX(8vw); } .walker:nth-child(2) { transform: translateX(46vw); } .walker:nth-child(3) { transform: translateX(80vw); }
}
.path-strip { height: 32px; background: url(assets/strip-path.png) 0 0 / 64px 32px repeat-x; image-rendering: pixelated; }

.site-main, .bare-main { min-height: 50vh; padding: 2.5rem 0 3rem; }
.site-main:focus, .panel-main:focus, .bare-main:focus { outline: none; }
.hero { padding: 0 0 2rem; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: center; }
.hero-shot { margin: 0; }
.hero-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 4px solid var(--night-2); box-shadow: 0 12px 32px var(--shadow); image-rendering: pixelated; }
.hero-shot figcaption { margin-top: .4rem; }
@media (max-width: 860px) { .hero-row { grid-template-columns: minmax(0, 1fr); } }
.band { background: var(--surface-2); padding: 2.5rem 0; margin: 1rem 0; border-block: 1px solid var(--rule); }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.feature { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem; min-width: 0; }
.feature .item-ico { margin-bottom: .5rem; }
.feature p { color: var(--ink-2); margin: 0; }
.steps-section { padding: 2rem 0 1rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; padding: 0; counter-reset: s; list-style: none; }
.steps li { counter-increment: s; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1rem 1rem 3.4rem; position: relative; display: flex; flex-direction: column; min-width: 0; }
.steps li::before { content: counter(s); position: absolute; left: 1rem; top: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--lamp); color: var(--on-lamp); display: grid; place-items: center; font-family: var(--font-pixel); font-size: .7rem; }
.steps span { color: var(--ink-2); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.shots figure { margin: 0; min-width: 0; }
.shots img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); }
.shots figcaption { color: var(--ink-3); font-size: .9rem; margin-top: .35rem; }

/* Plans */
.plan-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 1rem; margin: 1.25rem 0; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: .4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem 1rem 1rem; min-width: 0; }
.plan-card.popular, .plan-card.current { border: 2px solid #b8952f; }
.plan-card .badge { position: absolute; top: -.75rem; left: 1rem; margin: 0; background: var(--lamp); color: var(--on-lamp); }
.plan-card h3 { font-family: var(--font-pixel); font-weight: 400; font-size: .85rem; margin: 0; }
.price { display: flex; align-items: baseline; gap: .2rem; flex-wrap: wrap; margin: 0; }
.price .amount { font-size: 1.9rem; font-weight: 800; }
.price .per { color: var(--ink-3); }
.plan-facts { list-style: none; padding: 0; margin: .25rem 0 .75rem; flex: 1; }
.plan-facts li { padding: .2rem 0; border-bottom: 1px dashed var(--rule); }
.plan-row.compact .plan-facts { margin-bottom: .5rem; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg-btn { border: 0; background: none; padding: .5rem 1rem; font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; text-decoration: none; min-height: 2.5rem; display: inline-flex; align-items: center; }
.seg-btn + .seg-btn { border-left: 1px solid var(--rule-2); }
.seg-btn[aria-checked=true], .seg-btn[aria-selected=true] { background: var(--night-2); color: var(--on-night); }
.builder { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
@media (max-width: 760px) { .builder { grid-template-columns: minmax(0, 1fr); } }
.slider { margin: 1rem 0; }
.slider-head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.slider-val { font-variant-numeric: tabular-nums; }
.builder-out { background: var(--surface-2); border-radius: 12px; padding: 1.25rem; align-self: start; }
.built-price .amount { font-size: 2.4rem; font-weight: 800; }
.built-price .per { color: var(--ink-3); }
.price-parts { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; margin: 1rem 0; font-size: .95rem; }
.price-parts dt { color: var(--ink-2); }
.price-parts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.faq { margin-top: 2.5rem; }
.faq-item { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: .75rem 1rem; margin-bottom: .5rem; }
.faq-item summary { font-weight: 700; cursor: pointer; }
.faq-item p { margin: .6rem 0 0; color: var(--ink-2); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.game-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.game-card-head h2 { margin: 0; }
.auth { display: grid; place-items: center; }
.auth-card { width: min(27rem, 100%); }
.chosen { display: flex; align-items: center; gap: .5rem; background: var(--surface-2); border-radius: 8px; padding: .5rem .75rem; }
.prose li + li { margin-top: .5rem; }
.site-foot { background: var(--night); color: var(--on-night-2); margin-top: 2rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0 2rem; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.foot-row a:not(.logo) { color: var(--on-night-2); }
.foot-row .muted { color: var(--on-night-2); margin: .5rem 0 0; }
.error-card { margin-top: 2rem; }

/* ---------------------------------------------------------------- the hub */
.panel-head { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0 1rem; background: var(--night); color: var(--on-night); position: sticky; top: 0; z-index: 10; }
.who { display: flex; flex-direction: column; margin-left: auto; min-width: 0; text-align: right; line-height: 1.25; }
.who-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-mail { color: var(--on-night-2); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-head .btn { background: transparent; color: var(--on-night); border-color: var(--night-rule); }
.panel-body { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: calc(100vh - 3.5rem); }
.side-nav { background: var(--surface); border-right: 1px solid var(--rule); padding: 1rem .6rem; display: flex; flex-direction: column; gap: .15rem; }
.side-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a[aria-current=page] { background: var(--night-2); color: var(--on-night); }
.side-nav a[aria-current=page] .ico { color: var(--lamp); }
.panel-main { padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem; min-width: 0; }
.page { max-width: 64rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.game-head .muted { text-decoration: none; font-size: .95rem; }
@media (max-width: 820px) {
  .panel-body { grid-template-columns: minmax(0, 1fr); }
  .side-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: .4rem .6rem; gap: .25rem; position: sticky; top: 3.5rem; z-index: 9; }
  .side-nav a { flex: none; padding: .45rem .65rem; }
  .who-mail { display: none; }
}
@media (max-width: 520px) {
  .hide-narrow { display: none; }
  .panel-head { gap: .6rem; }
  .panel-head .logo span:not(.logo-cat) { display: none; }
}

.game-list { display: flex; flex-direction: column; gap: .75rem; }
.game-row { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; margin: 0; }
.game-row:hover { border-color: var(--rule-2); }
.game-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.game-row-main h2 { margin: 0; }
.game-row-main .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-row-stats { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .game-row { flex-wrap: wrap; } .game-row-stats { justify-content: flex-start; width: 100%; } .game-row > .ico { display: none; } }

.servers { margin-bottom: .75rem; }
.tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.tabs a { display: flex; align-items: center; gap: .45rem; padding: .6rem .85rem; color: var(--ink-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; flex: none; }
.tabs a[aria-current=page] { color: var(--ink); border-bottom-color: var(--lamp); }
.state-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.state-line .badge { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat-box { background: var(--surface-2); border-radius: 10px; padding: .65rem .8rem; display: flex; flex-direction: column; min-width: 0; }
.stat-box strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.command-tray { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.command-tray:empty { display: none; }
.cmd { display: flex; align-items: center; gap: .6rem; background: var(--busy-soft); color: var(--busy); padding: .5rem .8rem; border-radius: 8px; font-weight: 600; flex-wrap: wrap; }
.cmd.done { background: var(--good-soft); color: var(--good); }
.cmd.failed { background: var(--bad-soft); color: var(--bad); }
.spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.log { background: var(--night); color: #d6dbe6; border-radius: 12px; padding: .9rem 1rem; height: min(60vh, 32rem); overflow: auto; margin: 0; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.log time { color: #7f8aa3; }
.log-line.warn { color: #f2c66b; }
.log-line.error { color: #ff8a80; }
.links a { font-weight: 600; }
.domain-head, .machine-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .5rem; }
.domain-head h2, .machine-head h2 { margin: 0; overflow-wrap: anywhere; }
.machine-head > div { flex: 1; min-width: 0; }
.records code { overflow-wrap: anywhere; }
.enrol-code { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; background: var(--surface-2); padding: .6rem .8rem; border-radius: 8px; text-align: center; overflow-wrap: anywhere; letter-spacing: .04em; }
.usage { margin-bottom: .8rem; }
.usage-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; flex-wrap: wrap; }
.meter { height: .55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: .3rem; }
.meter > div { height: 100%; background: var(--good); }
.meter.warn > div { background: var(--warn); }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.timeline li { position: relative; padding: .4rem 0 .9rem 1.1rem; display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: .8rem; width: 10px; height: 10px; border-radius: 50%; background: var(--lamp); }
.timeline time { color: var(--ink-3); font-size: .85rem; min-width: 8.5rem; }
.roles { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: .75rem 0 0; }
.roles dt { font-weight: 700; }
.roles dd { margin: 0; color: var(--ink-2); }
.codes { columns: 2; padding-left: 1.2rem; }
.secret { font-size: 1rem; background: var(--surface-2); padding: .15rem .4rem; border-radius: 4px; overflow-wrap: anywhere; }
.setup-steps { padding-left: 1.2rem; margin: 0; }
.setup-steps li + li { margin-top: .5rem; }
.choose-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .75rem; margin: 1rem 0; }
.choose { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .6rem; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: .8rem 1rem; cursor: pointer; min-width: 0; }
.choose.on { border: 2px solid #b8952f; }
.choose-name { font-weight: 700; }
.choose-price { font-weight: 700; white-space: nowrap; }
.choose-what { grid-column: 2 / 4; }
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1rem 0 1.5rem; }
.pay-row .inline { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.pay-row .inline select { width: auto; }
.pay-total { margin: 0; font-weight: 700; }
.narrow-card { max-width: 34rem; }
.slug-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.slug-row input { flex: 1 1 8rem; width: auto; }
.slug-status.good { color: var(--good); font-weight: 700; }
.slug-status.bad { color: var(--bad); font-weight: 700; }
.build-card { max-width: 36rem; text-align: center; margin-inline: auto; }
/* Kichi running: Tuxedo-Run.png, 6 frames of 48 px, shown at 2x. */
.build-walk { height: 96px; margin: 1rem auto; width: 96px; background: url(assets/kichi/Tuxedo-Run.png) 0 0 / 576px 96px no-repeat; image-rendering: pixelated; animation: build-cat .78s steps(6) infinite; }
@keyframes build-cat { from { background-position: 0 0; } to { background-position: -576px 0; } }
.progress { height: .8rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--lamp); transition: width .4s; }
.build-step { margin-top: .75rem; font-weight: 600; }
.big-buttons { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.25rem 0; }
.download-list, .machine-list, .domain-list { display: flex; flex-direction: column; }
.bare-main { padding-top: 2rem; }
.server-where:not(:empty)::before { content: ' · '; white-space: pre; }
.plan-row.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.plan-row.compact .price .amount { font-size: 1.5rem; }
.section-title { margin-top: 1.75rem; }

/* ================================================================ cute, professional layer
 * Soft pastel accents on the engine site's night blue and lamp gold; the game's sprites and
 * tiles, put together in the page, for the covers and the scenes. */
:root { --pink: #ff8fb1; --pink-soft: #ffe3ec; --mint: #2f9e72; --mint-soft: #dcf7ec; --sky: #1f6fb2; --sky-soft: #e0f2ff; --lilac: #5b3fd1; --lilac-soft: #ece6ff; --grey-soft: #e9ebf1; --grey: #4a5266; --radius: 12px; }
@media (prefers-color-scheme: dark) { :root { --mint: #7ee0b3; --mint-soft: #123527; --sky: #8fcbff; --sky-soft: #11283d; --lilac: #c2b2ff; --lilac-soft: #241c45; --grey-soft: #232937; --grey: #b4bccc; --pink-soft: #3a1f2a; } }

/* Sprites from the game's sheets (src/sprites.js), walking or standing in place. */
.sprite { display: inline-block; flex: none; image-rendering: pixelated; background-repeat: no-repeat; background-position: var(--x0) var(--y); animation: walk-frames var(--ms) steps(var(--steps)) infinite; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .sprite { animation: none; } }

.btn { border-radius: 12px; transition: transform .08s, box-shadow .15s, border-color .15s; }
.btn.primary { box-shadow: 0 3px 0 #b8952f; }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #b8952f; }
.card, .feature, .plan-card, .faq-item, .table-wrap { border-radius: 16px; }

/* Hero: a sky over the grass, Kichi on the picture's frame. */
.hero.sky { background: linear-gradient(180deg, #bfe6ff 0%, #e6f4ff 55%, var(--bg) 100%); padding: 3rem 0 2.5rem; margin-top: -2.5rem; }
@media (prefers-color-scheme: dark) { .hero.sky { background: linear-gradient(180deg, #0f2140 0%, #121a2b 60%, var(--bg) 100%); } }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: .1rem .8rem .1rem .25rem; font-weight: 700; font-size: .85rem; color: var(--ink-2); margin-bottom: 1rem; }
.hero-frame { position: relative; margin-top: 3rem; }
.hero-frame img { border: 4px solid var(--night-2); box-shadow: 0 0 0 4px #fff, 0 14px 36px var(--shadow); border-radius: 16px; }
.hero-cat { position: absolute; right: 1.25rem; top: -60px; display: flex; align-items: flex-end; gap: .25rem; }
.bubble { position: relative; background: #fff; color: #1b1f2a; font-weight: 800; font-size: .85rem; padding: .35rem .7rem; border-radius: 12px; box-shadow: 0 2px 0 #d5d9e2; margin-bottom: 2.4rem; white-space: nowrap; }
.bubble::after { content: ''; position: absolute; right: -6px; bottom: 6px; border: 7px solid transparent; border-left-color: #fff; border-right: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.section-head h2 { margin: 0; }
.games-section { padding: 1rem 0 2rem; }
.feature-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--pink-soft); margin-bottom: .5rem; }
.features .feature:nth-child(4n+2) .feature-ico { background: var(--sky-soft); }
.features .feature:nth-child(4n+3) .feature-ico { background: var(--mint-soft); }
.features .feature:nth-child(4n+4) .feature-ico { background: var(--lilac-soft); }
.feature .feature-ico .item-ico { margin: 0; }
.plan-row.six { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.plan-card.free { border: 2px solid var(--mint); }
.plan-card .badge.free { background: var(--mint); color: #fff; }
.cta-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; background: linear-gradient(135deg, #ffe9a8, #ffd1e1); color: #1b1f2a; border-radius: 22px; padding: 1.5rem 2rem; margin: 2.5rem 0 1rem; }
.cta-banner h2 { margin: 0 0 .25rem; }
.cta-banner p { margin: 0; color: #434b5c; }
.cta-sprites { display: flex; gap: .25rem; }

/* Status: in development, closed beta (CBT), open beta (OBT), released. */
.status { display: inline-flex; align-items: center; padding: .15rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.st-dev { background: var(--grey-soft); color: var(--grey); }
.st-cbt { background: var(--lilac-soft); color: var(--lilac); }
.st-obt { background: var(--sky-soft); color: var(--sky); }
.st-rel { background: var(--mint-soft); color: var(--mint); }
.version-chip { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 8px; font: 700 .75rem var(--font-mono); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .75rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }

/* The showcase */
.showcase-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fchip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; min-height: 2.25rem; }
.fchip[aria-checked=true], .fchip[aria-selected=true] { background: var(--night-2); border-color: var(--night-2); color: var(--on-night); }
.fcount { font-size: .75rem; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; padding: 0 .45rem; }
.fchip[aria-checked=true] .fcount { background: var(--lamp); color: var(--on-lamp); }
.showcase-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.showcase-tools select { width: auto; }
.showcase-tools input { width: min(16rem, 100%); }
.game-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.1rem; }
.game-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 1px 2px var(--shadow); transition: transform .15s, box-shadow .15s; min-width: 0; }
.game-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--shadow); }
.tile-cover { position: relative; aspect-ratio: 16 / 9; }
.tile-tags { position: absolute; top: .6rem; left: .6rem; right: .6rem; display: flex; justify-content: space-between; gap: .5rem; pointer-events: none; }
.tile-tags .version-chip { background: rgb(255 255 255 / .9); color: #1b1f2a; }
.tile-body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.tile-body h3 { margin: 0; font-size: 1.1rem; }
.tile-maker { margin: 0; }
.tile-tagline { margin: 0; color: var(--ink-2); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.playing { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--ink-3); }
.playing .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rule-2); }
.playing.on { color: var(--mint); }
.playing.on .dot { background: #2fbf7f; box-shadow: 0 0 0 3px rgb(47 191 127 / .25); }
.platforms { display: inline-flex; gap: .3rem; color: var(--ink-3); }
.empty-note:empty { display: none; }

/* Covers: the makers' picture, or the game's tiles with its sprite. */
.cover { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--surface-2); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover.drawn { image-rendering: pixelated; }
.cover.theme-grass { background: url(assets/strip-grass.png) 0 0 / 384px 64px repeat; }
.cover.theme-water { background: url(assets/tile-water.png) 0 0 / 64px 64px repeat; }
.cover.theme-stone { background: url(assets/tile-stone.png) 0 0 / 64px 64px repeat; }
.cover.theme-path { background: url(assets/strip-path.png) 0 0 / 128px 64px repeat; }
.cover.theme-paving { background: url(assets/tile-paving.png) 0 0 / 64px 64px repeat; }
.cover-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgb(255 255 255 / .35), transparent 60%), linear-gradient(180deg, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .35)); }
.cover-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); }
.cover-stage::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 4%; height: 10%; border-radius: 50%; background: rgb(0 0 0 / .25); z-index: -1; }
.cover-title { position: absolute; left: .75rem; right: .75rem; bottom: .6rem; color: #fff; font-size: .8rem; text-shadow: 2px 0 #1b1f2a, -2px 0 #1b1f2a, 0 2px #1b1f2a, 0 -2px #1b1f2a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover.big { height: clamp(200px, 30vw, 340px); }
.cover.big .cover-title { font-size: 1.1rem; left: max(1rem, (100% - var(--page)) / 2); }

/* A game's page */
.site-main > .game-page { margin-top: -2.5rem; }
.gp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; padding: 1.5rem 0 1rem; }
.gp-title { min-width: 0; flex: 1 1 22rem; }
.gp-title h1 { margin: .4rem 0 .2rem; }
.gp-title .lede { margin: .5rem 0 .75rem; }
.gp-badges { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.gp-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.gp-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.gp-body { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .gp-body { grid-template-columns: minmax(0, 1fr); } .gp-actions { align-items: flex-start; } .gp-links { justify-content: flex-start; } }
.gp-stats { display: flex; flex-direction: column; gap: .7rem; }
.gp-stat { display: flex; flex-direction: column; }
.gp-stat strong { overflow-wrap: anywhere; }
.gp-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .6rem; }
.gp-shot { padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: none; }
.gp-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gp-big { display: block; width: 100%; border-radius: 10px; }
.updates { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.updates li { border-left: 3px solid var(--lamp); padding-left: .9rem; }
.upd-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.updates p { margin: 0; color: var(--ink-2); }
.made-with { display: flex; gap: .75rem; align-items: center; }
.made-with p { margin: .2rem 0 .5rem; }

/* The Game page tab (the profile editor) */
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.25rem; align-items: start; }
.profile-preview { position: sticky; top: 4.5rem; }
@media (max-width: 1100px) { .profile-layout { grid-template-columns: minmax(0, 1fr); } .profile-preview { position: static; max-width: 20rem; } }
.profile-layout .card { margin: 0; }
.field .label { font-weight: 600; }
.field > label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.field > label > input, .field > label > select, .field > label > textarea { font-weight: 400; }
.grid-2.tight { gap: .75rem; }
.check-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.check-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--rule-2); border-radius: 999px; padding: .25rem .7rem; font-size: .9rem; font-weight: 600; cursor: pointer; }
.check-chip:has(input:checked) { background: var(--sky-soft); border-color: var(--sky); color: var(--sky); }
.cover-edit { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 640px) { .cover-edit { grid-template-columns: minmax(0, 1fr); } }
.cover-preview { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.shot-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .6rem; }
.shot-thumb { display: flex; flex-direction: column; gap: .3rem; }
.shot-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; }
.shot-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; aspect-ratio: 16 / 10; border: 2px dashed var(--rule-2); border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.upd-edit { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.upd-row { width: 100%; display: flex; flex-direction: column; gap: .4rem; padding: .75rem; border: 1px solid var(--rule); border-radius: 12px; }
.upd-fields { display: flex; gap: .4rem; flex-wrap: wrap; }
.upd-fields input { flex: 1 1 10rem; width: auto; }
.upd-fields input.upd-version { flex: 0 1 7rem; }
.switch-row { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.switch-row input { margin-top: .3rem; width: 1.2rem; height: 1.2rem; }
.sticky-save { position: sticky; bottom: 0; background: var(--bg); padding: .75rem 0; margin: 0; }

/* ================================================================ the games hub
 * The layout of a game portal, in the hub's own colours: the engine site's night blue and lamp
 * gold, pastel status colours, the game's sky and grass. Light, or dark with the device. */
.site { --accent: var(--lamp); background: var(--bg); color: var(--ink); min-height: 100vh; }

/* Header: Games, the Create menu, search and the player's page. */
.site-nav { gap: 1rem; }
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; color: var(--on-night-2); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary .ico { transform: rotate(90deg); width: .9em; height: .9em; transition: transform .15s; }
.nav-menu[open] > summary .ico { transform: rotate(-90deg); }
.nav-menu > summary[aria-current=page], .nav-menu > summary:hover { color: var(--on-night); }
.nav-menu-list { position: absolute; top: calc(100% + .75rem); left: -1rem; min-width: 15rem; background: var(--night); border: 1px solid var(--night-rule); border-radius: 12px; padding: .4rem; box-shadow: 0 16px 40px rgb(0 0 0 / .5); z-index: 30; display: flex; flex-direction: column; }
.nav-menu-list a { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: 8px; color: var(--on-night) !important; text-decoration: none !important; }
.nav-menu-list a:hover { background: var(--night-2); }
.nav-icon { display: inline-flex; align-items: center; gap: .35rem; font-size: 1.15rem; }
.nav-icon-label { font-size: 1rem; }
@media (min-width: 761px) { .nav-icon-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 760px) {
  .nav-menu-list { position: static; box-shadow: none; border: 0; background: none; padding: 0 0 0 1rem; min-width: 0; }
  .nav-menu > summary { padding: .7rem .25rem; }
}

/* The front page */
.portal-banner { background: linear-gradient(180deg, #bfe6ff 0%, #e6f4ff 60%, var(--bg) 100%); margin-top: -2.5rem; padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--rule); }
@media (prefers-color-scheme: dark) { .portal-banner { background: linear-gradient(180deg, #0f2140 0%, #121a2b 60%, var(--bg) 100%); } }
.portal-banner-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.portal-banner h1 { margin: 0 0 .5rem; }
.portal-banner p { color: var(--ink-2); max-width: 38rem; }
.portal-banner-art { display: flex; align-items: flex-end; gap: .5rem; }
.portal { padding-top: 1.5rem; }
.hub-section { padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--rule); }
.hub-section:last-of-type { border-bottom: 0; }
.hub-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.hub-section-head h2 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; }
.section-sprite { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--lamp); font-size: 1.4rem; }
.hub-section-head .more { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--ink); font-size: 1.2rem; }
.hub-section-head .more:hover { background: var(--surface-2); }
.mini-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 10rem), 1fr)); gap: 1rem .8rem; }
.mini-tile { display: flex; flex-direction: column; gap: .35rem; color: inherit; text-decoration: none; min-width: 0; }
.mini-cover { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-2); transition: transform .15s; }
.mini-tile:hover .mini-cover { transform: translateY(-3px); }
.mini-cover .cover-title { display: none; }
.mini-status { position: absolute; top: .45rem; left: .45rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.mini-status { box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.mini-status.st-obt { background: #cfe9ff; color: #174f80; }
.mini-status.st-cbt { background: #e4dcff; color: #4a32b0; }
.mini-status.st-dev { background: #eceef3; color: #3d4556; }
.rank { position: absolute; left: .45rem; bottom: .3rem; font-size: 1.5rem; color: #fff; text-shadow: 3px 0 #0f1218, -3px 0 #0f1218, 0 3px #0f1218, 0 -3px #0f1218; }
.mini-cover:has(.rank) .cover-title { display: none; }
.mini-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-meta { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.mini-meta .chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.score { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

/* A game's page */
.gp-banner .cover.big { height: clamp(180px, 34vw, 380px); }
.gp-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .6rem max(1rem, (100% - var(--page)) / 2); background: var(--surface-2); border-bottom: 1px solid var(--rule); }
.gp-thumb { flex: none; width: 7.5rem; aspect-ratio: 16 / 9; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .7; }
.gp-thumb.on { border-color: #b8952f; opacity: 1; }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-wrap { padding: 1.25rem 0 1.5rem; }
.gp-ident { display: flex; gap: 1rem; align-items: center; }
.gp-icon { width: 6.5rem; height: 6.5rem; flex: none; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule-2); }
.gp-icon .cover-title { display: none; }
.gp-ident-text { min-width: 0; }
.gp-ident-text h1 { margin: .35rem 0; overflow-wrap: anywhere; }
.gp-social { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.round-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--ink-2); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; }
.round-btn.on { background: #ff8fb1; border-color: #ff8fb1; color: #fff; }
.gp-counts { display: inline-flex; gap: .75rem; color: var(--ink-3); font-size: .9rem; margin-left: .25rem; }
.gp-counts > span { display: inline-flex; align-items: center; gap: .25rem; }
.gp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .5rem 1.5rem; margin: 1.25rem 0; padding: 1rem 0; border-block: 1px solid var(--rule); }
.gp-fact { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; }
.gp-fact dt { color: var(--ink-3); }
.gp-fact dd { margin: 0; overflow-wrap: anywhere; }
.gp-play { display: flex; flex-direction: column; gap: .6rem; max-width: 34rem; }
.play-web { background: var(--lamp); border-color: #b8952f; color: var(--on-lamp); box-shadow: 0 3px 0 #b8952f; }
.play-web:hover { background: #f0d277; }
.play-app { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.gp-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.gp-block { background: var(--surface); border-block: 1px solid var(--rule); padding: 1.25rem 0; margin-bottom: .75rem; }
.gp-block h2 { font-size: 1.15rem; }
.gp-block p { color: var(--ink-2); }
.notices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.notices li { display: flex; flex-direction: column; gap: .2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.notices p { margin: 0; }
.kind { font-size: .75rem; font-weight: 800; padding: .1rem .55rem; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.kind-event { background: var(--pink-soft); color: #ff8fb1; }
.kind-notice { background: var(--sky-soft); color: var(--sky); }
.view-all { margin-top: .75rem; }
.rating-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1rem; }
@media (max-width: 700px) { .rating-head { grid-template-columns: minmax(0, 1fr); } }
.rating-score strong { font-size: 2rem; }
.rating-bar { height: .5rem; border-radius: 999px; background: var(--pink-soft); overflow: hidden; margin: .4rem 0 .6rem; }
.rating-bar > div { height: 100%; background: #2fbf7f; }
.thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.thumb { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.thumb.up.on { background: var(--mint-soft); border-color: var(--mint); color: var(--mint); }
.thumb.down.on { background: var(--pink-soft); border-color: #e0567f; color: #c2385f; }
.rate-locked { background: var(--surface-2); border-radius: 12px; padding: .75rem 1rem; }
.rate-locked p { margin: 0 0 .4rem; }
.review-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; border-bottom: 1px solid var(--rule); margin: .5rem 0 1rem; }
.review-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink-3); font: inherit; font-weight: 700; padding: .5rem 0; cursor: pointer; }
.review-tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--lamp); }
.reviews { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.reviews li { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.reviews p { margin: .35rem 0 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rv { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; }
.rv.up { background: var(--mint-soft); color: var(--mint); }
.rv.down { background: var(--pink-soft); color: #c2385f; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.pager .btn:first-child .ico { transform: rotate(180deg); }
.play-bar { display: none; }
@media (max-width: 760px) {
  /* On a phone the play buttons stay at the bottom; the page leaves room for them. */
  .play-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 -6px 18px var(--shadow); z-index: 20; }
  .play-bar .btn { min-height: 2.75rem; font-size: 1rem; padding: .4rem .6rem; }
  .game-page { padding-bottom: 4.5rem; }
  .gp-play { display: none; }
}

/* My page */
.me-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1rem 0 1.5rem; }
.me-avatar { width: 7.5rem; height: 7.5rem; border-radius: 22px; background: linear-gradient(135deg, #bfe6ff, #ffd1e1); display: grid; place-items: center; margin-bottom: .5rem; }
.me-head h1 { margin: 0; }
.me-links { justify-content: center; margin-top: .75rem; }
.empty-me { padding: 2rem 0; text-align: center; }

/* The developer console */
.console-tag { font-weight: 700; color: var(--on-night-2); border-left: 1px solid var(--night-rule); padding-left: 1rem; white-space: nowrap; }
@media (max-width: 640px) { .console-tag { display: none; } }
.console-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.console-sort { width: auto; }
.console-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.console-tile { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.console-cover { display: block; position: relative; aspect-ratio: 16 / 9; }
.console-body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.console-body h2 { margin: 0; font-size: 1.1rem; }
.console-body h2 a { color: inherit; text-decoration: none; }
.console-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.console-meta .badge { margin: 0; }
.console-body .toolbar { margin: 0; }

/* One row per section that slides sideways; arrows on bigger screens. */
.mini-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(8.5rem, 28vw, 10.5rem); gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity; padding: .25rem .1rem .75rem; scrollbar-width: thin; }
.mini-row > * { scroll-snap-align: start; }
.mini-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 12px; }
.row-tools { display: flex; align-items: center; gap: .5rem; }
.row-arrows { display: flex; gap: .35rem; }
.round-btn.small { width: 2.1rem; height: 2.1rem; font-size: .95rem; border-width: 1px; border-color: var(--rule-2); }
.round-btn.prev .ico { transform: rotate(180deg); }
@media (max-width: 560px) { .row-arrows { display: none; } }
.row-empty { padding: 1rem 1.25rem; border: 2px dashed var(--rule-2); border-radius: 14px; }
.st-bad { background: var(--bad-soft); color: var(--bad); }
.mini-status.st-bad { background: #ffd9d6; color: #8a1d16; }
.gp-unplayable { margin: 1rem 0 0; display: flex; gap: .4rem; align-items: center; }

/* KichiCreator on the front page */
.kc-promo { background: linear-gradient(135deg, #fff3cf, #ffe3ec); color: #1b1f2a; margin-top: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--rule); }
.kc-promo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (max-width: 820px) { .kc-promo-row { grid-template-columns: minmax(0, 1fr); } }
.kc-promo h2 { margin: .25rem 0 .5rem; }
.kc-promo p { color: #434b5c; }
.kc-promo .eyebrow { background: #fff; color: #434b5c; border-color: #ead9b0; }
.kc-points { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .35rem; }
.kc-points li { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.kc-promo .btn:not(.primary) { background: #fff; color: #1b1f2a; border-color: #d5d9e2; }
.kc-promo-shot { margin: 0; }
.kc-promo-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; border: 4px solid #fff; box-shadow: 0 14px 36px rgb(10 14 24 / .2); }

/* Player profiles */
.avatar { display: grid; place-items: center; border-radius: 26px; flex: none; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .08); }
.bg-sky { background: linear-gradient(160deg, #cfe9ff, #9fd2ff); }
.bg-pink { background: linear-gradient(160deg, #ffe3ec, #ffb7cc); }
.bg-mint { background: linear-gradient(160deg, #dcf7ec, #a8e6c9); }
.bg-lilac { background: linear-gradient(160deg, #ece6ff, #c9bbff); }
.bg-lamp { background: linear-gradient(160deg, #fff3cf, #f0d277); }
.bg-night { background: linear-gradient(160deg, #2c3550, #141821); }
.profile-page { padding-top: .5rem; }
.profile-tools { justify-content: flex-end; }
.profile { display: flex; flex-direction: column; gap: 1rem; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1.5rem; border-radius: 22px; color: #1b1f2a; }
.profile-head.bg-night { color: #e8ebf2; }
.profile-head .avatar { background: rgb(255 255 255 / .55); }
.profile-id { min-width: 0; flex: 1 1 14rem; }
.profile-id h1 { margin: 0; overflow-wrap: anywhere; }
.handle { margin: 0 0 .4rem; font-weight: 700; opacity: .75; }
.profile-head .chip { background: rgb(255 255 255 / .7); color: #1b1f2a; }
.profile-facts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .5rem; font-weight: 600; }
.profile-facts > span { display: inline-flex; align-items: center; gap: .3rem; }
.profile-block { margin: 0; }
.block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.block-head h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.only-you { gap: .3rem; }
.socials { display: flex; flex-wrap: wrap; gap: .5rem; }
.social { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600; }
.links-list a { font-weight: 600; }
.profile-edit-grid { align-items: start; }
.avatar-edit { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.avatar-edit > .stack { flex: 1 1 12rem; }
.bg-picks { display: flex; flex-wrap: wrap; gap: .4rem; }
.bg-pick { width: 2.25rem; height: 2.25rem; border-radius: 10px; border: 2px solid var(--rule-2); cursor: pointer; padding: 0; }
.bg-pick[aria-checked=true] { outline: 3px solid var(--lamp); outline-offset: 2px; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: .4rem; align-items: center; }
@media (max-width: 520px) { .link-row { grid-template-columns: minmax(0, 1fr) auto; } .link-row input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
.social-label { display: inline-flex; align-items: center; gap: .3rem; }
.show-row { padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.download-grid .card { margin: 0; }
.profile-small { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.profile-small:empty { display: none; }

/* ================================================================ the Kichi look
 * The hub's own style: warm paper, Kichi's night indigo and lamp gold, paw pink, and chunky
 * framed tiles with a hard shadow, like a pixel game's windows. The game's tiles and animals
 * are the trim. Light, or dark with the device. */
:root {
  --bg: #fbf8f2; --surface: #ffffff; --surface-2: #f3eee4; --ink: #1d1a2e; --ink-2: #4a4560; --ink-3: #676179;
  --rule: #e7e0d2; --rule-2: #cdc4b2; --link: #8a5d00; --lamp: #f2c14e; --lamp-deep: #c99a22; --on-lamp: #1d1a2e;
  --night: #1d1a33; --night-2: #2a2547; --night-rule: #3d3763; --on-night: #f6f2ff; --on-night-2: #bdb6da;
  --paw: #ff7aa2; --paw-soft: #ffe4ec; --edge: #1d1a2e; --edge-shadow: #1d1a2e; --shadow: rgb(29 26 46 / .12);
  --pink-soft: var(--paw-soft); --grey-soft: #efebe3; --font-head: var(--font-body);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14121f; --surface: #1d1a2e; --surface-2: #26223b; --ink: #f3efff; --ink-2: #c7c1de; --ink-3: #a29cba;
    --rule: #2f2b47; --rule-2: #464066; --link: #f2c14e; --night: #0e0c18; --night-2: #1d1a2e; --night-rule: #34304f;
    --paw-soft: #3d2030; --edge: #464066; --edge-shadow: #07060d; --shadow: rgb(0 0 0 / .45); --grey-soft: #26223b;
  }
}
body { letter-spacing: -.003em; }
h1, h2, h3 { letter-spacing: -.015em; }
h1:not(.pixel) { font-weight: 800; }
::selection { background: var(--lamp); color: var(--on-lamp); }

/* Buttons: framed, with a hard shadow that presses in. */
.btn { border-radius: 12px; border-width: 2px; }
.btn.primary { background: var(--lamp); border-color: var(--edge); color: var(--on-lamp); box-shadow: 3px 3px 0 var(--edge-shadow); }
.btn.primary:hover { background: #f7cf6a; }
.btn.primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge-shadow); }
.site .btn:not(.primary):not(.danger):not(.ghost) { border-color: var(--rule-2); }
.site .btn:not(.primary):not(.danger):not(.ghost):hover { border-color: var(--edge); }
.btn.ghost { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .35); color: var(--on-night); }
.btn.ghost:hover { background: rgb(255 255 255 / .16); border-color: var(--on-night); }
.play-web { border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge-shadow); }

/* Header: night indigo with a gold edge. */
.site-head { background: var(--night); border-bottom: 3px solid var(--lamp); }
.panel-head { background: var(--night); box-shadow: inset 0 -3px 0 var(--lamp); }
.logo { color: var(--lamp); letter-spacing: .02em; }
.site-nav a, .nav-menu > summary { font-size: .95rem; }
.site-nav a[aria-current=page] { text-decoration: none; color: var(--on-night); box-shadow: inset 0 -3px 0 var(--lamp); padding-bottom: .2rem; }
.nav-icon { width: 2.5rem; height: 2.5rem; justify-content: center; border-radius: 10px; }
.nav-icon:hover { background: var(--night-2); }
@media (max-width: 760px) { .nav-icon { width: auto; height: auto; justify-content: flex-start; } .site-nav a[aria-current=page] { box-shadow: inset 3px 0 0 var(--lamp); padding-left: .75rem; } }

/* The front page hero: a night sky over the game's grass. */
.hub-hero { position: relative; margin-top: -2.5rem; color: var(--on-night); overflow: hidden;
  background: radial-gradient(circle at 78% 30%, rgb(242 193 78 / .22), transparent 38%), radial-gradient(circle at 12% 0%, rgb(255 122 162 / .18), transparent 40%), linear-gradient(180deg, #1d1a33 0%, #2b2552 62%, #3a3570 100%); }
.hub-hero-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 3rem 0 2.25rem; }
@media (max-width: 860px) { .hub-hero-row { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 2rem 0 1.5rem; } }
.hero-kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .3rem .8rem; border-radius: 999px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); color: var(--on-night); font-weight: 700; font-size: .85rem; }
.hero-kicker .ico { color: var(--lamp); }
.hub-hero h1 { margin: 0 0 1rem; font-size: clamp(1.35rem, .9rem + 2.2vw, 2.4rem); line-height: 1.35; color: #fff; text-shadow: 3px 3px 0 #0e0c18; }
.hub-hero .gold { color: var(--lamp); }
.hero-lede { font-size: 1.125rem; color: var(--on-night-2); max-width: 34rem; margin: 0; }
.hub-hero .cta-row { margin: 1.5rem 0 1.25rem; }
.hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; padding: 0; margin: 0; color: var(--on-night-2); font-size: .95rem; }
.hero-stats strong { color: #fff; font-size: 1.15rem; margin-right: .15rem; }
.hero-ground { position: relative; height: 64px; background: url(assets/strip-grass.png) 0 0 / 384px 64px repeat-x; image-rendering: pixelated; box-shadow: inset 0 4px 0 rgb(0 0 0 / .18); }

/* The spotlight: the most played game, framed like a game window. */
.spotlight { display: flex; flex-direction: column; background: var(--surface); color: var(--ink); text-decoration: none; border: 3px solid #0e0c18; border-radius: 18px; overflow: hidden; box-shadow: 6px 6px 0 #0e0c18; transition: transform .15s, box-shadow .15s; min-width: 0; }
.spotlight:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #0e0c18; }
.spotlight-cover { position: relative; aspect-ratio: 16 / 8; border-bottom: 3px solid #0e0c18; }
.spotlight-tag { position: absolute; top: .7rem; left: .7rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; background: var(--lamp); color: var(--on-lamp); font-weight: 800; font-size: .8rem; border: 2px solid #0e0c18; }
.spotlight-body { padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.spotlight-top { display: flex; gap: .4rem; align-items: center; }
.spotlight-body h2 { margin: 0; font-size: 1.35rem; }
.spotlight-body p { margin: 0; color: var(--ink-2); }
.spotlight-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .25rem; }
.spotlight-go { margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; font-weight: 800; color: var(--link); }

/* Rows: a heading with an icon chip and a line under it, then tiles in frames. */
.portal { padding-top: 1rem; }
.hub-section { padding: 1.5rem 0 1.25rem; border-bottom: 0; }
.hub-section-head { align-items: flex-end; margin-bottom: 1rem; }
.hub-section-title { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.hub-section-head h2 { font-size: 1.35rem; margin: 0; }
.section-note { margin: .1rem 0 0; color: var(--ink-3); font-size: .9rem; }
.section-sprite { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--lamp); color: var(--on-lamp); border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge-shadow); font-size: 1.25rem; flex: none; }
[data-section="favourites"] .section-sprite { background: var(--paw); color: #fff; }
[data-section="new"] .section-sprite { background: #8fd3ff; color: #10324d; }
[data-section="top"] .section-sprite { background: #b9a6ff; color: #231654; }
.mini-row { grid-auto-columns: clamp(8.75rem, 30vw, 11rem); gap: 1.1rem; padding: .3rem .5rem 1rem .1rem; }
.mini-cover { border: 2px solid var(--edge); border-radius: 14px; box-shadow: 3px 3px 0 var(--edge-shadow); transition: transform .15s, box-shadow .15s; }
.mini-tile:hover .mini-cover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--edge-shadow); }
.mini-name { margin-top: .2rem; }
.mini-status { top: .4rem; left: .4rem; border: 1.5px solid rgb(29 26 46 / .65); box-shadow: none; }
.rank { left: auto; right: .4rem; top: .4rem; bottom: auto; min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; display: grid; place-items: center; border-radius: 9px; background: var(--lamp); color: var(--on-lamp); border: 2px solid #0e0c18; font-size: .65rem; text-shadow: none; }
.rank::before { content: '#'; }
.row-empty { border-color: var(--rule-2); background: var(--surface); }

/* KichiCreator below the games: a framed panel. */
.kc-promo { background: none; border: 0; padding: 1rem 0 2.5rem; margin-top: 1rem; }
.kc-promo-row { width: min(var(--page), 100% - 2rem); background: linear-gradient(135deg, #fff1c9, #ffe0ea); border: 3px solid var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 var(--edge-shadow); padding: clamp(1.25rem, 3vw, 2.25rem); }
@media (prefers-color-scheme: dark) { .kc-promo-row { border-color: #0e0c18; box-shadow: 6px 6px 0 #07060d; } }
.kc-promo .btn.primary { border-color: #1d1a2e; box-shadow: 3px 3px 0 #1d1a2e; color: #1d1a2e; }
.kc-promo .btn:not(.primary) { border-color: #1d1a2e; }
.kc-promo-shot img { border: 3px solid #1d1a2e; box-shadow: none; }

/* Game tiles, game page, console tiles and cards share the frame. */
.game-tile, .console-tile { border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge-shadow); }
.game-tile:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--edge-shadow); }
.tile-cover, .console-cover { border-bottom: 2px solid var(--edge); }
.gp-icon { border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge-shadow); }
.gp-banner .cover.big { height: clamp(170px, 26vw, 300px); border-bottom: 3px solid var(--edge); }
.gp-thumb.on { border-color: var(--lamp-deep); }
.round-btn { border-color: var(--edge); }
.round-btn.on { background: var(--paw); border-color: var(--edge); }
.spotlight .status, .tile-tags .status { border: 1.5px solid rgb(29 26 46 / .5); }
.site .card, .site .plan-card, .site .faq-item, .site .feature { border-color: var(--rule-2); }
.plan-card.popular, .plan-card.current { border: 3px solid var(--edge); box-shadow: 4px 4px 0 var(--edge-shadow); }
.plan-card .badge { border: 2px solid var(--edge); }
.profile-head { border: 3px solid var(--edge); box-shadow: 5px 5px 0 var(--edge-shadow); }
.fchip[aria-checked=true], .fchip[aria-selected=true] { background: var(--night); border-color: var(--night); }

/* The console: the active page marked in gold. */
.side-nav a[aria-current=page] { background: var(--night); box-shadow: inset 3px 0 0 var(--lamp); }
@media (max-width: 820px) { .side-nav a[aria-current=page] { box-shadow: inset 0 -3px 0 var(--lamp); } }
.console-tag { color: var(--lamp); }

/* The footer: the path, then night. */
.site-foot { background: var(--night); }
.foot-row { padding: 2rem 0 2.5rem; }
.spotlight .cover-title { display: none; }
.rank { display: flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1; }

/* KichiCreator's own page: the day to the games' night, warm gold over paper. */
.hero.sky { background: radial-gradient(circle at 85% 10%, rgb(255 122 162 / .18), transparent 40%), linear-gradient(180deg, #ffe7a8 0%, #fff3d6 55%, var(--bg) 100%); }
@media (prefers-color-scheme: dark) { .hero.sky { background: radial-gradient(circle at 85% 10%, rgb(255 122 162 / .14), transparent 40%), linear-gradient(180deg, #3a2f1a 0%, #221d24 60%, var(--bg) 100%); } }
.hero-frame img, .hero-shot img { border: 3px solid var(--edge); box-shadow: 6px 6px 0 var(--edge-shadow); }
.eyebrow { border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge-shadow); }
.bubble { border: 2px solid #1d1a2e; box-shadow: 2px 2px 0 #1d1a2e; }
.bubble::after { right: -8px; }
.feature, .steps li { border-width: 2px; }
.feature-ico { border: 2px solid var(--edge); }
.steps li::before { border: 2px solid var(--edge); }
.shots img { border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge-shadow); }
.cta-banner { border: 3px solid #1d1a2e; box-shadow: 6px 6px 0 var(--edge-shadow); }
.cta-banner .btn.primary { border-color: #1d1a2e; color: #1d1a2e; }
.console-tiles + p { margin-top: 1.25rem; }

/* ================================================================ the Website tab (H7x) */
.site-head-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 1.5rem; }
.site-head-main { min-width: 0; flex: 1 1 18rem; }
.site-head-main h2 { margin: 0 0 .25rem; }
.site-head-main p { margin: 0 0 .4rem; overflow-wrap: anywhere; }
.site-head-main .state-line { margin: .5rem 0 0; }
.site-actions { margin: 0; }
.site-parts { margin: .25rem 0 1rem; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.site-parts .seg-btn { gap: .4rem; white-space: nowrap; flex: none; }
.site-part { min-width: 0; }
.site-design { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.site-design .card { margin: 0; }
@media (max-width: 1100px) { .site-design { grid-template-columns: minmax(0, 1fr); } }
.site-sample-wrap { position: sticky; top: 4.5rem; min-width: 0; }
@media (max-width: 1100px) { .site-sample-wrap { position: static; } }
.site-sample-wrap > p { margin: 0 0 .35rem; }
.site-sample { --s-r: 14px; border-radius: 14px; overflow: hidden; border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--edge-shadow); background: var(--s-bg); color: var(--s-ink); font-size: .9rem; }
.site-sample[data-corners=square] { --s-r: 3px; }
.site-sample .s-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .8rem; background: var(--s-surface); border-bottom: 3px solid var(--s-accent); }
.site-sample .s-logo { color: var(--s-accent); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-sample .s-nav { color: var(--s-muted); font-size: .75rem; white-space: nowrap; }
.site-sample .s-body { padding: 1rem .9rem 1.1rem; }
.site-sample .s-title { font-size: 1.3rem; font-weight: 800; margin-bottom: .25rem; overflow-wrap: anywhere; }
.site-sample[data-font=pixel] .s-title, .site-sample[data-font=pixel] .s-logo { font-family: var(--font-pixel); font-weight: 400; font-size: .95rem; line-height: 1.5; }
.site-sample[data-font=storybook] .s-title, .site-sample[data-font=storybook] .s-logo { font-family: Georgia, serif; }
.site-sample p { margin: 0 0 .6rem; }
.site-sample .s-btn { display: inline-block; padding: .35rem .9rem; border-radius: calc(var(--s-r) * .7); background: var(--s-accent); color: var(--s-on-accent); font-weight: 800; }
.site-sample .s-panel { margin-top: .9rem; padding: .7rem .8rem; border-radius: var(--s-r); background: var(--s-surface); border: 2px solid color-mix(in srgb, var(--s-ink) 25%, transparent); }
.site-sample .s-muted { color: var(--s-muted); margin: .2rem 0 0; }
.preset-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; }
.preset { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; border-radius: 12px; border: 2px solid var(--rule-2); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-align: left; min-width: 0; }
.preset[aria-checked=true] { border-color: var(--edge); box-shadow: 3px 3px 0 var(--edge-shadow); background: var(--surface-2); }
.preset-swatch { display: flex; gap: 4px; padding: 8px; border-radius: 8px; height: 2.6rem; align-items: flex-end; border: 1px solid var(--rule); }
.preset-swatch span { flex: 1; height: 100%; border-radius: 4px; }
.preset-swatch span:first-child { flex: 2; }
.colour-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .5rem; }
.colour-pick { display: flex; align-items: center; gap: .5rem; font-weight: 600; min-width: 0; }
.colour-pick input { width: 2.75rem; height: 2.5rem; padding: 2px; flex: none; cursor: pointer; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.logo-preview { max-height: 48px; width: auto; border-radius: 6px; background: var(--surface-2); padding: 4px; }
.sec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.sec-row { background: var(--surface); border: 2px solid var(--rule-2); border-radius: 14px; padding: .6rem .8rem; min-width: 0; }
.sec-row.off { background: var(--surface-2); }
.sec-row.off .sec-kind { color: var(--ink-3); }
.sec-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.sec-on { display: flex; align-items: center; gap: .6rem; font-weight: 700; cursor: pointer; min-width: 0; }
.sec-on input { width: 1.2rem; height: 1.2rem; }
.sec-tools { display: flex; gap: .3rem; }
.sec-edit { margin-top: .4rem; }
.sec-edit > summary { cursor: pointer; font-weight: 700; color: var(--link); width: max-content; }
.sec-edit > .stack { margin-top: .6rem; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto auto; gap: .4rem; align-items: start; }
.item-row:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; }
.item-row select { width: auto; max-width: 11rem; }
@media (max-width: 640px) { .item-row, .item-row:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr) auto; } .item-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .item-row > select { grid-row: 3; } }
.pick-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
.pick-shot { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 2px solid var(--rule-2); cursor: pointer; }
.pick-shot:has(input:checked) { border-color: var(--edge); box-shadow: 3px 3px 0 var(--edge-shadow); }
.pick-shot input { position: absolute; top: .4rem; left: .4rem; width: 1.15rem; height: 1.15rem; }
.pick-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.page-toggle { display: flex; flex-direction: column; gap: .1rem; padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.page-toggle .hint { padding-left: 2rem; }
.news-list { display: flex; flex-direction: column; }
.news-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.news-row:last-child { border-bottom: 0; }
.news-row > div:first-child { min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.news-row .toolbar { margin: 0; }
.kind-patch { background: var(--lamp); color: var(--on-lamp); }
.kind-server { background: var(--busy-soft); color: var(--busy); }
.kind-news { background: var(--surface-2); color: var(--ink-2); }

/* ================================================================ crisp neutrals (owner, 11 November: no cream)
 * Cool, clean greys under the night indigo and lamp gold; solid colour panels, no pastel gradients. */
:root { --bg: #f4f5f9; --surface: #ffffff; --surface-2: #eceef4; --ink: #171a26; --ink-2: #434a5e; --ink-3: #5c6377; --rule: #e0e3eb; --rule-2: #c5cad7; --grey-soft: #eceef4; --link: #6b4d00; }
@media (prefers-color-scheme: dark) { :root { --bg: #111320; --surface: #191c2b; --surface-2: #222638; --ink: #eef0f7; --ink-2: #c3c8d8; --ink-3: #9da3b8; --rule: #2a2e42; --rule-2: #3d4360; --grey-soft: #222638; --link: #f2c14e; } }
/* KichiCreator's page: a clean white top, no gradient. */
.hero.sky { background: var(--surface); border-bottom: 1px solid var(--rule); }
@media (prefers-color-scheme: dark) { .hero.sky { background: var(--surface); } }
/* KichiCreator on the front page, and the call to action: solid night indigo. */
.kc-promo-row { background: var(--night); color: var(--on-night); border-color: #0e0c18; }
.kc-promo h2, .kc-promo .kc-points li { color: #fff; }
.kc-promo p { color: var(--on-night-2); }
.kc-promo .eyebrow { background: var(--night-2); color: var(--on-night); border-color: var(--lamp); box-shadow: none; }
.kc-promo .btn:not(.primary) { background: transparent; color: var(--on-night); border-color: rgb(255 255 255 / .45); }
.kc-promo .btn:not(.primary):hover { border-color: #fff; }
.kc-promo-shot img { border-color: #0e0c18; }
.cta-banner { background: var(--night); color: var(--on-night); border-color: #0e0c18; }
.cta-banner p { color: var(--on-night-2); }
.cta-banner .btn:not(.primary) { background: transparent; color: var(--on-night); border-color: rgb(255 255 255 / .45); }
.one-account { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .9rem; }
.one-account .ico { flex: none; margin-top: .15rem; color: var(--link); }

/* ================================================================ a game's sign-up page (join.js)
 * The game's own background colour and ground tiles, a white card with its logo and ours. */
.join-shell { min-height: 100vh; display: flex; flex-direction: column; }
.join-main { flex: 1; display: flex; }
.join-main:focus { outline: none; }
.join-page { flex: 1; display: flex; flex-direction: column; background: var(--j-page, var(--night)); color: var(--j-page-ink, #fff); }
.join-wrap { flex: 1; display: grid; place-items: center; padding: 2.5rem 1rem; }
.join-ground { height: 64px; background: url(assets/strip-grass.png) 0 0 / 384px 64px repeat-x; image-rendering: pixelated; border-top: 3px solid rgb(0 0 0 / .2); }
.join-card { width: min(30rem, 100%); background: var(--surface); color: var(--ink); border: 3px solid var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 rgb(0 0 0 / .35); padding: clamp(1.25rem, 4vw, 2rem); display: flex; flex-direction: column; gap: 1rem; }
.join-card h1 { margin: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); text-align: center; overflow-wrap: anywhere; }
.join-card > p { margin: 0; text-align: center; }
.join-logos { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.join-logo { display: flex; align-items: center; gap: .4rem; min-height: 4.5rem; padding: .4rem .9rem; border-radius: 16px; border: 2px solid var(--edge); max-width: 100%; min-width: 0; }
.join-logo.game { background: var(--j-bg); color: var(--j-ink); }
.join-logo.game img { display: block; max-height: 3.5rem; width: auto; max-width: 12rem; }
.join-logo.ours { background: var(--night); color: var(--lamp); }
.join-logo .logo-cat { margin: -6px -8px -4px -10px; }
.join-logo-text { font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.join-plus { color: var(--ink-3); font-size: 1.1rem; }
.join-tabs { display: flex; width: 100%; }
.join-tabs .seg-btn { flex: 1; justify-content: center; }
.join-signed { display: flex; align-items: center; justify-content: center; gap: .3rem; font-weight: 700; }
.join-note { border-top: 1px solid var(--rule); padding-top: .9rem; font-size: .9rem; color: var(--ink-2); }
.join-note p { margin: 0 0 .4rem; }
.join-hint { margin: .5rem 0 0; }
/* The hidden attribute always hides, whatever layout a class gives (the two-step step). */
[hidden] { display: none !important; }
.join-logos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); flex-wrap: nowrap; gap: .5rem; }
.join-logos:has(> :only-child) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.join-logo { min-height: 3.75rem; padding: .35rem .6rem; gap: .35rem; justify-content: center; }
.join-logo-pic { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; flex: none; }
.join-logo .logo-cat { width: 31px; height: 31px; margin: 0 .1rem; }
.join-logo-text { font-size: .62rem; }
.join-ground.bd-water { background-image: url(assets/tile-water.png); background-size: 64px 64px; }
.join-ground.bd-stone { background-image: url(assets/tile-stone.png); background-size: 64px 64px; }
.join-ground.bd-path { background-image: url(assets/strip-path.png); background-size: 128px 64px; }
.join-ground.bd-paving { background-image: url(assets/tile-paving.png); background-size: 64px 64px; }
.join-ground.bd-none { display: none; }
.join-logo-pic { width: 52px; height: 52px; }
.join-logo-text { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
@media (max-width: 420px) { .join-logo { flex-direction: column; padding: .4rem; gap: .1rem; } .join-logo-text { text-align: center; } }
@media (max-width: 420px) {
  .join-wrap { padding: 1.5rem .75rem; }
  .join-card { padding: 1rem; }
  .join-logos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; }
  .join-plus { display: none; }
  .join-logo-text { font-size: .55rem; }
}

/* ================================================================ the Creator Hub's game list and staff tools */
.console-tile.ended { opacity: .85; }
.console-owner { margin: -.25rem 0 0; }
.console-address { margin: -.25rem 0 0; overflow-wrap: anywhere; }
/* The staff page's tables on a phone: each row is a block, so nothing is cut off at the side. */
@media (max-width: 640px) {
  .table.stack-narrow, .table.stack-narrow tbody, .table.stack-narrow tr, .table.stack-narrow td { display: block; width: 100%; }
  .table.stack-narrow td { border-bottom: 0; padding: .35rem .85rem; overflow-wrap: anywhere; }
  .table.stack-narrow tr { border-bottom: 1px solid var(--rule); padding: .4rem 0; }
  .table.stack-narrow td.actions { text-align: left; white-space: normal; }
}
.tool-row { gap: .35rem; }
.tool-row .btn { gap: .3rem; }
.game-role { margin: .4rem 0 0; }
.mod-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .mod-layout { grid-template-columns: minmax(0, 1fr); } }
.mod-layout > aside { position: sticky; top: 4.5rem; }
@media (max-width: 1100px) { .mod-layout > aside { position: static; } }
.report { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.report.closed { background: var(--surface-2); box-shadow: none; }
.report-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.report-head .badge { margin: 0; }
.chat-log { font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.report .inline-form select { width: auto; flex: 1 1 12rem; }
.gm-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: .5rem; }

/* Our own test game on the Kichi Game Hub's front page. */
.test-game { margin-top: 2rem; }
.test-game-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; background: var(--surface); border: 2px solid var(--edge); border-radius: 18px; box-shadow: 4px 4px 0 var(--edge-shadow); padding: 1rem; }
@media (max-width: 760px) { .test-game-card { grid-template-columns: minmax(0, 1fr); } }
.test-game-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 2px solid var(--edge); }
.test-game-text h2 { margin: .25rem 0 .4rem; }
.test-game-text .cta-row { margin: .75rem 0 0; }
/* Lumens */
.lumens-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lumens-head h1 { margin: 0; }
.lumens-gem { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 16px; background: var(--night); border: 2px solid var(--edge); flex: none; }
.lumens-gem .item-ico { transform: scale(1.5); }
.lumens-gem.small { width: 3rem; height: 3rem; border-radius: 12px; }
.lumens-gem.small .item-ico { transform: none; }
.lumens-balance { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.lumens-balance strong { font-size: 1.6rem; }
.lumen-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 1rem; }
.lumen-pack { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 0; text-align: center; }

/* ================================================================ design-only mockups (mockups.js)
 * The editor and the server app as they look in mmorpgmaker today: dark slate, lamp gold. */
.mockup-figure { margin: 0 0 1.5rem; }
.mockup { border-radius: 14px; border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--edge-shadow); overflow-x: auto; overflow-y: hidden; background: #17191e; color: #e9e7e3; font-size: 14px; line-height: 1.4; }
.mockup-figure figcaption { margin-top: .4rem; }
.mockup .ico { width: 1.1em; height: 1.1em; }
.mk-editor { min-width: 980px; }
.mk-top { display: flex; align-items: center; gap: 1.1rem; padding: .55rem 1rem; background: #121318; border-bottom: 1px solid #2a2d35; white-space: nowrap; }
.mk-brand { font-size: 1.05rem; }
.mk-pill { padding: .1rem .7rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.mk-pill.live { background: #f28c86; color: #fff; }
.mk-pill.set { border: 1.5px solid #5fd08f; color: #5fd08f; padding: 0 .5rem; }
.mk-menu { color: #e9e7e3; }
.mk-who { margin-left: auto; color: #a5a3a0; }
.mk-outline { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid #3a3d46; border-radius: 8px; white-space: nowrap; }
.mk-outline.small { font-size: .85rem; padding: .2rem .55rem; }
.mk-outline.danger { color: #f3a39d; }
.mk-toolbar { display: flex; align-items: center; gap: .25rem; padding: .5rem .75rem; background: #1c1f26; border-bottom: 1px solid #2a2d35; }
.mk-tool { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; padding: .4rem .7rem; border-radius: 10px; border: 1.5px solid transparent; font-size: .85rem; white-space: nowrap; }
.mk-tool .ico { width: 1.4em; height: 1.4em; }
.mk-tool.on { border-color: #e8b84a; background: #3a3121; }
.mk-tool.green { color: #5fd08f; }
.mk-sep { width: 1px; align-self: stretch; background: #2f323b; margin: 0 .25rem; }
.mk-grow { flex: 1; }
.mk-publish { background: #a07e33; color: #1b1606; font-weight: 700; padding: .7rem 1.2rem; border-radius: 8px; white-space: nowrap; }
.mk-body { display: grid; grid-template-columns: 15rem auto minmax(0, 1fr); min-height: 22rem; }
.mk-side { padding: .9rem; border-right: 1px solid #2a2d35; }
.mk-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.mk-caps { text-transform: uppercase; letter-spacing: .05em; color: #a5a3a0; font-weight: 700; }
.mk-field { border: 1px solid #3a3d46; border-radius: 8px; padding: .45rem .7rem; color: #8d8b88; min-height: 2.2rem; background: #15171c; flex: 1; }
.mk-maps { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.mk-maps li { display: flex; align-items: center; gap: .5rem; padding-left: 1.2rem; }
.mk-map-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-num { color: #a5a3a0; }
.mk-collapse { align-self: start; margin: .5rem .3rem; border: 1px solid #3a3d46; border-radius: 6px; padding: .4rem .1rem; }
.mk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center; padding: 2rem; }
.mk-big-ico .ico { width: 3.2rem; height: 3.2rem; color: #b9b5ad; }
.mk-empty strong { font-size: 1.15rem; }
.mk-dim { color: #a5a3a0; margin: 0; }
.mk-gold { display: inline-flex; align-items: center; gap: .4rem; background: #e8b84a; color: #1b1606; font-weight: 700; padding: .5rem 1rem; border-radius: 8px; white-space: nowrap; width: max-content; }
.mk-server { min-width: 640px; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; background: linear-gradient(180deg, #3c4350, #2c313b); }
.mk-card { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.mk-card-title { font-size: 1.1rem; }
.mk-label { margin: .2rem 0 0; color: #c9c7c3; }
.mk-label strong { color: #f2f0ec; }
.mk-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mk-check { display: flex; align-items: center; gap: .45rem; margin: 0; flex-wrap: wrap; }
.mk-box { width: 1rem; height: 1rem; border-radius: 4px; border: 1.5px solid #8d8b88; }
.mk-box.on { background: #4f8ff7; border-color: #4f8ff7; }
.mk-table { display: flex; flex-direction: column; }
.mk-tr { display: grid; grid-template-columns: 1fr auto; padding: .5rem .2rem; border-bottom: 1px solid rgb(255 255 255 / .1); }
.mk-tr.head { color: #c9c7c3; font-weight: 700; }
.mk-banner { background: #8f7438; color: #fff7e2; border-radius: 10px; padding: .6rem .9rem; }
.mk-link { color: #e8b84a; }
.mk-log { height: 9rem; border-radius: 10px; background: #15171c; }
.mk-card > .mk-outline, .mk-card > .mk-gold { align-self: flex-start; }

/* ================================================================ the KichiCreator app look
 * Owner, 11 November: the website looks like the editor and the server app ("Make it look all
 * the same"): dark slate, lamp gold for what is chosen and what to press, coral and green
 * pills, flat panels with thin borders, plain bold type. The game's art stays as content. */
:root {
  --bg: #17191e; --surface: #1f2229; --surface-2: #262a32; --ink: #ece9e4; --ink-2: #c6c3be; --ink-3: #a5a3a0;
  --rule: #2c3038; --rule-2: #3a3e48; --link: #e8b84a; --lamp: #e8b84a; --lamp-deep: #a07e33; --on-lamp: #1b1606;
  --night: #121318; --night-2: #1c1f26; --night-rule: #2a2d35; --on-night: #ece9e4; --on-night-2: #a5a3a0;
  --edge: #3a3e48; --edge-shadow: transparent; --shadow: rgb(0 0 0 / .35);
  --good: #5fd08f; --good-soft: rgb(95 208 143 / .14); --bad: #f28c86; --bad-soft: rgb(242 140 134 / .14);
  --warn: #e8b84a; --warn-soft: rgb(232 184 74 / .13); --busy: #8fb7f2; --busy-soft: rgb(143 183 242 / .14); --focus: #8fb7f2;
  --mint: #5fd08f; --mint-soft: rgb(95 208 143 / .14); --sky: #8fcbff; --sky-soft: rgb(143 203 255 / .14); --lilac: #c2b2ff; --lilac-soft: rgb(194 178 255 / .14);
  --grey: #c6c3be; --grey-soft: #262a32; --paw: #f28c86; --paw-soft: rgb(242 140 134 / .14); --pink-soft: rgb(242 140 134 / .14);
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); }
.pixel, .logo, .plan-card h3, .cover-title, .join-logo-text, .gs-logo-text { font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em; }
.pixel { line-height: 1.2; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.hub-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); text-shadow: none; line-height: 1.15; }
.logo { color: var(--ink); font-size: 1.15rem; }
.cover-title { font-size: .95rem; }
.plan-card h3 { font-size: 1.05rem; }
.join-logo-text { font-size: .85rem; }

/* Flat: thin borders, no hard shadows. */
.btn, .btn.primary, .play-web, .card, .feature, .plan-card, .faq-item, .table-wrap, .game-tile, .console-tile, .mini-cover, .spotlight, .spotlight-tag,
.section-sprite, .kc-promo-row, .cta-banner, .profile-head, .join-card, .test-game-card, .test-game-card img, .eyebrow, .bubble, .rank, .gp-icon, .preset[aria-checked=true],
.pick-shot:has(input:checked), .plan-card.popular, .plan-card.current, .hero-frame img, .hero-shot img, .shots img, .kc-promo-shot img, .mockup, .site-sample, .feature-ico, .steps li::before, .lumens-gem, .round-btn { box-shadow: none !important; }
.card, .feature, .plan-card, .faq-item, .table-wrap, .game-tile, .console-tile, .spotlight, .kc-promo-row, .cta-banner, .join-card, .test-game-card, .sec-row, .report, .mk-card { border: 1px solid var(--rule-2); border-radius: 12px; background: var(--surface); }
.card.soft { background: var(--surface-2); }
.mini-cover, .tile-cover, .console-cover, .spotlight-cover, .gp-icon, .test-game-card img, .hero-frame img, .hero-shot img, .shots img, .kc-promo-shot img, .gp-banner .cover.big { border: 1px solid var(--rule-2); border-width: 1px; }
.tile-cover, .console-cover, .spotlight-cover { border-width: 0 0 1px; }
.game-tile:hover, .mini-tile:hover .mini-cover, .spotlight:hover { transform: translateY(-2px); border-color: var(--lamp); }

/* Buttons: gold to press, outlined otherwise. */
.btn { border: 1px solid var(--rule-2); border-radius: 8px; background: transparent; color: var(--ink); font-weight: 600; }
.btn:hover { border-color: var(--ink-3); background: rgb(255 255 255 / .04); }
.btn.primary, .play-web { background: var(--lamp); border-color: var(--lamp); color: var(--on-lamp); }
.btn.primary:hover, .play-web:hover { background: #f0c866; border-color: #f0c866; }
.btn.primary:active { transform: translateY(1px); }
.site .btn:not(.primary):not(.danger):not(.ghost) { border-color: var(--rule-2); }
.btn.ghost { background: transparent; border-color: var(--rule-2); color: var(--ink); }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.round-btn { border: 1px solid var(--rule-2); color: var(--ink); }
.round-btn.on { background: var(--paw); border-color: var(--paw); color: #1b0f0e; }

/* Bars: the top bar and the toolbar's chosen-item look. */
.site-head, .panel-head { background: var(--night); border-bottom: 1px solid var(--night-rule); box-shadow: none; }
.site-nav a[aria-current=page], .nav-menu > summary[aria-current=page] { color: var(--ink); box-shadow: none; border: 1px solid var(--lamp); background: #3a3121; border-radius: 8px; padding: .3rem .7rem; text-decoration: none; }
.nav-icon[aria-current=page] { padding: 0; }
@media (max-width: 760px) { .site-nav a[aria-current=page] { box-shadow: none; padding: .55rem .7rem; } }
.side-nav { background: var(--night-2); border-right: 1px solid var(--night-rule); }
.side-nav a { color: var(--ink-2); }
.side-nav a:hover { background: rgb(255 255 255 / .04); color: var(--ink); }
.side-nav a[aria-current=page] { background: #3a3121; color: var(--ink); box-shadow: none; outline: 1px solid var(--lamp); outline-offset: -1px; }
@media (max-width: 820px) { .side-nav a[aria-current=page] { box-shadow: none; } }
.console-tag { color: var(--ink-2); border-left-color: var(--night-rule); }
.tabs { border-bottom-color: var(--rule); }
.tabs a[aria-current=page] { border-bottom-color: var(--lamp); }
.seg { border-color: var(--rule-2); background: transparent; border-radius: 8px; }
.seg-btn { color: var(--ink-2); }
.seg-btn + .seg-btn { border-left-color: var(--rule-2); }
.seg-btn[aria-checked=true], .seg-btn[aria-selected=true] { background: #3a3121; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lamp); }
.fchip { background: transparent; border-color: var(--rule-2); color: var(--ink-2); }
.fchip[aria-checked=true], .fchip[aria-selected=true] { background: #3a3121; border-color: var(--lamp); color: var(--ink); }

/* Fields, tables, notices, the log. */
input, select, textarea { background: #15171c; border: 1px solid var(--rule-2); color: var(--ink); border-radius: 8px; }
input::placeholder, textarea::placeholder { color: #7f7d7a; }
.table th { background: var(--night-2); color: var(--ink-3); }
.notice { background: var(--warn-soft); color: #f2d48a; border: 1px solid rgb(232 184 74 / .35); }
.notice.bad { background: var(--bad-soft); color: var(--bad); border-color: rgb(242 140 134 / .35); }
.code-block, .log, .chat-log { background: var(--night); border: 1px solid var(--night-rule); }
#toast { background: #2a2e37; color: var(--ink); border: 1px solid var(--rule-2); }

/* Front page and pages: flat dark bands instead of gradients. */
.hub-hero { background: var(--night-2); border-bottom: 1px solid var(--night-rule); }
.hero-kicker { background: transparent; border-color: var(--rule-2); }
.hero.sky, .portal-banner, .band { background: var(--night-2); border-color: var(--night-rule); }
.kc-promo-row { background: var(--surface); color: var(--ink); }
.kc-promo h2, .kc-promo .kc-points li { color: var(--ink); }
.kc-promo p { color: var(--ink-2); }
.kc-promo .eyebrow { background: transparent; color: var(--ink-2); border: 1px solid var(--rule-2); }
.kc-promo .btn.primary { color: var(--on-lamp); border-color: var(--lamp); }
.kc-promo .btn:not(.primary), .cta-banner .btn:not(.primary) { color: var(--ink); border-color: var(--rule-2); }
.cta-banner { background: var(--surface); color: var(--ink); }
.cta-banner p { color: var(--ink-2); }
.eyebrow { background: transparent; border: 1px solid var(--rule-2); color: var(--ink-2); }
.bubble { background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule-2); }
.bubble::after { border-left-color: var(--surface-2); }
.section-sprite { border: 1px solid var(--rule-2); background: #3a3121; color: var(--lamp); }
[data-section="favourites"] .section-sprite { background: var(--paw-soft); color: var(--paw); }
[data-section="new"] .section-sprite { background: var(--sky-soft); color: var(--sky); }
[data-section="top"] .section-sprite { background: var(--lilac-soft); color: var(--lilac); }
.rank { background: var(--lamp); color: var(--on-lamp); border: 0; }
.spotlight { color: var(--ink); }
.spotlight-tag { border: 0; }
.spotlight-body p { color: var(--ink-2); }
.feature-ico, .steps li::before { border: 1px solid var(--rule-2); }
.mini-status { border: 0; }
.mini-status.st-obt { background: #cfe9ff; color: #174f80; }
.plan-card.popular, .plan-card.current { border: 1px solid var(--lamp); }
.plan-card .badge { border: 0; }
.profile-head { border: 1px solid var(--rule-2); }
.join-page { background: var(--bg); }
.join-card { color: var(--ink); }
.join-logo { border: 1px solid var(--rule-2); }
.join-logo.ours { background: var(--night); color: var(--ink); }
.lumens-gem { background: var(--night-2); border: 1px solid var(--rule-2); }
.site-foot { background: var(--night); border-top: 1px solid var(--night-rule); }
.badge.soft, .chip, .version-chip, .fcount, .kind-news { background: var(--surface-2); color: var(--ink-2); }
.tile-tags .version-chip { background: rgb(18 19 24 / .85); color: var(--ink); }
.stat-box { background: var(--surface-2); }
.meter, .progress { background: var(--surface-2); }
.rating-bar { background: var(--bad-soft); }
.thumb { background: var(--surface-2); }
.social { background: var(--surface-2); }
.row-empty { background: transparent; border-color: var(--rule-2); }
.rank, .rank.pixel { font-size: .75rem; font-weight: 800; line-height: 1; min-width: 1.9rem; height: 1.6rem; }

/* ================================================================ the Kichi Game Hub's website
 * Owner, 12 November: the website matches the game. Its look is the game's interface (slate
 * panels, lamp gold, plain bold type: the app look above), and the top of the front page is the
 * game's own world from above (assets/scene/hero.png, put together from its tiles and objects by
 * tools/compose-hero.py) at the game's 2x zoom, its animals walking the road. */
.hero-world { position: relative; overflow: hidden; background: var(--bg) url(assets/scene/hero.png) 50% 100% / 1920px 480px repeat-x; image-rendering: pixelated; border-bottom: 1px solid var(--rule); }
/* The interface's slate over the far part of the world (the picture's top edge included),
 * clearing over the square and the road. */
.hero-world::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(23 25 30 / .96) 0, rgb(23 25 30 / .93) calc(100% - 440px), rgb(23 25 30 / .45) calc(100% - 330px), rgb(23 25 30 / 0) calc(100% - 250px)); }
.hero-world .hub-hero-row { position: relative; z-index: 1; padding-top: 3.5rem; padding-bottom: 290px; }
.hero-world .hub-hero-text h1 { margin-top: .6rem; }
.hero-world .hero-lede { color: var(--ink-2); max-width: 34rem; }
.hero-world .hero-stats { color: var(--ink-2); }
.hero-world .btn.ghost { background: rgb(23 25 30 / .7); }
/* The road runs 64 to 96 px above the picture's bottom edge (ROAD_Y in compose-hero.py); nothing
 * stands on it, so the animals never cross an object. Their feet are on its middle line. */
.hero-road { position: absolute; left: 0; right: 0; bottom: 78px; height: 64px; z-index: 1; pointer-events: none; }
.hero-road .walker { bottom: calc(-1 * var(--foot, 0px)); }
@media (max-width: 860px) {
  .hero-world .hub-hero-row { padding-top: 2.25rem; padding-bottom: 270px; }
  /* Phones: the words and the buttons centred, the buttons as wide as each other. */
  .hero-world .hub-hero-text { text-align: center; }
  .hero-world .hero-kicker { margin-inline: auto; }
  .hero-world .hero-lede { margin-inline: auto; }
  .hero-world .cta-row { display: grid; grid-template-columns: 1fr 1fr; max-width: 30rem; margin-inline: auto; }
  .hero-world .cta-row .btn { justify-content: center; width: 100%; }
  .hero-world .hero-stats { justify-content: center; }
}
@media (max-width: 520px) { .hero-world .cta-row { grid-template-columns: minmax(0, 1fr); } }

/* Titles: the game's item picture in a slate chip, then the words. */
.section-title { display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
h1.section-title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom: 1.25rem; }
.section-title .item-ico { margin: 5px; border-radius: 3px; box-shadow: 0 0 0 4px var(--surface-2); outline: 1px solid var(--rule-2); outline-offset: 4px; background-color: var(--surface-2); }
.site .section-sprite .item-ico { width: 32px; height: 32px; }
.site .nav-icon .item-ico { margin: -6px 0; }

/* Our test game; the panels of the front page; play your way; news from us. */
.test-game { margin-top: 2.25rem; }
.test-game-window img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule-2); }
.hub-panel { margin: 2.25rem auto; }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.way-card { text-align: center; margin: 0; }
.way-card h3 { margin: .3rem 0; }
.way-card p { margin: 0 0 .4rem; color: var(--ink-2); }
.way-ico { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--rule-2); background: #3a3121; color: var(--lamp); }
.news-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.news-cards.wide { grid-template-columns: minmax(0, 1fr); max-width: 46rem; margin: 0 auto 1rem; }
.note-card { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: var(--ink); margin: 0; }
a.note-card:hover { border-color: var(--lamp); }
.note-card h3 { margin: 0; color: var(--ink); }
.note-card p { margin: 0; color: var(--ink-2); }
.note-more { margin-top: auto; display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; color: var(--lamp); }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-3); }
.kc-promo-shot img { display: block; width: 100%; border-radius: 10px; }

/* Documentation. */
.docs-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .docs-layout { grid-template-columns: minmax(0, 1fr); } }
.docs-nav h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: .5rem 0 .3rem; }
.docs-nav a { display: block; padding: .35rem .55rem; border-radius: 6px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.docs-nav a:hover { color: var(--ink); background: rgb(255 255 255 / .04); }
.docs-nav a[aria-current=page] { background: #3a3121; color: var(--ink); box-shadow: inset 2px 0 0 var(--lamp); }
.docs-more { margin-top: 1.5rem; }

/* Admin: the hub's team and the keys vault (H7g2). Rows wrap, so a phone never scrolls sideways. */
.admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.admin-list > li:last-child { border-bottom: 0; }
.admin-who { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.admin-act { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 100%; }
.admin-act select { max-width: 100%; min-width: 0; }
.admin-body { min-width: 0; }
.admin-page .inline-form select { flex: 0 1 10rem; min-width: 0; }
.admin-page input[readonly] { width: 100%; }
.admin-page .roles dt { font-weight: 700; margin-top: .6rem; }
.admin-page .roles dd { margin: 0; color: var(--ink-2); }