/* One Slot — night for the session, bone for everything mundane. */

:root {
  --bone: #EDEBE6; --bone2: #E3E0D8; --card: #F7F5F0;
  --ink: #26241F; --mut: #8B8677; --line: #DBD7CB;
  --night: #101426; --night2: #161B33; --nline: #3A4270;
  --ntext: #E8EAF3; --ndim: #7B87B5; --ndim2: #9AA3C6;
  --moss: #7FB08A; --aurora: #8FE3C0; --ember: #E0A458;
  --sans: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, "New York", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bone);
  overflow: hidden; position: fixed; inset: 0; width: 100%;
}
button { font-family: var(--sans); cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; }
input, textarea { font-family: var(--serif); color: inherit; font-size: 17px; }

.scr {
  position: absolute; inset: 0; display: none; flex-direction: column;
  background: var(--bone); overflow: hidden;
}
.scr.on { display: flex; animation: fadein .4s ease; }
.scr.dark { background: var(--night); color: var(--ntext); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scr.on { animation: none; } }

.pad {
  padding: calc(env(safe-area-inset-top, 0px) + 56px) max(26px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 26px) max(26px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; height: 100%; gap: 14px;
}
.pad.center { justify-content: center; align-items: center; text-align: center; gap: 18px; }
.pad.scroll { overflow-y: auto; }
.lobby-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mut); }
.eyebrow.gap { margin-top: 18px; }
.eyebrow.dim { color: var(--ndim); }
.eyebrow.amber { color: #CBA36B; }
.q { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.22; text-wrap: balance; }
.q.small { font-size: 23px; margin-top: 8px; }
.q.light { color: var(--ntext); }
.sub { font-size: 13.5px; color: var(--mut); line-height: 1.55; }
.sub.dim2 { color: var(--ndim2); max-width: 300px; }

.field {
  width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; resize: none;
}
.field:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.field.slim { padding: 12px 14px; font-size: 16px; }
.scr.dark .field { background: var(--night2); border-color: var(--nline); color: var(--ntext); }

.cta {
  width: 100%; padding: 15px 0; border-radius: 14px; background: var(--ink); color: var(--bone);
  font-size: 15px; font-weight: 600; transition: transform .12s;
}
.cta:active { transform: scale(.985); }
.cta.gap { margin-top: 22px; }
.cta.light { background: var(--card); color: var(--ink); width: min(320px, 84%); }
.cta.stay { background: var(--aurora); color: #0C2A1E; width: min(320px, 84%); }
.cta.amber-btn { background: var(--ember); color: #3A2508; width: min(320px, 84%); }
.btn-ghost { font-size: 13px; color: var(--mut); padding: 12px; width: 100%; text-align: center; }
.btn-ghost.faded { color: var(--ndim); opacity: .15; transition: opacity .4s; width: min(320px, 84%); }
.btn-ghost.faded.ready { opacity: 1; }
.btn-mini {
  padding: 10px 16px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--line); font-size: 13.5px; font-weight: 600;
}

.offer { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.offer-label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mut); }
.offer-task { font-family: var(--serif); font-size: 19px; margin: 8px 0 4px; }
.offer-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.offer-acts .btn-ghost { width: auto; }

.hidden { display: none !important; }

/* seals */
.seals { display: flex; flex-direction: column; margin-top: 12px; }
.seal {
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  padding: 12px; border-radius: 12px; border: 1px solid transparent; text-align: left; width: 100%;
}
.seal .nm { font-size: 14.5px; font-weight: 600; }
.seal .ds { font-size: 11.5px; color: var(--mut); }
.seal.pick { background: var(--card); border-color: var(--ink); }
.dots { display: flex; gap: 3px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: block; }
.dots i.f { background: var(--ink); }
.note { font-size: 12.5px; color: var(--mut); background: var(--bone2); border-radius: 10px; padding: 10px 12px; margin-top: 8px; line-height: 1.5; }

.chips { display: flex; gap: 8px; margin-top: 8px; }
.chips button {
  flex: 1; padding: 10px 0; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; color: var(--mut); background: var(--card);
}
.chips button.ok { border-color: var(--ink); color: var(--ink); font-weight: 600; }

/* session */
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.task-chip {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 48px); left: 50%; transform: translateX(-50%);
  z-index: 5; text-align: center; width: 86%; pointer-events: auto;
}
.task-chip .t { font-family: var(--serif); font-size: 21px; color: #EAECF4; line-height: 1.3; text-wrap: balance; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.task-chip .m { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ndim); margin-top: 7px; }

.vault {
  position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 108px); z-index: 6;
  width: 36px; height: 36px; border-radius: 10px; font-size: 15px;
  background: rgba(224, 164, 88, .13); border: 1px solid rgba(224, 164, 88, .45); color: var(--ember);
}
.vault-tip {
  position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 152px); z-index: 6;
  background: rgba(16, 20, 38, .94); border: 1px solid rgba(224, 164, 88, .4); color: #EFD9B8;
  font-size: 12.5px; padding: 9px 12px; border-radius: 10px; max-width: 200px; line-height: 1.45;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.vault-tip.show { opacity: 1; }

.jar { position: absolute; right: max(22px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 5; display: flex; gap: 5px; }
.jar i { width: 6px; height: 6px; border-radius: 50%; background: var(--aurora); display: block; opacity: .9; }

.corner { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 7; color: #8A93B8; font-size: 14px; padding: 10px 6px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.corner.left { left: max(20px, env(safe-area-inset-left, 0px)); }
.corner.right { right: max(20px, env(safe-area-inset-right, 0px)); border: 1px solid transparent; border-radius: 10px; padding: 8px 14px; transition: all .8s; }
.corner.right.ready { color: var(--aurora); border-color: rgba(143, 227, 192, .5); background: rgba(143, 227, 192, .08); font-weight: 600; }

.chute-handle {
  position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%);
  z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 26px;
}
.chute-handle b { width: 40px; height: 4px; border-radius: 2px; background: #5A6690; display: block; }
.chute-handle span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ndim); }

.bubble {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(14px); bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
  z-index: 8; width: 84%; background: rgba(24, 29, 54, .96); border: 1px solid #39406A; border-radius: 16px;
  padding: 14px 15px; opacity: 0; pointer-events: none; transition: all .45s;
}
.bubble.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.bubble .bl { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ndim); margin-bottom: 5px; }
.bubble .bt { font-family: var(--serif); font-size: 16.5px; color: var(--ntext); line-height: 1.4; }
.b-acts { display: flex; gap: 8px; margin-top: 12px; }
.b-acts button { flex: 1; padding: 11px 0; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.b-acts .primary { background: rgba(143, 227, 192, .14); border: 1px solid rgba(143, 227, 192, .45); color: var(--aurora); }
.b-acts .quiet { background: rgba(232, 234, 243, .07); border: 1px solid #444C78; color: #C9CEE2; }

.overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(8, 10, 20, .78);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));
}
.overlay.show { display: flex; }
.chute-card { width: 84%; background: var(--night2); border: 1px solid var(--nline); border-radius: 16px; padding: 16px; }
.chute-card label { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ndim); }
.chute-card input {
  width: 100%; margin-top: 9px; background: #0E1226; border: 1px solid var(--nline); color: var(--ntext);
  border-radius: 10px; padding: 12px 13px;
}
.chute-card .row { display: flex; gap: 8px; margin-top: 11px; }
.chute-card .row .btn-ghost { color: var(--ndim); width: auto; flex: 1; }
.btn-drop { flex: 2; padding: 12px 0; border-radius: 10px; background: var(--aurora); color: #0C2A1E; font-weight: 700; font-size: 14px; }

.frost {
  position: absolute; inset: 0; z-index: 30; background: rgba(196, 208, 226, .16);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .9s;
}
.frost.show { opacity: 1; }
.frost span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: #DCE4F2; background: rgba(16, 20, 38, .75); padding: 10px 16px; border-radius: 10px;
}

/* toll */
.wave { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.wave i { width: 4px; background: var(--aurora); border-radius: 2px; height: 10px; }
.wave.play i { animation: wv 1s infinite ease-in-out; }
.wave.play i:nth-child(2) { animation-delay: .15s; } .wave.play i:nth-child(3) { animation-delay: .3s; }
.wave.play i:nth-child(4) { animation-delay: .45s; } .wave.play i:nth-child(5) { animation-delay: .6s; }
.wave.play i:nth-child(6) { animation-delay: .2s; } .wave.play i:nth-child(7) { animation-delay: .35s; }
@keyframes wv { 0%, 100% { height: 8px; } 50% { height: 30px; } }
@media (prefers-reduced-motion: reduce) { .wave.play i { animation: none; height: 16px; } }
.quote { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: #DFE3F0; max-width: 86%; }

/* done ceremony */
.panel {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
  justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch;
  gap: 18px; padding: 40px 28px; text-align: center;
}
.panel > :first-child { margin-top: auto; }
.panel > :last-child { margin-bottom: auto; }
.panel.on { display: flex; animation: fadein .5s ease; }
.rarity { font-family: var(--mono); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--aurora); }
.snapwrap { width: min(240px, 64vw); border-radius: 14px; overflow: hidden; border: 1px solid #39406A; }
.snapwrap img { width: 100%; display: block; max-height: 45vh; object-fit: cover; }
.tokline { font-size: 13.5px; color: var(--ndim2); line-height: 1.6; max-width: 300px; }
.tokline.big { font-family: var(--serif); font-size: 19px; color: var(--ntext); }
.deal-card {
  width: min(340px, 86%); background: var(--card); color: var(--ink); border-radius: 18px; padding: 24px 20px;
}
.deal-card .dm { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.deal-card .dt { font-family: var(--serif); font-size: 22px; line-height: 1.3; }
.deal-acts { display: flex; gap: 8px; margin-top: 18px; }
.deal-acts button { flex: 1; padding: 11px 0; border-radius: 10px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--bone); }
.deal-acts .nx { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.vault-door {
  width: min(340px, 86%); background: rgba(224, 164, 88, .1); border: 1px solid rgba(224, 164, 88, .5);
  border-radius: 18px; padding: 26px 20px; color: #EFD9B8;
}
.vault-door .vt { font-family: var(--serif); font-size: 22px; color: #F5E3C6; margin-top: 10px; }
.vault-door p { font-size: 13px; margin-top: 10px; color: #D9C4A2; }

/* shelf */
.shelf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.shelf-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.shelf-card img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.shelf-card .cap { padding: 8px 10px; }
.shelf-card .cap .st { font-family: var(--serif); font-size: 13.5px; line-height: 1.3; }
.shelf-card .cap .sm { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-top: 4px; }
.shelf-empty { font-size: 13.5px; color: var(--mut); margin-top: 16px; line-height: 1.6; }

/* 44pt/48dp hit areas without visual change */
.chips button, .deal-acts button, .b-acts button, .btn-mini,
.chute-card .row .btn-ghost, .btn-drop { min-height: 44px; }
.vault::after { content: ""; position: absolute; inset: -6px; }

/* keep the start CTA reachable on short screens: pinned while the form overflows */
.pad.scroll .cta.gap {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px));
  box-shadow: 0 0 0 6px var(--bone), 0 -18px 16px 6px var(--bone);
}