:root {
  --ink: #1a1f1c;
  --paper: #f4efe4;
  --paper-deep: #e7dfd0;
  --rule: #2c3330;
  --civic: #1f4f4a;
  --civic-bright: #2a7a72;
  --foil: #c4a35a;
  --holo-blue: #7e8b9a;
  --danger-mute: #8a4a3a;
  --shadow: 0 20px 48px rgba(26, 31, 28, 0.2);
  --card-width: min(330px, calc(100vw - 42px));
  --safe-bottom: max(8px, env(safe-area-inset-bottom));
  --footer-pill-gap: 0px;
  /* Fixed bottom row: the nav bar, then the footer links (44px tap boxes) directly under it. */
  --nav-height: 62px;
  --dock-height: 44px;
  --nav-clearance: calc(var(--nav-height) + var(--dock-height) + var(--footer-pill-gap) + env(safe-area-inset-bottom, 0px));
  color: var(--ink);
  background: var(--paper);
  font-family: "IBM Plex Sans", "IBM Plex Sans Hebrew", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(44, 51, 48, 0.045) 50%, transparent 50.15%),
    var(--paper);
  color: var(--ink);
}

button, input { font: inherit; }
button { color: inherit; }

button:focus-visible {
  outline: 3px solid var(--foil);
  outline-offset: 3px;
}

.paper-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.app-shell {
  min-height: 100dvh;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px 104px;
}

.skip-link {
  position: absolute;
  z-index: 80;
  inset-inline-start: 16px;
  top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.masthead {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  border-bottom: 1px solid rgba(44, 51, 48, 0.32);
}

.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
}

.wordmark {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: Fraunces, Georgia, serif;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.wordmark b {
  font-family: "IBM Plex Sans Hebrew", sans-serif;
  color: var(--civic);
  font-size: 16px;
}

.masthead-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.sound-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--civic);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sound-toggle:hover { color: var(--civic); }
.sound-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.sound-toggle .sound-icon-off,
.sound-toggle.muted .sound-icon-on { display: none; }
.sound-toggle.muted .sound-icon-off { display: block; }
.sound-toggle.muted { color: var(--civic); }

.leaf-toggle,
.heard-you-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-inline-start: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--civic);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Bell ink sits ~1.5px closer than the speaker; this restores the same gap as portrait-to-sound. */
.heard-you-toggle { margin-inline-start: -6.54px; }
.leaf-toggle:hover,
.heard-you-toggle:hover { color: var(--civic); }
.leaf-toggle:focus-visible,
.heard-you-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.leaf-toggle.is-still .leaf-arrow { display: none; }
.leaf-arrow {
  transform-box: fill-box;
  transform-origin: center;
  animation: leaf-arrow-fall 1.15s ease-in infinite;
}
@keyframes leaf-arrow-fall {
  0% { transform: translateY(-2px); opacity: 0.2; }
  30% { opacity: 1; }
  100% { transform: translateY(4px); opacity: 0; }
}

.masthead-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: right;
}

.player-name {
  max-width: 180px;
  min-height: 44px;
  overflow: hidden;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid rgba(44, 51, 48, 0.35);
  background: transparent;
  color: var(--civic);
  font: 700 16px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.player-name .player-avatar {
  display: none !important;
}
.player-name:hover,
.player-name:focus-visible { border-bottom-color: var(--civic); }

.localhost-debug-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(155, 56, 47, 0.35);
  border-radius: 999px;
  background: rgba(155, 56, 47, 0.08);
  color: #9b382f;
  font: 600 9px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.header-debug-reset {
  padding: 5px 7px;
  border: 1px solid var(--danger-mute);
  background: transparent;
  color: var(--danger-mute);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.presentation-studio-link { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }

/* Footer links (גילוי נאות / בקשת פיצ׳ר / דיווח באג): quiet text links with a small icon and a dotted gold
   underline, like «איך משחקים». The box is an invisible 44px tap target. */
.advocacy-dock,
.feature-dock,
.bug-dock {
  position: fixed;
  z-index: 16;
  bottom: env(safe-area-inset-bottom, 0px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-width: 44px;
  min-height: var(--dock-height);
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font: 600 12px/1 "IBM Plex Sans Hebrew", sans-serif;
  text-decoration: underline dotted color-mix(in srgb, var(--foil) 80%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  direction: rtl;
  cursor: pointer;
  pointer-events: auto;
}
.dock-icon {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--civic);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.advocacy-dock {
  left: 8px;
  right: auto;
}
.bug-dock {
  right: 8px;
  left: auto;
}
.feature-dock {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.advocacy-dock:hover,
.feature-dock:hover,
.bug-dock:hover { color: var(--civic); }
.advocacy-dock:focus-visible,
.feature-dock:focus-visible,
.bug-dock:focus-visible { outline: 2px solid var(--civic); outline-offset: -2px; }

.live-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--civic-bright);
  box-shadow: 0 0 0 4px rgba(42, 122, 114, 0.12);
}

.view {
  display: none;
  min-height: calc(100dvh - 178px);
  padding: 46px 0 22px;
}

.view.active { display: block; animation: view-in 260ms ease-out both; }
.view.centered.active { display: grid; place-content: center; text-align: center; }
#main:focus { outline: none; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; }

h1 {
  margin-bottom: 14px;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.eyebrow {
  margin-bottom: 11px;
  color: var(--civic);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lede {
  max-width: 36em;
  margin-bottom: 22px;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
}

.home-grid {
  min-height: 580px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.72fr);
  align-items: center;
  gap: clamp(36px, 8vw, 100px);
}

.home-copy { align-self: center; }

.collection-line {
  width: min(420px, 100%);
  margin-top: 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.activity-copy {
  display: block;
  margin-top: 8px;
  color: rgba(26, 31, 28, 0.58);
  font-size: 10px;
  font-weight: 500;
}

.progress {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(44, 51, 48, 0.25);
  border-radius: 99px;
  background: var(--paper-deep);
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--civic-bright);
  transition: width 500ms ease;
}

.pack-plinth {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  perspective: 900px;
}

.pack-shadow {
  display: none;
}

.pack-wrapper {
  position: relative;
  width: 300px;
  aspect-ratio: 769 / 1390;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  transform: rotate(2.4deg);
  transition: transform 300ms ease;
}

.pack-wrapper:hover { transform: rotate(0.5deg) translateY(-6px); }
.pack-wrapper img { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }

.pack-wrapper::before,
.pack-wrapper::after {
  display: none;
}

.pack-wrapper::before { inset: 62px 18px 80px; }
.pack-wrapper::after { inset: 78px 34px 96px; }

.pack-seal {
  position: absolute;
  top: 20px;
  left: 21px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.pack-slit {
  position: absolute;
  z-index: 2;
  top: 56px;
  left: 0;
  width: 100%;
  height: 10px;
  border-top: 2px solid var(--rule);
  border-bottom: 1px dashed var(--rule);
  background: var(--foil);
}

.pack-title {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font: 600 54px/0.82 Fraunces, Georgia, serif;
  letter-spacing: -0.06em;
}

.pack-title b {
  margin-top: 13px;
  color: var(--civic);
  font: 600 30px/1 "IBM Plex Sans Hebrew", sans-serif;
  letter-spacing: 0;
}

.pack-subtitle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 83px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pack-rule, .pack-date {
  position: absolute;
  bottom: 24px;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.pack-rule { left: 22px; }
.pack-date { right: 22px; }

.action-dock {
  width: min(520px, 100%);
  margin: 2px auto 0;
  text-align: center;
}

.opening-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.opening-choice .primary-action,
.opening-choice .secondary-action { width: 100%; }

.primary-action, .secondary-action {
  min-height: 54px;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.primary-action {
  width: 100%;
  border: 1px solid var(--civic);
  background: var(--civic);
  color: var(--paper);
  box-shadow: 0 8px 20px rgba(31, 79, 74, 0.18);
}

.primary-action:hover:not(:disabled) { background: var(--civic-bright); transform: translateY(-2px); }
.primary-action:active:not(:disabled) { transform: translateY(0); }
.primary-action:disabled { cursor: not-allowed; opacity: 0.46; box-shadow: none; }
.primary-action.narrow { width: min(320px, 100%); }

.secondary-action {
  border: 1px solid var(--civic);
  background: transparent;
  color: var(--civic);
}

.action-note {
  margin: 10px 0 0;
  color: rgba(26, 31, 28, 0.7);
  font-size: 12px;
  line-height: 1.4;
}

.bottom-nav {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: var(--safe-bottom);
  display: flex;
  width: min(590px, calc(100% - 32px));
  padding: 5px;
  border: 1px solid rgba(44, 51, 48, 0.28);
  border-radius: 16px;
  background: rgba(244, 239, 228, 0.92);
  box-shadow: 0 10px 30px rgba(26, 31, 28, 0.16);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.bottom-nav button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(26, 31, 28, 0.64);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bottom-nav button.active { background: var(--civic); color: var(--paper); }
/* Drawn civic nav icons (inline SVG in index.html): ballot box, card stack, medal, people. */
.nav-icon {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ballot-loader {
  width: 96px;
  height: 70px;
  margin: 0 auto 30px;
  border: 2px solid var(--rule);
  border-top: 8px solid var(--foil);
  background: var(--paper-deep);
}

.ballot-loader span {
  display: block;
  width: 26px;
  height: 36px;
  margin: -28px auto 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  animation: vote 1.2s ease-in-out infinite;
}

@keyframes vote {
  0% { transform: translateY(-14px) rotate(-4deg); opacity: 0; }
  35% { opacity: 1; }
  75%, 100% { transform: translateY(42px) rotate(2deg); opacity: 0; }
}

.binder-flip-frame {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px dashed color-mix(in srgb, var(--rule) 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  color: var(--ink);
  font: 600 11px/1 "IBM Plex Sans Hebrew", sans-serif;
  cursor: pointer;
}
.binder-flip-frame[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--civic);
  color: var(--civic);
}
.binder-flip-frame:focus-visible { outline: 2px solid var(--civic); outline-offset: 2px; }
.pack-header, .binder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.pack-header h1, .binder-head h1 { font-size: clamp(34px, 6vw, 56px); }

.pack-counter {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.rip-stage {
  min-height: 490px;
  display: grid;
  place-items: center;
  padding: 18px 0;
  perspective: 1100px;
}

.walkout {
  --walkout-pip: var(--civic);
  position: relative;
  width: min(720px, calc(100vw - 32px));
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 50px clamp(24px, 7vw, 72px);
  border: 2px solid var(--rule);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--walkout-pip) 55%, transparent), transparent 52%),
    linear-gradient(145deg, #202622, #111512);
  color: var(--paper);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.walkout::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 42px;
  left: -5%;
  width: 110%;
  height: 10px;
  border-top: 2px solid var(--foil);
  border-bottom: 1px dashed rgba(244, 239, 228, 0.55);
  background: rgba(196, 163, 90, 0.08);
  box-shadow: 0 0 28px rgba(196, 163, 90, 0.3);
}

.walkout::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 14px;
  border: 1px solid rgba(244, 239, 228, 0.14);
  border-radius: 12px;
}

.walkout-content {
  width: 100%;
  text-align: center;
  animation: walkout-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
}

@keyframes walkout-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.walkout-label {
  margin: 0 0 20px;
  color: var(--foil);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.walkout-quote {
  max-width: 14em;
  margin: 0 auto;
  font: 600 clamp(27px, 5vw, 46px)/1.12 Fraunces, Georgia, serif;
  letter-spacing: -0.025em;
}

.walkout-source {
  max-width: 38em;
  margin: 24px auto 0;
  color: rgba(244, 239, 228, 0.74);
  font-size: 13px;
  line-height: 1.45;
}
.walkout-source small { display: inline-block; margin-top: 9px; font-size: 10px; line-height: 1.4; }

.walkout-source a,
.source-link {
  color: var(--foil);
  text-underline-offset: 3px;
}

.walkout-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid rgba(244, 239, 228, 0.6);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.walkout-tag::before {
  content: "";
  width: 8px;
  height: 30px;
  border-radius: 2px;
  background: var(--walkout-pip);
}

.walkout-silhouette {
  position: relative;
  width: min(300px, 68vw);
  aspect-ratio: 63 / 96;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(244, 239, 228, 0.38);
  border-radius: 48% 48% 10px 10px;
  background: var(--walkout-pip);
  box-shadow: 0 0 80px color-mix(in srgb, var(--walkout-pip) 60%, transparent);
}

.walkout-silhouette .card-art,
.walkout-silhouette .mini-art {
  position: absolute;
  inset: 0;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  filter: grayscale(1) brightness(0.16) contrast(1.7);
  opacity: 0.94;
}

.walkout-silhouette .placeholder::before {
  color: var(--paper);
  opacity: 0.16;
}

.walkout {
  width: min(720px, calc(100vw - 32px));
  min-height: 640px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.walkout::before,
.walkout::after { display: none; }

.walkout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: none;
}

.fan {
  position: relative;
  width: min(620px, 95vw);
  height: 390px;
  animation: fan-in 620ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.fan-card {
  position: absolute;
  top: 52px;
  left: 50%;
  width: 164px;
  aspect-ratio: 63 / 96;
  border: 2px solid var(--rule);
  border-radius: 9px;
  background:
    radial-gradient(circle at center, transparent 0 29%, var(--civic) 30% 31%, transparent 32%),
    repeating-linear-gradient(45deg, var(--paper-deep) 0 8px, var(--paper) 8px 16px);
  box-shadow: var(--shadow);
  transform-origin: 50% 130%;
}

.fan-card:nth-child(1) { transform: translateX(-50%) rotate(-30deg) translateY(28px); }
.fan-card:nth-child(2) { transform: translateX(-50%) rotate(-18deg) translateY(9px); }
.fan-card:nth-child(3) { transform: translateX(-50%) rotate(-6deg); }
.fan-card:nth-child(4) { transform: translateX(-50%) rotate(6deg); }
.fan-card:nth-child(5) { transform: translateX(-50%) rotate(18deg) translateY(9px); }
.fan-card:nth-child(6) { transform: translateX(-50%) rotate(30deg) translateY(28px); }

@keyframes fan-in {
  from { opacity: 0; transform: translateY(80px) scale(0.7); }
  to { opacity: 1; transform: none; }
}

.kalpi-card {
  --pip: var(--civic);
  position: relative;
  width: var(--card-width);
  aspect-ratio: 63 / 96;
  border: 2px solid var(--rule);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
}

.kalpi-card.rare { box-shadow: var(--shadow), inset 0 0 0 3px var(--foil); }
.kalpi-card.uncommon { box-shadow: var(--shadow), inset 0 0 0 1px var(--foil); }
.kalpi-card.holo { box-shadow: var(--shadow), inset 0 0 0 3px var(--foil); }

.kalpi-card.holo::before,
.kalpi-card.holo::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.kalpi-card.holo::before {
  z-index: 5;
  inset: -2px;
  padding: 2px;
  background: conic-gradient(from var(--holo-spin, 0deg), transparent 0 58%, #fff6c8 64%, #ffffff 70%, #c4a35a 76%, transparent 84%);
  animation: holo-orbit 2.2s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.kalpi-card.holo::after {
  z-index: 4;
  inset: 0;
  background: linear-gradient(120deg, transparent 12%, rgba(126, 139, 154, 0.2) 35%, rgba(196, 163, 90, 0.28) 49%, rgba(94, 122, 116, 0.18) 63%, transparent 86%);
  background-size: 220% 100%;
  mix-blend-mode: multiply;
  animation: shimmer 2.8s linear infinite;
}

@keyframes shimmer { to { background-position: -220% 0; } }
@property --holo-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes holo-orbit { to { --holo-spin: 360deg; } }

.kalpi-card.reveal {
  animation: card-reveal 520ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.kalpi-card.reveal.rare, .kalpi-card.reveal.holo {
  animation: rare-reveal 760ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

@keyframes card-reveal {
  from { opacity: 0; transform: translateY(80px) rotateY(8deg) scale(0.76); }
  to { opacity: 1; transform: none; }
}

@keyframes rare-reveal {
  0% { opacity: 0; transform: translateY(80px) scale(0.7); }
  65% { opacity: 1; transform: translateY(-10px) scale(1.05); }
  100% { transform: none; }
}

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 15px 15px 13px 28px;
  overflow: hidden;
  border-radius: inherit;
  backface-visibility: hidden;
}

.card-pip {
  position: absolute;
  top: 15px;
  left: 13px;
  width: 8px;
  height: 28px;
  border-radius: 2px;
  background: var(--pip);
}

[dir="rtl"] .card-pip { left: auto; right: 13px; }

.card-meta, .card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-art {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 10px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(44, 51, 48, 0.18);
  border-radius: 8px;
  background: var(--paper-deep) center / cover no-repeat;
}
img.card-art,
img.mini-art {
  display: block;
  object-fit: cover;
  object-position: center 18%;
}

.card-art.placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, transparent 0 49.6%, rgba(44, 51, 48, 0.13) 50%, transparent 50.4%),
    radial-gradient(circle at 50% 42%, var(--paper) 0 18%, transparent 18.5%),
    var(--paper-deep);
}

.card-art.placeholder::before {
  content: attr(data-mark);
  color: var(--pip);
  font-family: Fraunces, "IBM Plex Sans Hebrew", serif;
  font-size: clamp(44px, 11vw, 72px);
  line-height: 1;
  letter-spacing: -0.06em;
}

.card-art.placeholder::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--pip) 42%, transparent);
  border-radius: 50% 50% 44% 44%;
}

.card-face h2 {
  margin: 0 0 3px;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.card-sub {
  margin: 0;
  color: rgba(26, 31, 28, 0.72);
  font-size: 10px;
  line-height: 1.3;
}

.card-footer { margin-top: auto; padding-top: 10px; color: rgba(26, 31, 28, 0.62); }

.new-stamp, .finish-stamp {
  position: absolute;
  z-index: 5;
  right: 13px;
  padding: 4px 6px;
  border: 1px solid var(--foil);
  background: rgba(244, 239, 228, 0.9);
  color: var(--civic);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.new-stamp { top: auto; bottom: 8px; right: 8px; }
.finish-stamp { bottom: 44px; }

.hold-meter {
  width: min(330px, calc(100vw - 42px));
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--paper-deep);
}

.hold-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--foil);
  animation: hold 1.5s linear forwards;
}

@keyframes hold { to { width: 100%; } }

.guest-binder-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--civic) 28%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--civic) 8%, #fff);
  font: 600 13px/1.3 "IBM Plex Sans Hebrew", sans-serif;
}
.guest-binder-banner[hidden] { display: none; }
.guest-binder-banner button {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--civic);
  color: #eee5d4;
  font: inherit;
  cursor: pointer;
}
.binder-head { margin-bottom: 26px; }
.binder-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.player-binder-link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--civic) 45%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.player-binder-link:hover,
.player-binder-link:focus-visible {
  border-bottom-color: var(--civic);
  color: var(--civic);
}
.binder-total { text-align: right; }
.binder-total strong { display: block; color: var(--civic); font: 600 clamp(36px, 7vw, 64px)/1 Fraunces, serif; }
.binder-total span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }

.filter-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 2px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.filter-strip button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  max-width: 8.5rem;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid rgba(44, 51, 48, 0.35);
  border-radius: 8px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.filter-strip .filter-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-strip .filter-count {
  flex: 0 0 auto;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.filter-strip button.active { border-color: var(--civic); background: var(--civic); color: var(--paper); }
.filter-sets {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.filter-sets button {
  scroll-snap-align: start;
}
.filter-party {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid rgba(44, 51, 48, 0.35);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.filter-party.active {
  border-color: var(--civic);
  background: var(--civic);
  color: var(--paper);
}
.filter-party select {
  max-width: 7.5rem;
  width: auto;
  min-width: 4.25rem;
  height: 1.35em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.filter-party span { display: none; }
.filter-owned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 0;
  padding: 2px 6px;
  border: 1px solid rgba(44, 51, 48, 0.35);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.filter-owned.active {
  border-color: var(--civic);
  background: var(--civic);
  color: var(--paper);
}
.filter-owned input { width: 12px; height: 12px; margin: 0; accent-color: var(--civic); }

.binder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.achievement-shelf {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) 1fr;
  gap: 24px;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 2px solid var(--rule);
}

.achievement-shelf h2 { margin: 0; font-size: 27px; }
.achievement-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; grid-auto-rows: min-content; gap: 8px; }
.achievement-badge { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; min-height: min-content; height: auto; padding: 9px; overflow: hidden; isolation: isolate; border: 1px dashed rgba(44, 51, 48, 0.35); color: rgba(26, 31, 28, 0.52); }
.achievement-badge.earned { border-style: solid; border-color: var(--foil); color: var(--ink); background: rgba(196, 163, 90, 0.08); }
.achievement-seal { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 1px solid currentColor; border-radius: 50%; font: 600 10px/1 ui-monospace, monospace; }
.achievement-badge > div { min-width: 0; overflow: hidden; }
.achievement-badge strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.achievement-badge p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.achievement-track {
  position: relative;
  height: 16px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid rgba(44, 51, 48, 0.28);
  border-radius: 99px;
  background: var(--paper-deep);
}
.achievement-track span {
  display: block;
  height: 100%;
  background: var(--civic-bright);
}
.achievement-track b {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  font: 700 9px/1 "IBM Plex Sans Hebrew", sans-serif;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 3px var(--paper), 0 0 5px var(--paper-deep);
}

.binder-slot {
  position: relative;
  aspect-ratio: 63 / 96;
  overflow: hidden;
  padding: 0;
  border: 1px dashed rgba(44, 51, 48, 0.34);
  border-radius: 8px;
  background: var(--paper-deep);
  cursor: default;
}

.binder-slot.owned {
  container-type: inline-size;
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(26, 31, 28, 0.12);
}

.binder-slot .mini-art {
  position: absolute;
  inset: 0;
  background: var(--paper-deep) center / cover no-repeat;
}

.binder-slot .mini-art.placeholder { display: grid; place-items: center; }
.binder-slot .mini-art.placeholder::before {
  content: attr(data-mark);
  color: var(--pip, var(--civic));
  font: 600 clamp(22px, 6vw, 54px)/1 Fraunces, "IBM Plex Sans Hebrew", serif;
}

.binder-slot .mini-scrim {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(26, 31, 28, 0.88));
}

.binder-slot.is-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  text-align: center;
}

.binder-slot.is-missing .missing-name,
.binder-slot.is-missing .missing-code,
.binder-slot.is-missing .missing-rarity {
  position: static;
  max-width: 100%;
  transform: none;
  color: rgba(26, 31, 28, 0.62);
  line-height: 1.15;
  white-space: normal;
}

.binder-slot.is-missing .missing-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.binder-slot.is-missing .missing-code,
.binder-slot.is-missing .missing-rarity {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.binder-slot .missing-code {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(26, 31, 28, 0.4);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.debug-unlock-card {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 8px;
  width: auto;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(44, 51, 48, 0.45);
  border-radius: 99px;
  background: var(--paper);
  color: var(--civic);
  font: 600 8px/1 ui-monospace, monospace;
  transform: translateX(50%);
  cursor: pointer;
}

.debug-unlock-card:hover,
.debug-unlock-card:focus-visible {
  border-color: var(--civic);
  outline: 2px solid var(--civic);
  outline-offset: 2px;
}

.dupe-count {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  min-width: 22px;
  padding: 3px 5px;
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  font-size: 9px;
  font-weight: 600;
}

.empty-note { padding: 30px; border: 1px dashed var(--rule); text-align: center; }
.empty-note.is-loading {
  border-style: solid;
  border-color: rgba(31, 79, 74, 0.28);
  color: var(--civic);
  font-weight: 600;
}
.empty-note.is-failed {
  border-color: var(--danger-mute);
  color: var(--danger-mute);
}
.binder-slot.is-loading {
  pointer-events: none;
  animation: binder-well-wait 1.6s ease-in-out infinite;
}
.binder-slot.is-loading .missing-code { letter-spacing: 0.28em; }
@keyframes binder-well-wait {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}

.workspace-head,
.review-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(44, 51, 48, 0.3);
}

.workspace-head h1 { font-size: clamp(38px, 6vw, 62px); }
.workspace-head .lede { margin-bottom: 26px; }
.text-link { flex: 0 0 auto; margin-bottom: 28px; color: var(--civic); font-size: 12px; font-weight: 600; text-underline-offset: 4px; }

.growth-grid,
.studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.work-card {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(44, 51, 48, 0.55);
  background:
    linear-gradient(90deg, transparent 0 18px, rgba(44, 51, 48, 0.08) 18px 19px, transparent 19px),
    rgba(255, 253, 247, 0.46);
}

.work-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 54px;
  height: 5px;
  background: var(--foil);
}

.work-card h2 { margin-bottom: 13px; font-size: 25px; line-height: 1.05; }
.work-card p { font-size: 13px; line-height: 1.48; }
.work-kicker { margin-bottom: 9px; color: var(--civic); font-size: 9px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.work-note { margin: 13px 0 0; color: rgba(26, 31, 28, 0.64); font-size: 10px !important; }
#collector-rank.work-note {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1.35;
}
.work-card code { display: inline-block; padding: 4px 6px; background: var(--paper-deep); font-size: 10px; }

.trade-preview {
  min-height: 188px;
  display: grid;
  grid-template-columns: minmax(112px, 136px) 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 0;
  border-block: 1px solid rgba(44, 51, 48, 0.22);
}

.trade-preview .binder-slot { width: 100%; }
.trade-card-button:focus-visible { outline: 3px solid var(--civic); outline-offset: 3px; }
.trade-preview h3 { margin: 0 0 4px; font-size: 17px; }
.trade-preview p { margin: 0; font-size: 10px; }
.trade-preview .dupe-ready { color: var(--civic); font-weight: 600; }

.field-label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.copy-field { display: grid; grid-template-columns: 1fr auto; }
.copy-field input,
.review-head select {
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.copy-field button {
  border: 1px solid var(--rule);
  border-inline-start: 0;
  background: var(--civic);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.mono-preview { margin: 10px 0 16px; overflow-wrap: anywhere; color: rgba(26, 31, 28, 0.58); font: 10px/1.4 ui-monospace, SFMono-Regular, monospace !important; }
.compact-steps { margin: 0; padding-inline-start: 19px; }
.compact-steps li { margin: 7px 0; font-size: 11px; line-height: 1.4; }
.metric-ledger { border-top: 1px solid var(--rule); }
.metric-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(44, 51, 48, 0.2); font-size: 11px; }
.metric-row strong { color: var(--civic); font: 600 22px/1 Fraunces, serif; }

.trade-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0 8px; }
.trade-form label { font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.trade-form select,
.faction-desk select { width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: 10px; }
.faction-pick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "select button";
  gap: 6px 8px;
  align-items: center;
  margin: 4px 0 8px;
}
.faction-pick-row .field-label { grid-area: label; margin: 0; }
.faction-pick-row select { grid-area: select; width: 100%; min-width: 0; margin: 0; }
.faction-pick-row > button { grid-area: button; width: auto; min-width: 88px; margin: 0; padding-inline: 14px; }
.trade-desk > button { margin-top: 7px; }
.trade-board { display: grid; gap: 7px; margin-top: 12px; }
.trade-offer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--rule); }
.trade-offer > div { min-width: 0; display: grid; gap: 2px; }
.trade-offer > div:nth-of-type(2) { text-align: right; }
.trade-offer span, .trade-offer small { color: var(--ink-soft); font: 8px/1.2 ui-monospace, monospace; }
.trade-offer strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.trade-offer > p { grid-column: 1 / -1; margin: 0; color: var(--civic); font: 8px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.trade-offer > button { width: auto; min-height: 30px; padding: 6px 8px; font-size: 8px; }
.trade-offer.matched-demo { opacity: 0.7; }
.faction-desk > button { margin: 8px 0 12px; }
.faction-desk .faction-pick-row > button { margin: 0; }
.leaderboard-list { border-top: 1px solid var(--rule); }
.leaderboard-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(44, 51, 48, 0.2); font-size: 10px; }
.leaderboard-list strong { color: var(--civic); font-size: 9px; }

.specials-shelf { margin: 34px 0 0; padding-top: 20px; border-top: 2px solid var(--rule); }
.specials-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 14px; }
.specials-head h2 { margin: 0; font-size: 32px; }
.specials-head > p { max-width: 390px; margin: 0; color: var(--ink-soft); font-size: 10px; }
.specials-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.special-set { min-width: 0; padding: 12px; border: 1px solid var(--rule); background: rgba(255, 253, 247, 0.34); }
.special-set > header { display: grid; grid-template-columns: 8px 1fr; gap: 9px; align-items: stretch; border-bottom: 1px solid var(--rule); padding-bottom: 9px; }
.special-set > header > span { display: grid; place-items: center; background: var(--foil); color: var(--ink); font: 700 9px/1 ui-monospace, monospace; writing-mode: vertical-rl; }
.special-set header p { margin: 0; color: var(--civic); font: 600 10px/1.2 "IBM Plex Sans Hebrew", sans-serif; }
.special-set header h3 { margin: 2px 0 0; font-size: 18px; }
.special-set > p { min-height: 4em; margin: 9px 0; color: var(--ink-soft); font-size: 9px; line-height: 1.4; }
.special-set > div { display: grid; gap: 7px; }
.special-set article { position: relative; min-height: 144px; padding: 9px 9px 9px 17px; border: 1px solid rgba(44, 51, 48, 0.28); background: var(--paper); overflow: hidden; }
.special-set article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--civic); }
.special-set article > span { display: block; color: var(--ink-soft); font: 8px/1 ui-monospace, monospace; }
.special-set article > strong { display: block; margin-top: 8px; font: 600 15px/1.1 "IBM Plex Sans Hebrew", sans-serif; }
.special-set blockquote { margin: 12px 0; font: 600 13px/1.3 "IBM Plex Sans Hebrew", sans-serif; }
.special-set article a { color: var(--civic); font-size: 8px; }

.studio-grid { grid-template-columns: 1.25fr 0.8fr 1.25fr; margin-bottom: 42px; }
.release-status { margin-top: 16px; padding: 10px 12px; border-left: 4px solid var(--danger-mute); background: rgba(138, 74, 58, 0.08); font-size: 11px; line-height: 1.45; }
.release-status.ready { border-color: var(--civic-bright); background: rgba(42, 122, 114, 0.08); }
.studio-debug-pull { direction: rtl; text-align: right; }
.studio-debug-rarity { display: grid; gap: 6px; margin: 10px 0 12px; padding: 8px 10px; border: 1px solid rgba(44, 51, 48, 0.22); }
.studio-debug-rarity legend { padding: 0 4px; font-weight: 600; }
.studio-debug-rarity label { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.studio-debug-card input { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid rgba(44, 51, 48, 0.32); background: var(--paper); color: inherit; font: inherit; }
.studio-debug-pull .primary-action { width: 100%; }
.debug-console { background: var(--civic); color: var(--paper); }
.debug-console::before { background: var(--paper); }
.debug-console code { background: rgba(244, 239, 228, 0.14); }
.debug-console .primary-action { margin-bottom: 9px; border-color: var(--paper); background: var(--paper); color: var(--civic); box-shadow: none; }
.debug-console .primary-action:hover:not(:disabled) { background: var(--paper-deep); }
.debug-console .secondary-action { width: 100%; border-color: var(--paper); color: var(--paper); }
.debug-console .work-kicker, .debug-console .work-note { color: rgba(244, 239, 228, 0.72); }
.editorial-sample blockquote { margin: 12px 0; font: 600 19px/1.25 Fraunces, serif; }
.status-chip { display: inline-block; padding: 4px 7px; border: 1px solid currentColor; color: var(--danger-mute); font-size: 8px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.reveal-lab {
  margin: 0 0 44px;
  padding: 22px;
  border: 1px solid var(--rule);
  background: rgba(255, 253, 247, 0.42);
}

.reveal-lab-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 12px;
}

.reveal-lab-head h2 { margin: 0 0 7px; font-size: clamp(28px, 4vw, 42px); }
.reveal-lab-head p:not(.work-kicker) { max-width: 660px; margin: 0; font-size: 12px; line-height: 1.5; }
.reveal-lab-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.reveal-lab-actions button { width: auto; min-height: 42px; padding: 9px 13px; }
.reveal-lab-actions .primary-action { box-shadow: none; }

.reveal-timing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.reveal-timing label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(44, 51, 48, 0.3);
  font-size: 9px;
  font-weight: 600;
}

.reveal-timing input {
  width: 58px;
  min-width: 0;
  margin-left: auto;
  padding: 4px 3px;
  border: 1px solid rgba(44, 51, 48, 0.4);
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
}

.naama-stage-label {
  margin: 0 0 14px;
  padding: 8px 10px;
  border-left: 5px solid var(--civic);
  background: var(--paper-deep);
  color: var(--civic);
  font: 600 10px/1.35 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.naama-source-label {
  margin: -6px 0 14px;
  color: rgba(26, 31, 28, 0.58);
  font-size: 9px;
  line-height: 1.4;
}

.naama-variants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: 12px;
}

.naama-concept {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(44, 51, 48, 0.28);
}

.studio-party-tabs {
  display: flex;
  gap: 7px;
  margin: 16px 0 10px;
  padding: 0 0 9px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.studio-party-tabs button {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 5px auto;
  grid-template-areas: "pip name" "pip count";
  column-gap: 8px;
  min-width: 112px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.studio-party-tabs button::before {
  content: "";
  grid-area: pip;
  width: 5px;
  height: 100%;
  background: var(--party-pip);
}

.studio-party-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.studio-party-tabs b { grid-area: name; font: 600 12px/1.2 "IBM Plex Sans Hebrew", sans-serif; }
.studio-party-tabs span { grid-area: count; opacity: 0.68; font: 500 8px/1.3 ui-monospace, monospace; }

.studio-member-bar {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(200px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px;
  background: var(--paper-deep);
}

.studio-member-bar label { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.studio-member-bar select { width: 100%; margin-top: 5px; padding: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.studio-member-bar p { margin: 0 0 5px; color: var(--ink-soft); font-size: 10px; }
.studio-reveal-actions { display: flex; gap: 7px; }
.studio-reveal-actions button { width: auto; min-height: 38px; padding: 8px 10px; }

.studio-card-heading {
  min-height: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.studio-quote-card.dirty { border-color: var(--foil); box-shadow: inset 0 0 0 2px rgba(196, 163, 90, 0.18); }
.studio-quote-card.dirty .studio-card-heading::after { content: "UNSAVED"; color: var(--review); font: 700 8px/1 ui-monospace, monospace; }
.studio-shared-card { width: 100%; }
.studio-shared-card .kalpi-card { width: 100%; }

.studio-portrait-missing {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--paper-deep);
  color: var(--civic);
  font: 600 120px/1 Fraunces, serif;
}

.blank-slot .concept-stage { border-style: dashed; }
.blank-slot .concept-quote { color: rgba(26, 31, 28, 0.42); font-style: italic; }

.studio-editor-fields {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.studio-editor-fields label {
  display: grid;
  gap: 4px;
  color: var(--civic);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-editor-fields input,
.studio-editor-fields textarea,
.studio-editor-fields select {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(44, 51, 48, 0.4);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 10px/1.35 "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  resize: vertical;
}

.studio-editor-fields details { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 7px 0; }
.studio-editor-fields details label { margin-top: 8px; }
.studio-editor-fields summary { cursor: pointer; color: var(--ink-soft); font-size: 9px; font-weight: 600; text-transform: uppercase; }

.studio-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.studio-card-actions button { width: auto; min-height: 34px; padding: 7px 9px; }
.studio-card-actions a { color: var(--civic); font-size: 9px; }

.studio-member-extras {
  margin: 18px 0 0;
  border-top: 2px solid var(--rule);
  padding-top: 15px;
}

.studio-extra-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 12px;
}

.studio-extra-head h3 { margin: 2px 0 0; font-size: 21px; }
.studio-extra-head > p { max-width: 470px; margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.studio-moment-list h4 { margin: 0 0 8px; color: var(--civic); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.studio-moment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.studio-moment-list h4 { grid-column: 1 / -1; }
.studio-moment-list article,
.studio-alternates article { padding: 11px; border: 1px solid var(--rule); background: rgba(255, 253, 247, 0.35); }
.studio-moment-list article > div { display: flex; justify-content: space-between; gap: 10px; }
.studio-moment-list article span { color: var(--ink-soft); font-size: 9px; }
.studio-moment-list article p { margin: 8px 0; font-size: 10px; line-height: 1.45; }
.studio-moment-list article a,
.studio-alternates a { color: var(--civic); font-size: 9px; }
.studio-alternates { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 10px; }
.studio-alternates summary { cursor: pointer; color: var(--civic); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.studio-alternates article { margin-top: 8px; }
.studio-alternates blockquote { margin: 0; font: 600 15px/1.35 "IBM Plex Sans Hebrew", sans-serif; }
.studio-alternates p { margin: 7px 0; color: var(--ink-soft); font-size: 9px; line-height: 1.45; }

.flavor-field {
  display: block;
  margin: 0 0 9px;
  color: var(--civic);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flavor-field input {
  width: 100%;
  margin-top: 5px;
  padding: 7px 8px;
  border: 1px solid rgba(44, 51, 48, 0.4);
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.concept-number {
  margin: 0 0 8px;
  color: var(--civic);
  font-size: 9px !important;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.concept-stage {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 2px solid var(--rule);
  border-radius: 13px;
  background: var(--paper);
  isolation: isolate;
}

.concept-quote,
.concept-party,
.concept-name,
.concept-portrait,
.concept-image-meta {
  position: absolute;
  opacity: 0;
  transition:
    opacity 430ms ease,
    transform 540ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.concept-quote {
  z-index: 4;
  inset: 18px 17px auto;
  margin: 0;
  font: 600 clamp(14px, 1.65vw, 20px)/1.25 "IBM Plex Sans Hebrew", sans-serif;
  transform: translateY(8px);
}

.concept-party {
  z-index: 4;
  top: 36%;
  left: 17px;
  margin: 0;
  gap: 6px;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: translateX(-8px);
}

.concept-party::before,
.mini-party::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pip);
}

.card-party-zone::before {
  content: "";
  flex: 0 0 2.4cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: var(--pip);
}

.concept-party b { color: var(--civic); }

.concept-name {
  z-index: 4;
  top: 43%;
  left: 17px;
  right: 17px;
  margin: 0;
  font: 600 clamp(20px, 2.3vw, 30px)/1 Fraunces, serif;
  letter-spacing: -0.03em;
  transform: translateX(-8px);
}

.concept-name span {
  display: block;
  margin-top: 5px;
  color: var(--civic);
  font: 600 12px/1.1 "IBM Plex Sans Hebrew", sans-serif;
}

.concept-image-meta {
  z-index: 5;
  top: 22px;
  right: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transform: translateY(-7px);
}

.concept-image-meta span,
.concept-image-meta strong {
  padding: 4px 6px;
  border: 1px solid rgba(244, 239, 228, 0.66);
  background: rgba(26, 31, 28, 0.76);
  color: var(--paper);
  font: 600 9px/1.1 "IBM Plex Sans Hebrew", sans-serif;
  letter-spacing: 0.04em;
}

.concept-image-meta strong {
  border-color: var(--foil);
  color: var(--foil);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.concept-portrait {
  z-index: 1;
  inset: 53% 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(44, 51, 48, 0.24);
  transform: translateY(32px) scale(0.97);
}

.concept-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 22%; }
.concept-note { min-height: 3em; margin: 9px 1px 0; color: rgba(26, 31, 28, 0.65); font-size: 9px !important; line-height: 1.45 !important; }

.concept-card .concept-portrait {
  inset: 12px 12px calc(28% + 8px);
  border-radius: 8px;
}

.concept-card .concept-name {
  top: auto;
  bottom: 20%;
  left: 12px;
  right: 12px;
  height: 8%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: var(--civic);
  color: var(--paper);
  font: 600 clamp(18px, 2.1vw, 25px)/1 "IBM Plex Sans Hebrew", sans-serif;
}

.concept-card .concept-name span {
  display: inline;
  margin: 0;
  color: rgba(244, 239, 228, 0.75);
  font-size: 10px;
}

.concept-card .concept-party {
  top: auto;
  bottom: 15%;
  left: 17px;
  right: 17px;
  height: 5%;
  display: flex;
  align-items: center;
}

.concept-card .concept-quote {
  inset: auto 17px 0;
  height: 15%;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 5px 0 4px;
  border-top: 1px solid rgba(44, 51, 48, 0.3);
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.08;
}

.naama-variants:is([data-stage="1"], [data-stage="2"], [data-stage="3"], [data-stage="4"]) .concept-quote,
.naama-variants:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .concept-party,
.naama-variants:is([data-stage="3"], [data-stage="4"]) .concept-name,
.naama-variants[data-stage="4"] .concept-portrait,
.naama-variants[data-stage="4"] .concept-image-meta {
  opacity: 1;
  transform: none;
}

.concept-overlay {
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(44, 51, 48, 0.18) 50%, transparent 50.3%);
}

.concept-overlay .concept-stage { overflow: visible; border: 0; background: transparent; }
.concept-overlay .concept-portrait {
  inset: 2% -2% 0 15%;
  border: 0;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
}
.concept-overlay .concept-portrait img { object-position: 50% 18%; }
.concept-overlay .concept-quote {
  inset: 7% 4% auto;
  padding: 11px 12px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(244, 239, 228, 0.9);
}
.concept-overlay .concept-party { top: 52%; left: 4%; padding: 6px 9px; background: var(--paper); }
.concept-overlay .concept-name { top: 62%; left: 4%; padding: 8px 10px; background: var(--civic); color: var(--paper); }
.concept-overlay .concept-name span { color: rgba(244, 239, 228, 0.72); }

.concept-walkout .concept-stage {
  border-color: var(--foil);
  background: var(--paper);
  color: var(--paper);
}
.concept-walkout .concept-stage::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28%;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(196, 163, 90, 0.1) 50%, transparent 50.3%),
    #101512;
}
.concept-walkout .concept-quote {
  inset: auto 7% 0;
  height: 15%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5px 0 4px;
  border-top: 1px solid rgba(196, 163, 90, 0.52);
  color: var(--paper);
  font-size: clamp(11px, 1.2vw, 14px);
  line-height: 1.18;
  text-align: center;
}
.concept-walkout .concept-party {
  top: auto;
  right: 7%;
  bottom: 15%;
  left: 7%;
  height: 5%;
  display: flex;
  align-items: center;
  color: var(--paper);
}
.concept-walkout .concept-party b { color: var(--foil); }
.concept-walkout .concept-name {
  top: auto;
  bottom: 20%;
  left: 7%;
  right: 7%;
  height: 8%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-left: 3px solid var(--foil);
  background: rgba(16, 21, 18, 0.9);
  color: var(--paper);
  font-size: clamp(17px, 2vw, 24px);
}
.concept-walkout .concept-name span {
  display: inline;
  margin: 0;
  color: var(--foil);
  font-size: 10px;
}
.concept-walkout .concept-portrait {
  inset: 0 0 28%;
  border: 0;
  border-radius: 0;
  opacity: 0;
}
.concept-walkout .concept-portrait img {
  object-position: 50% 20%;
  filter: saturate(0.72) contrast(1.08);
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 86%, transparent 100%);
}

.review-head { align-items: center; padding-bottom: 16px; }
.review-head h2 { margin-bottom: 0; font-size: 30px; }
.review-head .field-label { display: flex; align-items: center; gap: 9px; margin: 0; }
.review-head select { min-height: 38px; }
.card-review-list { border-top: 1px solid var(--rule); }
.review-row {
  display: grid;
  grid-template-columns: 94px minmax(180px, 1fr) minmax(190px, 1.25fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 82px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(44, 51, 48, 0.24);
}

.review-code { color: var(--civic); font: 600 11px/1.3 ui-monospace, SFMono-Regular, monospace; }
.review-title strong { display: block; font-family: Fraunces, serif; font-size: 17px; }
.review-title small, .review-source { font-size: 10px; line-height: 1.4; }
.review-source a { color: var(--civic); text-underline-offset: 3px; }
.review-actions { display: flex; gap: 6px; }
.review-actions button { padding: 7px 9px; border: 1px solid var(--civic); background: transparent; color: var(--civic); font-size: 10px; font-weight: 600; cursor: pointer; }

.card-dialog {
  position: relative;
  width: min(430px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 52px 22px 20px;
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.card-dialog::backdrop { background: rgba(26, 31, 28, 0.72); backdrop-filter: blur(5px); }
.card-dialog .kalpi-card { width: min(var(--card-width), 100%); margin: 0 auto; }

.dialog-close:focus,
.dialog-close:focus-visible {
  outline: none;
  box-shadow: none;
}
.dialog-close {
  position: absolute;
  top: 9px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}
#advocacy-dialog .eyebrow {
  padding-inline-end: 36px;
}
#advocacy-dialog .dialog-close,
.policy-dialog .dialog-close {
  top: 4px;
  right: 8px;
  left: auto;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}

.dialog-card-stage,
.card-dialog #dialog-card {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  place-items: center;
}
.dialog-meta-row {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 10px;
}
.dialog-meta-row .dialog-source,
.dialog-meta-row .report-link {
  margin: 0;
  min-height: 44px;
}
.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  direction: ltr;
  gap: 8px;
  margin-top: 16px;
}

.dialog-actions .full { grid-column: 1 / -1; }
.share-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--rule) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--civic);
  font: 600 13px/1 "IBM Plex Sans Hebrew", sans-serif;
  cursor: pointer;
}
.share-icon-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.share-icon-button:disabled,
.dialog-actions .full:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.share-icon-button:focus-visible,
.dialog-actions .full:focus-visible { outline: 2px solid var(--civic); outline-offset: 2px; }
.share-sheet {
  width: min(390px, calc(100% - 24px));
  padding-top: 36px;
}
.share-sheet img {
  display: block;
  width: 100%;
  max-height: min(58dvh, 520px);
  margin: 12px 0 10px;
  object-fit: contain;
  border-radius: 12px;
  background: #111;
}
.share-sheet-caption {
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font: 500 13px/1.45 "IBM Plex Sans Hebrew", sans-serif;
  white-space: pre-wrap;
}
.share-sheet-caption [dir="ltr"] {
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
}
.share-sheet-actions {
  grid-template-columns: 1fr 1fr;
}

.policy-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 42px 30px 28px;
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}


#recycle-tip {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 16px);
  overflow: auto;
}
#recycle-tip #recycle-tip-copy {
  margin: 0 0 16px;
  font: 400 13px/1.5 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
#recycle-tip .recycle-tip-card {
  position: relative;
  width: 100%;
  margin: 4px auto 14px;
  padding-inline: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
#recycle-tip .recycle-tip-card .kalpi-card {
  position: relative;
  width: min(220px, 100%, calc((100dvh - 300px) * 63 / 96));
  height: auto;
}
#recycle-tip .card-image-zone { overflow: visible; }
#recycle-tip .card-image-meta { inset: 12px 12px auto; }
#recycle-tip .card-copies-stack > .card-recycle { margin: 8px; }

#recycle-tip .card-image-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(26, 31, 28, 0.42);
  pointer-events: none;
}
#recycle-tip .card-identity-stack { opacity: 0.5; }
#recycle-tip .card-image-meta { z-index: 4; }
#recycle-tip .card-recycle.recycle-tip-hot {
  position: relative;
  z-index: 5;
  background: var(--pack-gold, #c4a35a);
  color: #1a1f1c;
  border-color: #fff8e6;
  outline: 2px solid #fff8e6;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(196, 163, 90, 0.55), 0 0 14px 3px rgba(196, 163, 90, 0.95);
}
#recycle-tip .recycle-tip-arrow {
  position: absolute;
  z-index: 4;
  width: 22px;
  height: 2px;
  background: var(--pack-gold, #c4a35a);
  transform: translateY(-50%);
  pointer-events: none;
}
#recycle-tip .recycle-tip-arrow::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  border: 5px solid transparent;
  border-right-color: var(--pack-gold, #c4a35a);
  transform: translate(-100%, -50%);
}
.policy-dialog::backdrop { background: rgba(26, 31, 28, 0.72); backdrop-filter: blur(5px); }
.wait-dialog {
  width: min(280px, calc(100% - 48px));
  padding: 22px 20px;
  text-align: center;
}
.wait-dialog p {
  margin: 0;
  font: 600 16px/1.4 "IBM Plex Sans Hebrew", sans-serif;
}
.wait-dialog p::before,
#home-settle-hint:not([hidden])::before,
.empty-note.is-loading::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-inline-end: 8px;
  vertical-align: -4px;
  background: url("/antique-wait.png?v=card-surface-157") 0 0 / 216px 18px no-repeat;
  animation: antique-press 1.2s steps(12) infinite;
}
@keyframes antique-press {
  from { background-position: 0 0; }
  to { background-position: -216px 0; }
}
.trade-notice-dialog {
  width: min(420px, calc(100% - 24px));
}
.trade-notice-dialog .eyebrow {
  margin: 0 0 8px;
  color: var(--civic);
}
.trade-notice-dialog #trade-notice-copy {
  margin: 0 0 16px;
  font: 500 15px/1.5 "IBM Plex Sans Hebrew", sans-serif;
}
.trade-notice-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0 0 18px;
}
.trade-notice-cards .trade-side {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}
.trade-notice-cards .trade-side small {
  color: var(--civic);
  font: 700 11px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
.trade-notice-cards > b {
  align-self: center;
  color: var(--civic);
  font-size: 18px;
  text-align: center;
}
.trade-notice-cards .trade-side[hidden] {
  display: none;
}
.trade-notice-cards .trade-thumb,
.trade-notice-cards .trade-notice-stack {
  margin-top: 0;
  width: 100%;
  pointer-events: none;
  cursor: default;
}
.trade-notice-cards .trade-notice-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: 4px;
}
.trade-notice-cards .trade-notice-stack .trade-thumb {
  flex: 0 1 72px;
  min-width: 0;
  width: calc((100% - 4px) / 2);
  max-width: 72px;
}
.trade-notice-cards .trade-notice-stack[data-count="3"] .trade-thumb:last-child {
  flex-basis: 72px;
}
.trade-notice-cards .trade-thumb-frame {
  display: block;
  width: min(110px, 100%);
  height: auto;
  aspect-ratio: 63 / 96;
}
.trade-notice-cards .trade-notice-stack .trade-thumb-frame {
  width: 100%;
}
.trade-notice-cards .trade-thumb-frame .binder-shared-card,
.trade-notice-cards .trade-thumb-frame .kalpi-card {
  width: 100%;
  height: 100%;
}
@media (max-width: 360px) {
  .trade-notice-cards {
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  }
  .trade-notice-cards .trade-notice-stack {
    gap: 3px;
  }
  .trade-notice-cards .trade-notice-stack .trade-thumb {
    width: calc((100% - 3px) / 2);
    max-width: 64px;
  }
  .trade-notice-cards .trade-thumb-frame {
    width: min(96px, 100%);
  }
}

.heard-you-dialog { width: min(460px, calc(100% - 24px)); }
.heard-you-list {
  margin: 4px 0 18px;
  padding-inline-start: 1.25em;
}
.heard-you-list li + li { margin-top: 8px; }
.heard-you-invite {
  margin: 4px 0 14px;
  padding: 10px 12px;
  border: 1px solid #c99a3a;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(244, 231, 184, 0.55), rgba(201, 154, 58, 0.18));
  color: #8a6418;
  font-weight: 800;
  text-align: center;
}
.heard-you-invite[hidden] { display: none; }
.heard-you-invite p { margin: 0; }
.heard-you-invite-link {
  display: block;
  width: 100%;
  margin: 6px 0;
  padding: 6px 8px;
  border: 1px dashed #c99a3a;
  border-radius: 8px;
  background: rgba(255, 250, 232, 0.9);
  color: #6f4f10;
  font: 800 13px/1.3 system-ui, sans-serif;
  overflow-wrap: anywhere;
  cursor: pointer;
}
/* Same gray 10px face as .today-faction-hint (the no-party "(לחצו על האוואטר)"); drop the eyebrow tracking. */
#heard-you-dialog .eyebrow .today-faction-hint { letter-spacing: normal; }
.policy-dialog h2 { margin-bottom: 10px; font-size: 30px; }
#level-dialog-title { line-height: 1.25; text-wrap: pretty; }
#level-dialog-title .level-rank-name { white-space: nowrap; }
.level-dialog-cheer {
  margin: 0 0 14px;
  color: var(--civic);
  font: 600 16px/1.35 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
.policy-dialog h3 { margin: 24px 0 8px; font-size: 18px; }
.policy-dialog p, .policy-dialog li { font-size: 13px; line-height: 1.5; }
.policy-dialog ol { padding-inline-start: 20px; }
.policy-lock { padding: 12px; border-inline-start: 4px solid var(--foil); background: var(--paper-deep); }
.profile-name-label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; }
#profile-name-input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 16px/1.2 "IBM Plex Sans Hebrew", sans-serif; text-align: right; }
.profile-error { min-height: 1.5em; margin: 6px 0 10px; color: var(--danger-mute); }
#app #profile-sections.profile-sections {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: stretch;
  gap: 6px;
  margin-top: 28px;
  margin-bottom: 16px;
}
#app #profile-sections.profile-sections button {
  width: 100%;
  min-height: 40px;
  padding: 8px 4px;
  font-size: clamp(11px, 2.7vw, 13px);
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.profile-panel[hidden] { display: none; }
.profile-faction {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.profile-faction h3 { margin: 0 0 8px; }
.profile-faction p { margin: 0 0 10px; }
.profile-faction .faction-pick-row { margin-top: 8px; }
.profile-faction .faction-pick-row select {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
.profile-recovery,
.profile-binder-share {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.profile-recovery h3,
.profile-binder-share h3 { margin: 0 0 8px; }
.profile-recovery-note {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 12px;
}
.profile-recovery-note strong {
  color: var(--ink);
  font-weight: 700;
}
.profile-recovery-note .tip-star {
  color: #a97c19;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin-inline-start: 2px;
  vertical-align: -2px;
}
.profile-recovery-row { margin-bottom: 14px; }
.profile-recovery-row input {
  direction: ltr;
  text-align: left;
  font: 500 13px/1.3 ui-monospace, SFMono-Regular, monospace;
}
.profile-referrals-drop {
  margin-top: 2px;
}
.profile-referrals-drop[hidden] { display: none; }
.profile-referrals-drop summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.profile-referrals {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  max-height: 220px;
  overflow: auto;
}
.profile-referral {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
.profile-referral small {
  color: var(--ink-soft);
  font-size: 12px;
}
.profile-referral button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--civic);
  border-radius: 8px;
  background: transparent;
  color: var(--civic);
  font: 600 12px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  cursor: pointer;
}
.profile-referral button:disabled {
  cursor: default;
  opacity: 0.46;
}
.no-faction-note {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
}
.no-faction-note strong,
#challenge-party-hint {
  display: block;
}
.today-docket-row.is-no-faction > strong,
.today-docket-row.is-no-faction > small {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.today-faction-hint {
  color: rgba(26, 31, 28, 0.62);
  font: 400 10px/1.3 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
.community-nav {
  display: grid;
  gap: 4px;
  margin: 2px 0 6px;
}
.community-sections,
#community-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
}
#community-sections button {
  min-height: 34px;
  white-space: normal;
  line-height: 1.15;
}
#community-tabs {
  display: grid;
  gap: 4px;
  margin: 0;
  overflow: visible;
}
#community-tabs[data-community-section="market"] {
  grid-template-columns: 1fr 1fr;
}
#community-tabs[data-community-section="race"],
#community-tabs[data-community-section="party"] {
  grid-template-columns: 1fr 1fr;
}
#community-tabs button[hidden] { display: none; }
.league-desk .field-label { margin-top: 8px; }
.league-action-row { margin-bottom: 8px; }
#league-name-input {
  text-align: right;
  font: 500 16px/1.2 "IBM Plex Sans Hebrew", sans-serif;
}
#league-join-input {
  direction: ltr;
  text-align: left;
  font: 500 13px/1.3 ui-monospace, SFMono-Regular, monospace;
}
.growth-grid > .work-card.league-desk {
  overflow: auto;
}
.league-desk.has-rooms {
  display: flex;
  flex-direction: column;
}
.league-desk.has-rooms #league-rooms { order: -1; }
.league-desk.has-rooms > .work-kicker,
.league-desk.has-rooms > h2,
.league-desk.has-rooms > .work-note { display: none; }
.league-setup { display: grid; gap: 0; }
.league-setup summary {
  cursor: pointer;
  font: 600 13px/1.3 "IBM Plex Sans Hebrew", sans-serif;
  list-style: none;
}
.league-setup summary::-webkit-details-marker { display: none; }
.league-desk:not(.has-rooms) .league-setup summary { display: none; }
.league-desk.has-rooms .league-setup {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(44, 51, 48, 0.16);
}
/* League room: a framed parchment slip (work-card paper, gold tab + trade-fieldset frame), teal/gold ink. */
.league-rooms { display: grid; gap: 18px; margin-top: 8px; }
.league-room {
  position: relative;
  min-width: 0;
  padding: 16px 16px 18px;
  border: 1px solid color-mix(in srgb, var(--foil) 62%, var(--rule));
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.78), rgba(255, 253, 247, 0.5)),
    var(--paper);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--paper) 88%, transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--foil) 34%, transparent),
    0 8px 22px rgba(60, 48, 38, 0.1);
  color: var(--ink);
}
.league-room::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 18px;
  width: 54px;
  height: 5px;
  border-radius: 0 0 2px 2px;
  background: var(--foil);
}
/* Header row: season + name at the start (right), the invite QR at the end (left). */
.league-room-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  margin: 0 0 12px;
  direction: rtl;
}
.league-room-title { min-width: 0; }
/* Names are capped at 20 characters server-side; older, longer names wrap to two lines at most. */
.league-room h4 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--civic);
  font: 700 21px/1.2 "Noto Serif Hebrew", Fraunces, serif;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Code row (RTL): the stamped invite code on the right is the copy button (it copies the join
   link); «עזיבת ליגה» sits on the left, same secondary style as the old copy button, red text. */
.league-room-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 0;
  border-block: 1px dashed color-mix(in srgb, var(--rule) 26%, transparent);
  direction: rtl;
}
.league-code-stamp {
  display: inline-grid;
  justify-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 2px 2px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--civic);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.league-code-stamp:focus-visible { outline: 2px solid var(--civic); outline-offset: 3px; }
/* The invite code as a stamped ballot ticket number. */
.league-code-stamp b {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px 6px;
  border: 2px solid var(--civic);
  border-radius: 4px;
  background: color-mix(in srgb, var(--civic) 6%, rgba(255, 253, 247, 0.7));
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px color-mix(in srgb, var(--civic) 45%, transparent);
  color: var(--civic);
  font: 700 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em;
  transform: rotate(-1.5deg);
  transition: background 160ms ease, transform 160ms ease;
}
.league-code-stamp b::before {
  content: "№";
  color: var(--foil);
  font: 600 13px/1 "Noto Serif Hebrew", serif;
  letter-spacing: 0;
}
.league-code-stamp:hover b { background: color-mix(in srgb, var(--civic) 11%, rgba(255, 253, 247, 0.7)); }
.league-code-stamp:active b { transform: rotate(-1.5deg) scale(0.97); }
.league-code-stamp small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font: 600 11px/1.2 "IBM Plex Sans Hebrew", sans-serif;
  text-decoration: underline dotted color-mix(in srgb, var(--foil) 80%, transparent);
  text-underline-offset: 3px;
}
.league-code-stamp small svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--civic);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.league-code-stamp.copied small { color: var(--civic); text-decoration: none; }
/* QR on a light paper inset with a thin gold frame. */
/* QR on a light paper inset with a thin gold frame, sized to sit in the header row. The SVG
   carries its own 4-module quiet zone, so the inset padding stays small. */
.league-qr {
  width: 80px;
  margin: 0;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--foil) 60%, transparent);
  border-radius: 6px;
  background: #fffdf7;
  box-shadow: inset 0 0 0 2px #fffdf7, inset 0 0 0 3px color-mix(in srgb, var(--foil) 30%, transparent), 0 3px 10px rgba(60, 48, 38, 0.1);
}
.league-qr:empty { display: none; }
.league-qr svg { display: block; width: 100%; height: auto; }
.league-board { margin: 0; padding: 0; list-style: none; }
.league-board li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 8px;
  padding-inline-start: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 14%, transparent);
  font-size: 14px;
  line-height: 1.3;
}
.league-board li:last-child { border-bottom: 0; }
.league-board li > span:not(.collector-face) { min-width: 0; overflow-wrap: anywhere; }
.league-board li strong {
  color: var(--civic);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.league-board li.current-player {
  border-radius: 8px;
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--civic) 9%, transparent);
  box-shadow: inset -3px 0 0 var(--foil);
  color: var(--civic);
  font-weight: 700;
}
.league-board li.current-player strong { font-weight: 700; }
/* Leave: the old copy button's secondary style (44px, 12px radius, paper fill), red text; then an
   inline confirm that takes the full width of the code row (no dialog). */
.league-leave,
.league-leave-confirm button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  color: #a3362a;
  font: 600 13px/1 "IBM Plex Sans Hebrew", sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.league-leave:hover { border-color: #a3362a; background: color-mix(in srgb, #a3362a 6%, var(--paper)); }
.league-leave-confirm { display: grid; gap: 8px; flex: 1 1 100%; width: 100%; }
.league-leave-confirm p { margin: 0; font: 500 13px/1.4 "IBM Plex Sans Hebrew", sans-serif; }
.league-leave-confirm div { display: flex; flex-wrap: wrap; gap: 8px; }
.league-leave-confirm .league-leave-yes {
  border-color: #a3362a;
  background: #a3362a;
  color: var(--paper);
}
.league-leave-confirm [data-leave-league-cancel] {
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
  color: var(--ink);
}
/* First visit with no cached room: a quiet skeleton instead of the "no league" setup. */
.league-skeleton {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--foil) 40%, var(--rule));
  border-radius: 10px;
}
.league-skeleton span {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  animation: league-skeleton-pulse 1.2s ease-in-out infinite alternate;
}
.league-skeleton span:first-child { width: 55%; height: 20px; }
.league-skeleton span:last-child { width: 80%; }
@keyframes league-skeleton-pulse { to { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .league-skeleton span { animation: none; } }
.league-board .report-link.inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-block: -8px;
  margin-inline-start: 2px;
  padding: 0 4px;
  vertical-align: middle;
  font-size: 11px;
}
@media (min-width: 700px) {
  .league-qr { width: 96px; }
}
.report-link.inline {
  display: inline;
  margin: 0;
  padding: 0;
  margin-inline-start: 6px;
  font-size: 10px;
}

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(var(--nav-clearance) + 10px);
  display: grid;
  justify-items: center;
  gap: 2px;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: 180ms ease;
}
.toast-title {
  font: 700 13px/1.25 "IBM Plex Sans Hebrew", sans-serif;
}
.toast-copy {
  font: 500 12px/1.4 "IBM Plex Sans Hebrew", sans-serif;
  white-space: pre-line;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.in-dialog {
  position: absolute;
  z-index: 8;
  bottom: 14px;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 8px 12px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .app-shell { padding: 0 16px 100px; }
  .masthead { min-height: 58px; }
  .masthead-meta { max-width: 70%; gap: 5px; font-size: 10px; }
  .player-name { max-width: 168px; }
  .advocacy-bar { align-items: flex-start; }
  .advocacy-bar span { max-width: 60%; }
  .view { min-height: calc(100dvh - 150px); padding-top: 28px; }
  .home-grid { min-height: auto; grid-template-columns: 1fr; gap: 18px; }
  .home-copy { text-align: center; }
  .home-title-row { justify-content: center; }
  .home-copy .lede, .collection-line { margin-inline: auto; }
  .pack-plinth { min-height: 360px; }
  .pack-wrapper { width: 208px; }
  .pack-shadow { bottom: 32px; width: 190px; }
  .pack-title { font-size: 43px; }
  .pack-title b { font-size: 24px; }
  .pack-subtitle { bottom: 64px; font-size: 9px; }
  .pack-rule, .pack-date { bottom: 18px; font-size: 7px; }
  .home-grid + .action-dock { margin-top: 18px; }
  .pack-header h1 { font-size: 34px; }
  .rip-stage { min-height: 450px; }
  .walkout { min-height: 620px; padding: 0; }
  .fan { height: 330px; transform: scale(0.84); }
  .binder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .achievement-shelf { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: 1fr; }
  .binder-head { align-items: flex-end; }
  .binder-head .lede { margin-bottom: 0; font-size: 14px; }
  .bottom-nav { width: calc(100% - 24px); bottom: max(10px, env(safe-area-inset-bottom)); }
  .bottom-nav button { gap: 4px; padding: 0 4px; font-size: 10px; }
  .workspace-head { display: block; }
  .workspace-head .lede { margin-bottom: 12px; }
  .text-link { display: inline-block; margin-bottom: 22px; }
  .growth-grid, .studio-grid { grid-template-columns: 1fr; }
  .specials-head { display: block; }
  .specials-head > p { margin-top: 8px; }
  .specials-grid { grid-template-columns: 1fr; }
  .reveal-lab { padding: 16px 12px; }
  .reveal-lab-head { display: block; }
  .reveal-lab-actions { margin: 14px 0; }
  .reveal-lab-actions button { flex: 1; }
  .studio-member-bar { grid-template-columns: 1fr; }
  .studio-reveal-actions button { flex: 1; }
  .studio-extra-head { display: block; }
  .studio-extra-head > p { margin-top: 8px; }
  .studio-moment-list { grid-template-columns: 1fr; }
  .reveal-timing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .naama-variants { grid-template-columns: 1fr; }
  .concept-stage { width: min(100%, 350px); margin: 0 auto; }
  .review-head { align-items: flex-end; }
  .review-row { grid-template-columns: 68px 1fr auto; gap: 10px; }
  .review-source { grid-column: 2 / -1; }
  .review-actions { grid-column: 3; grid-row: 1 / 2; }
  .dialog-actions { grid-template-columns: 1fr 1fr; }
}

@media (max-height: 760px) and (max-width: 760px) {
  .pack-plinth { min-height: 300px; }
  .pack-wrapper { width: 172px; }
  .rip-stage { min-height: 390px; }
  .hold-meter { width: var(--card-width); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kalpi-card.holo::before,
  .kalpi-card.holo::after { display: none; }
}

/* Player-facing Hebrew PoC: quiet paper, one collectible signature. */
body { background: var(--paper); direction: rtl; }
.paper-noise { opacity: 0.05; }
.app-shell { position: relative; isolation: isolate; z-index: 1; max-width: 820px; }
/* .toast stays fixed: as a relative grid child it took an implicit 20px row under #main, a second
   bottom reserve on top of --nav-clearance on every view. */
.app-shell > :not(.site-card-peeks):not(.klafi-tips):not(.top-nav-row):not(.numbered-tip):not(.toast) { position: relative; z-index: 1; }
h1, h2, h3 { font-family: "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif; }
h1 { font-size: clamp(32px, 7vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
.wordmark b { color: var(--ink); font-size: 24px; }
.view { padding-top: 28px; }
.home-grid { min-height: 0; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; }
.home-copy .lede { max-width: 24em; }
.pack-plinth { min-height: 430px; }
.pack-wrapper { width: 230px; box-shadow: none; }
.eyebrow { letter-spacing: 0.06em; text-transform: none; }
.advocacy-bar { color: rgba(26, 31, 28, 0.62); }
.advocacy-bar button { color: inherit; }

.level-strip {
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(0, 1fr);
  grid-template-areas: "identity progress";
  align-items: center;
  gap: 14px;
  min-height: 88px;
  overflow: visible;
  border-bottom: 1px solid rgba(44, 51, 48, 0.2);
  font-size: 14px;
  direction: rtl;
}
.level-identity { grid-area: identity; min-width: 0; display: grid; justify-items: center; text-align: center; direction: rtl; line-height: 1.15; gap: 4px; overflow: visible; padding-top: 8px; }
.level-identity small { color: rgba(26, 31, 28, 0.58); font-size: 11px; white-space: nowrap; }
.level-identity strong { margin-top: 0; font-size: 18px; }
.level-identity > span { margin-top: 0; color: var(--civic); font-size: 13px; }
.level-progress-block { grid-area: progress; min-width: 0; display: grid; gap: 6px; direction: rtl; }
.level-progress-block small,
#level-next { color: rgba(26, 31, 28, 0.58); font-size: 11px; line-height: 1.25; text-align: start; overflow-wrap: anywhere; }
.level-pack-icon { display: none; }
.level-reward-pack { display: block; width: 92px; height: auto; margin: 8px auto 16px; }
.level-track { position: relative; height: 21px; overflow: hidden; border-radius: 5px; background: var(--paper-deep); }
.level-track span { position: absolute; inset-block: 0; right: 0; width: 0; background: rgba(31, 79, 74, 0.48); transition: width 400ms ease; }
.level-track b { position: absolute; inset: 0; display: grid; place-items: center; direction: ltr; font-size: 13px; line-height: 1; }

.app-shell.home-active .level-strip {
  min-height: 132px;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  gap: 18px;
  border-bottom-width: 2px;
}
.app-shell.home-active .level-identity small { font-size: 13px; }
.app-shell.home-active .level-identity strong { font-size: 26px; }
.app-shell.home-active .level-identity > span { font-size: 18px; }
.app-shell.home-active .level-track { height: 26px; }
.app-shell.home-active .level-track b { font-size: 14px; }
.app-shell.home-active .level-progress-block small { font-size: 14px; }

.site-card-peeks {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.site-leaf {
  position: absolute;
  top: -42vh;
  left: clamp(72px, var(--leaf-x, 10%), calc(100% - var(--leaf-w, 120px) - 72px));
  width: var(--leaf-w, 120px);
  height: auto;
  opacity: 0.08;
  filter: saturate(0.7);
  pointer-events: none;
  animation: leaf-fall var(--leaf-dur, 36s) linear var(--leaf-delay, 0s) infinite;
}
.site-card-peek {
  aspect-ratio: 63 / 96;
  overflow: hidden;
  border-radius: 12px;
}
.site-card-peek.is-blank {
  border: 1px solid rgba(17, 17, 17, 0.45);
  background: #141414;
}
.site-ballot {
  display: block;
  aspect-ratio: 2 / 3;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0.08;
  border: 1px solid rgba(17, 17, 17, 0.38);
  border-radius: calc(var(--leaf-w, 48px) * 2 / 21);
  background: transparent;
}
.site-ballot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ead9b4 url("/design-assets/ballot-paper.png") center / cover;
  opacity: 1;
}
.site-ballot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8% 6% 9%;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
  opacity: 1;
}
.site-card-peek .kalpi-card { width: 100%; height: 100%; box-shadow: none; }
.site-card-peek .new-stamp,
.site-card-peek .finish-stamp { display: none; }
.pack-plinth .pack-shadow { z-index: 1; }
.pack-plinth > .pack-wrapper { z-index: 2; }
@keyframes leaf-fall {
  0% { transform: translate3d(0, 0, 0) rotate(var(--leaf-rot, -8deg)); }
  55% { transform: translate3d(var(--leaf-drift, 24px), 78vh, 0) rotate(calc(var(--leaf-rot, -8deg) + var(--leaf-sway, 16deg))); }
  100% { transform: translate3d(calc(var(--leaf-drift, 24px) * -0.35), 168vh, 0) rotate(var(--leaf-rot, -8deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .site-leaf {
    animation: none !important;
    top: var(--leaf-rest, 18%);
    transform: rotate(var(--leaf-rot, -8deg));
  }
}
#app[data-leaves="still"] .site-card-peeks { display: none; }
#app:has(#growth-view.view.active) .site-card-peeks { display: none; }
#app[data-leaves="fall"] .site-leaf {
  top: -42vh;
  animation: leaf-fall var(--leaf-dur, 36s) linear var(--leaf-delay, 0s) infinite !important;
}
#app[data-leaves="fall"] .leaf-arrow {
  animation: leaf-arrow-fall 1.15s ease-in infinite !important;
}

.today-docket {
  width: min(620px, 100%);
  margin: 48px auto 20px;
}
.today-docket > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rule);
}
.today-docket > header p,
.today-docket > header h2 { margin: 0; }
.today-docket > header h2 { font-size: 27px; }
.today-docket-list { display: grid; }
.today-docket-row {
  min-height: 76px;
  display: grid;
  grid-template-columns: 48px 76px minmax(0, 1fr) 20px;
  grid-template-areas:
    "visual label title arrow"
    "visual . meta arrow";
  align-items: center;
  gap: 2px 12px;
  padding: 11px 4px;
  border: 0;
  border-bottom: 1px solid rgba(44, 51, 48, 0.22);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
}
.today-docket-row:hover { background: rgba(31, 79, 74, 0.05); }
.today-docket-row:focus-visible { outline: 3px solid var(--civic); outline-offset: 2px; }
.today-docket-visual {
  grid-area: visual;
  position: relative;
  width: 44px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(44, 51, 48, 0.28);
  border-radius: 7px;
  background: var(--paper-deep);
}
.today-docket-visual img,
.today-docket-visual .mini-art { width: 100%; height: 100%; object-fit: cover; background: var(--paper-deep) center / cover no-repeat; }
.today-docket-visual .mini-art.placeholder { display: grid; place-items: center; }
.today-docket-visual .mini-art.placeholder::before {
  content: attr(data-mark);
  color: var(--pip, var(--civic));
  font: 600 17px/1 "IBM Plex Sans Hebrew", sans-serif;
}
.today-docket-visual.event-visual { border: 0; background: transparent; }
.today-docket-visual.event-visual img { object-fit: contain; filter: drop-shadow(0 4px 5px rgba(26, 31, 28, 0.14)); }
.today-docket-label { grid-area: label; color: var(--civic); font-size: 10px; font-weight: 600; }
.today-docket-row > strong { grid-area: title; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.today-docket-row > small { grid-area: meta; color: rgba(26, 31, 28, 0.62); font-size: 10px; }
.today-docket-row > b { grid-area: arrow; font-size: 16px; text-align: center; }

.debug-pack-action {
  margin-top: 7px;
  border: 0;
  background: transparent;
  color: rgba(26, 31, 28, 0.58);
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.debug-pack-action:disabled { opacity: 0.45; cursor: wait; }

.walkout { min-height: 610px; padding: 0; }
.walkout-content { gap: 10px; }
.walkout-receipt {
  width: min(330px, calc(100vw - 42px));
  display: flex;
  justify-content: space-between;
  opacity: 0;
  color: rgba(26, 31, 28, 0.62);
  font-size: 10px;
  transition: opacity 220ms ease;
}
.walkout-receipt.visible { opacity: 1; }
.walkout-receipt a { color: var(--civic); }

.shared-showcase { text-align: center; }
.shared-showcase h1 { margin-bottom: 20px; font-size: clamp(28px, 6vw, 44px); }
.shared-card { width: min(330px, calc(100vw - 42px)); margin: 0 auto; }
.shared-card .kalpi-card { width: 100%; }
.shared-notice { max-width: 430px; margin: 16px auto 0; color: rgba(26, 31, 28, 0.68); font-size: 12px; line-height: 1.5; }
.shared-showcase .primary-action { display: block; margin: 20px auto 0; }

.studio-share-binder {
  margin: 8px 0 22px;
  padding: 22px 22px 24px;
  border: 2px solid var(--foil);
  background:
    linear-gradient(180deg, rgba(196, 163, 90, 0.16), transparent 42%),
    var(--paper-deep);
}
.studio-share-binder .work-kicker {
  margin: 0 0 6px;
  color: var(--civic);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.studio-share-binder h2 {
  margin: 0 0 8px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
}
.studio-share-binder p {
  max-width: 36em;
  margin: 0 0 16px;
  font-size: 15px;
}
.studio-share-binder-link {
  display: block;
  margin: 0 0 12px;
  color: var(--ink);
  font: 700 clamp(22px, 4vw, 40px)/1.15 "IBM Plex Sans Hebrew", sans-serif;
  letter-spacing: -0.03em;
  word-break: break-all;
  text-decoration: none;
  border-bottom: 3px solid var(--civic);
}
.studio-share-binder-link:hover { color: var(--civic); }
.studio-share-binder button {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: 600 14px/1 "IBM Plex Sans Hebrew", sans-serif;
  cursor: pointer;
}

.card-holders-note {
  max-width: 42ch;
  margin: 8px auto 0;
  color: var(--civic);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.card-holders-note[hidden] { display: none; }
.card-numbered-pulls {
  max-width: 42ch;
  margin: 4px auto 0;
  color: var(--civic);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.card-numbered-pulls[hidden] { display: none; }
.card-numbered-pulls .card-numbered-pull {
  margin: 0 0 4px;
}
.card-numbered-pulls .card-numbered-pull:last-child {
  margin-bottom: 0;
}
.card-numbered-pulls .numbered-pull-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.app-shell.showcase-active {
  padding-bottom: 28px;
}
.app-shell.showcase-active .level-strip,
.app-shell.showcase-active .top-nav-row,
.app-shell.showcase-active #player-name,
.app-shell.showcase-active #site-card-peeks,
.app-shell.showcase-active [data-debug-only],
.app-shell.showcase-active [data-studio-only],
.app-shell.showcase-active #klafi-tips {
  display: none !important;
}
.app-shell.showcase-active .advocacy-dock,
.app-shell.showcase-active .feature-dock,
.app-shell.showcase-active .bug-dock,
.app-shell.showcase-active #main {
  padding-bottom: 8px;
}
.app-shell.showcase-active .bug-dock,
.app-shell.showcase-active .feature-dock { display: none !important; }
#showcase-view.active {
  overflow: hidden;
}
.showcase-head {
  flex: 0 0 auto;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(44, 51, 48, 0.16);
}
.showcase-head h1 { margin-bottom: 8px; }
.showcase-head .shared-notice {
  max-width: 36em;
  margin: 0 0 10px;
  text-align: start;
}
.showcase-count {
  margin: 0 0 12px;
  color: var(--civic);
  font-size: 13px;
  font-weight: 600;
}
.showcase-head .primary-action {
  display: inline-flex;
  margin: 0;
}
#pack-view { overflow-x: clip; }

.kalpi-card { direction: rtl; container-type: inline-size; }
.card-face.front { position: absolute; display: block; padding: 10px; overflow: hidden; }
.card-image-zone { position: absolute; z-index: 1; inset: 10px 10px 28% 10px; overflow: hidden; border-radius: 8px; }
.card-image-zone .card-art { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 8px; object-fit: cover; object-position: center 18%; }
.card-image-meta {
  position: absolute;
  z-index: 3;
  inset: 12px 12px auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  direction: ltr;
  gap: 8px;
}
.card-meta-mid {
  display: grid;
  min-width: 0;
  place-items: center;
}
.card-meta-end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  width: max-content;
  margin: 0;
  padding: 0;
  gap: 4px;
}
.card-image-meta .new-stamp {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  transform: none;
}
.card-copies-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.card-recycle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(196, 163, 90, 0.55);
  border-radius: 999px;
  background: rgba(26, 31, 28, 0.55);
  color: var(--paper);
  cursor: pointer;
}
.card-recycle svg {
  width: 14px;
  height: 14px;
  animation: card-recycle-spin 2.4s linear infinite;
}
@keyframes card-recycle-spin { to { transform: rotate(-360deg); } }
.binder-slot > .binder-recycle {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  /* Track the scaled count pill: image inset, the 8cqw badge, then a gap.
     The extra 2.7cqw centers the circle under ×N. */
  top: calc(clamp(1px, 0.9cqw, 3px) + clamp(7px, 3.1cqw, 12px) + 3.4cqw + 8cqw + 2cqw);
  right: calc(clamp(1px, 0.9cqw, 3px) + clamp(7px, 3.1cqw, 12px) + 3.4cqw + 2.7cqw);
  width: 8cqw;
  height: 8cqw;
  border-width: max(1px, 0.4cqw);
}
.binder-slot:has(.kalpi-card[data-card-frame="fullart-v1"]) > .binder-recycle {
  top: calc(3.4cqw + 8cqw + 2cqw);
  right: calc(3.4cqw + 2.7cqw);
}
.binder-slot > .binder-recycle svg {
  width: 64%;
  height: 64%;
}
.card-recycle:focus-visible { outline: 2px solid var(--civic-bright); outline-offset: 2px; }
/* Open card dialog only: the code and ×N stay one line at the same height.
   The recycle control hangs under the count and does not share that line. */
#app #card-dialog .card-image-meta {
  align-items: start;
}
#app #card-dialog .card-meta-end {
  align-items: flex-start;
}
#app #card-dialog .card-image-meta > .card-code-tag,
#app #card-dialog .card-copies-stack > .card-copies-tag {
  flex: 0 0 auto;
  height: 8cqw;
  min-height: 8cqw;
  max-height: 8cqw;
}
#app #card-dialog .card-copies-stack {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: auto;
  min-height: 0;
}
#app #card-dialog .card-copies-stack > .card-recycle {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  right: auto;
  z-index: 1;
  flex: none;
  margin: 0;
  transform: translateX(-50%);
}
.card-image-meta .card-code-tag,
.card-image-meta strong,
.card-image-meta .card-copies-tag,
.card-image-meta .card-numbered-tag,
.card-image-meta .new-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: max-content;
  min-width: max-content;
  max-width: none;
  min-height: clamp(18px, 8cqw, 24px);
  padding: 3px 7px;
  border: 1px solid rgba(244, 239, 228, 0.32);
  border-radius: 999px;
  background: rgba(26, 31, 28, 0.34);
  color: var(--paper);
  font: 600 clamp(7px, 3.4cqw, 11px)/1 "IBM Plex Sans Hebrew", sans-serif;
  backdrop-filter: blur(7px);
}
/* Give-side last copy in a trade: same chip, painted with the existing danger color. */
#app .trade-thumb .kalpi-card .card-image-meta .card-meta-end .card-copies-tag.is-last-copy {
  background: var(--danger-mute);
  border-color: var(--danger-mute);
  color: var(--paper);
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  z-index: 3;
}

.card-image-meta strong {
  width: clamp(18px, 8cqw, 24px);
  min-width: clamp(18px, 8cqw, 24px);
  height: clamp(18px, 8cqw, 24px);
  min-height: clamp(18px, 8cqw, 24px);
  padding: 0;
  border-color: rgba(196, 163, 90, 0.4);
  color: var(--paper);
  font-size: clamp(9px, 4.2cqw, 13px);
}
.card-identity-stack { display: contents; }
.card-rarity-zone,
.card-slot-mark { display: none; }
.card-quote-zone,
.card-party-zone,
.card-rarity-zone,
.card-name-zone {
  position: absolute;
  z-index: 4;
  right: 14px;
  left: 14px;
  margin: 0;
  overflow: hidden;
  font-family: "IBM Plex Sans Hebrew", sans-serif;
}
.card-quote-zone { bottom: 2.5%; height: 13%; display: grid; place-items: center; text-align: center; font-size: clamp(8px, 4.2cqw, 19px); font-weight: 600; line-height: 1.16; }
.card-party-zone { bottom: 15.4%; height: 5.8%; display: flex; align-items: center; gap: clamp(3px, 1.8cqw, 6px); white-space: nowrap; font-size: clamp(8px, 4cqw, 11px); font-weight: 500; line-height: 1; }
.card-face.front .card-name-zone { bottom: 21.2%; height: 7.4%; display: flex; align-items: center; margin: 0; padding: 0 3cqw; white-space: nowrap; background: var(--civic); color: var(--paper); font-size: clamp(9px, 7cqw, 23px); line-height: 1; }
.card-face.front > .card-pip { display: none; }

.progressive-card .card-quote-zone,
.progressive-card .card-party-zone,
.progressive-card .card-rarity-zone,
.progressive-card .card-name-zone,
.progressive-card .card-image-zone,
.progressive-card .card-pip,
.progressive-card .new-stamp,
.progressive-card .finish-stamp { opacity: 0; transform: translateY(7px); transition: opacity 360ms ease, transform 420ms ease; }
.progressive-card.stage-quote .card-quote-zone,
.progressive-card.stage-party .card-quote-zone,
.progressive-card.stage-identity .card-quote-zone,
.progressive-card.stage-portrait .card-quote-zone,
.progressive-card.stage-party .card-party-zone,
.progressive-card.stage-identity .card-party-zone,
.progressive-card.stage-portrait .card-party-zone,
.progressive-card.stage-party .card-rarity-zone,
.progressive-card.stage-identity .card-rarity-zone,
.progressive-card.stage-portrait .card-rarity-zone,
.progressive-card.stage-identity .card-name-zone,
.progressive-card.stage-portrait .card-name-zone,
.progressive-card.stage-identity .card-image-zone,
.progressive-card.stage-portrait .card-image-zone,
.progressive-card.stage-portrait .card-pip,
.progressive-card.stage-portrait .new-stamp,
.progressive-card.stage-portrait .finish-stamp { opacity: 1; transform: none; }
.progressive-card.stage-portrait.holo::after { opacity: 1; }

.earned-badge-rail { min-height: 48px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(44, 51, 48, 0.22); }
.binder-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  direction: rtl;
}
.binder-stats-row .tips-replay { margin: 0; flex: 0 0 auto; }
.earned-badge-list {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.earned-badge-rail:empty::after { content: "התגים שיושגו יופיעו כאן"; color: rgba(26, 31, 28, 0.48); font-size: 11px; }
.badge-medallion { position: relative; width: 46px; height: 54px; display: grid; place-items: center; outline: none; cursor: pointer; }
.collection-star-count {
  min-width: 62px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--foil);
  border-radius: 999px;
  background: rgba(196, 163, 90, 0.12);
  color: var(--ink);
  cursor: pointer;
}
.collection-star-count b { color: #a97c19; font-size: 19px; line-height: 1; }
.collection-star-count strong { font-size: 15px; line-height: 1; }
.badge-medallion::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 12;
  right: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 210px;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  direction: rtl;
  font-size: 9px;
  line-height: 1.4;
  text-align: right;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.badge-medallion:hover::after,
.badge-medallion:focus-visible::after { opacity: 1; transform: translate(50%, 0); }
.badge-medallion:focus-visible .badge-artwork { filter: drop-shadow(0 0 3px var(--foil)); }
.badge-artwork { display: block; width: 100%; height: 100%; overflow: visible; color: var(--ink); }
.badge-artwork .badge-ribbon { fill: var(--foil); stroke: var(--ink); stroke-width: 1.2; }
.badge-artwork .badge-shell { fill: var(--paper); stroke: var(--ink); stroke-width: 1.7; }
.badge-artwork .badge-field { fill: rgba(196, 163, 90, 0.18); stroke: var(--foil); stroke-width: 1.4; }
.badge-artwork .badge-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.achievement-grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
.achievement-badge { grid-template-columns: 44px minmax(0, 1fr); align-items: start; border: 1px solid rgba(44, 51, 48, 0.22); border-radius: 10px; }
.achievement-badge.earned { background: transparent; border-color: var(--foil); }
.achievement-seal { position: relative; width: 40px; height: 48px; overflow: hidden; border: 0; border-radius: 0; font: inherit; }
.achievement-badge:not(.earned) .badge-artwork { opacity: 0.32; filter: grayscale(1); }

.binder-slot.owned.new-card-thumb { padding: 0; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.binder-card-open { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.binder-shared-card { position: absolute; inset: 0; }
.binder-shared-card .kalpi-card { width: 100%; height: 100%; box-shadow: none; pointer-events: none; }
.new-card-thumb { padding: 0; overflow: hidden; background: var(--paper); }
.dialog-source { display: block; width: fit-content; margin: 10px auto 0; color: var(--civic); font-size: 12px; text-underline-offset: 3px; }
.card-trust-note {
  max-width: 42ch;
  margin: 8px auto 0;
  color: rgba(26, 31, 28, 0.72);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}
.card-trust-note[hidden] { display: none; }
.report-link {
  display: block;
  width: fit-content;
  margin: 8px auto 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: rgba(26, 31, 28, 0.66);
  font: 500 11px/1.3 "IBM Plex Sans Hebrew", sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.report-link:focus-visible { outline: 2px solid var(--civic); outline-offset: 2px; }
.report-dialog form { display: grid; gap: 8px; margin-top: 18px; }
.report-dialog label { margin-top: 6px; font-size: 12px; font-weight: 600; }
.report-dialog select,
.report-dialog textarea,
.report-dialog input:not(.visually-hidden) {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(44, 51, 48, 0.55);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 500 15px/1.4 "IBM Plex Sans Hebrew", sans-serif;
  text-align: right;
}
.report-dialog textarea { min-height: 120px; resize: vertical; }
.report-card-label { margin: 0; color: rgba(26, 31, 28, 0.68); }

.growth-grid, .studio-grid { grid-template-columns: 1fr; }
.growth-grid { max-width: none; width: 100%; gap: 10px; }
.work-card { min-height: 0; padding: 18px 0; border: 0; border-top: 1px solid rgba(44, 51, 48, 0.22); background: transparent; box-shadow: none; }
.work-card h2 { font-size: 20px; }
.growth-grid .work-kicker { margin-bottom: 8px; font-size: 11px !important; letter-spacing: 0.04em; text-transform: none; }
.growth-grid .work-card h2 { margin-bottom: 12px; font-size: 22px; line-height: 1.2; }
.growth-grid .work-card p { font-size: 13px; line-height: 1.45; }
.growth-grid .trade-preview h3 { font-size: 19px; line-height: 1.2; }
.growth-grid .trade-preview p { font-size: 12px; }
.trade-compose { display: flex; flex-direction: column; gap: 10px; }
.trade-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
@media (max-width: 520px) {
  .trade-desk .trade-compose .trade-thumb-frame {
    width: 104px;
    height: calc(104px * 96 / 63);
  }
}
.trade-form fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid rgba(44, 51, 48, 0.22); border-radius: 8px; }
.trade-form legend { padding: 0 6px; font-size: 22px; font-weight: 700; line-height: 1.15; }
.trade-form label { display: grid; gap: 5px; margin-top: 9px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.trade-thumb {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  cursor: pointer;
}
@media (max-width: 520px) {
  .trade-desk > h2 { font-size: 18px; }
  .trade-desk .work-note { font-size: 11px; line-height: 1.35; }
}
.trade-thumb-frame {
  position: relative;
  width: 72px;
  height: calc(72px * 96 / 63);
  overflow: hidden;
  border-radius: 8px;
}
.trade-thumb .binder-shared-card { border-radius: inherit; }
.trade-thumb .trade-thumb-frame { pointer-events: none; }
/* Unowned card: blur art, party, and quote. Name and rarity stay sharp. */
.trade-thumb.is-concealed .card-art,
.trade-thumb.is-concealed .card-party-zone,
.trade-thumb.is-concealed .card-quote-zone,
.binder-card-open.is-concealed .card-art,
.binder-card-open.is-concealed .card-party-zone,
.binder-card-open.is-concealed .card-quote-zone,
/* Fullart sets filter on the art with an #app rule; this must outrank it. */
#app .trade-thumb.is-concealed .card-image-zone .card-art,
#app .binder-card-open.is-concealed .card-image-zone .card-art,
#app .trade-thumb.is-concealed .card-party-zone,
#app .trade-thumb.is-concealed .card-quote-zone,
#app .binder-card-open.is-concealed .card-party-zone,
#app .binder-card-open.is-concealed .card-quote-zone {
  filter: blur(8px);
  user-select: none;
}
.trade-thumb.is-concealed,
.binder-card-open.is-concealed { cursor: default; }
.trade-offer-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.trade-active { display: grid; gap: 8px; }
.trade-offer.mine { border-color: color-mix(in srgb, var(--pack-gold, #b38d3f) 55%, transparent); }
.trade-form select,
.faction-desk select { width: 100%; min-height: 40px; padding: 8px 10px; font: 500 14px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif; }
.faction-pick-row select { min-height: 40px; }
.faction-pick-row > button { min-height: 40px; }
.trade-board { gap: 8px; margin-top: 8px; }
.trade-offer {
  display: grid;
  width: min(100%, 460px);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  grid-template-areas:
    "offered arrow wanted"
    "bar bar bar";
  align-items: start;
  gap: 6px 4px;
  padding: 8px;
  border: 1px solid rgba(44, 51, 48, 0.32);
  border-radius: 8px;
  background: #eee5d4;
}
.trade-offer > .trade-side[data-trade-side="offered"] { grid-area: offered; }
.trade-offer > .trade-side[data-trade-side="wanted"] { grid-area: wanted; }
.trade-offer > b { grid-area: arrow; align-self: center; }
.trade-offer > .trade-offer-bar { grid-area: bar; }
.trade-offer > .trade-side {
  display: grid;
  justify-items: stretch;
  align-content: start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
.trade-side small {
  color: var(--civic);
  font: 700 14px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
.trade-offer .trade-thumb { margin-top: 0; width: 100%; }
.trade-offer .trade-thumb-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 96;
}
.trade-offer > div { gap: 4px; text-align: right; }
.trade-offer > div:nth-of-type(2) { text-align: right; }
.trade-offer > b { color: var(--civic); font-size: 18px; text-align: center; }
.trade-offer span,
.trade-offer small { color: var(--ink-soft); font: 500 11px/1.25 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif; }
.trade-offer strong { font-size: 14px; line-height: 1.25; }
.trade-offer > .trade-offer-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.trade-offer-bar p,
.trade-offer-bar .trade-unavailable {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--civic);
  font: 500 11px/1.3 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trade-offer-bar .trade-offer-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
@media (max-width: 420px) {
  .trade-offer > .trade-offer-bar {
    gap: 6px;
  }
  .trade-offer-action {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
  }
}
.trade-offer-action {
  flex: 0 0 auto;
  width: auto;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--civic);
  border-radius: 8px;
  background: var(--paper);
  color: var(--civic);
  font: 700 13px/1 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  cursor: pointer;
}
.trade-offer-action.accept {
  background: var(--civic);
  color: var(--paper);
}
.trade-offer-action:disabled,
.trade-offer-action[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
}
.trade-offer-action:hover {
  background: var(--civic-bright);
  border-color: var(--civic-bright);
  color: var(--paper);
}
.trade-offer-bar .trade-unavailable {
  flex: 1 1 auto;
  color: rgba(60, 48, 38, 0.62);
  text-align: end;
}
.leaderboard-list > div { padding: 11px 0; font-size: 13px; line-height: 1.3; }
.leaderboard-list strong { font-size: 12px; }
.leaderboard-list .current-player { font-weight: 600; color: var(--civic); }
.debug-community { opacity: 0.7; }

.bottom-nav { height: 58px; width: min(620px, calc(100% - 24px)); border-radius: 12px; box-shadow: 0 8px 24px rgba(26, 31, 28, 0.12); }
.bottom-nav button { flex-direction: column; justify-content: center; gap: 2px; padding: 4px; border-inline-start: 1px solid rgba(44, 51, 48, 0.12); font-size: 10px; }
.bottom-nav button.active { background: var(--ink); }

.dialog-close,
.walkout-receipt a,
.dialog-source {
  min-height: 44px;
}
.dialog-close { width: 44px; height: 44px; }
#advocacy-dialog .dialog-close,
.policy-dialog .dialog-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  background: transparent;
}
#card-dialog .dialog-close {
  top: 4px;
  inset-inline-end: 4px;
  right: auto;
  z-index: 6;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}
#card-dialog .dialog-done {
  min-height: 44px;
  border: 1px solid var(--civic);
  border-radius: 12px;
  background: var(--paper);
  color: var(--civic);
  font: 700 14px/1 "IBM Plex Sans Hebrew", sans-serif;
  cursor: pointer;
}
@media (max-height: 720px) {
  #card-dialog[open] {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
  }
  #card-dialog .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 8px;
    padding-top: 8px;
    background: var(--paper);
  }
}
#card-dialog .dialog-close:focus,
#card-dialog .dialog-close:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--civic);
}
.walkout-receipt a,
.dialog-source { display: inline-flex; align-items: center; justify-content: center; }
.dialog-meta-row .dialog-source,
.dialog-meta-row .report-link {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.trade-form select,
.faction-desk select { min-height: 44px; }

#studio-view { direction: ltr; text-align: left; }
#studio-view h1, #studio-view h2, #studio-view h3 { font-family: Fraunces, Georgia, serif; }
.studio-release-sets {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}
.studio-release-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) 7rem minmax(11rem, auto) repeat(4, 4.4rem) auto;
  gap: 8px;
  align-items: end;
}
.studio-release-row b { font-size: 13px; }
.studio-release-row label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted, #5d6b68);
}
.studio-release-row input[type="number"] { width: 100%; min-height: 36px; }
.studio-event-cards { justify-items: start; }

@media (max-width: 760px) {
  .app-shell { padding-inline: 16px; }
  .home-grid { min-height: auto; grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .home-copy { padding-top: 16px; }
  .collection-line { margin: 16px auto 0; }
  .pack-plinth { min-height: 250px; }
  .level-strip { min-height: 96px; grid-template-columns: 128px minmax(70px, 1fr); gap: 8px; }
  .level-identity small { font-size: 9px; white-space: normal; }
  .level-identity strong { font-size: 17px; }
  .level-identity > span { font-size: 12px; }
  .level-track { height: 20px; }
  .level-track b { font-size: 12px; }
  .level-progress-block small { font-size: 10px; }
  .app-shell.home-active .level-strip { min-height: 122px; grid-template-columns: 128px minmax(70px, 1fr); gap: 8px; }
  .app-shell.home-active .level-identity small { font-size: 10px; }
  .app-shell.home-active .level-identity strong { font-size: 22px; }
  .app-shell.home-active .level-identity > span { font-size: 15px; }
  .app-shell.home-active .level-track { height: 22px; }
  .app-shell.home-active .level-track b { font-size: 12px; }
  .app-shell.home-active .level-progress-block small { font-size: 11px; }
  .today-docket { margin-top: 36px; }
  .today-docket > header h2 { font-size: 23px; }
  .site-card-peek { width: 96px; }
  .site-ballot { width: 36px; }
  .today-docket-row { grid-template-columns: 44px 62px minmax(0, 1fr) 16px; gap-inline: 8px; }
  .today-docket-visual { width: 40px; }
  .trade-preview { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .achievement-grid { grid-template-columns: 1fr; }
  .trade-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .binder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .masthead-meta .live-mark { display: none; }
}

#header-status { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.top-nav-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: 44px minmax(0, 620px) 44px;
  grid-template-areas: "spacer nav info";
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(44, 51, 48, 0.24);
  direction: ltr;
}
.top-nav-row .bottom-nav {
  grid-area: nav;
  position: static;
  width: 100%;
  height: 51px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
  direction: rtl;
}
.top-nav-row .bottom-nav button {
  min-width: 0;
  flex-direction: row;
  gap: 5px;
  padding: 4px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: rgba(26, 31, 28, 0.66);
  font-size: 12px;
}
.top-nav-row .bottom-nav button.active {
  border-bottom-color: var(--civic);
  background: transparent;
  color: var(--ink);
}
.advocacy-info {
  grid-area: info;
  width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: rgba(26, 31, 28, 0.52);
  font-size: 16px;
  cursor: pointer;
}
.advocacy-info:hover,
.advocacy-info:focus-visible { color: var(--civic); }
.app-shell { padding-bottom: 40px; }

@media (max-width: 760px) {
  .top-nav-row {
    margin-inline: -16px;
    padding-inline: 4px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }
  .top-nav-row .bottom-nav button { gap: 3px; padding-inline: 3px; font-size: 10px; }
  .advocacy-info { width: 36px; }
  .app-shell { padding-bottom: 40px; }
}


/* End-state player shell: one viewport, paged content, floating navigation. */
html,
body {
  height: 100%;
  overflow: hidden;
}

.app-shell {
  width: min(100%, 920px);
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 0 20px;
  overflow: hidden;
}

.masthead {
  min-height: 54px;
  padding-top: env(safe-area-inset-top);
}

.masthead-row { min-height: 48px; }

.masthead-meta {
  gap: 5px;
}

.level-strip,
.app-shell.home-active .level-strip {
  min-height: 78px;
  grid-template-columns: minmax(126px, auto) minmax(0, 1fr);
  gap: 10px;
}

.app-shell.home-active .level-identity small,
.level-identity small {
  max-width: 180px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell.home-active .level-identity strong { font-size: 20px; }
.app-shell.home-active .level-identity > span { font-size: 14px; }
.app-shell.home-active .level-track { height: 22px; }
.app-shell.home-active .level-progress-block small { font-size: 11px; }

#main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: var(--nav-clearance);
}

.view,
.view.active {
  height: 100%;
  min-height: 0;
  padding: 12px 0 6px;
  overflow: hidden;
}

#home-view.view.active,
#growth-view.view.active,
#achievements-view.view.active,
#binder-view.view.active,
#pack-view.view.active {
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
  scroll-padding-bottom: 8px;
}
#home-view.view.active {
  padding-top: 8px;
}
#growth-view.view.active,
#binder-view.view.active,
#pack-view.view.active {
  overflow: hidden;
}

.view.active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

#studio-view.active {
  overflow: auto;
}
#achievements-view.active {
  overflow: hidden;
}

.app-shell > .top-nav-row,
.top-nav-row {
  position: fixed;
  z-index: 15;
  inset: auto 0 0;
  margin-inline: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  grid-template-areas:
    "nav nav nav"
    "advocacy feature bug";
  align-items: end;
  justify-content: center;
  column-gap: 0;
  row-gap: var(--footer-pill-gap);
  padding: 0 10px 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  direction: ltr;
  border: 0;
  pointer-events: none;
}

.app-shell > .top-nav-row .bottom-nav,
.top-nav-row .bottom-nav {
  grid-area: nav;
  justify-self: center;
}

.app-shell > .top-nav-row .advocacy-dock,
.app-shell > .top-nav-row .feature-dock,
.app-shell > .top-nav-row .bug-dock,
.top-nav-row .advocacy-dock,
.top-nav-row .feature-dock,
.top-nav-row .bug-dock {
  position: static;
  inset: auto;
  transform: none;
}

/* Three quiet links in one row (RTL reading order): bug right, feature centered, advocacy left.
   Side columns share the leftover width equally so the middle link stays truly centered. */
.top-nav-row .advocacy-dock { grid-area: advocacy; justify-self: start; }
.top-nav-row .feature-dock { grid-area: feature; justify-self: center; }
.top-nav-row .bug-dock { grid-area: bug; justify-self: end; }
@media (max-width: 360px) {
  .top-nav-row .advocacy-dock,
  .top-nav-row .feature-dock,
  .top-nav-row .bug-dock { padding-inline: 5px; gap: 4px; }
}

/* Bottom nav: paper bar with a gold/umber rim; icons over labels. The active tab is not a filled
   block (the seal-green fill stays reserved for the main action): seal icon + label, a light
   seal tint, and a gold "ballot slot" bar on top. */
.top-nav-row .bottom-nav {
  position: static;
  width: min(620px, 100%);
  height: var(--nav-height);
  gap: 2px;
  padding: 3px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--foil) 55%, var(--ink));
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 96%, white);
  box-shadow: 0 10px 26px rgba(60, 48, 38, 0.18);
  backdrop-filter: blur(14px);
  transform: none;
  pointer-events: auto;
}

.top-nav-row .bottom-nav button {
  position: relative;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font: 600 11px/1 "IBM Plex Sans Hebrew", sans-serif;
}

.top-nav-row .bottom-nav button.active {
  border: 0;
  background: color-mix(in srgb, var(--civic) 9%, transparent);
  color: var(--civic);
  box-shadow: none;
}

.top-nav-row .bottom-nav button.active::before {
  content: "";
  position: absolute;
  top: -3px;
  inset-inline: 30%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--foil);
}


#home-view .home-grid {
  --today-pack-w: 96px;
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  grid-template-columns: minmax(0, 1fr) var(--today-pack-w);
  gap: 12px;
  align-items: stretch;
}
#home-view .home-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: start;
  text-align: start;
}
#home-view .home-copy .eyebrow,
#home-view .home-copy .lede,
#home-view .collection-line {
  display: none;
}
#home-view .today-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--today-pack-w);
  gap: inherit;
  align-items: stretch;
  min-width: 0;
}
#home-view .pack-plinth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: start;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding-block: 0;
  gap: 0;
  min-height: 0;
  overflow: visible;
}
.home-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.home-title-row h1 { flex: 1; min-width: 0; }
.today-open-copy {
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.next-pack-clock,
#home-view #cooldown-copy {
  flex: 0 0 auto;
  margin: 6px 0 0;
  color: var(--civic);
  font: 600 clamp(15px, 4.2cqw, 20px)/1.25 "IBM Plex Sans Hebrew", sans-serif;
  letter-spacing: 0.01em;
}
.next-pack-clock.is-clock,
#home-view #cooldown-copy.is-clock {
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
#home-view #cooldown-copy.is-full {
  font-size: clamp(15px, 4.2cqw, 20px);
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: normal;
}
#home-view .home-copy h1 {
  margin-bottom: 4px;
  font-size: clamp(22px, 4.6vw, 34px);
}
#home-view #home-settle-hint {
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--ink) 68%, var(--civic));
  font: 400 13px/1.4 "IBM Plex Sans Hebrew", sans-serif;
}

#home-view .home-copy .lede { margin-bottom: 8px; }
.pack-plinth { min-height: 0; }
.pack-wrapper { width: min(96px, 22vw); height: auto; overflow: visible; }
#home-view .pack-wrapper { width: 100%; }
#home-view .pack-wrapper img { width: 100%; height: auto; object-fit: contain; }
#home-view .action-dock,
#home-view .today-docket { flex: 0 0 auto; }
.action-dock { margin-top: 4px; }
.action-dock .primary-action { width: min(310px, 100%); }

.today-docket {
  flex: 0 0 auto;
  width: 100%;
  margin: 6px auto 0;
}

.masthead .presentation-link,
.masthead .presentation-studio-link {
  display: none !important;
}

.today-docket > header { display: none; }
.today-docket-list {
  grid-template-columns: 1fr;
  gap: 6px;
}

.today-docket-row {
  min-height: 58px;
  grid-template-columns: 36px minmax(0, 1fr) 12px;
  grid-template-areas: "visual title arrow" "visual meta arrow";
  gap: 1px 7px;
  padding: 6px;
  border: 1px solid rgba(44, 51, 48, 0.18);
  border-radius: 8px;
}

.today-docket-label { display: none; }
.today-docket-visual { width: 32px; }
.today-docket-row > strong { font-size: 11px; }
.today-docket-row > small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.binder-head,
.workspace-head {
  flex: 0 0 auto;
  align-items: center;
}
#growth-view .workspace-head {
  margin-bottom: 0;
}
#growth-view .workspace-head .eyebrow { margin-bottom: 0; font-size: 10px; }
#growth-view .workspace-head h1 {
  margin: 0;
  font-size: clamp(20px, 4.6vw, 28px);
}

.binder-head h1,
#achievements-view h1,
.workspace-head h1 {
  margin-bottom: 4px;
  font-size: clamp(24px, 5vw, 36px);
}

.earned-badge-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 38px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.badge-medallion { width: 34px; height: 40px; }
.filter-strip { flex: 0 0 auto; margin: 4px 0 6px; padding-bottom: 0; }

.binder-grid {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.view-pager {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  direction: rtl;
  font-size: 11px;
}
/* The Binder reserves the fixed nav row like every other view: its grid scrolls, and with only
   8px here the last card row and the "more cards" cue sat under the nav bar. */
#app:has(#binder-view.active) #main {
  padding-bottom: var(--nav-clearance);
}

/* Bottom reserve = exactly the cue row: no view margin, a 4px grid tail, and the "more cards" cue in
   its own 16px row under the grid (never an overlay on the card names). At the end of the grid the
   cue text hides (binder-at-end) but keeps its row, so nothing jumps. */
#binder-view.view.active {
  position: relative;
  min-height: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

#binder-view.view.active .binder-grid {
  padding-bottom: 4px;
  /* Row snapping trapped the grid: on short phones a card row is taller than the grid's viewport, and
     snapping back to the row start kept the last names under the cue (375x667 never reached the end). */
  scroll-snap-type: none;
}

#binder-pager.binder-scroll-dock {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  height: auto;
  margin: 2px 0 0;
  min-height: 16px;
  padding: 0 12px;
  background: none;
  pointer-events: none;
}

#binder-view.binder-at-end #binder-pager .binder-scroll-hint {
  visibility: hidden;
}

#binder-view #binder-filters.filter-strip {
  flex-direction: column;
  align-items: stretch;
  overflow: visible;
  gap: 6px;
}

.binder-chrome-clip {
  max-height: 520px;
  overflow: hidden;
}

#binder-view.is-chrome-collapsed .binder-chrome-clip,
#community-panel-open-trades.is-chrome-collapsed .binder-chrome-clip {
  max-height: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .binder-chrome-clip { transition: max-height 220ms ease; }
}

.binder-chrome-toggle {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 2px;
  padding: 2px 0 4px;
  border: 0;
  background: transparent;
  color: rgba(26, 31, 28, 0.62);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

#binder-view .binder-control-line,
#binder-view .binder-control-more {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

#binder-view .binder-control-line > *,
#binder-view .binder-control-more > * {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  justify-content: center;
}

#binder-view .filter-sort,
#binder-view .filter-set-pick,
#binder-view .binder-control-more .filter-party {
  justify-content: center;
  align-items: center;
}

#binder-view .binder-control-more .filter-sort-label {
  display: inline;
  white-space: nowrap;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex: 0 0 auto;
  align-self: center;
}

#binder-view .filter-list,
#binder-view .filter-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#binder-view .filter-cycle {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(calc(var(--cycle-turns, 0) * 180deg));
}
#binder-view .filter-cycle.is-turning {
  transition: transform 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  #binder-view .filter-cycle.is-turning { transition: none; }
}

#binder-view .filter-sort select,
#binder-view .filter-set-pick select,
#binder-view .binder-control-more .filter-party select {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

#binder-view .binder-grid {
  touch-action: pan-y;
}

#binder-view.binder-list .binder-grid {
  grid-auto-rows: max-content;
}

#binder-view.binder-list .binder-slot {
  aspect-ratio: auto;
  height: auto;
  min-height: 44px;
  overflow: visible;
}

#binder-view.binder-list .binder-slot.owned {
  display: flex;
  align-items: stretch;
  padding: 0;
}

#binder-view.binder-list .binder-slot.is-missing {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 12px;
  padding: 8px 10px;
  text-align: start;
}

#binder-view.binder-list .binder-slot.is-missing .missing-name {
  display: inline;
  font-size: 15px;
  -webkit-line-clamp: unset;
}

#binder-view.binder-list .binder-card-open {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: 6px 12px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  text-align: start;
}

#binder-view.binder-list .binder-list-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

#binder-view.binder-list .binder-list-name,
#binder-view.binder-list .missing-name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

#binder-view.binder-list .binder-list-code,
#binder-view.binder-list .binder-list-rarity,
#binder-view.binder-list .binder-list-copies,
#binder-view.binder-list .missing-code,
#binder-view.binder-list .missing-rarity {
  color: rgba(26, 31, 28, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.view-pager:empty { display: none; }
.view-pager button {
  width: 34px;
  height: 28px;
  border: 1px solid rgba(44, 51, 48, 0.25);
  border-radius: 8px;
  background: transparent;
}

.achievement-grid {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  align-items: start;
  align-content: start;
  grid-auto-rows: min-content;
  grid-template-columns: minmax(0, 1fr);
  overflow: auto;
}

.contained-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin: 2px 0 6px;
}

#event-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.contained-tabs button {
  min-height: 30px;
  padding: 3px 4px;
  border: 1px solid rgba(44, 51, 48, 0.22);
  border-radius: 7px;
  background: transparent;
  font-size: 10px;
}

.contained-tabs button.active {
  background: var(--ink);
  color: var(--paper);
}

.growth-grid {
  flex: 1;
  min-height: 0;
  display: block;
}

.growth-grid > .work-card:not([hidden]) {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: 8px;
}

.growth-grid > .work-card.trade-desk,
.growth-grid > .work-card.faction-desk,
.growth-grid > .work-card.daily-challenge-desk,
.growth-grid > .work-card.leaderboard-desk,
.growth-grid > .work-card.open-trades-desk,
.growth-grid > .work-card.league-desk {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#collector-board,
#daily-challenge-board {
  max-height: min(420px, 48vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-inline: 10px;
}
#faction-members {
  overflow: visible;
  padding-inline: 10px;
}

#pack-view .pack-header { flex: 0 0 auto; }
#pack-view .rip-stage {
  flex: 1;
  min-height: 0;
}
.walkout { min-height: 0; height: 100%; }
.walkout-content { height: 100%; min-height: 0; }
.walkout .kalpi-card {
  width: min(var(--card-width), 100%);
  max-height: calc(100% - 38px);
}

@media (max-width: 760px) {
  .app-shell { padding-inline: 12px; }
  .masthead { min-height: 48px; overflow-x: hidden; }
  .masthead-row { gap: 8px; min-width: 0; }
  .masthead-brand { min-width: 0; }
  .masthead-meta {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    justify-content: flex-end;
  }
  .player-name { min-width: 0; }
  .header-debug-reset { display: none; }
  .header-debug-reset[data-nav="studio"][data-studio-only]:not([hidden]) {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 2px 5px;
    font-size: 8px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    white-space: nowrap;
  }
  .masthead-meta:has([data-nav="studio"][data-studio-only]:not([hidden])) .player-name {
    max-width: min(112px, 32vw);
  }
  .presentation-link,
  .presentation-studio-link { display: none !important; }
  .level-strip,
  .app-shell.home-active .level-strip {
    min-height: 70px;
    grid-template-columns: minmax(102px, 124px) minmax(0, 1fr);
  }
  #main { padding-bottom: var(--nav-clearance); }
  .top-nav-row { min-height: 0; padding-inline: 8px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  #home-view .home-grid {
    --today-pack-w: 92px;
    grid-template-columns: minmax(0, 1fr) var(--today-pack-w);
    gap: 8px;
    align-items: stretch;
  }
  #home-view .home-copy { text-align: start; }
  #home-view .home-copy h1 { font-size: clamp(20px, 6.4vw, 28px); }
  .next-pack-clock.is-clock,
  #home-view #cooldown-copy.is-clock { font-size: clamp(22px, 6.4vw, 30px); }
  .collection-line { margin-top: 8px; }
  .today-docket-list { grid-template-columns: 1fr; gap: 4px; }
  .today-docket-row { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "visual title" "visual meta"; }
  .today-docket-row > b { display: none; }
  .today-docket-visual { width: 26px; }
  .binder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 18px; }
  .wordmark b { font-size: 19px; }
  .masthead-row { gap: 6px; }
  .player-name { max-width: 132px; }
  .masthead-meta:has([data-nav="studio"][data-studio-only]:not([hidden])) .player-name {
    max-width: min(88px, 28vw);
  }
  .presentation-link,
  .presentation-studio-link { display: none !important; }
  .level-identity small { max-width: 112px; }
  .level-progress-block small { white-space: normal; }
  .binder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .achievement-grid { grid-template-columns: 1fr; }
  .today-docket-row { min-height: 44px; }
  .contained-tabs button { font-size: 9px; }
  .filter-strip,
  #binder-view .filter-strip {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 6px;
  }
  .filter-sets,
  #binder-view .filter-sets {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .filter-strip button,
  #binder-view .filter-strip button {
    max-width: none;
  }
  .filter-party select {
    max-width: 6.5rem;
  }
}

@media (max-height: 700px) {
  .level-strip,
  .app-shell.home-active .level-strip { min-height: 62px; }
  #home-view .home-copy .lede,
  #home-view .collection-line .progress { display: none; }
  .today-docket-row { min-height: 46px; }
  .pack-wrapper { width: min(96px, 14dvh, 26vw); }
  #home-view .home-grid {
    --today-pack-w: min(78px, 14dvh, 26vw);
    grid-template-columns: minmax(0, 1fr) var(--today-pack-w);
  }
}

/* Compact collection shelf and selling-focused Today/community surfaces. */
.binder-grid {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  padding: 2px 4px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.binder-scroll-hint {
  display: block;
  color: rgba(26, 31, 28, 0.62);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.binder-scroll-arrow {
  display: inline-flex;
  margin-inline: 3px;
  vertical-align: -1px;
}

.binder-scroll-arrow i {
  position: relative;
  width: 7px;
  height: 7px;
  animation: leaf-arrow-fall 1.15s ease-in infinite;
}

.binder-scroll-arrow i::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.binder-scroll-pinch {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 13px;
  margin-inline: 2px;
  vertical-align: -3px;
}

.binder-scroll-pinch svg {
  position: absolute;
  inset: 0;
  width: 17px;
  height: 13px;
  visibility: hidden;
  animation: binder-pinch-cycle 1.28s steps(4, end) infinite;
}

.binder-scroll-pinch svg:nth-child(2) { animation-delay: -0.96s; }
.binder-scroll-pinch svg:nth-child(3) { animation-delay: -0.64s; }
.binder-scroll-pinch svg:nth-child(4) { animation-delay: -0.32s; }

@keyframes binder-pinch-cycle {
  0% { visibility: visible; }
  25%, 100% { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .binder-scroll-arrow i { animation: none; opacity: 0.75; }
  .binder-scroll-pinch svg { animation: none; visibility: hidden; }
  .binder-scroll-pinch svg:last-child { visibility: visible; }
}

.binder-grid > .binder-slot {
  scroll-snap-align: start;
  /* Off-screen owned cards must not join the tab switch layout or image decode. */
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

.app-shell.home-active .level-identity small {
  max-width: 220px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.12;
  text-overflow: clip;
  white-space: normal;
}

.today-docket-row {
  min-height: 48px;
  grid-template-areas: "visual label arrow" "visual title arrow";
  padding: 6px 8px;
}

.today-docket-label {
  display: block;
  grid-area: label;
  color: rgba(26, 31, 28, 0.62);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.today-docket-row > strong {
  font-size: 14px;
  line-height: 1.15;
}

.today-docket-row > small {
  display: none;
}
.today-docket-row.is-no-faction > small {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.contained-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#event-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trade-desk {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.trade-compose {
  display: flex;
  flex-direction: column;
  /* Content-sized: flex:1 reserved a second bottom hole (compose box =
     desk leftover, ~nav-clearance tall) above the in-flow publish row. */
  flex: 0 0 auto;
  min-height: 0;
  gap: 8px;
  padding-bottom: 0;
}

.trade-desk .trade-form {
  flex: 0 0 auto;
  min-height: 0;
}

.trade-desk .trade-actions {
  flex: 0 0 auto;
  z-index: 2;
  padding-top: 0;
  padding-bottom: 2px;
  background: var(--paper);
}

.trade-desk > h2 {
  margin-bottom: 2px;
  font-size: 20px;
}

.trade-desk #trade-create,
.trade-desk #trade-demo {
  width: 100%;
  min-height: 36px;
  display: inline-block;
  padding: 6px 8px;
  vertical-align: top;
  font-size: 13px;
}
.trade-desk #trade-demo[hidden] { display: none; }

.trade-form {
  flex: 0 0 auto;
  min-height: 0;
  align-items: stretch;
  margin: 3px 0 6px;
}

@media (max-width: 520px) {
  .trade-desk .trade-actions {
    padding-top: 0;
  }
}

.trade-form fieldset {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 6px !important;
}

.trade-form label {
  gap: 2px !important;
  margin-top: 3px !important;
  font-size: 10px !important;
}

.trade-form select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
}

.open-trades-desk {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.trade-board-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 12px;
}

.trade-board-toolbar[hidden] {
  display: none;
}

.trade-board-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--ink-soft);
  font: 600 11px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}

.trade-board-toolbar select {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: 500 13px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}

.trade-board-pager {
  margin-top: 10px;
}

.trade-board-pager button {
  width: auto;
  min-width: 72px;
  padding: 0 10px;
  font: 600 11px/1 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}

.open-trades-desk .trade-board {
  flex: 0 1 auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.trade-form fieldset {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 8px;
  overflow: visible;
  direction: rtl;
}

.trade-choice-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  direction: rtl;
}

.trade-compose .trade-thumb {
  width: auto;
  margin-top: 0;
  justify-self: start;
}

.trade-compose .trade-thumb-frame {
  width: 48px;
  height: calc(48px * 96 / 63);
}

.trade-choice-fields {
  display: grid;
  min-width: 0;
  direction: rtl;
}

.trade-choice-fields label,
.trade-choice-fields select {
  width: 100%;
  min-width: 0;
}

.trade-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trade-desk .trade-actions #trade-create,
.trade-desk .trade-actions #trade-demo {
  width: 100%;
}

/* Trade compose: the publish button is centered under the form. Each
   side stacks a large card over its two selects. The thumb scales with the viewport width and height
   so both cards stay whole from 320px phones to desktop. */
.trade-desk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0 0 4px;
  direction: rtl;
}
.trade-desk .trade-desk-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(16px, 4.6vw, 20px);
  line-height: 1.2;
}
.trade-publish-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  margin: 8px 0 0;
  padding: 0;
}
#app .trade-desk .trade-publish-row #trade-create {
  flex: 0 0 auto;
  width: min(280px, 88%);
  min-height: 48px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 15px;
  white-space: nowrap;
}
.trade-desk .trade-actions:not(:has(> :not([hidden]))) { display: none; }
#app .trade-desk .trade-form {
  --trade-thumb-w: clamp(88px, min(36vw, 18dvh), 128px);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  width: 100%;
  margin-top: 2px;
  grid-template-columns: unset !important;
}
#app .trade-desk .trade-form fieldset {
  padding: 6px 8px 8px !important;
}
#app .trade-desk .trade-choice-row {
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 6px;
}
#app .trade-desk .trade-compose .trade-thumb {
  justify-self: center;
}
#app .trade-desk .trade-compose .trade-thumb-frame {
  width: var(--trade-thumb-w);
  height: calc(var(--trade-thumb-w) * 96 / 63);
}
#app .trade-desk .trade-choice-fields label {
  margin-top: 2px !important;
}

.trade-compose-arrow {
  margin: 8px 0;
  padding: 6px 0;
  text-align: center;
  color: var(--civic);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}
#app .trade-desk .trade-compose .trade-side-fieldset > legend {
  font-family: "Noto Serif Hebrew", "Noto Serif", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}
#app .trade-desk .trade-compose .trade-compose-arrow {
  font-size: 36px;
  font-weight: 700;
}
.trade-side-fieldset {
  width: 100%;
  box-sizing: border-box;
}
.trade-side-mode {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.trade-mode-hint {
  margin: 0;
  color: var(--ink-soft);
  font: 500 12px/1.35 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
.trade-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.trade-slot-fields {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.trade-slot-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.trade-slot-fields select {
  width: 100%;
}
.trade-mode-btn {
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid var(--civic);
  border-radius: 999px;
  background: transparent;
  color: var(--civic);
  font-size: 13px;
  font-weight: 600;
}
.trade-mode-btn.is-active {
  border-color: var(--civic);
  background: var(--civic);
  color: var(--paper);
  font-weight: 700;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.trade-mode-btn.is-active::before {
  content: "✓ ";
  font-weight: 800;
}
.trade-side-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trade-slot {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(44, 51, 48, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
}
.trade-slot.has-join .trade-slot-join {
  text-align: center;
  color: var(--civic);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
.trade-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  direction: rtl;
}
.trade-slot-visual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.trade-slot-thumb {
  width: auto;
  margin: 0;
  justify-self: center;
}
.trade-slot-thumb[hidden] {
  display: none;
}
.trade-slot-thumb .trade-thumb-frame,
.trade-compose .trade-slot-thumb .trade-thumb-frame {
  width: var(--trade-thumb-w, 88px);
  height: calc(var(--trade-thumb-w, 88px) * 96 / 63);
  margin-inline: auto;
}
.trade-slot-thumb.is-empty {
  cursor: default;
  pointer-events: none;
}
.trade-thumb-placeholder {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 6px;
  border: 1px dashed rgba(44, 51, 48, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-soft);
  font: 600 11px/1.25 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  text-align: center;
}
.trade-slot-picker {
  min-width: 0;
  width: 100%;
}
.trade-slot-picker select {
  width: 100%;
}
.trade-slot-remove {
  justify-self: end;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
}
.trade-side-add {
  margin-top: 6px;
  width: 100%;
}
.trade-side-add-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
}
.trade-side-add-row .trade-side-add {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}
.trade-form label.trade-want-missing-only {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px !important;
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 40px;
  min-width: 32px;
  margin-top: 0 !important;
  padding: 0 12px 0 10px;
  border: 2px solid var(--civic);
  border-radius: 999px;
  background: transparent;
  color: var(--civic);
  font: 600 13px/1 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.trade-form label.trade-want-missing-only:has(input:checked) {
  background: var(--civic);
  color: var(--paper);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.trade-want-missing-only {
  min-height: 32px;
}
.trade-want-missing-box {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  direction: ltr;
  unicode-bidi: isolate;
}
.trade-want-missing-only input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.trade-want-missing-only input[type="checkbox"]:checked {
  background: var(--paper);
  border-color: var(--paper);
}
.trade-want-missing-check {
  position: absolute;
  inset: 2px;
  width: 14px;
  height: 14px;
  color: var(--civic);
  pointer-events: none;
  opacity: 0;
  transform: none;
}
.trade-want-missing-only:has(input:checked) .trade-want-missing-check {
  opacity: 1;
}
.trade-want-missing-only:focus-within {
  outline: 2px solid var(--civic);
  outline-offset: 3px;
}
.trade-side-rail {
  --trade-rail-gap: 3px;
  display: flex;
  justify-content: center;
  align-items: start;
  gap: var(--trade-rail-gap);
  width: 100%;
}
.trade-offer > .trade-side[data-trade-side="offered"] .trade-side-rail { direction: ltr; }
.trade-rail-slot {
  flex: 0 0 calc((100% - (2 * var(--trade-rail-gap))) / 3);
  width: calc((100% - (2 * var(--trade-rail-gap))) / 3);
  max-width: calc((100% - (2 * var(--trade-rail-gap))) / 3);
  min-width: 0;
}
.trade-rail-slot:empty {
  display: none;
}
.trade-offer .trade-side-rail .trade-thumb {
  display: block;
  width: 100%;
}
.trade-offer .trade-side-rail .trade-thumb-frame,
.trade-offer .trade-stack-chip .trade-thumb-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 96;
  max-width: none;
}
.trade-offer .trade-thumb-frame .binder-shared-card,
.trade-offer .trade-thumb-frame .kalpi-card {
  width: 100%;
  height: 100%;
}
.trade-offer .trade-side-rail,
.trade-offer .trade-rail-slot {
  overflow: visible;
}
.trade-offer .trade-thumb.is-picked {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--civic);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--foil);
}
.trade-offer .trade-thumb.is-pick-disabled {
  opacity: 0.42;
}
.trade-offer .trade-side {
  justify-items: center;
  text-align: center;
}
.trade-offer .trade-side small {
  width: 100%;
  text-align: center;
  font: 700 14px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}
.trade-offer.needs-choice .trade-offer-bar {
  grid-column: 1 / -1;
}

.faction-member-board {
  margin: 0 0 4px;
}

.faction-board-title {
  margin: 16px 0 8px;
  color: var(--civic);
  font: 700 13px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}

.faction-member-board,
.faction-member-board .faction-hist,
.faction-member-board .faction-hist-plot,
.faction-member-board .challenge-hist-axis {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.faction-member-board .faction-hist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 4px 0 8px;
  overflow: hidden;
}

.faction-hist-plot,
.faction-hist .challenge-hist-axis {
  display: flex;
  width: 100%;
  justify-content: space-between;
  overflow: hidden;
  gap: clamp(2px, 1.2vw, 8px);
}
.faction-hist-plot {
  height: min(148px, 24dvh);
}

.faction-hist .challenge-hist-col,
.faction-hist .challenge-hist-axis span {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
}

.faction-hist .challenge-hist-col b {
  width: min(28px, 100%);
}

#faction-members .faction-hist-plot {
  height: min(124px, 21dvh);
  padding-top: 48px;
}

#faction-members .faction-party-ballot {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bar, 0%) + 12px);
  z-index: 1;
  display: block;
  width: 16px;
  height: 24px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #111;
  border-radius: 2px;
  background: #ead9b4 url("/design-assets/ballot-paper.png") center / cover;
  transform: translateX(-50%);
  pointer-events: none;
}

#faction-members .faction-party-ballot img,
#faction-members .faction-party-ballot i {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px 1px;
  box-sizing: border-box;
  object-fit: contain;
  color: #1a2540;
  font: 700 8px/1 "Noto Serif Hebrew", "IBM Plex Sans Hebrew", sans-serif;
  font-style: normal;
  text-align: center;
}

#faction-members .faction-party-col.you > b {
  font-weight: 800;
}

#faction-members .faction-party-col.you b::before {
  content: none;
}

#faction-members .faction-party-bar {
  position: relative;
  display: block;
  width: min(28px, 100%);
  margin-inline: auto;
  min-height: 0;
  border-radius: 3px 3px 0 0;
  background: #9aa39b;
  font-weight: 400;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: fermi-bar-rise 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#faction-members .faction-party-bar::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--ink);
  transform: translateX(-50%);
}

.faction-hist .challenge-hist-axis span {
  overflow: hidden;
  color: inherit;
  font: inherit;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: normal;
}

.faction-chart-row {
  display: grid !important;
  grid-template-columns: minmax(80px, auto) minmax(80px, 1fr) 42px;
  gap: 9px;
  align-items: center;
}

.faction-chart-row.current-player span {
  font-weight: 700;
}

.faction-chart-row > i {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--paper-deep);
}

.faction-chart-row > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--civic);
  transform: scaleX(0);
  transform-origin: right center;
  animation: fermi-bar-grow-x 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.daily-challenge-desk {
  position: relative;
}

.challenge-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0 0 10px;
  direction: ltr;
}

.challenge-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  padding-top: 0;
  direction: rtl;
}

.growth-grid .daily-challenge-desk #daily-challenge-date {
  margin: 0;
  color: var(--civic);
  font: 600 clamp(16px, 4.4vw, 20px)/1.25 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
}

.growth-grid .daily-challenge-desk #daily-challenge-title,
.growth-grid .daily-challenge-desk #daily-challenge-party {
  margin: 0;
  color: var(--ink);
  font: 600 clamp(16px, 4.4vw, 20px)/1.25 "Noto Serif Hebrew", Fraunces, serif;
}

.challenge-you {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  direction: rtl;
}

.daily-challenge-leader-art {
  position: static;
  flex: 0 0 auto;
  width: 128px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(44, 51, 48, 0.24);
  border-radius: 8px;
  background: var(--paper-deep);
}

.daily-challenge-leader-art .mini-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--paper-deep) center top / cover no-repeat;
}

.daily-challenge-leader-art .mini-art.placeholder {
  display: grid;
  place-items: center;
}

.daily-challenge-leader-art .mini-art.placeholder::before {
  content: attr(data-mark);
  color: var(--pip);
  font-size: 34px;
  font-weight: 600;
}

.challenge-recap {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.challenge-copy .challenge-recap-score {
  display: grid;
  justify-items: start;
  margin-top: 2px;
  min-width: 0;
}

.challenge-recap-place {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.challenge-recap-place.is-status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 600;
  white-space: normal;
  max-width: 12rem;
  opacity: 0.72;
}

.challenge-hist {
  display: grid;
  gap: 8px;
}

.challenge-hist > small {
  color: rgba(26, 31, 28, 0.62);
  font-size: 11px;
}

.challenge-hist-plot {
  display: flex;
  direction: ltr;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  height: min(110px, 20dvh);
  padding-top: 28px;
  box-sizing: border-box;
}

.challenge-hist-col {
  position: relative;
  display: grid;
  align-items: end;
  width: 40px;
  flex: 0 0 40px;
  min-height: 0;
}

.challenge-hist-col b {
  display: block;
  width: 32px;
  margin-inline: auto;
  min-height: 0;
  border-radius: 3px 3px 0 0;
  background: #9aa39b;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: fermi-bar-rise 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.challenge-hist-col.you b {
  position: relative;
  background: var(--civic);
}

.challenge-hist-col.you b::before {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--civic);
  color: #eee5d4;
  font-family: "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  content: "אתם";
  transform: translateX(-50%);
  animation: fermi-marker-in 380ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

.challenge-hist-col.you b::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--ink);
  content: "";
  transform: translateX(-50%);
}

.challenge-hist-axis {
  display: flex;
  direction: ltr;
  justify-content: center;
  gap: 10px;
  color: rgba(26, 31, 28, 0.5);
  font-size: 10px;
  text-align: center;
}

.challenge-hist-axis span {
  width: 40px;
  flex: 0 0 40px;
}

@keyframes fermi-bar-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes fermi-bar-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes fermi-marker-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .challenge-hist-col b,
  .challenge-hist-col.you b::before,
  .faction-chart-row > i > b,
  #faction-members .faction-party-bar {
    animation: none;
    transform: none;
  }
}

@media (max-width: 520px) {
  .challenge-hero {
    gap: 8px;
  }
  .daily-challenge-leader-art {
    width: 112px;
  }
  .app-shell.home-active .level-strip {
    grid-template-columns: minmax(128px, 148px) minmax(0, 1fr) 34px;
  }
  .app-shell.home-active .level-identity small {
    max-width: 148px;
    font-size: 13px;
  }
  .binder-grid {
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .today-docket-list {
    grid-template-columns: 1fr;
  }
  .today-docket-row {
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr) max-content;
  }
  .today-docket-visual { width: 30px; }
  .today-docket-row > strong { font-size: 12px; }
  .today-docket-row > small { font-size: 9px; }
  .contained-tabs button { padding-inline: 2px; font-size: 8px; }
  .trade-desk {
    overflow-y: auto !important;
  }
  .trade-desk > .work-kicker { display: none; }
  .trade-desk > h2 { font-size: 16px; margin-bottom: 6px; }
  #app .trade-desk .trade-form {
    flex: 0 0 auto;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    overflow: visible;
    gap: 10px;
  }
  .trade-desk-head {
    display: block;
  }
  .trade-desk .trade-desk-head h2 {
    width: 100%;
  }
  #app .trade-desk .trade-publish-row #trade-create {
    width: min(280px, 88%);
  }
  .trade-choice-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .trade-form fieldset {
    min-height: 0;
  }
}

@media (max-width: 520px) and (max-height: 740px) {
  .trade-form fieldset {
    min-height: 0;
  }
}

#main {
  padding-bottom: var(--nav-clearance);
}

.level-teaser {
  display: none;
  grid-area: teaser;
  margin: 0;
}

.app-shell.home-active .level-strip {
  min-height: 108px;
  grid-template-areas:
    "teaser teaser teaser"
    "identity progress pack";
  grid-template-rows: auto 1fr;
  padding: 8px 0 7px;
}

@media (max-width: 412px) and (max-height: 680px) {
  /* Short phones (e.g. 320x568): a slimmer nav with smaller icons; the clearance follows. */
  :root { --nav-height: 54px; }
  .top-nav-row .bottom-nav button { gap: 2px; }
  .nav-icon { width: 22px; height: 22px; }
  .masthead { min-height: 42px; }
  .masthead-row { min-height: 36px; }
  .level-strip {
    min-height: 52px;
    padding: 2px 0;
  }
  .app-shell.home-active .level-strip {
    min-height: 58px;
    padding: 2px 0;
  }
  .app-shell.home-active .level-teaser {
    font-size: 12px;
    line-height: 1.1;
  }
  .app-shell.home-active .level-progress-block small,
  .level-progress-block small { display: none; }
  #home-view.view.active {
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 2px;
    padding-bottom: 4px;
  }
  #home-view .home-grid {
    flex: 0 0 auto;
    min-height: 0;
    --today-pack-w: 56px;
    gap: 6px;
    align-items: start;
  }
  #home-view .pack-plinth { overflow: hidden; min-height: 0; max-height: 72px; }
  #home-view .pack-wrapper,
  #home-view .pack-wrapper img {
    max-height: 72px;
  }
  #home-view .home-copy h1 { font-size: 17px; }
  #home-view #cooldown-copy.is-clock,
  .next-pack-clock.is-clock { font-size: 16px; }
  #home-view .action-dock { margin-top: 6px; }
  #home-view .primary-action { min-height: 36px; }
  #home-view .home-utility-row { display: none; }
  #home-view .today-docket { margin-top: 4px; }
  #home-view .today-docket-row { min-height: 36px; padding: 3px 4px; }
  #growth-view .workspace-head { display: none; }
  .community-nav { margin: 0 0 2px; gap: 2px; }
  .contained-tabs { margin: 0 0 2px; }
  .contained-tabs button { min-height: 26px; }
  .daily-challenge-desk { padding: 8px 0 !important; }
  .challenge-hero { gap: 8px; margin-bottom: 8px; }
  .daily-challenge-leader-art { width: 100px; margin: 0; }
  .growth-grid .daily-challenge-desk #daily-challenge-date,
  .growth-grid .daily-challenge-desk #daily-challenge-title,
  .growth-grid .daily-challenge-desk #daily-challenge-party { font-size: 16px; }
  .challenge-recap { margin: 0 0 6px; gap: 4px; }
  .challenge-hist-plot { height: 72px; padding-top: 16px; }
  .challenge-hist-col { width: 22px; flex-basis: 22px; }
  .challenge-hist-col b { width: 16px; }
  .leaderboard-list > div { padding: 6px 0; }
}

.app-shell.home-active .level-teaser {
  display: block;
  justify-self: stretch;
  background: linear-gradient(90deg, var(--civic), var(--civic-bright), var(--foil), var(--civic));
  background-size: 220% 100%;
  background-clip: text;
  color: transparent;
  font-family: "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  font-size: clamp(17px, 3.2vw, 24px);
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 7px 20px rgba(31, 79, 74, 0.13);
  animation: level-teaser-shine 4.2s ease-in-out infinite;
}

@keyframes level-teaser-shine {
  0%, 25% { background-position: 100% 50%; }
  75%, 100% { background-position: 0 50%; }
}

@media (max-width: 520px) {
  .app-shell.home-active .level-strip {
    min-height: 100px;
  }
  .app-shell.home-active .level-teaser {
    font-size: 16px;
  }
}

@media (max-height: 700px) {
  .app-shell.home-active .level-strip {
    min-height: 90px;
    padding-block: 5px;
  }
  .app-shell.home-active .level-teaser {
    font-size: 14px;
  }
}

.home-utility-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  margin-top: 4px;
}
.tips-replay {
  display: inline-block;
  margin: 8px auto 0;
  padding: 4px 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pack-gold, #b38d3f) 70%, transparent);
  background: transparent;
  color: var(--pack-seal, #175b56);
  font: 600 13px/1.2 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  cursor: pointer;
}
.home-utility-row .tips-replay { margin-top: 4px; }
.binder-head .tips-replay,
#achievements-view > .tips-replay,
.workspace-head .tips-replay {
  margin: 0;
  justify-self: start;
}

.tips-replay:focus-visible {
  outline: 2px solid var(--pack-gold, #b38d3f);
  outline-offset: 3px;
}

#klafi-tips.klafi-tips,
.klafi-tips {
  --pack-seal: #175b56;
  --pack-gold: #b38d3f;
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.klafi-tips[hidden] { display: none !important; }

.klafi-tips-dim,
.klafi-tips-marks {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.klafi-tips-dim { pointer-events: none; z-index: 1; }
.klafi-tips-veil { pointer-events: visiblePainted; }
.klafi-tips-block { fill: transparent; pointer-events: all; }
.klafi-tips-marks { pointer-events: none; z-index: 2; }
.klafi-tips-card { z-index: 4; }

.klafi-tips-veil {
  fill: rgba(28, 22, 16, 0.52);
}

.klafi-tips-ring {
  fill: none;
}

.klafi-tips-ring-gold {
  stroke: var(--pack-gold);
  stroke-width: 3.2;
}

.klafi-tips-ring-seal {
  stroke: var(--pack-seal);
  stroke-width: 1.6;
}

.klafi-tips-arrow {
  stroke: var(--pack-gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.klafi-tips-arrow-head,
.klafi-tips-dot { fill: var(--pack-gold); }

.klafi-tips-dot {
  stroke: var(--pack-seal);
  stroke-width: 1.4;
}

.klafi-tips-card {
  position: fixed;
  width: min(300px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  border: 1px solid color-mix(in srgb, var(--pack-gold) 62%, var(--pack-seal));
  border-radius: 14px;
  background: #eee5d4;
  box-shadow: 0 16px 40px rgba(28, 22, 16, 0.28);
  color: #3c3026;
  pointer-events: auto;
  text-align: start;
}
.klafi-tips-card.is-top {
  width: min(200px, calc(100vw - 120px));
  min-height: 200px;
  padding: 16px 12px 18px;
}
.klafi-tips-card.is-top h2 {
  margin-bottom: 6px;
  font-size: 19px;
}
.klafi-tips-card.is-top p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
}

.klafi-tips-kicker {
  margin: 0 0 4px;
  color: var(--pack-seal);
  font: 600 11px/1 "IBM Plex Sans Hebrew", sans-serif;
  direction: ltr;
  unicode-bidi: isolate;
}

.klafi-tips-card h2 {
  margin: 0 0 6px;
  font: 600 22px/1.15 "Noto Serif Hebrew", "Fraunces", serif;
  color: var(--pack-seal);
}

.klafi-tips-card p {
  margin: 0 0 12px;
  font: 400 15px/1.4 "IBM Plex Sans Hebrew", sans-serif;
  white-space: pre-line;
}
.klafi-tips-card p strong { font-weight: 700; }
.klafi-tips-card .tip-star {
  color: #a97c19;
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1;
}
.klafi-tips-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  margin: -4px 0 12px;
  padding: 0;
  list-style: none;
  font: 500 13px/1.3 "IBM Plex Sans Hebrew", sans-serif;
}
.klafi-tips-legend[hidden] { display: none !important; }
.klafi-tips-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}
.klafi-tips-legend b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pack-gold);
  color: #3c3026;
  font: 700 11px/1 "IBM Plex Sans Hebrew", sans-serif;
}
.klafi-tips-callout-line {
  stroke: var(--pack-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.klafi-tips-callout-disk {
  fill: var(--pack-gold);
  stroke: var(--pack-seal);
  stroke-width: 1.4;
}
.klafi-tips-callout-n {
  fill: #3c3026;
  font: 700 11px/1 "IBM Plex Sans Hebrew", sans-serif;
}

.klafi-tips-mute {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font: 500 13px/1.2 "IBM Plex Sans Hebrew", sans-serif;
}

.klafi-tips-mute input {
  width: 16px;
  height: 16px;
  accent-color: var(--pack-seal);
}

.klafi-tips-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.klafi-tips-actions button {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 14px/1 "IBM Plex Sans Hebrew", sans-serif;
  cursor: pointer;
}

.klafi-tips-actions button:focus-visible {
  outline: 2px solid var(--pack-gold);
  outline-offset: 2px;
}

#klafi-tips-next {
  border: 1px solid var(--pack-seal);
  background: var(--pack-seal);
  color: #eee5d4;
}

#klafi-tips-back,
#klafi-tips-skip {
  border: 1px solid color-mix(in srgb, var(--pack-gold) 55%, var(--pack-seal));
  background: transparent;
  color: var(--pack-seal);
}

@media (prefers-reduced-motion: reduce) {
  .klafi-tips-card { transition: none; }
  .streak-fire { animation: none; }
}

.card-numbered-tag {
  color: var(--pack-seal, #175b56);
  border-color: color-mix(in srgb, var(--pack-gold, #b38d3f) 70%, transparent);
}

.kalpi-card.numbered .card-numbered-tag,
#app[data-card-frame="tall-v2"] .kalpi-card.numbered .card-numbered-tag,
#app[data-card-frame="tall-v2"] .kalpi-card.numbered .card-image-meta .card-numbered-tag,
#app[data-card-frame="tall-v2"] .kalpi-card.numbered:not([data-card-surface="walkout"]) .card-image-meta .card-numbered-tag,
#app[data-card-frame="fullart-v1"] .kalpi-card.numbered .card-image-meta .card-numbered-tag,
#app .kalpi-card.numbered[data-card-frame="fullart-v1"] .card-image-meta .card-numbered-tag {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: clamp(min(26px, 15.5cqw), 11.4cqw, 36px);
  min-width: clamp(min(26px, 15.5cqw), 11.4cqw, 36px);
  height: clamp(min(26px, 15.5cqw), 11.4cqw, 36px);
  min-height: clamp(min(26px, 15.5cqw), 11.4cqw, 36px);
  padding: 0;
  border-radius: 50%;
  border: max(1.5px, 0.55cqw) solid #b42318;
  background:
    radial-gradient(circle at 38% 30%, #fff8f2 0 38%, #f6d4cb 100%);
  color: #8a1610;
  font: 800 clamp(min(8px, 4.8cqw), 3.6cqw, 12px)/1 "IBM Plex Sans Hebrew", sans-serif;
  letter-spacing: 0;
  box-shadow:
    inset 0 0 0 max(1px, 0.35cqw) #f8e4dc,
    inset 0 0 0 max(2.4px, 0.9cqw) #b42318;
  backdrop-filter: none;
  overflow: hidden;
}

.streak-fire svg {
  display: block;
  width: 13px;
  height: 15px;
  overflow: visible;
}

.streak-fire .flame-outer { fill: #ff6a00; }
.streak-fire .flame-inner { fill: #ffd24a; }

.kalpi-card.holo.numbered::before {
  inset: 0;
  padding: 4px;
  animation-duration: 3.8s;
  background: conic-gradient(
    from var(--holo-spin, 0deg),
    #b38d3f 0deg,
    #fff6c8 70deg,
    #e0c36a 140deg,
    #c4a35a 210deg,
    #fff6c8 280deg,
    #b38d3f 360deg
  );
}

.kalpi-card.holo.numbered.holo-chroma::before {
  background: conic-gradient(
    from var(--holo-spin, 0deg),
    #2ec8ff 0deg,
    #7dffb3 60deg,
    #ffe566 120deg,
    #ff8a3d 180deg,
    #ff5ad5 240deg,
    #8b7bff 300deg,
    #2ec8ff 360deg
  );
}

.numbered-tip {
  position: fixed;
  z-index: 40;
  left: 50%;
  right: auto;
  bottom: 108px;
  translate: -50% 0;
  width: min(20rem, calc(100vw - 24px));
  max-width: 20rem;
  padding: 12px 14px;
  border: 1px solid var(--foil, #c4a35a);
  background: var(--paper, #f4efe4);
  color: var(--ink, #1a1f1c);
  box-shadow: 0 12px 28px rgba(60, 48, 38, 0.18);
}

.numbered-tip-target {
  outline: 2px solid var(--foil, #c4a35a);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--foil, #c4a35a) 28%, transparent);
}

.numbered-tip p { margin: 0 0 10px; font: 600 15px/1.4 "IBM Plex Sans Hebrew", sans-serif; }
.numbered-tip button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--civic, #1f4f4a);
  background: var(--civic, #1f4f4a);
  color: var(--paper, #f4efe4);
  font: 600 13px/1 "IBM Plex Sans Hebrew", sans-serif;
}

.level-avatar-stack {
  position: relative;
  display: inline-flex;
  justify-self: center;
}

.level-streak,
.collector-streak {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font: 800 13px/1 "IBM Plex Sans Hebrew", sans-serif;
  font-style: normal;
  color: var(--pack-umber, #3c3026);
}

.level-streak {
  position: absolute;
  top: -10px;
  right: -14px;
  z-index: 4;
  min-width: 32px;
  min-height: 32px;
  height: auto;
  padding: 6px 2px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.streak-count {
  font: inherit;
}

.streak-fire {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  line-height: 1;
  transform-origin: center bottom;
  animation: streak-fire-stretch 1.15s ease-in-out infinite;
}

@keyframes streak-fire-stretch {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.1); }
}

.level-avatar-button.has-week-streak {
  box-shadow: 0 0 0 2px var(--foil, #c4a35a);
}

.streak-dialog {
  width: min(460px, calc(100% - 24px));
  padding: 36px 18px 22px;
}
.streak-dialog .eyebrow {
  margin: 0 0 8px;
  color: var(--civic);
}
.streak-dialog h2 {
  font-family: "Noto Serif Hebrew", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
}
.streak-dialog h2 {
  margin-bottom: 8px;
}
.streak-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.streak-calendar-board {
  direction: ltr;
  padding: 8px 8px 28px;
  padding-inline-start: 8px;
  border: 1px solid color-mix(in srgb, var(--rule) 55%, var(--paper-deep));
  background: var(--paper-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.streak-weekdays {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin: 0 0 4px;
  color: var(--ink);
  font: 700 12px/1 "IBM Plex Sans Hebrew", sans-serif;
  text-align: center;
}
#streak-calendar,
.streak-dialog .streak-calendar {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
  box-shadow: none;
}
.streak-month,
.streak-ladder-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.streak-calendar-board,
.streak-ladder-board {
  width: 100%;
}
.streak-ladder-board {
  direction: rtl;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.streak-ladder-col {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  box-sizing: border-box;
  container-type: inline-size;
  padding: 10px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--rule) 55%, var(--paper-deep));
  background: var(--paper-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.streak-dialog .streak-ladder-label {
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 700;
  font-size: min(18px, 7.2cqi);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
.streak-dialog .streak-ladder {
  display: flex;
  justify-content: center;
  gap: 3px;
  padding-inline-start: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
  box-shadow: none;
}
.streak-ladder-rung {
  position: relative;
  z-index: 1;
  direction: ltr;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  flex: 0 1 auto;
  container-type: inline-size;
  width: min(64px, calc((100cqi - 3px) / 2));
  aspect-ratio: 1;
  min-height: 0;
  padding: 3px 2px 2px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rule) 42%, var(--paper));
  background: var(--paper);
  color: var(--ink);
}
.streak-ladder-rung.is-current {
  outline: 2px solid var(--civic);
  outline-offset: 0;
}
.streak-ladder-day {
  position: relative;
  z-index: 3;
  justify-self: center;
  align-self: start;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: auto;
  min-width: 16px;
  min-height: 16px;
  margin: 2px 0 0;
  padding: 3px 7px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 9px/1 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
.streak-ladder-rung.is-current .streak-ladder-day {
  background: color-mix(in srgb, var(--civic) 12%, var(--paper));
}
.streak-ladder-none {
  min-height: 14px;
  color: var(--civic);
  font: 600 12px/1 "IBM Plex Sans Hebrew", sans-serif;
}
.streak-ladder-rung .streak-cell-prize {
  position: static;
  inset: auto;
  align-self: center;
  justify-self: center;
}
.streak-ladder-rung {
  cursor: default;
}
.streak-ladder-rung.is-opened .streak-cell-prize {
  opacity: 0.34;
}
.streak-ladder-rung.is-opened .streak-cell-check {
  z-index: 2;
}
.streak-ladder-rung.is-opened .streak-cell-check svg {
  opacity: 0.72;
}
#streak-dialog #close-streak-dialog:focus,
#streak-dialog #close-streak-dialog:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--civic);
}
.streak-cell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  aspect-ratio: 1;
  min-height: 48px;
  padding: 3px 2px 2px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rule) 42%, var(--paper));
  background: var(--paper);
  color: var(--ink);
}
.streak-cell-day {
  position: relative;
  z-index: 3;
  justify-self: start;
  align-self: start;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0 0 0 1px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font: 700 9px/1 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  letter-spacing: 0;
  color: var(--ink);
}
.streak-cell.is-checked .streak-cell-day {
  background: color-mix(in srgb, var(--civic) 12%, var(--paper));
}
.streak-cell-month {
  position: absolute;
  top: 3px;
  right: 2px;
  z-index: 2;
  margin: 3px 0 0;
  color: var(--ink);
  font: 700 11px/1 "IBM Plex Sans Hebrew", "IBM Plex Sans", sans-serif;
  letter-spacing: 0.02em;
}
.streak-redeem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 10px 0 0;
  padding: 3px 12px;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--rule));
  border-radius: 999px;
  background: var(--paper);
  color: var(--civic);
  font: 700 13px/1 "IBM Plex Sans Hebrew", sans-serif;
  cursor: pointer;
}
.streak-redeem.is-ready {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--civic) 40%, transparent);
}
.streak-redeem:disabled {
  cursor: default;
  color: color-mix(in srgb, var(--ink) 38%, var(--paper));
  border-color: color-mix(in srgb, var(--rule) 70%, transparent);
  background: transparent;
  box-shadow: none;
}
.streak-cell-prize {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.streak-cell.has-date-prize .streak-cell-pack {
  transform: rotate(25deg);
}
.streak-cell-pack {
  width: 22px;
  height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 1px 1px rgba(26, 31, 28, 0.28));
}
.streak-cell-stars {
  color: var(--foil);
  font: 700 12px/1 "Noto Serif Hebrew", "IBM Plex Sans Hebrew", serif;
  letter-spacing: 0.02em;
}
.streak-cell-stars[data-stars="1"] {
  font-size: 14px;
}
.streak-cell-stars[data-stars="3"] {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 1px;
  font-size: 10px;
  line-height: 0.82;
  letter-spacing: 0;
}
.streak-cell-stars[data-stars="3"] > span:first-child {
  grid-column: 1 / -1;
  justify-self: center;
}
.streak-cell-check {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.streak-cell-check svg {
  width: 100%;
  height: 100%;
  transform: rotate(-8deg);
  opacity: 0.58;
}
.streak-cell.is-landing .streak-cell-check svg {
  animation: streak-stamp-land 320ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes streak-stamp-land {
  0% { opacity: 0; transform: rotate(-16deg) scale(1.12); }
  70% { opacity: 0.7; transform: rotate(-6deg) scale(0.98); }
  100% { opacity: 0.58; transform: rotate(-8deg) scale(1); }
}
.streak-cell.is-opened {
  cursor: default;
}
.streak-cell.is-opened .streak-cell-check {
  z-index: 2;
}
.streak-cell.is-opened .streak-cell-check svg {
  opacity: 0.72;
}
.streak-cell:not(.has-reward) {
  grid-template-rows: auto 1fr;
}
.streak-cell.is-checked {
  background: color-mix(in srgb, var(--civic) 12%, var(--paper));
  border-color: color-mix(in srgb, var(--civic) 42%, var(--rule));
}
.streak-cell.is-today {
  outline: 2px solid var(--civic);
  outline-offset: 0;
  z-index: 1;
}
.streak-cell.is-election {
  z-index: 2;
  overflow: visible;
  border: 2px solid var(--civic);
  background: linear-gradient(180deg, color-mix(in srgb, var(--civic) 24%, var(--paper)), var(--paper) 68%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--paper) 72%, transparent);
}
.streak-cell-election {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  z-index: 3;
  width: max-content;
  transform: translateX(-50%);
  padding: 2px 6px;
  border: 1px solid var(--civic);
  background: var(--paper);
  color: var(--civic);
  font: 700 13px/1.2 "Noto Serif Hebrew", serif;
  white-space: nowrap;
}
.streak-cell.has-date-prize {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foil) 70%, var(--rule));
}
.streak-cell.has-date-prize.is-dormant {
  box-shadow: none;
  cursor: default;
}
.streak-cell.has-date-prize.is-dormant .streak-cell-prize {
  opacity: 0.28;
  filter: grayscale(1);
}
.streak-cell.is-claimed .streak-cell-prize {
  opacity: 0.92;
}
.streak-cell.is-opened .streak-cell-prize {
  opacity: 0.34;
}
@media (prefers-reduced-motion: reduce) {
  .streak-fire { animation: none; }
  .streak-cell.is-landing .streak-cell-check svg,
  .wait-dialog p::before,
  #home-settle-hint:not([hidden])::before,
  .empty-note.is-loading::before,
  .card-recycle svg { animation: none; }
}

.level-letter,
.collector-letter,
.level-letter-text,
.collector-letter-text,
.avatar-seal {
  position: absolute;
  top: -7px;
  left: -5px;
  z-index: 5;
  box-sizing: border-box;
  width: 18px;
  height: 27px;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 1px solid #111;
  border-radius: 2px;
  background-color: #ead9b4;
  background-image: url("/design-assets/ballot-paper.png");
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.28);
  pointer-events: none;
  overflow: hidden;
}

.level-letter,
.level-letter-text,
.avatar-seal {
  top: -6px;
  left: -10px;
  width: 14px;
  height: 22px;
}
.level-letter:not([src]),
.level-letter[src=""],
.level-letter-text:empty {
  display: none !important;
}

.level-letter,
.collector-letter {
  display: block;
  padding: 2px 1px;
  object-fit: contain;
  object-position: center;
}

.app-shell.home-active .level-letter,
.app-shell.home-active .level-letter-text,
.app-shell.home-active .avatar-seal {
  top: -7px;
  left: -12px;
  width: 21px;
  height: 31px;
}

.app-shell.home-active .level-letter-text[data-letters="1"] { font-size: 72cqh; }
.app-shell.home-active .level-letter-text[data-letters="2"] { font-size: 48cqh; }
.app-shell.home-active .level-letter-text[data-letters="3"] { font-size: 34cqh; }
.app-shell.home-active .level-letter-text[data-letters="4"] { font-size: 26cqh; }

.app-shell.home-active .level-identity {
  padding-top: 12px;
}

.level-letter-text,
.collector-letter-text {
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 1px 1px 2px;
  overflow: hidden;
  color: #1a2540;
  font: 700 70cqh/0.68 "Noto Serif Hebrew", "IBM Plex Sans Hebrew", sans-serif;
  text-align: center;
}

.app-shell.home-active .level-identity .level-letter-text span {
  font-size: 1em;
  line-height: inherit;
}

.level-letter-text .letter-fit,
.collector-letter-text .letter-fit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  font: inherit;
  font-style: normal;
  line-height: inherit;
  transform-origin: center center;
}

.level-letter-text span,
.collector-letter-text span {
  display: block;
  flex: 0 0 auto;
  font-size: 1em;
  font-style: normal;
  line-height: 0.68;
}

.level-letter-text[data-letters="1"],
.collector-letter-text[data-letters="1"] {
  font-size: 70cqh;
}

.level-letter-text[data-letters="2"],
.collector-letter-text[data-letters="2"] {
  font-size: 46cqh;
}

.level-letter-text[data-letters="3"],
.collector-letter-text[data-letters="3"] {
  font-size: 34cqh;
}

#avatar-seal {
  display: block;
  pointer-events: none;
}
#avatar-seal[hidden] { display: none; }

.studio-progression-desk {
  display: grid;
  gap: 14px;
  margin: 18px 0;
}

.studio-progression-desk textarea {
  width: 100%;
  min-height: 8rem;
  font: 15px/1.45 "IBM Plex Sans Hebrew", sans-serif;
}

.studio-unlock-grid,
.studio-numbered-sets div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.studio-reward-toggle,
.studio-numbered-sets label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.collector-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  overflow: visible;
  padding-block: 10px;
}

/* #collector-board is a .leaderboard-list, so this flex row wins over the grid above.
   The name may wrap. The score (stars, count, and שונים) stays on one line. */
.leaderboard-list > .collector-row > span:not(.collector-face) {
  min-width: 0;
}
.leaderboard-list > .collector-row > strong {
  flex-shrink: 0;
  white-space: nowrap;
}

.collector-face {
  position: relative;
  width: 36px;
  height: 36px;
  overflow: visible;
}

.collector-face > img:not(.collector-letter) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.collector-face .avatar-seal {
  display: none;
}

.collector-streak {
  position: absolute;
  top: -6px;
  right: -11px;
  z-index: 3;
  height: 18px;
  font: 800 13px/1 "IBM Plex Sans Hebrew", sans-serif;
}

.collector-streak .streak-count {
  display: inline-block;
  min-width: 0.7em;
  font: inherit;
  color: inherit;
}

/* Disclosure pop-up: the card-reading legend (formerly the Today "?" dialog). */
.advocacy-trust {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--rule) 38%, transparent);
}
.advocacy-trust .eyebrow { margin-bottom: 2px; padding-inline-end: 0; }
.advocacy-trust h3 { margin-top: 0; }

/* iOS Safari zooms the page into any focused field under 16px and never zooms back out, so the
   game stays magnified after the bug/report pop-ups close. Touch screens only (incl. iPad with a
   trackpad), so mouse-driven desktop layouts keep their sizes. */
@media (any-pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  select,
  textarea,
  .trade-form select {
    font-size: 16px !important;
  }
}

/* Binder dropdowns shrink to the filter chips. Other fields stay at 16px so iOS does not zoom. */
@media (any-pointer: coarse) {
  #app #binder-view .binder-control-more select {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2;
    padding: 0;
  }
}

/* Binder filters: the party dropdown and «באוסף» are exactly chip height (32px), so the first row is
   no taller than the chip row. On phones (≤520px) the set chips take a full-width row of their own
   instead of scrolling in the leftover space beside the dropdown. The select keeps 16px text on touch
   screens (iOS zoom rule above); only its box shrinks. */
#app #binder-view .filter-party,
#app #binder-view .filter-owned {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding-block: 0;
}
#app #binder-view .filter-party select {
  height: 30px;
  min-height: 0;
  padding: 0 2px;
  line-height: 30px;
  max-width: 9.5rem;
}
#app #binder-view .binder-control-line > *,
#app #binder-view .binder-control-more > * {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
}
#app #binder-view .binder-control-more .filter-party select {
  height: auto;
  min-height: 0;
  max-width: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.2;
  padding: 0;
}
@media (max-width: 520px) {
  #app #binder-view .filter-strip {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 6px;
  }
  #app #binder-view .filter-sets {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Achievements: three pages (הקלים / הבינוניים / הקשים) as tabs, all always open. */
.achievement-tiers {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 4px 0 6px;
}
.achievement-tiers[hidden] { display: none; }
.achievement-tiers button {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 40px;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 600 12px/1 "IBM Plex Sans Hebrew", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.achievement-tiers button small {
  font: 600 12px/1 ui-monospace, monospace;
  direction: ltr;
  opacity: 0.72;
}
.achievement-tiers button.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.achievement-tiers button:focus-visible { outline: 2px solid var(--civic); outline-offset: 2px; }

#achievements-view .achievement-badge.tier-medium.earned { border-width: 1.5px; border-color: var(--foil); background: color-mix(in srgb, var(--foil) 7%, transparent); }
#achievements-view .achievement-badge.tier-hard.earned {
  border-color: #8a6d2c;
  background: linear-gradient(120deg, rgba(244, 231, 184, 0.28), rgba(185, 217, 210, 0.22) 45%, rgba(217, 194, 232, 0.22) 75%, rgba(241, 213, 154, 0.26));
}

/* Badge art tiers. simple = the original ink look. */
.badge-artwork.badge-tier-medium .badge-shell { fill: var(--paper-deep); stroke: var(--foil); stroke-width: 2.4; }
.badge-artwork.badge-tier-medium .badge-ribbon { fill: var(--foil); stroke: #8a6d2c; }
.badge-artwork .badge-seal-dot { fill: var(--foil); stroke: #8a6d2c; stroke-width: 0.8; }
.badge-artwork.badge-tier-hard .badge-shell { fill: #e6dcc0; stroke: #8a6d2c; stroke-width: 2; }
.badge-artwork.badge-tier-hard .badge-ribbon { fill: #d9c2e8; stroke: #8a6d2c; }
.badge-artwork.badge-tier-hard .badge-field { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.2; }
.badge-artwork .badge-sheen {
  fill: rgba(255, 255, 255, 0.78);
  transform-box: fill-box;
  transform-origin: center;
  transform: translateX(0) skewX(-18deg);
  animation: badge-sheen 1.3s ease-out 0.35s 1 both;
}
@keyframes badge-sheen {
  from { transform: translateX(0) skewX(-18deg); }
  to { transform: translateX(84px) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-artwork .badge-sheen { animation: none; opacity: 0; }
}
/* Unearned hard badges: grey outline only (no foil). */
.badge-artwork.badge-tier-unearned .badge-ribbon,
.badge-artwork.badge-tier-unearned .badge-shell,
.badge-artwork.badge-tier-unearned .badge-field { fill: none; stroke: #8f918b; stroke-width: 1.4; }
.badge-artwork.badge-tier-unearned .badge-icon { stroke: #8f918b; }

/* Tier stars: 1 / 2 / 3 in the shield peak, readable on the 34px Binder strip and at 320px. */
.badge-artwork .badge-tier-stars { pointer-events: none; }
.badge-artwork .badge-tier-star-back { fill: var(--paper); stroke: none; }
.badge-artwork .badge-tier-star {
  stroke-width: 0.7;
  paint-order: stroke fill;
}
.badge-artwork.badge-tier-simple .badge-tier-star { fill: var(--ink); stroke: var(--paper); }
.badge-artwork.badge-tier-medium .badge-tier-star-back { fill: var(--ink); }
.badge-artwork.badge-tier-medium .badge-tier-star { fill: var(--foil); stroke: #8a6d2c; }
.badge-artwork.badge-tier-hard .badge-tier-star-back { fill: #2a2618; }
.badge-artwork.badge-tier-hard .badge-tier-star { stroke: #6a5424; }
.badge-artwork.badge-tier-unearned .badge-tier-star-back { fill: none; }
.badge-artwork.badge-tier-unearned .badge-tier-star { fill: none; stroke: #8f918b; stroke-width: 1.15; }
.achievement-seal,
#binder-view .badge-medallion { overflow: visible; }

/* Shared link is a one-screen popup. The shell is one viewport with overflow hidden,
   so a width-driven card clips the quote. Drop the level strip and bottom nav, and
   size the card from the leftover height (63:96). */
#app.share-active.app-shell {
  grid-template-rows: auto minmax(0, 1fr);
  padding-bottom: 0;
}
#app.share-active .level-strip,
#app.share-active .top-nav-row {
  display: none !important;
}
#app.share-active #main {
  padding-bottom: 0;
}
#app.share-active #shared-view.active {
  min-height: 0;
  overflow: hidden;
}
#app.share-active #shared-view.active > :not(.shared-card) {
  flex: 0 0 auto;
}
#app.share-active #shared-view .shared-card {
  container-type: size;
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 370px);
  margin-inline: auto;
  display: grid;
  place-items: center;
}
#app.share-active #shared-view .shared-card .kalpi-card {
  width: min(100%, calc(100cqh * 63 / 96));
  max-width: 100%;
  height: auto;
}

/* One-day bonus gift: pack plus a two-line label centered at the cell bottom, drawn over the claimed V. */
.streak-cell-prize.streak-cell-bonus {
  z-index: 3;
}
.streak-cell-bonus-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 1px;
  max-width: calc(100% + 4px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background: #c2185b;
  border-radius: 6px;
  padding: 2px 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.streak-cell-bonus-label b {
  font-size: 10px;
  font-weight: 800;
}
.streak-cell-bonus-label small {
  font-size: 7.5px;
  font-weight: 700;
}
/* After claim the pack fades like other gifts, but the bonus label stays solid over the V. */
.streak-cell.is-claimed .streak-cell-prize.streak-cell-bonus,
.streak-cell.is-opened .streak-cell-prize.streak-cell-bonus {
  opacity: 1;
}
.streak-cell.is-opened .streak-cell-bonus .streak-cell-pack {
  opacity: 0.34;
}

/* Numbered board rows are whole-row buttons into that player's numbered album. */
.collector-row.numbered-row {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.collector-row.numbered-row:disabled {
  cursor: default;
}
/* Numbered badge: the count sits on the # (faded behind it), centered and legible at medal size. */
.badge-artwork .badge-count-hash { opacity: 0.28; }
.badge-artwork .badge-count {
  fill: var(--ink, #2c3330);
  stroke: rgba(255, 252, 240, 0.92);
  stroke-width: 2.4px;
  paint-order: stroke;
  font-family: inherit;
  font-weight: 900;
}
/* Race: two tabs stretch across; with ממוספרים, three equal tabs in one row. */
#community-tabs[data-community-section="race"].has-numbered {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#community-tabs[data-community-section="race"] button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Binder tile with a regular copy AND an opened numbered copy: thin gold # ribbon, bottom-right corner
   (the ×N tag sits at the top, so it is never covered). */
.binder-slot.owned { position: relative; }
.binder-numbered-ribbon {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  border-bottom-right-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Only the gold band is tappable visually; the corner box is the hit area. */
.binder-numbered-ribbon:focus-visible { outline: 2px solid #c99a3a; outline-offset: -2px; }
.has-numbered-ribbon { position: relative; }
#dialog-card .binder-numbered-ribbon { width: 62px; height: 62px; border-bottom-right-radius: 14px; }
#dialog-card .binder-numbered-ribbon::before { bottom: 13px; right: -20px; width: 92px; font-size: 12px; line-height: 18px; }
.binder-numbered-line {
  display: block;
  color: #b8862f;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.8);
}
.binder-numbered-line[hidden] { display: none; }
.binder-numbered-ribbon::before {
  content: "#";
  position: absolute;
  bottom: 9px;
  right: -16px;
  width: 70px;
  transform: rotate(-45deg);
  background: linear-gradient(90deg, #c99a3a, #f4e7b8, #c99a3a);
  color: #3b2a08;
  font: 900 10px/14px system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Race boards: the streak badge (number + flame) hangs ~11px past the avatar's right edge, so in RTL it
   sat outside the row and the board clipped it. Reserve that room at the row's start; the badge grows
   leftward over the avatar, so 3-digit streaks fit too. */
.leaderboard-list > .collector-row {
  padding-inline-start: 14px;
}