/* Pawball 5.0 - components (light park theme) */

/* ---------- panels ---------- */
.panel {
  background: var(--panel-light);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  padding: clamp(8px, 1vw, 14px);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}
/* left/right dashboard cards sit lighter than the messenger so more of the
   park wallpaper shows through */
.col .panel { background: var(--panel-dash); }
.panel h2 {
  margin: 0 0 10px;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .14em;
  color: #8A6820;
  text-transform: uppercase;
}
.panel h2 .section-icon { width: 14px; height: 14px; margin-right: 6px; color: var(--gold-deep); }
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.panel-title-row h2 { margin: 0; }

.panel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--green-btn);
  border-radius: var(--r-card);
  color: #FBF7EA;
  font-weight: 600;
  transition: filter .12s ease;
}
.panel-btn:hover { filter: brightness(1.1); }
.panel-btn:active { filter: brightness(.94); }
/* quiet secondary variant: contextual actions (e.g. incident details) sit a
   step below the primary green "View X" buttons */
.panel-btn.quiet {
  background: #FFFDF4;
  color: var(--green-deep);
  border: 1px solid var(--line-soft);
  transition: border-color .14s ease, filter .12s ease;
}
.panel-btn.quiet:hover { filter: none; border-color: var(--line-gold); }
.panel-btn.quiet:active { filter: brightness(.97); }

/* ---------- Club Status card ---------- */
.status-panel { padding-block: 12px; }
.status-panel h2 { margin-bottom: 8px; }
.status-date {
  font-family: var(--serif);
  font-weight: 600;
  font-size: .95em;
  color: var(--green-deep);
  line-height: 1.25;
}
.status-time {
  font-size: .85em;
  font-weight: 600;
  color: var(--gold-deep);
  letter-spacing: .04em;
  margin-top: 1px;
}
.status-season {
  font-size: .84em;
  color: var(--ink-dim);
  margin-top: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 8px;
}
.status-cell { display: flex; flex-direction: column; gap: 2px; }
.status-k {
  font-size: .76em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.status-v {
  font-weight: 700;
  font-size: .98em;
  color: var(--ink);
}
.status-v.status-tone-positive { color: var(--ok); }
.status-v.status-tone-neutral { color: var(--ink-dim); }
.status-v.status-tone-caution { color: var(--warn); }
.status-v.status-tone-negative { color: var(--bad); }
.status-v.status-tone-gold { color: var(--gold-deep); }

.today-panel { padding-block: 10px; }
.today-panel h2 { margin-bottom: 8px; }
.today-panel .panel-btn { margin-top: 8px; padding-block: 7px; }
.col-right .panel { padding: 10px 12px; }
.col-right .panel h2 { margin-bottom: 8px; }
.col-right .panel-btn { margin-top: 8px; padding-block: 7px; }

/* ---------- today panel ---------- */
.today-headline {
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--green-deep);
}
.today-summary {
  color: var(--ink-dim);
  font-size: .95em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- snapshot ---------- */
.snap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto);
  align-items: flex-start;
  gap: 12px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.snap-row:last-child { border-bottom: 0; }
.snap-label { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: .92em; }
.snap-label .ico { width: 20px; flex: 0 0 auto; display: grid; place-items: center; color: var(--green-mid); }
.snap-label .ico .ui-icon { width: 16px; height: 16px; }
.snap-label .snap-text { min-width: 0; overflow-wrap: break-word; }
.snap-val { min-width: 90px; max-width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-weight: 600; text-align: right; overflow-wrap: break-word; font-size: .92em; }
.snap-val .status-icon { width: 14px; height: 14px; }
.snap-val.ok { color: var(--ok); }
.snap-val.warn { color: var(--warn); }
.snap-val.bad { color: var(--bad); }

/* ---------- messenger ---------- */
.messenger {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  overflow-anchor: none;
  /* the panel itself carries no tint or blur - only the header/list/input
     keep an opaque surface; the thread area is left to show the wallpaper
     through, with its own single light blur (no stacked blur from here) */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.messenger-body, .convo { overflow-anchor: none; }
.messenger-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(253, 248, 235, .72);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
}
.messenger-mode {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-dim);
  font-size: .78em;
  font-weight: 700;
}
.messenger-mode-label.active,
.messenger-mode.is-actions > span:last-child { color: var(--green-deep); }
.messenger-mode-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: rgba(58, 84, 54, .2);
  box-shadow: inset 0 0 0 1px rgba(58, 84, 54, .18);
  transition: background .16s ease, box-shadow .16s ease;
}
.messenger-mode-toggle span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFDF4;
  box-shadow: 0 1px 4px rgba(35, 55, 30, .3);
  transition: transform .18s ease;
}
.messenger-mode-toggle[aria-checked="true"] { background: var(--green-mid); box-shadow: inset 0 0 0 1px var(--green-deep); }
.messenger-mode-toggle[aria-checked="true"] span { transform: translateX(16px); }
.messenger-mode-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.messenger-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
}

/* Shared close crop for human portraits in Messenger and Contacts. The high-
   resolution source stays sharp; a small downward shift keeps the top of the
   head visible while the face fills more of the circular frame. */
.portrait-frame {
  --portrait-zoom: 1.41;
  --portrait-x: 0%;
  --portrait-y: 6%;
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid var(--line-gold);
  border-radius: 50%;
  background: var(--panel-light);
  box-shadow: 0 1px 4px rgba(40, 60, 35, .2);
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate(var(--portrait-x), var(--portrait-y)) scale(var(--portrait-zoom));
  transform-origin: 50% 50%;
}
.messenger .portrait-frame { --portrait-zoom: 1.25; --portrait-y: 9%; }

.msg-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  border-right: 1px solid var(--line-soft);
  padding: 8px 8px;
  background: rgba(253, 248, 235, .72);
}
.msg-item { flex: 0 0 auto; }
/* the space under the last conversation is intentional, not empty: a quiet
   place line and the next event sit at the bottom of the list column */
.msg-list-foot {
  margin-top: auto;
  padding: 14px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.msg-list-foot span:first-child {
  font-family: var(--serif);
  font-weight: 600;
  font-size: .82em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.msg-list-foot span:last-child {
  font-size: .82em;
  color: var(--ink-faint);
}
.msg-item {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border-radius: var(--r-card);
  border: 1px solid transparent;
  margin-bottom: 4px;
  position: relative;
  transition: background .14s ease, border-color .18s ease, box-shadow .18s ease, transform .09s ease;
}
.msg-item:active { transform: scale(.98); }
.msg-item:hover { background: rgba(58, 84, 54, .09); }
.msg-item.active { background: linear-gradient(180deg, rgba(247, 231, 190, 1), rgba(234, 212, 160, .96)); border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(184, 134, 11, .35), 0 2px 7px rgba(160, 125, 50, .28); }
.msg-item .avwrap { position: relative; flex: 0 0 auto; }
.msg-item .portrait-frame { width: 38px; height: 38px; }
.msg-item .who { font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.msg-item .when { font-size: .78em; color: var(--ink-faint); font-weight: 400; white-space: nowrap; }
.msg-item .preview {
  font-size: .88em;
  color: var(--ink-dim);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.msg-item .txtcol { min-width: 0; flex: 1; }
.msg-item.unread .who > span:first-child { font-weight: 800; }
.msg-item.unread .preview { font-weight: 600; color: var(--ink); }
.msg-item.unread:not(.active) {
  background: rgba(239, 218, 166, .58);
  border-color: rgba(184, 134, 11, .48);
}
.msg-item.unread .when { color: var(--gold-deep); font-weight: 650; }
.msg-item .unread-badge.on-row {
  position: static;
  align-self: center;
  flex: 0 0 auto;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
}
.msg-item .online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: #35A853;
  box-shadow: 0 1px 3px rgba(40, 74, 42, .35);
}

.convo {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.convo-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(58, 84, 54, .14);
  background: rgba(253, 248, 235, .84);
  box-shadow: 0 2px 6px rgba(40, 60, 35, .08);
}
.convo-id { display: flex; align-items: center; gap: 12px; border-radius: var(--r-card); }
.convo-id:hover .name { text-decoration: underline; }
.convo-head .portrait-frame { width: 44px; height: 44px; }
.convo-head .name { font-family: var(--serif); font-weight: 700; font-size: 1.1em; color: var(--green-deep); }
.convo-head .role { font-size: .85em; color: var(--ink-dim); }
.convo-head .presence-label { white-space: nowrap; }
.convo-rel { margin-left: auto; text-align: right; min-width: 150px; }
.convo-rel .lbl { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: .78em; color: var(--ink-dim); }
.convo-rel .lbl strong { color: var(--gold-deep); }
.relationship-icon { width: 14px; height: 14px; color: var(--green-mid); }
.relationship-icon.romance { color: var(--gold-deep); }

/* staged relationship bar: shows progress within the current stage */
.rel-bar { width: 100%; height: 6px; background: rgba(62, 88, 58, .15); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.rel-bar span { display: block; height: 100%; border-radius: 3px; transition: width .4s ease; }
/* one score, one staged palette: amber through green, then gated Partner gold */
.rel-bar.t0 span { background: #BC6A45; } /* Acquaintance */
.rel-bar.t1 span { background: #C2913A; } /* Friendly */
.rel-bar.t2 span { background: #B99A3E; } /* Trusted */
.rel-bar.t3 span { background: #8C9A48; } /* Close */
.rel-bar.t4 span { background: #3F8B4C; } /* Inner Circle */
.rel-bar.t5 span { background: #2F7D42; } /* Partner */
/* romantic bonds read warm, not green: dating/flirting gets the gold tint,
   partners get the full gold-into-rose blend - different in kind at a glance */
.rel-bar.warm span { background: linear-gradient(90deg, #C2913A, #CE8791); }
.rel-bar.romance span { background: linear-gradient(90deg, #D9A93C 25%, #D97F8E); box-shadow: inset 0 0 0 1px rgba(217, 138, 150, .35); }
.convo-rel .rel-bar { width: 150px; }

.convo-thread {
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none; /* new bubbles never trigger browser scroll anchoring */
  overscroll-behavior: contain; /* wheel/touch at the ends never chains to the page */
  scroll-behavior: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* restrained frosted glass over the park wallpaper: a soft cream tint and
     a light blur, with the faintest warm gradient for depth - never opaque
     enough to read as a solid panel, but never fully bare either. Bubbles
     carry their own opaque surfaces so legibility never depends on this
     layer. */
  background: linear-gradient(180deg, rgba(253, 248, 235, .22), rgba(253, 248, 235, .19));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .96em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  position: relative;
  overflow: visible;
}
.bubble .meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: .76em; margin-top: 5px; }
.bubble-unsend {
  color: var(--gold-deep);
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bubble-unsend:hover { color: var(--green-deep); }
/* consecutive messages from the same sender in the same moment sit as a
   group: tighter gap, one timestamp on the last bubble only */
.bubble.grouped { margin-top: -6px; }
.bubble.mid-group .meta { display: none; }
.bubble.them {
  align-self: flex-start;
  background: var(--green-deep);
  color: #FAF5E4;
  box-shadow: var(--shadow-card);
}
.bubble.them .meta { color: rgba(246, 241, 224, .6); }
.bubble.me {
  align-self: flex-end;
  background: #FFFDF4;
  border: 1px solid var(--line-gold-soft);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.bubble.me .meta { color: var(--ink-faint); }
.bubble.sys {
  align-self: center;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink-faint);
  font-size: .82em;
  font-style: italic;
  padding: 2px;
}
.bubble.sys .meta { display: none; }

/* Message feedback lives inside the exact reply bubble. Every layer is
   absolute and inert, so effects cannot shift layout, scroll the thread or
   block Messenger controls. */
.bubble-effect {
  position: absolute;
  z-index: 3;
  top: -10px;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}
.bubble-effect-symbol {
  position: absolute;
  left: var(--x, 50%);
  bottom: 0;
  opacity: 0;
  font-size: 19px;
  line-height: 1;
  will-change: transform, opacity;
  animation: pbEffectSparkle 2400ms cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--effect-index) * 150ms);
}
.bubble-effect-symbol.heart {
  color: #E2798C;
  text-shadow:
    0 0 10px rgba(226, 121, 140, .85),
    0 0 22px rgba(226, 121, 140, .5),
    0 1px 3px rgba(120, 60, 45, .4);
  animation-name: pbEffectHeart;
}
.bubble-effect-symbol.sparkle {
  color: #F2CE74;
  text-shadow:
    0 0 10px rgba(242, 206, 116, .9),
    0 0 22px rgba(224, 184, 85, .55),
    0 1px 3px rgba(120, 90, 30, .35);
}
.bubble-effect-support .sparkle {
  color: #F4E9BF;
  text-shadow: 0 0 10px rgba(244, 233, 191, .9), 0 0 20px rgba(141, 179, 126, .55);
}
.bubble-effect-playful .bubble-effect-symbol,
.bubble-effect-excitement .bubble-effect-symbol { animation-duration: 2200ms; }
.bubble-effect-milestone .bubble-effect-symbol,
.bubble-effect-milestone-romantic .bubble-effect-symbol { font-size: 23px; animation-duration: 2900ms; }

/* soft golden bloom that swells behind the bubble on big moments */
.bubble-effect-burst {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 190px;
  height: 120px;
  transform: translate(-50%, 0) scale(.55);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(240, 205, 120, .55), rgba(240, 205, 120, .18) 55%, transparent 75%);
  animation: pbBurst 2200ms ease-out forwards;
}
.bubble-effect-romance .bubble-effect-burst,
.bubble-effect-milestone-romantic .bubble-effect-burst {
  background: radial-gradient(closest-side, rgba(233, 145, 160, .5), rgba(240, 205, 120, .2) 55%, transparent 75%);
}

.bubble.effect-romance { animation: pbRomanceGlow 2400ms ease-out; }
.bubble.effect-trust { animation: pbTrustPulse 2400ms ease-out; }
.bubble.effect-support { animation: pbSupportPulse 2400ms ease-out; }
.bubble.effect-playful { animation: pbPlayfulWobble 2200ms ease-out; }
.bubble.effect-excitement { animation: pbExcitementBash 2200ms ease-out; }
.bubble.effect-tension { animation: pbTensionWobble 2000ms ease-out; }
.bubble.effect-negative { animation: pbNegativeShake 2000ms ease-out; }
.bubble.effect-milestone,
.bubble.effect-milestone-romantic { animation: pbMilestoneGlow 2900ms ease-out; }

.bubble-effect-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.bubble-effect-sweep,
.bubble-effect-ripple {
  position: absolute;
  inset: -5px -9px;
  border-radius: 16px;
  pointer-events: none;
}
.bubble-effect-sweep {
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(105deg, transparent 14%, rgba(248, 222, 148, .62) 48%, transparent 82%);
  animation: pbSweep 2400ms ease-out;
}
.bubble-effect-milestone .bubble-effect-sweep,
.bubble-effect-milestone-romantic .bubble-effect-sweep { animation-duration: 2900ms; }
.bubble-effect-ripple { border: 2px solid rgba(198, 143, 54, .8); animation: pbAmberRipple 2000ms ease-out; }
.bubble-effect-negative .bubble-effect-ripple { border-color: rgba(180, 74, 70, .8); animation-name: pbRedRipple; }

@keyframes pbEffectHeart {
  0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(.5) rotate(0deg); }
  10% { opacity: 1; transform: translate3d(calc(var(--driftX, 0px) * .25), 0, 0) scale(1.25) rotate(calc(var(--spin, 0deg) * .35)); }
  22% { transform: translate3d(calc(var(--driftX, 0px) * .4), -8px, 0) scale(1.05) rotate(calc(var(--spin, 0deg) * .5)); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--driftX, 0px), calc(var(--rise, 50px) * -1), 0) scale(1.3) rotate(var(--spin, 0deg)); }
}
@keyframes pbEffectSparkle {
  0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.45) rotate(0deg); }
  12% { opacity: 1; transform: translate3d(calc(var(--driftX, 0px) * .3), -2px, 0) scale(1.3) rotate(calc(var(--spin, 0deg) * .4)); }
  30% { transform: translate3d(calc(var(--driftX, 0px) * .5), -12px, 0) scale(.95) rotate(calc(var(--spin, 0deg) * .6)); }
  48% { transform: translate3d(calc(var(--driftX, 0px) * .65), -20px, 0) scale(1.18) rotate(calc(var(--spin, 0deg) * .75)); }
  72% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--driftX, 0px), calc(var(--rise, 50px) * -1), 0) scale(1.1) rotate(var(--spin, 0deg)); }
}
@keyframes pbBurst {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.55); }
  16% { opacity: .85; transform: translate(-50%, 0) scale(1); }
  60% { opacity: .45; }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1.35); }
}
@keyframes pbRomanceGlow {
  0%, 100% { box-shadow: var(--shadow-card); }
  8%, 78% { box-shadow: 0 0 0 3px rgba(226, 121, 140, .6), 0 0 28px rgba(226, 121, 140, .55), 0 0 46px rgba(214, 169, 82, .3), var(--shadow-card); }
}
@keyframes pbTrustPulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  8%, 76% { box-shadow: 0 0 0 3px rgba(218, 175, 74, .65), 0 0 26px rgba(218, 175, 74, .5), var(--shadow-card); }
}
@keyframes pbSupportPulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  8%, 76% { box-shadow: 0 0 0 3px rgba(238, 226, 178, .7), 0 0 26px rgba(112, 165, 112, .5), var(--shadow-card); }
}
@keyframes pbPlayfulWobble {
  0%, 100% { transform: translateY(0) rotate(0); box-shadow: var(--shadow-card); }
  10% { transform: translateY(-4px) rotate(-1deg); }
  22% { transform: translateY(2px) rotate(1deg); }
  34% { transform: translateY(-2px) rotate(-.6deg); }
  14%, 72% { box-shadow: 0 0 0 3px rgba(232, 196, 106, .5), 0 0 22px rgba(232, 196, 106, .4), var(--shadow-card); }
  46%, 80% { transform: translateY(0) rotate(0); }
}
@keyframes pbExcitementBash {
  0%, 100% { transform: translateX(0) scale(1); filter: brightness(1); box-shadow: var(--shadow-card); }
  8% { transform: translateX(4px) scale(1.03); filter: brightness(1.3); }
  18% { transform: translateX(-3px) scale(1.02); filter: brightness(1.22); }
  12%, 74% { box-shadow: 0 0 0 3px rgba(240, 205, 110, .6), 0 0 26px rgba(240, 205, 110, .5), var(--shadow-card); }
  30%, 78% { transform: translateX(0) scale(1); filter: brightness(1.12); }
}
@keyframes pbTensionWobble {
  0%, 100% { transform: translateX(0); box-shadow: var(--shadow-card); }
  10% { transform: translateX(-4px); }
  20% { transform: translateX(3px); }
  30% { transform: translateX(-2px); }
  14%, 72% { box-shadow: 0 0 0 3px rgba(198, 143, 54, .5), 0 0 20px rgba(198, 143, 54, .38), var(--shadow-card); }
  44%, 80% { transform: translateX(0); }
}
@keyframes pbNegativeShake {
  0%, 100% { transform: translateX(0); box-shadow: var(--shadow-card); }
  8% { transform: translateX(-6px); }
  16% { transform: translateX(5px); }
  24% { transform: translateX(-3.5px); }
  32% { transform: translateX(2px); }
  14%, 76% { box-shadow: 0 0 0 3px rgba(176, 68, 64, .6), 0 0 24px rgba(176, 68, 64, .45), var(--shadow-card); }
  42%, 84% { transform: translateX(0); }
}
@keyframes pbMilestoneGlow {
  0%, 100% { box-shadow: var(--shadow-card); }
  6%, 82% { box-shadow: 0 0 0 4px rgba(236, 198, 104, .75), 0 0 34px rgba(228, 182, 84, .65), 0 0 60px rgba(228, 182, 84, .35), var(--shadow-card); }
}
@keyframes pbSweep {
  0% { opacity: 0; transform: translateX(-34%); }
  12% { opacity: 1; }
  74% { opacity: .8; transform: translateX(36%); }
  100% { opacity: 0; transform: translateX(52%); }
}
@keyframes pbAmberRipple {
  0% { opacity: 0; transform: scale(.97); }
  12%, 62% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes pbRedRipple {
  0% { opacity: 0; transform: scale(.97); }
  12%, 62% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .bubble.effect-active {
    animation: pbReducedGlow 1800ms ease-out !important;
  }
  .bubble-effect-symbol,
  .bubble-effect-sweep,
  .bubble-effect-ripple {
    animation: pbReducedVisible 1800ms ease-out forwards !important;
    transform: none !important;
  }
  .bubble-effect-burst { display: none; }
  @keyframes pbReducedGlow {
    0%, 100% { filter: brightness(1); box-shadow: var(--shadow-card); }
    12%, 76% { filter: brightness(1.12); box-shadow: 0 0 0 3px rgba(218, 186, 108, .55), 0 0 20px rgba(218, 186, 108, .4), var(--shadow-card); }
  }
  @keyframes pbReducedVisible {
    0%, 100% { opacity: 0; }
    12%, 76% { opacity: .9; }
  }
}

.convo-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  font-style: italic;
  text-align: center;
  align-content: center;
  gap: 8px;
}
.convo-empty-icon { width: 28px; height: 28px; opacity: .3; color: var(--green-deep); }

#compose-wrap {
  min-width: 0;
  overflow: hidden;
  background: rgba(253, 248, 235, .94);
}
.compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 6px;
  border-top: 1px solid var(--line-soft);
  background: transparent;
}
.compose-hint { background: transparent; }
.compose textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  height: 52px;
  min-height: 52px;
  max-height: 132px;
  overflow-y: hidden;
  line-height: 1.35;
  box-sizing: border-box;
  padding: 10px 12px;
  background: #FFFDF4;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  color: var(--ink);
  font-size: .96em;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.compose textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 134, 11, .12); }
.compose textarea::placeholder { color: var(--ink-faint); }
/* iPhone: any input under 16px triggers an automatic page zoom on focus,
   which shifts the entire viewport. 16px on touch devices only - desktop
   keeps the theme size. */
@media (pointer: coarse) {
  .compose textarea { font-size: 16px; }
}
.btn-send {
  width: 56px;
  height: 52px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--green-mid), var(--green-deep));
  color: #FBF7EA;
  border-radius: var(--r-card);
  font-size: 18px;
  transition: filter .12s ease, transform .09s ease;
}
.btn-send:hover { filter: brightness(1.12); }
.btn-send:active { transform: scale(.95); }
/* "message flew" gesture on send */
.btn-send.send-fly .ui-icon { animation: sendFly .28s ease; }
@keyframes sendFly {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(12px); opacity: 0; }
  55% { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.btn-send .ui-icon { width: 20px; height: 20px; }
.compose-hint {
  flex: 0 0 auto;
  padding: 0 16px 8px;
  font-size: .78em;
  color: var(--ink-faint);
  transition: opacity .3s ease;
}
.compose-hint.hint-hide { opacity: 0; }

/* ---------- next match ---------- */
.match-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.match-row > div { min-width: 0; }
.match-row img { width: 52px; height: 52px; object-fit: contain; }
.match-opp { font-family: var(--serif); font-weight: 700; font-size: 1.05em; color: var(--green-deep); text-wrap: balance; }
.match-sub { font-size: .88em; color: var(--ink-dim); text-wrap: pretty; }
.pressure { margin-top: 10px; }
.pressure .lbl { display: flex; justify-content: space-between; font-size: .85em; color: var(--ink-dim); margin-bottom: 4px; }
.pressure .bar { height: 5px; background: rgba(62, 88, 58, .15); border-radius: 3px; overflow: hidden; }
.pressure .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-bright), var(--bad)); border-radius: 3px; }
.col-right .match-row img { width: 46px; height: 46px; }
.col-right .pressure { margin-top: 8px; }

/* compact facts: three quiet rows, no extra chrome */
.match-facts { margin-top: 9px; border-top: 1px solid var(--line-soft); }
.match-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .86em;
}
.match-fact:last-child { border-bottom: 0; }
.match-fact .k { color: var(--ink-dim); }
.match-fact .v { display: flex; align-items: center; gap: 3px; font-weight: 600; color: var(--green-deep); }
.form-pip {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #FBF7EA;
}
.form-pip.w { background: var(--ok); }
.form-pip.l { background: var(--bad); }
.form-none { font-weight: 500; color: var(--ink-faint); font-size: .92em; }

/* ---------- tactics ---------- */
.tactics-cur { font-weight: 700; font-size: 1.05em; color: var(--green-deep); }
.tactics-form { color: var(--ink-dim); font-size: .9em; margin-top: 2px; }
.pitch {
  margin-top: 10px;
  aspect-ratio: 1665 / 897; /* matches the supplied pitch image exactly - never stretched or cropped */
  width: 100%;
  border-radius: 8px;
  background: url("../images/pitch/pitch-half.png") center center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
/* the grass sits inside the cream/gold palette instead of shouting over it:
   a warm haze plus desaturation on the background only - avatars stay crisp */
.pitch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(253, 248, 235, .18), rgba(246, 239, 219, .26));
  backdrop-filter: saturate(.72) brightness(1.04);
  -webkit-backdrop-filter: saturate(.72) brightness(1.04);
}
.pitch .dog-avatar { z-index: 1; }
.pitch-link { cursor: pointer; transition: filter .12s ease, box-shadow .12s ease; }
.pitch-link:hover, .pitch-link:focus-visible { filter: brightness(1.05); box-shadow: 0 0 0 2px var(--line-gold); }
.pitch-link:focus-visible { outline: none; }
.pitch .dog-avatar {
  position: absolute;
  width: clamp(28px, 16%, 40px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--cream);
  box-shadow: 0 2px 6px rgba(20, 30, 15, .35);
  background: var(--panel-light);
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pitch .dog-avatar:hover,
.pitch .dog-avatar:focus-visible { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 2px var(--gold), 0 3px 9px rgba(20, 30, 15, .38); outline: none; }
.pitch .dog-avatar .dog-photo-frame {
  width: 100%;
  height: 100%;
  display: block;
}
.pitch.mini .dog-avatar { width: clamp(30px, 11%, 52px); }
.col-right .tactics-panel {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
}
.tactics-panel .tactics-cur { margin-bottom: 0; }
/* Dashboard preview: show the complete supplied pitch at its native ratio.
   Formation percentages are shared and remain untouched. */
.tactics-panel .pitch {
  width: min(100%, 420px);
  margin: 8px auto 0;
  aspect-ratio: 1665 / 897;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(253, 248, 235, .92);
  box-shadow: 0 3px 9px rgba(35, 55, 30, .18);
}
.tactics-panel .panel-btn { margin-top: auto; }
.tactics-panel .pitch .dog-avatar {
  width: clamp(38px, 18%, 54px);
  border-width: 1.5px;
  box-shadow: 0 2px 5px rgba(20, 30, 15, .28);
}
.dev-relationship-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background: rgba(255, 253, 244, .7);
}
.dev-relationship-control input,
.dev-relationship-control button { grid-column: 1 / -1; }
@media (min-width: 1001px) {
  .col-right .tactics-panel { flex: 0 1 auto; }
  .tactics-panel .pitch {
    flex: 0 1 auto;
    min-height: 0;
    height: clamp(220px, 38vh, 460px);
    width: 100%;
    max-width: none;
    margin-block: 8px;
    aspect-ratio: auto;
    background-size: cover;
  }
  .tactics-panel .panel-btn {
    flex: 0 0 auto;
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .pitch .dog-avatar { width: clamp(28px, 12%, 50px); }
}

/* ---------- Pawball Radio ---------- */
.radio-wrap { position: relative; flex: 0 0 auto; }
.radio-toggle { overflow: hidden; }
.radio-symbol { display: flex; transform: translateY(-1px); }
.radio-eq {
  position: absolute;
  left: 50%;
  bottom: 3px;
  height: 7px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .15s ease;
}
.radio-eq span {
  width: 2px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-deep);
}
.radio-toggle.is-playing .radio-eq { opacity: .9; }
.radio-toggle.is-playing .radio-eq span { animation: radioPulse .8s ease-in-out infinite alternate; }
.radio-toggle.is-playing .radio-eq span:nth-child(2) { animation-delay: -.35s; }
.radio-toggle.is-playing .radio-eq span:nth-child(3) { animation-delay: -.6s; }
@keyframes radioPulse { to { height: 7px; } }

.radio-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(280px, calc(100vw - 24px));
  padding: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--r-panel);
  box-shadow: 0 12px 30px rgba(35, 55, 30, .28);
}
.radio-popover[hidden] { display: none; }
.radio-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.radio-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.12em;
  color: var(--green-deep);
}
.radio-power {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--r-pill);
  color: var(--green-deep);
  background: var(--cream-2);
  font-size: .78em;
  font-weight: 700;
}
.radio-power[aria-pressed="true"] { color: #FBF7EA; background: var(--green-btn); }
.radio-now-label { margin-top: 12px; color: var(--ink-faint); font-size: .76em; text-transform: uppercase; letter-spacing: .1em; }
.radio-track { margin-top: 2px; font-family: var(--serif); font-weight: 700; color: var(--green-deep); }
.radio-status { min-height: 1.3em; margin-top: 2px; color: var(--ink-dim); font-size: .78em; }
.radio-status.error { color: var(--bad); }
.radio-controls { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0; }
.radio-controls button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #FBF7EA;
  background: var(--green-btn);
  border: 1px solid var(--line-gold-soft);
  border-radius: 50%;
  font-size: 11px;
}
.radio-controls .radio-play { width: 38px; height: 38px; font-size: 13px; }
.radio-controls button:hover, .radio-power:hover { filter: brightness(1.08); }
.radio-controls .ui-icon { width: 13px; height: 13px; }
.radio-controls .radio-play .ui-icon { width: 15px; height: 15px; }
.radio-volume { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; font-size: .82em; color: var(--ink-dim); }
.radio-volume input { width: 100%; accent-color: var(--gold-deep); }

@media (max-width: 700px) {
  .radio-popover { position: fixed; top: 72px; right: 12px; }
}

/* ---------- club log ---------- */
.log-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .92em;
}
.log-row:last-child { border-bottom: 0; }
.log-row .d { color: var(--ink-faint); white-space: nowrap; font-size: .88em; }

/* ---------- character cards ---------- */
.char-card {
  flex: 0 0 auto;
  width: var(--contact-card-width, clamp(90px, 7.2vw, 110px));
  padding: 9px 5px 5px;
  background: var(--panel-contact);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.char-card:last-child { scroll-snap-align: end; }
.char-card:hover { transform: translateY(-4px) scale(1.03); border-color: var(--line-gold); box-shadow: 0 10px 20px rgba(40, 60, 35, .3); }
.char-card:active { transform: translateY(-1px) scale(.95); }
.char-card.selected { border-color: var(--line-gold); box-shadow: 0 0 0 1px var(--line-gold), 0 0 10px rgba(200, 155, 60, .35); }
.char-card .avwrap { position: relative; display: inline-block; margin: 1px auto 3px; }
.char-card .portrait-frame {
  box-shadow: 0 1px 4px rgba(40, 60, 35, .2);
  width: clamp(42px, 3.6vw, 54px);
  height: clamp(42px, 3.6vw, 54px);
  border-radius: 50%;
  display: block;
}
/* contact portraits zoom in further than the messenger's shared crop, so
   faces read clearly at this small size */
.char-card .portrait-frame { --portrait-zoom: 1.34; --portrait-y: 9%; }
.char-card .nm {
  font-weight: 700;
  font-size: .95em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* fixed-height role row: reserves space for exactly two lines regardless of
   whether the label is one word or two, so nothing below it ever shifts */
.char-card .rl {
  font-size: .78em;
  line-height: 1.3;
  color: var(--ink-dim);
  min-height: 2.6em;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.char-card .md { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: .8em; margin-top: 2px; font-weight: 600; white-space: nowrap; min-height: 15px; }
.char-card .md .status-icon { width: 13px; height: 13px; }
.char-card .md.good { color: var(--ok); }
.char-card .md.mid { color: var(--warn); }
.char-card .md.poor { color: var(--bad); }
/* contact cards show unread status only - no online/available indicator here.
   Attached to the portrait's own top-right edge (not the wider card edge) with
   a small inset, via the shared .unread-badge component. */
.char-card .unread-badge.on-portrait {
  top: -3px;
  right: -3px;
  box-shadow: 0 0 6px rgba(198, 75, 60, .5);
  z-index: 2;
}

/* ---------- views / modal ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(46, 66, 46, .35);
  z-index: 40;
}
.modal {
  position: relative;
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  background: rgba(253, 248, 235, .9);
  border: 1px solid var(--line-gold-soft);
  border-radius: var(--r-panel);
  box-shadow: 0 14px 40px rgba(35, 55, 30, .3);
  padding: clamp(16px, 2vw, 26px);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: rgba(253, 248, 235, .92);
  color: var(--green-deep);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transition: background .12s ease, border-color .12s ease;
}
.modal-close:hover { background: var(--cream-2); border-color: var(--gold); }
.modal h3 {
  margin: 0 0 4px;
  padding-right: 42px;
  font-family: var(--serif);
  font-size: 1.4em;
  color: var(--green-deep);
}
.modal .sub { color: var(--ink-dim); margin-bottom: 14px; }
.modal .body { font-size: 1em; }
.modal .body p { margin-bottom: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- character profile pages ---------- */
.modal.profile-modal { width: min(780px, 94vw); }
.p-layout { display: grid; grid-template-columns: 236px 1fr; gap: 22px; align-items: start; }
.p-hero { text-align: center; }
.dog-photo-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--panel-light);
}
.dog-photo-frame img {
  position: absolute;
  width: calc(100% * var(--dog-zoom, 1.4));
  height: calc(100% * var(--dog-zoom, 1.4));
  max-width: none;
  left: var(--dog-left, -20%);
  top: var(--dog-top, -12%);
  object-fit: cover;
}
.dog-mabel { --dog-zoom: 2.2; --dog-left: -60%; --dog-top: -16%; }
.dog-pearl { --dog-zoom: 1.72; --dog-left: -36%; --dog-top: -29%; }
.dog-clarence { --dog-zoom: 1.7; --dog-left: -35%; --dog-top: -10%; }
.dog-daisy { --dog-zoom: 1.38; --dog-left: -19%; --dog-top: -9%; }
.dog-archie { --dog-zoom: 1.78; --dog-left: -39%; --dog-top: -34.5%; }
.dog-teddy { --dog-zoom: 1.72; --dog-left: -36%; --dog-top: -20.5%; }
.p-hero .dog-photo-frame {
  width: 100%;
  max-width: 236px;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  border: 2px solid var(--line-gold);
  box-shadow: var(--shadow-panel);
}
.p-hero img {
  width: 100%;
  max-width: 236px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid var(--line-gold);
  box-shadow: var(--shadow-panel);
  background: var(--panel-light);
}
/* the profile hero shows the whole photograph - no zoom, no crop */
.p-hero .dog-photo-frame img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  left: auto;
  top: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.p-hero .nm { font-family: var(--serif); font-weight: 700; font-size: 1.45em; color: var(--green-deep); margin-top: 10px; }
.p-hero .rl { color: var(--ink-dim); margin-top: 1px; }
.p-hero .md { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; font-weight: 600; }
.p-hero .md .status-icon { width: 13px; height: 13px; }
.p-hero .group-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border: 1px solid var(--line-gold-soft);
  border-radius: 999px;
  background: var(--panel-light);
  font-size: .8em;
  letter-spacing: .04em;
  color: var(--gold-deep);
  font-weight: 700;
}
.p-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.p-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.p-section .group-label { margin-bottom: 6px; }
.p-section p { margin: 0 0 6px; }
.chip {
  display: inline-block;
  padding: 3px 11px;
  margin: 2px 5px 3px 0;
  border: 1px solid var(--line-gold-soft);
  border-radius: 999px;
  background: var(--panel-light);
  font-size: .84em;
  color: var(--green-deep);
}
.p-msg { display: flex; gap: 8px; padding: 4px 0; font-size: .92em; }
.p-msg .who { flex: 0 0 auto; font-weight: 700; color: var(--gold-deep); }
.p-msg .tx { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) {
  .p-layout { grid-template-columns: 1fr; }
  .p-hero img { max-width: 210px; }
}
.btn-gold {
  padding: 9px 22px;
  background: linear-gradient(180deg, var(--green-mid), var(--green-deep));
  color: #FBF7EA;
  font-weight: 800;
  border-radius: var(--r-card);
}
.btn-gold:hover { filter: brightness(1.08); }
.btn-gold:active { transform: scale(.97); }
.btn-quiet {
  padding: 9px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  color: var(--ink-dim);
  background: #FFFDF4;
}
.btn-quiet:hover { color: var(--ink); border-color: var(--gold); }
.btn-quiet:active { transform: scale(.97); }

.day-change {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.day-change:last-child { border-bottom: 0; }
.day-change .chg { font-weight: 600; white-space: nowrap; }
.day-change .chg.up { color: var(--ok); }
.day-change .chg.down { color: var(--bad); }

/* ---------- profile modal ---------- */
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.profile-head img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-gold); }
.profile-head .nm { font-family: var(--serif); font-weight: 700; font-size: 1.3em; color: var(--green-deep); }
.profile-head .rl { color: var(--ink-dim); }
.profile-head .md { margin-top: 3px; font-weight: 600; }
.stage-line { display: flex; justify-content: space-between; font-size: .88em; margin-bottom: 4px; }
.stage-line .stage { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--gold-deep); }
.profile-notes { margin-top: 12px; }
.profile-notes .group-label { margin-top: 12px; }

/* ---------- day transition ---------- */
/* warm cream wash while the day rolls over - purely visual, never blocks
   input and never enters the layout flow */
#day-dim {
  position: fixed !important;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(253, 248, 235, .92), rgba(246, 234, 205, .85));
  opacity: 0;
  transition: opacity .38s ease;
}
#day-dim.on { opacity: 1; }

#day-banner {
  position: fixed !important;
  top: 84px;
  left: 50%;
  z-index: 61;
  transform: translate(-50%, -22px) scale(.94);
  pointer-events: none;
  min-width: 260px;
  max-width: 420px;
  padding: 14px 26px;
  text-align: center;
  background: var(--panel-light);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
}
#day-banner.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
#day-banner .date {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.15em;
  color: var(--green-deep);
}
#day-banner .sub { margin-top: 3px; font-size: .88em; color: var(--ink-dim); }

/* the date pill slides its new value in softly */
@keyframes dateSwap {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
#status-date.swap { display: block; animation: dateSwap .55s ease; }

/* ---------- shared phase-transition modal (breaks / season review / new season) ---------- */
.modal.phase-modal { width: min(600px, 94vw); }
.phase-modal .phase-dates {
  color: var(--ink-dim);
  font-size: .88em;
  margin: -6px 0 12px;
}
.phase-modal .t-fx { border-bottom: 1px solid var(--line-soft); }
.phase-modal .t-fx:last-child { border-bottom: 0; }
.phase-modal .day-change .chg { font-size: .95em; }

/* ---------- tactics modal ---------- */
/* pitch.mini now inherits sizing from .pitch's own aspect-ratio */
.tactic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 10px; }
.tactic-card {
  padding: 11px 4px;
  text-align: center;
  font-weight: 700;
  font-size: .92em;
  color: var(--green-deep);
  background: var(--panel-light);
  border: 1px solid var(--line-gold-soft);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .09s ease;
}
.tactic-card:hover { border-color: var(--line-gold); }
.tactic-card:active { transform: scale(.98); }
.tactic-card.selected {
  background: var(--gold-tint);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--green-deep);
}
.t-fx { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .92em; }
.t-fx span:first-child { color: var(--ink-dim); flex: 0 0 auto; }
.t-fx span:last-child { text-align: right; font-weight: 650; color: var(--ink-dim); }
.t-fx .effect-positive { color: var(--ok); }
.t-fx .effect-neutral { color: #4E514E; }
.t-fx .effect-caution,
.t-fx .effect-mixed { color: #9A6A18; }
.t-fx .effect-negative { color: #A4473F; }
@media (max-width: 640px) { .tactic-grid { grid-template-columns: repeat(2, 1fr); } }

/* consequence toast */
#app > .toast-wrap {
  position: absolute !important; /* never in the flex flow - see layout.css note */
  /* bottom-right: the consequence layer never collides with the day banner */
  bottom: 24px;
  right: 22px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  animation: toastIn .35s cubic-bezier(.22, .61, .36, 1);
  min-width: 220px;
  max-width: 320px;
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-panel);
  font-size: .92em;
}
.toast .t { font-weight: 700; color: var(--green-deep); margin-bottom: 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px) scale(.95); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastOut .25s ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(8px); } }

/* simple grid views (Dogs / Contacts / Reports / Schedule) */
.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.view-panel { max-height: 100%; overflow-y: auto; }
.group-label {
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 16px 0 8px;
}
.group-label:first-child { margin-top: 0; }
.big-card {
  padding: 14px 10px;
  background: #FFFDF4;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: border-color .12s ease;
}
.big-card:hover { border-color: var(--line-gold); }
.big-card > img,
.big-card > .dog-photo-frame { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; border: 2px solid var(--line-gold); }
.big-card .rel-bar { width: 80%; margin: 8px auto 0; }
.sched-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.sched-row img { width: 34px; height: 34px; object-fit: contain; }
.sched-row .d { margin-left: auto; color: var(--ink-dim); white-space: nowrap; }

.sched-phase { color: var(--ink-dim); font-size: .85em; padding-bottom: 8px; }
.sched-empty { color: var(--ink-dim); padding: 12px 4px; }
.sched-sub { margin: 18px 0 6px; font-weight: 600; }

.table-row {
  display: grid;
  grid-template-columns: 22px 24px 1fr 28px 62px 40px 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .9em;
}
.table-row.me { background: var(--gold-soft, rgba(200,160,60,.14)); border-radius: 6px; }
.table-row img { width: 22px; height: 22px; object-fit: contain; }
.table-row .pos { color: var(--ink-dim); text-align: right; }
.table-row .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-row .st { color: var(--ink-dim); text-align: right; }
.table-row .st.pts { color: inherit; font-weight: 700; }

.typing.bubble {
  width: 54px;
  min-height: 34px;
  padding: 10px 13px;
}
.typing-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 13px;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .62;
  animation: messengerTypingDot 1.5s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .16s; }
.typing-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes messengerTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .48; }
  30% { transform: translateY(-4px); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span {
    animation: none !important;
    transform: none !important;
    opacity: .75;
  }
}

.reply-failed {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 8px;
  padding: 7px 10px;
  color: var(--bad);
  background: rgba(255, 253, 244, .9);
  border: 1px solid rgba(159, 76, 58, .3);
  border-radius: 10px;
  font-size: .83em;
}
.reply-failed button {
  color: var(--green-deep);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reply-failed button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Stage 2: dashboard life ---------- */

/* dashboard entrance: hud fades first, panels rise in sequence. Guarded so
   reduced-motion users never see stuck opacity:0 panels. */
@media (prefers-reduced-motion: no-preference) {
  #app.boot .hud { opacity: 0; animation: pbBootFade .25s ease-out forwards; }
  #app.boot .col-left > .panel,
  #app.boot .messenger,
  #app.boot .col-right > .panel,
  #app.boot .strip { opacity: 0; animation: pbPanelIn .55s cubic-bezier(.22, .61, .36, 1) forwards; }
  #app.boot .col-left > .panel:nth-child(1) { animation-delay: .2s; }
  #app.boot .col-left > .panel:nth-child(2) { animation-delay: .32s; }
  #app.boot .col-left > .panel:nth-child(3) { animation-delay: .44s; }
  #app.boot .messenger { animation-delay: .38s; }
  #app.boot .col-right > .panel:nth-child(1) { animation-delay: .5s; }
  #app.boot .col-right > .panel:nth-child(2) { animation-delay: .62s; }
  #app.boot .strip { animation-delay: .74s; }
}
@keyframes pbBootFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pbPanelIn { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }

/* value change: new value rises in, then a brief glow in its own tone colour */
.value-changed { display: inline-block; animation: pbValueChanged 1.5s ease-out; }
@keyframes pbValueChanged {
  0% { opacity: 0; transform: translateY(9px); }
  20% { opacity: 1; transform: translateY(0) scale(1.12); }
  30%, 70% { text-shadow: 0 0 4px currentColor, 0 0 18px currentColor; transform: scale(1.12); }
  100% { text-shadow: none; transform: scale(1); }
}

/* time of day carries a quiet colour identity */
.status-time { transition: color .3s ease; }
.status-time.tod-0 { color: var(--gold); }
.status-time.tod-1 { color: var(--gold-deep); }
.status-time.tod-2 { color: #75567A; }
.status-time.swap { display: inline-block; animation: pbValueChanged 1.5s ease-out; }

/* modal entrance / exit */
.overlay { animation: pbOverlayIn .2s ease-out; }
.overlay .modal { animation: pbModalIn .28s cubic-bezier(.22, .61, .36, 1); }
.overlay.closing { animation: pbOverlayOut .15s ease-in forwards; }
.overlay.closing .modal { animation: pbModalOut .15s ease-in forwards; }
@keyframes pbOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pbModalIn { from { opacity: 0; transform: scale(.88) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pbOverlayOut { to { opacity: 0; } }
@keyframes pbModalOut { to { opacity: 0; transform: scale(.97); } }

/* live bubble entrances - skipped whenever an emotional effect owns the
   bubble's animation slot */
.bubble.bubble-in-them:not(.effect-active) { animation: pbBubbleIn .34s cubic-bezier(.22, .61, .36, 1) backwards; }
.bubble.bubble-in-me:not(.effect-active) { animation: pbBubbleIn .26s cubic-bezier(.22, .61, .36, 1) backwards; }
@keyframes pbBubbleIn { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }

/* typing bubble breathes in and out instead of teleporting */
.typing.bubble { transform-origin: 0 100%; animation: pbTypingIn .3s cubic-bezier(.34, 1.4, .64, 1); }
.typing.bubble.typing-out { animation: pbTypingOut .15s ease-in forwards; }
@keyframes pbTypingIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes pbTypingOut { to { opacity: 0; transform: scale(.7); } }

/* thread header while a reply is being written */
.presence-label.is-typing { color: var(--gold-deep); font-style: italic; }

/* ---------- Stage 3: state theatre ---------- */

/* Next Match urgency ramp */
.match-panel { position: relative; overflow: hidden; transition: border-color .4s ease, box-shadow .4s ease; }
.match-panel.match-soon { border-color: var(--line-gold); }
.match-panel.match-soon h2 { color: var(--gold-bright); }
.match-panel.match-day {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(217, 169, 60, .45), 0 0 22px rgba(217, 169, 60, .3), var(--shadow-panel);
}
.match-panel.match-day h2 { color: var(--gold-bright); }
.match-panel.match-day::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(233, 190, 90, 1), transparent);
  transform: translateX(-100%);
  animation: pbMatchShimmer 3s ease-in-out 3;
}
@keyframes pbMatchShimmer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* post-match result flash on the panel: one glow in the result's colour */
.match-panel.result-win { animation: pbResultWin 1.4s ease-out; }
.match-panel.result-draw { animation: pbResultDraw 1.4s ease-out; }
.match-panel.result-loss { animation: pbResultLoss 1.4s ease-out; }
@keyframes pbResultWin {
  12% { transform: scale(1.02); }
  12%, 65% { box-shadow: 0 0 0 4px rgba(62, 142, 79, .75), 0 0 44px rgba(62, 142, 79, .65), var(--shadow-panel); }
  30% { transform: scale(1); }
}
@keyframes pbResultDraw {
  12%, 65% { box-shadow: 0 0 0 4px rgba(197, 152, 58, .7), 0 0 40px rgba(197, 152, 58, .55), var(--shadow-panel); }
}
@keyframes pbResultLoss {
  8% { transform: translateX(-5px); }
  16% { transform: translateX(4px); }
  24% { transform: translateX(0); }
  12%, 65% { box-shadow: 0 0 0 4px rgba(192, 97, 78, .75), 0 0 44px rgba(192, 97, 78, .6), var(--shadow-panel); }
}

/* tactic change: avatars glide to their new positions instead of teleporting */
.pitch .dog-avatar { transition: left .7s cubic-bezier(.45, 0, .25, 1), top .7s cubic-bezier(.45, 0, .25, 1); }

/* pressure bar moves visibly when it changes */
.pressure .bar span { transition: width .5s ease-out; }

/* relationship milestone: one gold shimmer across the contact's row and card */
.rel-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 25%, rgba(244, 210, 122, .65) 50%, transparent 75%);
  transform: translateX(-110%);
  animation: pbRelShimmer 1.1s ease-out forwards;
}
@keyframes pbRelShimmer { to { transform: translateX(110%); } }
.convo-rel.stage-changed .rel-bar { animation: pbStageGlow .6s ease-out; }
.convo-rel.stage-changed .rel-bar.romance,
.convo-rel.stage-changed .rel-bar.warm { animation-name: pbStageGlowRose; }
@keyframes pbStageGlow { 25%, 70% { box-shadow: 0 0 0 2px rgba(218, 175, 74, .9), 0 0 20px rgba(218, 175, 74, .9); } }
@keyframes pbStageGlowRose { 25%, 70% { box-shadow: 0 0 0 2px rgba(217, 138, 150, .9), 0 0 20px rgba(217, 138, 150, .9); } }

/* unread arrival: one stronger amber flash on the row, badge springs in */
.msg-item.unread-arrive { animation: pbUnreadFlash .9s ease-out; }
@keyframes pbUnreadFlash {
  0%, 35% { box-shadow: inset 0 0 0 999px rgba(232, 196, 106, .55), 0 0 14px rgba(217, 169, 60, .5); }
  100% { box-shadow: inset 0 0 0 999px transparent; }
}
.unread-badge.badge-spring { animation: pbBadgeSpring .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pbBadgeSpring { 0% { transform: scale(0); } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* contact coming online: a single pulse, never ambient */
.online-dot.pulse { animation: pbDotPulse .6s ease-out; }
@keyframes pbDotPulse { 40% { transform: scale(1.9); box-shadow: 0 0 10px rgba(53, 168, 83, .8); } 100% { transform: scale(1); } }

/* ---------- Stage 4: refinement ---------- */

/* settings demoted to a utility icon beside Continue */
.hud-continue { gap: 10px; }
.hud-icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-dim);
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .09s ease;
}
.hud-icon-btn .ui-icon { width: 17px; height: 17px; }
.hud-icon-btn:hover { color: var(--ink); background: rgba(58, 84, 54, .10); }
.hud-icon-btn:active { transform: scale(.94); }
.hud-icon-btn.active { color: var(--green-deep); background: var(--gold-tint); border-color: var(--line-gold-soft); }

/* the thread warms almost imperceptibly for romantic bonds and cools for
   strained ones - a whisper, never a statement */
.convo-thread { transition: background .8s ease; }
.convo-thread.romance-tint { background: linear-gradient(180deg, rgba(253, 243, 238, .26), rgba(253, 245, 238, .21)); }
.convo-thread.strain-tint { background: linear-gradient(180deg, rgba(242, 246, 242, .24), rgba(240, 244, 240, .19)); }

/* ---------- v5.1.31 micro-interaction pass ---------- */

/* chevrons acknowledge intent: every "View X ›" button nudges its arrow
   toward the destination on hover */
.panel-btn > span:last-child { transition: transform .18s cubic-bezier(.4, 0, .2, 1); }
.panel-btn:hover > span:last-child { transform: translateX(3px); }
.panel-btn:active > span:last-child { transform: translateX(1px); }

/* the primary Continue button lifts a breath on hover before its press */
.btn-continue:hover { transform: translateY(-1px); }
.btn-continue:active { transform: translateY(0) scale(.94); }

/* conversation rows lift toward the cursor like the contact cards do -
   the whole Messenger answers the pointer with the same physical language */
.msg-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(40, 60, 35, .16);
}
.msg-item:active { transform: translateY(0) scale(.98); box-shadow: none; }

/* the close control turns as it is considered */
.modal-close { transition: background .12s ease, border-color .12s ease, transform .25s cubic-bezier(.4, 0, .2, 1); }
.modal-close:hover { transform: rotate(90deg); }

/* ---------- signpost ----------
   The former Dogs nav link, now a living surface in the left column. It sits
   in the column's own flex flow directly below the panel above it, so its gap
   is the same 8px every other card uses - no extra padding, no drift. */
.signpost {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 10px 12px 11px;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.signpost:hover {
  transform: translateY(-2px);
  border-color: var(--line-gold);
  box-shadow: 0 8px 20px rgba(40, 60, 35, .26);
}
.signpost:active { transform: translateY(0) scale(.985); }

/* one header line: title, the live state, then the chevron */
.signpost-head { display: flex; align-items: center; gap: 8px; }
.signpost-head h2 { margin: 0; display: flex; align-items: center; flex: 0 0 auto; }
.signpost-note {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: .84em;
  font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.signpost-note .ok { color: var(--ok); }
.signpost-note .mid { color: var(--warn); }
.signpost-note .poor { color: var(--bad); }
.signpost-go {
  flex: 0 0 auto;
  color: var(--gold-deep);
  font-weight: 700;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.signpost:hover .signpost-go { transform: translateX(3px); }

/* every face on one row, evenly spread to the card's own edges */
.signpost-faces { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.signpost-face {
  flex: 1 1 0;
  min-width: 0;
  max-width: 40px;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  border: 1.5px solid var(--line-gold);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(40, 60, 35, .2);
  transition: transform .16s ease;
}
.signpost:hover .signpost-face { transform: translateY(-1px); }
.signpost-face .dog-photo-frame { width: 100%; height: 100%; border-radius: 50%; }

/* ---------- clickable panel heading ----------
   A panel title that is also a destination. It keeps the exact typography of
   every other h2 and adds only a chevron and a hover underline, so nothing
   about the panel's weight or rhythm changes. */
.panel-h2-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  transition: color .14s ease;
}
.panel-h2-link:hover { color: var(--gold-deep); }
.panel-h2-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 14px;
  bottom: -3px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.panel-h2-link:hover::after { transform: scaleX(1); }
.panel-h2-go {
  font-size: 1.1em;
  line-height: 1;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.panel-h2-link:hover .panel-h2-go { transform: translateX(2px); }

/* ---------- Game Management: save/load slots (Task 2) ---------- */
.save-actions { display: flex; flex-direction: column; gap: 8px; }
.save-slot-list { display: flex; flex-direction: column; gap: 10px; }
.save-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border: 1px solid var(--line-gold); border-radius: var(--r-card, 11px);
  background: var(--panel-light);
}
.save-slot.is-empty { border-style: dashed; background: var(--cream-2); opacity: .9; }
.save-slot-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.save-slot-main strong { color: var(--green-deep); font-size: 1.02em; }
.save-slot-main .d { font-size: .72em; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.save-slot-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: .82em; color: var(--ink-dim); }
.save-slot-time { font-size: .76em; color: var(--ink-faint); margin-top: 2px; }
.save-slot-action { flex: 0 0 auto; }
.save-slot-action .slot-btn { white-space: nowrap; }
.slot-empty-tag { font-size: .82em; color: var(--ink-faint); }
.save-empty-state {
  padding: 20px; border: 1px dashed var(--line-gold); border-radius: var(--r-card, 11px);
  color: var(--ink-dim); font-size: .92em; text-align: center;
}
.save-success { padding: 6px 2px; color: var(--green-deep); font-size: .95em; }
.save-error { padding: 6px 2px; color: var(--red); font-size: .95em; }