/* Front of house: login, register, characters. Designed with Anthropic's frontend-design skill; the plan it asks for:

   Subject   a 2013 isometric pixel-art MMO that poses as a fantasy RPG. The most characteristic thing in its world is the
             world: so the page IS the start beach, drawn from the game's own room files at full size (tools/draw_front_scene.py).
   Colour    taken from the tiles, not from a mood board:  sea #143c8c  deep #08143a  sand #f2c14e  pine #1f3d14
             ember #e8702a  foam #f4efe0
   Type      Jacquard 12, a pixel blackletter, for the name of the place and nothing else (the fantasy pose, in the game's own
             grain); Pixelify Sans for every working word. Both OFL, self-hosted in /gfx/fonts. Sentence case throughout.
   Layout    left aligned. Night water washes in from the left edge and carries the words; the shore stays in daylight to
             the right. No card, no centred box, no ornaments, no labels over things that need none.
   One bold thing: the living shore (Bram's fire is the only motion). Everything else is quiet.
   Avoided on purpose: the cream-parchment-and-serif look the first version had, tracked capitals, eyebrows, a footer flourish. */
@font-face { font-family: 'Jacquard 12'; src: url('/gfx/fonts/Jacquard12-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url('/gfx/fonts/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
:root { --sea: #143c8c; --deep: #08143a; --sand: #f2c14e; --pine: #1f3d14; --ember: #e8702a; --foam: #f4efe0; --foam-dim: #aebbe0; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.front { font-family: 'Pixelify Sans', Verdana, sans-serif; font-size: 18px; line-height: 1.45; color: var(--foam); background: var(--sea); overflow-x: hidden; }
.shore { position: fixed; left: 50%; top: 50%; width: 2880px; height: 1620px; margin: -810px 0 0 -1300px; background: url('/gfx/harrow/front/shore.png') no-repeat 0 0; image-rendering: pixelated; z-index: 0; }
.shore .fire { position: absolute; left: 1879px; top: 1086px; width: 56px; height: 56px; image-rendering: pixelated; }
.tide { position: relative; z-index: 1; min-height: 100%; width: min(560px, 100%); padding: 9vh 40px 48px 6vw; background: linear-gradient(90deg, rgba(8, 20, 58, .96) 0, rgba(8, 20, 58, .93) 62%, rgba(8, 20, 58, .6) 86%, rgba(8, 20, 58, 0) 100%); }
.tide.wide { width: min(980px, 100%); padding-right: 140px; }
.front form { margin: 0; }
h1.place { margin: 0; font: 400 clamp(64px, 9vw, 104px)/.9 'Jacquard 12', Georgia, serif; color: var(--sand); letter-spacing: .01em; text-shadow: 3px 3px 0 #05102e; }
p.line { margin: 14px 0 38px; max-width: 28ch; color: var(--foam-dim); }
h2 { margin: 0 0 18px; font-weight: 600; font-size: 24px; color: var(--foam); }
.field { display: block; margin: 0 0 16px; max-width: 340px; }
.field > span, td.label { display: block; margin-bottom: 5px; color: var(--foam-dim); font-size: 16px; }
.front input[type=text], .front input[type=password], .front select { width: 100%; font: 18px 'Pixelify Sans', Verdana, sans-serif; color: var(--foam); background: #05102e; border: 2px solid #2b4aa0; border-radius: 0; padding: 9px 10px; }
.front select option { background: #05102e; color: var(--foam); }
.front input:focus, .front select:focus, .front a:focus-visible, .btn:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
.front input[type=submit], .btn { display: inline-block; font: 600 19px 'Pixelify Sans', Verdana, sans-serif; color: #2a1a05; background: var(--sand); border: 0; border-bottom: 4px solid #a9791c; padding: 11px 22px 9px; cursor: pointer; text-decoration: none; }
.front input[type=submit]:hover, .btn:hover { background: #ffd56b; }
.front input[type=submit]:active, .btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.btn.quiet { background: transparent; color: var(--foam); border: 2px solid #2b4aa0; padding: 6px 12px; font-weight: 400; font-size: 16px; }
.btn.quiet:hover { background: #10245e; }
.front a { color: var(--sand); }
.front a:hover { color: #fff; }
.aside { margin-top: 22px; max-width: 340px; color: var(--foam-dim); }
.error { display: block; margin-top: 14px; max-width: 340px; color: #ffb39a; }
.error:empty { display: none; }
/* characters */
.hall { display: grid; grid-template-columns: minmax(0, 380px) 220px; gap: 36px; align-items: start; }
.stage .plinth { position: relative; width: 192px; height: 192px; margin-bottom: 8px; background: url('/gfx/tiles/sand.gif') no-repeat center 118px / 190px auto; image-rendering: pixelated; }
.stage .plinth img { position: absolute; left: 0; top: 0; width: 192px; height: 192px; image-rendering: pixelated; }
.stage .turn { display: flex; gap: 8px; }
.facts { margin: 0 0 4px; color: var(--foam); }
.facts span { display: block; }
.stats { margin-top: 14px; padding-top: 12px; border-top: 2px solid #2b4aa0; font-size: 16px; color: var(--foam-dim); max-width: 340px; }
.stats table { width: 100%; border-collapse: collapse; }
.stats td { padding: 1px 0; } .stats td:last-child { text-align: right; color: var(--foam); }
.hall table.form { width: 100%; border-collapse: collapse; }
.hall table.form td { padding: 0 0 12px; vertical-align: middle; }
.hall table.form td.label { width: 40%; display: table-cell; margin: 0; padding-right: 12px; }
.hall hr { border: 0; border-top: 2px solid #2b4aa0; margin: 2px 0 6px; }
.go { margin-top: 24px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.screen[style*="hidden"] { display: none; }
.screen { visibility: visible !important; }
.foot { margin-top: 40px; display: flex; gap: 10px; flex-wrap: wrap; }
.gone { display: none; }
/* the statistics pages: headed groups of label/value rows, and tallies whose bars are the one loud thing */
.ledger > span { display: grid; grid-template-columns: repeat(2, minmax(0, 310px)); gap: 28px 40px; align-items: start; }
.tally h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid #2b4aa0; font-weight: 600; font-size: 19px; color: var(--foam); }
.tally table { width: 100%; border-collapse: collapse; font-size: 16px; color: var(--foam-dim); }
.tally td { padding: 2px 0; vertical-align: middle; } .tally td:last-child { text-align: right; color: var(--foam); white-space: nowrap; padding-left: 10px; font-variant-numeric: tabular-nums; }
.tally table.bars td:nth-child(2) { width: 38%; }
.tally table.bars td:first-child { width: 46%; padding-right: 10px; overflow-wrap: anywhere; }
.tally .bar { display: block; height: 10px; background: var(--sand); box-shadow: 0 2px 0 #a9791c; }
.tally .more { margin: 6px 0 0; font-size: 15px; color: var(--foam-dim); }
h2 + p.line { margin-top: -10px; max-width: 40ch; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatches button { width: 24px; height: 30px; padding: 0; border: 2px solid #2b4aa0; cursor: pointer; }
.swatches button.on { border-color: var(--sand); outline: 2px solid var(--sand); outline-offset: 1px; }
.swatches button:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
@media (max-width: 760px) { .tide, .tide.wide { width: 100%; padding: 6vh 22px 40px; background: rgba(8, 20, 58, .93); } .hall { grid-template-columns: 1fr; } .ledger > span { grid-template-columns: 1fr; } .hall .stage { order: -1; } }
@media (prefers-reduced-motion: reduce) { .shore .fire { display: none; } }