@font-face {
  /* Drop the original ringbearer-webfont.woff into public/fonts/ to restore the exact look. */
  font-family: 'RingbearerFont';
  src: url('fonts/ringbearer-webfont.woff') format('woff');
  font-display: swap;
}
:root { --panel: #FFDB94; --panel-border: DarkGoldenRod; --pressed: #caff94; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 12px sans-serif; background: #05060a; }
canvas { display: block; }
.hidden { display: none !important; }
.row { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; }
.row.right { justify-content: flex-end; }
.grow { flex-grow: 1; }

#upperleft { position: fixed; top: 0; left: 1em; width: 50%; pointer-events: none; }
#logo { font-family: 'RingbearerFont', Georgia, serif; font-size: 80px; color: white; text-shadow: 0 2px 0 black; padding-bottom: 6px; }
#progress { color: chartreuse; font-size: 16px; margin-top: 8px; font-family: monospace; min-height: 1.2em; }
#graphs { margin-top: 8px; color: #9f9; font-family: monospace; font-size: 13px; }
#selectioninfo { margin-top: 8px; color: white; font-size: 16px; }

#hexinfo { font-size: 16px; position: fixed; top: 0; right: 0; background: var(--panel); width: 620px; max-width: 90vw; padding: 6px 8px;
  border-radius: 0 0 0 5px; border-left: 2px solid var(--panel-border); border-bottom: 2px solid var(--panel-border); }
#hexinfo .grid { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
#hexinfo .mono { font-family: monospace; word-break: break-all; }
#hexinfo .foot { font-style: italic; text-align: center; margin-top: 4px; font-size: 12px; }

#historypanel { position: fixed; right: 0; top: 40vh; width: 420px; max-width: 90vw; background: var(--panel); padding: 8px;
  border-left: 2px solid var(--panel-border); border-top: 2px solid var(--panel-border); border-bottom: 2px solid var(--panel-border); border-radius: 5px 0 0 5px; font-size: 14px; }
#historypanel input[type=range] { width: 100%; }
#historylabel { font-family: monospace; }

#toolbar { font-family: 'RingbearerFont', Georgia, serif; position: fixed; bottom: 0; left: 0; z-index: 100; width: 100%; }
.label { color: white; font-size: 36px; font-weight: bold; text-shadow: 0 2px 0 black; margin: 0 8px; }
.tb { font-size: 32px; font-family: inherit; padding: 5px 10px; border: none; cursor: pointer; background: var(--panel); color: black;
  border-radius: 4px; box-shadow: 0 4px var(--panel-border); position: relative; transition: all 0.1s; margin: 0 5px 8px 5px; }
.tb.pressed { background: var(--pressed); box-shadow: 0 1px #a5d179; top: 3px; }
.tb:active { background: #d7b87c; box-shadow: 0 1px var(--panel-border); top: 3px; }
.tb.round { border-radius: 25px; font-size: 26px; padding: 0 8px; }
.mini { font-size: 14px; padding: 2px 8px; cursor: pointer; }
#gotoform { margin: 0 5px 8px 5px; gap: 4px; }
#gotoform input, #gotoform select { font: 18px sans-serif; padding: 6px; border: none; border-radius: 4px; background: var(--panel); box-shadow: 0 4px var(--panel-border); }
#gotoform input { width: 70px; }
#gotoform .tb { margin: 0; }
@media (max-width: 800px) { #gotoform input, #gotoform select { font-size: 14px; padding: 4px; } #gotoform input { width: 52px; } }
@media (max-width: 800px) { .tb { font-size: 20px; } .label { font-size: 22px; } #logo { font-size: 48px; } }

/* phones / tablets (body.mobile is set from a coarse pointer or a narrow screen; ?mobile=1|0 overrides) */
body.mobile { overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
body.mobile #buildbtn, body.mobile #historybtn, body.mobile #versionsbtn, body.mobile #walkbtn { display: none !important; }
body.mobile #toolbars .row { flex-wrap: wrap; }
body.mobile .tb { font-size: 18px; padding: 4px 8px; margin: 0 3px 6px 3px; }
body.mobile .label { font-size: 20px; }
body.mobile #hexinfo { left: 0; right: 0; width: auto; max-width: none; box-sizing: border-box; font-size: 13px; padding: 4px 34px 4px 6px; border-left: none; border-radius: 0; }
#hexinfoclose { display: none; position: fixed; top: 4px; right: 4px; z-index: 50; }
body.mobile #hexinfoclose { display: block; }
body.mobile #hexinfo.hidden + #hexinfoclose, body.shot #hexinfoclose, body.fp #hexinfoclose { display: none; }
body.mobile #hexinfo .grid { gap: 1px 8px; }
body.mobile #hexinfo .foot { font-size: 11px; }
body.mobile #upperleft { width: 60%; }
body.mobile #progress { font-size: 13px; }
body.mobile #historypanel, body.mobile #tilehistory { top: auto; bottom: 120px; width: 100%; max-width: 100%; max-height: 40vh; border-radius: 0; }
body.mobile #gotoform input { width: 56px; }

#tilehistory { position: fixed; right: 0; top: 40vh; width: 520px; max-width: 92vw; max-height: 50vh; overflow: auto; background: var(--panel); padding: 8px;
  border-left: 2px solid var(--panel-border); border-top: 2px solid var(--panel-border); border-bottom: 2px solid var(--panel-border); border-radius: 5px 0 0 5px; font-size: 13px; }
#tilehistorylist .chg { border-top: 1px solid var(--panel-border); padding: 4px 0; }
#tilehistorylist .chg .when { font-family: monospace; }
#tilehistorylist .chg .diff { margin-left: 8px; }
#tilehistorylist .mono { font-family: monospace; word-break: break-all; }
#graphs .bar { display: inline-block; margin-right: 14px; }
#graphs .bar b { color: #fff; }
body.shot #upperleft, body.shot #hexinfo, body.shot #toolbar, body.shot #historypanel, body.shot #tilehistory { display: none !important; }

/* first-person walk mode */
body.fp #toolbar, body.fp #logo, body.fp #historypanel, body.fp #tilehistory { display: none !important; }
#fphud { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
#fpcross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; opacity: .85; }
#fpcross::before, #fpcross::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
#fpcross::before { left: 8px; top: 0; width: 2px; height: 18px; }
#fpcross::after { left: 0; top: 8px; width: 18px; height: 2px; }
#fpbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: 94vw; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  background: rgba(0,0,0,.5); color: #ddd; padding: 6px 12px; border-radius: 6px; font: 13px monospace; white-space: nowrap; }
#fpstatus { color: chartreuse; }
#fpprompt { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font: 34px 'RingbearerFont', Georgia, serif; text-shadow: 0 2px 0 black; }

/* build mode */
#buildbar { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); max-width: 94vw; display: flex; flex-wrap: wrap; justify-content: center; gap: 3px;
  pointer-events: auto; background: rgba(0,0,0,.5); padding: 4px; border-radius: 6px; }
#buildbar .sw { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.25); border-radius: 3px; box-sizing: border-box; cursor: pointer;
  font: bold 10px monospace; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; text-align: center; line-height: 20px; }
#buildbar .sw.sel { border-color: #fff; outline: 2px solid chartreuse; }
#buildbar .sw.fam { border-color: rgba(255,255,255,.8); }
#buildbar.big { max-width: min(94vw, 640px); }
#buildbar.big .sw { width: 22px; height: 22px; }
#buildstatus:empty { display: none; }
#buildstatus { color: #ffd; }
#buildpanel { position: fixed; left: 0; bottom: 0; width: 560px; max-width: 100vw; max-height: 90vh; overflow: auto; z-index: 96; box-sizing: border-box;
  background: var(--panel); padding: 8px; border-top: 2px solid var(--panel-border); border-right: 2px solid var(--panel-border); border-radius: 0 5px 0 0; font-size: 13px; }
#buildpanel .row { gap: 6px; margin: 4px 0; }
#buildpanel .row.wrap { flex-wrap: wrap; }
#buildpanel label { display: inline-flex; align-items: center; gap: 4px; }
#buildpanel input, #buildpanel select { font-size: 13px; }
#buildpanel #buildname { width: 180px; }
#buildpanel textarea { width: 100%; box-sizing: border-box; font: 11px monospace; word-break: break-all; }
#buildpanel a.mini { text-decoration: none; background: #eee; border: 1px solid #999; border-radius: 3px; color: #000; }
#buildstats { font-family: monospace; margin: 4px 0; }
#buildmsg { font-style: italic; }
#buildpanel .help { font-size: 12px; margin-top: 6px; line-height: 1.35; }