@font-face {
  font-family: 'RuneScape UF';
  src: url('/fonts/runescape-uf.woff') format('woff'),
       url('/fonts/runescape-uf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #14100a;
  --wood: #5a3f22;
  --wood-deep: #3a2814;
  --wood-darkest: #201409;
  --bevel-hi: #b58a4a;
  --bevel-lo: #140c04;

  --gold-header: #ff981f;
  --gold-text: #ffe066;
  --gold-bright: #ffd93d;
  --straight-yellow: #ffe600;
  --yellow-font: 'RuneScape UF', 'VT323', 'Courier New', monospace;
  --body-text: #d9c7a0;
  --body-text-dim: #a8916a;

  --green: #38b34a;
  --yellow: #d4b02a;
  --purple: #9b59b6;
  --red: #c0392b;

  /* The "wood card" look (a card, modal, gate, etc. with a beveled
     wood-panel surface) — reused as-is on 8-9 different elements
     throughout this file. Centralized here so its look only ever
     needs changing in one place; each user still appends its own
     outer drop-shadow (and any extra ring/glow layer) after
     --wood-bevel, since only that part varies between elements. */
  --wood-card-bg: linear-gradient(180deg, var(--wood) 0%, var(--wood-deep) 100%);
  --wood-bevel:
    inset 0 0 0 1px var(--bevel-lo),
    inset 1px 1px 0 1px var(--bevel-hi),
    inset -2px -2px 0 1px var(--bevel-lo);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: 19px; /* base is 16px — bumps every rem-sized element on the site proportionally */
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-synthesis: none;
  background:
    radial-gradient(ellipse at 50% -10%, #2a1c0e 0%, transparent 55%),
    repeating-linear-gradient(115deg, #171008 0px, #171008 2px, #14100a 2px, #14100a 4px),
    var(--straight-yellow);
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  /* Applies to ALL text on the site via inheritance (text-shadow is
     one of the few CSS properties that cascades down automatically).
     Kept soft/blurred rather than a hard 1px offset — a hard offset
     is what made the pixel font look "thick" and illegible earlier in
     this project; blur gives the same raised/glow depth without that
     problem. First layer = subtle raised depth, second = soft glow. */
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.55), 0 0 6px rgba(255, 214, 64, 0.35);
}

h1, h2, h3, .wordmark-title, .ui-label, button {
  font-family: 'VT323', 'Courier New', monospace;
  font-weight: normal;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(180deg, #4a3218 0%, #2a1c0e 100%);
  border-bottom: 3px solid var(--wood-darkest);
  box-shadow: inset 0 -2px 0 var(--bevel-lo), inset 0 2px 0 var(--bevel-hi);
  position: relative;
}

.topbar-links {
  display: flex;
  gap: 10px;
}
/* Only ever meant to be visible inside the mobile hamburger dropdown
   (see the max-width: 600px block below) — without this, it renders
   inline next to FAQ/Rules/Full Board-View at EVERY screen width,
   duplicating the username/logout button #authArea already shows in
   the corner. */
.mobile-auth-area {
  display: none;
}
.topbar-link-btn {
  font-family: var(--yellow-font);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  color: var(--straight-yellow);
  cursor: pointer;
  background: linear-gradient(180deg, #6b4a24 0%, #3a2814 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 6px;
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 3px 4px 8px rgba(0, 0, 0, 0.5);
}
.topbar-link-btn:hover { background: linear-gradient(180deg, #7d5730 0%, #46311a 100%); }
.topbar-link-btn:active { transform: translateY(1px); }

.mobile-menu-btn {
  display: none;
  font-size: 1.6rem;
  color: var(--straight-yellow);
  background: linear-gradient(180deg, #6b4a24 0%, #3a2814 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}

/* Inverse of .topbar-link-btn (FAQ/Rules) — gold background, brown
   text, instead of brown background with gold text. Roughly double
   the vertical padding of a normal button for a much taller, more
   prominent call-to-action look. */
.submit-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  font-family: var(--yellow-font);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  padding: 34px 22px;
  color: #2a1c0e;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe066 0%, #d4a017 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 8px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.5),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25),
    5px 6px 12px rgba(0, 0, 0, 0.5);
}
.submit-open-btn:hover { background: linear-gradient(180deg, #fff0a3 0%, #e6b31f 100%); }
.submit-open-btn:active { transform: translateY(1px); }
.submit-open-btn:disabled {
  color: #8a8478;
  cursor: not-allowed;
  background: linear-gradient(180deg, #6b6455 0%, #46402f 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.15),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25);
}
.submit-open-btn:disabled:hover { background: linear-gradient(180deg, #6b6455 0%, #46402f 100%); }
.submit-open-btn:disabled:active { transform: none; }
/* Finished-board lockout gets the same gold glow as .team-card-finished
   / .team-finished-badge, instead of the plain grey disabled look
   above — a distinct "you're done, not just blocked" treatment. */
.submit-open-btn.submit-btn-finished:disabled {
  color: var(--gold-bright, #ffd93d);
  background: linear-gradient(180deg, #4a3a12 0%, #2e2308 100%);
  border-color: var(--gold-header, #caa53d);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset -2px -2px 0 rgba(0, 0, 0, 0.3),
    0 0 0 2px var(--gold-header, #caa53d),
    0 0 12px rgba(255, 217, 61, 0.5);
}
.submit-open-btn.submit-btn-finished:disabled:hover {
  background: linear-gradient(180deg, #4a3a12 0%, #2e2308 100%);
}
.submit-btn-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.info-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}
.info-modal {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px 32px;
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 4px;
  box-shadow: var(--wood-bevel), 0 12px 40px rgba(0, 0, 0, 0.6);
}
.info-modal h2 {
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  margin: 0 0 18px;
}
.info-modal h3 {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  font-family: var(--yellow-font);
  margin: 18px 0 6px;
}
.info-modal h3:first-of-type { margin-top: 0; }
.info-modal p {
  font-family: var(--yellow-font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--body-text);
  margin: 0 0 4px;
}
.info-modal code {
  font-family: 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--straight-yellow);
  font-size: 0.88rem;
}
.info-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--body-text-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.info-modal-close:hover { color: var(--straight-yellow); }

.full-board-modal {
  max-width: 900px;
  text-align: center;
}
.full-board-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--body-text-dim);
  margin: -8px 0 16px;
}
.full-board-modal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 2px solid var(--wood-darkest);
}

.submit-modal { max-width: 480px; text-align: left; }
#submitModalSubtitle {
  font-family: var(--yellow-font);
  font-size: 1rem;
}
#submitForm { display: grid; gap: 16px; margin-top: 4px; }
.submit-field { display: grid; gap: 6px; }
.submit-label {
  font-family: var(--yellow-font);
  font-size: 0.95rem;
  color: var(--straight-yellow);
}
.submit-field input,
.submit-field select {
  font-family: var(--yellow-font);
  font-size: 1.05rem;
  padding: 10px 12px;
  color: var(--body-text);
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--wood-darkest);
  border-radius: 4px;
}
/* The select box itself picks up the background above fine — it's the
   expanded dropdown POPUP list that browsers otherwise render with
   their own default (usually light grey) styling regardless. Most
   Chromium/Firefox browsers do respect background/color set directly
   on <option>, though full control varies — macOS Safari in particular
   tends to ignore this and use the system appearance regardless. */
.submit-field select option {
  background: #2a1c0e;
  color: var(--straight-yellow);
}
.submit-field input:focus,
.submit-field select:focus {
  outline: 2px solid var(--straight-yellow);
  outline-offset: 1px;
}
.submit-field input[type="file"] {
  padding: 8px;
  font-family: var(--yellow-font);
  font-size: 1rem;
  color: var(--body-text-dim);
}
.submit-error {
  padding: 10px 12px;
  background: rgba(192, 57, 43, 0.25);
  border: 1px solid #c0392b;
  border-radius: 4px;
  color: #ff9d90;
  font-family: var(--yellow-font);
  font-size: 0.95rem;
}
.submit-success {
  padding: 10px 12px;
  background: rgba(56, 179, 74, 0.25);
  border: 1px solid #38b34a;
  border-radius: 4px;
  color: #7bdb8f;
  font-family: var(--yellow-font);
  font-size: 0.95rem;
  text-align: center;
}
.submit-form-btn {
  font-family: var(--yellow-font);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  color: var(--straight-yellow);
  cursor: pointer;
  background: linear-gradient(180deg, #6b4a24 0%, #3a2814 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 6px;
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 3px 4px 8px rgba(0, 0, 0, 0.5);
}
.submit-form-btn:hover { background: linear-gradient(180deg, #7d5730 0%, #46311a 100%); }
.submit-form-btn:active { transform: translateY(1px); }
.submit-form-btn:disabled { opacity: 0.6; cursor: default; }

/* The actual form Submit button (not the auth-gate Log out button,
   which also uses .submit-form-btn) — matches the gold/dark-brown
   "Submit Item" button on the main page instead of the plain brown
   FAQ/Rules-style scheme every other .submit-form-btn uses. */
#submitFormBtn {
  color: #2a1c0e;
  background: linear-gradient(180deg, #ffe066 0%, #d4a017 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.5),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25),
    3px 4px 8px rgba(0, 0, 0, 0.5);
}
#submitFormBtn:hover {
  background: linear-gradient(180deg, #fff0a3 0%, #e6b31f 100%);
}

.wordmark-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wordmark-icon {
  font-size: 2.2rem;
  line-height: 1;
}
.wordmark-title {
  font-size: 2.4rem;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  letter-spacing: 0.02em;
  line-height: 1;
}

.auth-area button {
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  cursor: pointer;
  background: linear-gradient(180deg, #6b4a24 0%, #3a2814 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 6px;
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 3px 4px 8px rgba(0, 0, 0, 0.5);
}
.auth-area button:hover { background: linear-gradient(180deg, #7d5730 0%, #46311a 100%); }
.auth-area button:active { box-shadow: inset -1px -1px 0 var(--bevel-hi), inset 2px 2px 0 var(--bevel-lo); transform: translateY(1px); }
.auth-area button.secondary { color: var(--straight-yellow); font-family: var(--yellow-font); }
.auth-area .who {
  font-size: 1.15rem;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  margin-right: 16px;
}
.auth-area .identity-row { display: flex; align-items: center; }

main {
  max-width: 1900px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.app-layout {
  display: grid;
  grid-template-columns: 280px 1fr 280px 240px;
  gap: 24px;
  align-items: start;
}
.app-col-left,
.app-stats-col-1,
.app-stats-col-2 {
  display: grid;
  gap: 24px;
}

.board-section { text-align: center; }

.board-frame {
  display: inline-block;
  padding: 10px;
  max-width: 100%;
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: var(--wood-bevel), 5px 6px 12px rgba(0, 0, 0, 0.5);
}
.board-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--wood-darkest);
}

.board-caption {
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  font-size: 0.8rem;
  margin-top: 10px;
}

.choice-banner {
  margin: 24px 0;
  padding: 18px 20px;
  background: linear-gradient(180deg, #5a3f22 0%, #3a2814 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: var(--wood-bevel), 0 0 0 2px #7a4f1a, 5px 6px 12px rgba(0, 0, 0, 0.5);
}
.choice-banner h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}
.choice-banner p {
  margin: 0 0 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  font-size: 0.9rem;
}
.choice-banner .choice-options { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-banner button {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--yellow-font);
  border-radius: 3px;
  /* Same gold/dark-brown scheme as the "Submit Item" button (see
     #submitFormBtn) — these are just as much a call to action, so they
     shouldn't read as a plain secondary brown button. */
  color: #2a1c0e;
  background: linear-gradient(180deg, #ffe066 0%, #d4a017 100%);
  border: 2px solid var(--wood-darkest);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.5),
    inset -2px -2px 0 rgba(0, 0, 0, 0.25),
    3px 4px 8px rgba(0, 0, 0, 0.5);
}
.choice-banner button:hover { background: linear-gradient(180deg, #fff0a3 0%, #e6b31f 100%); }
.choice-banner button:active { transform: translateY(1px); }
.choice-banner button:disabled { opacity: 0.45; cursor: default; transform: none; background: linear-gradient(180deg, #ffe066 0%, #d4a017 100%); }
.choice-banner button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.choice-label { font-size: 1.05rem; }
.choice-outcome { display: flex; flex-direction: column; gap: 2px; }
.choice-outcome-confirm { margin: 0 0 14px; }
.choice-move {
  font-size: 0.85rem;
  font-weight: bold;
  color: #2a1c0e;
}
.choice-outcome-confirm .choice-move { color: var(--straight-yellow); font-size: 0.95rem; }
.choice-arrow { white-space: nowrap; }
.choice-move.choice-good .choice-arrow {
  color: #1e5c2e;
  text-shadow: 0 0 6px rgba(123, 219, 143, 0.7);
}
.choice-move.choice-bad .choice-arrow {
  color: #7a1f16;
  text-shadow: 0 0 6px rgba(255, 107, 91, 0.7);
}
.choice-outcome-confirm .choice-good .choice-arrow { color: #7bdb8f; text-shadow: none; }
.choice-outcome-confirm .choice-bad .choice-arrow { color: #ff6b5b; text-shadow: none; }
.choice-cancel-btn { background: linear-gradient(180deg, #6b4a24 0%, #3a2814 100%) !important; color: var(--straight-yellow) !important; }

.teams-section h2 {
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.team-card {
  position: relative;
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: var(--wood-bevel), 5px 6px 12px rgba(0, 0, 0, 0.5);
  padding: 14px 16px 14px 20px;
}
.team-card::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8, var(--team-color, var(--gold-header)) 60%, #000 130%);
  border: 2px solid var(--wood-darkest);
}
.team-card .team-name {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  margin-bottom: 6px;
}
.team-card .team-tile {
  font-size: 1.1rem;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  margin-bottom: 6px;
}
/* Flags that a tile's name has a fixed number baked into its text
   (e.g. "Collect 10 ...") which the requirement/progress below has
   already doubled — the name itself has no way to reflect that. */
.doubled-badge {
  font-size: 0.85rem;
  color: var(--gold-bright);
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 217, 61, 0.9),
    0 0 16px rgba(255, 217, 61, 0.55);
}
.team-card .team-req .tile-description .req-line,
#tileDetailReq .tile-description .req-line {
  color: var(--body-text-dim);
  font-weight: normal;
}
.team-card .team-req,
#tileDetailReq {
  font-size: 0.98rem;
  color: var(--body-text-dim);
  line-height: 1.4;
  font-family: var(--yellow-font);
}
.team-card .team-req .req-line,
#tileDetailReq .req-line {
  margin: 4px 0;
  color: var(--straight-yellow);
}
.team-card .team-req .req-bullets,
#tileDetailReq .req-bullets {
  margin: 2px 0 6px;
  padding-left: 18px;
  list-style: disc;
}
.team-card .team-req .req-bullets li,
#tileDetailReq .req-bullets li {
  margin: 2px 0;
}
.team-card .team-req strong,
#tileDetailReq strong {
  color: var(--straight-yellow);
}

/* Trophy treatment for a team that's reached the final tile — same
   "modifier class on the container + a highlighted label" pattern as
   .submission-denied / .submission-denied-label above, just gold
   instead of red. */
.team-card.team-card-finished {
  background: linear-gradient(180deg, #4a3a12 0%, #2e2308 100%);
  border-color: var(--gold-header, #caa53d);
  box-shadow: var(--wood-bevel), 0 0 0 2px var(--gold-header, #caa53d), 5px 6px 12px rgba(0, 0, 0, 0.5);
}
.team-finished-badge {
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: bold;
  font-family: var(--yellow-font);
  color: var(--gold-bright, #ffd93d);
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 217, 61, 0.9),
    0 0 16px rgba(255, 217, 61, 0.55);
}

.progress-sets { display: grid; gap: 10px; margin-top: 4px; }
.set-block {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--wood-darkest);
  border-radius: 3px;
  padding: 8px 10px;
}
.set-name {
  font-family: var(--yellow-font);
  color: var(--straight-yellow);
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.set-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.set-items li {
  font-family: var(--yellow-font);
  font-size: 1rem;
  color: var(--body-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.item-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}
.set-items li.acquired {
  color: #7bdb8f;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(123, 219, 143, 0.9),
    0 0 16px rgba(123, 219, 143, 0.55);
}

.tile-pending-roll {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--wood-darkest);
  text-align: center;
  font-family: var(--yellow-font);
  font-size: 1.05rem;
  color: #7bdb8f;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(123, 219, 143, 0.9),
    0 0 16px rgba(123, 219, 143, 0.55);
}

.pandora-box-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--wood-darkest);
  text-align: center;
  font-family: var(--yellow-font);
  font-size: 1.05rem;
}
.pandora-forward {
  color: #7bdb8f;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(123, 219, 143, 0.9),
    0 0 16px rgba(123, 219, 143, 0.55);
}
.pandora-backward {
  color: #ff6b5b;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 107, 91, 0.9),
    0 0 16px rgba(255, 107, 91, 0.55);
}

.team-notice {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--wood-darkest);
  text-align: center;
  font-family: var(--yellow-font);
  font-size: 1.05rem;
}
.team-notice-green {
  color: #7bdb8f;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(123, 219, 143, 0.9),
    0 0 16px rgba(123, 219, 143, 0.55);
}
.team-notice-red {
  color: #ff6b5b;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 107, 91, 0.9),
    0 0 16px rgba(255, 107, 91, 0.55);
}

.tile-chest-event {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--wood-darkest);
  text-align: center;
  font-family: var(--yellow-font);
  font-size: 1.05rem;
  color: #ff6b5b;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 107, 91, 0.9),
    0 0 16px rgba(255, 107, 91, 0.55);
}

.progress-bar-wrap { margin-top: 6px; }
.progress-bar-label {
  font-family: var(--yellow-font);
  color: var(--straight-yellow);
  font-size: 0.95rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.progress-bar-track {
  height: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--wood-darkest);
  border-radius: 7px;
  box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(180deg, #ffe066 0%, #d4a017 100%);
  transition: width 0.3s ease;
}
.progress-bar-track.complete {
  box-shadow:
    3px 4px 8px rgba(0, 0, 0, 0.5),
    0 0 8px rgba(123, 219, 143, 0.9),
    0 0 16px rgba(123, 219, 143, 0.55);
}
.progress-bar-label.acquired {
  color: #7bdb8f;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(123, 219, 143, 0.9),
    0 0 16px rgba(123, 219, 143, 0.55);
}

.team-card .team-finished {
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}
.team-card .team-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--wood-darkest);
  font-size: 0.72rem;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}

.battles-section h2 {
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}

.killcount-section h2 {
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}
.killcount-manual-note {
  margin: -8px 0 14px;
  font-family: var(--yellow-font);
  font-size: 0.85rem;
  color: var(--body-text-dim);
  font-style: italic;
}
/* One single boxed card holding every roster member, rather than a
   separate box per player — each player is a labeled section inside
   it, divided from the next by a dashed rule (added via the adjacent-
   sibling rule below, so the first player gets no leading divider). */
.killcount-list {
  display: grid;
  gap: 0;
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 4px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 12px 14px;
}
.killcount-entry + .killcount-entry {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--wood-darkest);
}
.killcount-rsn {
  font-family: var(--yellow-font);
  font-size: 1.05rem;
  color: var(--straight-yellow);
  margin-bottom: 6px;
}
.killcount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--yellow-font);
  font-size: 0.85rem;
  color: var(--body-text);
  padding: 3px 0;
}
.killcount-boss-name {
  color: var(--body-text-dim);
  flex: 1 1 auto;
  min-width: 0; /* lets long names actually wrap instead of forcing the row wider */
}
.killcount-numbers { font-family: var(--yellow-font); font-size: 0.95rem; color: var(--straight-yellow); }
.killcount-numbers.increased {
  color: #7bdb8f;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(123, 219, 143, 0.9),
    0 0 16px rgba(123, 219, 143, 0.55);
}
.killcount-total-row {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--wood-darkest);
}
.killcount-total-row .killcount-boss-name { color: var(--straight-yellow); font-family: var(--yellow-font); }
.killcount-unavailable {
  font-family: var(--yellow-font);
  font-size: 0.8rem;
  color: var(--body-text-dim);
  font-style: italic;
}
.battle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.battle-list li {
  background: linear-gradient(180deg, #4a2620 0%, #2a1410 100%);
  border: 2px solid #6b2a20;
  border-radius: 10px;
  box-shadow: inset 1px 1px 0 rgba(255, 140, 120, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 4px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 10px 14px;
  font-family: var(--yellow-font);
}
.battle-header {
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #ff3b30;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 59, 48, 0.9),
    0 0 16px rgba(255, 59, 48, 0.6);
  margin-bottom: 4px;
}
.battle-subtext {
  font-size: 1rem;
  color: #ff6b5b;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 6px rgba(255, 107, 91, 0.85),
    0 0 12px rgba(255, 107, 91, 0.5);
}

.chest-battles-section h2 {
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: #ff6b5b;
  font-family: var(--yellow-font);
  text-shadow: 0 0 8px rgba(255, 107, 91, 0.9), 0 0 16px rgba(255, 107, 91, 0.55);
}
.chest-battle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chest-battle-list li {
  background: linear-gradient(180deg, #4a2620 0%, #2a1410 100%);
  border: 2px solid #6b2a20;
  border-radius: 10px;
  box-shadow: inset 1px 1px 0 rgba(255, 140, 120, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 4px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 10px 14px;
  font-size: 1.02rem;
  color: #ff6b5b;
  font-family: var(--yellow-font);
}

.submissions-section h2 {
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}
.submission-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.submission-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 4px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 10px 14px;
}
.submission-main {
  min-width: 0;
}
.submission-item {
  font-size: 1.02rem;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  gap: 6px;
}
.submission-meta {
  font-size: 0.95rem;
  color: var(--body-text-dim);
  font-family: var(--yellow-font);
  margin-top: 2px;
}
.submission-time {
  font-size: 0.92rem;
  color: var(--body-text-dim);
  font-family: var(--yellow-font);
  white-space: nowrap;
  flex-shrink: 0;
}
.submission-list li.submission-denied .submission-item,
.submission-list li.submission-denied .submission-meta,
.submission-list li.submission-denied .submission-time {
  opacity: 0.75;
}
.submission-list li.submission-denied .submission-item {
  text-decoration: line-through;
  text-decoration-color: var(--body-text-dim);
}
.submission-denied-label {
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  font-family: var(--yellow-font);
  color: #ff6b5b;
  text-shadow:
    1px 2px 2px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 107, 91, 0.9),
    0 0 16px rgba(255, 107, 91, 0.55);
}
.submission-list .empty-note {
  color: var(--body-text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  list-style: none;
}
.submission-list li.submission-clickable {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.submission-list li.submission-clickable:hover {
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 0 0 2px var(--gold-header, #caa53d), 4px 5px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
.submission-camera {
  margin-left: 4px;
  opacity: 0.85;
}

#submissionImageModalImg {
  max-height: 70vh;
  object-fit: contain;
}
#submissionImageModalMeta {
  margin-top: 10px;
}

.board-image-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.tile-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tile-hotspot {
  position: absolute;
  width: 45px;
  height: 45px;
  margin: -22.5px 0 0 -22.5px;
  border-radius: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
}
.tile-hotspot:focus-visible { outline: 2px solid var(--straight-yellow); outline-offset: 2px; }

.tile-detail-panel {
  position: relative;
  margin: 16px auto 0;
  max-width: 480px;
  text-align: left;
  padding: 16px 40px 16px 18px;
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 3px;
  box-shadow: var(--wood-bevel);
}
.tile-detail-panel h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}
.tile-detail-status {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--body-text-dim);
}
.tile-detail-status.completed { color: #7bdb8f; }
.tile-detail-status.current { color: var(--gold-bright); }
.tile-detail-panel p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--body-text-dim);
  font-family: var(--yellow-font);
  line-height: 1.4;
  white-space: pre-line;
}
.tile-detail-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--body-text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.tile-detail-close:hover { color: var(--straight-yellow); }

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.auth-gate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 460px;
  width: 100%;
  padding: 40px 36px;
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: var(--wood-bevel), 0 20px 60px rgba(0, 0, 0, 0.7);
}
.auth-gate-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wood-darkest);
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.08);
}
.auth-gate-corner.tl { top: 14px; left: 14px; }
.auth-gate-corner.tr { top: 14px; right: 14px; }
.auth-gate-corner.bl { bottom: 14px; left: 14px; }
.auth-gate-corner.br { bottom: 14px; right: 14px; }

.auth-gate-icon {
  font-size: 2.6rem;
  margin-bottom: 6px;
}
.auth-gate-card h1 {
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}
.auth-gate-card p {
  margin: 0 0 26px;
  color: var(--body-text);
  font-family: var(--yellow-font);
  font-size: 0.95rem;
  line-height: 1.5;
}
.rsn-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.rsn-form input {
  padding: 12px 14px;
  font-family: var(--yellow-font);
  font-size: 1.1rem;
  color: var(--straight-yellow);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--wood-darkest);
  border-radius: 6px;
}
.rsn-form input:focus {
  outline: 2px solid var(--straight-yellow);
  outline-offset: 1px;
}

.rsn-readonly-value {
  padding: 12px 14px;
  font-family: var(--yellow-font);
  font-size: 1.1rem;
  color: var(--straight-yellow);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--wood-darkest);
  border-radius: 6px;
}
.rsn-readonly-note {
  margin: 10px 0 0;
  font-family: var(--yellow-font);
  font-size: 0.85rem;
  color: var(--body-text-dim);
  font-style: italic;
}

.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--wood-darkest);
}
.settings-tab-btn {
  font-family: var(--yellow-font);
  font-size: 1rem;
  padding: 8px 4px;
  color: var(--body-text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.settings-tab-btn:hover { color: var(--straight-yellow); }
.settings-tab-btn.active {
  color: var(--straight-yellow);
  border-bottom-color: var(--gold-bright);
}

.roster-manager-list { display: grid; gap: 14px; }
.roster-team-group {
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 4px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 12px 14px;
}
.roster-team-name {
  font-family: var(--yellow-font);
  font-size: 1.1rem;
  color: var(--team-color, var(--straight-yellow));
  margin-bottom: 8px;
}
.roster-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0;
}
.roster-member-row + .roster-member-row {
  border-top: 1px dashed var(--wood-darkest);
}
.roster-member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.roster-member-rsn {
  font-family: var(--yellow-font);
  font-size: 1rem;
  color: var(--straight-yellow);
}
.roster-member-discord {
  font-family: var(--yellow-font);
  font-size: 0.8rem;
  color: var(--body-text-dim);
}
.roster-member-empty {
  font-family: var(--yellow-font);
  font-size: 0.9rem;
  color: var(--body-text-dim);
  font-style: italic;
}
.roster-member-edit-btn,
.roster-member-save-btn,
.roster-member-cancel-btn {
  font-family: var(--yellow-font);
  font-size: 0.9rem;
  padding: 6px 12px;
  color: var(--straight-yellow);
  background: linear-gradient(180deg, #6b4a24 0%, #3a2814 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.roster-member-edit-btn:hover,
.roster-member-save-btn:hover,
.roster-member-cancel-btn:hover {
  background: linear-gradient(180deg, #7d5730 0%, #46311a 100%);
}
.roster-member-edit-actions { display: flex; gap: 8px; flex-shrink: 0; }
.deny-confirm-actions {
  display: flex;
  gap: 8px;
  flex: 1 1 260px;
}
.deny-reason-input { flex: 1 1 auto; }
.deny-danger-btn {
  background: linear-gradient(180deg, #c0392b 0%, #7a2018 100%);
}
.deny-danger-btn:hover { background: linear-gradient(180deg, #d9483a 0%, #8f2a20 100%); }
.review-tag {
  font-family: var(--yellow-font);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-text-dim);
}

.roster-member-edit-input {
  width: 100%;
  padding: 6px 10px;
  font-family: var(--yellow-font);
  font-size: 1rem;
  color: var(--straight-yellow);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--wood-darkest);
  border-radius: 5px;
}

.identity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.identity-row .who {
  font-family: var(--yellow-font);
  font-size: 1.1rem;
  color: var(--straight-yellow);
}
.role-badge {
  display: inline-block;
  font-family: var(--yellow-font);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 3px 12px;
  border-radius: 999px;
  color: #2a1c0e;
  background: linear-gradient(180deg, #ffe066 0%, #d4a017 100%);
  border: 1px solid var(--wood-darkest);
}
.role-badge-captain {
  background: linear-gradient(180deg, #f0dcae 0%, #b8925a 100%);
}
.account-menu {
  position: relative;
}
.auth-area .account-menu-btn {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--straight-yellow);
  background: linear-gradient(180deg, #6b4a24 0%, #3a2814 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.auth-area .account-menu-btn:hover {
  background: linear-gradient(180deg, #7d5730 0%, #46311a 100%);
}
.account-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  padding: 8px;
  background: linear-gradient(180deg, #3a2814 0%, #241708 100%);
  border: 2px solid var(--wood-darkest);
  border-radius: 8px;
  box-shadow: 5px 6px 12px rgba(0, 0, 0, 0.5);
  z-index: 70;
}
.auth-area .account-menu-item {
  font-family: var(--yellow-font);
  font-size: 1rem;
  text-align: left;
  padding: 8px 12px;
  color: var(--straight-yellow);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.auth-area .account-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* On desktop these two wrappers just disappear from layout (display:
   contents) so their children behave exactly as before — a plain flex
   row of buttons — with the section labels hidden. On mobile they
   become actual labeled vertical sections inside the one hamburger
   dropdown. */
.mobile-nav-section,
.mobile-account-section {
  display: contents;
}
.mobile-section-label {
  display: none;
}

@media (max-width: 600px) {
  .mobile-nav-section,
  .mobile-account-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mobile-section-label {
    display: block;
    font-family: var(--yellow-font);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--body-text-dim);
    margin-bottom: 2px;
  }
  .mobile-account-section .who {
    font-family: var(--yellow-font);
    font-size: 1rem;
    color: var(--straight-yellow);
    margin-bottom: 4px;
  }
}

/* Matches the standard "Log in with Discord" button used across most
   Discord OAuth flows — Discord's own blurple brand color, not the
   site's wood/gold theme, since this is a widely recognized pattern
   people already know how to read at a glance. */
.discord-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 26px;
  color: #ffffff;
  cursor: pointer;
  background: #5865f2;
  border: none;
  border-radius: 24px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.discord-login-btn:hover { background: #4752c4; }
.discord-login-btn:active { transform: translateY(1px); box-shadow: none; }

.team-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(180deg, #3a2814 0%, #241708 100%);
  border-bottom: 2px solid var(--wood-darkest);
}
.team-switch-btn {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  padding: 8px 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
  cursor: pointer;
  background: linear-gradient(180deg, #5c4022 0%, #322111 100%);
  border: 2px solid var(--wood-darkest);
  border-top: 2px solid var(--team-color, var(--bevel-hi));
  border-radius: 6px;
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 3px 4px 8px rgba(0, 0, 0, 0.5);
  opacity: 0.75;
}
.team-switch-btn:hover { opacity: 0.95; }
.team-switch-btn.active {
  opacity: 1;
  box-shadow: inset -1px -1px 0 var(--bevel-hi), inset 2px 2px 0 var(--bevel-lo), 0 0 0 2px var(--team-color, var(--gold-header)), 3px 4px 8px rgba(0, 0, 0, 0.5);
}

.stats-panel {
  background: var(--wood-card-bg);
  border: 2px solid var(--wood-darkest);
  border-radius: 10px;
  box-shadow: var(--wood-bevel), 5px 6px 12px rgba(0, 0, 0, 0.5);
  padding: 16px;
}
.stats-section {
  display: grid;
}
.stats-section h2 {
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  margin-bottom: 14px;
  color: var(--straight-yellow);
  font-family: var(--yellow-font);
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px dashed var(--wood-darkest);
}
.stat-row:first-of-type { border-top: none; }
.stat-label {
  font-family: var(--yellow-font);
  font-size: 1rem;
  color: var(--body-text-dim);
  line-height: 1.3;
}
.stat-value {
  font-family: var(--yellow-font);
  font-size: 1.35rem;
  color: var(--straight-yellow);
  white-space: nowrap;
}
.stat-value.ready { color: #7bdb8f; }

@media (max-width: 1200px) {
  .app-layout { grid-template-columns: 1fr; }

  /* On desktop these four wrappers each stack their own content in
     source order across separate columns. On mobile everything needs
     a DIFFERENT order than the desktop source order (board first,
     then submit, then current tile, etc.) — display: contents makes
     each wrapper "disappear" from layout, promoting its children to
     be direct items of .app-layout's own grid, so they can each get
     an explicit `order` below regardless of where they actually live
     in the HTML. No markup changes needed for this. */
  .app-col-left,
  .app-main,
  .app-stats-col-1,
  .app-stats-col-2 {
    display: contents;
  }

  .board-section { order: 1; }
  #submitBtn { order: 2; }
  #choiceBanner { order: 3; }
  .teams-section { order: 4; }
  .battles-section { order: 5; }
  .chest-battles-section { order: 6; }
  .submissions-section { order: 7; }
  .stats-section { order: 8; }
}

@media (max-width: 600px) {
  .team-switcher { padding: 10px 14px; }
  .topbar { padding: 12px 16px; }
  main { padding: 20px 14px 48px; }
  .info-modal { padding: 22px 18px; max-height: 85vh; }
  .auth-gate-card { padding: 28px 22px; }

  .wordmark-icon { font-size: 1.4rem; }
  .wordmark-title { font-size: 1.15rem; }

  .mobile-menu-btn { display: inline-block; }
  #authArea { display: none; }
  .mobile-auth-area {
    display: block;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--wood-darkest);
  }
  .mobile-auth-area .who { font-size: 0.95rem; }
  .topbar-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #3a2814 0%, #241708 100%);
    border-bottom: 2px solid var(--wood-darkest);
    z-index: 60;
  }
  .topbar-links.open { display: flex; }
  .topbar-link-btn { width: 100%; }
}