/*
  PokeMUD webclient theme - loaded after webclient.css (see
  webclient/base.html), so anything here overrides Evennia's stock
  terminal look without needing to copy that whole file.

  PokeMUDFont (same file as web/static/website/css/custom.css's
  @font-face; absolute /static/ URL here since this file lives under a
  different app's static folder) is now used for the game-text area
  too (.out/.inp/#messagewindow), not just chrome like dialog titles.
  That only works because the font file itself was patched (see the
  font-normalization work done alongside this CSS change) so every
  glyph this game actually displays - A-Z/a-z/0-9, space, and the
  handful of accented Latin letters real species names use (e.g.
  Flabebe's e-acute) - shares one advance width AND is centered
  within it; it wasn't monospace out of the box (space in particular
  was narrower than every letter, and the normalization's first pass
  widened narrow glyphs like "i" without recentering them, leaving a
  large blank gap trailing each one), which would have visibly broken
  world/pokemon/ui.py's column-aligned party/move lists and box-drawn
  headers/footers. A few rare wide symbols (%, @, &) were deliberately
  left wider rather than shrunk (would have clipped), so an occasional
  "80%" runs a little wide - everything else lines up.

  .inputfield deliberately does NOT get PokeMUDFont, even though it
  renders fine in the plain message-output text - text input widgets
  use a separate, more sensitive text-layout/caret-placement path than
  ordinary page text in at least some browsers. Kept on the safe,
  well-tested monospace stack instead; the input line is the one piece
  of game text using a different font from the rest.

  Still NOT touched: the .color-NNN/.bgcolor-NNN xterm256 classes --
  the actual in-game ANSI color passthrough (type coloring, HP bar
  colors, etc.), unrelated to font choice.

  IMPORTANT DOM note (found while framing the input box): with
  goldenlayout.js active (it always is here - see webclient/base.html,
  dual_input.js/splithandler.js are the disabled alternatives), GL's
  init() does `$("#prompt").remove()` and `$("#inputcontrol").remove()`
  and then builds the *real*, live input box itself as fresh markup
  (.inputwrap > .prompt + .inputfieldwrapper > .inputsend + .inputfield)
  injected into its own managed pane - see registerComponent("input", ...)
  in goldenlayout.js. The original template's #input/#inputform/
  #inputcontrol/#inputfield/#inputsend ids either get deleted outright
  or end up on an orphaned, empty, zero-height leftover div (the old
  #input shell, still `position:fixed;bottom:0` per stock webclient.css)
  that is NOT what the player ever sees or types into. Any CSS written
  against those ids is dead: it was the cause of the "border applied to
  a miniscule bar at the bottom instead of the real input box" bug, and
  is almost certainly why earlier styling/font attempts against
  #inputfield never visibly did anything either. The rules below target
  the classes GL actually creates, not the ids. #main similarly isn't
  where the message pane visually lives - GL mounts its whole layout
  (both Main and input) inside #main-sub, reusing the real
  #messagewindow element directly (addClass("content"), not recreated),
  so that one's id is safe to keep styling.
*/

@font-face {
  font-family: 'PokeMUDFont';
  src: url('/static/website/css/font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Falls back to the original monospace stack if the custom font ever
   fails to load, so column alignment degrades gracefully instead of
   breaking outright. */
body {
  font-family: 'PokeMUDFont', 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

/* Stock size is .9em (~14px). Bumped to 1.25rem (20px). Kept inside a
   min-width query because webclient.css deliberately shrinks the body
   to .5rem on phones (<=480px) so the box-drawn headers/columns still
   fit the screen - 20px there would wrap them. */
@media screen and (min-width: 481px) {
  body {
    font-size: 1.25rem;
    line-height: 1.4em;
  }
}

/* Textareas don't inherit font-size from body (browser default is
   ~13px, and Bootstrap's .form-control sets 1rem), so the input line
   needs the size set explicitly to match the message pane. */
.inputfield {
  font-family: 'PokeMUDFont', 'DejaVu Sans Mono', Consolas, Inconsolata, 'Lucida Console', monospace;
  font-size: 1.25rem;
  line-height: 1.4;
}

:root {
  --pm-navy: #0d1425;
  --pm-navy-mid: #16213e;
  --pm-panel: #1b2846;
  --pm-red: #e3350d;
  --pm-red-dark: #b8290a;
  --pm-gold: #ffcb05;
}

/* box_sky.png is a small (143x104) pixel-art image that didn't tile
   well (repeat made the seams obvious) - stretched to fill the
   viewport instead, with nearest-neighbor scaling (image-rendering)
   so it scales up blocky/crisp rather than blurring like the browser's
   default smooth (bilinear/bicubic) upscaling would. */
html, body {
  background-image: url('/static/website/images/box_sky.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: var(--pm-navy);
  image-rendering: pixelated;
}

body {
  color: #cdd6e8;
}

/* Utility/system messages - keep green (players are used to it) but
   softer against the new navy background than pure #0f0. */
.sys { color: #7be08a; }

/* Echoed input - a touch bluer than plain grey to sit on the navy bg. */
.inp { color: #7c8aab; }

/* Main server output - unchanged monospace, just a lighter grey that
   reads better on navy than on pure black. */
.out {
  color: #dbe2f0;
  background-color: transparent;
}

.err { color: #ff6b5b; }

/* One blank line between the response to one input and the next - see
   js/plugins/output_typewriter.js, which inserts these. */
.msgspacer { height: 1.4em; }

.prompt {
  color: var(--pm-gold);
  background: var(--pm-panel);
  padding: .15rem .6rem;
}

#clientwrapper {
  background: transparent;
}

/* GoldenLayout's dark theme (loaded via CDN in webclient/base.html)
   paints its own root container and every component's wrapper div
   solid black/dark-grey (.lm_goldenlayout:#000, .lm_content:#222) --
   with #messagewindow/.inputwrap covering each .lm_content exactly,
   that shouldn't normally show, but the resize gutter between the
   Main and input panes sits directly on .lm_goldenlayout's own black
   background (the gutter itself is nearly transparent at rest), which
   is what showed as a solid black bar between the two framed boxes.
   Only takes effect now that base.html (project override) loads this
   file after GoldenLayout's CSS - see that file's comment. */
.lm_goldenlayout, .lm_content {
  background: transparent;
}

/* Message pane framed in the black interior of text_frame.png (a
   131x27 pixel-art panel: thin navy/white highlight on the left,
   red-over-black on top, white-over-navy on the bottom/right).
   border-image 9-slices it: border-image-slice is pixel offsets into
   the SOURCE image, independent of border-width - bumping just
   border-width (2x the source's own proportions here, per feedback
   that the first pass was too thin) renders a thicker frame using the
   same slice art, no other change needed. Corners stay crisp at
   native size, edges stretch to fit however big the pane actually is.
   The un-rendered middle (border-image never paints it, only 'fill'
   would) is why #messagewindow needs its own black background --
   otherwise the interior would show the page's navy gradient instead
   of matching the frame art.

   #messagewindow is positioned absolute+inset:0 to fill its
   GoldenLayout-managed parent (.lm_content) exactly - GL sizes that
   parent via inline styles, but never gave #messagewindow itself a
   height, so left alone it only grows as tall as its text content
   (the border would then hug the visible chat log instead of framing
   the whole pane, and would resize oddly as messages accumulate). */
#messagewindow {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: #000;
  padding: .8rem 1rem;
  border-style: solid;
  border-width: 10px 10px 10px 8px;
  border-image-source: url('/static/website/images/text_frame.png');
  border-image-slice: 5 5 5 4;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

/* The template's own #input/#inputform shell is dead once
   goldenlayout.js removes #prompt/#inputcontrol from it (see the note
   above) - hide the empty leftover rather than let it sit there as a
   stray, invisible-but-still-in-the-DOM fixed strip. */
#input {
  display: none;
}

/* The REAL input pane content, built fresh by goldenlayout.js's
   registerComponent("input", ...) and appended into its own
   .lm_content - framed in input_frame.png (252x45) the same way as
   #messagewindow above. The frame art itself is NOT symmetric
   left/right (the bevel is wider on the right), so the slice numbers
   intentionally aren't either; border-width is 2x that same
   proportion for a thicker frame. Also position:absolute+inset:0 to
   fill its GL pane (this div otherwise has no explicit size), laid
   out as a column so .prompt sits above the text field + send button. */
.inputwrap {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #000;
  border-style: solid;
  border-width: 10px 38px 8px 16px;
  border-image-source: url('/static/website/images/input_frame.png');
  border-image-slice: 5 19 4 8;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

.inputwrap .prompt {
  flex: 0 0 auto;
}

.inputfieldwrapper {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.inputfield {
  order: 1;
  flex: 1 1 auto;
  background: #000;
  color: #eef2f8;
  border: none;
  resize: none;
  padding: .3rem .6rem;
}

.inputfield:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--pm-gold);
}

/* Map panel (js/plugins/map_panel.js): framed the same way as
   #messagewindow/.inputwrap above - same text_frame.png source and
   slice - but at 1.5x the slice's native proportions rather than
   those two's 2x, for a slightly thinner frame. box-sizing:border-box
   means the border eats into the pane's own 100%/100% size rather
   than growing past it, and since the plugin sizes its canvas off
   clientWidth/clientHeight (which already exclude the border), the
   canvas automatically fits inside the frame with no JS changes. */
.mappanel {
  box-sizing: border-box;
  background: #000;
  border-style: solid;
  border-width: 7px 7px 7px 6px;
  border-image-source: url('/static/website/images/text_frame.png');
  border-image-slice: 5 5 5 4;
  border-image-repeat: stretch;
  image-rendering: pixelated;
}

/* The input goes readonly while text is still typing out (see
   js/plugins/output_typewriter.js). Bootstrap gives
   .form-control[readonly] a light grey background at higher specificity
   than plain .inputfield above, which flashed the box white/grey for
   the duration - pin it to the normal look. */
.inputfield[readonly], .inputfield:disabled {
  background: #000;
  color: #eef2f8;
  opacity: 1;
}

/* Hidden - Enter already sends the line; the button just duplicated
   that and its red block clashed with the framed input box. */
.inputsend {
  display: none;
}

/* Toolbar buttons (split/pane/undo/options) */
#splitbutton, #panebutton, #undobutton, #optionsbutton {
  color: var(--pm-gold);
}
#splitbutton:hover, #panebutton:hover, #undobutton:hover, #optionsbutton:hover {
  color: #fff;
}

#toolbar {
  background: rgba(13, 20, 37, .55);
  border-radius: .4rem;
  padding: .1rem .3rem;
}

/* Dialogs (help/options popups) */
.dialog {
  background-color: var(--pm-panel);
  border: 2px solid var(--pm-gold);
  color: #dbe2f0;
}

.dialogtitle {
  background-color: var(--pm-navy-mid);
  border-bottom: 2px solid var(--pm-gold);
  color: var(--pm-gold);
  font-family: 'PokeMUDFont', sans-serif;
}

#helpdialog .dialogcontent {
  background-color: var(--pm-navy);
  color: #dbe2f0;
}

.dialogclose:hover, .dialogclose:focus {
  color: var(--pm-gold);
}

/* Typing indicator - same position/behavior as the default (see
   webclient.css's own #istyping comment), just recolored to match. */
#istyping {
  background-color: rgba(13, 20, 37, .85);
  border: 1px solid var(--pm-gold);
}

/* Scrollbars (WebKit/Blink) */
#messagewindow::-webkit-scrollbar,
.dialogcontent::-webkit-scrollbar {
  width: 10px;
}
#messagewindow::-webkit-scrollbar-track,
.dialogcontent::-webkit-scrollbar-track {
  background: var(--pm-navy);
}
#messagewindow::-webkit-scrollbar-thumb,
.dialogcontent::-webkit-scrollbar-thumb {
  background-color: var(--pm-panel);
  border: 2px solid var(--pm-navy);
  border-radius: 6px;
}
#messagewindow::-webkit-scrollbar-thumb:hover {
  background-color: var(--pm-red-dark);
}