/* Same living room, font family, palette and outlined controls as the game. */
:root {
  --ink: #f8fbff;
  --soft: #cbd8ed;
  --green: #7df6a6;
  --paper: #18233b;
  --line: #536c8b;
}
html { background: #18233b; }
body {
  min-height: 100vh;
  padding: 0;
  color: var(--text);
  font-family: "Trebuchet MS", Verdana, sans-serif;
  background: transparent;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(16,24,39,.22),rgba(16,24,39,.4)), url("background.webp") center center / cover no-repeat;
}
.page-shell { width: min(1040px, calc(100% - 48px)); padding: 24px 0; }
.campaign-header {
  padding: 18px 24px;
  background: #243457f2;
  border: 3px solid #101827;
  border-bottom-color: var(--cyan);
  border-radius: 12px 12px 0 0;
}
.wordmark {
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 3px 3px 0 #101827;
}
.wordmark span { color: var(--yellow); }
.wordmark small { color: var(--mint); text-shadow: none; }
.preview-badge {
  border: 1px solid #6a8ba2;
  background: #101827;
  color: var(--cyan);
  border-radius: 6px;
  font-weight: 900;
}
.screen {
  padding: clamp(24px,4vw,44px);
  background: rgba(16,24,39,.91);
  border: 3px solid var(--cyan);
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 0 28px rgba(80,227,230,.16);
}
.screen.narrow { max-width: none; margin: 0; }
.narrow > * { max-width: 540px; margin-left: auto; margin-right: auto; }
.narrow > button { display: block; }
.narrow > .text-button { margin-left: auto; margin-right: auto; }
.hero { display: block; }
.hero > div:first-child { max-width: 720px; }
.hero-art { display: none; }
.eyebrow { color: var(--cyan); font-weight: 900; }
h1, h2, .hero-art-copy, .result-cards strong {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 3px 3px 0 #101827;
}
h1 { color: var(--yellow); font-size: clamp(34px,5.5vw,60px); }
h1 span { color: var(--yellow); }
h2 { color: var(--mint); }
.narrow h1 { font-size: clamp(30px,4.5vw,42px); }
.lead { max-width: 620px; color: var(--text); }
.facts { gap: 18px; padding-top: 24px; }
.facts article {
  padding: 20px;
  border: 2px solid #496482;
  border-radius: 8px;
  background: #243457;
}
.facts article > span { color: var(--cyan); }
.facts h2 { font-size: 19px; }
.facts p, .muted, .narrow > p, .field-help { color: var(--soft); }
button, .cta {
  background: var(--yellow);
  color: #101827;
  border: 3px solid #101827;
  border-radius: 8px;
  font-weight: 900;
  box-shadow: 0 4px 0 #101827;
  min-height: 46px;
}
button:hover, .cta:hover { filter: brightness(1.06); }
button:active, .cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #101827; }
button.secondary { background: var(--mint); color: #101827; border-color: #101827; }
button.text-button, button.inline {
  background: transparent;
  color: var(--cyan);
  box-shadow: none;
  text-shadow: none;
  border: 0;
}
button.inline { min-height: auto; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
input, select {
  color-scheme: dark;
  background: #152137;
  color: var(--text);
  border: 2px solid #779bb5;
  font-family: inherit;
}
input:disabled { background: #26344b; color: #b8c7df; }
input::placeholder { color: #b8c7df; opacity: 1; }
input[type="checkbox"] { accent-color: #7df6a6; }
.notice { background: #243457; border-left-color: var(--cyan); color: var(--text); }
.pickups strong { color: var(--mint); }
.result-cards article { background: #243457; border: 2px solid #496482; border-radius: 8px; }
.result-cards strong { color: var(--yellow); }
.result-cards span, th { color: var(--soft); }
table { background: #152137; }
caption { color: var(--soft); padding: 12px; font-size: 13px; }
tr.own { background: #284958; }
.empty { background: #243457; color: var(--soft); border-radius: 8px; }
.marketing { background: #243457; border: 3px solid var(--cyan); border-radius: 8px; }
.marketing .eyebrow { color: var(--cyan); }
.marketing h2 { color: var(--yellow); }
.marketing .cta { background: var(--yellow); color: #101827; }
footer {
  padding: 16px 24px;
  background: #243457f2;
  border: 3px solid #101827;
  border-top-color: var(--cyan);
  border-radius: 0 0 12px 12px;
  color: var(--soft);
}
.game-context { background: #101827ed; color: var(--cyan); padding: 14px 20px; border-radius: 8px 8px 0 0; font-weight: 900; }
body.is-playing .page-shell { width: min(940px, calc(100% - 20px)); }
@media(max-width:700px) {
  .page-shell { width: calc(100% - 20px); padding: 10px 0; }
  .campaign-header { padding: 14px; gap: 10px; }
  .wordmark { font-size: 20px; }
  .screen { padding: 24px 16px; }
  .facts article { padding: 16px; border-bottom: 2px solid #496482; }
  .facts { margin-top: 28px; }
  .result-cards { grid-template-columns: 1fr; }
  .result-cards article { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .result-cards strong { margin-top: 0; }
  .result-cards span { font-size: 13px; }
  .marketing { padding: 20px; }
  footer { padding: 12px 16px; }
  td, th { padding: 12px 7px; overflow-wrap: anywhere; }
}

/* Shared Pölyjahti logo above the registration form. */
#register .register-logo{width:min(350px,100%);max-width:350px;margin:0 auto 24px}
#finish .finish-logo{width:min(350px,100%);max-width:350px;margin:0 auto 24px}
.screen .page-logo{width:min(350px,100%);max-width:350px;margin:0 auto 24px}

/* Shared header logo replaces the former text wordmark. */
.campaign-header{padding:8px 24px;min-height:100px}
.campaign-header .header-logo{display:block;width:250px;max-width:55%;flex-shrink:0}
.header-logo .logo-crop{aspect-ratio:1000/395}
.header-logo .logo-crop img{top:-13.924%}
@media(max-width:700px){.campaign-header{padding:8px 14px;min-height:80px}.campaign-header .header-logo{width:220px;max-width:55%}}