/* Front of house: login, register, characters - over the live 3D night shore (Scripts3d/front3d.js). Designed with the
   frontend-design skill (2026-10-23, the second version; the first was pixel type on a painted beach):

   Subject   the front door of a chainblox game: you arrive at night by a campfire on the shore, the world already there.
   Colour    the game's own: the in-game tooltip gold #ffd100 for the one thing to press, bone #f3efe6 for words, smoke
             #b4bccb for what is said quietly, night ink #04070f behind them, ember #e8702a for things happening.
   Type      Marcellus, a flared serif in the spirit of the fantasy MMOs' title lettering, for the game's name and headings
             only; Verdana for every working word, as in the game itself. Marcellus is OFL, self-hosted in /gfx/fonts.
   Layout    left aligned, no card: the night darkens toward the left edge to carry the words, the fire burns on the right.
             Fields are the in-game tooltip: black, a thin white rim. Sentence case throughout.
   One bold thing: the gold of the sign-in button, the same gold as in the game. The rest stays quiet. */
@font-face { font-family: 'Marcellus'; src: url('/gfx/fonts/Marcellus-Regular.ttf') format('truetype'); font-display: swap; }
:root { --sea: #0a1430; --deep: #04070f; --sand: #ffd100; --pine: #1f3d14; --ember: #e8702a; --foam: #f3efe6; --foam-dim: #b4bccb; --rim: rgba(255, 255, 255, .55); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.front { font-family: Verdana, sans-serif; font-size: 15px; line-height: 1.55; 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(46px, 6.4vw, 76px)/1 'Marcellus', Georgia, serif; color: var(--foam); letter-spacing: .01em; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
p.line { margin: 14px 0 38px; max-width: 28ch; color: var(--foam-dim); }
h2 { margin: 0 0 18px; font: 400 26px/1.2 'Marcellus', Georgia, serif; 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: 13px; }
.front input[type=text], .front input[type=password], .front select { width: 100%; font: 15px Verdana, sans-serif; color: var(--foam); background: rgba(0, 0, 0, .78); border: 1px solid var(--rim); border-radius: 4px; padding: 10px 11px; }
.front select option { background: #000; 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: bold 15px Verdana, sans-serif; color: #1a1300; background: var(--sand); border: 0; border-radius: 4px; box-shadow: 0 2px 0 #9a7e00, 0 0 24px rgba(255, 209, 0, .18); padding: 12px 22px; cursor: pointer; text-decoration: none; }
.front input[type=submit]:hover, .btn:hover { background: #ffe04d; }
.front input[type=submit]:active, .btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #9a7e00; }
.btn.quiet { background: rgba(0, 0, 0, .55); color: var(--foam); border: 1px solid var(--rim); box-shadow: none; padding: 7px 13px; font-weight: normal; font-size: 13px; }
.btn.quiet:hover { background: rgba(0, 0, 0, .85); }
.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; }
/* logging in: the button goes quiet, three embers step beside it, and after a few seconds a note says why it is slow */
.front input[type=submit]:disabled { background: #8d7a2a; box-shadow: none; color: #1a1300; cursor: default; transform: none; }
.busy { display: inline-flex; gap: 5px; margin-left: 14px; vertical-align: middle; }
.busy[hidden], .slow[hidden] { display: none; }
.busy i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); animation: ember 900ms steps(1) infinite; }
.busy i:nth-child(2) { animation-delay: 300ms; } .busy i:nth-child(3) { animation-delay: 600ms; }
@keyframes ember { 0%, 100% { background: #5a2a10; } 33% { background: var(--sand); } 66% { background: var(--ember); } }
.slow { margin-top: 22px; max-width: 400px; padding: 2px 0 2px 14px; border-left: 2px solid var(--sand); color: var(--foam-dim); }
.slow strong { display: block; margin-bottom: 6px; color: var(--foam); font-weight: 600; }
.slow p { margin: 0 0 8px; } .slow p:last-child { margin: 0; }
#iiNote.note { color: var(--foam); }
.btnspin { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.45em; vertical-align: -0.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnspin 700ms linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy i { animation: none; background: var(--ember); } .btnspin { animation-duration: 2s; } }
/* 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; }
.facts span:empty { display: none; }
.stats { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 13px; 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: 1px solid rgba(255, 255, 255, .2); 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: 1px solid rgba(255, 255, 255, .2); font: 400 19px 'Marcellus', Georgia, serif; color: var(--foam); }
.tally table { width: 100%; border-collapse: collapse; font-size: 13px; 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: 8px; border-radius: 2px; background: var(--sand); }
.tally .more { margin: 6px 0 0; font-size: 13px; 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: 1px solid var(--rim); border-radius: 3px; 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: linear-gradient(180deg, rgba(4, 7, 15, .9), rgba(4, 7, 15, .72)); } .hall { grid-template-columns: 1fr; } .ledger > span { grid-template-columns: 1fr; } .hall .stage { order: -1; } }
@media (prefers-reduced-motion: reduce) { .shore .fire { display: none; } }
/* the 3D shore (Scripts3d/front3d.js) draws behind the form once it runs: the painted shore and the sprite stage step aside */
body.three { background: #04070f; }
body.three .shore { display: none; }
body.three .stage .plinth { display: none; }
body.three .stage .turn::before { content: 'Drag to turn'; display: block; width: 100%; margin-bottom: 6px; color: var(--foam-dim); font-size: 13px; }
body.three .stage .turn { flex-wrap: wrap; }
body.three .tide { background: linear-gradient(90deg, rgba(4, 7, 15, .82) 0%, rgba(4, 7, 15, .6) 62%, rgba(4, 7, 15, 0) 100%); }

/* the character's on-chain line (Scripts/FrontChain.js) */
.chain { margin-top: 10px; font-size: 13px; color: var(--foam-dim); max-width: 340px; }
.chain a { color: var(--sand); text-decoration: none; border-bottom: 1px dotted var(--sand); }
.chain .hosts { margin: 6px 0; }
.chain .host { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--foam); }
.chain .note { display: block; margin-top: 6px; }

/* the way in: Internet Identity first; the account name and password folded away under it */
.signin { max-width: 340px; }
.signin .btn.ii { width: 100%; padding: 14px 22px; font-size: 16px; }
.signin .why { margin: 10px 0 0; font-size: 13px; color: var(--foam-dim); }
details.other { margin-top: 26px; max-width: 340px; }
details.other > summary { cursor: pointer; color: var(--foam-dim); font-size: 13px; list-style: none; }
details.other > summary::-webkit-details-marker { display: none; }
details.other > summary::before { content: '\25B8'; display: inline-block; width: 1.1em; color: var(--sand); transition: transform 150ms; }
details.other[open] > summary::before { transform: rotate(90deg); }
details.other > summary:hover { color: var(--foam); }
details.other > summary:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
details.other .inner { margin-top: 16px; }
details.other .btn, details.other input[type=submit] { background: rgba(0, 0, 0, .55); color: var(--foam); border: 1px solid var(--rim); box-shadow: none; }
details.other .btn:hover, details.other input[type=submit]:hover { background: rgba(0, 0, 0, .85); }
@media (prefers-reduced-motion: reduce) { details.other > summary::before { transition: none; } }

/* the character editor (Scripts/FrontLooks.js): a label over each choice, chips for shapes, swatches for colours */
.looks { max-width: 380px; margin-top: 6px; }
.looks .lrow { margin: 0 0 12px; }
.looks .llabel { display: block; margin-bottom: 5px; color: var(--foam-dim); font-size: 13px; }
.looks .lend { margin-top: 18px; }
.looks input[type=range] { width: 64%; vertical-align: middle; accent-color: var(--sand); }
.looks .lval { margin-left: 10px; color: var(--foam); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { font: 12px Verdana, sans-serif; color: var(--foam); background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; padding: 5px 9px; cursor: pointer; }
.chips button:hover { border-color: var(--rim); background: rgba(0, 0, 0, .85); }
.chips button.on { color: #1a1300; background: var(--sand); border-color: var(--sand); }
.chips button:focus-visible { outline: 3px solid var(--sand); outline-offset: 2px; }
.swatches .pick { width: 30px; height: 30px; padding: 0; border: 1px solid var(--rim); border-radius: 3px; background: none; cursor: pointer; }
details.looksfold { margin: 14px 0 6px; }
details.looksfold .savelook { margin-top: 6px; }
.paintgrid { display: grid; grid-template-columns: repeat(16, 14px); grid-template-rows: repeat(16, 14px); gap: 1px; width: max-content; padding: 1px; background: rgba(0, 0, 0, .6); border: 1px solid var(--rim); border-radius: 3px; touch-action: none; user-select: none; cursor: crosshair; }
.paintgrid span { display: block; }
.paintpal { margin-top: 8px; }
.paintpal button { width: 22px; height: 22px; }
.paintpal button.rub { background: rgba(0, 0, 0, .6); color: var(--foam); font: 14px Verdana, sans-serif; line-height: 1; }
.looks .paintpal + .btn { margin-top: 8px; }
/* a phone, editing a look: the character stays in view up top, the choices scroll in a sheet below it */
@media (max-width: 760px) {
    body.three.editing .tide, body.three.editing .tide.wide { position: fixed; top: 46vh; left: 0; right: 0; bottom: 0; min-height: 0; overflow-y: auto; padding: 14px 18px 32px; background: linear-gradient(180deg, rgba(4, 7, 15, .78), rgba(4, 7, 15, .94) 40px); border-top: 1px solid rgba(255, 255, 255, .25); -webkit-overflow-scrolling: touch; }
    body.three.editing h1.place, body.three.editing p.line { display: none; }
    body.three.editing .stage { display: none; }
}