:root { --ink: #f4efe6; --dim: rgba(244, 239, 230, .62); --panel: rgba(18, 20, 24, .46); --line: rgba(244, 239, 230, .22); --red: #c8321e;
  --serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "SimSun", serif; }
html, body { margin: 0; height: 100%; background: #0f1216; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: crosshair; }
#ui { position: fixed; inset: 0; pointer-events: none; color: var(--ink); font: 14px/1.6 var(--serif); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
#ui button, #ui input, .minimap, .bigmap { pointer-events: auto; }
#ui button { font: inherit; color: var(--dim); background: none; border: 0; padding: 2px 9px; cursor: pointer; letter-spacing: .08em; text-shadow: inherit; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
#ui button:hover { color: var(--ink); }
#ui button.on { color: var(--ink); border-bottom-color: var(--red); }
.fatal { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; }

.head { position: absolute; left: 26px; top: 22px; display: flex; gap: 14px; align-items: center; }
.seal { width: 44px; height: 44px; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 700; border-radius: 3px; text-shadow: none; box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.title { font-size: 34px; font-weight: 700; letter-spacing: .32em; line-height: 1.1; }
.subtitle { font-size: 13px; letter-spacing: .5em; color: var(--dim); margin-top: 2px; }

.minimap { position: absolute; right: 22px; top: 22px; width: 220px; cursor: pointer; }
.minimap canvas { width: 220px; height: 220px; display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 6px 28px rgba(0, 0, 0, .45); opacity: .92; }
.coord { text-align: center; font-size: 12px; color: var(--dim); margin-top: 8px; letter-spacing: .1em; }

.bigmap { position: absolute; inset: 0; display: none; place-items: center; background: rgba(10, 12, 15, .72); backdrop-filter: blur(6px); flex-direction: column; }
.bigmap.on { display: grid; }
.bigmap canvas { box-shadow: 0 10px 60px rgba(0, 0, 0, .6); cursor: crosshair; max-width: calc(100vw - 40px); }
.bigmap-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--dim); letter-spacing: .2em; }

.places { position: absolute; left: 22px; bottom: 22px; max-width: 420px; display: flex; flex-wrap: wrap; gap: 2px 2px; }
.timebox { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); text-align: center; width: min(420px, 60vw); }
.clock { font-size: 22px; letter-spacing: .2em; }
.slider { width: 100%; appearance: none; -webkit-appearance: none; height: 1px; background: var(--line); outline: none; margin: 12px 0 8px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #f1c86a; box-shadow: 0 0 12px rgba(241, 200, 106, .8); cursor: pointer; }
.slider::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #f1c86a; box-shadow: 0 0 12px rgba(241, 200, 106, .8); cursor: pointer; }
.presets { display: flex; justify-content: center; flex-wrap: wrap; }
.controls { position: absolute; right: 22px; bottom: 22px; text-align: right; }
.controls .row { margin-top: 2px; }
.lbl { color: var(--dim); font-size: 12px; letter-spacing: .3em; margin-right: 4px; }
.attr { position: absolute; right: 22px; bottom: 4px; font-size: 10px; color: rgba(244, 239, 230, .38); letter-spacing: .04em; }

.hint { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); padding: 8px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; letter-spacing: .3em; transition: opacity .6s; backdrop-filter: blur(4px); }
.hint.off { opacity: 0; }
.cross { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: rgba(255, 255, 255, .75); box-shadow: 0 0 4px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .3s; }
body.locked .cross { opacity: 1; }
.help { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 86vw); padding: 22px 28px; background: rgba(16, 18, 22, .82); border: 1px solid var(--line); border-radius: 6px; backdrop-filter: blur(8px); display: none; }
.help.on { display: block; }
.help h3 { margin: 0 0 8px; letter-spacing: .4em; font-size: 18px; }
.help p { margin: 6px 0; }
.help b { color: #f1c86a; font-weight: 600; }
.dim { color: var(--dim); }

.stick { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); display: none; }
.stick.on { display: block; }
.stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: rgba(255, 255, 255, .28); }

.veil { position: absolute; inset: 0; background: #0f1216; display: grid; place-items: center; transition: opacity 1.2s; }
.veil.gone { opacity: 0; pointer-events: none; }
.veil-title { font-size: 64px; font-weight: 700; letter-spacing: .5em; text-indent: .5em; text-align: center; }
.veil-sub { text-align: center; color: var(--dim); letter-spacing: .4em; margin-top: 8px; }
.veil-bar { width: 260px; height: 1px; background: var(--line); margin: 26px auto 0; }
.veil-bar i { display: block; height: 1px; width: 0; background: #f1c86a; box-shadow: 0 0 10px #f1c86a; transition: width .4s; }

body.bare #ui > :not(.cross):not(.veil) { display: none; }
body.locked .places, body.locked .controls, body.locked .timebox, body.locked .head, body.locked .attr { opacity: .0; transition: opacity .5s; }
.places, .controls, .timebox, .head, .attr { transition: opacity .5s; }
.head::after { content: none; }
@media (max-width: 760px), (max-height: 480px) {
  /* phones: the scene first; the place list, the clock and the switches fold away behind the seal */
  .head { left: 12px; top: 12px; gap: 10px; pointer-events: auto; cursor: pointer; }
  .head::after { content: "菜单"; font-size: 12px; letter-spacing: .3em; padding: 3px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
  body.menu .head::after { content: "收起"; }
  .seal { width: 34px; height: 34px; font-size: 20px; } .title { font-size: 22px; letter-spacing: .2em; } .subtitle, .attr { display: none; }
  .minimap, .minimap canvas { width: 96px; height: 96px; } .minimap { width: 96px; right: 12px; top: 12px; } .coord { font-size: 10px; margin-top: 4px; }
  .hint { top: auto; bottom: 18px; font-size: 12px; letter-spacing: .15em; white-space: nowrap; }
  .places, .timebox, .controls { display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; backdrop-filter: blur(6px); pointer-events: auto; }
  body.menu .places { display: flex; left: 12px; right: 12px; top: 140px; bottom: auto; max-width: none; font-size: 13px; }
  body.menu .timebox { display: block; left: 12px; right: 12px; bottom: 104px; transform: none; width: auto; }
  body.menu .controls { display: block; left: 12px; right: 12px; bottom: 12px; text-align: left; font-size: 13px; }
  body.menu .hint { display: none; }
}
@media (max-height: 480px) {
  /* a phone on its side: the three panels side by side along the bottom */
  body.menu .places { top: 56px; right: 124px; }
  body.menu .timebox { left: 12px; right: 50%; bottom: 10px; margin-right: 6px; }
  body.menu .controls { left: 50%; right: 12px; bottom: 10px; margin-left: 6px; }
}
}

.labels { position: absolute; inset: 0; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; display: none; padding-bottom: 16px; font-size: 13px; letter-spacing: .28em; white-space: nowrap; color: var(--ink); will-change: transform; }
.label::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 13px; background: rgba(244, 239, 230, .7); }
body.locked .labels { opacity: .0; }