/* Load after page styles. Shared light palette; room imagery keeps its original pixels. */
:root {
  color-scheme: light;
  --base: #f6f5f1;
  --panel: #ffffff;
  --input: #ffffff;
  --ink: #26342f;
  --muted: #626e67;
  --line: #dce1db;
  --gold: #82632e;
  --gold-light: #735322;
  --danger: #ae3632;
  --green: #205b46;
  --green-hover: #154634;
  --soft: #eef2ec;
  --nav: #162c28;
  --content-width: 1200px;
}
body {
  background: var(--base);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
main, footer { max-width: var(--content-width); }
main > section { padding-left: 32px; padding-right: 32px; }
.page-intro { padding-left: 32px; padding-right: 32px; }
header {
  background: var(--nav);
  color: #f4f6ef;
  padding: 24px max(24px, calc((100% - 1136px) / 2));
  border-bottom-color: #324941;
  box-shadow: none;
  --muted: #b7c8be;
  --gold: #e0c48a;
  --gold-light: #f0dbab;
  --line: #496052;
}
header nav a { color: #d4dfd7; }
header nav a:hover, header nav a[aria-current] { color: #f0dbab; }
header nav a[aria-current]:after { bottom: -12px; }
header .nav-join { border-color: #82957a; color: #efdfb8; }
header .nav-join:hover { background: #2a4337; }
header #club-language { background: #243d33; border-color: #526858; color: #e1e8df; }
header .member-nav button { color: #c9d8ce; }
footer { padding: 32px; border-color: var(--line); }
footer .brand { color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
header :focus-visible, .hero-window :focus-visible { outline-color: #e0c48a; }
a:hover { color: var(--green); }
h1, h2, h3 { color: var(--ink); }
h1 { font-weight: 600; letter-spacing: -.04em; }
h2 { font-weight: 600; }
p, .page-intro p, .fine { color: var(--muted); }
.eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .15em; }
.text-link, .page-intro a, td a, .prose a:not(.button),
.form-panel label > small > a, .profile-cue a { color: var(--green); }
.text-link:hover, td a:hover, .prose a:not(.button):hover { text-decoration: underline; }
.button {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: none;
  font-weight: 600;
  border-radius: 5px;
}
.button:hover { background: var(--green-hover); border-color: var(--green-hover); color: #fff; }
.button.secondary { background: #fff; color: var(--green); border-color: #b6c6b9; font-weight: 500; }
.button.secondary:hover { background: var(--soft); border-color: var(--green); color: var(--green-hover); }
button:disabled { cursor: not-allowed; }
body .panel, body .quick-links, body .journal, body .stats,
body .room-card, body .room-stage > .room-caption {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 4px 18px #243c2e05;
}
/* One dark display case on an otherwise light home page. */
.hero { min-height: 540px; gap: 40px; padding-top: 60px; padding-bottom: 54px; }
.hero:before { display: none; }
.hero h1 { color: var(--ink); text-shadow: none; font-size: clamp(42px, 4.4vw, 60px); line-height: 1.25; }
.hero-copy > p:not(.eyebrow) { color: var(--muted); }
.hero-copy .hero-games { color: var(--green) !important; font-size: 15px; }
.hero-games span + span { border-color: #c9d3c8; }
.hero-window {
  --ink: #f3f6ed;
  --muted: #bdcdc2;
  --gold: #e0c48a;
  --gold-light: #f0dbab;
  background: #162c28;
  border-color: #263e34;
  border-radius: 8px;
  box-shadow: 0 16px 38px #21372c20;
}
.hero-window .window-top, .hero-window .window-bottom { background: #162c28; color: #bdcdc2; }
.hero-window a:hover { color: #f0dbab; }
.quick-links { margin-left: 32px; margin-right: 32px; border-radius: 6px; }
.quick-links a:hover { background: #f0f4ed; color: var(--green); }
.quick-links b { font-size: 20px; }
.quick-links span { color: var(--gold); }
.stats strong, .rank-number { color: var(--green); }
.stats > div { border-color: var(--line); }
#refresh, .tabs button, #room-picker button {
  color: var(--ink);
  background: #fff;
  border-color: #cfd7ce;
}
#refresh:hover, .tabs button:hover, #room-picker button:hover { background: var(--soft); }
.tabs button[aria-pressed=true], #room-picker button[aria-pressed=true] {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.room-stage > .room-caption p, .room-caption span { color: var(--muted); }
.room-caption h3 { color: var(--ink); }
.room-card > div { padding: 24px; }
.journal { margin-left: 32px; margin-right: 32px; border-left: 3px solid #a88b50; }
.auth-layout { gap: 64px; padding-top: 60px; }
.auth-layout .page-intro { border-left-color: #b89b5f; }
.auth-layout .form-panel { background: #fff; border-color: var(--line); box-shadow: 0 10px 35px #243c2e08; }
.form-panel input, .form-panel select, .player-search input, textarea {
  background: #fff;
  color: var(--ink);
  border-color: #c5cec4;
  accent-color: var(--green);
  font: inherit;
}
.form-panel input::placeholder, .player-search input::placeholder, textarea::placeholder { color: #727b74; }
.form-panel input:focus, .form-panel select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.form-panel label { color: #38483e; }
.form-status { background: #edf4ed; color: #28533d; border-color: #cadcca; }
.error { color: var(--danger) !important; }
th { background: #eff2ec; color: #556259; }
td, th { border-color: #e0e5de; }
tbody tr:hover { background: #f7f9f4; }
.prose p, .prose li { color: #4f5d54; }
.prose h3, .shot-steps b, .game-guide b { color: var(--green); }
kbd { background: #eff2ec; color: #32443a; border-color: #cbd5c9; box-shadow: 0 2px 0 #dce3d9; }
.release-label { background: #e8f0e5; color: var(--green); }
.avatar-letter { background: #edf2e9; border-color: var(--line); color: var(--green); }
.cue-preview { background: #edf0eb; border-color: var(--line); }
.cue-specs strong, .profile-breakdown .prose b { color: var(--green); }
.empty button { color: var(--green); background: #fff; border-color: #cbd5c9; }
.club-notice { background: #faf5e8; border-color: #e2d5b3; border-left-color: #a88b50; margin-left: 32px; margin-right: 32px; }
.club-notice > span { color: #725622; }
/* Custom selects and feedback are used in both account and admin forms. */
body .player-select summary { background: #fff; border-color: #c5cec4; color: var(--ink); }
body .player-select-list { background: #fff; border-color: #c5cec4; box-shadow: 0 12px 30px #243c2e20; }
body .player-select-list button { color: var(--ink); }
body .player-select-list button:hover,
body .player-select-list button:focus-visible,
body .player-select-list button[aria-selected=true] { background: #eaf2e7; outline-color: var(--green); }
body .feedback-policy { background: #f0f3ea; border-color: #a88b50; }
body .feedback-layout textarea { background: #fff; border-color: #c5cec4; color: var(--ink); }
body .feedback-layout textarea:focus { outline-color: var(--green); }
body .feedback-upload { background: #fafbf7; border-color: #aebfac; }
body .feedback-layout .form-panel .feedback-agree input[type=checkbox] { accent-color: var(--green); }
/* Admin CSS is loaded dynamically: stronger module scopes keep the light palette. */
body .club-admin { max-width: 1200px; }
body .club-admin .tabs { background: #eaf0e7; }
body .club-admin .tabs button.active { color: var(--green); background: #fff; box-shadow: inset 0 -2px var(--green); }
body .club-admin .btn { background: var(--green); border-color: var(--green); color: #fff; }
body .club-admin .btn.secondary { background: #fff; border-color: #c5cec4; color: var(--green); }
body .club-admin .btn.danger { background: #a53a32; color: #fff; border-color: #a53a32; }
body .club-admin .btn:hover:not(:disabled) { filter: brightness(.95); }
body .club-admin .danger-text { color: #a7312b !important; }
body .club-admin .badge.red { background: #fbece8; color: #9b332b; border-color: #e6b9ae; }
body .club-admin .badge.green { background: #edf4e9; color: #305f3d; border-color: #c3d5bd; }
body .club-admin .badge.yellow { background: #faf4e4; color: #765921; border-color: #dfcda4; }
body .club-admin .admin-feedback.error, body .club-admin .alert.error { background: #fff0ed; color: #9b332b; border-color: #dfb1a7; }
body .club-admin .stats { background: transparent; box-shadow: none; }
body .club-admin .stats .value { color: var(--green); }
body .club-admin .bar .fill, body .club-admin .hbar .fill { background: #568268; }
body .club-admin dialog { background: #fff; box-shadow: 0 24px 70px #162c2830; }
body .club-admin dialog::backdrop { background: #14282070; }
body .club-admin .dialog-actions, body .club-admin dialog .card-head { background: #fff; }
@media (max-width: 1050px) {
  .auth-layout { gap: 36px; }
  .hero { gap: 28px; }
}
@media (max-width: 720px) {
  body { background: var(--base); font-size: 14px; }
  header { padding: 20px 22px; }
  header nav a[aria-current]:after { bottom: -6px; }
  main > section, .page-intro, footer { padding-left: 22px; padding-right: 22px; }
  .hero { min-height: 0; padding-top: 38px; gap: 26px; }
  .hero h1, html[lang=en] .hero h1 { font-size: 42px; }
  .hero-window { box-shadow: 0 10px 25px #21372c17; }
  .quick-links, .journal, .club-notice { margin-left: 22px; margin-right: 22px; }
  .auth-layout { padding-top: 18px; gap: 24px; }
  .auth-layout .page-intro { padding-left: 18px; }
  .avatar-settings { flex-wrap: wrap; }
  .avatar-settings input[type=file] { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 720px) {
  .feedback-layout .page-intro h1 { font-size: 32px; line-height: 1.4; letter-spacing: -.03em; }
}

/* Shared type scale follows the download page; the home hero keeps its display role. */
body {
  font-family: "Avenir Next", "Segoe UI", "PingFang SC", sans-serif;
  font-size: 15px;
  line-height: 1.75;
}
header nav, html[lang=en] header nav, header .member-nav { font-size: 13px; line-height: 1.5; }
header .brand small { font-size: 10px; line-height: 1.5; }
header #club-language { font-size: 12px; line-height: 1.5; }
.page-intro {
  padding-top: 48px;
  padding-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
body .page-intro h1,
body .auth-layout .page-intro h1,
body .feedback-layout .page-intro h1 {
  font-family: "Avenir Next", "PingFang SC", sans-serif;
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1.2px;
  max-width: 900px;
  margin: 0 0 14px;
}
.page-intro > p:not(.eyebrow) { max-width: 680px; font-size: 14px; line-height: 1.85; margin-bottom: 0; }
.page-intro .eyebrow { font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: 1.8px; margin-bottom: 15px; }
.auth-layout .page-intro { padding-top: 12px; padding-bottom: 12px; }
h2, .section-head h2, .prose h2, .form-panel h2,
.installation h2, .release-note h2 { font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -.4px; }
h3, .room-card h2, .journal h2, .quick-links b,
html[lang=en] .quick-links b { font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -.2px; }
.prose h3, .shot-steps b, .game-guide b { font-size: 18px; line-height: 1.5; font-weight: 500; }
.prose p, .prose li, .room-card p, .form-panel label,
.form-panel input, .form-panel select, .feedback-layout textarea { font-size: 14px; line-height: 1.8; }
.fine, .section-head > p, .section-head > a, .installation p,
.installation li, .guide-nav a, .form-links, .form-status,
.room-card .eyebrow, .tabs button, .text-link { font-size: 13px; line-height: 1.7; }
.button { font-size: 14px; line-height: 1.5; }
.table-scroll table, table { font-size: 14px; line-height: 1.6; }
th, td small, .stats span, .release-label { font-size: 12px; line-height: 1.6; }
@media (max-width: 1050px) {
  header nav, html[lang=en] header nav { font-size: 13px; }
  .page-intro { padding-top: 38px; padding-bottom: 22px; }
}
@media (max-width: 720px) {
  body { font-size: 14px; }
  body .page-intro h1,
  body .auth-layout .page-intro h1,
  body .feedback-layout .page-intro h1 {
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -.7px;
  }
  .page-intro { padding-top: 32px; padding-bottom: 20px; }
  .page-intro > p:not(.eyebrow) { font-size: 13px; line-height: 1.85; }
  .auth-layout .page-intro { padding-top: 12px; padding-bottom: 8px; }
  header nav, html[lang=en] header nav, header .member-nav { font-size: 12px; }
  h2, .section-head h2, .prose h2, .form-panel h2,
  .installation h2, .release-note h2 { font-size: 23px; }
  h3, .room-card h2, .journal h2, .quick-links b,
  html[lang=en] .quick-links b { font-size: 20px; }
  .fine, .section-head > p, .section-head > a, .installation p,
  .installation li, .guide-nav a, .form-links, .form-status,
  .room-card .eyebrow, .tabs button, .text-link { font-size: 12px; }
}
/* Match the classic site's touch-input sizing: avoid iPhone focus zoom without
   disabling the user's pinch zoom. Covers portrait and landscape touch devices. */
@media (any-pointer: coarse) {
  html body input,
  html body select,
  html body textarea,
  html body [contenteditable="true"] {
    font-size: 16px !important;
  }
}