/* Pixel font converted from the bitmap atlas (npm run fonts). One font pixel
   is 1/10em, so keep sizes at multiples of 10px for crisp edges:
   20px = 2px pixels, 40px = 4px pixels (Pixi fontSize / 3.2). */
@font-face {
  font-family: "PixelFont";
  src: url("../assets/fonts/PixelFont.ttf") format("truetype");
  font-display: block;
}

/* mirrors src/constants/Palette.ts */
:root {
  --lavender: #A7A4E0;
  --purple: #514689;
  --light: #B2B4B2;
  --dark: #54585A;
  --mid: #707372;
  --white: #FCFCFC;

  /* Resurrect 64, the shared art palette (R64 in Palette.ts) */
  --r64-ink: #2E222F;
  --r64-shadow: #3E3546;
  --r64-slate: #625565;
  --r64-dusk: #966C6C;
  --r64-sand: #AB947A;
  --r64-plum-grey: #694F62;
  --r64-mauve-grey: #7F708A;
  --r64-steel: #9BABB2;
  --r64-mist: #C7DCD0;
  --r64-white: #FFFFFF;
  --r64-maroon: #6E2727;
  --r64-brick: #B33831;
  --r64-vermilion: #EA4F36;
  --r64-coral: #F57D4A;
  --r64-crimson: #AE2334;
  --r64-red: #E83B3B;
  --r64-orange: #FB6B1D;
  --r64-amber: #F79617;
  --r64-gold: #F9C22B;
  --r64-wine: #7A3045;
  --r64-rust: #9E4539;
  --r64-copper: #CD683D;
  --r64-tan: #E6904E;
  --r64-butter: #FBB954;
  --r64-mud: #4C3E24;
  --r64-olive: #676633;
  --r64-moss: #A2A947;
  --r64-lime: #D5E04B;
  --r64-lemon: #FBFF86;
  --r64-pine: #165A4C;
  --r64-forest: #239063;
  --r64-emerald: #1EBC73;
  --r64-leaf: #91DB69;
  --r64-pear: #CDDF6C;
  --r64-charcoal: #313638;
  --r64-spruce: #374E4A;
  --r64-fern: #547E64;
  --r64-sage: #92A984;
  --r64-celery: #B2BA90;
  --r64-deep-teal: #0B5E65;
  --r64-teal: #0B8A8F;
  --r64-jade: #0EAF9B;
  --r64-mint: #30E1B9;
  --r64-aqua: #8FF8E2;
  --r64-navy: #323353;
  --r64-indigo: #484A77;
  --r64-cobalt: #4D65B4;
  --r64-blue: #4D9BE6;
  --r64-sky: #8FD3FF;
  --r64-aubergine: #45293F;
  --r64-grape: #6B3E75;
  --r64-violet: #905EA9;
  --r64-lavender: #A884F3;
  --r64-lilac: #EAADED;
  --r64-mulberry: #753C54;
  --r64-berry: #A24B6F;
  --r64-rose: #CF657F;
  --r64-pink: #ED8099;
  --r64-raspberry: #831C5D;
  --r64-cerise: #C32454;
  --r64-hot-pink: #F04F78;
  --r64-salmon: #F68181;
  /* each player's colour (Palette PLAYER_COLORS): P1 blue, P2 red, P3 green, P4 purple */
  --p1: var(--r64-blue);
  --p1-light: var(--r64-sky);
  --p2: var(--r64-red);
  --p2-light: var(--r64-salmon);
  --p3: var(--r64-emerald);
  --p3-light: var(--r64-leaf);
  --p4: var(--r64-lavender);
  --p4-light: var(--r64-lilac);
  --r64-peach: #FCA790;
  --r64-blush: #FDCBB0;

  --text-xs: 10px;
  --text-sm: 20px;
  --text-md: 30px;
  --text-lg: 40px;

  /* glyphs are 9 font pixels tall (7 cap + 2 descender), so this line-height
     is exactly the glyph box - unitless so it scales with each font-size */
  --line-tight: 0.9;
  /* 1 font pixel of breathing room above and below */
  --line: 1.1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--light);
  overflow: hidden;
  position: relative;
  font-family: "PixelFont", monospace;
  font-size: var(--text-sm);
  line-height: var(--line);
  color: var(--dark);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

img {
  image-rendering: pixelated;
}

h1,
h2,
h3,
p {
  margin: 0;
  font: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* press feel shared by the hub's text buttons */
.press:hover {
  transform: translateY(1px);
}

.press:active {
  transform: translateY(2px);
}

/* purple text button - Create Room +, < Back, < Leave */
.link-button {
  padding: 4px;
  color: var(--purple);
  line-height: var(--line-tight);
}

.link-button:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

/* stand-in thumbnail for a room with no game picked yet */
.thumb-empty {
  display: grid;
  place-items: center;
  background: var(--mid);
  color: var(--light);
  font-size: var(--text-lg);
  line-height: 1;
}

/* stepped pixel corners for the console's plastic parts (the TV, the
   controller ports' strip): --corner is each step, three steps a corner */
.pixel-corners,
.tv,
.player-slots {
  --c: var(--corner, 4px);
  clip-path: polygon(
    0 calc(var(--c) * 2), var(--c) calc(var(--c) * 2), var(--c) var(--c), calc(var(--c) * 2) var(--c), calc(var(--c) * 2) 0,
    calc(100% - var(--c) * 2) 0, calc(100% - var(--c) * 2) var(--c), calc(100% - var(--c)) var(--c), calc(100% - var(--c)) calc(var(--c) * 2), 100% calc(var(--c) * 2),
    100% calc(100% - var(--c) * 2), calc(100% - var(--c)) calc(100% - var(--c) * 2), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c) * 2) calc(100% - var(--c)), calc(100% - var(--c) * 2) 100%,
    calc(var(--c) * 2) 100%, calc(var(--c) * 2) calc(100% - var(--c)), var(--c) calc(100% - var(--c)), var(--c) calc(100% - var(--c) * 2), 0 calc(100% - var(--c) * 2)
  );
}

/* 9-slice frame from panel-borderless.png (8px slices drawn at 2x) - painted
   over the padding box, so padding sets the content inset */
.panel {
  border: 0 solid transparent;
  border-image: url("../assets/images/panel-borderless.png") 8 fill / 16px repeat;
  image-rendering: pixelated;
}

/* keyboard Tab focus, and arrow-key/gamepad navigation (HubController adds
   .nav-focus; the mouse removes it) */
:focus-visible,
.nav-focus :focus {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

/* where the Pixi canvas is parked when no game is running - a room's game
   moves it into the game window (App.attachCanvas) */
#viewport {
  display: none;
}

/* Preact hub UI */
#ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#ui > * {
  pointer-events: auto;
}


/* a box over the whole console, e.g. a guest saving their account (console/SaveAccount) */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(46, 34, 47, 0.6);
}

.dialog {
  width: 600px;
  padding: 24px 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--light);
}

.dialog-title {
  font-size: var(--text-md);
  color: var(--white);
}

.dialog-text {
  color: var(--lavender);
}

/* Google's own button (ui/shared/GoogleButton) - its look is Google's */
.google-button {
  min-height: 40px;
  display: flex;
  justify-content: center;
}

.dialog-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--lavender);
}

.dialog .title-button:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}


/* a panel down the right of the console: friends (console/Friends) or settings (console/Settings) */
.side-panel {
  position: absolute;
  top: 60px;
  right: 12px;
  bottom: 12px;
  z-index: 15;
  width: 440px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--light);
}

.side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.side-panel-title {
  font-size: var(--text-md);
  color: var(--white);
}


/* the settings panel (console/Settings), a side panel like the friends one */
.settings-panel .side-panel-scroll section {
  line-height: var(--line-tight);
}

.settings-panel .link-button {
  color: var(--lavender);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}

.settings-kind {
  color: var(--white);
}

.settings-hint {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  line-height: var(--line);
  color: var(--light);
}

/* the music and sound effects volumes: a pixel track filled to the level, a square knob */
.settings-volume {
  display: grid;
  grid-template-columns: auto 1fr 52px;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  margin-bottom: 12px;
}

/* the first a little below the heading, like the name and account under theirs */
.settings-volume:first-of-type {
  padding-top: 5px;
}

.settings-volume-name {
  grid-column: 1 / -1;
  color: var(--white);
}

.settings-volume-value {
  text-align: right;
  color: var(--lavender);
}

.settings-mute {
  display: flex;
  align-items: center;
  padding: 2px;
  color: var(--lavender);
}

.settings-volume.is-muted .settings-mute,
.settings-volume.is-muted .settings-volume-value {
  color: var(--r64-red);
}

.settings-volume.is-muted input[type=range] {
  opacity: 0.4;
}

.settings-volume input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.settings-volume input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border: 2px solid var(--r64-ink);
  background: linear-gradient(to right, var(--lavender) var(--level), var(--r64-shadow) var(--level));
}

.settings-volume input[type=range]::-moz-range-track {
  height: 4px;
  border: 2px solid var(--r64-ink);
  background: linear-gradient(to right, var(--lavender) var(--level), var(--r64-shadow) var(--level));
}

.settings-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid var(--r64-ink);
  border-radius: 0;
  background: var(--white);
  box-shadow: inset -2px -2px 0 var(--light);
}

.settings-volume input[type=range]::-moz-range-thumb {
  width: 8px;
  height: 12px;
  border: 2px solid var(--r64-ink);
  border-radius: 0;
  background: var(--white);
  box-shadow: inset -2px -2px 0 var(--light);
}

.settings-volume input[type=range]:focus {
  outline: none;
}

.settings-volume input[type=range]:focus-visible::-webkit-slider-thumb,
.nav-focus .settings-volume input[type=range]:focus::-webkit-slider-thumb {
  background: var(--lavender);
}

.settings-volume input[type=range]:focus-visible::-moz-range-thumb,
.nav-focus .settings-volume input[type=range]:focus::-moz-range-thumb {
  background: var(--lavender);
}


/* a shared world (WorldView): a big window in the middle, under its own header */
.world {
  position: absolute;
  top: 70px;
  bottom: 20px;
  left: 0;
  right: 0;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.world-name {
  margin-left: 20px;
  padding: 4px 0;
  color: var(--dark);
  line-height: var(--line-tight);
}

/* the game, and (a map editor) a panel beside it */
.world-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.world-side {
  box-sizing: border-box; /* (its width is set by WorldView: the room beside the game) */
  flex: none;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 12px 14px;
  color: var(--light);
}

/* Lithalia's map editor (games/lithalia/editor/EditorPanel), in the world's side panel */
.editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 10px;
  line-height: var(--line);
}

.editor input,
.editor select,
.editor textarea {
  font: inherit;
  font-size: 10px;
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--r64-ink);
  padding: 2px 4px;
  min-width: 0;
}

.editor input[type="number"] {
  width: 56px;
}

.editor input[type="checkbox"] {
  width: auto;
}

.editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.editor-title {
  font-size: 20px;
  line-height: var(--line-tight);
  color: var(--white);
}

.editor-note {
  color: var(--mid);
}

.editor-notice {
  padding: 4px 6px;
  color: var(--white);
  background: var(--r64-crimson);
  cursor: pointer;
}

.editor-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--r64-slate);
}

.editor-heading {
  font-size: 10px;
  color: var(--lavender);
  text-transform: uppercase;
}

.editor-buttons,
.editor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.editor-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

/* the palette: a tab per tileset of the map */
.editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

.editor-maps li select {
  flex: 1;
  min-width: 0;
}

.editor-maps li .editor-button {
  flex: none;
}

.editor-button {
  padding: 3px 6px;
  color: var(--light);
  background: var(--r64-shadow);
  border: 1px solid var(--r64-slate);
  font-size: 10px;
}

.editor-button.is-on {
  color: var(--r64-ink);
  background: var(--r64-gold);
  border-color: var(--r64-gold);
}

.editor-button:disabled {
  opacity: 0.4;
}

.editor-layers,
.editor-areas,
.editor-maps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editor-areas li {
  display: flex;
  gap: 2px;
}

.editor-area {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  text-align: left;
}

.editor-layer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
}

.editor-layer.is-on,
.editor-maps .is-on {
  background: var(--r64-indigo);
}

.editor-layer .link-button,
.editor-maps .link-button {
  font-size: 10px;
  padding: 0;
  color: var(--light);
}

.editor-layer.is-locked .link-button {
  opacity: 0.6;
}

.editor-lock {
  display: flex;
  padding: 1px;
  color: var(--r64-slate);
  background: none;
  border: none;
}

.editor-lock.is-on {
  color: var(--r64-gold);
}

.editor-layer-name {
  flex: 1;
  min-width: 0;
  font-size: 10px;
}

.editor-people {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  color: var(--r64-lemon);
  border-top: 1px dashed var(--r64-lemon);
  border-bottom: 1px dashed var(--r64-lemon);
}

.editor-mini {
  padding: 0 4px;
  color: var(--r64-lemon);
  background: none;
  border: 1px solid var(--r64-lemon);
  font-size: 10px;
}

.editor-mini:disabled {
  opacity: 0.3;
}

.editor-maps li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 1px 4px;
}

.editor-mini-head {
  justify-content: space-between;
  align-items: center;
}

.editor-zoom {
  min-width: 36px;
  text-align: center;
  color: var(--white);
}

.editor-mini {
  position: relative;
  align-self: center;
  overflow: hidden;
  cursor: pointer;
  outline: 1px solid var(--r64-ink);
  touch-action: none;
}

.editor-mini canvas {
  display: block;
  image-rendering: pixelated;
}

.editor-mini-view {
  position: absolute;
  outline: 1px solid var(--r64-gold);
  box-shadow: 0 0 0 1px var(--r64-ink);
  pointer-events: none;
}

.editor-palette {
  max-height: 240px;
  overflow: auto;
  background: repeating-conic-gradient(var(--r64-slate) 0% 25%, var(--r64-shadow) 0% 50%) 0 0 / 16px 16px;
}

.editor-palette-sheet {
  position: relative;
  cursor: pointer;
}

.editor-palette-sheet img {
  display: block;
  image-rendering: pixelated;
  user-select: none;
}

.editor-palette-pick {
  position: absolute;
  outline: 2px solid var(--r64-gold);
  box-shadow: 0 0 0 3px var(--r64-ink);
  pointer-events: none;
}

.editor-object {
  border-left: 4px solid;
  padding-left: 8px;
}

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.editor-grid label,
.editor-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editor-check {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.editor-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.world-window {
  position: relative;
  flex: none;
  box-shadow: 0 0 0 4px var(--r64-ink);
}


/* a game's controls (console/Controls): two keyboard keys and a controller button per action */
.controls-header {
  align-items: baseline;
  gap: 24px;
}

.controls-header .link-button {
  color: var(--purple);
}

.controls-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: normal;
  color: var(--dark);
}

.controls-table {
  border-collapse: separate;
  border-spacing: 8px 6px;
  color: var(--dark);
  line-height: var(--line-tight);
}

.controls-table thead th {
  padding-bottom: 4px;
  font-size: var(--text-sm);
  font-weight: normal;
  text-align: left;
  color: var(--purple);
}

.controls-table tbody th {
  padding-right: 16px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

/* changed from the game's defaults */
.controls-table tr.is-changed th {
  color: var(--purple);
}

.controls-table .link-button {
  color: var(--purple);
  font-size: var(--text-xs);
}

/* a box to press: what's bound there, or "PRESS A KEY" while it waits */
.binding-box {
  width: 150px;
  height: 36px;
  padding: 0 8px;
  border: 2px solid var(--mid);
  background: var(--r64-ink);
  color: var(--white);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--line-tight);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.binding-box:hover,
.binding-box:focus-visible {
  border-color: var(--lavender);
  outline: none;
}

.binding-box.is-waiting {
  border-color: var(--r64-gold);
}

.binding-wait {
  color: var(--r64-gold);
  font-size: var(--text-xs);
  animation: binding-blink 800ms steps(1) infinite;
}

@keyframes binding-blink {
  50% {
    opacity: 0.3;
  }
}

.binding-none {
  color: var(--mid);
}

/* a key: a keycap */
.binding-key {
  min-width: 22px;
  padding: 0 6px;
  background: var(--r64-mist);
  color: var(--r64-ink);
  box-shadow: inset 0 -3px 0 var(--r64-steel), 0 0 0 2px var(--r64-ink);
  text-align: center;
}

/* a gamepad's other buttons and sticks: a pill */
.binding-pill {
  padding: 0 8px;
  background: var(--r64-slate);
  color: var(--white);
  border-radius: 9px;
}

/* a face button: the diamond with it lit in its colour, and its place */
.binding-face {
  display: flex;
  align-items: center;
  gap: 8px;
}

.face-off {
  fill: var(--r64-slate);
}

.face-lit.face-0 { fill: var(--p1); } /* bottom */
.face-lit.face-1 { fill: var(--p4); } /* right */
.face-lit.face-2 { fill: var(--p2); } /* left */
.face-lit.face-3 { fill: var(--p3); } /* top */

.controls-note {
  max-width: 640px;
  margin: 12px 8px 0;
  font-size: var(--text-xs);
  line-height: var(--line);
  color: var(--dark);
}

/* server messages like "That room is full" (ui/state notice) */
.notice {
  position: absolute;
  z-index: 16; /* over the friends panel */
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--purple);
  color: var(--white);
  line-height: var(--line-tight);
}


/* Legendbound: naming your signature move, over the game screen */
.rpg-name-prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  min-width: 360px;
  color: var(--light);
}

.rpg-name-prompt-title {
  color: var(--lavender);
}

.rpg-name-prompt input {
  font: inherit;
  font-size: 20px;
  padding: 4px 8px;
  text-transform: uppercase;
}

.rpg-name-prompt-hint {
  color: var(--mid);
  font-size: 10px;
}


/* a room's game, covering the game window (canvas at exactly 2x) */
.game-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: #000;
}

.game-screen .loading-bar {
  width: 60%;
}

/* a fullscreen game's chat (GameChat): new messages slide up at the bottom
   left and fade; open (Enter), a see-through backing and a box to type in */
.game-chat {
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: min(640px, 45%);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.game-chat.is-open {
  background: rgba(16, 16, 20, 0.6);
  pointer-events: auto;
}

.game-chat-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.game-chat-line {
  color: var(--white);
  line-height: var(--line);
  overflow-wrap: anywhere;
  text-shadow: 2px 2px 0 #000;
  padding: 2px 8px;
  background: rgba(16, 16, 20, 0.45); /* readable over bright ground */
  animation: game-chat-in 200ms ease-out, game-chat-out 800ms ease-in 5200ms forwards;
}

/* open, every line stays put on the one backing */
.game-chat.is-open .game-chat-line {
  animation: none;
  background: none;
}

.game-chat-name {
  color: var(--lavender);
}

/* a Supporter's line: a gold star before a gold name */
.game-chat-star {
  display: inline-flex;
  margin-right: 4px;
  color: var(--r64-gold);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.game-chat-name.is-supporter {
  color: var(--r64-gold);
}

@keyframes game-chat-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes game-chat-out {
  to { opacity: 0; }
}

.game-chat-input {
  display: flex;
  gap: 4px;
}

/* the scope your lines go to (chatScope): click it, or Tab, for the list */
.game-chat-scope {
  position: relative;
  flex: none;
  display: flex;
}

.game-chat-channel {
  flex: none;
  width: 100px;
  padding: 6px 8px;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  font: inherit;
  line-height: var(--line-tight);
  cursor: pointer;
}

/* the list of scopes, opening up from it */
.game-chat-scopes {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  width: 100px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #000;
}

/* (the pointer sits in the left padding, so the list never changes width) */
.game-chat-scopes li {
  position: relative;
  padding: 4px 8px 4px 24px;
  line-height: var(--line-tight);
  white-space: nowrap;
  cursor: pointer;
}

.game-chat-scopes li.is-pointed {
  background: rgba(255, 255, 255, 0.12);
}

.game-chat-scopes li.is-pointed::before {
  content: ">";
  position: absolute;
  left: 8px;
}

.game-chat-scopes li.is-off {
  opacity: 0.35;
  cursor: default;
}

/* Global, Zone, Guild, Party along the top: which lines you see */
.game-chat-tabs {
  display: flex;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.game-chat-tab {
  padding: 2px 0;
  color: var(--white);
  line-height: var(--line-tight);
  opacity: 0.5;
}

.game-chat-tab:hover:not(:disabled),
.game-chat-tab.is-current {
  opacity: 1;
}

.game-chat-tab.is-current {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.game-chat-tab:disabled {
  opacity: 0.2;
  cursor: default;
}

/* clicking a name whispers to them, while it's open */
.game-chat.is-open .game-chat-name {
  cursor: pointer;
}

.game-chat.is-open .game-chat-name:hover {
  text-decoration: underline;
}

/* each scope's colour (the bubbles' too: SpeechBubble BUBBLE_COLORS) - Zone white */
.is-channel-2,
.game-chat-line.is-channel-2 .game-chat-name {
  color: var(--r64-sky);
}

.is-channel-1,
.game-chat-line.is-channel-1 .game-chat-name {
  color: var(--r64-leaf);
}

.is-channel-3,
.game-chat-line.is-channel-3 .game-chat-name {
  color: var(--r64-butter);
}

.is-channel-4,
.game-chat-line.is-channel-4 .game-chat-name {
  color: var(--r64-lilac);
}

.game-chat-input input {
  width: 100%;
  padding: 6px 8px;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  font: inherit;
  line-height: var(--line-tight);
}

.game-chat-input input::placeholder {
  color: var(--mid);
}


/* the controls page over the room (Change controls) */
.dialog.controls-dialog {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
}

/* the page is dark text on the console's light body; here it's on a dark box */
.controls-dialog .controls-title,
.controls-dialog .controls-table {
  color: var(--white);
}

.controls-dialog .controls-header .link-button,
.controls-dialog .controls-table thead th {
  color: var(--lavender);
}

.controls-dialog .controls-note {
  color: var(--light);
}


/* Lithalia's editor: an npc or trigger's script (StoryForms) */
.editor textarea.editor-script {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
}

.editor-details summary {
  cursor: pointer;
  margin-bottom: 4px;
}

.editor-help {
  margin: 0;
}

.editor-help dt {
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  color: var(--r64-gold);
  margin-top: 6px;
}

.editor-help dd {
  margin: 0 0 0 8px;
}

/* the editor's tabs along its top: Map, Cutscenes, Quests */
.editor-pages {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--r64-slate);
}

.editor-page {
  flex: 1;
  padding: 4px 6px;
  color: var(--mid);
  background: var(--r64-shadow);
  border: 1px solid var(--r64-slate);
  border-bottom: none;
  font-size: 10px;
  text-transform: uppercase;
}

.editor-page.is-on {
  color: var(--white);
  background: var(--r64-slate);
}

/* a cutscene's steps (editor/CutsceneForms): a line each, the open one with its settings */
.editor-cut-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor-cut-steps > li > .link-button {
  width: 100%;
  text-align: left;
  padding: 2px 4px;
  color: var(--light);
}

.editor-cut-steps > li.is-on > .link-button {
  color: var(--white);
  background: var(--r64-shadow);
}

.editor-cut-steps > li.is-with {
  margin-left: 12px;
}

.editor-cut-with {
  color: var(--r64-gold);
}

.editor-lua {
  margin: 0;
  max-height: 200px;
  overflow: auto;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  white-space: pre;
  color: var(--light);
}

/* the editor's Quests section (editor/QuestForms): a quest open, and its steps */
.editor-quest {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--r64-gold);
}

/* the editor's Looks section (editor/LookForms): the pixel editor for hairstyles and outfits */
.look-gap {
  flex: 1;
}

.look-work {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.look-canvas {
  flex: none;
  width: 144px;
  height: 288px;
  cursor: crosshair;
  border: 1px solid var(--r64-ink);
  touch-action: none;
  image-rendering: pixelated;
}

.look-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.look-walk {
  width: 128px;
  height: 256px;
  background: var(--r64-sage);
  border: 1px solid var(--r64-ink);
  image-rendering: pixelated;
}

.look-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.look-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.look-palette {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.look-swatches {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
}

.look-swatch {
  height: 16px;
  padding: 0;
  border: 1px solid var(--r64-ink);
  font: inherit;
  font-size: 10px;
  color: var(--white);
  text-shadow: 1px 1px 0 var(--r64-ink);
  cursor: pointer;
}

.look-swatch.is-dye {
  grid-column: span 2;
}

.look-swatch.is-on {
  outline: 2px solid var(--white);
  outline-offset: -1px;
}

.editor-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;
  border-left: 2px solid var(--r64-slate);
}

/* the map editor's Foes tab (lithalia editor/FoeForms) */

.editor-foe-look {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.editor-foe-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  min-height: 108px;
  background: var(--r64-shadow);
  border: 1px solid var(--r64-slate);
}

.editor-foe-color {
  display: flex;
  align-items: center;
  gap: 3px;
}

.editor-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--r64-ink);
}

.editor-foe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.editor-foe-table th {
  color: var(--r64-slate);
  font-weight: normal;
  text-align: left;
}

.editor-foe-table td {
  padding: 1px 2px;
}

.editor-foe-table input[type="number"] {
  width: 44px;
}

.editor-foe-table input[type="text"] {
  width: 100%;
}

.editor-foe-at td {
  color: var(--r64-lemon);
}

/* === Lithalia's page (ui/GameView) === */

/* the page is a night sky round the game */
body {
  background-color: var(--r64-ink);
  color: var(--light);
}

.link-button {
  color: var(--lavender);
}

.link-button.is-current {
  color: var(--r64-gold);
}

.booting {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--lavender);
}

/* the game in the middle, under its bar (and a map editor's panel beside it) */
.world {
  top: 16px;
  bottom: 16px;
  padding-top: 0;
  justify-content: center;
}

.bar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-icon,
.bar-settings {
  display: grid;
  place-items: center;
}

.bar-settings.is-open {
  color: var(--r64-gold);
}

.world-side {
  max-height: calc(100vh - 88px);
}

/* fullscreen (F): the game alone, filling the screen (the canvas re-scales, App.resize) */
.game-screen:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
}

.settings-panel {
  top: 64px;
}

.settings-version {
  margin-top: auto;
  color: var(--mid);
}

/* signing in, on the title screen under its LITHALIA (ui/SignIn): no box,
   just a column of buttons or a form over the scene - every bit of text
   outlined in ink so it reads over the sky and the lake */
.signin {
  position: absolute;
  inset: 0;
  z-index: 4;
  text-shadow: 2px 0 var(--r64-ink), -2px 0 var(--r64-ink), 0 2px var(--r64-ink), 0 -2px var(--r64-ink);
}

.signin-panel {
  position: absolute;
  top: 36%;
  bottom: 6%;
  left: 50%;
  max-width: 80%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 8px;
  color: var(--white);
}

.signin-buttons,
.signin-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* black and rounded, as Google's own button beside them (filled_black, large) */
.signin-button {
  height: 40px;
  padding: 0 12px;
  border-radius: 4px;
  background: #202124; /* Google's filled_black, as it draws it */
  color: var(--white);
  line-height: var(--line-tight);
}

.signin-button:hover,
.signin-button:focus-visible {
  background: #35363a;
}

/* no focus ring on the sign-in screen: a focused button lightens as on
   hover, and a focused link turns white */
.signin :focus-visible,
.nav-focus .signin :focus {
  outline: none;
}

.signin .link-button:focus-visible {
  color: var(--white);
}

/* Google's button is drawn in steps, at one point twice as tall: a slot of
   its finished height keeps the column from jumping */
.signin .google-button {
  height: 40px;
  overflow: hidden; /* (and its first frame, drawn under the slot, unseen) */
}

.signin-text,
.signin-status {
  color: var(--r64-mist);
  text-align: center;
}

.signin-heading {
  color: var(--r64-gold);
  font-size: var(--text-md);
  text-align: center;
}

.signin-error {
  color: var(--r64-coral);
  text-align: center;
}

/* Sign in | Create account, the one you're on in gold */
.signin-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  white-space: nowrap;
}

.signin-tabs .link-button {
  color: var(--r64-steel);
}

.signin-tabs .link-button.is-current {
  color: var(--r64-gold);
}

.signin-input {
  height: 34px;
  padding: 0 10px;
  border: none;
  background: rgba(46, 34, 47, 0.92); /* r64 ink */
  box-shadow: 0 0 0 2px var(--r64-ink), inset 0 -2px var(--r64-plum-grey);
  color: var(--white);
  text-shadow: none;
  outline: none;
}

.signin-input::placeholder {
  color: var(--r64-mauve-grey);
}

.signin-input:focus {
  box-shadow: 0 0 0 2px var(--r64-ink), inset 0 -2px var(--r64-gold);
}

.signin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}

.signin-row .link-button,
.signin-back {
  color: var(--r64-steel);
}

.signin-back {
  align-self: center;
}

.signin-check {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--r64-mist);
  cursor: pointer;
}

.signin-check input {
  accent-color: var(--r64-cobalt);
}

/* in the bottom left, across from the title's CREDITS */
.signin-version {
  position: absolute;
  left: 1.5%;
  bottom: 1.8%;
  color: var(--r64-mauve-grey);
}

/* the bar's Discord link (its logo's face) and admins' analytics button (GameView, ui/Analytics) */
.bar-discord {
  color: var(--white);
  outline-color: var(--white);
}

.bar-discord:hover,
.bar-analytics.is-open {
  color: var(--r64-gold);
}

/* the analytics panel (ui/Analytics, admins only, as Console8's): a wide side panel */
.side-panel.analytics-panel {
  width: min(900px, calc(100vw - 24px));
}

.analytics-panel .side-panel-head {
  gap: 12px;
}

.analytics-bar {
  margin: 0 12px 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.analytics-panel .link-button {
  color: var(--lavender);
  white-space: nowrap;
}

.analytics-panel .link-button.is-on {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.analytics-panel .side-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}

.analytics-panel .side-panel-heading {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  font-weight: normal;
  color: var(--lavender);
}

.stats-dim {
  color: var(--light);
}

.stats section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stats-note {
  margin: 0;
  color: var(--light);
  line-height: var(--line);
}

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
}

.stats-tile {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.25);
}

.stats-tile-label,
.stats-tile-sub {
  color: var(--light);
  line-height: var(--line);
}

.stats-tile-sub {
  font-size: var(--text-xs);
}

.stats-tile-value {
  font-size: var(--text-md);
  line-height: var(--line-tight);
  color: var(--white);
}

.stats-live {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stats-charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 6px;
}

.stats-chart {
  position: relative;
  margin: 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
}

.stats-chart-title {
  color: var(--light);
}

/* the bars: one hue (lavender), thin with a 2px gap, from a baseline;
   every column is a hover target */
.stats-chart-plot {
  position: relative;
  height: 90px;
  margin-top: 18px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 2px solid var(--mid);
}

.stats-chart-max {
  position: absolute;
  top: -18px;
  left: 0;
  font-size: var(--text-xs);
  color: var(--light);
}

.stats-bar-col {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.stats-bar {
  width: 100%;
  max-width: 24px;
  margin: 0 auto;
  background: var(--lavender);
}

.stats-bar.is-zero {
  height: 0;
}

.stats-bar-col:hover .stats-bar {
  background: var(--white);
}

.stats-tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 2;
  padding: 2px 6px;
  white-space: nowrap;
  background: var(--r64-ink);
  color: var(--white);
  pointer-events: none;
  visibility: hidden;
}

.stats-tip.is-left {
  left: auto;
  right: 0;
}

.stats-bar-col:hover .stats-tip {
  visibility: visible;
}

.stats-chart-axis {
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--light);
}

.stats-chart-empty {
  position: absolute;
  inset: 40px 0 auto;
  text-align: center;
  color: var(--light);
}

.stats-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
}

.stats-table th,
.stats-table td {
  padding: 3px 8px;
  text-align: right;
  white-space: nowrap;
}

.stats-table th:first-child,
.stats-table td:first-child {
  text-align: left;
}

.stats-table th {
  font-weight: normal;
  color: var(--lavender);
  border-bottom: 2px solid var(--mid);
}

.stats-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.2);
}