/* Send Town's shell (js/sendrh/shell.js): the HUD's Send ID chip, the account
   sheet, the email forms, the bell's Send Town half, the wallet gate, and the
   ghosts that show themselves in every building. Every class is .rh-*. */

/* --- the HUD chip --------------------------------------------------------------- */
.rh-chip { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.05rem; padding: 0.15rem 0.75rem; line-height: 1.15; border-color: color-mix(in srgb, var(--rh-green) 45%, var(--ink-5)); flex-shrink: 0; position: relative; min-height: 44px; }
.rh-chip:hover { border-color: var(--rh-green); }
.rh-chip-who { display: flex; align-items: baseline; gap: 0.3rem; max-width: 15ch; }
.rh-chip-handle { font-size: max(var(--text-floor), 0.8rem); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rh-chip-no { font-size: max(var(--text-floor), 0.68rem); color: var(--text-mute); font-weight: 700; white-space: nowrap; }
.rh-chip-l2 { display: flex; align-items: center; gap: 0.4rem; }
.rh-chip-power { display: inline-flex; align-items: center; gap: 0.1rem; color: var(--rh-green); font-size: max(var(--text-floor), 0.8rem); }
.rh-chip-power b { color: var(--text); font-variant-numeric: tabular-nums; }
.rh-chip-lv { padding: 0 0.4rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--rh-green) 18%, transparent); color: var(--rh-green); font-size: max(var(--text-floor), 0.68rem); font-weight: 900; white-space: nowrap; }
.rh-chip-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--ink-1); }
.rh-chip-join { flex-direction: row; align-items: center; border-color: var(--rh-green); color: var(--rh-green); animation: rh-call 2s ease-out infinite; }
.rh-chip-join b { color: var(--text); }
@keyframes rh-call { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rh-green) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
/* wide screens: the Send ID is the third line of the HUD's name block, and the chip steps aside */
.rh-who { display: flex; align-items: center; gap: 0.15rem; max-width: 30ch; overflow: hidden; white-space: nowrap; font-size: max(var(--text-floor), 0.72rem); font-weight: 700; color: var(--text-dim); }
.rh-who b { color: var(--text); }
.rh-who .rh-who-handle { color: var(--rh-green); overflow: hidden; text-overflow: ellipsis; min-width: 0; margin-right: 0.15rem; }
.rh-who-no { color: var(--text-dim); }
.rh-who .rh-chip-lv { margin-left: 0.15rem; }
.rh-who-out { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); margin-left: 0.3rem; flex-shrink: 0; }
.rh-who-join { color: var(--rh-green); font-weight: 900; }
@media (max-width: 1440px) { .rh-who .rh-who-handle { display: none; } }
/* Send Power costs the HUD some width: up to 1440 px the chain pill shows just its icon (its tooltip and the wallet sheet say the rest) */
@media (max-width: 1440px) { .hud-net b { display: none; } .hud-net { padding-inline: 0.55rem; } }
@media (min-width: 1151px) { .rh-chip { display: none; } }
/* with no wallet there is no SEND pill: the streak must not be the one the narrow layouts hide */
.hud-purse.rh-nowallet .hud-pill:nth-child(3) { display: inline-flex !important; }
@media (min-width: 761px) and (max-width: 1150px) { .rh-chip-who { display: none; } .rh-chip-join b, .rh-chip-lv { display: none; } .rh-chip { padding: 0.15rem 0.55rem; } }
@media (max-width: 760px) {
  .rh-chip { min-height: 36px; padding: 0.2rem 0.5rem; }
  .rh-chip-who, .rh-chip-join b { display: none; }
}
@media (max-width: 420px) { .rh-chip-lv { display: none; } }

/* --- the account sheet ----------------------------------------------------------- */
.rh-account { gap: 0.9rem; }
.rh-id-card { display: grid; gap: 0.6rem; padding: 0.9rem; border-radius: var(--r-3); border: 1.5px solid color-mix(in srgb, var(--rh-green) 40%, var(--ink-5)); background: linear-gradient(160deg, color-mix(in srgb, var(--rh-green) 10%, transparent), transparent 60%), var(--ink-2); }
.rh-id-top { display: flex; align-items: center; gap: 0.7rem; }
.rh-id-badge { font-size: max(var(--text-floor), 2rem); line-height: 1; }
.rh-id-handle { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 1.35rem); color: var(--green-bright); overflow-wrap: anywhere; }
.rh-id-no { color: var(--text-dim); font-weight: 800; font-size: max(var(--text-floor), 0.85rem); }
.rh-id-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rh-power { display: grid; gap: 0.4rem; }
.rh-power-num { font-size: max(var(--text-floor), 1rem); color: var(--rh-green); }
.rh-power-num b { font-size: max(var(--text-floor), 1.5rem); color: var(--text); font-variant-numeric: tabular-nums; }
.rh-section { display: grid; gap: 0.5rem; }
.rh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.rh-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: var(--r-2); background: var(--ink-2); border: 1px solid var(--ink-4); font-size: max(var(--text-floor), 0.88rem); }
.rh-list code { font-family: var(--mono); font-size: max(var(--text-floor), 0.85rem); }
.rh-callout { display: grid; gap: 0.5rem; padding: 0.8rem; border-radius: var(--r-2); border: 1.5px solid var(--o-edge); background: var(--o-tint); }
.rh-callout p { margin: 0; }
.rh-proof { display: grid; gap: 0.4rem; }

/* --- forms: join, email --------------------------------------------------------------- */
.rh-join, .rh-form { display: grid; gap: 0.6rem; text-align: left; }
.rh-small { gap: 0.45rem; }
.rh-hint { color: var(--text-mute); font-weight: 600; font-size: max(var(--text-floor), 0.8rem); }
.rh-hint.good { color: var(--rh-green); }
.rh-hint.bad { color: var(--red); }
.rh-err { color: var(--red); font-weight: 700; font-size: max(var(--text-floor), 0.88rem); margin: 0; min-height: 0; }
.rh-err:empty { display: none; }
.rh-checks { display: grid; gap: 0.1rem; }
.rh-checks label.check { min-height: 40px; flex-wrap: wrap; }
.rh-terms { margin: -0.2rem 0 0.2rem 2.2rem; }
.rh-terms summary { cursor: pointer; color: var(--green-bright); text-decoration: underline; font-weight: 700; font-size: max(var(--text-floor), 0.82rem); min-height: 32px; display: flex; align-items: center; }
.rh-terms p { margin: 0.3rem 0 0; font-weight: 500; font-size: max(var(--text-floor), 0.82rem); }
.rh-more summary { cursor: pointer; color: var(--text-dim); font-weight: 700; font-size: max(var(--text-floor), 0.85rem); min-height: 36px; display: flex; align-items: center; }
.rh-more[open] { display: grid; gap: 0.5rem; }
.rh-pw { display: flex; gap: 0.4rem; align-items: center; }
.rh-pw input { flex: 1; min-width: 0; }
.rh-email { display: grid; gap: 0.7rem; }
.rh-tabs { display: flex; gap: 0.4rem; }
.rh-tabs .chip.btnlike { min-height: 40px; flex: 1; justify-content: center; font-size: max(var(--text-floor), 0.9rem); }
.title-menu .rh-join, .title-menu .rh-email { max-width: 380px; }
.title-menu .rh-checks label.check { color: var(--text); }

/* --- the bell's Send Town half ------------------------------------------------------- */
.rh-bell { display: grid; gap: 0.5rem; }
.rh-bell .row { align-items: center; }
.rh-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.rh-note { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: var(--r-2); background: var(--ink-2); border: 1px solid var(--ink-4); }
.rh-note.unread { border-color: color-mix(in srgb, var(--rh-green) 50%, var(--ink-4)); background: color-mix(in srgb, var(--rh-green) 7%, var(--ink-2)); }
.rh-note-icon { font-size: max(var(--text-floor), 1.1rem); line-height: 1.4; }
.rh-note-text { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: max(var(--text-floor), 0.88rem); cursor: pointer; padding: 0.2rem 0; overflow-wrap: anywhere; min-height: 32px; }
.rh-note-text:hover { color: var(--green-bright); }
.rh-mute { flex-shrink: 0; }
.rh-ci { margin: 0.4rem 0 0; font-size: max(var(--text-floor), 0.88rem); }
.rh-ci.good { color: var(--rh-green); font-weight: 700; }
div.rh-ci { display: grid; gap: 0.4rem; }

/* --- connect a wallet (an email-only player in a place that moves money) ------------- */
.rh-wallet-gate { display: grid; gap: 0.5rem; margin: 0.8rem 0; padding: 0.9rem 1rem; border-radius: var(--r-3); border: 1.5px solid var(--o-edge); background: var(--o-tint); }
.rh-wallet-gate b { font-family: var(--font-disp); font-weight: 400; color: var(--gold); font-size: max(var(--text-floor), 1.15rem); }
.rh-wallet-gate p { margin: 0; }
.rh-wallet-gate .stack { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --- the ghosts ---------------------------------------------------------------------- */
.rh-ghost {
  position: fixed; z-index: 70; display: grid; justify-items: center; gap: 0.1rem; padding: 0.3rem 0.4rem; min-width: 56px; min-height: 56px;
  border: 0; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), transparent 70%); color: var(--text); cursor: pointer;
  filter: drop-shadow(0 0 14px rgba(200, 230, 255, 0.55)); animation: rh-ghost-in 0.5s var(--ease-pop) both, rh-ghost-float 2.6s ease-in-out 0.5s infinite;
}
.rh-ghost-body { font-size: max(var(--text-floor), 2.1rem); line-height: 1; }
.rh-ghost-say { padding: 0.05rem 0.45rem; border-radius: var(--r-pill); background: rgba(5, 6, 4, 0.85); color: var(--text); font-weight: 800; font-size: max(var(--text-floor), 0.72rem); white-space: nowrap; }
.rh-ghost:hover .rh-ghost-body, .rh-ghost:focus-visible .rh-ghost-body { transform: scale(1.12); }
.rh-ghost.busy { cursor: progress; animation: rh-ghost-in 0.5s var(--ease-pop) both, rh-ghost-shiver 0.4s linear infinite; }
.rh-ghost.caught { animation: rh-ghost-out 0.6s ease-in forwards; }
.rh-ghost.still, html.motion-off .rh-ghost { animation: none; }
.rh-ghost.still.caught, html.motion-off .rh-ghost.caught { opacity: 0; transition: opacity 0.3s; }
@keyframes rh-ghost-in { from { opacity: 0; transform: translateY(12px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes rh-ghost-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes rh-ghost-shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes rh-ghost-out { to { opacity: 0; transform: translateY(-60px) scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .rh-ghost, .rh-ghost.busy, .rh-chip-join { animation: none; } .rh-ghost.caught { animation: none; opacity: 0; } }
html.motion-off .rh-chip-join { animation: none; }

/* --- the title screen with a Send ID or email form in its menu: room to scroll, less chrome --- */
.title-screen:has(.title-menu .rh-join, .title-menu .rh-email) { overflow-y: auto; align-items: start; align-content: start; }
.title-screen:has(.title-menu .rh-join, .title-menu .rh-email) .title-tag { display: none; }
@media (max-width: 760px) {
  .title-screen:has(.title-menu .rh-join, .title-menu .rh-email) .title-sendy { min-height: 0; display: none; }
  .title-screen:has(.title-menu .rh-join, .title-menu .rh-email) .title-name { font-size: max(var(--text-floor), 3rem); }
  .title-menu .rh-join, .title-menu .rh-email { text-align: left; width: 100%; }
}