/* ============================================================================
   The Sandbag — shared meta-layer widget styles  (/sandbag/meta.css)
   Self-contained. No external calls. Palette: "wasted chaos".
   Everything is namespaced under #sb-root so it never leaks into a toy page,
   and never depends on a page's own CSS variables.
   ========================================================================== */

#sb-root,
#sb-root *,
#sb-root *::before,
#sb-root *::after { box-sizing: border-box; }

#sb-root {
  /* --- self-contained palette (do not rely on page :root vars) --- */
  --sb-bg0:#0a0712;
  --sb-bg1:#120a1e;
  --sb-ink:#f7f2ff;
  --sb-muted:rgba(247,242,255,.66);
  --sb-faint:rgba(247,242,255,.42);
  --sb-panel:rgba(255,255,255,.05);
  --sb-panel2:rgba(20,12,33,.90);
  --sb-border:rgba(255,255,255,.14);
  --sb-border2:rgba(169,112,255,.40);
  --sb-hot:#ff2e97;
  --sb-acid:#b6ff3c;
  --sb-cyan:#25e0ff;
  --sb-gold:#ffcb3a;
  --sb-violet:#a970ff;
  --sb-bad:#ff5a5a;
  --sb-shadow:0 22px 70px rgba(0,0,0,.62);
  --sb-r:16px;
  --sb-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 2147483000;               /* above basically anything */
  font-family: var(--sb-mono);
  font-size: 14px;
  line-height: 1.45;
  color: var(--sb-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  max-width: min(360px, calc(100vw - 20px));
}

/* respect iOS safe areas */
@supports (padding: max(0px)) {
  #sb-root {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

#sb-root button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  margin: 0;
}

/* visible focus everywhere — keyboard first */
#sb-root :focus-visible {
  outline: 2px solid var(--sb-cyan);
  outline-offset: 2px;
  border-radius: 8px;
}

/* screen-reader-only helper */
#sb-root .sb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- pill --- */
.sb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(300px, calc(100vw - 20px));
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sb-panel2);
  border: 1px solid var(--sb-border2);
  box-shadow: var(--sb-shadow);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.sb-pill:hover { transform: translateY(-1px); border-color: var(--sb-hot); }
.sb-pill .sb-dot {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sb-hot);
  box-shadow: 0 0 0 0 rgba(255,46,151,.55);
  animation: sb-pulse 2.4s ease-out infinite;
}
.sb-pill .sb-pill-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sb-ink);
  white-space: nowrap;
}
.sb-pill .sb-pill-roast {
  color: var(--sb-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 168px;
}

@keyframes sb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,46,151,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255,46,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,46,151,0); }
}

/* --------------------------------------------------------------- panel --- */
.sb-panel {
  width: min(340px, calc(100vw - 20px));
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: var(--sb-r);
  background: var(--sb-panel2);
  border: 1px solid var(--sb-border2);
  box-shadow: var(--sb-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
/* faint scanline texture on the panel — very low opacity */
.sb-panel::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  opacity: .5;
  mix-blend-mode: overlay;
}
.sb-panel > * { position: relative; }

.sb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.sb-title {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 700; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase;
}
.sb-title .sb-brand {
  background: linear-gradient(90deg, var(--sb-hot), var(--sb-violet), var(--sb-cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--sb-violet);
}
.sb-title .sb-tag { font-size: 10px; color: var(--sb-faint); letter-spacing: .04em; text-transform: none; }

.sb-x {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  color: var(--sb-muted);
  border: 1px solid var(--sb-border);
  background: var(--sb-panel);
  font-size: 16px; line-height: 1;
}
.sb-x:hover { color: var(--sb-ink); border-color: var(--sb-hot); }

/* clock block */
.sb-clockrow { display: flex; align-items: baseline; gap: 8px; }
.sb-clock {
  font-size: 30px; font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--sb-ink);
  text-shadow: 0 0 22px rgba(255,46,151,.28);
}
.sb-clocklabel { font-size: 10px; color: var(--sb-faint); text-transform: uppercase; letter-spacing: .12em; }
.sb-roast {
  margin: 2px 0 10px;
  color: var(--sb-muted);
  font-size: 12.5px;
  min-height: 1.4em;
}
.sb-roast em { color: var(--sb-acid); font-style: normal; }
.sb-roast strong { color: var(--sb-hot); font-weight: 700; }

.sb-life {
  font-size: 11.5px;
  color: var(--sb-faint);
  margin-bottom: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--sb-border);
}
.sb-life b { color: var(--sb-gold); font-weight: 700; }
.sb-tease { font-size: 11px; color: var(--sb-faint); margin: -4px 0 10px; }

/* breadcrumb / descent */
.sb-crumbs-wrap { margin-bottom: 12px; }
.sb-crumbs-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--sb-faint); margin-bottom: 5px;
}
.sb-mini {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sb-muted);
  padding: 4px 8px; min-height: 28px;
  border-radius: 7px; border: 1px solid var(--sb-border); background: var(--sb-panel);
}
.sb-mini:hover { color: var(--sb-cyan); border-color: var(--sb-cyan); }
.sb-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px;
  font-size: 12px;
}
.sb-crumb { color: var(--sb-muted); }
.sb-crumb.sb-now { color: var(--sb-cyan); font-weight: 700; }
.sb-sep { color: var(--sb-faint); padding: 0 2px; }
.sb-crumb-q { color: var(--sb-hot); font-weight: 700; }

/* action buttons */
.sb-actions { display: flex; gap: 8px; }
.sb-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 12px;
  border-radius: 11px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  border: 1px solid var(--sb-border);
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}
.sb-btn:hover { transform: translateY(-1px); }
.sb-btn:active { transform: translateY(0); }
.sb-btn-door {
  color: #150a1f;
  background: linear-gradient(135deg, var(--sb-hot), var(--sb-violet));
  border-color: transparent;
  box-shadow: 0 8px 26px rgba(255,46,151,.32);
}
.sb-btn-door:hover { box-shadow: 0 10px 30px rgba(255,46,151,.46); }
.sb-btn-trophy {
  color: var(--sb-ink);
  background: var(--sb-panel);
  border-color: var(--sb-border2);
}
.sb-btn-trophy:hover { border-color: var(--sb-gold); color: var(--sb-gold); }
.sb-btn-trophy .sb-count {
  font-variant-numeric: tabular-nums;
  color: var(--sb-gold);
}

/* show/hide panel vs pill */
#sb-root[data-open="0"] .sb-panel { display: none; }
#sb-root[data-open="1"] .sb-pill  { display: none; }

/* ---------------------------------------------------------- trophy drawer */
.sb-drawer {
  position: fixed; inset: 0;
  z-index: 2147483001;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(6,4,12,.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: sb-fade .18s ease both;
}
.sb-drawer[hidden] { display: none; }
.sb-drawer-card {
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  display: flex; flex-direction: column;
  border-radius: 18px;
  background:
    radial-gradient(600px 300px at 100% -10%, rgba(255,203,58,.10), transparent 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(169,112,255,.14), transparent 60%),
    var(--sb-panel2);
  border: 1px solid var(--sb-border2);
  box-shadow: var(--sb-shadow);
  overflow: hidden;
}
.sb-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--sb-border);
}
.sb-drawer-head h2 {
  margin: 0; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.sb-drawer-sub { font-size: 11px; color: var(--sb-faint); margin: 3px 0 0; }
.sb-drawer-body { overflow-y: auto; padding: 14px 16px 18px; }

.sb-trophy-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 460px) { .sb-trophy-grid { grid-template-columns: 1fr 1fr; } }

.sb-trophy {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--sb-border);
  background: var(--sb-panel);
}
.sb-trophy .sb-medal {
  font-size: 26px; line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.sb-trophy .sb-tname { font-weight: 700; font-size: 13px; }
.sb-trophy .sb-tcap  { font-size: 11.5px; color: var(--sb-muted); margin-top: 3px; }
.sb-trophy .sb-tby   { font-size: 10px; color: var(--sb-faint); margin-top: 5px; text-transform: uppercase; letter-spacing: .06em; }

.sb-trophy.sb-earned {
  border-color: var(--sb-border2);
  background: linear-gradient(180deg, rgba(255,203,58,.08), rgba(255,255,255,.03));
}
.sb-trophy.sb-earned .sb-tname { color: var(--sb-gold); }

.sb-trophy.sb-locked { opacity: .82; }
.sb-trophy.sb-locked .sb-medal { filter: grayscale(1) blur(1px); opacity: .4; }
.sb-trophy.sb-locked .sb-tname { color: var(--sb-faint); }
.sb-trophy.sb-locked .sb-tcap  { color: var(--sb-faint); font-style: italic; }

.sb-resume-row { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ---------------------------------------------------------------- toast --- */
.sb-toast-wrap {
  position: fixed;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 2147483002;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}
.sb-toast {
  pointer-events: auto;
  width: 100%;
  border-radius: 14px;
  padding: 14px 16px;
  background:
    radial-gradient(400px 160px at 50% -40%, rgba(255,203,58,.18), transparent 70%),
    var(--sb-panel2);
  border: 1px solid var(--sb-gold);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,203,58,.12);
  text-align: center;
  animation: sb-toast-in .32s cubic-bezier(.2,.9,.25,1) both;
}
.sb-toast .sb-toast-kicker {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sb-gold);
}
.sb-toast .sb-toast-medal { font-size: 40px; line-height: 1.1; margin: 4px 0; }
.sb-toast .sb-toast-name { font-size: 16px; font-weight: 800; }
.sb-toast .sb-toast-cap { font-size: 12px; color: var(--sb-muted); margin-top: 4px; }
.sb-toast.sb-leaving { animation: sb-toast-out .3s ease both; }

/* olympic podium ceremony */
.sb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 6px 0 2px; height: 34px; }
.sb-podium span { font-size: 22px; }
.sb-podium .sb-note { color: var(--sb-gold); animation: sb-float 1.6s ease-in-out infinite; }

/* confetti (only spawned when motion is allowed) */
.sb-confetti { position: fixed; top: -12px; z-index: 2147483003; pointer-events: none; font-size: 16px; will-change: transform, opacity; }

@keyframes sb-toast-in { from { opacity:0; transform: translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes sb-toast-out { to { opacity:0; transform: translateY(10px) scale(.98); } }
@keyframes sb-fade { from { opacity:0; } to { opacity:1; } }
@keyframes sb-float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
@keyframes sb-fall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(102vh) rotate(540deg); opacity: .2; }
}

/* --------------------------------------------------------- narrow phones -- */
@media (max-width: 380px) {
  .sb-pill .sb-pill-roast { display: none; }
  .sb-clock { font-size: 26px; }
}

/* -------------------------------------------------- reduced-motion safe --- */
@media (prefers-reduced-motion: reduce) {
  #sb-root *,
  .sb-drawer, .sb-toast, .sb-confetti {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  .sb-pill .sb-dot { animation: none; box-shadow: 0 0 0 3px rgba(255,46,151,.18); }
  .sb-toast { animation: sb-fade .28s ease both; }
  .sb-podium .sb-note { animation: none; }
  .sb-confetti { display: none !important; }
}