@import './site.css';
:root { color-scheme: light; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f3f5f2; color: #1b2923; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.shell { width: min(100%, 1480px); margin: 0 auto; padding: 40px 32px 80px; }
.topline { display: flex; align-items: center; gap: 11px; letter-spacing: .18em; font-size: 12px; font-weight: 800; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: #235b44; text-decoration: none; }
.brand-symbol { display: block; flex: none; width: 46px; height: 46px; background: currentColor; mask: url('/brand-mark.svg') center / contain no-repeat; }
.brand-wordmark { display: grid; gap: 2px; line-height: 1; }
.brand-wordmark small { font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.brand-wordmark strong { font-size: 26px; font-weight: 800; letter-spacing: -.035em; }
.edition { margin-left: auto; color: #557264; letter-spacing: .12em; }
.landing-nav { display: flex; gap: 16px; margin-left: auto; }
.wiki-link { color: #174c3b; letter-spacing: .03em; text-decoration: none; border-bottom: 1px solid transparent; padding-block: 7px; }
.wiki-link:hover { border-color: currentColor; }
.wiki-link + .edition { margin-left: 0; }
.panel { margin-top: 0; padding: 38px 42px; border: 1px solid #dde4dd; border-radius: 16px; background: white; box-shadow: 0 2px 6px #1b292304; }
.eyebrow { margin: 0 0 12px; color: #65716a; letter-spacing: .1em; font-size: 11px; font-weight: 650; }
h1 { margin: 0; font-size: clamp(34px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.intro { max-width: 550px; margin: 24px 0 18px; color: #4f5d53; line-height: 1.65; }
.game-pillars { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 30px; }
.game-pillars span { background: #e8eddf; color: #355341; font-size: 11px; padding: 7px 9px; }
.step-number { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 7px; background: #e9f1e9; color: #235b44; border-radius: 7px; font-size: 12px; }
#build-form { margin-top: 32px; }
label { display: block; margin-bottom: 10px; font-size: 15px; letter-spacing: -.01em; font-weight: 650; }
.seed-row { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; padding: 13px 14px; border: 1px solid #cdd8cd; background: #fcfdfa; border-radius: 8px; font: inherit; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #9ec9ac; outline-offset: 2px; }
button, .download { border: 0; border-radius: 8px; padding: 13px 18px; font: inherit; font-weight: 650; cursor: pointer; text-align: center; }
button:disabled { opacity: .55; cursor: wait; }
.secondary { color: #235b44; background: #e9f1e9; white-space: nowrap; }
.secondary:hover { background: #dce9da; }
.primary { display: block; width: 100%; margin-top: 27px; padding: 15px; color: white; background: #235b44; font-size: 16px; }
.primary:not(:disabled):hover, .download:hover { background: #26664e; }
.hint { color: #65716a; font-size: 13px; margin: 10px 0 0; line-height: 1.65; }
#original-rom { display: block; width: 100%; font-size: 14px; padding: 12px; }
#original-rom::file-selector-button { border: 1px solid #d5dfd1; border-radius: 5px; background: #edf3e9; color: #235b44; font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 11px; margin-right: 12px; cursor: pointer; }
#rom-status { margin-bottom: 25px; }
#rom-status[data-kind="error"] { color: #a8382f; }
#rom-status[data-kind="success"] { color: #17553d; }
.result { margin-top: 28px; padding: 18px; border: 1px solid #e1e8dc; border-radius: 9px; background: #f6f9f3; }
.status { font-weight: 700; }
.status[data-kind="error"] { color: #a8382f; }
.status[data-kind="success"] { color: #17553d; }
.details { color: #65716a; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.result .details { margin-bottom: 0; }
.download { display: block; margin-top: 16px; color: white; background: #174c3b; text-decoration: none; }
.download[hidden] { display: none; }
footer { margin-top: 24px; color: #65716a; font-size: 12px; line-height: 1.6; text-align: center; }
a { color: #235b44; text-underline-offset: 3px; }
footer nav { margin-top: 8px; line-height: 2; }
.intro { max-width: 800px; }
[hidden] { display: none !important; }
.play-steps { padding-left: 28px; margin-top: 32px; }
.play-steps li { padding-left: 12px; margin-bottom: 28px; }
.help-panel h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; }
.help-panel p { max-width: 850px; color: #4f5d53; line-height: 1.7; }
.help-section { border-top: 1px solid #dde4dd; padding-top: 18px; margin-top: 26px; scroll-margin-top: 20px; }
.help-section li { margin-bottom: 8px; }
#retry { margin-top: 14px; }
@media (max-width: 760px) { .shell { padding: 24px 16px 60px; } }
@media (max-width: 760px) { .brand-symbol { width: 34px; height: 34px; } .brand-wordmark small { font-size: 9px; } .brand-wordmark strong { font-size: 21px; } .brand { gap: 7px; } }
@media (max-width: 490px) { .panel { padding: 28px 20px; } .seed-row { flex-direction: column; } h1 { font-size: 32px; } .edition { display: none; } .landing-nav { gap: 12px; font-size: 12px; } .hint, .details { font-size: 13px; } label { font-size: 14px; } }
@media (min-width: 901px) {
  .topline { font-size: 14px; gap: 14px; }
  .panel { padding: 38px 42px; }
  .hint, .details { font-size: 14px; }
}