/* ============================================================
   The Circle — /games/the-circle
   Scoped under .gcr. Built on the main site token set.
   Five depths, each with a spectrum color driven by --cr-hue /
   --cr-soft, set per depth on the .gcr root by the script.
   ============================================================ */

.gcr [hidden] { display: none !important; }

.gcr {
  position: relative;
  background: var(--paper);
  padding: clamp(96px, 13vw, 150px) 20px clamp(72px, 9vw, 120px);
  overflow: hidden;

  /* depth palette, overwritten by [data-depth] below */
  --cr-hue: var(--spectrum-teal);
  --cr-soft: #DFF4F7;
  --cr-ink: #17707E;
}
.gcr[data-depth="warmup"]  { --cr-hue: var(--spectrum-teal);    --cr-soft: #DFF4F7; --cr-ink: #17707E; }
.gcr[data-depth="origins"] { --cr-hue: var(--spectrum-sky);     --cr-soft: #DCEFF8; --cr-ink: #135F89; }
.gcr[data-depth="tender"]  { --cr-hue: var(--spectrum-magenta); --cr-soft: #F8DEEC; --cr-ink: #B23B7C; }
.gcr[data-depth="values"]  { --cr-hue: var(--spectrum-indigo);  --cr-soft: #E6E4F4; --cr-ink: #4B4B93; }
.gcr[data-depth="between"] { --cr-hue: var(--spectrum-coral);   --cr-soft: #FBE5D5; --cr-ink: #B25C24; }

/* the wash: a soft colored bloom that shifts with the depth */
.gcr-wash {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 70% at 50% 0%, var(--cr-soft) 0%, rgba(255, 255, 255, 0) 72%);
  opacity: 0.9;
  transition: background 0.7s ease;
  pointer-events: none;
}
.gcr-inner { position: relative; max-width: 820px; margin: 0 auto; }

/* ---- header -------------------------------------------------------------- */
.gcr-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cr-ink);
  margin: 0 0 12px;
  transition: color 0.5s ease;
}
.gcr-eyebrow-soft { color: var(--ink-faint); }
.gcr-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 78px);
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.gcr-title em {
  font-style: italic;
  background: var(--gradient-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gcr-lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); max-width: 620px; margin: 0 0 14px; }
.gcr-howto { color: var(--ink-soft); font-size: 15px; max-width: 620px; margin: 0 0 10px; }
.gcr-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 34px;
}

.gcr-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 16px;
}
.gcr-note { color: var(--ink-faint); font-size: 14px; line-height: 1.6; max-width: 600px; margin: 18px 0 0; }
.gcr-note-lead { margin: 0 0 20px; }
.gcr-note-tight { font-size: 13px; margin: 10px 0 0; }

.gcr-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- stage frame --------------------------------------------------------- */
.gcr-stage {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

/* ---- mode cards ---------------------------------------------------------- */
.gcr-modes {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 8px 0 0;
}
@media (min-width: 760px) { .gcr-modes { grid-template-columns: repeat(3, 1fr); } }

.gcr-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(42, 34, 51, 0.05);
  transition: transform 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.gcr-mode:hover { transform: translateY(-3px); border-color: var(--cr-hue); box-shadow: 0 16px 38px rgba(42, 34, 51, 0.09); }
.gcr-mode[aria-pressed="true"] { border-color: var(--cr-hue); background: var(--cr-soft); }
.gcr-mode-name { font-family: var(--font-display); font-size: 27px; line-height: 1.15; color: var(--ink); }
.gcr-mode-tag { font-size: 14px; color: var(--ink); }
.gcr-mode-detail { font-size: 13px; color: var(--ink-faint); line-height: 1.6; }

/* three little bars that arrange themselves per mode */
.gcr-mode-glyph { display: flex; align-items: flex-end; gap: 5px; height: 24px; }
.gcr-mode-glyph span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cr-hue);
  opacity: 0.85;
  transition: height 0.3s ease, border-radius 0.3s ease;
}
.gcr-mode-glyph[data-glyph="call"] span { border-radius: 3px; width: 8px; }
.gcr-mode-glyph[data-glyph="call"] span:nth-child(1) { height: 12px; }
.gcr-mode-glyph[data-glyph="call"] span:nth-child(2) { height: 22px; }
.gcr-mode-glyph[data-glyph="call"] span:nth-child(3) { height: 16px; }
.gcr-mode-glyph[data-glyph="facilitator"] span:nth-child(1) { width: 20px; border-radius: 999px; }
.gcr-mode-glyph[data-glyph="facilitator"] span:nth-child(2) { opacity: 0.45; }
.gcr-mode-glyph[data-glyph="facilitator"] span:nth-child(3) { opacity: 0.25; }

/* ---- players ------------------------------------------------------------- */
.gcr-namelist { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gcr-namelist:empty { margin: 0; }
.gcr-namechip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 7px 8px 7px 15px;
  font-size: 14px;
  color: var(--ink);
}
.gcr-namechip-x {
  border: none;
  background: var(--paper-2);
  color: var(--ink-faint);
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gcr-namechip-x:hover { background: var(--cr-soft); color: var(--cr-ink); }

.gcr-nameform { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.gcr-nameinput {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: 46px;
  flex: 1 1 200px;
  max-width: 320px;
}
.gcr-nameinput:focus { outline: 2px solid var(--cr-hue); outline-offset: 1px; border-color: var(--cr-hue); }
.gcr-namecount {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 20px;
  min-height: 16px;
}

/* ---- agreements ---------------------------------------------------------- */
.gcr-agreements { list-style: none; margin: 10px 0 0; padding: 0; }
.gcr-agreements li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.gcr-ag-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cr-ink);
  letter-spacing: 0.1em;
  flex: none;
}
.gcr-ag-text {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.8vw, 28px);
  line-height: 1.35;
  color: var(--ink);
}

/* ---- the play bar -------------------------------------------------------- */
.gcr-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.gcr-bar p { margin: 0; }
.gcr-bar-key, .gcr-bar-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.gcr-bar-mode { font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gcr-inline-btn {
  background: none; border: none; padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gcr-inline-btn:hover { color: var(--ink); }

/* ---- depth ladder -------------------------------------------------------- */
.gcr-depths { margin: 0 0 30px; }
.gcr-depthrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gcr-depth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 15px 8px 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.gcr-depth-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--white);
  flex: none;
}
.gcr-depth[data-color="teal"]    .gcr-depth-num { background: var(--spectrum-teal); }
.gcr-depth[data-color="sky"]     .gcr-depth-num { background: var(--spectrum-sky); }
.gcr-depth[data-color="indigo"]  .gcr-depth-num { background: var(--spectrum-indigo); }
.gcr-depth[data-color="magenta"] .gcr-depth-num { background: var(--spectrum-magenta); }
.gcr-depth[data-color="coral"]   .gcr-depth-num { background: var(--spectrum-coral); }
.gcr-depth:hover { border-color: var(--line-strong); color: var(--ink); }
.gcr-depth[aria-pressed="true"] { border-color: var(--cr-hue); background: var(--cr-soft); color: var(--ink); }
.gcr-depth-sub {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 6px;
}
.gcr-depth-tone { font-size: 14px; color: var(--ink-faint); margin: 0; max-width: 560px; }

/* ---- the ring ------------------------------------------------------------ */
.gcr-ringwrap {
  position: relative;
  width: min(330px, 80vw);
  aspect-ratio: 1;
  margin: 8px auto 6px;
}
.gcr-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  background: radial-gradient(circle at 50% 45%, var(--cr-soft) 0%, rgba(255, 255, 255, 0) 68%);
  transition: transform 3.4s cubic-bezier(0.16, 0.9, 0.2, 1), background 0.6s ease;
}
.gcr-ring.is-instant { transition: none; }
.gcr-chip-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-soft);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.gcr-chip-name.is-picked {
  background: var(--cr-hue);
  border-color: var(--cr-hue);
  color: var(--white);
  box-shadow: 0 0 0 6px var(--cr-soft);
}
.gcr-chip-name.is-reader {
  border-color: var(--cr-hue);
  color: var(--cr-ink);
  box-shadow: 0 0 0 3px var(--cr-soft);
}
.gcr-ringcore {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58%;
  text-align: center;
  pointer-events: none;
}
.gcr-ringcore-eyebrow, .gcr-ringcore-reader {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.gcr-ringcore-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.1;
  color: var(--ink);
  margin: 2px 0 4px;
  overflow-wrap: anywhere;
}

/* ---- the deck ------------------------------------------------------------ */
.gcr-deckwrap { margin: 22px 0 0; }
.gcr-deck {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 190px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.gcr-deck-card {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(42, 34, 51, 0.07);
  transition: transform 0.3s ease;
}
.gcr-deck-card-3 { transform: rotate(-3.2deg) translateY(6px); background: var(--paper-2); }
.gcr-deck-card-2 { transform: rotate(1.8deg) translateY(3px); background: var(--paper); }
.gcr-deck-card-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--white);
  border-color: var(--cr-hue);
}
.gcr-deck:hover .gcr-deck-card-3 { transform: rotate(-5deg) translateY(8px); }
.gcr-deck:hover .gcr-deck-card-2 { transform: rotate(3.4deg) translateY(4px); }
.gcr-deck:hover .gcr-deck-card-1 { transform: translateY(-4px); }
.gcr-deck-mark {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--cr-hue);
  position: relative;
}
.gcr-deck-mark::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--cr-soft);
}
.gcr-deck-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.gcr-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--cr-hue);
  border-top: 5px solid var(--cr-hue);
  border-radius: var(--radius-lg);
  padding: 30px 28px 26px;
  box-shadow: 0 16px 44px rgba(42, 34, 51, 0.09);
  animation: gcr-flip 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}
@keyframes gcr-flip {
  from { opacity: 0; transform: perspective(900px) rotateX(-22deg) translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.gcr-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cr-ink);
  margin: 0 0 16px;
}
.gcr-card-text {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.gcr-card-who { font-size: 13px; color: var(--ink-faint); margin: 0; }

/* ---- timer --------------------------------------------------------------- */
.gcr-timer {
  margin: 26px auto 0;
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 18px 20px;
}
.gcr-timer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gcr-timer-head p { margin: 0; }
.gcr-timer-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.gcr-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  cursor: pointer;
}
.gcr-chip[aria-pressed="true"] { background: var(--cr-soft); border-color: var(--cr-hue); color: var(--cr-ink); }
.gcr-timer-body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.gcr-timer-ring { position: relative; width: 86px; height: 86px; flex: none; }
.gcr-timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gcr-timer-track { fill: none; stroke: var(--line); stroke-width: 5; }
.gcr-timer-arc {
  fill: none;
  stroke: var(--cr-hue);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.gcr-timer-read {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}
.gcr-timer-body .gcr-note { flex: 1 1 200px; margin: 0; }

/* ---- empathy echo -------------------------------------------------------- */
.gcr-echo {
  max-width: 560px;
  margin: 26px auto 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cr-hue);
  border-radius: var(--radius-md);
  background: var(--paper-2);
  padding: 20px 22px;
}
.gcr-echo-lead { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; }
.gcr-echo-lead strong { color: var(--ink); }
.gcr-echo-sentence {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
}
.gcr-echo-sentence strong { font-style: normal; font-weight: 400; color: var(--cr-ink); }
.gcr-echo-hint { max-width: 560px; margin-left: auto; margin-right: auto; }

.gcr-bank {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .gcr-bank { grid-template-columns: 1fr 1fr; } }
.gcr-bank-note { grid-column: 1 / -1; }
.gcr-bank-h {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.gcr-bank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gcr-word {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gcr-word:hover, .gcr-word.is-on {
  background: var(--cr-hue);
  border-color: var(--cr-hue);
  color: var(--white);
}

/* ---- nudge --------------------------------------------------------------- */
.gcr-nudge {
  max-width: 560px;
  margin: 22px auto 0;
  background: var(--cr-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  animation: gcr-rise 0.4s ease;
}
@keyframes gcr-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gcr-nudge-text {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 12px;
}

/* ---- controls ------------------------------------------------------------ */
.gcr-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gcr-row-center { justify-content: center; margin-top: 10px; }
.gcr-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.gcr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 12px 22px;
  min-height: 44px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  background: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.gcr-btn-primary { background: var(--cr-hue); color: var(--white); border-color: var(--cr-hue); }
.gcr-btn-primary:hover { transform: translateY(-2px); color: var(--white); }
.gcr-btn-primary[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.gcr-btn-ghost { color: var(--ink); border-color: var(--line-strong); }
.gcr-btn-ghost:hover { border-color: var(--cr-hue); color: var(--ink); }
.gcr-btn-quiet { color: var(--ink-faint); border-color: transparent; padding: 12px 14px; }
.gcr-btn-quiet:hover { color: var(--ink); }
.gcr-btn-quiet[aria-pressed="true"] { color: var(--cr-ink); border-color: var(--cr-hue); background: var(--cr-soft); }
.gcr-btn-small { min-height: 38px; padding: 9px 16px; font-size: 11px; }

.gcr-reveal {
  display: none;
  margin: 18px auto 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  cursor: pointer;
}

/* ---- closing ------------------------------------------------------------- */
.gcr-closing-body { color: var(--ink-soft); font-size: 16px; line-height: 1.7; max-width: 600px; margin: 0 0 22px; }
.gcr-closing-order { list-style: none; margin: 8px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gcr-closing-order li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  font-size: 14px;
  color: var(--ink);
}
.gcr-closing-order li span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
}
.gcr-closing-thanks {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 34px);
  color: var(--ink);
  margin: 0 0 24px;
}

/* ---- the server-rendered deck inventory ---------------------------------- */
/* Visible with no JS (and to crawlers); the script hides it once it runs. */
.gcr-inventory { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 32px; }
.gcr-inv-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  color: var(--ink);
  margin: 0 0 24px;
}
.gcr-inv-depth { margin: 0 0 32px; }
.gcr-inv-depth-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 4px;
}
.gcr-inv-depth[data-color="teal"]    { border-left: 3px solid var(--spectrum-teal); padding-left: 18px; }
.gcr-inv-depth[data-color="sky"]     { border-left: 3px solid var(--spectrum-sky); padding-left: 18px; }
.gcr-inv-depth[data-color="indigo"]  { border-left: 3px solid var(--spectrum-indigo); padding-left: 18px; }
.gcr-inv-depth[data-color="magenta"] { border-left: 3px solid var(--spectrum-magenta); padding-left: 18px; }
.gcr-inv-depth[data-color="coral"]   { border-left: 3px solid var(--spectrum-coral); padding-left: 18px; }
.gcr-inv-depth-sub { color: var(--ink-faint); font-size: 14px; margin: 0 0 14px; }
.gcr-inv-list { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 0; padding-left: 20px; }
.gcr-inv-list li { margin-bottom: 6px; }

/* ==== call mode: the read-aloud layout ==================================== */
/* Bigger type, higher contrast, controls that step aside until reached for. */
.gcr[data-mode="call"] .gcr-card { max-width: 760px; padding: 44px 40px 38px; }
.gcr[data-mode="call"] .gcr-card-text { font-size: clamp(30px, 5vw, 48px); line-height: 1.24; color: #16111D; }
.gcr[data-mode="call"] .gcr-ringcore-name { font-size: clamp(34px, 7vw, 56px); }
.gcr[data-mode="call"] .gcr-deck { max-width: 760px; min-height: 230px; }
.gcr[data-mode="call"] .gcr-inner { max-width: 960px; }
.gcr[data-mode="call"] .gcr-depth-sub { font-size: clamp(22px, 2.8vw, 30px); }
.gcr[data-mode="call"] .gcr-echo-sentence { font-size: clamp(22px, 3.2vw, 32px); }

/* controls fade out in call mode until hover / focus / tap */
.gcr[data-mode="call"] .gcr-play .gcr-controls,
.gcr[data-mode="call"] .gcr-play .gcr-bar,
.gcr[data-mode="call"] .gcr-play .gcr-depths .gcr-depthrow,
.gcr[data-mode="call"] .gcr-play .gcr-echo-hint,
.gcr[data-mode="call"] .gcr-play [data-cr-sharenote] {
  opacity: 0.12;
  transition: opacity 0.4s ease;
}
.gcr[data-mode="call"] .gcr-play:hover .gcr-controls,
.gcr[data-mode="call"] .gcr-play:hover .gcr-bar,
.gcr[data-mode="call"] .gcr-play:hover .gcr-depths .gcr-depthrow,
.gcr[data-mode="call"] .gcr-play:hover .gcr-echo-hint,
.gcr[data-mode="call"] .gcr-play:hover [data-cr-sharenote],
.gcr[data-mode="call"] .gcr-play.is-revealed .gcr-controls,
.gcr[data-mode="call"] .gcr-play.is-revealed .gcr-bar,
.gcr[data-mode="call"] .gcr-play.is-revealed .gcr-depths .gcr-depthrow,
.gcr[data-mode="call"] .gcr-play.is-revealed .gcr-echo-hint,
.gcr[data-mode="call"] .gcr-play.is-revealed [data-cr-sharenote] {
  opacity: 1;
}
/* keyboard users must never lose the controls */
.gcr[data-mode="call"] .gcr-play:focus-within .gcr-controls,
.gcr[data-mode="call"] .gcr-play:focus-within .gcr-bar,
.gcr[data-mode="call"] .gcr-play:focus-within .gcr-depths .gcr-depthrow {
  opacity: 1;
}
/* touch devices get an explicit reveal button instead of hover */
@media (hover: none) {
  .gcr[data-mode="call"] .gcr-play .gcr-reveal { display: block; }
}

/* ---- mobile -------------------------------------------------------------- */
@media (max-width: 480px) {
  .gcr-card { padding: 24px 20px 22px; }
  .gcr-deck { min-height: 160px; }
  .gcr-chip-name { font-size: 11px; padding: 5px 10px; max-width: 84px; }
  .gcr-controls { gap: 6px; }
  .gcr-btn { padding: 11px 16px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .gcr-ring { transition: none !important; }
  .gcr-card { animation: none; }
  .gcr-nudge { animation: none; }
  .gcr-btn, .gcr-btn:hover, .gcr-mode, .gcr-mode:hover,
  .gcr-deck-card, .gcr-deck:hover .gcr-deck-card-1,
  .gcr-deck:hover .gcr-deck-card-2, .gcr-deck:hover .gcr-deck-card-3 {
    transition: none;
    transform: none;
  }
  .gcr-deck-card-3 { transform: rotate(-3.2deg) translateY(6px); }
  .gcr-deck-card-2 { transform: rotate(1.8deg) translateY(3px); }
  .gcr-wash { transition: none; }
}