* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a2420; color: #26262a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#c { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
body.hover #c { cursor: pointer; }
body.pulling #c { cursor: grabbing; }

/* The HUD sits on the desk: light text with a soft shadow, over a faint scrim at the top of the play area. */
body::before { content: ""; position: fixed; left: 0; top: 0; width: var(--play-w, 100%); height: 110px; pointer-events: none;
  background: linear-gradient(#1a1512a6, #1a151200); }
#hud { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 0; width: var(--play-w, 100%); text-align: center; pointer-events: none;
  text-shadow: 0 1px 3px #0009; }
#count { font-size: 15px; letter-spacing: 0.02em; color: #e6dfd6; }
#count b { font-size: 26px; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; }
#count b.tick { animation: tick 0.25s ease-out; }
@keyframes tick { from { transform: translateY(-5px); opacity: 0.4; } }
#count b { display: inline-block; }
#era { font-size: 12px; color: #d9cfc3; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.12em; }

#banner { position: fixed; left: 0; width: var(--play-w, 100%); top: 17%; text-align: center; pointer-events: none; opacity: 0;
  font-size: 22px; font-weight: 600; color: #fff; transition: opacity 0.8s; text-shadow: 0 1px 6px #000c; }
#banner small { display: block; font-size: 13px; font-weight: 400; color: #eee6dc; margin-top: 4px; letter-spacing: 0.04em; }
#banner.on { opacity: 1; }

#hint { position: fixed; left: 0; width: var(--play-w, 100%); bottom: calc(18px + env(safe-area-inset-bottom)); text-align: center;
  font-size: 14px; color: #fff; text-shadow: 0 1px 4px #000c; pointer-events: none; transition: opacity 0.6s; padding: 0 16px; }
#hint.off { opacity: 0; }

#buttons { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 0; width: var(--play-w, 100%); padding-right: 8px; display: flex; gap: 6px; justify-content: flex-end; pointer-events: none; }
#buttons button { pointer-events: auto; }
#buttons #b-finds { width: auto; padding: 0 10px 0 8px; display: flex; gap: 5px; align-items: center; font-variant-numeric: tabular-nums; }
#buttons button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #ffffffd0; color: #33333a;
  font: 600 12px system-ui, sans-serif; display: grid; place-items: center; cursor: pointer; padding: 0; }
#buttons svg { width: 22px; height: 22px; fill: currentColor; }
#mute-x { display: none; }
body.muted #mute-x { display: inline; }
/* On a mouse the keys do this (Esc, M); the finds button stays. */
body:not(.touch) #b-menu, body:not(.touch) #b-mute { display: none; }
/* On a narrow screen the counter moves left, clear of the buttons. */
@media (max-width: 560px) { #hud { text-align: left; left: 14px; } }

#stats { position: fixed; left: 8px; top: calc(58px + env(safe-area-inset-top)); margin: 0; padding: 8px 10px; border-radius: 10px;
  background: #1d1d21d9; color: #e8e6df; font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace; pointer-events: none;
  max-width: calc(100vw - 16px); white-space: pre-wrap; }

#menu, .overlay { position: fixed; inset: 0; background: #1a1512b8; display: grid; place-items: center; padding: 16px; overflow: auto; }
#menu[hidden], #stats[hidden], .overlay[hidden], #panel[hidden] { display: none; }
#shelf { z-index: 3; }
.card { width: min(420px, 100%); background: #fff; border-radius: 18px; padding: 22px 22px 16px; box-shadow: 0 12px 40px #0002; }
.card h1 { margin: 0; font-size: 26px; }
.card .sub { margin: 4px 0 12px; color: #66666c; }
.card p { font-size: 14px; line-height: 1.45; margin: 10px 0; }
.card .note { font-size: 12px; color: #77777e; }
.row { display: block; font-size: 14px; margin: 14px 0 4px; }
.row input[type=range] { display: block; width: 100%; height: 44px; margin: 0; }
.row.check { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
.row.check input { width: 22px; height: 22px; }
.btns { display: flex; gap: 8px; margin: 10px 0; }
.btns button { flex: 1; min-height: 46px; border-radius: 12px; border: 1px solid #c9c7c1; background: #f4f3f0; font: 600 14px system-ui, sans-serif;
  color: #26262a; cursor: pointer; }
.btns button.primary { background: #26262a; color: #fff; border-color: #26262a; }
.btns.bench button { font-weight: 500; font-size: 13px; }
.seg { display: flex; margin: 12px 0 6px; border: 1px solid #c9c7c1; border-radius: 12px; overflow: hidden; }
.seg button { flex: 1; min-height: 46px; border: 0; border-left: 1px solid #c9c7c1; background: #f4f3f0; font: 600 14px system-ui, sans-serif; color: #26262a; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: #26262a; color: #fff; }
.card .note { margin: 4px 0 10px; }
.row select { display: block; width: 100%; height: 44px; margin-top: 4px; font-size: 15px; }
#more { margin: 12px 0 4px; font-size: 14px; }
#more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: #44444a; }
#more summary::before { content: "▸"; margin-right: 8px; }
#more[open] summary::before { content: "▾"; }
#more summary::-webkit-details-marker { display: none; }
#end-next { color: #44444a; }
.links { text-align: center; }
.links a { color: #2552b8; }
.links .follow { font-size: 12.5px; color: #66666c; display: inline-block; padding: 8px 0 2px; }
/* The end screen's one question, and the teaser for what might come next. */
#vote { border-top: 1px solid #e6e3dc; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 44px; padding: 0 12px; border-radius: 22px; border: 1px solid #c9c7c1; background: #f4f3f0; font: 500 13px system-ui, sans-serif; color: #26262a; cursor: pointer; }
.door { display: block; width: 100%; min-height: 46px; margin: 12px 0 0; padding: 6px 12px; border-radius: 12px; border: 1px dashed #b9b5aa; background: none; font: 500 13px system-ui, sans-serif; color: #55555c; cursor: pointer; }
.door[disabled] { opacity: 0.55; cursor: default; }

#loading { position: fixed; inset: 0; background: #2a2420; color: #fff; display: grid; place-items: center; text-align: center; transition: opacity 0.4s; }
#loading b { display: block; font-size: 28px; margin-bottom: 8px; }
#loading span { color: #cfc6bb; font-size: 14px; }
#loading.off { opacity: 0; pointer-events: none; }

#progress { color: #44444a; }
.card.wide { width: min(620px, 100%); }

/* A find: a card that slides up from the bottom of the play area. */
#found { position: fixed; left: 0; width: var(--play-w, 100%); bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center;
  pointer-events: none; opacity: 0; transform: translateY(24px); transition: opacity 0.35s, transform 0.35s; padding: 0 12px; }
#found.on { opacity: 1; transform: none; }
#found > img { width: 72px; height: 72px; flex: none; background: #f4f1ea; border-radius: 14px 0 0 14px; }
#found > div { background: #fff; border-radius: 0 14px 14px 0; padding: 9px 14px 9px 12px; max-width: 300px; box-shadow: 0 8px 28px #0005; }
#found small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #a0661a; }
#found b { display: block; font-size: 16px; }
#found span { font-size: 13px; color: #55555c; }

#shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 12px 0; max-height: 58vh; overflow: auto; }
.slot { background: #f4f1ea; border-radius: 12px; padding: 8px 8px 10px; text-align: center; }
.slot img, .slot i { display: block; width: 76px; height: 76px; margin: 0 auto 4px; }
.slot i { font: 600 34px/76px system-ui, sans-serif; color: #c9c3b6; }
.slot b { display: block; font-size: 13px; }
.slot span { font-size: 11.5px; color: #66666c; line-height: 1.3; display: block; }
.slot.empty b { color: #99948a; font-weight: 500; }

/* The dials: a sheet over the bottom of a phone, a column down the right of a wide screen. */
#panel { position: fixed; right: 0; top: 0; bottom: 0; width: 340px; background: #fbfaf7; overflow: auto; padding: 0 14px 20px;
  box-shadow: -6px 0 24px #0004; -webkit-user-select: none; user-select: none; overscroll-behavior: contain; }
@media (max-width: 700px) { #panel { top: auto; left: 0; width: auto; height: 46vh; box-shadow: 0 -6px 24px #0004; border-radius: 14px 14px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }
.p-head { position: sticky; top: 0; background: #fbfaf7; display: flex; gap: 6px; align-items: center; padding: 10px 0 8px; z-index: 1; }
.p-head b { flex: 1; font-size: 17px; }
.p-head button, .p-btn { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #c9c7c1; background: #f1efea; font: 600 13px system-ui, sans-serif; color: #26262a; cursor: pointer; }
.p-btn { display: block; width: 100%; margin: 6px 0; font-weight: 500; text-align: left; }
.p-note { font-size: 12px; color: #66666c; line-height: 1.4; margin: 0 0 6px; }
#panel h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #8a8478; margin: 16px 0 2px; }
.p-row { display: grid; grid-template-columns: 1fr auto; font-size: 14px; padding-top: 8px; }
.p-row b { font-variant-numeric: tabular-nums; font-weight: 600; }
.p-row b.changed { color: #b2541a; }
.p-row input, .p-row select { grid-column: 1 / 3; width: 100%; height: 44px; margin: 0; font-size: 15px; }
.p-row small { grid-column: 1 / 3; font-size: 11.5px; color: #77777e; line-height: 1.35; }
body.panel #hint { display: none; }