/* HGLive – felles stil. Nattehimmel fra arenaen + Minecrafts egne inventarflater. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  /* Natt over arenaen */
  --night: #141a33;
  --night-2: #1b2246;
  --night-3: #283262;
  --line: #34407a;
  --text: #eceaf6;
  --muted: #a7acce;
  /* Minecraft-inventar */
  --panel: #c6c6c6;
  --panel-hi: #ffffff;
  --panel-lo: #555555;
  --slot: #8b8b8b;
  --slot-lo: #373737;
  --ink: #3f3f3f;
  --ink-soft: #5d5d5d;
  /* Chatfarger */
  --red: #ff5555;
  --gold: #ffaa00;
  --yellow: #ffff55;
  --green: #55ff55;
  --aqua: #55ffff;

  --font-display: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  /* Pikselgrafikk (egentegnet) */
  --sp-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='2' height='1' fill='%231d0606'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%231d0606'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23e3242b'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%23e3242b'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ff9b9b'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%23e3242b'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23e3242b'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%231d0606'/%3E%3Crect x='2' y='4' width='5' height='1' fill='%23e3242b'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%231d0606'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%231d0606'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23e3242b'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231d0606'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%231d0606'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%231d0606'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%231d0606'/%3E%3C/svg%3E");
  --sp-heart-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='2' height='1' fill='%231d0606'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%231d0606'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23e3242b'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%233b1215'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23ff9b9b'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%233b1215'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='3' width='4' height='1' fill='%23e3242b'/%3E%3Crect x='5' y='3' width='3' height='1' fill='%233b1215'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%231d0606'/%3E%3Crect x='2' y='4' width='3' height='1' fill='%23e3242b'/%3E%3Crect x='5' y='4' width='2' height='1' fill='%233b1215'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%231d0606'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%231d0606'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23e3242b'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233b1215'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231d0606'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%231d0606'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%231d0606'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%231d0606'/%3E%3C/svg%3E");
  --sp-heart-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='2' height='1' fill='%231d0606'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%231d0606'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%233b1215'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%233b1215'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231d0606'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%233b1215'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%233b1215'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231d0606'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%233b1215'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231d0606'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%231d0606'/%3E%3Crect x='2' y='4' width='5' height='1' fill='%233b1215'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%231d0606'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%231d0606'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%233b1215'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231d0606'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%231d0606'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%233b1215'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%231d0606'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%231d0606'/%3E%3C/svg%3E");
  --sp-heart-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='2' height='1' fill='%232a1d00'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23f2c230'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%23f2c230'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23f2c230'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff3a0'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23f2c230'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%23f2c230'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='3' width='7' height='1' fill='%23f2c230'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='4' width='5' height='1' fill='%23f2c230'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='5' width='3' height='1' fill='%23f2c230'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23f2c230'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%232a1d00'/%3E%3C/svg%3E");
  --sp-heart-gold-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='2' height='1' fill='%232a1d00'/%3E%3Crect x='6' y='0' width='2' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='1' width='2' height='1' fill='%23f2c230'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%233b1215'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23f2c230'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff3a0'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23f2c230'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%233b1215'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='3' width='4' height='1' fill='%23f2c230'/%3E%3Crect x='5' y='3' width='3' height='1' fill='%233b1215'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='4' width='3' height='1' fill='%23f2c230'/%3E%3Crect x='5' y='4' width='2' height='1' fill='%233b1215'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='5' width='2' height='1' fill='%23f2c230'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233b1215'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23f2c230'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%232a1d00'/%3E%3C/svg%3E");
  --sp-food: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='3' height='1' fill='%232a1607'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%232a1607'/%3E%3Crect x='5' y='1' width='3' height='1' fill='%23b8692f'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232a1607'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%232a1607'/%3E%3Crect x='4' y='2' width='2' height='1' fill='%23b8692f'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23e19a52'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23b8692f'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%232a1607'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%232a1607'/%3E%3Crect x='3' y='3' width='5' height='1' fill='%23b8692f'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23efe6d2'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='4' y='4' width='3' height='1' fill='%23b8692f'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%23efe6d2'/%3E%3Crect x='4' y='5' width='3' height='1' fill='%232a1607'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23efe6d2'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%232a1607'/%3E%3C/svg%3E");
  --sp-food-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='3' height='1' fill='%232a1607'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%232a1607'/%3E%3Crect x='5' y='1' width='3' height='1' fill='%233e2a1c'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232a1607'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%232a1607'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23b8692f'/%3E%3Crect x='5' y='2' width='3' height='1' fill='%233e2a1c'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%232a1607'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%232a1607'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%23b8692f'/%3E%3Crect x='5' y='3' width='3' height='1' fill='%233e2a1c'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23efe6d2'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23b8692f'/%3E%3Crect x='5' y='4' width='2' height='1' fill='%233e2a1c'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%23efe6d2'/%3E%3Crect x='4' y='5' width='3' height='1' fill='%232a1607'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23efe6d2'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%232a1607'/%3E%3C/svg%3E");
  --sp-food-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 8' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='3' height='1' fill='%232a1607'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%232a1607'/%3E%3Crect x='5' y='1' width='3' height='1' fill='%233e2a1c'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232a1607'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%232a1607'/%3E%3Crect x='4' y='2' width='4' height='1' fill='%233e2a1c'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%232a1607'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%232a1607'/%3E%3Crect x='3' y='3' width='5' height='1' fill='%233e2a1c'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%235d564c'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='4' y='4' width='3' height='1' fill='%233e2a1c'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%232a1607'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='5' width='2' height='1' fill='%235d564c'/%3E%3Crect x='4' y='5' width='3' height='1' fill='%232a1607'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%235d564c'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%232a1607'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%232a1607'/%3E%3C/svg%3E");
  --sp-grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%235f9e35'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='2' y='0' width='2' height='1' fill='%235f9e35'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='5' y='0' width='3' height='1' fill='%235f9e35'/%3E%3Crect x='8' y='0' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='9' y='0' width='2' height='1' fill='%235f9e35'/%3E%3Crect x='11' y='0' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='12' y='0' width='3' height='1' fill='%235f9e35'/%3E%3Crect x='15' y='0' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='0' y='1' width='2' height='1' fill='%235f9e35'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%235f9e35'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%237a5134'/%3E%3Crect x='6' y='1' width='3' height='1' fill='%235f9e35'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='10' y='1' width='2' height='1' fill='%235f9e35'/%3E%3Crect x='12' y='1' width='1' height='1' fill='%237a5134'/%3E%3Crect x='13' y='1' width='1' height='1' fill='%235f9e35'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%237cbd4b'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%235f9e35'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%237a5134'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%2394653f'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%237a5134'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%235f9e35'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%237a5134'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%2394653f'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%237a5134'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%2394653f'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%235f9e35'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%237a5134'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%2394653f'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%237a5134'/%3E%3Crect x='12' y='2' width='1' height='1' fill='%2394653f'/%3E%3Crect x='13' y='2' width='1' height='1' fill='%235f9e35'/%3E%3Crect x='14' y='2' width='1' height='1' fill='%237a5134'/%3E%3Crect x='15' y='2' width='1' height='1' fill='%2394653f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%2394653f'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%237a5134'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%2394653f'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%237a5134'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%2394653f'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%237a5134'/%3E%3Crect x='7' y='3' width='2' height='1' fill='%2394653f'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%237a5134'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%2394653f'/%3E%3Crect x='11' y='3' width='1' height='1' fill='%237a5134'/%3E%3Crect x='12' y='3' width='1' height='1' fill='%2394653f'/%3E%3Crect x='13' y='3' width='1' height='1' fill='%237a5134'/%3E%3Crect x='14' y='3' width='1' height='1' fill='%2394653f'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%237a5134'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%237a5134'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%2394653f'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%237a5134'/%3E%3Crect x='3' y='4' width='2' height='1' fill='%2394653f'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%237a5134'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%2394653f'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%237a5134'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%2394653f'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%237a5134'/%3E%3Crect x='10' y='4' width='2' height='1' fill='%2394653f'/%3E%3Crect x='12' y='4' width='1' height='1' fill='%237a5134'/%3E%3Crect x='13' y='4' width='1' height='1' fill='%2394653f'/%3E%3Crect x='14' y='4' width='1' height='1' fill='%237a5134'/%3E%3Crect x='15' y='4' width='1' height='1' fill='%2394653f'/%3E%3Crect x='0' y='5' width='2' height='1' fill='%2394653f'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%237a5134'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%2394653f'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%237a5134'/%3E%3Crect x='5' y='5' width='2' height='1' fill='%2394653f'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%237a5134'/%3E%3Crect x='8' y='5' width='2' height='1' fill='%2394653f'/%3E%3Crect x='10' y='5' width='1' height='1' fill='%237a5134'/%3E%3Crect x='11' y='5' width='1' height='1' fill='%2394653f'/%3E%3Crect x='12' y='5' width='1' height='1' fill='%237a5134'/%3E%3Crect x='13' y='5' width='2' height='1' fill='%2394653f'/%3E%3Crect x='15' y='5' width='1' height='1' fill='%237a5134'/%3E%3C/svg%3E");
}

/* Ikoner (egentegnet pikselgrafikk i Minecraft-stil) */
:root {
  --sp-sword: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Crect x='10' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='11' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='9' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='10' y='1' width='1' height='1' fill='%23f0f0f0'/%3E%3Crect x='11' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='9' y='2' width='1' height='1' fill='%23f0f0f0'/%3E%3Crect x='10' y='2' width='1' height='1' fill='%239fa6ad'/%3E%3Crect x='11' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%23f0f0f0'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%239fa6ad'/%3E%3Crect x='10' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23f0f0f0'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%239fa6ad'/%3E%3Crect x='9' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23f0f0f0'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%239fa6ad'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23f0f0f0'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%239fa6ad'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%23d9a521'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23f0f0f0'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%239fa6ad'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%23d9a521'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%239fa6ad'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='9' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='9' width='1' height='1' fill='%236b4a2b'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23d9a521'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23d9a521'/%3E%3Crect x='6' y='9' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='10' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%236b4a2b'/%3E%3Crect x='3' y='10' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='10' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='10' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='11' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='11' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='11' width='1' height='1' fill='%231b1b1b'/%3E%3C/svg%3E");
  --sp-skull: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23e7e3d4'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%231b1b1b'/%3E%3C/svg%3E");
  --sp-crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='8' y='0' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23f7c933'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23c38f12'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23c38f12'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%23c38f12'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23c38f12'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23c38f12'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23c38f12'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23c38f12'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%232a1d00'/%3E%3C/svg%3E");
  --sp-xp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23e2ff8a'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23e2ff8a'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e2ff8a'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23e2ff8a'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23e2ff8a'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233f8f1f'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233f8f1f'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233f8f1f'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%2386d93f'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%233f8f1f'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%233f8f1f'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233f8f1f'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23163a0b'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23163a0b'/%3E%3C/svg%3E");
  --sp-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%239ad7ff'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23e8b923'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%232a1d00'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%232a1d00'/%3E%3C/svg%3E");
  --sp-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%230d3b0d'/%3E%3C/svg%3E");
  --sp-head: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%234a2f1b'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%233b3bd1'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%233b3bd1'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%237a4a35'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%237a4a35'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23c98e6b'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3C/svg%3E");
  --sp-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='6' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%233fb6ff'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%238a8f96'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%231b1b1b'/%3E%3C/svg%3E");
  --sp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' shape-rendering='crispEdges'%3E%3Crect x='6' y='0' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%2355ff55'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%230d3b0d'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%230d3b0d'/%3E%3C/svg%3E");
  --sp-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='6' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='8' y='0' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='7' y='1' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%237fb238'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%237fb238'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%234a6cff'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%234a6cff'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%237fb238'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%237fb238'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%237fb238'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%234a6cff'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%234a6cff'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%237fb238'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%237fb238'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%234a6cff'/%3E%3Crect x='7' y='4' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='8' y='4' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='2' y='5' width='1' height='1' fill='%237fb238'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%237fb238'/%3E%3Crect x='4' y='5' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23e3242b'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%237fb238'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='3' y='6' width='1' height='1' fill='%237fb238'/%3E%3Crect x='4' y='6' width='1' height='1' fill='%237fb238'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='6' y='6' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='7' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='2' y='7' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='6' y='7' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='7' y='7' width='1' height='1' fill='%23e9dcb0'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='0' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='2' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='3' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='4' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='5' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='6' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='7' y='8' width='1' height='1' fill='%233b2a12'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233b2a12'/%3E%3C/svg%3E");
}
.ic {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.14em;
  background: center / contain no-repeat; image-rendering: pixelated;
}
.ic-sword { background-image: var(--sp-sword); }
.ic-skull { background-image: var(--sp-skull); }
.ic-crown { background-image: var(--sp-crown); }
.ic-xp { background-image: var(--sp-xp); }
.ic-clock { background-image: var(--sp-clock); }
.ic-up { background-image: var(--sp-up); }
.ic-head { background-image: var(--sp-head); }
.ic-shield { background-image: var(--sp-shield); }
.ic-check { background-image: var(--sp-check); }
.ic-heart { background-image: var(--sp-heart); }
.ic-map { background-image: var(--sp-map); }

/* Faktabrikker med ikon: «⏱ Runde 1 av 3», «⬆ 5 går videre», «+2 per kill» */
.facts-row { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.fact {
  display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
  padding: .3em .7em .32em; font-weight: 700; line-height: 1.1;
  background: var(--night-2); border: 1px solid var(--line); color: var(--text);
}
.fact .ic { font-size: 1.15em; }
.fact b { font-family: var(--font-display); font-weight: 800; color: var(--yellow); }
.fact.big { font-size: 1.15em; }
.fact.live { border-color: var(--green); }
.fact.final { border-color: var(--gold); color: var(--gold); }
.th-ic { display: inline-flex; align-items: center; gap: .35em; justify-content: flex-end; }
.th-ic .ic { font-size: 1.3em; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  background: var(--night);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--aqua); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -.005em; }
h2 { font-size: 1.45rem; color: var(--text); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Gress-kant øverst på hver side */
.grass {
  height: 12px;
  background: var(--sp-grass) repeat-x left top / 32px 12px;
  image-rendering: pixelated;
}

/* ------------------------------------------------------------ Minecraft-flater */

.mc-panel {
  background: var(--panel);
  color: var(--ink);
  border: .125em solid #000;
  border-radius: .25em;
  box-shadow: inset .125em .125em 0 var(--panel-hi), inset -.125em -.125em 0 var(--panel-lo);
}

.slot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  background: var(--slot);
  box-shadow: inset .125em .125em 0 var(--slot-lo), inset -.125em -.125em 0 #fff;
  flex: none;
}
.slot img {
  width: 78%;
  height: 78%;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
}
.slot .badge {
  font-family: var(--font-display); font-weight: 800;
  font-size: .62em;
  line-height: 1;
  color: #fff;
  text-shadow: .1em .1em 0 #3f3f3f;
  text-align: center;
  padding: 0 .15em;
  word-break: break-all;
}
.slot.has-img .badge { display: none; }
.slot .amt {
  position: absolute; right: .14em; bottom: .02em; z-index: 2;
  font-family: var(--font-display); font-weight: 800; font-size: .78em; line-height: 1;
  color: #fff; text-shadow: .12em .12em 0 #3f3f3f;
}
.slot .dur {
  position: absolute; left: .25em; right: .25em; bottom: .22em; height: .16em; z-index: 2;
  background: #000;
}
.slot .dur::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--d) * 1%);
  background: hsl(calc(var(--d) * 1.2) 100% 45%);
}
.slot.ench img { filter: drop-shadow(0 0 .12em #c77dff) saturate(1.3); }
.slot.tier-diamond .badge { color: var(--aqua); }
.slot.tier-gold .badge { color: var(--yellow); }
.slot.tier-netherite .badge { color: #b9a6c9; }
.slot.tier-leather .badge { color: #ffbe82; }
.slot.empty { opacity: .9; }

/* Spillerhode – bilde fra nettet, ellers forbokstav */
.head {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 2.4em; height: 2.4em;
  background: var(--hc, #6b6b6b);
  box-shadow: inset 0 0 0 .1em rgba(0, 0, 0, .35);
  overflow: hidden;
}
.head .letter {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15em; color: #fff;
  text-shadow: .08em .08em 0 rgba(0, 0, 0, .5);
}
.head img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated;
}
.head.gone { filter: grayscale(1) brightness(.75); }

/* Liv og mat */
.hearts, .food { display: flex; flex-wrap: wrap; gap: .06em; }
.hearts i, .food i {
  display: block; width: 1.18em; height: 1.05em;
  background: center / contain no-repeat;
  image-rendering: pixelated;
}
.hearts .h-full { background-image: var(--sp-heart); }
.hearts .h-half { background-image: var(--sp-heart-half); }
.hearts .h-empty { background-image: var(--sp-heart-empty); }
.hearts .h-gold { background-image: var(--sp-heart-gold); }
.hearts .h-gold-half { background-image: var(--sp-heart-gold-half); }
.food .f-full { background-image: var(--sp-food); }
.food .f-half { background-image: var(--sp-food-half); }
.food .f-empty { background-image: var(--sp-food-empty); }
.hearts.low i.h-full, .hearts.low i.h-half { animation: low-hp 1s steps(2) infinite; }
@keyframes low-hp { 50% { transform: translateY(-.08em); } }

.heart-inline {
  display: inline-block; width: .9em; height: .8em; vertical-align: -.05em;
  background: var(--sp-heart) center / contain no-repeat; image-rendering: pixelated;
}

/* Lagmerke */
.team {
  display: inline-block;
  font-family: var(--font-text); font-weight: 700; font-size: .78em; line-height: 1;
  padding: .2em .45em .22em;
  color: #111;
  background: var(--tc, #aaa);
  border-radius: .2em;
  white-space: nowrap;
}

/* Tilkoblingsstatus */
.conn {
  font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4em;
}
.conn::before {
  content: ""; width: .6em; height: .6em; background: var(--gold); display: inline-block;
}
.conn.ok::before { background: var(--green); }
.conn.bad { color: var(--red); }
.conn.bad::before { background: var(--red); }

/* Knapper */
.btn {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff; text-decoration: none;
  padding: .45em .9em .5em;
  background: #6f6f6f;
  border: .125rem solid #000;
  box-shadow: inset .125rem .125rem 0 #aaa, inset -.125rem -.125rem 0 #444;
  text-shadow: .1em .1em 0 #3f3f3f;
  cursor: pointer;
}
.btn:hover { background: #7f8fbf; box-shadow: inset .125rem .125rem 0 #bcc8f5, inset -.125rem -.125rem 0 #505a85; }
.btn.small { font-size: .9rem; padding: .3em .7em .35em; }
.btn[aria-pressed="true"] { background: #4b5a95; }

/* ------------------------------------------------------------ vanlige sider */

.site-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  padding: 1rem clamp(1rem, 3vw, 2rem) .9rem;
  border-bottom: 1px solid var(--line);
}
.site-head .title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: var(--text); text-decoration: none;
}
.site-head nav { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; }
.site-head nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.site-head nav a:hover { color: var(--text); }
.site-head nav a[aria-current="page"] { color: var(--yellow); }
.site-head .conn { margin-left: auto; }

.wrap {
  max-width: 1500px; margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
}

.empty-note { color: var(--muted); padding: 1rem 0; }

table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: .9rem;
  padding: .35rem .5rem; border-bottom: 1px solid var(--line);
}
table.data td {
  padding: .45rem .5rem; border-bottom: 1px solid #222b55; vertical-align: middle;
}
table.data th.num, table.data td.num { text-align: right; }
table.data tbody tr:hover { background: var(--night-2); }
table.data a.rowlink { color: var(--text); text-decoration: none; }
table.data a.rowlink:hover { text-decoration: underline; }

.who { display: inline-flex; align-items: center; gap: .55em; min-width: 0; }
.who .head { font-size: .8em; }
.who .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.place {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--text);
}
.place.p1 { background: var(--gold); color: #2a1d00; }
.place.p2 { background: #d5d5d5; color: #2b2b2b; }
.place.p3 { background: #c47a3c; color: #2a1607; }

table.data .k { color: var(--text); font-weight: 700; }
.table-wrap { overflow-x: auto; position: relative; }
.hide-sm-inline { display: inline-flex; gap: .3em; }
.when { white-space: nowrap; }
.when small { display: block; color: var(--muted); font-size: .85em; }

.tag-alive { color: var(--green); font-weight: 600; }
.tag-winner { color: var(--gold); font-weight: 700; }
.tag-out { color: var(--muted); }

/* Rundehode (resultatside) */
.round-head {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.round-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.round-head .facts { color: var(--muted); margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; }
.round-head .facts b { color: var(--text); font-weight: 600; }
.round-state { text-align: right; }
.round-state .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1; }
.round-state .big.live { color: var(--green); }
.round-state .big.win { color: var(--gold); }
.round-state .sub { color: var(--muted); margin-top: .3rem; }

.sb-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 2rem; }
.sb-grid h2 { margin-bottom: .8rem; }
.sb-grid > section, .idx-grid > section { min-width: 0; }

.hpbar { display: inline-flex; align-items: center; gap: .45em; }
.hpbar .bar { width: 5.5em; height: .55em; background: #3b1215; position: relative; }
.hpbar .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #e3242b; }
.hpbar .bar i.abs { background: #f2c230; left: auto; right: 0; }

/* Hendelseslogg */
.log { list-style: none; margin: 0; padding: 0; }
.log li {
  display: grid; grid-template-columns: 3.4em 1fr; gap: .6em;
  padding: .45rem 0; border-bottom: 1px solid #222b55;
}
.log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.log p { margin: 0; }
.log .v { color: var(--red); font-weight: 600; }
.log .k { color: var(--yellow); font-weight: 600; }
.log .w { color: var(--gold); font-weight: 700; }
.log .meta { color: var(--muted); font-size: .9em; }
.log li.ev-round_start p, .log li.ev-pvp_on p { color: var(--aqua); }
.log li.ev-round_end p { color: var(--gold); }

/* Forside */
.now {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center;
  padding: 1.4rem 1.6rem; margin-bottom: 2rem;
  font-size: 1.05rem;
}
.now h2 { color: var(--ink); font-size: clamp(1.4rem, 3vw, 2rem); }
.now p { margin: .35rem 0 0; color: var(--ink-soft); }
.now .actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.now .heads { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; font-size: .8rem; }

.idx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.2rem; }
.idx-grid h2 { margin-bottom: .2rem; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .8rem; }
.sec-head p { margin: 0; color: var(--muted); }
.toggle { display: flex; gap: .4rem; }

/* ------------------------------------------------------------ storskjerm */

body.dash {
  height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr;
}

.dash-head {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2vw;
  padding: 1.2vh 1.6vw 1.1vh;
  border-bottom: 1px solid var(--line);
}
.dash-head .brand { min-width: 0; }
.brand-top {
  display: block; text-decoration: none; color: var(--aqua);
  font-family: var(--font-display); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  font-size: clamp(.75rem, .95vw, 1.2rem);
}
.brand-main {
  font-size: clamp(1.5rem, 2.7vw, 3.4rem); line-height: 1.05; margin: .08em 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-head .round-line { color: var(--muted); font-size: clamp(.9rem, 1.15vw, 1.4rem); margin-top: .2em; }
.dash-head .round-line:empty { display: none; }
.head-facts .facts-row { justify-content: flex-end; font-size: clamp(.85rem, 1.1vw, 1.4rem); }
.dash-head .round-line b { color: var(--text); font-weight: 600; }

.meters { display: flex; gap: 2.2vw; margin: 0; }
.meters div { min-width: 4.5em; }
.meters dt { display: flex; align-items: center; gap: .35em; color: var(--muted); font-size: clamp(.75rem, .95vw, 1.1rem); }
.meters dt .ic { font-size: 1.15em; }
.meters dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 1.9vw, 2.3rem); line-height: 1.1; }
.meters dd.on { color: var(--red); }
.meters dd.off { color: var(--green); }

.alive { display: flex; align-items: baseline; gap: .5vw; }
.alive-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 6.5rem); line-height: .9; color: var(--green); }
.alive-l { color: var(--muted); font-size: clamp(.85rem, 1.15vw, 1.35rem); max-width: 6em; line-height: 1.15; }

.dash-main {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 520px);
  min-height: 0;
}

.arena {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; padding: 1.4vh 1.2vw;
}
.cards {
  display: grid; gap: .55em; align-content: start; min-height: 0;
  font-size: 16px;
}

.card {
  display: grid; gap: .3em;
  padding: .5em .6em .55em;
  min-width: 0;
  transition: transform .3s;
}
.card-top { display: flex; align-items: center; gap: .5em; min-width: 0; }
.card .name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3em; color: var(--ink);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .team { font-size: .72em; }
.card .kills {
  display: inline-flex; align-items: center; gap: .2em;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3em; color: var(--ink);
}
.card .kills img, .card .kills .ic { width: 1em; height: 1em; image-rendering: pixelated; }
.card .vitals { display: grid; gap: .15em; }
.card .gear { display: flex; align-items: center; gap: .18em; }
.card .gear .gap { width: .5em; }
.card .extras {
  display: flex; gap: .7em; align-items: center; min-height: 1.1em;
  color: var(--ink-soft); font-size: .85em; font-weight: 600;
}
.card .extras span { display: inline-flex; align-items: center; gap: .25em; }
.card .extras img { width: 1.1em; height: 1.1em; image-rendering: pixelated; }
.card.offline { opacity: .55; }
.card.hit { animation: hit .35s steps(2); }
@keyframes hit { 50% { box-shadow: inset 0 0 0 .3em rgba(255, 85, 85, .8), inset .125em .125em 0 var(--panel-hi), inset -.125em -.125em 0 var(--panel-lo); } }

.fallen {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center;
  padding-top: 1vh; margin-top: .6vh; border-top: 1px solid var(--line);
  font-size: clamp(.8rem, .95vw, 1.15rem);
}
.fallen:empty { display: none; }
.fallen .lbl { color: var(--muted); margin-right: .3rem; }
.fallen-chip { display: inline-flex; align-items: center; gap: .35em; color: var(--muted); }
.fallen-chip .head { font-size: .62em; }
.fallen-chip b { font-family: var(--font-display); font-weight: 800; color: var(--red); }

.feed {
  border-left: 1px solid var(--line); background: var(--night-2);
  padding: 1.4vh 1.1vw; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.feed h2 { font-size: clamp(1rem, 1.3vw, 1.6rem); margin-bottom: .8vh; }
.feed .log { font-size: clamp(.85rem, 1.02vw, 1.25rem); overflow: hidden; }
.feed .log li { border-bottom-color: var(--night-3); }

.dash-empty {
  display: grid; place-content: center; text-align: center; gap: 1rem; height: 100%;
  color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.8rem);
}
.dash-empty h2 { font-size: clamp(1.8rem, 3.6vw, 4rem); color: var(--text); }
.dash-empty .heads { display: flex; flex-wrap: wrap; justify-content: center; gap: .8em; font-size: clamp(.9rem, 1.2vw, 1.4rem); }
.dash-empty .heads span.p { display: inline-flex; flex-direction: column; align-items: center; gap: .3em; color: var(--text); }
.dash-empty .heads .head { font-size: 1.4em; }

/* Dødsmelding (kanonskudd) */
.toasts {
  position: fixed; bottom: 9vh; left: 50%; transform: translateX(-50%);
  display: grid; gap: .6vh; z-index: 20; pointer-events: none;
  font-size: clamp(14px, 1.15vw, 24px);
}
.toast {
  display: grid; grid-template-columns: auto 1fr; gap: .2em .8em; align-items: center;
  min-width: 22em; max-width: 34em;
  padding: .7em 1em; background: #212121; color: #fff;
  border: .15em solid #000; box-shadow: inset .15em .15em 0 #5a5a5a, inset -.15em -.15em 0 #0d0d0d;
  animation: toast-in .35s steps(4) both;
}
.toast .head { grid-row: span 2; font-size: 1.15em; }
.toast .t1 { font-family: var(--font-display); font-weight: 800; color: var(--red); font-size: 1.25em; line-height: 1.1; }
.toast .t2 { color: #ddd; }
.toast .t2 .k { color: var(--yellow); font-weight: 700; }
.toast.leaving { animation: toast-out .3s steps(3) both; }
@keyframes toast-in { from { transform: translateY(120%); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(120%); opacity: 0; } }

/* Vinnerskjerm */
.winner {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(10, 13, 30, .86);
  font-size: clamp(14px, 1.25vw, 26px);
}
.winner[hidden] { display: none; }
.winner-card {
  width: min(92vw, 46em); padding: 1.6em 2em 1.7em; text-align: center;
  border-color: #000;
  box-shadow: inset .2em .2em 0 #fff6c8, inset -.2em -.2em 0 #8a6a12, 0 0 0 .35em #2a1d00, 0 0 4em rgba(255, 170, 0, .35);
  background: #e8c75a;
  color: #2a1d00;
}
.winner-kicker { margin: 0; font-weight: 700; font-size: 1.1em; }
.winner .wheads { display: flex; justify-content: center; gap: 1em; margin: .9em 0 .6em; }
.winner .wheads .head { font-size: 3.2em; box-shadow: 0 0 0 .08em #2a1d00; }
.winner-name { font-size: 3.6em; color: #2a1d00; overflow-wrap: anywhere; }
.winner-sub { margin: .4em 0 0; font-size: 1.25em; }
.winner .wstats { display: flex; justify-content: center; gap: 2.2em; margin: 1em 0 0; }
.winner .wstats dt { font-size: .9em; }
.winner .wstats dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 2em; line-height: 1.1; }
.winner .podium {
  list-style: none; margin: 1.3em 0 0; padding: .9em 0 0; border-top: .12em solid rgba(42, 29, 0, .3);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 2em; font-size: 1.05em;
}
.winner .podium li { display: inline-flex; align-items: center; gap: .45em; }
.winner .podium b { font-family: var(--font-display); font-weight: 800; }
.winner .podium .head { font-size: .7em; }
.winner-next { margin: 1.1em 0 0; font-size: .95em; color: #4a3500; }
.winner.reveal .winner-card { animation: crown .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.winner.reveal .winner-name { animation: shine 2.2s steps(12) .6s both; }
@keyframes crown { from { transform: scale(.6) translateY(10vh); opacity: 0; } }
@keyframes shine {
  0% { text-shadow: none; }
  50% { text-shadow: 0 0 .25em #fff6c8, 0 0 .6em #ffaa00; }
  100% { text-shadow: none; }
}

.conn.floating { position: fixed; right: 1vw; bottom: 1vh; z-index: 25; font-size: clamp(.7rem, .8vw, 1rem); }

/* Storskjerm: klare for neste runde */
.dash-ready {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 520px);
  min-height: 0;
}
.ready-main {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.6vh;
  min-height: 0; padding: 1.8vh 1.6vw 1.4vh;
}
.ready-top h2 { font-size: clamp(1.6rem, 3vw, 3.8rem); }
.ready-top p { margin: .3em 0 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 2rem); }
.ready-top .go { color: var(--green); }
.ready-grid { display: grid; gap: .5em; align-content: start; min-height: 0; font-size: 20px; }
.ready-none { color: var(--muted); margin: 0; }
.rp {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .6em;
  padding: .45em .6em; min-width: 0;
  background: var(--night-2); border: .1em solid var(--line);
}
.rp .head { grid-row: span 2; font-size: .95em; }
.rp-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-st { grid-column: 2; font-size: .85em; font-weight: 600; color: var(--muted); line-height: 1.2; }
.rp-sg {
  grid-column: 3; grid-row: 1 / span 2;
  font-size: .75em; font-weight: 700; padding: .15em .4em;
  color: var(--yellow); border: .12em solid var(--yellow);
}
.rp.s-spawn {
  background: var(--panel); color: var(--ink); border-color: #000;
  box-shadow: inset .12em .12em 0 var(--panel-hi), inset -.12em -.12em 0 var(--panel-lo);
}
.rp.s-spawn .rp-st { color: #116b11; }
.rp.s-spawn .rp-sg { color: #6b4b00; border-color: #8a6a12; }
.rp.s-game .rp-st { color: var(--gold); }
.rp.s-offline { background: transparent; border-style: dashed; }
.rp.s-offline .rp-name { color: var(--muted); }

.ready-side { gap: 2vh; font-size: clamp(.9rem, 1.1vw, 1.4rem); }
.side-box h2 { font-size: 1.15em; margin-bottom: .35em; }
.side-box p { margin: 0 0 .4em; }
.side-box .small { color: var(--muted); font-size: .88em; }
.side-box .gold { color: var(--gold); }
.side-box.warn { border-left: .3em solid var(--gold); padding-left: .7em; }
.side-box.warn h2 { color: var(--gold); }
.cmd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700;
  color: var(--yellow); background: #0d1126; padding: .05em .35em;
}

/* Storskjerm: resultatliste */
.dash-standings { min-height: 0; padding: 1.4vh 2vw 1.2vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1vh; }
.st-title { font-size: 1.05em; color: var(--muted); font-weight: 700; margin: 0 0 .4em; }
.st-rules .facts-row { justify-content: center; font-size: clamp(.85rem, 1.15vw, 1.5rem); }
.st-rules .fact { background: transparent; }
.st-wrap { min-height: 0; overflow: hidden; font-size: 24px; }
.st-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .4em 2em;
  margin-bottom: .7em;
}
.st-head h2 { font-size: 1.9em; }
.st-head .desc { margin: .2em 0 0; color: var(--muted); }
.st-head .facts { margin: 0; text-align: right; color: var(--muted); font-size: .78em; }
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4em; align-items: start; }
.st-wrap table.data th { font-size: .72em; }
.st-wrap table.data td { padding: .22em .4em; }
.st-wrap .who .head { font-size: .72em; }
.st-wrap .place { font-size: .9em; }

/* ------------------------------------------------------------ konkurranse */

.comp-intro {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem 2.5rem;
  padding: 1.4rem 1.6rem; margin-bottom: 1.6rem;
}
.comp-intro h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--ink); }
.comp-intro h2 { font-size: 1.2rem; color: var(--ink); }
.comp-intro p { margin: .5rem 0 0; color: var(--ink-soft); }
.comp-intro .how p:first-of-type { color: var(--ink); font-weight: 600; }
.comp-intro .small { font-size: .93rem; }

.stage-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.stage-nav a {
  padding: .35em .8em; color: var(--text); text-decoration: none; font-weight: 600;
  background: var(--night-2); border: 1px solid var(--line);
}
.stage-nav a:hover { border-color: var(--aqua); }

.stage { margin-bottom: 2.6rem; scroll-margin-top: 1rem; }
.stage-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .8rem 2rem;
  margin-bottom: .8rem;
}
.stage-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.stage-head .desc { margin: .3rem 0 0; }
.stage-head .facts { margin: .25rem 0 0; color: var(--muted); }
.leader { display: inline-flex; align-items: center; gap: .5em; font-size: 1.1rem; }
.leader .lbl { color: var(--muted); }
.leader b { color: var(--gold); }

table.standings td.sum { font-family: var(--font-display); font-weight: 800; font-size: 1.12em; }
table.standings th.rnd a { color: inherit; }
table.standings td.rnd { color: #cfd2ea; }
table.standings .dash { color: var(--muted); }
table.standings tr.is-adv { background: rgba(85, 255, 85, .07); }
table.standings tr.is-adv td.pos { box-shadow: inset .25em 0 0 var(--green); }
table.standings tr.not-played .nm { color: var(--muted); }
table.standings tr.cut td { padding: 0; border-bottom: 0; }
table.standings tr.cut span {
  display: block; padding: .15em 0 .35em; text-align: center;
  border-top: .15em dashed var(--green); color: var(--green); font-size: .8em; font-weight: 600;
}
table.standings td.st { white-space: nowrap; }
.chip {
  display: inline-block; margin-right: .3em; padding: .12em .5em .15em;
  font-size: .78em; font-weight: 700; line-height: 1.2; white-space: nowrap; border-radius: .2em;
}
.chip.adv { background: var(--green); color: #0a2a0a; }
.chip.tie { background: var(--gold); color: #2a1d00; }
.chip.absent { color: var(--muted); border: 1px solid var(--line); }
.tie-note { color: var(--gold); margin: .6em 0 0; }

/* ------------------------------------------------------------ admin */

.me { margin-left: auto; color: var(--muted); display: inline-flex; gap: .7em; align-items: center; }
.me #meName { color: var(--text); font-weight: 600; }
.linkbtn {
  font: inherit; font-weight: 600; color: var(--aqua); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: .15em;
}
.linkbtn.danger { color: var(--red); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: rgba(0, 0, 0, .12); padding: .1em .35em; }

.login { max-width: 430px; margin: 3rem auto; padding: 1.6rem 1.8rem 1.8rem; }
.login h1 { color: var(--ink); margin-bottom: 1rem; }
.login form { display: grid; gap: 1rem; }
.login .field { color: var(--ink); }
.login .field input { background: #fff; color: #111; border-color: #555; }
.login .btn { justify-self: start; }
.login .form-msg { color: #9b0d0d; }
.hint { color: var(--ink-soft); margin: 1.2rem 0 0; line-height: 1.6; }
.form-msg { color: var(--red); font-weight: 600; margin: .4rem 0 0; min-height: 1.2em; }

.field { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; color: var(--text); min-width: 0; }
.field small { font-weight: 400; color: var(--muted); font-size: .85rem; }
.field input, .field select, .member-tools select, .search, .note-in, .inline-link input, select.ovr {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--text);
  background: #0e1330; border: 1px solid #4a569a; border-radius: .2em; padding: .5em .6em; min-width: 0;
}
.field input:focus, .field select:focus, .member-tools select:focus, .search:focus, .note-in:focus,
.inline-link input:focus, select.ovr:focus {
  outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--yellow);
}
.check { display: flex; align-items: center; gap: .55em; cursor: pointer; }
.check input { width: 1.2em; height: 1.2em; accent-color: var(--green); flex: none; }

.tabs { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 2px solid var(--line); margin-bottom: 1.4rem; }
.tab-btn {
  font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--muted);
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: .7em 1em; cursor: pointer;
}
.tab-btn:hover { color: var(--text); }
.tab-btn[aria-selected="true"] { color: var(--yellow); border-bottom-color: var(--yellow); }

.panel { background: var(--night-2); border: 1px solid var(--line); padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; }
.panel h2 { margin-bottom: .4rem; }
.panel > p { margin: .4rem 0; }

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; margin: 1rem 0 1.3rem; }
.mode {
  display: grid; gap: .3em; align-content: start; text-align: left;
  font: inherit; color: var(--text); background: var(--night); border: 2px solid var(--line);
  padding: .9em 1em; cursor: pointer;
}
.mode b { font-size: 1.15rem; }
.mode span { color: var(--muted); font-size: .93rem; }
.mode:hover { border-color: var(--aqua); }
.mode[aria-checked="true"] {
  background: var(--panel); color: var(--ink); border-color: #000;
  box-shadow: inset .15em .15em 0 var(--panel-hi), inset -.15em -.15em 0 var(--panel-lo);
}
.mode[aria-checked="true"] span { color: var(--ink-soft); }
.mode[aria-checked="true"] b::before { content: "✔ "; color: #116b11; }
.screen-stage { max-width: 600px; }
.status-line { margin: 1rem 0 .6rem; }
.status-line:empty { display: none; }
.status-line.bad { color: var(--red); font-weight: 600; }
.now-box p { margin: .3rem 0; }

.stages-layout { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: .8rem; }
.stage-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .45rem; }
.stage-item {
  display: grid; gap: .25em; width: 100%; text-align: left;
  font: inherit; color: var(--text); background: var(--night-2); border: 1px solid var(--line);
  padding: .6em .8em; cursor: pointer;
}
.stage-item:hover { border-color: var(--aqua); }
.stage-item.active { border-color: var(--yellow); box-shadow: inset .3em 0 0 var(--yellow); }
.stage-item .meta { color: var(--muted); font-size: .88rem; }
.chip.pub { background: var(--green); color: #0a2a0a; }
.chip.draft { background: #3a4170; color: var(--text); }
.chip.used { background: #2c3566; color: var(--text); font-weight: 600; margin: .1em .3em .1em 0; }
.draw summary { cursor: pointer; font-weight: 700; }
.draw form { display: grid; gap: .8rem; margin-top: 1rem; }
.draw .btn { justify-self: start; }

.stage-editor { min-width: 0; }
.ed-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.ed-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.dirty { color: var(--gold); font-weight: 700; }
.btn.danger { background: #8a2a2a; box-shadow: inset .125rem .125rem 0 #c95b5b, inset -.125rem -.125rem 0 #4d1111; }
.btn.danger:hover { background: #a33434; }
.btn:disabled { opacity: .6; cursor: default; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.2rem; align-items: start; }
.span2 { grid-column: span 2; }
.span3 { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); padding: 1rem 1.2rem 1.2rem; margin: 1.4rem 0 0; min-width: 0; }
legend { font-weight: 800; font-size: 1.1rem; padding: 0 .4em; }
legend .count { color: var(--muted); font-weight: 600; font-size: .9em; }
fieldset > p { margin: 0 0 .8rem; }
.pick-wrap { max-height: 430px; overflow: auto; border: 1px solid var(--line); margin-top: .7rem; }
table.pick tr.picked { background: rgba(255, 255, 85, .09); }
table.pick td:first-child { width: 2.4em; }
table.pick input { width: 1.25em; height: 1.25em; accent-color: var(--yellow); }
.note { color: var(--gold); font-weight: 600; margin-right: .4em; }
.member-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .9rem; }
.adv-pick { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.adv-pick select { max-width: 22rem; }
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.members li {
  display: inline-flex; align-items: center; gap: .45em;
  background: var(--night-2); border: 1px solid var(--line); padding: .25em .3em .25em .35em;
}
.members .head { font-size: .62em; }
.members .x {
  font: inherit; font-size: 1.25rem; line-height: 1; color: var(--muted);
  background: none; border: 0; padding: 0 .3em; cursor: pointer;
}
.members .x:hover { color: var(--red); }
.lk { color: var(--green); font-weight: 800; }
.preview { margin-top: 1.6rem; }
.preview h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.preview > p { margin: 0 0 .8rem; }
select.ovr { font-size: .88rem; padding: .25em .3em; }
select.ovr.set { border-color: var(--gold); color: var(--gold); }

.note-in { width: 100%; min-width: 10em; }
.note-in.saved { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.search { min-width: 18em; }
.inline-link { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.inline-link input { width: 9em; padding: .35em .5em; }
td.actions { white-space: nowrap; }
td.actions .linkbtn + .linkbtn { margin-left: .9em; }
.points .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.empty-row td { padding: 1rem .5rem; }

.flash {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 50;
  max-width: 90vw; padding: .7em 1.2em;
  background: #1d5c1d; color: #fff; font-weight: 700;
  border: 2px solid #000; box-shadow: 0 .3em 1em rgba(0, 0, 0, .45);
}
.flash.bad { background: #7a1d1d; }

/* ------------------------------------------------------------ SG-kobling */

body.linkpage main { display: grid; place-items: center; min-height: calc(100vh - 12px); padding: 1.5rem 1rem; }
.link-card { width: min(560px, 100%); padding: 1.6rem 1.8rem 1.8rem; }
.link-card h1 { color: var(--ink); font-size: clamp(1.5rem, 4.5vw, 2rem); margin-bottom: .8rem; }
.link-card p { color: var(--ink); margin: .7rem 0; }
.link-card .mc { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.link-card .mc .head { font-size: 1rem; }
.link-card .btn { margin-top: .6rem; font-size: 1.15rem; }
.link-card .fine { color: var(--ink-soft); font-size: .92rem; border-top: 1px solid #9a9a9a; padding-top: .9rem; margin-top: 1.4rem; }
.link-card .ok { color: #116b11; }
.link-card .bad { color: #9b0d0d; }

/* ------------------------------------------------------------ kamper (status, piler, kampside) */

.chip.st-draft { background: #3a4170; color: var(--text); }
.chip.st-live { background: var(--green); color: #0a2a0a; }
.chip.st-finished { background: var(--gold); color: #2a1d00; }
.mc-panel .chip.st-draft, .login .chip.st-draft { background: #5d5d5d; color: #fff; }

.mv { display: inline-block; min-width: 2.2em; margin-left: .25em; font-size: .78em; font-weight: 700; text-align: left; }
.mv.up { color: var(--green); }
.mv.down { color: var(--red); }
.mv.same { color: var(--muted); }
table.standings.with-moves td.pos { white-space: nowrap; }
table.standings th.rnd.last, table.standings td.rnd.last { background: rgba(85, 255, 255, .07); color: var(--text); font-weight: 700; }

.kicker {
  display: block; font-size: .42em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aqua); margin-bottom: .2em;
}
.st-head .kicker { font-size: .55em; }

.rp-sg.ok { color: var(--green); border-color: var(--green); }
.rp.s-spawn .rp-sg.ok { color: #116b11; border-color: #116b11; }

.mini-board { list-style: none; margin: 0; padding: 0; display: grid; gap: .25em; }
.mini-board li { display: flex; align-items: baseline; gap: .45em; }
.mini-board .r { min-width: 1.8em; color: var(--muted); font-weight: 700; }
.mini-board .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-board b { font-family: var(--font-display); font-weight: 800; }
.mini-board .mv { min-width: 1.8em; }

/* Resultater (liste over kamper) */
.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.match-link {
  display: grid; gap: .3rem; padding: 1rem 1.2rem; text-decoration: none; color: var(--text);
  background: var(--night-2); border: 1px solid var(--line); border-left: .35rem solid var(--line);
}
.match-link:hover { border-color: var(--aqua); }
.match-link.st-live { border-left-color: var(--green); }
.match-link.st-finished { border-left-color: var(--gold); }
.ml-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.ml-title { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.ml-desc { color: var(--muted); }
.ml-sum b.gold, .gold { color: var(--gold); }
.ml-meta { color: var(--muted); font-size: .9rem; }

/* Kampside */
.crumbs { margin: 0 0 .8rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.match-head { margin-bottom: 1.6rem; }
.match-head h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.match-head .desc { margin: .4rem 0 0; font-size: 1.1rem; }
.match-head .facts { margin: .6rem 0 0; color: var(--muted); }
.match-head .facts .chip { margin-right: .5em; }
.match-head .rule { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.match-board { margin-bottom: 2.4rem; }
.match-board h2, .match-rounds h2 { margin-bottom: .6rem; }
.match-board > div > p.muted { margin: 0 0 .6rem; }
.champ {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; padding: .9rem 1.1rem;
  background: #e8c75a; color: #2a1d00; border: .125em solid #000;
  box-shadow: inset .15em .15em 0 #fff6c8, inset -.15em -.15em 0 #8a6a12;
}
.champ .head { font-size: 1.1rem; }
.champ .lbl { display: block; font-size: .85rem; font-weight: 700; }
.champ b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }
.round-card { margin: 0 0 1.6rem; padding: 1rem 1.2rem; background: var(--night-2); border: 1px solid var(--line); scroll-margin-top: 1rem; }
.round-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .6rem; }
.round-card h3 { font-size: 1.3rem; }
.round-card .meta { margin: 0; color: var(--muted); }
.round-card .meta a { color: var(--aqua); }
table.rr td.gain { font-weight: 700; color: var(--green); }
table.rr td.sum { font-family: var(--font-display); font-weight: 800; }
table.rr tr.is-win { background: rgba(255, 170, 0, .08); }

/* Admin: kampstyring */
.match-ctl { border: 2px solid var(--line); background: var(--night-2); padding: .9rem 1rem; margin: 0 0 1.2rem; }
.mc-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; color: var(--muted); }
.mc-line .chip { font-size: .9rem; }
.mc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.mc-new:empty { display: none; }
.mc-new { margin-top: .9rem; }
.mc-new > p { margin: 0; }
.new-rounds { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.new-rounds li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .55rem .7rem; background: rgba(85, 255, 85, .07); border: 1px solid #2f7a2f;
}
.btn.go { background: #2f7a2f; box-shadow: inset .125rem .125rem 0 #6fc46f, inset -.125rem -.125rem 0 #174717; }
.btn.go:hover { background: #3a913a; }
.live-match { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
.live-match > p { margin: 0 0 .3rem; }

/* Skade per runde, og spillere som ikke er med i kampen */
table.standings td.rnd .pts { display: block; }
table.standings .dmg {
  display: inline-flex; align-items: center; gap: .3em; justify-content: flex-end;
  font-size: .7em; font-weight: 600; color: #cfd2ea; white-space: nowrap; line-height: 1.3;
}
table.standings .dmg b { font-weight: 700; margin-right: .35em; }
table.standings .dmg b:last-child { margin-right: 0; }
table.standings .dmg .ic { font-size: 1.05em; }
table.standings td.rnd { white-space: nowrap; }
.dmg-note { color: var(--muted); font-size: .85em; margin: .5em 0 0; }
.ready-top .warn { color: var(--red); }
.rp.s-intruder { background: rgba(255, 85, 85, .14); border: .14em solid var(--red); }
.rp.s-intruder .rp-st { color: #ff8a8a; }
.rp-sg.no { color: #fff; background: var(--red); border-color: var(--red); }
.card .intr { display: none; }
.card.intruder { box-shadow: inset 0 0 0 .3em var(--red), inset .125em .125em 0 var(--panel-hi), inset -.125em -.125em 0 var(--panel-lo); }
.card.intruder .intr {
  display: block; justify-self: start; padding: .1em .45em;
  font-size: .8em; font-weight: 800; color: #fff; background: var(--red);
}

/* Brikker på kampside og resultatliste */
.match-head .facts, .match-head .rule { margin: .7rem 0 0; }
.match-head .when { margin: .5rem 0 0; color: var(--muted); font-size: .92rem; }
.match-head .when:empty { display: none; }
.match-head .rule .fact { background: transparent; }
.ml-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.ml-meta .facts-row { font-size: .88rem; }
.ml-when { color: var(--muted); }
.comp-intro .rules-box .facts-row { margin-top: .5rem; }
.comp-intro .rules-box .fact { background: rgba(0, 0, 0, .08); color: var(--ink); border-color: #8b8b8b; }
.comp-intro .rules-box .fact b { color: #116b11; }
.round-card .meta .ic { vertical-align: -.16em; }

/* ------------------------------------------------------------ tilpasning */

@media (max-width: 1100px) {
  .sb-grid, .idx-grid { grid-template-columns: minmax(0, 1fr); }
  .comp-intro { grid-template-columns: minmax(0, 1fr); }
  .stages-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .round-head { grid-template-columns: 1fr; }
  .round-state { text-align: left; }
  .now { grid-template-columns: 1fr; padding: 1.1rem; }
  table.data .hide-sm, table.data .hide-sm-inline { display: none; }
  table.data td, table.data th { padding: .4rem .25rem; }
  .hpbar .bar { width: 3.2em; }
  .site-head .conn { margin-left: 0; }
  .toasts { top: auto; bottom: 1vh; }

  body.dash { height: auto; overflow: auto; }
  .dash-head { grid-template-columns: 1fr auto; }
  .dash-head .meters { grid-column: 1 / -1; order: 3; flex-wrap: wrap; gap: 1rem 1.4rem; }
  .dash-main { grid-template-columns: 1fr; }
  .feed { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .cards { font-size: 15px !important; grid-template-columns: 1fr !important; }
  .toast { min-width: 0; max-width: 92vw; }
  .dash-ready { grid-template-columns: 1fr; }
  .ready-grid { font-size: 16px !important; grid-template-columns: 1fr 1fr !important; }
  .st-cols { grid-template-columns: 1fr; }
  .st-wrap { overflow: visible; font-size: 16px !important; }
  .st-head .facts { text-align: left; }
  .comp-intro { padding: 1.1rem; }
  .form-grid, .points .form-grid { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
  .ed-actions { margin-left: 0; }
  .search { min-width: 0; width: 100%; }
  .me { margin-left: 0; }
  .panel { padding: 1rem; }
  fieldset { padding: .8rem .8rem 1rem; }
}

/* ------------------------------------------------------------ live-kart */

body.map-page { grid-template-rows: auto auto minmax(0, 1fr); }
.map-head .brand-main .ic { font-size: .78em; vertical-align: -.04em; margin-right: .1em; }
.map-main {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 460px);
  min-height: 0;
}
.map-main.side-closed { grid-template-columns: minmax(0, 1fr); }
.map-main.side-closed .map-side { display: none; }

.map-stage { position: relative; min-height: 0; overflow: hidden; background: #0b1022; }
.map-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.map-stage canvas:active { cursor: grabbing; }

.map-top {
  position: absolute; left: 12px; top: 12px; right: 70px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; pointer-events: none;
}
.map-top > * { pointer-events: auto; }
.map-select {
  font: inherit; font-weight: 700; color: var(--text); background: rgba(11, 16, 34, .88);
  border: 1px solid var(--line); padding: .35em .6em; max-width: 100%;
}
.map-badge {
  background: rgba(11, 16, 34, .88); border: 1px solid var(--line); padding: .32em .7em;
  font-weight: 700; font-size: .92em;
}
#delayBadge { border-color: var(--gold); color: var(--gold); }

.map-tools {
  position: absolute; right: 12px; top: calc(12px + 44px * var(--u, 1)); display: flex; flex-direction: column; gap: 6px;
}
.map-tools button {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; padding: 0;
  font: 800 1.35rem/1 var(--font-display); color: var(--text);
  background: rgba(11, 16, 34, .9); border: 1px solid var(--line); cursor: pointer;
}
.map-tools button:hover { background: var(--night-3); }
.map-tools button[aria-pressed="true"] { color: var(--green); border-color: var(--green); }
.map-tools button[aria-expanded="true"] { border-color: var(--aqua); }
.map-tools .ic { font-size: 1.2rem; }

.map-coords {
  position: absolute; right: 12px; bottom: 10px; color: var(--muted); font-size: .85rem; font-weight: 700;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none;
}
.map-note {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 86%;
  background: rgba(11, 16, 34, .94); border: 1px solid var(--line); padding: 1em 1.4em;
  font-size: clamp(1rem, 1.5vw, 1.8rem); font-weight: 700; text-align: center;
}
.map-note.soft {
  top: auto; bottom: 46px; transform: translateX(-50%);
  font-size: clamp(.9rem, 1vw, 1.2rem); font-weight: 600; color: var(--muted); padding: .5em 1em;
}

.map-side {
  min-height: 0; overflow-y: auto; padding: 1.2vh 1vw 2.6rem; border-left: 1px solid var(--line);
  font-size: clamp(.95rem, 1.05vw, 1.4rem);
}
.map-sub {
  display: flex; align-items: center; gap: .45em; margin: .2em 0 .55em;
  font-size: .95em; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
}
.map-sub .ic { font-size: 1.15em; }
.map-sub:not(:first-child) { margin-top: 1.1em; }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mp-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .55em;
  padding: .38em .6em; background: var(--night-2); border: 1px solid transparent; cursor: pointer;
}
.mp-row:hover { border-color: var(--line); }
.mp-row.sel { border-color: var(--yellow); box-shadow: inset 3px 0 0 var(--yellow); }
.mp-row.offline { opacity: .55; }
.mp-dot { width: .95em; height: .95em; background: var(--c); border: 2px solid #0b0f1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.mp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mp-hp { display: inline-flex; align-items: center; gap: .3em; font-weight: 800; color: hsl(calc(var(--f) * 115) 85% 64%); }
.mp-k { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3em; min-width: 2.3em; font-weight: 800; }
.mp-row.out { grid-template-columns: 2.4em minmax(0, 1fr) auto; row-gap: .1em; background: transparent; cursor: default; }
.mp-row.out:hover { border-color: transparent; }
.mp-row.out .mp-name { color: var(--muted); }
.mp-row.out.win .mp-name { color: var(--gold); }
.mp-pl { color: var(--muted); font-weight: 800; }
.mp-why { grid-column: 2 / -1; font-size: .82em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mp-row.out .mp-k { grid-column: 3; grid-row: 1; }
.mp-why .k { color: var(--red); font-weight: 700; }

/* Styring av serveren (admin) */
.ctl-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: .4rem 0 .2rem; }
.ctl-times { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.ctl-times .field { max-width: 20rem; }
.ctl-dialog { width: min(640px, calc(100vw - 2rem)); padding: 1.3rem 1.4rem; color: var(--ink); }
.ctl-dialog::backdrop { background: rgba(6, 8, 20, .7); }
.ctl-dialog h2 { color: var(--ink); margin-bottom: .6rem; }
.ctl-dialog fieldset { margin: 0 0 .9rem; }
.ctl-dialog .muted { color: var(--ink-soft); }
.ctl-dialog code { background: rgba(0, 0, 0, .08); color: var(--ink); }
.ctl-dialog legend { color: var(--ink); }
.ctl-dialog .check { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; flex-wrap: wrap; }
.ctl-dialog select { font: inherit; padding: .25em .4em; }
.ctl-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.ctl-map {
  display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: center; text-align: left;
  padding: .55rem .7rem; font: inherit; color: var(--ink); background: #d8d8d8; border: 2px solid #8b8b8b; cursor: pointer;
}
.ctl-map .ic { grid-row: span 2; font-size: 1.6rem; }
.ctl-map span { font-size: .85rem; color: var(--ink-soft); }
.ctl-map.sel { border-color: #116b11; background: #e9f7e4; box-shadow: inset 0 0 0 1px #116b11; }
.ctl-map:disabled { opacity: .5; cursor: not-allowed; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .8rem; }

/* Avspilling av en ferdig runde */
.map-replay {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(760px, calc(100% - 24px));
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  background: rgba(11, 16, 34, .92); border: 1px solid var(--line);
}
.map-replay button {
  font: 800 1rem/1 var(--font-display); color: var(--text); background: var(--night-2);
  border: 1px solid var(--line); padding: .45em .6em; cursor: pointer;
}
.map-replay button:hover { background: var(--night-3); }
.map-replay .rp-play { min-width: 2.6em; color: var(--green); border-color: var(--green); }
.map-replay input[type=range] { flex: 1; min-width: 60px; accent-color: var(--green); }
.rp-time { font-weight: 700; white-space: nowrap; font-size: .95rem; }
.rp-speed { display: flex; }
.rp-speed button { padding: .45em .45em; font-size: .85rem; }
.rp-speed button[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); }
.rp-live { white-space: nowrap; font-weight: 700; font-size: .9rem; }
.replay-link { font-weight: 700; color: var(--aqua); white-space: nowrap; }
.map-page:has(.map-replay:not([hidden])) .map-coords { bottom: 74px; }
.map-page:has(.map-replay:not([hidden])) .conn.floating { display: none; }

@media (max-width: 760px) {
  .map-replay { flex-wrap: wrap; bottom: 8px; gap: .4rem; }
  .map-replay input[type=range] { order: 5; flex-basis: 100%; }
  .rp-live { display: none; }
}

@media (max-width: 760px) {
  body.dash.map-page { height: 100vh; height: 100dvh; overflow: hidden; }
  .map-page .dash-head { padding: .5rem .8rem; gap: .2rem .8rem; }
  .map-page .dash-head .meters { gap: .2rem 1.2rem; }
  .map-page .dash-head .meters dd { font-size: 1.1rem; }
  .map-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .map-main.side-closed { grid-template-rows: minmax(0, 1fr); }
  .map-side { border-left: 0; border-top: 1px solid var(--line); max-height: 36vh; padding: .6rem .8rem 2.4rem; font-size: 15px; }
  .map-tools button { width: 2.3rem; height: 2.3rem; }
  .map-coords { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}