/* rect360 — Shared interface components (toast, confirm, effect layer, ripple) */

/* ── Effect canvas ────────────────────────────────────────────────────────
   The effects (lightning, confetti, shockwave, flash) sit above the wall but
   BELOW every modal/dialog layer (9997+); they never cover an open dialog. */
.rx-fx-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5000;
  display: none;
}

.rx-fx-flash {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 30%, #cfefff 0%, #7ee0ff 40%, transparent 75%);
  pointer-events: none;
  z-index: 4999;
  transition: opacity .42s cubic-bezier(.2,.8,.3,1);
  mix-blend-mode: screen;
}

.rx-fx-shockwave {
  position: fixed;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #7ee0ff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4998;
  animation: rx-shock .85s cubic-bezier(.15,.75,.3,1) forwards;
}
@keyframes rx-shock {
  0%   { transform: scale(1);  opacity: .95; border-width: 3px; }
  100% { transform: scale(26); opacity: 0;   border-width: .5px; }
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.rx-toast-host {
  position: fixed;
  /* Sits below the corner controls (the plot close badge) and the dashboard header */
  top: 64px; right: 16px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 100050;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}

.rx-toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  background: rgba(22, 27, 34, .96);
  border: 1px solid #30363d;
  border-left: 3px solid #58a6ff;
  color: #e6edf3;
  font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .34s cubic-bezier(.2,.9,.3,1.2), opacity .3s ease;
}
.rx-toast.is-in  { transform: translateX(0); opacity: 1; }
.rx-toast.is-out { transform: translateX(120%); opacity: 0; }

.rx-toast-icon { font-size: 15px; line-height: 1.35; flex-shrink: 0; }
.rx-toast-msg  { flex: 1; word-break: break-word; }
.rx-toast-x {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: none; border: none; color: #8b949e;
  font-size: 12px; line-height: 1; cursor: pointer;
  padding: 0; flex-shrink: 0; border-radius: 6px;
  transition: color .15s;
}
.rx-toast-x:hover { color: #e6edf3; }

.rx-toast--success { border-left-color: #3fb950; }
.rx-toast--success .rx-toast-icon { color: #3fb950; }
.rx-toast--error   { border-left-color: #f85149; }
.rx-toast--error .rx-toast-icon   { color: #f85149; }
.rx-toast--warn    { border-left-color: #d29922; }
.rx-toast--warn .rx-toast-icon    { color: #d29922; }
.rx-toast--info    { border-left-color: #58a6ff; }
.rx-toast--info .rx-toast-icon    { color: #58a6ff; }
.rx-toast--gift    { border-left-color: #f0a500; }
.rx-toast--gift .rx-toast-icon    { color: #f0a500; }

body.light-mode .rx-toast {
  background: rgba(255,255,255,.97);
  border-color: #d0d7de;
  color: #1f2328;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
body.light-mode .rx-toast-x { color: #656d76; }
body.light-mode .rx-toast-x:hover { color: #1f2328; }

/* ── Confirmation dialog ──────────────────────────────────────────────────── */
.rx-confirm-back {
  position: fixed; inset: 0;
  background: rgba(1, 4, 9, .72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100060;
  opacity: 0;
  transition: opacity .22s ease;
  padding: 20px;
}
.rx-confirm-back.is-in { opacity: 1; }

.rx-confirm {
  width: min(400px, 100%);
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 16px;
  padding: 26px 24px 20px;
  text-align: center;
  color: #e6edf3;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transform: scale(.9) translateY(12px);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.3);
}
.rx-confirm-back.is-in .rx-confirm { transform: scale(1) translateY(0); }

.rx-confirm-icon  { font-size: 40px; margin-bottom: 10px; line-height: 1; }
.rx-confirm-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.rx-confirm-msg   { font-size: 13.5px; color: #8b949e; line-height: 1.55; margin-bottom: 6px; }
.rx-confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.rx-confirm-actions .rx-btn { flex: 1; }

body.light-mode .rx-confirm { background: #fff; border-color: #d0d7de; color: #1f2328; }
body.light-mode .rx-confirm-msg { color: #656d76; }

/* ── Shared button ────────────────────────────────────────────────────────── */
.rx-btn {
  position: relative; overflow: hidden;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #e6edf3;
  font-size: 13.5px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.rx-btn:hover:not(:disabled) { background: #30363d; border-color: #484f58; }
.rx-btn:active:not(:disabled) { transform: translateY(1px); }
.rx-btn:disabled { opacity: .5; cursor: not-allowed; }
.rx-btn:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }

.rx-btn--primary {
  background: linear-gradient(135deg, #6200ea, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(98,0,234,.35);
}
.rx-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #7222f0, #8b5cf6);
  box-shadow: 0 6px 20px rgba(98,0,234,.45);
}
.rx-btn--ghost { background: transparent; }
.rx-btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); }

body.light-mode .rx-btn { background: #f6f8fa; border-color: #d0d7de; color: #1f2328; }
body.light-mode .rx-btn:hover:not(:disabled) { background: #eef1f4; }
/* The primary button keeps the brand gradient in the light theme too; the
   generic .rx-btn rule turned the background flat grey and made the white text
   unreadable. */
body.light-mode .rx-btn--primary {
  background: linear-gradient(135deg, #6200ea, #7c3aed);
  border-color: transparent;
  color: #fff;
}
body.light-mode .rx-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #7222f0, #8b5cf6);
}

/* ── Ripple ───────────────────────────────────────────────────────────────── */
.rx-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: rx-ripple .6s ease-out forwards;
  pointer-events: none;
}
@keyframes rx-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.rx-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.28);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: rx-spin .65s linear infinite;
  vertical-align: -2px;
}
@keyframes rx-spin { to { transform: rotate(360deg); } }

/* ── Sound on/off button ──────────────────────────────────────────────────── */
.rx-sound-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid #30363d;
  background: rgba(22,27,34,.85);
  color: #8b949e;
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s, transform .12s;
  backdrop-filter: blur(6px);
}
.rx-sound-toggle:hover { color: #e6edf3; border-color: #58a6ff; transform: translateY(-1px); }
.rx-sound-toggle[aria-pressed="true"] { color: #58a6ff; border-color: #58a6ff; }
.rx-sound-toggle .fa-volume-xmark { color: #f85149; }

body.light-mode .rx-sound-toggle { background: rgba(255,255,255,.9); border-color: #d0d7de; color: #656d76; }

/* ── Dialog close badge ────────────────────────────────────────────────────
   The top-right close button of the full-screen dialogs (purchase, plot
   viewer) is a SINGLE component; it looks exactly the same everywhere. */
.rx-modal-close {
  position: fixed;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,17,23,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  color: #e6edf3;
  font-size: 15px; /* An FA icon; unlike the text × it is perfectly centred in its box */
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  transition: color .2s, border-color .2s, background .2s;
}
.rx-modal-close:hover, .rx-modal-close:focus {
  color: #f85149;
  border-color: rgba(248,81,73,0.6);
  background: rgba(13,17,23,0.85);
}
body.light-mode .rx-modal-close {
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.15);
  color: #1f2328;
}
body.light-mode .rx-modal-close:hover,
body.light-mode .rx-modal-close:focus {
  color: #cf222e;
  border-color: rgba(207,34,46,0.5);
}

/* ── Hint text ────────────────────────────────────────────────────────────── */
.rx-hint {
  font-size: 11px;
  color: #8b949e;
  line-height: 1.5;
  margin: 0;
}
.rx-hint b { color: #c9d1d9; }
body.light-mode .rx-hint { color: #57606a; }
body.light-mode .rx-hint b { color: #424a53; }

/* ── Decorative modal header (shared across all pages) ────────────────────── */
.modal-ill-header {
  position: relative;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.modal-ill-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(88,166,255,0.18) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(35,134,54,0.15) 0%, transparent 60%);
}
.modal-ill-header .ill-icon {
  font-size: 52px;
  position: relative;
  z-index: 1;
  animation: rx-ill-float 2.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 16px rgba(88,166,255,0.4));
}
@keyframes rx-ill-float {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-8px) rotate(3deg); }
}
.modal-ill-spark {
  position: absolute;
  font-size: 11px;
  animation: rx-ill-spark 3s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.8);
}
.modal-ill-spark:nth-child(1) { top: 20%; left: 12%; animation-delay: 0s; }
.modal-ill-spark:nth-child(2) { top: 60%; left: 20%; animation-delay: 0.7s; }
.modal-ill-spark:nth-child(3) { top: 20%; right: 12%; animation-delay: 0.3s; }
.modal-ill-spark:nth-child(4) { top: 65%; right: 18%; animation-delay: 1.1s; }
.modal-ill-spark:nth-child(5) { top: 40%; left: 8%; animation-delay: 1.6s; }
.modal-ill-spark:nth-child(6) { top: 35%; right: 8%; animation-delay: 2s; }
@keyframes rx-ill-spark {
  0%   { opacity: 0; transform: scale(0.5) translateY(0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2) translateY(-10px); }
}

/* ── Reduced-motion preference ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rx-toast, .rx-confirm, .rx-fx-shockwave, .rx-ripple, .rx-spinner {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .modal-ill-header .ill-icon, .modal-ill-spark { animation: none !important; }
}

/* ── Touch screens ────────────────────────────────────────────────────────
   A finger needs roughly a 44px target. These controls were laid out for a
   mouse pointer and stayed at 22-38px on a phone. The hit area grows without
   moving anything: the extra padding is pulled back in with a negative margin
   where the control sits in a row. */
@media (hover: none) {
  .rx-toast-x { width: 34px; height: 34px; margin: -6px -6px -6px 0; font-size: 14px; }
  .rx-modal-close { width: 44px; height: 44px; font-size: 17px; }
  .rx-sound-toggle { width: 44px; height: 44px; }
}

/* ── Short viewports (a phone held sideways, a small window) ───────────────
   The decorative modal header is 110px tall — a third of a 360px-high landscape
   screen — which pushed the dialog's own buttons off the bottom. */
@media (max-height: 560px) {
  .modal-ill-header { height: 68px; }
  .modal-ill-header .ill-icon { font-size: 34px; }
  .modal-ill-spark { display: none; }
  .rx-confirm { padding: 18px 20px 16px; }
  .rx-confirm-icon { font-size: 30px; margin-bottom: 6px; }
}