/* ════════════════════════════════════════════════
   FF UNIVERSAL — ICON BAR
════════════════════════════════════════════════ */
.ff-icon-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 6px;
}
.ff-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  background: #fff;
  flex-shrink: 0;
}
.ff-icon-btn:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
/* Tooltip */
.ff-icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #101820;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Nunito Sans', sans-serif;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: 9999;
}
.ff-icon-btn::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #101820;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9999;
}
.ff-icon-btn:hover::after,
.ff-icon-btn:hover::before,
.ff-icon-btn:focus-visible::after,
.ff-icon-btn:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.ff-icon-btn:hover::before,
.ff-icon-btn:focus-visible::before { transform: translateX(-50%); }
.ff-icon-btn:focus-visible { outline: 2.5px solid #1b2d4f; outline-offset: 2px; }

/* ── Touch devices: hover tooltips never fire, so show a small permanent
   label under every icon and grow the tap target to ~44px. ── */
@media (hover: none) {
  .ff-icon-bar { gap: 8px; align-items: flex-start; flex-wrap: wrap; }
  .ff-icon-btn {
    width: auto; min-width: 46px; height: auto; min-height: 44px;
    flex-direction: column; gap: 3px; padding: 7px 6px 4px;
  }
  .ff-icon-btn::before { display: none; }
  .ff-icon-btn::after {
    position: static; transform: none; opacity: 1;
    background: transparent; color: #5a6673;
    font-size: 8.5px; font-weight: 800; letter-spacing: .2px;
    padding: 0; max-width: 62px; white-space: normal;
    text-align: center; line-height: 1.15;
  }
  .ff-icon-btn:hover { transform: none; box-shadow: none; }
}

/* ── Name Picker — teal ── */
.ff-ib-namepick { border-color: #00b09b; background: #eef9f6; }
.ff-ib-namepick svg { stroke: #00816e; }
.ff-ib-namepick:hover { background: #00b09b; border-color: #008a7a; box-shadow: 0 6px 16px rgba(0,176,155,.4); }
.ff-ib-namepick:hover svg { stroke: #fff; }

/* ── Draw — lime ── */
.ff-ib-draw { border-color: #cedc00; background: #f5f9cc; }
.ff-ib-draw svg { stroke: #6b7300; }
.ff-ib-draw:hover { background: #cedc00; border-color: #aab800; box-shadow: 0 6px 16px rgba(206,220,0,.4); }
.ff-ib-draw:hover svg { stroke: #3a4200; }
.ff-ib-draw.ff-active { background: #cedc00; border-color: #aab800; }
.ff-ib-draw.ff-active svg { stroke: #3a4200; }

/* ── Randomizers — indigo ── */
.ff-ib-rand { border-color: #818cf8; background: #eef2ff; }
.ff-ib-rand svg { stroke: #4338ca; }
.ff-ib-rand:hover { background: #6366f1; border-color: #4338ca; box-shadow: 0 6px 16px rgba(99,102,241,.4); }
.ff-ib-rand:hover svg { stroke: #fff; }

/* ── Try This — coral ── */
.ff-ib-trythis { border-color: #f87171; background: #fff5f5; }
.ff-ib-trythis svg { stroke: #dc2626; }
.ff-ib-trythis:hover { background: #ef4444; border-color: #dc2626; box-shadow: 0 6px 16px rgba(239,68,68,.4); }
.ff-ib-trythis:hover svg { stroke: #fff; }

/* ── Crown — gold filled ── */
.ff-ib-crown { border-color: #f5c400; background: #fef9e0; }
.ff-ib-crown svg { fill: #f5c400; stroke: #7a5c00; }
.ff-ib-crown:hover { background: #f5c400; border-color: #d4a000; box-shadow: 0 6px 16px rgba(245,196,0,.4); }
.ff-ib-crown:hover svg { fill: #fff; stroke: #7a5c00; }

/* ── Spanish Flip — purple ── */
.ff-ib-spanish { border-color: #8b5cf6; background: #ede9fe; }
.ff-ib-spanish svg { stroke: #5b21b6; }
.ff-ib-spanish:hover { background: #8b5cf6; border-color: #7c3aed; box-shadow: 0 6px 16px rgba(139,92,246,.4); }
.ff-ib-spanish:hover svg { stroke: #fff; }
.ff-ib-spanish.ff-active { background: #8b5cf6; border-color: #7c3aed; }
.ff-ib-spanish.ff-active svg { stroke: #fff; }

/* ── First Five Plus upsell — Plus purple/lavender (added 2026-07-23) ──
   Rendered only for non-Plus users (gated in app.js getIcons on
   body.is-user-plus). The button shows the FF Plus pinwheel "5+" mark,
   CSS-cropped out of the full theme logo (mark occupies the top-left
   119x118 of the 186x150 file, starting at x=32). */
.ff-ib-plus { border-color: #7c3aed; background: #f1ecfd; }
.ff-ib-plus:hover { background: #e6dcfb; border-color: #7c3aed; box-shadow: 0 6px 16px rgba(124,58,237,.4); }
.ff-ib-plus-crop { display: block; width: 22px; height: 22px; overflow: hidden; position: relative; pointer-events: none; }
/* width/max-width/margin need !important: the theme applies
   `img{max-width:100%!important}` + a top margin to content images, which
   otherwise shrinks the crop and pushes it down so only a sliver shows. */
.ff-ib-plus-crop img { position: absolute; width: 34.4px !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; left: -5.9px; top: 0; }

/* "Coming Soon" state — icon stays visible but slightly muted with a
   "soon" badge in the corner. Lets students/teachers see the feature
   is planned for that card while still being interactive (clicking
   shows a friendly toast). */
.ff-ib-spanish.ff-coming-soon {
  opacity: .55;
  cursor: help;
}
.ff-ib-spanish.ff-coming-soon::after {
  /* Override the default tooltip text for clarity */
  content: attr(data-tip-soon);
}
.ff-ib-spanish.ff-coming-soon:hover {
  transform: translateY(-2px);
  opacity: .85;
}
.ff-spanish-soon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  pointer-events: none;
  font-family: 'Nunito Sans', sans-serif;
}

/* ── Swap It Out — green ── */
.ff-ib-swap { border-color: #34d399; background: #d1fae5; }
.ff-ib-swap svg { stroke: #065f46; }
.ff-ib-swap:hover { background: #10b981; border-color: #059669; box-shadow: 0 6px 16px rgba(16,185,129,.4); }
.ff-ib-swap:hover svg { stroke: #fff; }

/* ════════════════════════════════════════════════
   FF UNIVERSAL — DRAW CANVAS
════════════════════════════════════════════════ */
.ff-draw-wrap { position: relative; display: block; margin-top: 8px; }
.ff-draw-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: crosshair; touch-action: none; border-radius: 6px; }
.ff-draw-canvas.ff-hidden { display: none !important; }
.ff-draw-toolbar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid #eceef5;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 20px rgba(26,39,68,.14);
  flex-wrap: wrap;
}
.ff-draw-toolbar.ff-show { display: flex; }
.ff-dmt-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: 1px; text-transform: uppercase; font-family: 'Nunito Sans', sans-serif; }
.ff-dmt-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #e2e6f0; cursor: pointer; transition: transform .1s; flex-shrink: 0; }
.ff-dmt-color:hover { transform: scale(1.16); }
.ff-dmt-color.ff-sel { box-shadow: 0 0 0 2.5px #1a2744; transform: scale(1.12); }
.ff-dmt-sep { width: 1.5px; height: 26px; background: #eceef5; margin: 0 3px; flex-shrink: 0; }
.ff-dmt-size { width: 30px; height: 30px; border-radius: 10px; border: 1.5px solid #e8eaf2; background: #f7f8fc; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; padding: 0; }
.ff-dmt-size i { display: block; border-radius: 50%; background: #1a2744; }
.ff-dmt-size:hover { background: #fff; }
.ff-dmt-size.ff-sel { border-color: #1a2744; background: #fff; }
.ff-dmt-btn { background: transparent; border: none; border-radius: 10px; padding: 4px 10px; font-size: 12px; font-weight: 800; cursor: pointer; color: #8892b0; transition: all .12s; font-family: 'Nunito Sans', sans-serif; }
.ff-dmt-ico { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; }
.ff-dmt-btn:hover { background: #eef0f8; color: #1a2744; }
.ff-dmt-clear { color: #b0b6c8; }
.ff-dmt-clear:hover { background: #fdeef0; color: #ef233c; }
.ff-dmt-done { background: #00b09b; color: #fff; padding: 7px 14px; margin-left: auto; }
.ff-dmt-done:hover { background: #00987f; color: #fff; }

/* ════════════════════════════════════════════════
   FF UNIVERSAL — SKILL + TRAIT LABELS (two inline rows)
   Skills on line 1, Character traits on line 2. Each row = an inline heading
   (colored dot + label) followed by its terms, left aligned. Words always
   visible, no tooltip/key. Each term is white-space:nowrap so a label never
   breaks mid-word; the row wraps as a whole only on very narrow screens.
   Reads as activity metadata, distinct from the tappable .ff-icon-btn tools.
════════════════════════════════════════════════ */
.ff-skills-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 18px 0 6px;
}
.ff-skills-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 22px; margin-bottom: 16px;
}
.ff-skills-row:last-child { margin-bottom: 0; }
.ff-skills-lead { display: inline-flex; align-items: center; gap: 7px; }
.ff-grp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ff-grp-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; font-family: 'Nunito Sans', sans-serif;
}
.ff-skills-row.ff-grp-skill .ff-grp-dot { background: #1D9E75; }
.ff-skills-row.ff-grp-skill .ff-grp-lbl { color: #0F6E56; }
.ff-skills-row.ff-grp-trait .ff-grp-dot { background: #EF9F27; }
.ff-skills-row.ff-grp-trait .ff-grp-lbl { color: #854F0B; }
.ff-skill-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: #444;
  font-family: 'Nunito Sans', sans-serif; white-space: nowrap;
}
.ff-skill-item i { font-size: 19px; line-height: 1; flex-shrink: 0; }
.ff-skill-item .ff-ti { width: 19px; height: 19px; flex-shrink: 0; }
.ff-skills-row.ff-grp-skill .ff-skill-item i,
.ff-skills-row.ff-grp-skill .ff-skill-item .ff-ti { color: #1D9E75; }
.ff-skills-row.ff-grp-trait .ff-skill-item i,
.ff-skills-row.ff-grp-trait .ff-skill-item .ff-ti { color: #EF9F27; }

/* ════════════════════════════════════════════════
   FF UNIVERSAL — TRY THIS TOAST
════════════════════════════════════════════════ */
.ff-tt-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.96);
  width: 420px;
  max-width: 92vw;
  background: #1b2d4f;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
  font-family: 'Nunito Sans', sans-serif;
  overflow: hidden;
}
.ff-tt-toast.ff-show {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  pointer-events: auto;
}
.ff-tt-toast.ff-dragging { transition: none; transform: none; cursor: grabbing; }
.ff-tt-accent { height: 4px; background: linear-gradient(90deg,#ef4444,#ffad5f); cursor: grab; }
.ff-tt-accent:active { cursor: grabbing; }
.ff-tt-inner { padding: 14px 16px 16px; display: flex; gap: 12px; align-items: flex-start; }
.ff-tt-icon { width: 36px; height: 36px; flex-shrink: 0; background: rgba(239,68,68,.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ff-tt-content { flex: 1; min-width: 0; }
.ff-tt-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #f87171; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; cursor: grab; }
.ff-tt-eyebrow:active { cursor: grabbing; }
.ff-tt-drag-hint { color: rgba(255,255,255,.3); font-size: 9px; font-weight: 600; }
.ff-tt-card-name { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.ff-tt-text { font-size: 13px; color: rgba(255,255,255,.92); line-height: 1.6; }
.ff-tt-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.ff-tt-next { background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.45); color: #fca5a5; border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .18s; font-family: inherit; }
.ff-tt-next:hover { background: rgba(239,68,68,.45); color: #fff; }
.ff-tt-close-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .18s; font-family: inherit; margin-left: auto; }
.ff-tt-close-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

/* (Noise Meter + Exit Ticket CSS removed 2026-07-08 — their icons were
   retired and the JS is gone; nothing renders these classes anymore.) */

/* ════════════════════════════════════════════════
   FF UNIVERSAL — SWAP BAR
════════════════════════════════════════════════ */
.ff-swap-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1.5px solid #34d399;
  border-radius: 10px;
  margin: 4px 0;
  font-family: 'Nunito Sans', sans-serif;
  flex-wrap: wrap;
}
.ff-swap-bar.ff-show { display: flex; }
.ff-swap-bar-left { display: flex; align-items: center; gap: 6px; color: #065f46; font-size: 11px; font-weight: 700; min-width: 0; flex: 1; }
.ff-swap-bar-left svg { stroke: #10b981; flex-shrink: 0; }
.ff-swap-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.ff-swap-bar-right { display: flex; gap: 6px; flex-shrink: 0; }
.ff-swap-btn { border: 1.5px solid; border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .18s; }
.ff-swap-next { background: #10b981; border-color: #059669; color: #fff; }
.ff-swap-next:hover { background: #059669; }
.ff-swap-restore { background: #fff; border-color: #34d399; color: #065f46; }
.ff-swap-restore:hover { background: #dcfce7; }

/* ════════════════════════════════════════════════
   FF UNIVERSAL — SPANISH FLIP BAR
════════════════════════════════════════════════ */
.ff-spanish-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f3ff;
  border: 1.5px solid #8b5cf6;
  border-radius: 10px;
  margin: 4px 0;
  font-family: 'Nunito Sans', sans-serif;
  flex-wrap: wrap;
}
.ff-spanish-bar.ff-show { display: flex; }
.ff-spanish-bar-left { display: flex; align-items: center; gap: 7px; color: #5b21b6; font-size: 11px; font-weight: 700; min-width: 0; flex: 1; }
.ff-spanish-bar-flag { font-size: 14px; line-height: 1; }
.ff-spanish-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ff-spanish-bar-right { display: flex; gap: 6px; flex-shrink: 0; }
.ff-spanish-btn { border: 1.5px solid; border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .18s; }
.ff-spanish-restore { background: #8b5cf6; border-color: #7c3aed; color: #fff; }
.ff-spanish-restore:hover { background: #7c3aed; }

/* (The bottom-of-screen #ff-spanish-toast was removed 2026-07-08 — it could
   hide underneath the Mediavine adhesion ad. Messages use #ff-spanish-pop.) */

/* Spanish Flip — small popup anchored to the icon. Replaces the old
   bottom-of-screen toast for the "no Spanish version" message so it
   appears right next to the control the user touched. */
#ff-spanish-pop {
  position: fixed;
  background: #5b21b6;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  max-width: 220px;
  z-index: 99999;
  box-shadow: 0 6px 20px rgba(91, 33, 182, .35);
  display: none;
  pointer-events: none;
}
#ff-spanish-pop.ff-soon {
  background: #f59e0b;
  box-shadow: 0 6px 20px rgba(245, 158, 11, .35);
}

/* ════════════════════════════════════════════════
   FF UNIVERSAL — RANDOMIZERS MODAL
════════════════════════════════════════════════ */
.ff-rnd-modal {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 400px; max-width: 94vw;
  background: #fff; z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  border-radius: 16px; overflow: hidden;
  flex-direction: column;
  font-family: 'Nunito Sans', sans-serif;
}
.ff-rnd-modal.ff-open { display: flex; }
/* Never let a short/landscape screen push the ✕ or Go buttons off-screen. */
.ff-rnd-modal { max-height: calc(100vh - 20px); }
.ff-rnd-body { overflow-y: auto; }
.ff-rnd-hd { background: #1b2d4f; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; }
.ff-rnd-hd:active { cursor: grabbing; }
.ff-rnd-title { color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ff-rnd-drag { color: rgba(255,255,255,.4); font-size: 10px; font-weight: 600; }
.ff-rnd-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.ff-rnd-close:hover { background: rgba(255,255,255,.35); }
.ff-rnd-accent { height: 4px; background: linear-gradient(90deg,#6366f1,#00b09b); }
.ff-rnd-tabs { display: flex; border-bottom: 1.5px solid #f0f0f0; }
.ff-rnd-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; font-size: 12px; font-weight: 800; text-align: center; cursor: pointer; border: none; background: transparent; color: #aaa; transition: all .18s; letter-spacing: .3px; font-family: inherit; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; }
.ff-rnd-tab:hover { color: #6366f1; }
.ff-rnd-tab.ff-active { color: #6366f1; border-bottom-color: #6366f1; }
.ff-rnd-body { padding: 20px; }
.ff-rnd-panel { display: none; flex-direction: column; align-items: center; gap: 14px; }
.ff-rnd-panel.ff-active { display: flex; }
.ff-rnd-display { width: 100%; min-height: 100px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1b2d4f,#6366f1); border-radius: 14px; padding: 16px; }
.ff-rnd-result { font-size: 52px; font-weight: 900; color: #fff; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.3); transition: all .15s; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 16px; line-height: 1; }
.ff-rnd-result.ff-rolling { animation: ffRoll .06s infinite; }
@keyframes ffRoll { 0%{opacity:.25;transform:scale(.9)} 100%{opacity:1;transform:scale(1.05)} }
/* Projector-size results — a die or number should read from the back row. */
#ff-dice-result { font-size: 96px; min-height: 104px; }
#ff-dice-result .ff-die { width: 92px; height: 92px; filter: drop-shadow(0 5px 12px rgba(0,0,0,.35)); }
#ff-dice-result.ff-rolling { animation: none; }
#ff-dice-result.ff-rolling .ff-die { animation: ffDShake .45s ease-in-out infinite; }
@keyframes ffDShake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-14deg) scale(1.12)} 40%{transform:rotate(10deg) scale(.94)} 60%{transform:rotate(-8deg) scale(1.06)} 80%{transform:rotate(6deg)} }
#ff-dice-result span { display: flex; }
#ff-num-result { font-size: 76px; min-height: 84px; }
.ff-rnd-tab svg { flex: 0 0 auto; }
.ff-rnd-go { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,#6366f1,#4338ca); color: #fff; border: none; padding: 12px 32px; border-radius: 22px; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .2s; font-family: inherit; width: 100%; }
.ff-rnd-go:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(99,102,241,.4); }
.ff-rnd-go:active { transform: translateY(0); }
.ff-dice-modes { display: flex; gap: 8px; width: 100%; }
.ff-dice-mode { flex: 1; padding: 8px 6px; border-radius: 10px; border: 1.5px solid #e0e0e0; background: #fafafa; font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; transition: all .18s; font-family: inherit; color: #666; }
.ff-dice-mode:hover { border-color: #6366f1; color: #6366f1; background: #eef2ff; }
.ff-dice-mode.ff-active { background: #6366f1; border-color: #4338ca; color: #fff; }
/* Photoreal coin (same quarter art as EdBoard). .ff-coin-fb = letter-coin
   fallback used only when the art fails to load. */
.ff-coin { width: 148px; height: 148px; flex-shrink: 0; cursor: pointer; will-change: transform; }
.ff-coin img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.ff-coin-fb { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 52px; font-weight: 900; color: #fff; transition: all .3s; text-shadow: 0 1px 2px rgba(0,0,0,.25); cursor: pointer; }
.ff-coin-h { background: radial-gradient(circle at 34% 28%, #ffe58a, #f5c400 52%, #cf9d00); box-shadow: 0 6px 18px rgba(213,166,0,.45), inset 0 0 0 6px rgba(255,255,255,.35), inset 0 -8px 12px rgba(140,95,0,.35); }
.ff-coin-t { background: radial-gradient(circle at 34% 28%, #eef1f6, #c9d0dc 55%, #9aa4b6); box-shadow: 0 6px 18px rgba(90,100,128,.4), inset 0 0 0 6px rgba(255,255,255,.5), inset 0 -8px 12px rgba(70,80,105,.3); color: #2d3652; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.ff-coin-label { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .5px; font-family: 'Nunito Sans', sans-serif; }
/* margin-top reserves headroom for the #ff-spin-winner badge (app.js puts it
   at top:-38px above the wheel) — without it the badge is clipped by the
   scrolling .ff-rnd-body / hidden behind the tabs. (added 2026-07-23) */
.ff-spin-wrap { position: relative; width: 200px; height: 200px; flex-shrink: 0; margin-top: 40px; }
.ff-spin-canvas { border-radius: 50%; display: block; }
.ff-spin-needle { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 22px solid #1b2d4f; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
/* flex-wrap + the full-width #ff-spin-lists rule keep the JS-inserted
   "Use a class list" chip host on its own line — it used to share the flex
   row and squeeze the textarea to a sliver. (added 2026-07-23) */
.ff-spin-input-row { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
#ff-spin-lists { flex: 0 0 100%; }
.ff-spin-ta { flex: 1; min-width: 0; height: 70px; border: 1.5px solid #818cf8; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-family: inherit; resize: none; outline: none; color: #333; line-height: 1.6; transition: border-color .2s; }
.ff-spin-ta:focus { border-color: #6366f1; }
.ff-spin-preset { display: flex; flex-direction: column; gap: 4px; }
.ff-spin-pre-btn { background: #eef2ff; border: 1.5px solid #818cf8; border-radius: 7px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; color: #4338ca; font-family: inherit; white-space: nowrap; transition: all .18s; }
.ff-spin-pre-btn:hover { background: #6366f1; color: #fff; border-color: #4338ca; }

/* ════════════════════════════════════════════════
   FF UNIVERSAL — NAME PICKER MODAL
════════════════════════════════════════════════ */
.ff-np-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998; }
.ff-np-backdrop.ff-open { display: block; }
.ff-np-modal {
  display: none; position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 420px; max-width: 94vw;
  background: #fff; z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  border-radius: 16px; overflow: hidden;
  flex-direction: column;
  font-family: 'Nunito Sans', sans-serif;
}
.ff-np-modal.ff-open { display: flex; }
.ff-np-modal { max-height: calc(100vh - 20px); }
.ff-np-hd { background: #001b72; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; cursor: grab; user-select: none; }
.ff-np-hd:active { cursor: grabbing; }
.ff-np-title { color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ff-np-drag { color: rgba(255,255,255,.4); font-size: 10px; font-weight: 600; }
.ff-np-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.ff-np-close:hover { background: rgba(255,255,255,.35); }
.ff-np-accent { height: 4px; background: linear-gradient(90deg,#00b09b,#cedc00); }
.ff-np-body { padding: 16px; overflow-y: auto; }
.ff-np-display { min-height: 90px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#001b72,#00b09b); border-radius: 14px; margin-bottom: 14px; padding: 16px; }
.ff-np-chosen { font-size: 34px; font-weight: 900; color: #fff; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.3); transition: all .1s; }
.ff-np-chosen.ff-spinning { animation: ffNPSpin .08s infinite; }
@keyframes ffNPSpin { 0%{opacity:.3;transform:scale(.95)} 100%{opacity:1;transform:scale(1.02)} }
.ff-np-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.ff-np-tab { padding: 5px 12px; border-radius: 16px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid #cedc00; background: #f9fce8; color: #4a5800; transition: all .18s; font-family: inherit; }
.ff-np-tab:hover { background: #cedc00; color: #2a3400; }
.ff-np-tab.ff-active { background: #001b72; color: #fff; border-color: #001b72; }
.ff-np-tab.ff-add { background: #fff; border-style: dashed; color: #aaa; border-color: #ccc; }
.ff-np-tab.ff-add:hover { background: #f4f9ee; color: #00b09b; border-color: #00b09b; }
.ff-np-del { background: transparent; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 14px; margin-left: 3px; padding: 0 2px; }
.ff-np-lbl { font-size: 11px; font-weight: 700; color: #888; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.ff-np-ta { width: 100%; height: 80px; border: 1.5px solid #cedc00; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-family: inherit; resize: none; outline: none; color: #333; line-height: 1.6; transition: border-color .2s; margin-bottom: 10px; }
.ff-np-ta:focus { border-color: #00b09b; }
.ff-np-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ff-np-pick { background: linear-gradient(135deg,#001b72,#0071ce); color: #fff; border: none; padding: 10px 20px; border-radius: 20px; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; font-family: inherit; }
.ff-np-pick:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,27,114,.35); }
.ff-np-pick:disabled { opacity: .5; transform: none; cursor: not-allowed; }
.ff-np-sec { background: #f4f9ee; color: #1b4a2a; border: 1.5px solid #cedc00; padding: 10px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; font-family: inherit; }
.ff-np-sec:hover { background: #00b09b; color: #fff; border-color: #00b09b; }
.ff-np-hist { margin-top: 12px; }
.ff-np-hist-lbl { font-size: 10px; font-weight: 700; color: #bbb; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }
.ff-np-hist-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ff-np-chip { background: #f4f9ee; border: 1px solid #d4e8b0; border-radius: 10px; padding: 2px 9px; font-size: 11px; color: #555; font-weight: 600; }
.ff-np-chip.ff-recent { background: #00b09b; color: #fff; border-color: #00b09b; }
/* ════════════════════════════════════════════════
   FF UNIVERSAL — PLUS PROMPT FALLBACK (no-Bootstrap safety net)
════════════════════════════════════════════════ */
#ff-plusfb-overlay {
  position: fixed; inset: 0; background: rgba(16,24,32,.55);
  z-index: 100000; display: none; align-items: center; justify-content: center;
  padding: 16px; font-family: 'Nunito Sans', sans-serif;
}
.ff-plusfb-card {
  position: relative; background: #fff; border-radius: 16px;
  max-width: 420px; width: 100%; padding: 26px 24px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.ff-plusfb-close {
  position: absolute; top: 10px; right: 12px; background: #f0f2f5;
  border: none; width: 30px; height: 30px; border-radius: 8px;
  font-size: 18px; cursor: pointer; color: #444;
}
.ff-plusfb-title { font-size: 19px; font-weight: 900; color: #1b2d4f; margin-bottom: 8px; }
.ff-plusfb-body { font-size: 13.5px; color: #444; line-height: 1.55; margin-bottom: 16px; }
.ff-plusfb-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ff-plusfb-btn {
  flex: 1; text-align: center; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.ff-plusfb-pri { background: #1b2d4f; color: #fff !important; }
.ff-plusfb-sec { background: #eef2f6; color: #1b2d4f !important; }

/* ════════════════════════════════════════════════
   FF UNIVERSAL — REDUCED MOTION
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #ff-dice-result.ff-rolling .ff-die,
  .ff-rnd-result.ff-rolling,
  .ff-np-chosen.ff-spinning { animation: none; }
  .ff-icon-btn, .ff-icon-btn:hover { transition: none; transform: none; }
  .ff-tt-toast { transition: opacity .1s; }
}

/* ════════════════════════════════════════════════
   STREAK CHIP — right end of the first tools bar (2026-07-09)
   ════════════════════════════════════════════════ */
.ff-streak-chip{
  position:relative;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px 0 10px;
  border-radius:100rem;
  background:linear-gradient(135deg,#ff9d2e,#ff5e3a);
  color:#fff !important;
  font-family:'Nunito Sans',sans-serif;
  font-weight:800;
  font-size:13px;
  line-height:1;
  text-decoration:none !important;
  box-shadow:0 3px 10px rgba(255,94,58,.35);
  flex-shrink:0;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.ff-streak-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,94,58,.5);color:#fff}
.ff-streak-chip b{font-size:15px;font-weight:900}
.ff-streak-lbl{font-weight:800;opacity:.95;white-space:nowrap}
.ff-streak-fl{font-size:15px;display:inline-block;transform-origin:50% 85%;animation:ffStreakFlick 2.4s ease-in-out infinite}
@keyframes ffStreakFlick{0%,100%{transform:scale(1) rotate(-2deg)}25%{transform:scale(1.12) rotate(2deg)}50%{transform:scale(.96) rotate(-1deg)}75%{transform:scale(1.08) rotate(1.5deg)}}
.ff-streak-pop{animation:ffStreakPop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes ffStreakPop{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
/* Tooltip — same look as the icon buttons */
.ff-streak-chip::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 7px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#101820;
  color:#fff;
  font-size:11px;
  font-weight:700;
  font-family:'Nunito Sans',sans-serif;
  white-space:nowrap;
  padding:4px 9px;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s,transform .15s;
  z-index:9999;
}
.ff-streak-chip:hover::after,
.ff-streak-chip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.ff-streak-chip:focus-visible{outline:2.5px solid #1b2d4f;outline-offset:2px}
/* Touch devices: the bar wraps and grows — keep the chip tappable, drop the hover tooltip */
@media (hover: none){
  .ff-streak-chip{height:40px;margin-left:auto}
  .ff-streak-chip::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ff-streak-fl{animation:none}
  .ff-streak-pop{animation:none}
  .ff-streak-chip,.ff-streak-chip:hover{transition:none;transform:none}
}

/* ════════════════════════════════════════════════
   PAGE-WIDE TOOLS (added 2026-07-17) — Timer + Focus Mode icons
   Listed in every card's bar; drive one shared timer (snippet 10)
   and the theme's focus mode. Old floating entry points retired.
════════════════════════════════════════════════ */
/* ── Timer — blue ── */
.ff-ib-timer { border-color: #3b5bdb; background: #e9eeff; }
.ff-ib-timer svg { stroke: #1f3bb3; }
.ff-ib-timer:hover { background: #3b5bdb; border-color: #1f3bb3; box-shadow: 0 6px 16px rgba(59,91,219,.4); }
.ff-ib-timer:hover svg { stroke: #fff; }
.ff-ib-timer.ff-running { background: #3b5bdb; border-color: #1f3bb3; }
.ff-ib-timer.ff-running svg { stroke: #fff; }

/* ── Focus Mode — sky ── */
.ff-ib-focus { border-color: #0ea5e9; background: #e0f4fe; }
.ff-ib-focus svg { stroke: #0369a1; }
.ff-ib-focus:hover { background: #0ea5e9; border-color: #0369a1; box-shadow: 0 6px 16px rgba(14,165,233,.4); }
.ff-ib-focus:hover svg { stroke: #fff; }
.ff-ib-focus.ff-active { background: #0ea5e9; border-color: #0369a1; box-shadow: 0 0 0 2px rgba(14,165,233,.35); }
.ff-ib-focus.ff-active svg { stroke: #fff; }
/* The theme's focus mode is desktop-only (its old button never showed under 992px). */
@media (max-width: 991.98px) { .ff-ib-focus { display: none; } }
/* Retire the old floating Focus Mode button — the icon bars are the entry
   point now. Wrapper only is hidden; #focusToggle stays in the DOM because
   the theme JS (and our ffFocusBarClick) still drive it. */
body.single-first_five .focus-toggle-wrap { display: none !important; }

/* ── Eddy "what's new" bubble fix (2026-07-18) ──
   Snippet 118 anchors Eddy TOP-right on daily pages (top:96/128px), but its
   flex column still opens the teaser/news bubbles ABOVE the pencil — straight
   into the site header. Reverse the column on daily pages so bubbles open
   BELOW him. (Shipped here in app.css: higher specificity than the snippet's
   #ffchat-fab rule, and daily-page-scoped.) */
body.single-first_five #ffchat-fab { flex-direction: column-reverse; }

/* ── Eddy sits lower on daily pages (Doug 2026-07-18) ──
   Snippet 118 pins him at top:96/128px, which bleeds over the header's
   Sign Up / login area. Drop him below the header (~158px tall, +32px
   when the WP admin bar shows). !important beats the snippet's inline
   footer styles. */
body.single-first_five #ffchat-fab { top: 170px !important; }
body.single-first_five.admin-bar #ffchat-fab { top: 202px !important; }

/* ── Streak chip EXPANDABLE PANEL (2026-07-21, Kacie's gamification pass) ──
   Logged-in chip click opens this anchored panel: points row, Top-10 chase
   line, "Point boosts left today" checklist, leaderboard link. */
.ff-streak-panel{
  position:fixed;z-index:99998;width:264px;max-width:calc(100vw - 16px);
  background:#fff;border:1px solid #cdeee5;border-radius:14px;
  box-shadow:0 16px 40px rgba(27,42,92,.18);
  padding:12px 14px;font-family:'Nunito Sans',system-ui,sans-serif;color:#283442;
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .18s,transform .18s;
}
.ff-streak-panel.on{opacity:1;pointer-events:auto;transform:translateY(0)}
.ff-streak-panel .ff-sp-head{font-size:14px;font-weight:900;color:#1b2a5c}
.ff-streak-panel .ff-sp-head b{font-size:16px}
.ff-streak-panel .ff-sp-head .best{font-size:11px;font-weight:700;color:#62707c}
.ff-streak-panel .ff-sp-pts{margin-top:8px;background:#fffdf3;border:1px solid #f4e3ac;border-radius:10px;padding:7px 10px;font-size:11.5px;font-weight:800;color:#1b2a5c}
.ff-streak-panel .ff-sp-pts .life{display:block;font-size:10px;font-weight:700;color:#62707c;margin-top:1px}
.ff-streak-panel .ff-sp-chase{margin-top:7px;background:#fff8e1;border:1px solid #f4e3ac;border-radius:10px;padding:6px 10px;font-size:11.5px;font-weight:800;color:#1b2a5c;line-height:1.4}
.ff-streak-panel .ff-sp-chase b{color:#b45309}
.ff-streak-panel .ff-sp-boosts{margin-top:7px;background:#f2fbf8;border:1px solid #cdeee5;border-radius:10px;padding:8px 10px}
.ff-streak-panel .ff-sp-boosts h5{margin:0 0 5px;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#62707c}
.ff-streak-panel .ff-sp-boost{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 0;font-size:11.5px;font-weight:700;color:#283442}
.ff-streak-panel .ff-sp-boost .v{color:#00897b;font-weight:800;white-space:nowrap}
.ff-streak-panel .ff-sp-boost.done{color:#9aa7b1;text-decoration:line-through}
.ff-streak-panel .ff-sp-boost.done .v{color:#9aa7b1}
.ff-streak-panel .ff-sp-link{display:block;margin-top:9px;text-align:center;background:#1b2a5c;color:#fff !important;border-radius:100rem;padding:8px 12px;font-size:11.5px;font-weight:800;text-decoration:none !important}
.ff-streak-panel .ff-sp-link:hover{background:#0a2049}
@media (prefers-reduced-motion:reduce){.ff-streak-panel{transition:opacity .18s;transform:none}.ff-streak-panel.on{transform:none}}

/* ── Panel v2 (2026-07-21b): internal scroll backstop + logged-out pitch ── */
.ff-streak-panel{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ff-streak-panel .ff-sp-pitch{margin-top:7px;font-size:11px;font-weight:700;color:#62707c;line-height:1.5}
.ff-streak-panel .ff-sp-pitch a{color:#00897b;font-weight:800;text-decoration:underline}

/* ── 2026-07-27: Focus Mode 15s hold, non-Plus users only ── */
.ff-icon-btn.ff-wait { opacity: .45; cursor: not-allowed; }
.ff-icon-btn.ff-wait:hover { background: #e0f4fe; border-color: #0ea5e9; box-shadow: none; }
.ff-icon-btn.ff-wait:hover svg { stroke: #0369a1; }

/* ── 2026-07-27: Plus-locked Randomizer tabs (Spinner, Number Generator) ── */
.ff-rnd-tab.ff-locked { color: #b9b9c6; }
.ff-rnd-tab.ff-locked::after { content: '🔒'; font-size: 10px; margin-left: 3px; opacity: .9; }
.ff-rnd-tab.ff-locked:hover { color: #6366f1; }