/* Lobby + quick-log sheets (owner: E). Arena design system: ink outlines, bevels, hard shadows,
   ONE yellow action per state. Tokens only. Also hosts minimal fallbacks (.fb-*) used when a ui
   component is missing at runtime. */

/* =========================================================================
   SHARED BITS
   ========================================================================= */
.lobby { display: flex; flex-direction: column; gap: var(--s-5); }
.lobby > *, .lobby-sections > * { flex-shrink: 0; }
.lobby-sections { gap: var(--s-5); }
.lobby .section-title { margin: 0 0 var(--s-3); }

/* Icon tile: rounded square, ink outline, bevel. Modifiers tint the face. */
.lobby-ictile {
  --it: rgba(13, 24, 56, 0.35);
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: var(--it);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 32px;
  line-height: 1;
}
.lobby-ictile .ic { vertical-align: 0; }
.lobby-ictile.is-good { --it: var(--green-lo); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 var(--green-edge); }
.lobby-ictile.is-night { --it: var(--bg-2); }
.lobby-ictile.is-desk { --it: var(--bg-2); width: 48px; height: 48px; font-size: 30px; }

/* =========================================================================
   HERO — GT bank + the session call-to-action
   ========================================================================= */
.lobby-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-4);
}
.lobby-bank { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.lobby-bank__label {
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lobby-bank__row { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }
.lobby-bank__coin { display: inline-flex; font-size: 56px; line-height: 1; filter: drop-shadow(0 4px 0 var(--ink-soft)); }
.lobby-bank__coin .ic { vertical-align: 0; }
.lobby-bank__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(60px, 19vw, 80px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--gold);
  padding-bottom: 6px;
  font-variant-numeric: tabular-nums;
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    0 7px 0 var(--ink);
}
.lobby-bank__num.is-bump { animation: lobby-bump var(--t-slow) var(--ease-pop); }
@keyframes lobby-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.lobby-hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.lobby-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  background: rgba(13, 24, 56, 0.35);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.lobby-stat__k { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.lobby-stat__v { font-family: var(--font-display); font-weight: 400; font-size: 18px; text-shadow: var(--ts-outline-sm); }

/* ---- CTA ---- */
.lobby-hero__cta { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 2px solid var(--line); }
.lobby-cta__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.lobby-cta__day { font-size: 22px; }
.lobby-cta__meta { display: flex; align-items: center; gap: var(--s-2); }
.lobby-cta__hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.lobby-cta__hint .ic { font-size: 18px; }

.lobby-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  color: var(--text);
  text-align: left;
  font: inherit;
}
.lobby-cta__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lobby-cta__title { font-family: var(--font-display); font-size: 22px; line-height: 1.05; text-shadow: var(--ts-outline-sm); }
.lobby-cta__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.lobby-cta__chev { flex: none; font-size: 24px; display: inline-flex; }

/* Session day: THE gold "Battle" button */
.lobby-cta.is-go {
  --lip: 8px;
  justify-content: center;
  gap: var(--s-4);
  min-height: 104px;
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + var(--lip));
  border-width: 3px;
  border-radius: 20px;
  margin-bottom: 4px;
  background: linear-gradient(180deg, #ffe066 0%, var(--yellow) 48%, var(--yellow-lo) 100%);
  box-shadow:
    inset 0 calc(var(--lip) * -1) 0 var(--yellow-edge),
    inset 0 3px 0 rgba(255, 255, 255, 0.6),
    0 5px 0 var(--ink-soft);
  cursor: pointer;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out, padding 60ms ease-out;
  animation: lobby-cta-breathe 2.4s ease-in-out infinite;
}
.lobby-cta.is-go::before {
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 4px;
  height: 40%;
  border-radius: 15px 15px 40% 40% / 15px 15px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
  pointer-events: none;
  z-index: -1;
}
.lobby-cta.is-go:active {
  transform: translateY(4px);
  padding-bottom: calc(var(--s-3) + 2px);
  box-shadow: inset 0 -2px 0 var(--yellow-edge), inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 1px 0 var(--ink-soft);
  animation: none;
}
.lobby-cta.is-go .lobby-cta__text { flex: 0 1 auto; align-items: flex-start; }
.lobby-cta.is-go .lobby-cta__icon { display: inline-flex; font-size: 52px; line-height: 1; filter: drop-shadow(0 3px 0 var(--ink-soft)); }
.lobby-cta.is-go .lobby-cta__title { font-size: 34px; text-shadow: var(--ts-outline); }
.lobby-cta.is-go .lobby-cta__sub { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: #fff; text-shadow: var(--ts-outline-sm); }
.lobby-cta__pay { display: inline-flex; align-items: center; gap: 4px; }
.lobby-cta__pay .ic { font-size: 20px; }
@keyframes lobby-cta-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* Recovery day: calm, raised slate-blue row (tappable -> walk sheet) */
.lobby-cta.is-rest {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: var(--bevel), 0 4px 0 var(--ink-soft);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
.lobby-cta.is-rest:active { transform: translateY(3px); box-shadow: var(--bevel), 0 1px 0 var(--ink-soft); }

/* Session cleared: recessed, done */
.lobby-cta.is-done {
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.lobby-cta.is-done .lobby-cta__title { color: var(--good); }

/* =========================================================================
   CRATES — chest tiles; they bounce only while openable
   ========================================================================= */
.lobby-crates__row { display: flex; gap: var(--s-3); overflow-x: auto; padding: var(--s-2) var(--s-1) var(--s-2); margin: calc(var(--s-2) * -1) calc(var(--s-1) * -1) 0; scrollbar-width: none; }
.lobby-crates__row::-webkit-scrollbar { display: none; }
.lobby-crate {
  --rc: var(--r-common);
  flex: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 104px;
  padding: var(--s-2) var(--s-2) var(--s-3);
  border-radius: var(--r-lg);
  border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 70%, #fff) 0%, var(--rc) 40%, color-mix(in srgb, var(--rc) 70%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.25), var(--shadow-card);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transform-origin: 50% 100%;
}
.lobby-crate:not(:disabled) { animation: lobby-bob 1.8s ease-in-out infinite; }
.lobby-crate:active:not(:disabled) { transform: translateY(3px) scale(0.97); animation: none; }
.lobby-crate.r-rare { --rc: var(--r-rare); }
.lobby-crate.r-epic { --rc: var(--r-epic); }
.lobby-crate.r-legendary { --rc: var(--r-legendary); }
.lobby-crate:disabled { filter: saturate(0.4) brightness(0.85); cursor: default; }
.lobby-crate__emoji { display: inline-flex; font-size: 60px; line-height: 1; filter: drop-shadow(0 3px 0 var(--ink-soft)); }
.lobby-crate__label { font-family: var(--font-display); font-size: 16px; text-shadow: var(--ts-outline-sm); }
.lobby-crate__open {
  margin-top: 2px;
  padding: 3px 12px 5px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--green) 0 50%, var(--green-lo));
  box-shadow: inset 0 -3px 0 var(--green-edge), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1;
  text-shadow: var(--ts-outline-sm);
}
.lobby-crate:disabled .lobby-crate__open { visibility: hidden; }
@keyframes lobby-bob {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  70% { transform: translateY(-8px) rotate(-3deg); }
  80% { transform: translateY(0) rotate(3deg); }
  90% { transform: translateY(-3px) rotate(0); }
}

/* =========================================================================
   QUESTS — one panel, tidy rows
   ========================================================================= */
.lobby-quests__count {
  font-family: var(--font-display);
  font-size: 16px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(13, 24, 56, 0.55);
  border: 2px solid var(--ink);
  text-shadow: var(--ts-outline-sm);
}
.lobby-qlist {
  background: var(--grad-panel);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel), var(--shadow-card);
  overflow: hidden;
}
.lobby-quest {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3);
}
.lobby-quest + .lobby-quest { border-top: 2px solid var(--line); }
.lobby-quest__emoji {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 32px;
  line-height: 1;
}
.lobby-quest__emoji > .ic { vertical-align: 0; }
.lobby-quest__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lobby-quest__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.lobby-quest__title { font-weight: 900; font-size: 15px; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-quest__prog { flex: none; font-family: var(--font-display); font-size: 14px; color: var(--text-dim); text-shadow: var(--ts-outline-sm); font-variant-numeric: tabular-nums; }
.lobby-quest__reward { flex: none; min-height: 32px; padding: 0 10px 0 8px; font-size: 15px; }
.lobby-quest__reward .ic { margin-left: 0; }
.lobby-quest.is-done { background: rgba(13, 24, 56, 0.18); }
.lobby-quest.is-done .lobby-quest__main { opacity: 0.7; }
.lobby-quest.is-done .lobby-quest__emoji > .ic:first-child { opacity: 0.55; }
.lobby-quest__stamp {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--green-lo);
  font-size: 16px;
  animation: lobby-stamp var(--t-slow) var(--ease-pop) both;
}
.lobby-quest__stamp .ic, .lobby-quest__reward.chip--good .ic { filter: brightness(0) invert(1); }
@keyframes lobby-stamp { from { transform: scale(2.2); opacity: 0; } }

/* =========================================================================
   STREAK + FULL CLEAR + DESK
   ========================================================================= */
.lobby-streak { display: flex; flex-direction: column; gap: var(--s-3); }
.lobby-streak__top { display: flex; align-items: center; gap: var(--s-3); }
.lobby-streak__flame {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 44px;
}
.lobby-streak__flame .ic { vertical-align: 0; }
.lobby-streak__flame.is-cold .ic { filter: grayscale(1) brightness(0.9); }
.lobby-streak__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lobby-streak__num { font-size: 36px; line-height: 1; color: var(--streak); }
.lobby-streak__num span { font-size: 20px; color: #fff; }
.lobby-streak__sub { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.lobby-streak__items { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lobby-streak__items .chip { min-height: 32px; font-size: 15px; }
.lobby-streak .btn { width: 100%; }

.lobby-fc { display: flex; flex-direction: column; gap: var(--s-3); }
.lobby-fc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.lobby-fc__title { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 22px; }
.lobby-fc__title .ic { font-size: 28px; }
.lobby-fc__prize {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 12px 0 6px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  background: var(--r-epic);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
  font-family: var(--font-display);
  font-size: 15px;
  text-shadow: var(--ts-outline-sm);
}
.lobby-fc__prize .ic { font-size: 24px; }
.lobby-fc__line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.lobby-fc__k { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 900; font-size: 15px; }
.lobby-fc__k .ic { font-size: 22px; }
.lobby-fc__pips { display: flex; gap: 4px; }
.lobby-fc__pip {
  width: 30px;
  height: 16px;
  border-radius: 6px;
  border: 2px solid var(--ink);
  background: var(--bg-2);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3);
}
.lobby-fc__pip.is-on { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
.lobby-fc__pip.is-s.is-on { background: var(--blue-btn); }
.lobby-fc__pip.is-w.is-on { background: var(--green); }
.lobby-fc__foot { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.lobby-fc.is-clear { box-shadow: var(--bevel), inset 0 0 0 3px var(--r-epic), var(--shadow-card); }
.lobby-fc.is-clear .lobby-fc__prize { background: var(--green-lo); }

.lobby-desk { display: flex; flex-direction: column; gap: var(--s-3); }
.lobby-desk__head { display: flex; align-items: center; gap: var(--s-3); }
.lobby-desk__txt { flex: 1; min-width: 0; }
.lobby-desk__title { font-size: 20px; }
.lobby-desk__sub { font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); line-height: 1.3; }
.lobby-desk__line { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); }
.lobby-desk__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px 0 8px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-weight: 900;
}
.lobby-desk__pill .ic { font-size: 20px; }
.lobby-desk__pill.is-due { background: var(--red-btn-lo); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.lobby-desk.is-due { box-shadow: var(--bevel), inset 0 0 0 3px #fff, var(--shadow-card); }
.lobby-desk .btn--block { margin-bottom: 4px; }
.lobby-desk__perm { align-self: flex-start; }

/* =========================================================================
   QUICK-LOG DOCK — sticky above the nav, chunky blue tiles
   ========================================================================= */
.lobby-dock {
  position: sticky;
  /* .screen's bottom padding = nav + s-6; Chrome deflates the sticky rect by it, so pull down to sit just above the nav */
  bottom: calc(var(--s-2) - var(--s-6));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0 calc(var(--s-2) * -1);
  padding: var(--s-2);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
  border: 2.5px solid var(--ink);
  box-shadow: inset 0 2px 0 var(--panel-hi), 0 4px 0 var(--ink-soft), 0 -6px 18px rgba(5, 12, 35, 0.35);
}
/* breathing room so the last panel never ends flush against the dock */
.lobby-sections { padding-bottom: var(--s-2); }
.lobby-dock__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.lobby-dock__tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 4px 2px 9px;
  border-radius: var(--r-md);
  border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, var(--blue-btn) 0%, var(--blue-btn) 45%, var(--blue-btn-lo) 100%);
  box-shadow: inset 0 -5px 0 var(--blue-btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  color: #fff;
  font: inherit;
  cursor: pointer;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out, padding 60ms ease-out;
}
.lobby-dock__tile::before {
  content: '';
  position: absolute;
  left: 4px; right: 4px; top: 3px;
  height: 36%;
  border-radius: 8px 8px 40% 40% / 8px 8px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.06));
  pointer-events: none;
  z-index: -1;
}
.lobby-dock__tile:active { transform: translateY(3px); padding-bottom: 6px; box-shadow: inset 0 -2px 0 var(--blue-btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.lobby-dock__tile.is-live { box-shadow: inset 0 -5px 0 var(--blue-btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 3px #fff; }
.lobby-dock__tile.is-live::after {
  content: '';
  position: absolute;
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--red-btn);
  animation: ql-blink 1s steps(2) infinite;
}
.lobby-dock__emoji { display: inline-flex; font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 0 var(--ink-soft)); }
.lobby-dock__label { font-family: var(--font-display); font-size: 15px; line-height: 1; white-space: nowrap; text-shadow: var(--ts-outline-sm); }
.lobby-live { display: flex; flex-direction: column; gap: var(--s-2); }
.lobby-live[hidden] { display: none; }
.lobby-live__pill {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 6px 0 var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.45);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 17px;
  text-shadow: var(--ts-outline-sm);
  font-variant-numeric: tabular-nums;
}
.lobby-live__pill > .ic { font-size: 24px; }
.lobby-live__txt { flex: 1; text-align: left; }
.lobby-live__pill b {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 34px;
  padding: 0 6px 3px 12px;
  border-radius: var(--r-sm);
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--green) 0 50%, var(--green-lo));
  box-shadow: inset 0 -3px 0 var(--green-edge), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  font-weight: 400;
  font-size: 15px;
}

/* =========================================================================
   QUICK-LOG SHEETS (ql-*)
   ========================================================================= */
.ql { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: var(--s-2); }
.ql .btn--xl, .ql .btn--lg { width: 100%; }
.ql-manual { display: flex; flex-direction: column; gap: var(--s-4); }
.ql-manual .ql-predict { margin-top: var(--s-1); }
.ql-sheet-title { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.ql-sheet-title > .ic { font-size: 32px; filter: drop-shadow(0 2px 0 var(--ink-soft)); }
.ql-small { font-size: var(--fs-sm); font-weight: 800; }
.ql-center { text-align: center; }
.ql-warn { color: var(--orange); font-weight: 900; }
.ql-warn .ic { font-size: 18px; }
.ql-link { align-self: center; min-height: 44px; padding: 0 var(--s-3); background: none; border: 0; color: var(--text-dim); font: inherit; font-size: var(--fs-sm); font-weight: 800; text-decoration: underline; }
.ql-dot { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--red-btn); animation: ql-blink 1s steps(2) infinite; }
@keyframes ql-blink { 50% { opacity: 0.3; } }

/* recessed wells shared by notes / lock / live idle */
.ql-note, .ql-lock {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.4;
}
.ql-note__ic, .ql-lock__icon { flex: none; display: inline-flex; font-size: 26px; line-height: 1; }
.ql-note__txt { min-width: 0; }
.ql-lock { align-items: center; }
.ql-lock__icon { font-size: 30px; }
.ql-lock__title { font-size: 17px; margin-bottom: 2px; }

/* segmented: recessed track, selected = raised blue face */
.ql-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 2px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3);
}
.ql-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-mute);
  font-family: var(--font-display);
  font-size: 18px;
  text-shadow: var(--ts-outline-sm);
}
.ql-seg__btn .ic { font-size: 22px; filter: grayscale(0.7) brightness(0.8); }
.ql-seg__btn.is-on {
  color: #fff;
  border-color: var(--ink);
  background: linear-gradient(180deg, var(--blue-btn) 0 50%, var(--blue-btn-lo));
  box-shadow: inset 0 -4px 0 var(--blue-btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  padding-bottom: 3px;
}
.ql-seg__btn.is-on .ic { filter: none; }

/* preset chips */
.ql-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }
.ql-chip {
  min-width: 60px;
  min-height: 48px;
  padding: 0 var(--s-3) 4px;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 var(--panel-hi);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  text-shadow: var(--ts-outline-sm);
  transition: transform 60ms ease-out;
}
.ql-chip:active { transform: translateY(2px); }
.ql-chip.is-on {
  background: linear-gradient(180deg, var(--blue-btn) 0 50%, var(--blue-btn-lo));
  box-shadow: inset 0 -4px 0 var(--blue-btn-edge), inset 0 0 0 3px #fff;
}

/* stepper */
.ql-stepper { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.ql-stepper__btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding-bottom: 4px;
  border-radius: var(--r-md);
  border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, var(--blue-btn) 0 50%, var(--blue-btn-lo));
  box-shadow: inset 0 -5px 0 var(--blue-btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 26px;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.ql-stepper__btn .ic { vertical-align: 0; }
.ql-stepper__btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--blue-btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.ql-stepper__val {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-1);
  min-width: 132px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.ql-stepper__num { font-family: var(--font-display); font-size: 48px; line-height: 1; text-shadow: var(--ts-outline); font-variant-numeric: tabular-nums; }
.ql-stepper__unit { color: var(--text-dim); font-weight: 900; }

/* GT preview */
.ql-predict { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ql-predict__row { display: flex; align-items: center; gap: var(--s-2); font-size: 34px; }
.ql-predict__row > .ic { font-size: 34px; filter: drop-shadow(0 2px 0 var(--ink-soft)); }
.ql-predict__gt { font-size: 34px; line-height: 1.1; }
.ql-predict__sub { font-size: var(--fs-sm); font-weight: 800; text-align: center; }

.ql-dt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--yellow) 28%, var(--bg-2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 16px;
  text-shadow: var(--ts-outline-sm);
  text-align: center;
}
.ql-dt .ic { font-size: 24px; }

/* Live timers */
.ql-live { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.ql-live__idle {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.22);
  font-size: 64px;
  line-height: 1;
}
.ql-live__idle .ic { vertical-align: 0; }
.ql-live__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-3) 0 10px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  background: var(--red-btn-lo);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
  font-family: var(--font-display);
  font-size: 15px;
  text-shadow: var(--ts-outline-sm);
}
.ql-live__badge .ql-dot { background: #fff; }
.ql-clock {
  font-family: var(--font-display);
  font-size: clamp(60px, 19vw, 84px);
  line-height: 1;
  padding-bottom: 6px;
  font-variant-numeric: tabular-nums;
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 6px 0 var(--ink);
}
.ql-clock__gt { min-height: 28px; font-size: 20px; font-weight: 800; text-align: center; }
.ql-clock__gt .display { font-size: 22px; }
.ql-phase {
  padding: 4px 16px 6px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  font-size: 22px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.ql-phase:empty { display: none; }
.ql-phase--brisk { background: var(--orange); }
.ql-phase--easy { background: var(--green-lo); }

/* interval toggle row */
.ql-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: var(--grad-panel);
  box-shadow: var(--bevel), 0 3px 0 var(--ink-soft);
  color: var(--text);
  text-align: left;
  font: inherit;
}
.ql-toggle__title { font-size: 18px; }
.ql-toggle__knob {
  position: relative;
  flex: none;
  width: 60px;
  height: 34px;
  border-radius: var(--r-pill);
  border: 2.5px solid var(--ink);
  background: var(--bg-2);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3);
  transition: background var(--t-med);
}
.ql-toggle__knob::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 25px; height: 25px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, #fff, #dfe6f3);
  transition: transform var(--t-med) var(--ease-pop);
}
.ql-toggle.is-on { box-shadow: var(--bevel), inset 0 0 0 3px #fff, 0 3px 0 var(--ink-soft); }
.ql-toggle.is-on .ql-toggle__knob { background: var(--green-lo); }
.ql-toggle.is-on .ql-toggle__knob::after { transform: translateX(26px); }

/* Snack */
.ql-snack-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}
.ql-snack-head__count { display: flex; align-items: baseline; gap: var(--s-2); }
.ql-snack-head__num { font-size: 32px; line-height: 1; color: var(--good); }
.ql-snack-head__lbl { font-size: var(--fs-sm); font-weight: 900; color: var(--text-dim); }
.ql-pips { display: flex; gap: 4px; }
.ql-pip { width: 34px; height: 16px; border-radius: 6px; border: 2px solid var(--ink); background: var(--bg-2); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.3); }
.ql-pip.is-on { background: var(--green); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
.ql-snack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ql-snack-wrap { position: relative; }
.ql-snack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 168px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-lg);
  border: 2px solid var(--ink);
  background: var(--grad-panel);
  box-shadow: var(--bevel), 0 4px 0 var(--ink-soft);
  color: var(--text);
  font: inherit;
  text-align: center;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.ql-snack:active { transform: translateY(3px); box-shadow: var(--bevel), 0 1px 0 var(--ink-soft); }
.ql-snack__emoji {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 2px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 38px;
  line-height: 1;
}
.ql-snack__emoji .ic { vertical-align: 0; }
.ql-snack__name { font-family: var(--font-display); font-size: 17px; line-height: 1.1; text-shadow: var(--ts-outline-sm); }
.ql-snack__dose { font-size: var(--fs-sm); font-weight: 800; }
.ql-snack__done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding: 4px 12px 6px 8px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--green) 0 50%, var(--green-lo));
  box-shadow: inset 0 -3px 0 var(--green-edge), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  text-shadow: var(--ts-outline-sm);
}
.ql-snack__done .ic { font-size: 16px; }
.ql-snack__done .ic { filter: brightness(0) invert(1); }
.ql-snack.is-done { box-shadow: var(--bevel), inset 0 0 0 3px var(--green), 0 4px 0 var(--ink-soft); transform: scale(1.04); }
.ql-snack__alt {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding-bottom: 3px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--blue-btn) 0 50%, var(--blue-btn-lo));
  box-shadow: inset 0 -4px 0 var(--blue-btn-edge), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 22px;
}
.ql-snack__alt .ic { vertical-align: 0; }
.ql-snack__alt:active { transform: translateY(2px); }
.ql-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-sm); font-weight: 800; color: var(--text-dim); text-align: center; }
.ql-hint__ic {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--blue-btn-lo);
  font-size: 15px;
}

.ql-counter-head { display: flex; align-items: center; gap: var(--s-3); }
.ql-counter-head__title { font-size: 22px; }
.ql-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding-bottom: 4px;
  border-radius: var(--r-md);
  border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, var(--slate) 0 50%, var(--slate-lo));
  box-shadow: inset 0 -4px 0 var(--slate-edge), inset 0 2px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 24px;
}
.ql-back .ic { vertical-align: 0; }
.ql-back:active { transform: translateY(2px); }
.ql-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  width: 100%;
  min-height: 300px;
  border-radius: 20px;
  border: 2.5px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
  touch-action: manipulation;
  user-select: none;
}
.ql-counter:active { background: rgba(13, 24, 56, 0.45); }
.ql-counter.is-hit { box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.22), inset 0 0 0 4px var(--green); }
.ql-counter__emoji { display: inline-flex; font-size: 48px; }
.ql-counter__num {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 1;
  padding-bottom: 8px;
  font-variant-numeric: tabular-nums;
  text-shadow:
    -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink), 4px 4px 0 var(--ink),
    0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 0 8px 0 var(--ink);
}
.ql-counter.is-hit .ql-counter__num { color: var(--good); }
.ql-counter__target { font-size: var(--fs-md); font-weight: 900; }
.ql-counter__hint { font-size: var(--fs-sm); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }

/* Stand / yard */
.ql-today {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: rgba(13, 24, 56, 0.35);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}
.ql-today__row { justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.ql-today .display { font-size: 18px; }
.ql-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.ql-kind {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 80px;
  padding: 4px 2px 8px;
  border-radius: var(--r-md);
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 var(--panel-hi);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  text-shadow: var(--ts-outline-sm);
}
.ql-kind__emoji { display: inline-flex; font-size: 32px; line-height: 1; }
.ql-kind:active { transform: translateY(2px); }
.ql-kind.is-on {
  background: linear-gradient(180deg, var(--blue-btn) 0 50%, var(--blue-btn-lo));
  box-shadow: inset 0 -4px 0 var(--blue-btn-edge), inset 0 0 0 3px #fff;
}

/* =========================================================================
   FALLBACKS (only used when ui components are missing)
   ========================================================================= */
.fb-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(0, 0, 0, 0); transition: background var(--t-med); display: flex; align-items: flex-end; }
.fb-sheet-backdrop.is-open { background: rgba(6, 12, 34, 0.62); }
.fb-sheet {
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  padding: var(--s-2) var(--s-4) calc(var(--safe-bottom) + var(--s-5));
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 2.5px solid var(--ink);
  border-bottom: 0;
  transform: translateY(100%);
  transition: transform var(--t-med) var(--ease-out);
}
.fb-sheet-backdrop.is-open .fb-sheet { transform: none; }
.fb-sheet__grab { width: 48px; height: 6px; margin: var(--s-2) auto var(--s-3); border-radius: var(--r-pill); background: rgba(13, 24, 56, 0.55); }
.fb-sheet__title { text-align: center; font-size: 24px; margin-bottom: var(--s-3); }
.fb-confirm > * { flex: 1; }
.fb-toasts { position: fixed; left: var(--s-4); right: var(--s-4); top: calc(var(--safe-top) + var(--hud-h) + var(--s-2)); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none; }
.fb-toast { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-pill); background: rgba(13, 24, 56, 0.94); border: 2.5px solid var(--ink); box-shadow: var(--shadow-card); font-family: var(--font-display); text-shadow: var(--ts-outline-sm); transition: opacity var(--t-med), transform var(--t-med); }
.fb-toast .ic { font-size: 24px; }
.fb-toast.is-out { opacity: 0; transform: translateY(-10px); }
.fb-bar { position: relative; height: 12px; border-radius: var(--r-pill); background: var(--bg-2); border: 2px solid var(--ink); overflow: hidden; }
.fb-bar__fill { height: 100%; width: 0; border-radius: inherit; background: var(--blue-btn); transition: width var(--t-slow) var(--ease-out); }
.fb-bar__label { position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); }
.fb-ring { position: relative; }
.fb-ring circle { transition: stroke-dashoffset 1s linear; }
.fb-ring__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fb-ring__center { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-2xl); text-shadow: var(--ts-outline); }
.fb-ring__sub { color: var(--text-dim); font-size: var(--fs-sm); font-weight: 800; }
.fb-empty { text-align: center; padding: var(--s-5) var(--s-3); }
.fb-empty__emoji { font-size: 52px; display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .lobby *, .ql *, .lobby-dock * { animation: none !important; }
}
html.reduce-motion .lobby *, html.reduce-motion .ql *, html.reduce-motion .lobby-dock * { animation: none !important; }