:root {
  --ink: #241f33;
  --night: #1c1830;
  --glass: rgba(28, 24, 48, 0.55);
  --glass-strong: rgba(28, 24, 48, 0.8);
  --line: rgba(255, 255, 255, 0.16);
  --paper: #fffaf3;
  --muted: #736c7d;
  --glow: #ffc46b;
  --warm: linear-gradient(135deg, #ffd27a 0%, #ff9a6b 55%, #ff7fa8 100%);
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: #fff; font-family: var(--font); }
body { position: fixed; inset: 0; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; outline: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button, #hud .strip, #hud .selection-bar { pointer-events: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line); color: #fff;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  font-weight: 650; font-size: 15px; white-space: nowrap;
}
.pill.primary { background: var(--warm); border-color: transparent; color: #3a1d2a; }
.pill.icon { width: 40px; padding: 0; justify-content: center; font-size: 17px; }

.top {
  position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
}
.top-right { display: flex; gap: 8px; }
.place-pill { height: auto; min-height: 44px; padding: 6px 14px 6px 10px; max-width: min(50vw, 380px); text-align: left; }
.place-icon { font-size: 20px; }
.place-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
#place-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
#place-sub { font-size: 12px; font-weight: 550; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; }
#place-sub .live { color: #9dffb8; }

#toasts { position: absolute; top: calc(66px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: var(--glass-strong); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: toast-in .25s ease-out; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: all .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* Guest */
.guest-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px;
  padding: 0 calc(14px + var(--safe-r)) calc(16px + var(--safe-b)) calc(14px + var(--safe-l));
}
.emotes { display: flex; gap: 4px; flex-wrap: wrap; justify-self: start; }
.emotes button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); font-size: 19px; padding: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.side { display: flex; flex-direction: column; gap: 8px; justify-self: end; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--warm); color: #3a1d2a; font-weight: 800; font-size: 17px; box-shadow: 0 10px 30px rgba(255, 140, 90, 0.35);
}
.cta:active { transform: scale(0.97); }
.cta.wide { width: 100%; }
.round { width: 46px; height: 46px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line); font-size: 20px; display: grid; place-items: center; padding: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hint { position: absolute; left: 50%; bottom: calc(86px + var(--safe-b)); transform: translateX(-50%); font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .6s; pointer-events: none; background: var(--glass); padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.hint.on { opacity: 1; }
@media (max-width: 560px) {
  .guest-bottom { grid-template-columns: 1fr auto; }
  .emotes { grid-column: 1 / -1; order: -1; justify-content: center; justify-self: center; }
  .cta { height: 52px; font-size: 16px; padding: 0 20px; }
  .pill { height: 38px; padding: 0 11px; font-size: 14px; }
  .place-pill { max-width: 46vw; }
  #share-btn { padding: 0 12px; }
}

/* Invite */
.invite { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at center, rgba(20, 16, 36, 0.15), rgba(20, 16, 36, 0.55)); animation: fade-in .6s ease; }
@keyframes fade-in { from { opacity: 0; } }
.invite-card {
  width: min(420px, 100%); text-align: center; padding: 26px 22px 18px; border-radius: 28px;
  background: rgba(30, 25, 50, 0.62); border: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.chip { display: inline-block; font-size: 13px; font-weight: 750; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; background: rgba(255, 196, 107, 0.16); color: #ffd99a; }
.invite h1 { font-size: clamp(30px, 8vw, 42px); line-height: 1.05; margin: 14px 0 6px; letter-spacing: -0.02em; }
.inv-host { margin: 0; font-size: 16px; opacity: 0.9; }
.inv-when { margin: 14px 0 0; font-size: 15px; font-weight: 650; }
.inv-stats { margin: 6px 0 16px; font-size: 14px; opacity: 0.8; }
.inv-you { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.inv-you input { flex: 1; margin: 0; background: rgba(255, 255, 255, 0.92); }
.invite .fine { color: rgba(255, 255, 255, 0.7); margin-top: 10px; }
.link { background: none; border: 0; color: inherit; opacity: 0.8; font-weight: 650; font-size: 14px; padding: 6px; text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: #c0392b; }

/* Lantern card */
.lantern-card {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); width: min(380px, calc(100vw - 24px));
  background: var(--paper); color: var(--ink); border-radius: 20px; padding: 14px 16px 8px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35); animation: toast-in .25s ease-out;
  user-select: text; -webkit-user-select: text;
}
.lc-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.lc-head span { color: var(--muted); font-size: 13px; }
.lantern-card p { margin: 8px 0 4px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.lc-actions { display: flex; justify-content: flex-end; gap: 6px; }
.lantern-card .link { color: var(--ink); }

/* Decorate */
.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; background: var(--glass-strong); border: 1px solid var(--line); border-radius: 18px; padding: 6px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 100%; }
.strip::-webkit-scrollbar { display: none; }
.strip button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; height: 54px; border-radius: 12px; border: 0; background: transparent; font-size: 21px; padding: 2px 6px; }
.strip button small { font-size: 10.5px; font-weight: 650; opacity: .85; margin-top: 2px; white-space: nowrap; }
.strip button.on { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.strip button.magic { background: linear-gradient(135deg, rgba(255, 210, 122, .35), rgba(255, 127, 168, .35)); }
.tabs { align-items: center; }
.cats, .tools { display: flex; gap: 4px; }
.sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 2px; flex: none; }
.selection-bar { position: absolute; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 5px 6px 5px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.selection-bar span { font-weight: 750; font-size: 14px; margin-right: 6px; white-space: nowrap; }
.selection-bar button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f1eadf; font-size: 18px; color: var(--ink); }

/* Dialogs */
dialog.sheet {
  border: 0; padding: 22px 20px calc(18px + var(--safe-b)); color: var(--ink); background: var(--paper); border-radius: 26px;
  width: min(560px, calc(100vw - 20px)); max-height: calc(100dvh - 30px); overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); user-select: text; -webkit-user-select: text;
}
dialog.sheet.small { width: min(460px, calc(100vw - 20px)); }
dialog::backdrop { background: rgba(14, 10, 26, .45); backdrop-filter: blur(3px); }
@media (max-width: 600px) { dialog.sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 26px 26px 0 0; } }
dialog h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -0.01em; padding-right: 30px; }
dialog h3 { margin: 18px 0 8px; font-size: 15px; }
dialog p { line-height: 1.45; }
dialog label { display: block; font-size: 13px; color: var(--muted); font-weight: 650; margin-top: 8px; }
.muted { color: var(--muted); }
.fine { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.x { position: absolute; right: 14px; top: 12px; border: 0; background: rgba(0, 0, 0, .06); width: 32px; height: 32px; border-radius: 50%; font-size: 14px; color: var(--ink); }
.row { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.row.wrap { flex-wrap: wrap; }
.row.two > label { flex: 1; margin-top: 0; }
input, textarea, select { font: inherit; font-size: 16px; width: 100%; color: var(--ink); background: #fff; border: 1.5px solid #e6ddd0; border-radius: 12px; padding: 10px 12px; margin: 6px 0; outline: none; }
textarea { resize: none; }
input:focus, textarea:focus, select:focus { border-color: #ff9a6b; }
.row input { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #e6ddd0; background: #fff; color: var(--ink); font-weight: 750; font-size: 15px; white-space: nowrap; }
.btn.primary { background: var(--warm); border-color: transparent; color: #3a1d2a; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.wide { width: 100%; margin-top: 6px; }
.btn:disabled { opacity: .5; cursor: progress; }
.label { font-size: 13px; color: var(--muted); font-weight: 650; margin: 12px 0 6px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.cards.small { grid-template-columns: repeat(4, 1fr); }
.cards button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 16px; border: 1.5px solid #ede4d6; background: #fff; font-size: 28px; color: var(--ink); }
.cards.small button { font-size: 22px; padding: 10px 4px; }
.cards button small { font-size: 13px; font-weight: 700; }
.cards button.on { border-color: #ff9a6b; background: #fff3ea; }
@media (max-width: 420px) { .cards { grid-template-columns: repeat(2, 1fr); } .cards.small { grid-template-columns: repeat(2, 1fr); } }
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.segmented button { height: 40px; border-radius: 10px; border: 1.5px solid #e6ddd0; background: #fff; font-weight: 650; font-size: 13.5px; color: var(--ink); }
.segmented button.on { background: var(--warm); border-color: transparent; }
.swatches { display: flex; gap: 6px; flex: none; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; padding: 0; }
.swatches button.on { box-shadow: 0 0 0 2.5px var(--ink); }
.invite .swatches button.on { box-shadow: 0 0 0 2.5px #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chips button { border: 1.5px solid #ede4d6; background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 650; color: var(--ink); }
#ai-status { min-height: 1.4em; font-weight: 650; }
#postcard-img { width: 100%; border-radius: 18px; display: block; margin: 4px 0 14px; aspect-ratio: 1080 / 1350; object-fit: cover; max-height: 44dvh; background: #eee6da; }
.qr-box { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 12px; background: #fff; border-radius: 16px; border: 1.5px solid #efe6d8; }
.qr-box canvas { width: 140px; height: 140px; image-rendering: pixelated; flex: none; }
.qr-box p { margin: 0; font-size: 14px; font-weight: 650; }
@media (pointer: coarse) { .qr-box { display: none; } }
.my-places, .lantern-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.my-places a { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #efe6d8; color: var(--ink); text-decoration: none; font-weight: 650; }
.my-places a span { color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; }
.my-places .empty, .lantern-list .empty { color: var(--muted); font-size: 14px; }
.lantern-list li { padding: 10px 12px; border-radius: 14px; background: #fff; border: 1.5px solid #efe6d8; }
.lantern-list li b { display: block; font-size: 14px; }
.lantern-list li p { margin: 4px 0 0; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.lantern-list li .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
#fade { position: fixed; inset: 0; background: radial-gradient(circle, #fff6e0, #ffc46b 45%, #ff7fa8); opacity: 0; pointer-events: none; transition: opacity .35s; }
#fade.on { opacity: 1; }

@media (max-width: 480px) {
  .inv-you { flex-direction: column; align-items: stretch; }
  .inv-you .swatches { justify-content: center; }
  #lantern-dlg .row, #menu-dlg .row { flex-wrap: wrap; }
  #lantern-dlg .row input, #menu-dlg .row input { flex: 1 1 100%; }
  .swatches button { width: 30px; height: 30px; }
}
@media (max-width: 560px) { .hint { bottom: calc(132px + var(--safe-b)); } }

/* Host keys */
.key-status { font-size: 14.5px; line-height: 1.45; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #efe6d8; }
.key-status b { display: block; font-size: 15px; }
.code { white-space: pre-line; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 19px; font-weight: 700; letter-spacing: .04em; text-align: center; line-height: 1.6; padding: 14px; border-radius: 14px; background: #fff; border: 2px dashed #ff9a6b; word-spacing: .3em; user-select: all; -webkit-user-select: all; }
.check { display: flex !important; align-items: center; gap: 8px; color: var(--ink) !important; font-size: 15px !important; margin: 12px 0 6px !important; }
.check input { width: 20px; height: 20px; margin: 0; }
.keys-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.keys-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #efe6d8; font-size: 14.5px; }
.keys-list li small { display: block; color: var(--muted); font-size: 12.5px; }
.keys-list li .btn { height: 34px; padding: 0 12px; font-size: 13.5px; }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #fff3ea; border: 1.5px solid #ffd2b8; font-size: 14px; font-weight: 600; }
.nudge .btn { height: 36px; flex: none; }

/* Event kit */
.wide-round { width: auto; min-width: 46px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 750; }
.btn.ghost-light { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #fff; margin-top: 8px; }
#remind-dlg .btn.wide { margin-top: 8px; }
.row.two > label.check { align-self: end; margin-bottom: 10px !important; }
@media (max-width: 480px) {
  .row.two { flex-wrap: wrap; }
  .row.two > label { flex: 1 1 140px; }
}