:root {
  color-scheme: dark;
  --bg: #1a1b1e;
  --panel: #26282c;
  --accent: #d4af37;
  --text: #e8e6e3;
  --muted: #9a9a9a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* The real in-game chat font as the site-wide default (see assets/osfont/)
     — every element inherits this unless it opts out, rather than needing
     an `os-font` class hunted down on each one individually. The fallback
     stack only matters before the webfont loads or if it somehow fails. */
  font-family: "Runescape Chat Font Regular", system-ui, -apple-system, Segoe UI, sans-serif;
  text-shadow: 1px 1px 0px black;
  background: var(--bg) url('assets/osrs/login_screen/background.png') center / cover fixed;
  background-blend-mode: multiply;
  color: var(--text);
}

header {
  position: relative;
  padding: 1.5rem 2rem 2rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}

/* A carved groove line (the same interface sprite used to build the panel
   borders, tiled edge-on) instead of a flat CSS rule, so even the page's
   top-level divider reads as OSRS chrome rather than plain web styling. */
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  background: repeat-x center / 32px 32px url('assets/osrs/dialog/bottom_line_mode_side_panel_edge_horizontal.png');
  /* Tiled at the sprite's exact native 32x32 size already (no scaling), but
     pixelated guards against any sub-pixel shimmer at odd device pixel ratios. */
  image-rendering: pixelated;
}

header h1 { margin: 0; font-size: 1.6rem; word-break: break-word; }
#event-status { color: var(--muted); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }

main {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Below this, a fixed 300px sidebar either eats most of the viewport width or
   forces horizontal overflow — stack instead, board above standings since
   it's the primary content on a phone. */
@media (max-width: 768px) {
  header { padding: 1rem 1.25rem 1.5rem; }
  header h1 { font-size: 1.3rem; }

  main {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1rem;
  }

  #board { order: 1; }
  #leaderboard { order: 2; }
}

section { background: var(--panel); border-radius: 10px; padding: 1.25rem; }
section h2 { margin-top: 0; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* A touch of real OSRS interface chrome, per the reference screenshot's
   intent as a styling cue rather than a literal layout to recreate: the
   game's own fixed-mode side-panel backdrop (the texture behind the
   inventory/stats tabs in classic layout — distinct from the login-screen
   backdrop the page body uses, so the two don't read as the same photo
   repeated) inside a real carved-frame border. The border is a genuine CSS
   border-image 9-slice — built by compositing 8 separate 32px corner/edge
   sprites from the vendored resource-pack library
   (dialog/bottom_line_mode_side_panel_*) into one sheet with sharp (see the
   composite step in project memory), since border-image needs one image
   with a 3x3 layout, not 8 files. */
/* Both panels get the same carved frame — Standings only had a flat panel
   background before, which read as an afterthought next to the board. */
#board, #leaderboard {
  position: relative;
  padding: 2rem;
  background-image: linear-gradient(rgba(38, 40, 44, 0.85), rgba(38, 40, 44, 0.85)), url('assets/osrs/fixed_mode/side_panel_background.png');
  background-size: cover;
  background-position: center;
  border-style: solid;
  border-width: 24px;
  border-image-source: url('assets/osrs/dialog/_composited_border_9slice.png');
  border-image-slice: 32;
  border-image-width: 24px;
  border-image-repeat: stretch;
}

/* Every team row is its own small carved slot now, same texture/border
   recipe as `.tile` below, rather than a plain list with a divider rule —
   consistent "real interface chrome" treatment across every box on the site. */
#leaderboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
#leaderboard-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  background-image: linear-gradient(rgba(31, 32, 35, 0.85), rgba(31, 32, 35, 0.85)), url('assets/osrs/dialog/background.png');
  background-repeat: repeat;
  background-size: 88px 60px;
  border-style: solid;
  border-width: 8px;
  border-image-source: url('assets/osrs/dialog/_composited_border_9slice.png');
  border-image-slice: 32;
  border-image-width: 8px;
  border-image-repeat: stretch;
}
.pie-icon { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }

/* Small inline interface icons swapped in for what used to be emoji
   (finished flag, rope/gap type labels, at-risk warning) — real OSRS sprites
   instead, sized to sit inline with surrounding text. */
.status-icon, .type-icon, .risk-icon {
  height: 0.9em;
  width: auto;
  vertical-align: -0.1em;
  image-rendering: pixelated;
}
#leaderboard-list .points { color: var(--accent); font-weight: 600; }

/* Same ID-selector-beats-[hidden] specificity issue as #board-path-wrap
   above — currently harmless here since an empty grid with no children
   collapses to nothing visible, but fix it for the same reason regardless. */
#board-grid[hidden] { display: none; }
#board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

@media (max-width: 480px) {
  #board-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
  section { padding: 1rem; }
  .tile { padding: 0.5rem; min-height: 80px; border-width: 6px; border-image-width: 6px; }
  /* The carved-frame border eats real width on a narrow phone otherwise. */
  #board, #leaderboard { padding: 1rem; border-width: 14px; border-image-width: 14px; }
}

/* Same dimmed dialog-texture + 9-slice border recipe as the panels/rows above,
   just at a thinner border-width — border-image-slice stays 32 (it picks the
   same source region), only border-width changes how thick it renders. */
.tile {
  background-image: linear-gradient(rgba(31, 32, 35, 0.85), rgba(31, 32, 35, 0.85)), url('assets/osrs/dialog/background.png');
  background-repeat: repeat;
  background-size: 88px 60px;
  border-style: solid;
  border-width: 10px;
  border-image-source: url('assets/osrs/dialog/_composited_border_9slice.png');
  border-image-slice: 32;
  border-image-width: 10px;
  border-image-repeat: stretch;
  padding: 0.75rem;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tile.locked { opacity: 0.35; }
.tile.complete { box-shadow: 0 0 0 2px var(--accent) inset; }

/* 25x25 matches the vendored skill icons' native pixel size exactly — no
   browser scaling needed for the common case, so no blur to fight in the
   first place; image-rendering: pixelated keeps wiki-sourced icons (which
   vary in native size) crisp/blocky rather than smoothed when they do
   need scaling to fit. */
.tile-icon { width: 25px; height: 25px; object-fit: contain; image-rendering: pixelated; }
.tile .name { margin: 0; font-weight: 600; font-size: 0.9rem; }
.tile .points { color: var(--muted); font-size: 0.75rem; }
.tile .teams { font-size: 0.75rem; color: var(--accent); margin-top: 0.4rem; }

#leaderboard-list li p { margin: 0; }

/* --- Gaps and Ropes winding path board --- */

/* The `#board-path-wrap { display: flex }` rule below has higher specificity
   than the UA stylesheet's `[hidden] { display: none }`, so toggling the
   `hidden` attribute from app.js silently did nothing without this explicit
   override — found by actually looking at a non-TILE_RACE event, where the
   path-board's tile-detail box was visibly bleeding through above the grid. */
#board-path-wrap[hidden] { display: none; }
#board-path-wrap { display: flex; flex-direction: column; gap: 1rem; }

/* The SVG scales to fill the available width via its viewBox — this is what
   makes the whole path board responsive without a separate mobile layout;
   only the tile radius/label size are fixed in SVG-user-space, which stays
   proportional to viewBox width regardless of the rendered pixel size. */
#board-path svg { width: 100%; height: auto; display: block; }

/* Two concentric circles instead of one flat-stroked shape: the outer ring
   carries the real state color (grey/green/red/gold) same as before, the
   inner ring is a thin light "highlight" line just inside it — together
   they read as a beveled metal disc/token rather than a flat outlined
   circle, closer to actual OSRS interface chrome. */
.path-tile .tile-ring-outer {
  fill: url(#tileFill);
  stroke: #2b241c;
  stroke-width: 5;
  cursor: pointer;
}
.path-tile .tile-ring-inner {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1.5;
  pointer-events: none;
}
.path-tile:hover .tile-ring-outer, .path-tile:focus .tile-ring-outer { stroke: var(--accent); }
.path-tile.rope .tile-ring-outer { stroke: #3fae4a; }
.path-tile.gap .tile-ring-outer { stroke: #b23b3b; }
.path-tile:focus { outline: none; }

.tile-index-label {
  fill: var(--muted);
  font-size: 22px;
  /* No font-family override — inherits the site-wide OSRS chat font from
     body; SVG <text> takes CSS font inheritance same as any other element. */
}

/* Tokens sit visually on top of a tile but must not steal its click/tap —
   otherwise tapping exactly on a team's icon is a dead click instead of
   opening that tile's details (found via real click-testing, not just review). */
.team-token-img, .team-token-dot { pointer-events: none; }

.team-token-img {
  filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px black);
  image-rendering: pixelated;
}
.team-token-dot {
  stroke: black;
  stroke-width: 2;
}

/* Same reasoning as .tile-icon — this was the one sprite in the SVG path
   board still missing crisp-scaling, left over from before the icon sizes
   were snapped to the vendored assets' native 25x25. */
.tile-goal-icon {
  image-rendering: pixelated;
}

/* Same tileable dialog-texture + 9-slice border recipe as .tile/leaderboard
   rows — chatbox/background.png was tried here first but it's a single
   discrete panel with its own baked-in metal trim bars, which clashed with
   this box's own separate border-image (cover-fitting it crops those bars to
   an arbitrary, often-misaligned spot rather than framing the box cleanly). */
#tile-detail {
  min-height: 3.5rem;
  background-image: linear-gradient(rgba(31, 32, 35, 0.85), rgba(31, 32, 35, 0.85)), url('assets/osrs/dialog/background.png');
  background-repeat: repeat;
  background-size: 88px 60px;
  border-style: solid;
  border-width: 10px;
  border-image-source: url('assets/osrs/dialog/_composited_border_9slice.png');
  border-image-slice: 32;
  border-image-width: 10px;
  border-image-repeat: stretch;
  padding: 0.75rem 1rem;
}
#tile-detail:empty::before {
  content: "Tap a tile to see its details.";
  color: var(--muted);
  font-size: 0.85rem;
}
#tile-detail .name { margin: 0 0 0.25rem 0; font-weight: 600; }
#tile-detail .meta { font-size: 0.8rem; color: var(--muted); }
#tile-detail .teams-here { color: var(--accent); }