/* ============================================================
   CAPCHA
   style.css
   2026-08-12-27

   - Mobile first
   - No gradients
   - Archive = monthly calendar (replaces the old flat grid)
   - Vertical Archive spacing
   - Center Capture navigation
   - Equal Done / Capture buttons
   - Small centered delete inside capsule only
   - Interactive person physics area
   ============================================================ */


:root {

  --bg:
    #09090a;

  --surface:
    #111214;

  --surface-2:
    #16171a;

  --surface-3:
    #1c1d20;

  --text:
    #f5f5f2;

  --muted:
    #8b8e95;

  --muted-2:
    #5e6167;

  --line:
    rgba(255,255,255,.08);

  --line-strong:
    rgba(255,255,255,.13);

  --accent:
    #d8ff63;

  --accent-text:
    #101108;

  --danger:
    #ff7474;

  --capsule-color:
    #999da5;

  --capsule-glow:
    rgba(255,255,255,.12);

  --safe-top:
    env(safe-area-inset-top);

  --safe-bottom:
    env(safe-area-inset-bottom);

  color-scheme:
    dark;

}


/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after {

  box-sizing:
    border-box;

}


html,
body {

  width:
    100%;

  min-height:
    100%;

  margin:
    0;

  padding:
    0;

  background:
    #050506;

  overflow-x:
    hidden;

  scrollbar-width:
    none;

}


html::-webkit-scrollbar,
body::-webkit-scrollbar {

  display:
    none;

}


body {

  min-height:
    100vh;

  min-height:
    100dvh;

  color:
    var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-size:
    16px;

  letter-spacing:
    -.015em;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


button,
input,
select,
textarea {

  font:
    inherit;

}


button {

  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    none;

  color:
    inherit;

  cursor:
    pointer;

  -webkit-tap-highlight-color:
    transparent;

}


button:disabled {

  opacity:
    .35;

  cursor:
    default;

}


img,
video,
canvas {

  display:
    block;

}


[hidden] {

  display:
    none !important;

}


.sr-only {

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(0,0,0,0);

  white-space:
    nowrap;

  border:
    0;

}


/* ============================================================
   APP
============================================================ */

.app-shell {

  position:
    relative;

  width:
    100%;

  max-width:
    480px;

  min-height:
    100vh;

  min-height:
    100dvh;

  margin:
    0 auto;

  background:
    var(--bg);

  overflow-x:
    hidden;

}


.screen {

  position:
    relative;

  width:
    100%;

  min-height:
    100vh;

  min-height:
    100dvh;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(--bg);

}


.screen--dark {

  background:
    var(--bg);

}


/* ============================================================
   TOPBAR
============================================================ */

.topbar {

  position:
    relative;

  z-index:
    20;

  width:
    100%;

  min-height:
    calc(
      68px +
      var(--safe-top)
    );

  display:
    grid;

  grid-template-columns:
    52px
    minmax(0,1fr)
    52px;

  align-items:
    center;

  padding:
    calc(
      10px +
      var(--safe-top)
    )
    14px
    10px;

  background:
    var(--bg);

  border-bottom:
    1px solid
    var(--line);

}


.topbar--overlay {

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  z-index:
    30;

  background:
    rgba(8,8,9,.76);

  border-bottom:
    0;

}


.topbar-title {

  grid-column:
    2;

  margin:
    0;

  font-size:
    1.02rem;

  font-weight:
    650;

  letter-spacing:
    -.035em;

  text-align:
    center;

}


.topbar-hint {

  grid-column:
    2;

  margin:
    0;

  color:
    rgba(255,255,255,.82);

  font-size:
    .75rem;

  text-align:
    center;

}


.topbar-spacer {

  width:
    52px;

  height:
    1px;

}


/* ============================================================
   ICON BUTTON
============================================================ */

.icon-btn {

  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  justify-self:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    var(--surface);

  color:
    var(--text);

}


.icon-btn:active {

  transform:
    scale(.95);

}


.topbar-avatar-image {

  width:
    100%;

  height:
    100%;

  border-radius:
    50%;

  object-fit:
    cover;

}


.icon {

  width:
    22px;

  height:
    22px;

}


/* ============================================================
   BUTTONS
============================================================ */

.btn {

  width:
    100%;

  min-width:
    0;

  height:
    50px;

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 16px;

  border-radius:
    13px;

  font-size:
    .86rem;

  font-weight:
    620;

  text-align:
    center;

}


.btn:active {

  opacity:
    .7;

}


.btn--primary {

  background:
    var(--accent);

  color:
    var(--accent-text);

}


.btn--outline {

  background:
    var(--surface);

  border:
    1px solid
    var(--line-strong);

  color:
    var(--text);

}


.btn--ghost {

  background:
    transparent;

  color:
    var(--muted);

}


/* ============================================================
   DELETE

   IMPORTANT:
   Not a large .btn.
============================================================ */

.internal-danger-zone {

  flex:
    0 0 auto;

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    2px
    20px
    calc(
      18px +
      var(--safe-bottom)
    );

  text-align:
    center;

}


.internal-danger-zone--memory {

  padding-top:
    0;

}


.internal-danger-zone--detail {

  padding:
    6px 0 0;

}


.internal-delete-btn {

  display:
    inline-flex;

  width:
    auto;

  min-width:
    0;

  min-height:
    34px;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto;

  padding:
    5px 12px;

  border:
    0;

  background:
    transparent;

  color:
    var(--muted-2);

  font-size:
    .7rem;

  font-weight:
    500;

  line-height:
    1;

  text-align:
    center;

  white-space:
    nowrap;

}


.internal-delete-btn:hover {

  color:
    #85888f;

}


.internal-delete-btn:active {

  color:
    var(--danger);

}


/* ============================================================
   GUEST
============================================================ */

.guest-banner {

  margin:
    12px
    16px
    0;

  padding:
    10px
    13px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  background:
    var(--surface);

  color:
    var(--muted);

  font-size:
    .75rem;

}


.guest-banner p {

  margin:
    0;

}


/* ============================================================
   ARCHIVE CARD (wraps the calendar)
============================================================ */

.shelf-wrap {

  flex:
    1;

  width:
    calc(
      100% -
      28px
    );

  margin:
    14px
    14px
    110px;

  padding:
    20px
    14px
    24px;

  border:
    1px solid
    var(--line);

  border-radius:
    22px;

  background:
    var(--surface);

  overflow:
    hidden;

}


/* ============================================================
   CALENDAR
============================================================ */

.calendar-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    2px
    2px
    14px;

}


.calendar-nav-btn {

  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  color:
    var(--text);

  font-size:
    1.1rem;

  line-height:
    1;

}


.calendar-nav-btn:active {

  transform:
    scale(.93);

}


.calendar-title {

  margin:
    0;

  font-size:
    .92rem;

  font-weight:
    650;

  letter-spacing:
    -.02em;

}


.calendar-weekdays {

  display:
    grid;

  grid-template-columns:
    repeat(7, minmax(0,1fr));

  padding:
    0 2px 6px;

}


.calendar-weekdays span {

  display:
    block;

  color:
    var(--muted-2);

  font-size:
    .62rem;

  font-weight:
    600;

  text-align:
    center;

}


.calendar-grid {

  display:
    grid;

  grid-template-columns:
    repeat(7, minmax(0,1fr));

  gap:
    3px;

}


.calendar-day {

  position:
    relative;

  aspect-ratio:
    1;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    2px;

  padding:
    4px 2px 3px;

  border-radius:
    12px;

  background:
    transparent;

}


.calendar-day--pad {

  visibility:
    hidden;

}


.calendar-day-number {

  color:
    var(--muted);

  font-size:
    .64rem;

  font-weight:
    500;

}


.calendar-day--today .calendar-day-number {

  color:
    var(--accent);

  font-weight:
    700;

}


.calendar-day--has-capsule {

  display:
    grid;

  padding:
    2px;

  background:
    var(--surface-2);
}


.calendar-day--has-capsule:active {

  transform:
    scale(.95);

}


.calendar-day-capsule {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

}


.calendar-day-capsule .capsule-orb {

  --size:
    40px;

}


.calendar-day-badge {

  position:
    absolute;

  top:
    2px;

  right:
    2px;

  padding:
    1px 4px;

  border-radius:
    999px;

  background:
    var(--accent);

  color:
    var(--accent-text);

  font-size:
    .52rem;

  font-weight:
    700;

  line-height:
    1.4;

}


.calendar-empty {

  margin:
    18px 4px 2px;

  color:
    var(--muted);

  font-size:
    .74rem;

  line-height:
    1.5;

  text-align:
    center;

}


/* ============================================================
   DAY CAPSULES (multiple capsules on one date)
============================================================ */

.day-capsule-list {

  list-style:
    none;

  margin:
    0;

  padding:
    8px
    16px
    40px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.day-capsule-item {

  width:
    100%;

  min-height:
    64px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    10px
    14px;

  border:
    1px solid
    var(--line);

  border-radius:
    16px;

  background:
    var(--surface);

  text-align:
    left;

}


.day-capsule-item:active {

  opacity:
    .72;

}


.day-capsule-item .capsule-orb {

  --size:
    46px;

}


.day-capsule-name {

  color:
    var(--text);

  font-size:
    .8rem;

  font-weight:
    600;

}


/* ============================================================
   CAPSULE
============================================================ */

.capsule-orb {

  --size:
    70px;

  position:
    relative;

  width:
    var(--size);

  height:
    var(--size);

  min-width:
    var(--size);

  min-height:
    var(--size);

  flex:
    0 0
    var(--size);

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.3);

  border-radius:
    50%;

  background:
    var(--capsule-color);

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(255,255,255,.045),

    0
    7px
    16px
    rgba(0,0,0,.2);

}


.capsule-orb::before {

  content:
    "";

  position:
    absolute;

  z-index:
    3;

  top:
    10px;

  left:
    14px;

  width:
    11px;

  height:
    6px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.32);

  transform:
    rotate(-25deg);

  pointer-events:
    none;

}


.capsule-orb::after {

  content:
    "";

  position:
    absolute;

  inset:
    6px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    50%;

  pointer-events:
    none;

}


.capsule-orb--lg {

  --size:
    136px;

}


.capsule-orb--xl {

  --size:
    174px;

}


.capsule-orb--sealed {

  opacity:
    .68;

}


.capsule-type-image {

  position:
    absolute;

  z-index:
    1;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  pointer-events:
    none;

}


.capsule-orb.effect-glow {

  box-shadow:
    0
    0
    18px
    var(--capsule-glow);

}


.capsule-orb.effect-pulse {

  animation:
    capsule-pulse
    2.2s
    ease-in-out
    infinite;

}


@keyframes capsule-pulse {

  50% {

    transform:
      scale(1.035);

  }

}


/* ============================================================
   BOTTOM NAV
============================================================ */

.bottom-nav {

  position:
    fixed;

  z-index:
    100;

  left:
    50%;

  bottom:
    calc(
      10px +
      var(--safe-bottom)
    );

  transform:
    translateX(-50%);

  width:
    calc(
      min(
        480px,
        100%
      ) -
      24px
    );

  height:
    72px;

  display:
    grid;

  grid-template-columns:
    1fr
    76px
    1fr;

  align-items:
    center;

  padding:
    7px 10px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    22px;

  background:
    #17181a;

  box-shadow:
    0
    12px
    32px
    rgba(0,0,0,.34);

}


.nav-btn {

  height:
    56px;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;

  border-radius:
    14px;

  color:
    var(--muted);

  font-size:
    .62rem;

}


.nav-btn.is-active {

  color:
    var(--text);

}


.nav-icon {

  width:
    21px;

  height:
    21px;

}


.nav-btn--camera {

  width:
    64px;

  height:
    58px;

  justify-self:
    center;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

}


.camera-nav-circle {

  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--accent);

  color:
    var(--accent-text);

}


.camera-nav-icon {

  width:
    23px;

  height:
    23px;

}


/* ============================================================
   CAMERA
============================================================ */

#screen-camera {

  height:
    100dvh;

  overflow:
    hidden;

}


.camera-viewport {

  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;

  background:
    #000;

}


#camera-video {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.camera-controls {

  position:
    absolute;

  z-index:
    20;

  left:
    0;

  right:
    0;

  bottom:
    calc(
      24px +
      var(--safe-bottom)
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.shutter-btn {

  width:
    76px;

  height:
    76px;

  border:
    6px solid
    rgba(0,0,0,.27);

  border-radius:
    50%;

  background:
    #fff;

  box-shadow:
    0
    0
    0
    2px
    rgba(255,255,255,.38);

}


.shutter-btn:active {

  transform:
    scale(.94);

}


.camera-error {

  position:
    absolute;

  top:
    50%;

  left:
    24px;

  right:
    24px;

  color:
    #fff;

  font-size:
    .8rem;

  text-align:
    center;

}


/* ============================================================
   PREVIEW
============================================================ */

#screen-preview {

  height:
    100dvh;

  overflow:
    hidden;

}


.preview-wrap {

  flex:
    1;

  min-height:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    14px;

}


#preview-image {

  width:
    100%;

  max-height:
    calc(
      100dvh -
      210px
    );

  object-fit:
    contain;

  border-radius:
    18px;

}


.preview-actions {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    9px;

  padding:
    10px
    16px
    calc(
      18px +
      var(--safe-bottom)
    );

}


/* ============================================================
   SEALING
============================================================ */

#screen-sealing {

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;

}


.sealing-orb {

  width:
    88px;

  height:
    88px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    50%;

  background:
    var(--surface-2);

  animation:
    sealing-pulse
    1.2s
    ease-in-out
    infinite;

}


@keyframes sealing-pulse {

  50% {

    transform:
      scale(.94);

    opacity:
      .55;

  }

}


.sealing-text {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    .78rem;

}


/* ============================================================
   DISCOVERED
============================================================ */

.discovered-card {

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    40px 24px;

}


.discovered-label {

  margin:
    12px 0 0;

  color:
    var(--accent);

  font-size:
    .65rem;

  font-weight:
    700;

  letter-spacing:
    .14em;

}


.discovered-name {

  margin:
    0;

  font-size:
    1.4rem;

  font-weight:
    700;

}


.discovered-condition {

  max-width:
    300px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    .78rem;

  line-height:
    1.5;

  text-align:
    center;

}


.discovered-actions {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    16px
    18px
    calc(
      20px +
      var(--safe-bottom)
    );

}


/* ============================================================
   FRIEND
============================================================ */

.friend-search {

  padding:
    16px;

}


.friend-search input {

  width:
    100%;

  height:
    48px;

  padding:
    0 14px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  outline:
    none;

  background:
    var(--surface);

  color:
    var(--text);

}


.friend-list {

  list-style:
    none;

  margin:
    0;

  padding:
    0 16px;

}


.friend-list li {

  min-height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    var(--line);

}


/* ============================================================
   SENT
============================================================ */

#screen-sent {

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  padding:
    28px;

}


.sent-orb {

  width:
    80px;

  height:
    80px;

  border-radius:
    50%;

  background:
    var(--accent);

}


.sent-title {

  margin:
    0;

}


.sent-sub {

  margin:
    0 0 12px;

  color:
    var(--muted);

}


.sent-done-btn {

  max-width:
    280px;

}


/* ============================================================
   SEALED CAPSULE
============================================================ */

#screen-received {

  height:
    100dvh;

  overflow:
    hidden;

}


.shake-stage {

  flex:
    1;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  padding:
    20px
    20px
    6px;

}


.shake-hint {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    .77rem;

  text-align:
    center;

}


.shake-progress {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

}


.shake-dot {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #34363a;

}


.shake-dot.is-filled {

  background:
    var(--accent);

}


.shake-main-action {

  max-width:
    280px;

  margin:
    6px auto 0;

}


/* ============================================================
   MEMORY / REVEAL
============================================================ */

#screen-revealed {

  height:
    100dvh;

  overflow:
    hidden;

}


.reveal-wrap {

  position:
    relative;

  flex:
    1;

  min-height:
    0;

  width:
    100%;

  overflow:
    hidden;

  background:
    var(--bg);

  touch-action:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

}


.reveal-wrap img {

  max-width:
    none;

  max-height:
    none;

  margin:
    0;

}


/*
  Person is intentionally slightly smaller.

  Physics JS controls translate + rotation.
*/

#revealed-image.revealed-person {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    auto;

  height:
    min(
      46vh,
      370px
    );

  object-fit:
    contain;

  transform-origin:
    center center;

  touch-action:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  cursor:
    grab;

  will-change:
    transform;

  filter:
    drop-shadow(
      0
      12px
      18px
      rgba(0,0,0,.25)
    );

}


#revealed-image.revealed-person.is-dragging {

  cursor:
    grabbing;

}


#revealed-image.revealed-original {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    min(
      68vw,
      300px
    );

  height:
    auto;

  object-fit:
    contain;

  border-radius:
    18px;

  transform-origin:
    center center;

  touch-action:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  cursor:
    grab;

  will-change:
    transform;

}


.revealed-missing-notice {

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  transform:
    translate(-50%, -50%);

  max-width:
    280px;

  margin:
    0;

  padding:
    0 24px;

  color:
    var(--muted);

  font-size:
    .78rem;

  line-height:
    1.55;

  text-align:
    center;

}


.reveal-info {

  flex:
    0 0 auto;

  padding:
    9px
    18px
    5px;

  background:
    var(--bg);

  text-align:
    center;

}


.reveal-name-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

}


.reveal-name {

  margin:
    0;

  font-size:
    .96rem;

  font-weight:
    650;

}


.reveal-rename-btn {

  padding:
    3px 9px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    999px;

  color:
    var(--muted);

  font-size:
    .62rem;

  font-weight:
    600;

}


.reveal-rename-btn:active {

  color:
    var(--text);

}


.reveal-date {

  margin:
    3px
    0
    0;

  color:
    var(--muted-2);

  font-size:
    .64rem;

}


.reveal-from {

  margin:
    4px
    0
    0;

  color:
    var(--muted);

  font-size:
    .7rem;

}


/*
  Exactly 2 columns.

  Delete is NOT here.
*/

.reveal-actions {

  flex:
    0 0 auto;

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  align-items:
    stretch;

  gap:
    8px;

  padding:
    8px
    16px
    4px;

}


.reveal-actions .btn {

  width:
    100%;

  height:
    50px;

  min-height:
    50px;

  margin:
    0;

  padding:
    0 12px;

}


/* ============================================================
   COLLECTION
============================================================ */

.dex-progress {

  padding:
    18px
    18px
    12px;

}


.dex-progress-bar {

  width:
    100%;

  height:
    3px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #26282b;

}


.dex-progress-fill {

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--accent);

}


.dex-progress-label {

  margin:
    8px
    0
    0;

  color:
    var(--muted);

  font-size:
    .65rem;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;

}


.dex-grid {

  flex:
    1;

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  align-content:
    start;

  gap:
    12px;

  padding:
    6px
    16px
    112px;

}


.collection-item {

  width:
    100%;

  height:
    168px;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  padding:
    16px;

  border:
    1px solid
    var(--line);

  border-radius:
    17px;

  background:
    var(--surface);

}


.collection-item:active {

  opacity:
    .72;

}


.collection-name {

  width:
    100%;

  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    .7rem;

  font-weight:
    600;

  text-align:
    center;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.collection-item--unknown {

  opacity:
    1;

}


.collection-item--unknown:active {

  opacity:
    1;

}


.collection-silhouette {

  width:
    72px;

  height:
    72px;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    #191a1d;

}


/* ============================================================
   DETAIL
============================================================ */

.detail-wrap {

  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    12px;

  padding:
    28px
    18px
    50px;

}


.detail-name {

  margin:
    0;

}


.detail-meta {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  padding:
    14px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    var(--surface);

}


.detail-meta div {

  text-align:
    center;

}


.detail-meta dt {

  color:
    var(--muted);

  font-size:
    .61rem;

}


.detail-meta dd {

  margin:
    4px 0 0;

  font-size:
    .72rem;

}


.detail-image {

  width:
    100%;

  max-width:
    320px;

  max-height:
    360px;

  object-fit:
    contain;

  border-radius:
    16px;

}


/* ============================================================
   SETTINGS
============================================================ */

.settings-avatar-row {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    18px
    16px
    4px;

}


.settings-avatar-preview {

  width:
    64px;

  height:
    64px;

  flex:
    0 0 64px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    50%;

  background:
    var(--surface);

}


.settings-avatar-preview img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.settings-avatar-preview span {

  color:
    var(--muted);

  font-size:
    .58rem;

  text-align:
    center;

}


.settings-avatar-btn {

  width:
    auto;

  height:
    auto;

  min-height:
    38px;

  padding:
    0 16px;

  font-size:
    .74rem;

  cursor:
    pointer;

}


.settings-list {

  list-style:
    none;

  margin:
    0;

  padding:
    12px
    16px
    calc(
      30px +
      var(--safe-bottom)
    );

}


.settings-list li {

  width:
    100%;

  min-height:
    64px;

  border-bottom:
    1px solid
    var(--line);

}


.settings-account-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 4px;

  font-size:
    .84rem;

}


.settings-action-row {

  display:
    block;

}


.settings-action-row[hidden] {

  display:
    none !important;

}


.link-btn {

  width:
    100%;

  min-height:
    64px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  padding:
    0 4px;

  color:
    var(--text);

  text-align:
    left;

  font-size:
    .84rem;

}


.link-btn--danger {

  color:
    var(--danger);

}


/* ============================================================
   AUTH / REPORT
============================================================ */

.auth-form,
.report-form {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    18px
    18px
    60px;

}


.auth-form label,
.report-form label {

  margin-top:
    10px;

  color:
    #c7c8ca;

  font-size:
    .72rem;

}


.auth-form input,
.report-form select,
.report-form textarea {

  width:
    100%;

  padding:
    13px 14px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  outline:
    none;

  background:
    var(--surface);

  color:
    var(--text);

}


.field-hint {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    .66rem;

}


.field-error {

  margin:
    4px 0;

  color:
    var(--danger);

  font-size:
    .72rem;

}


/* ============================================================
   GUEST LIMIT
============================================================ */

.limit-card {

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    30px;

  text-align:
    center;

}


.limit-card h2 {

  margin:
    0;

}


.limit-card p {

  max-width:
    300px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    .78rem;

  line-height:
    1.5;

}


.limit-actions {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    16px
    18px
    calc(
      18px +
      var(--safe-bottom)
    );

}


/* ============================================================
   TOAST
============================================================ */

.toast {

  position:
    fixed;

  z-index:
    999;

  left:
    50%;

  bottom:
    calc(
      94px +
      var(--safe-bottom)
    );

  transform:
    translateX(-50%);

  max-width:
    calc(
      100% -
      40px
    );

  padding:
    10px 15px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    #1d1e21;

  color:
    var(--text);

  font-size:
    .72rem;

  text-align:
    center;

}


/* ============================================================
   LOADING
============================================================ */

#screen-loading {

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

}


.loading-orb {

  width:
    44px;

  height:
    44px;

  border-radius:
    50%;

  background:
    var(--accent);

  animation:
    loading-pulse
    1.1s
    ease-in-out
    infinite;

}


@keyframes loading-pulse {

  50% {

    transform:
      scale(.85);

    opacity:
      .4;

  }

}


.loading-text {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    .75rem;

}


.startup-error,
.empty-state {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  min-height:
    280px;

  padding:
    28px;

  text-align:
    center;

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (
  max-width:
  380px
) {

  .shelf-wrap {

    width:
      calc(
        100% -
        16px
      );

    margin:
      12px
      8px
      106px;

    padding:
      16px
      10px
      20px;

  }


  .calendar-day-capsule .capsule-orb {

    --size:
      34px;

  }


  .bottom-nav {

    width:
      calc(
        100% -
        20px
      );

    height:
      70px;

  }


  .camera-nav-circle {

    width:
      50px;

    height:
      50px;

  }


  #revealed-image.revealed-person {

    height:
      min(
        43vh,
        340px
      );

  }


  .reveal-actions {

    padding-left:
      12px;

    padding-right:
      12px;

  }


  .internal-danger-zone {

    padding-bottom:
      calc(
        14px +
        var(--safe-bottom)
      );

  }

}


/* ============================================================
   LARGE MOBILE
============================================================ */

@media (
  min-width:
  430px
) {

  .dex-grid {

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );

  }


  .collection-item {

    height:
      150px;

  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;

  }

}