/* Armoryhall "Play in browser": Liquid Glass over the night castle colours. Own file: this origin shares nothing with seppo.app. */
@font-face { font-family: "Alegreya Sans"; font-weight: 400; src: url("fonts/alegreya-sans-400-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; src: url("fonts/alegreya-sans-700-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Pirata One"; font-weight: 400; src: url("fonts/pirata-one-400-latin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 700; src: url("fonts/cinzel-700-latin.woff2") format("woff2"); font-display: swap; }
:root {
  color-scheme: dark;
  --sky: #0b1233; --horizon: #41286e; --text: #f4edff; --soft: #c4bdd4; --gold: #e9c87c; --accent: #97eee0; --warn: #f186b0;
  --glass: rgb(27 18 56 / .55); --edge: rgb(216 194 255 / .35); --control: rgb(255 255 255 / .09);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --sky: #f3e8cc; --horizon: #e8d29c; --text: #2c2108; --soft: #5a4a28; --gold: #7a5200; --accent: #1d6b5f; --warn: #9a2b50;
    --glass: rgb(255 250 235 / .6); --edge: rgb(122 82 0 / .4); --control: rgb(0 0 0 / .06);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 17px/1.45 "Alegreya Sans", system-ui, sans-serif; color: var(--text);
  background: radial-gradient(ellipse at 50% 110%, var(--horizon), transparent 65%), var(--sky) fixed;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.bar { max-width: 960px; margin: 0 auto 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bar h1 { flex: 1; margin: 0; font: 400 clamp(28px, 6vw, 40px)/1 "Pirata One", Georgia, serif; color: var(--text); }
.back { font: 700 12px/1 Cinzel, Georgia, serif; letter-spacing: .1em; color: var(--gold); text-decoration: none; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); }
main { max-width: 960px; margin: 0 auto; display: grid; gap: 16px; }
.panel { padding: 22px; border-radius: 28px; background: var(--glass); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px var(--edge), 0 10px 30px rgb(0 0 0 / .25); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); display: grid; gap: 12px; }
h2 { margin: 6px 0 0; font: 700 13px/1.2 Cinzel, Georgia, serif; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.hint { margin: 0; font-size: 15px; color: var(--soft); }
.message { color: var(--accent); min-height: 1.4em; }
.message.bad { color: var(--warn); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.systems { display: flex; flex-wrap: wrap; gap: 8px; }
.systems label { position: relative; }
.systems input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.systems span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--edge); font-weight: 700; }
.systems input:checked + span { background: var(--gold); color: var(--sky); }
.systems input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.systems small { font: 700 10px/1 Cinzel, Georgia, serif; letter-spacing: .08em; opacity: .85; }
button, .button-like { font: 700 14px/1 Cinzel, Georgia, serif; letter-spacing: .08em; padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer; color: var(--text); background: var(--control); box-shadow: inset 0 0 0 1px var(--edge); }
button.primary { background: var(--gold); color: var(--sky); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, .back:focus-visible, .button-like:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.file { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 22px; background: var(--control); box-shadow: inset 0 0 0 1px var(--edge); cursor: pointer; overflow-wrap: anywhere; position: relative; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file.over { box-shadow: inset 0 0 0 2px var(--gold); }
select { font: inherit; color: var(--text); background: var(--control); border: 0; border-radius: 999px; padding: 9px 14px; box-shadow: inset 0 0 0 1px var(--edge); }
.stage { width: 100%; aspect-ratio: 4 / 3; max-height: 75vh; background: #000; border-radius: 20px; overflow: hidden; position: relative; }
.stage > div, .stage canvas { width: 100%; height: 100%; }
.foot { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--soft); padding: 0 6px; }
.foot a, .doc a { color: var(--gold); }
.doc { max-width: 960px; margin: 0 auto; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 8px; border-bottom: 1px solid var(--edge); vertical-align: top; overflow-wrap: anywhere; }
@media (max-width: 560px) { .panel { padding: 16px; border-radius: 24px; } .stage { aspect-ratio: 1 / 1; } }
.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.games li { display: grid; gap: 6px; padding: 14px 16px; border-radius: 22px; background: var(--control); box-shadow: inset 0 0 0 1px var(--edge); align-content: start; }
.games h3 { margin: 0; font: 400 22px/1.1 "Pirata One", Georgia, serif; }
.games .meta { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.games .meta a { color: var(--gold); }
.games .tag { font: 700 10px/1 Cinzel, Georgia, serif; letter-spacing: .08em; color: var(--accent); }