:root {
  --ink: #f3ebdc;
  --soft: #c9bda8;
  --dim: #8f8471;
  --night: #120f0c;
  --panel: rgba(18, 15, 12, .9);
  --rule: rgba(243, 235, 220, .16);
  --ochre: #e0a35a;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
canvas#view:active { cursor: grabbing; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
#fade { position: fixed; inset: 0; z-index: 8; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#fade.on { opacity: 1; }

/* loading */
#loading { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 100%, #2a1a10 0%, var(--night) 60%); transition: opacity 1.6s ease; }
#loading.done { opacity: 0; pointer-events: none; }
.loading-inner { width: min(360px, 80vw); }
#loading h1 { font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -0.01em; margin: 0 0 10px; }
#loading .sub { margin: 0; font-size: 19px; font-style: italic; color: var(--soft); }
#loading .bar { height: 1px; background: rgba(243, 235, 220, .14); margin: 34px 0 12px; overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; background: var(--ochre); transition: width .35s ease; }
#loading .note { margin: 0; font-size: 15px; color: var(--dim); }

/* top line: place on the left, three plain buttons on the right */
#top { position: fixed; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left)); pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
#top .place strong { display: block; font-weight: 500; font-size: 28px; line-height: 1.05; }
#top .place span { font-size: 16px; font-style: italic; color: var(--soft); }
#top .place span b { font-weight: inherit; }
.tools { display: flex; gap: 20px; pointer-events: auto; padding-top: 6px; }
.tools button { white-space: nowrap; font-size: 16px; color: var(--ink); padding: 4px 0; border-bottom: 1px solid rgba(243, 235, 220, .35); transition: border-color .2s, color .2s; }
.tools button:hover, .tools button:focus-visible { border-color: var(--ochre); color: #fff; outline: none; }
.tools button[aria-pressed="true"] { color: var(--ochre); border-color: var(--ochre); }

#hint { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 3; margin: 0; padding: 0 16px; width: max-content; max-width: 94vw; text-align: center; font-size: 17px; color: var(--ink); text-shadow: 0 1px 12px rgba(0, 0, 0, .8); pointer-events: none; transition: opacity 1.2s ease; }
#hint.gone { opacity: 0; }
#hint.call { font-size: 21px; bottom: max(40px, env(safe-area-inset-bottom)); transition: opacity .3s ease; }
#hint kbd { font: inherit; font-style: italic; color: #fff; }

/* field guide */
#guide { position: fixed; z-index: 6; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); overflow: auto; padding: max(22px, env(safe-area-inset-top)) 26px 28px; background: var(--panel); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: -10px 0 40px rgba(0, 0, 0, .45); animation: slide .3s ease-out; }
@keyframes slide { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.guide-head { display: flex; justify-content: space-between; align-items: baseline; }
.guide-head h2 { margin: 0; font-weight: 500; font-size: 30px; }
#guide-close { font-size: 16px; color: var(--soft); border-bottom: 1px solid var(--rule); }
#guide-close:hover { color: var(--ink); }
#guide h3 { margin: 26px 0 4px; font-size: 15px; font-weight: 500; font-style: italic; color: var(--ochre); }
.entry { padding: 14px 0 16px; border-top: 1px solid var(--rule); }
.entry h4 { margin: 0; font-weight: 500; font-size: 22px; line-height: 1.15; }
.entry .latin { margin: 2px 0 8px; font-size: 15px; font-style: italic; color: var(--dim); }
.entry .tag { color: var(--soft); font-style: normal; }
.entry p { margin: 0 0 8px; font-size: 16.5px; line-height: 1.45; color: #e7dfd0; }
.entry dl { margin: 10px 0 0; }
.entry dl div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.entry dt { color: var(--dim); }
.entry dd { margin: 0; text-align: right; }
.entry .go { margin-top: 10px; font-size: 16px; color: var(--ochre); border-bottom: 1px solid rgba(224, 163, 90, .45); }
.entry .go:hover { color: #f2c58c; }
.credits { margin: 26px 0 0; font-size: 14px; line-height: 1.45; color: var(--dim); }

/* touch controls: small, bottom corners */
#stick { position: fixed; z-index: 3; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 96px; height: 96px; border-radius: 50%; background: rgba(18, 15, 12, .28); box-shadow: inset 0 0 0 1px rgba(243, 235, 220, .55); touch-action: none; display: grid; place-items: center; }
#stick i { width: 40px; height: 40px; border-radius: 50%; background: rgba(243, 235, 220, .9); pointer-events: none; transition: transform .15s ease-out; }
#stick.on i { transition: none; }
#stick svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: rgba(243, 235, 220, .5); }
#stick svg .up { fill: rgba(243, 235, 220, .9); }
#flap { position: fixed; z-index: 3; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 80px; height: 80px; border-radius: 50%; background: rgba(18, 15, 12, .28); box-shadow: inset 0 0 0 1px rgba(243, 235, 220, .55); display: grid; place-content: center; justify-items: center; line-height: 1; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#flap svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#flap span { font-size: 15px; margin-top: -1px; }
#flap.on { background: rgba(224, 163, 90, .35); }
/* heading down: the button calls attention to itself until the thumb finds it */
#flap.call { animation: call 1.1s ease-in-out infinite; }
@keyframes call { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(243, 235, 220, .55), 0 0 0 0 rgba(224, 163, 90, 0); } 50% { box-shadow: inset 0 0 0 2px var(--ochre), 0 0 0 12px rgba(224, 163, 90, .3); } }

@media (max-width: 640px) {
  #top .place strong { font-size: 22px; }
  #top .place span { font-size: 13.5px; }
  #top .place span b { display: none; }
  .tools { gap: 13px; padding-top: 4px; }
  .tools button { font-size: 14.5px; }
  #hint { font-size: 15px; bottom: max(128px, calc(env(safe-area-inset-bottom) + 128px)); }
  #loading h1 { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) { #guide, #flap.call { animation: none; } #flap.call { box-shadow: inset 0 0 0 2px var(--ochre); } }