/* ============================================================
   open-case.css — Takumi Senpai · OPEN CASE Investigation Board
   Path: /css/open-case.css
   Version: 2026-05-12 (FINAL)

   CHANGES:
   - English UI only (no Japanese class names or comments in output)
   - #open-case intro text: slightly left-of-center layout
   - Photo upload zone: full-coverage transparent input, label pointer-events:none
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --oc-cork:       #171009;
  --oc-paper:      #f0e6cc;
  --oc-ink:        #1a1208;
  --oc-ink-faint:  #3d2e1a;
  --oc-red:        #8b1515;
  --oc-gold:       #c9a84c;
  --oc-tape:       rgba(240, 232, 170, 0.52);
}

/* ════════════════════════════════════════════════════════════
   SECTION — Cork board
   ════════════════════════════════════════════════════════════ */
#open-case {
  position: relative;
  background-color: var(--oc-cork);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(60,35,10,0.5)  0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(40,25,8,0.4)   0%, transparent 50%),
    repeating-linear-gradient(
      92deg,
      transparent                     0px,
      transparent                     4px,
      rgba(201,150,60,0.012)           4px,
      rgba(201,150,60,0.012)           5px
    ),
    repeating-linear-gradient(
      2deg,
      transparent   0px,
      transparent   6px,
      rgba(0,0,0,0.06) 6px,
      rgba(0,0,0,0.06) 7px
    );
  padding: 32px 32px 64px;
  overflow: hidden;
}

/* Vignette overlay */
#open-case::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Inner wrapper */
.oc-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Section header ─────────────────────────────────────── */
/*
 * Intro text layout: starts from left edge with 5% padding,
 * which visually centres it between the left margin and mid-page.
 * This fulfils "slightly left of centre" requirement.
 */
.oc-header {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  justify-content: flex-start;   /* anchor to left */
  padding-left: 5%;              /* visual left-of-centre offset */
}

.oc-stamp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Red rubber stamp */
.oc-stamp {
  font-family: 'Special Elite', cursive;
  font-size: 1.45rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--oc-red);
  border: 3px solid var(--oc-red);
  padding: 7px 20px 5px;
  display: inline-block;
  transform: rotate(-4.5deg);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(139,21,21,0.25),
    3px 3px 0   rgba(139,21,21,0.12);
  text-shadow:
     0.5px  0   0 rgba(139,21,21,0.3),
    -0.5px  0   0 rgba(139,21,21,0.15);
}
.oc-stamp::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px dashed rgba(139,21,21,0.2);
}

.oc-case-count {
  font-family: 'Courier Prime', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(220,200,160,0.3);
}

/* Title block — left-aligned, visually offset from centre */
.oc-title-block {
  flex: 1;
  border-left: 1px solid rgba(201,150,60,0.2);
  padding-left: 24px;
  min-width: 200px;
  text-align: left;
}

.oc-eyebrow {
  font-family: 'Courier Prime', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--oc-gold);
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.oc-heading {
  font-family: 'Special Elite', cursive;
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  color: rgba(235,225,200,0.9);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.oc-sub {
  font-family: 'Courier Prime', monospace;
  font-size: 0.6rem;
  color: rgba(220,200,160,0.38);
  letter-spacing: 0.08em;
  line-height: 1.8;
  max-width: 420px;
  margin: 0;              /* left-aligned, no auto centering */
}

/* ════════════════════════════════════════════════════════════
   STRING LINE
   ════════════════════════════════════════════════════════════ */
.oc-string-line {
  width: 100%;
  margin: -8px 0 8px;
  opacity: 0.6;
  pointer-events: none;
}
.oc-string-line svg {
  width: 100%;
  height: 80px;
}

/* ════════════════════════════════════════════════════════════
   CARD GRID
   ════════════════════════════════════════════════════════════ */
.oc-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 44px 32px;
  align-items: start;
}

/* ── Individual card ─────────────────────────────────────── */
.oc-card {
  position: relative;
  background-color: var(--oc-paper);
  background-image: repeating-linear-gradient(
    0deg,
    transparent            0px,
    transparent            23px,
    rgba(0,0,0,0.04)       23px,
    rgba(0,0,0,0.04)       24px
  );
  padding: 0 0 18px;
  box-shadow:
    0  3px  6px rgba(0,0,0,0.28),
    0 10px 26px rgba(0,0,0,0.48);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
  overflow: hidden;
}

/* Default tilts */
.oc-card:nth-child(1) { transform: rotate(-2.1deg); }
.oc-card:nth-child(2) { transform: rotate( 1.6deg); }
.oc-card:nth-child(3) { transform: rotate(-0.8deg); }
.oc-card:nth-child(4) { transform: rotate( 2.3deg); }
.oc-card:nth-child(5) { transform: rotate(-1.4deg); }
.oc-card:nth-child(6) { transform: rotate( 0.9deg); }

.oc-card:hover {
  transform: rotate(-1.5deg) scale(1.04) translateY(-6px) !important;
  box-shadow:
    0  8px 18px rgba(0,0,0,0.38),
    0 22px 50px rgba(0,0,0,0.55);
  z-index: 10;
}

/* Pushpin (odd cards) */
.oc-card:nth-child(odd)::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8c86a, #9a7518);
  box-shadow:
    0 2px 7px rgba(0,0,0,0.6),
    inset 0 -1px 2px rgba(0,0,0,0.35);
  z-index: 5;
}

/* Tape strip (even cards) */
.oc-card:nth-child(even)::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 20px;
  background: var(--oc-tape);
  z-index: 4;
  border-radius: 1px;
}

/* ════════════════════════════════════════════════════════════
   STATUS RIBBON
   ════════════════════════════════════════════════════════════ */
.oc-ribbon {
  position: absolute;
  top: 18px;
  right: -28px;
  width: 130px;
  text-align: center;
  font-family: 'Courier Prime', monospace;
  font-size: 0.38rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 0;
  transform: rotate(38deg);
  z-index: 6;
  pointer-events: none;
}

.oc-ribbon--investigating {
  background: var(--oc-red);
  color: rgba(255,255,255,0.92);
}

.oc-ribbon--wanted {
  background: #1a3870;
  color: rgba(255,255,255,0.92);
}

/* ── Photo area ──────────────────────────────────────────── */
.oc-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1208;
}

.oc-card-photo--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.oc-card-photo--clickable {
  cursor: pointer;
}

.oc-card-photo--clickable:focus-visible {
  outline: 2px solid var(--oc-red, #8b1a1a);
  outline-offset: 2px;
}

.oc-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(25%) contrast(1.12) brightness(0.87);
  transition: filter 0.4s ease;
}

.oc-card:hover .oc-card-photo img {
  filter: sepia(8%) contrast(1.05) brightness(0.95);
}

/* Case ID label */
.oc-case-id {
  position: absolute;
  top: 9px;
  left: 9px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(235,220,185,0.8);
  background: rgba(8,5,2,0.72);
  padding: 3px 8px;
}

/* Status badge */
.oc-status-badge {
  position: absolute;
  bottom: 9px;
  right: 9px;
  font-family: 'Special Elite', cursive;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px 3px;
  border: 2.5px solid currentColor;
  transform: rotate(3deg);
  opacity: 0.84;
}

.oc-status-badge.investigating {
  color: var(--oc-red);
  border-color: var(--oc-red);
  background: rgba(240,200,200,0.65);
}
.oc-status-badge.unsolved {
  color: #1e3070;
  border-color: #1e3070;
  background: rgba(190,205,240,0.65);
}

/* ── Paper body ──────────────────────────────────────────── */
.oc-card-body {
  padding: 15px 17px 4px;
}

.oc-card-title {
  font-family: 'Special Elite', cursive;
  font-size: 0.92rem;
  color: var(--oc-ink);
  line-height: 1.35;
  margin-bottom: 5px;
}

.oc-card-location {
  font-family: 'Courier Prime', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--oc-ink-faint);
  opacity: 0.6;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.oc-card-location::before {
  content: '◎';
  font-size: 0.48rem;
  opacity: 0.5;
}

.oc-card-rule {
  border: none;
  border-top: 1px dashed rgba(26,18,8,0.2);
  margin: 9px 0;
}

.oc-card-clue {
  font-family: 'Courier Prime', monospace;
  font-size: 0.66rem;
  color: var(--oc-ink-faint);
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin-bottom: 9px;
  word-spacing: 0.08em;
}

.oc-card-witness {
  font-family: 'Courier Prime', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oc-ink-faint);
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 13px;
}
.oc-card-witness::before {
  content: 'WITNESS:';
  color: var(--oc-red);
  opacity: 0.7;
  font-size: 0.44rem;
  letter-spacing: 0.26em;
}

/* ════════════════════════════════════════════════════════════
   BUTTON ROW
   ════════════════════════════════════════════════════════════ */
.oc-btn-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 17px;
}

/* VIEW CASE FILE button */
.oc-btn-view {
  display: block;
  width: 100%;
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;      /* was 0.5rem — bigger & bolder */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oc-paper);
  background: var(--oc-ink);
  border: none;
  padding: 13px 14px;      /* taller tap target */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.oc-btn-view::before {
  content: '▶ ';
  opacity: 0.55;
  font-size: 0.44rem;
}
.oc-btn-view:hover {
  background: #2d2010;
  color: var(--oc-gold);
}

/* SEND A CLUE stamp button */
.oc-btn-stamp {
  display: block;
  width: 100%;
  font-family: 'Special Elite', cursive;
  font-size: 0.78rem;      /* was 0.52rem */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c00;
  background: transparent;
  border: 2px solid #c00;  /* slightly thicker border */
  padding: 12px 14px;      /* taller */
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  text-shadow:
    0.4px  0   0 rgba(180,0,0,0.25),
   -0.4px  0   0 rgba(180,0,0,0.15),
    0  0.4px   0 rgba(180,0,0,0.1);
  box-shadow: inset 0 0 0 1px rgba(180,0,0,0.08);
}
.oc-btn-stamp:hover {
  background: rgba(200,0,0,0.08);
  color: #a00;
  transform: rotate(-0.5deg) scale(1.01);
}
.oc-btn-stamp::before {
  content: '⬡ ';
  font-size: 0.5rem;
  opacity: 0.5;
}

/* General card: single button row */
.oc-btn-row--general {
  margin: 0 17px;
}

/* Base clue button (general / legacy) */
.oc-btn-clue {
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oc-paper);
  background: var(--oc-ink);
  border: none;
  padding: 11px 14px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease;
}
.oc-btn-clue:hover {
  background: var(--oc-red);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════
   MODAL OVERLAY
   ════════════════════════════════════════════════════════════ */
.oc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,3,1,0.9);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.oc-modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ③ Fade-out: pointer-events off immediately, opacity transitions out (0.32s).
      JS adds this class on close, removes it after transitionend (500ms fallback). */
.oc-modal-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

@media (prefers-reduced-motion: reduce) {
  .oc-modal-overlay,
  .oc-modal-overlay.is-closing { transition: none; }
}

/* Modal paper */
.oc-modal {
  position: relative;
  background-color: var(--oc-paper);
  background-image: repeating-linear-gradient(
    0deg,
    transparent          0px,
    transparent          23px,
    rgba(0,0,0,0.035)    23px,
    rgba(0,0,0,0.035)    24px
  );
  max-width: 420px;        /* narrower — was 520px */
  width: calc(100% - 40px); /* breathing room on both sides */
  max-height: 82vh;        /* leave visible gap top & bottom */
  overflow-y: auto;
  padding: 44px 28px 28px;
  box-shadow:
    0 0 0 1px rgba(26,18,8,0.15),
    0 20px 70px rgba(0,0,0,0.75);
  transform: rotate(-0.4deg);
  margin: auto;            /* centred via flexbox parent */
}

/* CLASSIFIED header tape */
.oc-modal::before {
  content: '— CLASSIFIED — EVIDENCE SUBMISSION — CLASSIFIED —';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--oc-red);
  color: rgba(255,255,255,0.92);
  font-family: 'Courier Prime', monospace;
  font-size: 0.4rem;
  letter-spacing: 0.26em;
  text-align: center;
  padding: 5px 0 4px;
  text-transform: uppercase;
}

/* CASE ID stamp */
.oc-modal-case-stamp {
  font-family: 'Special Elite', cursive;
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--oc-red);
  border: 3px solid var(--oc-red);
  display: inline-block;
  padding: 6px 20px 4px;
  transform: rotate(-2deg);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 14px 0 10px;
  opacity: 0.85;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(139,21,21,0.2),
    2px 2px 0 rgba(139,21,21,0.1);
  text-shadow:
     0.5px 0 0 rgba(139,21,21,0.25),
    -0.5px 0 0 rgba(139,21,21,0.12);
}
.oc-modal-case-stamp::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(139,21,21,0.18);
  pointer-events: none;
}

.oc-modal-close {
  position: absolute;
  top: 24px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Courier Prime', monospace;
  font-size: 0.65rem;
  color: var(--oc-ink-faint);
  letter-spacing: 0.12em;
  opacity: 0.5;
  padding: 4px 8px;
  transition: opacity 0.2s;
}
.oc-modal-close:hover { opacity: 1; }

.oc-modal-stamp {
  font-family: 'Courier Prime', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--oc-red);
  margin-bottom: 5px;
  margin-top: 16px;
  opacity: 0.72;
}

.oc-modal-title {
  font-family: 'Special Elite', cursive;
  font-size: 1.3rem;
  color: var(--oc-ink);
  line-height: 1.2;
  margin-bottom: 3px;
}

.oc-modal-case-ref {
  font-family: 'Courier Prime', monospace;
  font-size: 0.46rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oc-ink-faint);
  opacity: 0.45;
  margin-bottom: 20px;
}

/* ── Form fields ─────────────────────────────────────────── */
.oc-form-row { margin-bottom: 16px; }

.oc-form-label {
  display: block;
  font-family: 'Courier Prime', monospace;
  font-size: 0.46rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oc-ink-faint);
  opacity: 0.6;
  margin-bottom: 5px;
}
.oc-form-label span { color: var(--oc-red); }

.oc-form-input,
.oc-form-textarea {
  width: 100%;
  background: rgba(255,255,255,0.45);
  border: none;
  border-bottom: 1.5px solid rgba(26,18,8,0.28);
  padding: 8px 4px 6px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.8rem;
  color: #1a1208 !important;
  -webkit-text-fill-color: #1a1208 !important;
  opacity: 1 !important;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.oc-form-input:focus,
.oc-form-textarea:focus {
  border-bottom-color: var(--oc-red);
  background: rgba(255,255,255,0.78);
  color: #1a1208 !important;
  -webkit-text-fill-color: #1a1208 !important;
}
/* placeholder は薄めに維持 */
.oc-form-input::placeholder,
.oc-form-textarea::placeholder {
  color: rgba(26,18,8,0.45) !important;
  -webkit-text-fill-color: rgba(26,18,8,0.45) !important;
  opacity: 1 !important;
}
/* iOS Safari 強制上書き */
@supports (-webkit-touch-callout: none) {
  .oc-form-input,
  .oc-form-textarea {
    color: #1a1208 !important;
    -webkit-text-fill-color: #1a1208 !important;
    opacity: 1 !important;
  }
  .oc-form-input::placeholder,
  .oc-form-textarea::placeholder {
    -webkit-text-fill-color: rgba(26,18,8,0.45) !important;
    opacity: 1 !important;
  }
}

.oc-form-textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.75;
  background-image: repeating-linear-gradient(
    0deg,
    transparent       0px,
    transparent       27px,
    rgba(26,18,8,0.07) 27px,
    rgba(26,18,8,0.07) 28px
  );
  background-size: 100% 28px;
}

/* ── File upload zone (FIX ①) ──────────────────────────── */
/*
 * Structure:
 *   <div .oc-form-file-wrap>          ← zone container
 *     <input type="file" #ocPhoto>   ← full-size transparent, z-index:1
 *     <label for="ocPhoto">          ← decorative, pointer-events:none, z-index:2
 *   </div>
 *
 * The input covers the entire zone so ANY click on the zone
 * opens the native file picker immediately (1 click, no delay).
 * The label provides visual feedback without intercepting events.
 */
.oc-form-file-wrap {
  position: relative;
  border: 1.5px dashed rgba(26,18,8,0.22);
  padding: 14px;
  text-align: center;
  background: rgba(255,255,255,0.25);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.oc-form-file-wrap:hover {
  border-color: var(--oc-red);
  background: rgba(255,255,255,0.5);
}

/* Input: absolute, full coverage, transparent, z-index:2 so it catches ALL clicks */
.oc-form-file-wrap input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;   /* ABOVE label — input is always the hit target */
  margin: 0;
  padding: 0;
  border: none;
}

/* Label: decorative only, z-index:1, pointer-events:none so clicks pass through */
.oc-form-file-wrap .oc-form-file-label {
  position: relative;
  z-index: 1;
  display: block;
  pointer-events: none;
  cursor: pointer;
  font-family: 'Courier Prime', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--oc-ink-faint);
  opacity: 0.58;
}
.oc-form-file-wrap .oc-form-file-label strong {
  display: block;
  font-size: 0.66rem;
  margin-bottom: 3px;
  opacity: 0.88;
  color: var(--oc-ink);
}

/* Filename display below zone */
.oc-photo-filename {
  font-family: 'Courier Prime', monospace;
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  color: var(--oc-ink-faint);
  opacity: 0.55;
  margin-top: 5px;
  min-height: 1em;
}

/* Submit button */
.oc-form-submit {
  display: block;
  width: 100%;
  font-family: 'Courier Prime', monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--oc-paper);
  background: var(--oc-ink);
  border: none;
  padding: 13px 22px;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.2s;
}
.oc-form-submit:hover { background: var(--oc-red); }
.oc-form-submit::after { content: ' →'; opacity: 0.6; }
.oc-form-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.oc-form-disclaimer {
  font-family: 'Courier Prime', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.1em;
  color: var(--oc-ink-faint);
  opacity: 0.38;
  text-align: center;
  margin-top: 12px;
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════
   BODY SCROLL LOCK — モバイルでのモーダル表示中固定
   position:fixed は body 配下の fixed 要素（モーダル）を
   破壊するため使用しない。overflow + touch-action のみで制御。
   ════════════════════════════════════════════════════════════ */
body.oc-body-locked {
  overflow: hidden !important;
  touch-action: none !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE CLASSIFIED BAR — #ocGlobalMobileBar
   body 直下に動的生成される iOS Safari 対応の固定バー
   ════════════════════════════════════════════════════════════ */
#ocGlobalMobileBar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100001;
  background: var(--oc-red, #8b1515);
  height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
}

#ocGlobalMobileBar.is-visible {
  display: flex;
}

.oc-mobile-bar-text {
  font-family: 'Courier Prime', monospace;
  font-size: 0.38rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.oc-mobile-close {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: 'Courier Prime', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 12px;
  border-radius: 2px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.oc-mobile-close:hover,
.oc-mobile-close:active {
  background: rgba(255, 255, 255, 0.18);
}

/* モバイルバー表示中はモーダルをバー分(44px)押し下げ */
@media (max-width: 768px) {
  body.oc-body-locked .oc-modal-overlay.is-open {
    padding-top: 44px;
    box-sizing: border-box;
  }
}

/* ── SVG icon in general report button ─────────────────── */
.oc-btn-icon {
  vertical-align: middle;
  margin-right: 4px;
  margin-bottom: 2px;
  opacity: 0.72;
  flex-shrink: 0;
}
.oc-btn-clue--general {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   RECEIVED STAMP OVERLAY — independent post-submit element
   ════════════════════════════════════════════════════════════ */
#ocReceivedStamp {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 半透明黒背景：スタンプ全体と同じ要素なので完全同期フェード */
  background: rgba(0, 0, 0, 0.6);
  pointer-events: all; /* 背景クリックをブロック */
  opacity: 0;
  transition: opacity 0.45s ease;
}

#ocReceivedStamp.is-visible {
  opacity: 1;
}

#ocReceivedStamp.is-hiding {
  opacity: 0;
  transition: opacity 0.65s ease;
  pointer-events: none;
}

.ocrs-inner {
  background-color: #f5edd8;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 23px,
    rgba(0,0,0,0.038) 23px,
    rgba(0,0,0,0.038) 24px
  );
  border: 2px solid rgba(26,18,8,0.15);
  padding: 40px 56px 34px;
  box-shadow:
    0 0 0 1px rgba(26,18,8,0.12),
    0 24px 80px rgba(0,0,0,0.72);
  text-align: center;
  transform: rotate(-1.8deg);
  max-width: 380px;
  width: 90%;
  position: relative;
  animation: ocrsEntrance 0.45s cubic-bezier(0.22,1,0.36,1) both;
}

/* Red classified tape on top */
.ocrs-inner::before {
  content: '— CLASSIFIED — EVIDENCE SUBMISSION — CLASSIFIED —';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--oc-red);
  color: rgba(255,255,255,0.92);
  font-family: 'Courier Prime', monospace;
  font-size: 0.38rem;
  letter-spacing: 0.24em;
  text-align: center;
  padding: 5px 0 4px;
  text-transform: uppercase;
}

/* Pushpin on top */
.ocrs-inner::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8c86a, #9a7518);
  box-shadow: 0 2px 8px rgba(0,0,0,0.6), inset 0 -1px 2px rgba(0,0,0,0.35);
  z-index: 5;
}

.ocrs-stamp {
  font-family: 'Special Elite', cursive;
  font-size: clamp(2rem, 8vw, 2.8rem);
  color: var(--oc-red);
  border: 4px solid var(--oc-red);
  display: inline-block;
  padding: 8px 24px 6px;
  transform: rotate(-2.5deg);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 28px 0 18px;
  opacity: 0.88;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(139,21,21,0.22),
    3px 3px 0 rgba(139,21,21,0.12);
  text-shadow:
    0.6px 0 0 rgba(139,21,21,0.28),
   -0.6px 0 0 rgba(139,21,21,0.14);
}

.ocrs-stamp::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px dashed rgba(139,21,21,0.2);
  pointer-events: none;
}

.ocrs-text {
  font-family: 'Courier Prime', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  line-height: 1.9;
  color: rgba(26,18,8,0.55);
  text-transform: uppercase;
  margin: 0;
}

@keyframes ocrsEntrance {
  from {
    opacity: 0;
    transform: rotate(-1.8deg) scale(0.88) translateY(20px);
  }
  to {
    opacity: 1;
    transform: rotate(-1.8deg) scale(1) translateY(0);
  }
}

/* ── Success state ───────────────────────────────────────── */
.oc-success-msg {
  text-align: center;
  padding: 30px 0 10px;
  display: none;
}
.oc-success-msg.is-visible { display: block; }

.oc-success-stamp {
  font-family: 'Special Elite', cursive;
  font-size: 1.9rem;
  color: var(--oc-red);
  border: 4px solid var(--oc-red);
  display: inline-block;
  padding: 7px 22px 5px;
  transform: rotate(-2.5deg);
  opacity: 0.86;
  margin-bottom: 14px;
  letter-spacing: 0.1em;
}

.oc-success-text {
  font-family: 'Courier Prime', monospace;
  font-size: 0.62rem;
  color: var(--oc-ink-faint);
  letter-spacing: 0.12em;
  line-height: 1.8;
  opacity: 0.65;
}

/* ════════════════════════════════════════════════════════════
   GENERAL REPORT CARD
   ════════════════════════════════════════════════════════════ */
.oc-card--general {
  transform: rotate(-1.2deg) !important;
  background-color: #f5edd8;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent            0px,
      transparent            23px,
      rgba(0,0,0,0.04)       23px,
      rgba(0,0,0,0.04)       24px
    );
  order: -1;
}

.oc-card--general::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #e05050, #8b1a1a) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.65),
    inset 0 -1px 2px rgba(0,0,0,0.4) !important;
  z-index: 5 !important;
}

.oc-card-photo--general {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(201,150,60,0.22) 0%, transparent 70%),
    #100c04;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oc-general-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 2.5px solid rgba(201,150,60,0.35);
  border-radius: 50%;
}

.oc-general-icon-mark {
  font-family: 'Special Elite', cursive;
  font-size: 2.2rem;
  color: rgba(201,150,60,0.5);
  line-height: 1;
  margin-top: 4px;
}

.oc-status-badge.open {
  color: #1a6b1a;
  border-color: #1a6b1a;
  background: rgba(180,240,180,0.65);
}

.oc-btn-clue--general {
  display: block;
  width: 100%;
  background: #2b1a08;
  letter-spacing: 0.18em;
  color: var(--oc-paper);
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;      /* was 0.52rem */
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  padding: 13px 14px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.oc-btn-clue--general:hover {
  background: #1a6b1a;
}

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.oc-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}
.oc-empty-text {
  font-family: 'Courier Prime', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,232,208,0.25);
}

/* ════════════════════════════════════════════════════════════
   DETAIL PAGE CARD (.oc-card--detail)
   ════════════════════════════════════════════════════════════ */
.oc-detail-wrap {
  max-width: 380px;
  margin: 0 auto 40px;
}

.oc-card--detail {
  transform: rotate(-1deg) !important;
}

.oc-card--detail:hover {
  transform: rotate(-1.5deg) scale(1.03) translateY(-5px) !important;
}

/* SEND A CLUE is the only button — remove top border gap */
.oc-card--detail .oc-btn-stamp {
  border-top: none;
  padding-top: 11px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #open-case { padding: 28px 20px 56px; }

  .oc-header {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding-left: 0;     /* remove left offset on mobile */
  }
  .oc-title-block {
    border-left: none;
    border-top: 1px solid rgba(201,150,60,0.2);
    padding-left: 0;
    padding-top: 14px;
    min-width: unset;
  }

  .oc-board {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .oc-card:nth-child(1) { transform: rotate(-1.0deg); }
  .oc-card:nth-child(2) { transform: rotate( 0.8deg); }
  .oc-card:nth-child(3) { transform: rotate(-0.4deg); }
  .oc-card:nth-child(4) { transform: rotate( 1.1deg); }
  .oc-card:nth-child(5) { transform: rotate(-0.7deg); }
  .oc-card:nth-child(6) { transform: rotate( 0.5deg); }

  .oc-modal {
    padding: 38px 18px 24px;
    transform: none;
    max-height: 80vh;        /* leave space top & bottom on mobile */
    width: calc(100% - 32px);
    margin: auto;
  }
  .oc-modal-title { font-size: 1.1rem; }
  .oc-modal-case-stamp { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .oc-stamp { font-size: 1.15rem; letter-spacing: 0.1em; }
  .oc-heading { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════
   EVIDENCE LOG — WITNESS TESTIMONY STYLES
   Enhanced dramatic presentation for suspect testimony
   ════════════════════════════════════════════════════════════ */

/* Named witness item: stronger left border accent */
.el-item--named {
  border-left: 3px solid rgba(139,21,21,0.55) !important;
}

/* Witness block container */
.el-witness-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
  flex: 1;
}

/* TESTIMONY label */
.el-witness-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.4rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ib-red);
  opacity: 0.75;
}

/* Named witness: show the name prominently */
.el-witness-block--named .el-witness-name {
  font-family: 'Special Elite', cursive;
  font-size: 1.05rem;
  color: var(--ib-ink);
  letter-spacing: 0.04em;
  line-height: 1.1;
  position: relative;
  display: inline-block;
}

/* Underline effect — typewritten */
.el-witness-block--named .el-witness-name::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--ib-red);
  opacity: 0.35;
  margin-top: 3px;
  width: 100%;
}

/* Anonymous: dimmer label */
.el-witness-block--anon .el-witness-label {
  color: rgba(26,18,8,0.35);
  letter-spacing: 0.28em;
}

/* Clue text: blockquote style */
.el-clue-text {
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  color: var(--ib-ink);
  line-height: 1.85;
  margin: 0;
  letter-spacing: 0.02em;
  opacity: 0.88;
  padding-left: 16px;
  border-left: 2px solid rgba(139,21,21,0.3);
  font-style: italic;
  position: relative;
}

/* Opening quote mark decoration */
.el-clue-text::before {
  content: '"';
  font-family: 'Special Elite', cursive;
  font-size: 2.2rem;
  color: var(--ib-red);
  opacity: 0.18;
  position: absolute;
  top: -10px;
  left: -8px;
  line-height: 1;
  font-style: normal;
}

/* Meta row: align witness block + date side by side */
.el-item-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.el-date {
  font-family: 'Courier Prime', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.22em;
  color: rgba(26,18,8,0.38);
  text-transform: uppercase;
  align-self: flex-end;
  margin-bottom: 4px;
}

/* Responsive clue text */
@media (max-width: 640px) {
  .el-clue-text { font-size: 0.7rem; }
  .el-witness-block--named .el-witness-name { font-size: 0.92rem; }
}
/* ════════════════════════════════════════════════════════════
   EVIDENCE LOG — PHOTO THUMBNAIL
   Always visible, no collapse, loads eagerly
   ════════════════════════════════════════════════════════════ */

/* Wrapper: polaroid-style frame, always block (never hidden) */
.el-thumb-wrap {
  display: block;           /* always visible — no collapse */
  margin-top: 14px;
  line-height: 0;           /* remove gap under inline img */
  background: #fff;
  padding: 6px 6px 28px;   /* polaroid bottom gap */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.22),
    0 5px 18px rgba(0,0,0,0.18);
  transform: rotate(-1.2deg);
  max-width: 260px;         /* cap width on desktop */
  position: relative;
}

/* Tape strip on top of polaroid */
.el-thumb-wrap::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 18px;
  background: rgba(240, 232, 170, 0.55);
  border-radius: 1px;
  z-index: 2;
}

/* The image itself */
.el-thumb {
  display: block;           /* block removes inline whitespace */
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  filter: sepia(12%) contrast(1.08) brightness(0.94);
  /* NO loading="lazy" override here — handled in JS with eager */
}

/* Broken/missing image: hide gracefully without collapsing wrapper */
.el-thumb[src=''],
.el-thumb.is-error {
  display: none;
}

/* On mobile, full-width feels more natural */
@media (max-width: 640px) {
  .el-thumb-wrap {
    max-width: 100%;
    transform: rotate(-0.6deg);
  }
}
/* ════════════════════════════════════════════════════════════
   OPEN CASE BOARD — Status-based card border colours
   .card-unsolved      → warning yellow  #f1c40f
   .card-investigating → alert red       var(--oc-red)
   ════════════════════════════════════════════════════════════ */

/* Unsolved: caution yellow border */
.oc-card.card-unsolved,
.oc-card[data-status="unsolved"] {
  border: 1.5px solid #f1c40f !important;
  box-shadow:
    0  3px  6px rgba(0,0,0,0.28),
    0 10px 26px rgba(0,0,0,0.48),
    0  0  10px rgba(241,196,15,0.12);
}

/* Unsolved status badge text */
.oc-card.card-unsolved .oc-status-badge,
.oc-card[data-status="unsolved"] .oc-status-badge {
  color: #f1c40f !important;
  border-color: #f1c40f !important;
  background: rgba(241,196,15,0.12) !important;
}

/* Unsolved case-status text (if used elsewhere in the card) */
.oc-card.card-unsolved .case-status-text {
  color: #f1c40f !important;
}

/* Investigating: red border (matches existing brand colour) */
.oc-card.card-investigating,
.oc-card[data-status="investigating"] {
  border: 1.5px solid var(--oc-red) !important;
  box-shadow:
    0  3px  6px rgba(0,0,0,0.28),
    0 10px 26px rgba(0,0,0,0.48),
    0  0  10px rgba(139,21,21,0.15);
}
/* ============================================================
   OPEN CASE — 4-Phase Investigation Progress Bar
   .oc-progress / .oc-progress-track / .oc-step / .oc-step-line
   ============================================================ */

/* ── Wrapper ── */
.oc-progress {
  margin: 10px 17px 14px;
  padding: 10px 12px 8px;
  border-top: 1px dashed rgba(26,18,8,0.18);
}

/* ── Track: dots + lines in a single flex row ── */
.oc-progress-track {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* ── Connecting lines between dots ── */
.oc-step-line {
  flex: 1;
  height: 1px;
  background: rgba(26,18,8,0.15);
  display: block;
  transition: background 0.3s ease;
}
.oc-step-line.is-done {
  background: var(--oc-red);
  opacity: 0.6;
}

/* ── Phase dots ── */
.oc-step {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  background: rgba(26,18,8,0.12);
  border: 1px solid rgba(26,18,8,0.2);
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Completed phase */
.oc-step.is-done {
  background: var(--oc-red);
  border-color: var(--oc-red);
}

/* Current phase — pulse animation */
.oc-step.is-current {
  background: #f1c40f;
  border-color: #c9a800;
  animation: ocStepPulse 1.8s ease-out infinite;
}

@keyframes ocStepPulse {
  0%   { box-shadow: 0 0 0 0   rgba(241,196,15,0.75); }
  55%  { box-shadow: 0 0 0 6px rgba(241,196,15,0);    }
  100% { box-shadow: 0 0 0 0   rgba(241,196,15,0);    }
}

/* ── Phase label text ── */
.oc-progress-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.44rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(26,18,8,0.42);
  margin-top: 6px;
  line-height: 1;
}

/* Highlight current phase name in yellow for unsolved/investigating,
   red for further phases */
.oc-card[data-status="unsolved"]      .oc-progress-label,
.oc-card[data-status="investigating"] .oc-progress-label {
  color: rgba(139,21,21,0.65);
}

/* Mobile: dots slightly smaller */
@media (max-width: 480px) {
  .oc-step         { width: 6px; height: 6px; }
  .oc-progress-label { font-size: 0.4rem; letter-spacing: 0.16em; }
}


/* ==========================================================================
   FINAL MODAL OVERFLOW FIX - PLACED IN OPEN-CASE.CSS (2026-05-19)
   ========================================================================== */
@media (min-width: 769px) {
  /* 1. 背景オーバーレイ：中央寄せ(center)を完全廃止、上揃え(flex-start)で上に突き抜けるのを物理的に阻止 */
  html body .oc-modal-overlay,
  html body div.oc-modal-overlay,
  html body .oc-modal-overlay.is-open {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 99999 !important;
    /* 画面上端に、何があっても絶対に死守する【40pxの安全余白】を配置 */
    padding: 40px 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. モーダル本体：古い絶対配置(top:50%等)や、上に突き抜けさせていた transform:translate を完全抹殺 */
  html body .oc-modal-overlay .oc-modal,
  html body .oc-modal,
  html body .oc-modal-overlay.is-open .oc-modal {
    position: relative !important;
    top: unset !important;
    bottom: unset !important;
    left: unset !important;
    right: unset !important;
    transform: none !important;
    margin: 0 auto !important;
    
    width: 95% !important;
    max-width: 1280px !important;
    min-width: 1024px !important;
    height: 80vh !important;
    max-height: 80vh !important;
    
    background-color: #f0e6cc !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border: 2px solid #1a1208 !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
  }

  /* 3. 黒帯ヘッダー：高さを60pxに完全固定。絶対に潰れさせない */
  html body .oc-modal .oc-modal-header,
  html body .oc-modal-overlay .oc-modal-header,
  html body .oc-modal-overlay.is-open .oc-modal-header {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 40px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #000000 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* 4. メインエリア：ヘッダーの60pxを引いた残りの縦幅にピタッと収める */
  html body .oc-modal .oc-form-main,
  html body .oc-modal .open-case-layout {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1.3fr !important;
    gap: 40px !important;
    width: 100% !important;
    height: calc(100% - 60px) !important;
    max-height: calc(100% - 60px) !important;
    padding: 40px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 5. 左側パネル */
  html body .oc-modal .oc-clue-examples,
  html body .oc-modal .clue-form-left {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 6. 右側入力フォーム：ここだけを独立して縦スクロール */
  html body .oc-modal .oc-form-main form,
  html body .oc-modal form,
  html body .oc-modal #oc-clue-form,
  html body .oc-modal #oc-general-form {
    display: block !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    padding-right: 35px !important;
    padding-bottom: 60px !important;
    box-sizing: border-box !important;
  }

  /* 7. Close（×）ボタンをヘッダーの右端に固定 */
  html body .oc-modal .oc-desktop-close,
  html body .oc-modal .modal-close,
  html body .oc-modal-overlay.is-open .oc-desktop-close {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 40px !important;
    font-size: 26px !important;
    color: #ffffff !important;
    cursor: pointer !important;
    z-index: 100000 !important;
    display: block !important;
    visibility: visible !important;
  }
}
/* ============================================================
   QUEST ROCKET ZONE — 3-Stage Rocket participation widget
   Prefix: quest-rocket-
   Appended to open-case.css — safe to copy-paste to end of file.
   Does NOT touch any existing classes.
   ============================================================ */

/* ── Zone wrapper ── */
.quest-rocket-zone {
  position: relative;
  z-index: 1;
  margin: 40px auto 0;
  max-width: 1100px;
  padding: 36px 28px 32px;
  border-top: 1px dashed rgba(201,150,60,0.22);
}

/* ── Header ── */
.quest-rocket-eyebrow {
  display: block;
  font-family: 'Courier Prime', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--oc-gold);
  opacity: 0.65;
  margin-bottom: 8px;
}

.quest-rocket-heading {
  font-family: 'Special Elite', cursive;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: rgba(235,225,200,0.88);
  margin: 0 0 28px;
  line-height: 1.3;
}

/* ── Card grid ── */
.quest-rocket-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .quest-rocket-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── Individual tap card ── */
.quest-rocket-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 20px 16px;
  background: rgba(240,230,200,0.06);
  border: 1px solid rgba(201,150,60,0.18);
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  font-family: inherit;
}

.quest-rocket-card:hover,
.quest-rocket-card:focus-visible {
  background: rgba(240,230,200,0.12);
  border-color: rgba(201,150,60,0.45);
  transform: translateY(-2px);
  outline: none;
}

.quest-rocket-card.is-tapped {
  background: rgba(201,150,60,0.14);
  border-color: var(--oc-gold);
}

.quest-rocket-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.quest-rocket-label {
  font-family: 'Special Elite', cursive;
  font-size: 0.88rem;
  color: rgba(235,225,200,0.92);
  line-height: 1.35;
}

.quest-rocket-hint {
  font-family: 'Courier Prime', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: rgba(220,200,160,0.45);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   QUEST ROCKET MINI-MODAL
   ════════════════════════════════════════════════════════════ */
/* ── Overlay: always rendered, visibility via opacity + pointer-events
      so CSS transitions work on both open and close.
      align-items: center + justify-content: center = true centre at all times.
      overflow-y: auto lets the box scroll if the keyboard shrinks the viewport. ── */
/* ════════════════════════════════════════════════════════════
   ROCKET MINI-MODAL — overlay
   Always display:flex so CSS opacity transition fires on both
   open and close. Visibility controlled via opacity+pointer-events.
   align-items/justify-content: center → true viewport centre on
   all screen sizes and at all keyboard states.
   ════════════════════════════════════════════════════════════ */
.quest-rocket-modal {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 99998;
  align-items: center;               /* vertical centre */
  justify-content: center;           /* horizontal centre */
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* ── Fade state: hidden by default ── */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

/* Fully visible */
.quest-rocket-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Fading out — pointer-events off immediately, opacity transitions out */
.quest-rocket-modal.is-closing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.36s ease;
}

/* ── Modal box ── */
.quest-rocket-modal-box {
  position: relative;
  background: var(--oc-paper);
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 23px,
    rgba(0,0,0,0.035) 23px,
    rgba(0,0,0,0.035) 24px
  );
  border: 2px solid var(--oc-ink);
  /* ── Wider on desktop: 580px gives text and inputs room to breathe ── */
  max-width: 580px;
  width: 100%;
  padding: 36px 36px 32px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.35);
  box-sizing: border-box;
  /* Subtle slide-up on open */
  transform: translateY(8px);
  transition: transform 0.22s ease;
}

.quest-rocket-modal.is-open    .quest-rocket-modal-box { transform: translateY(0); }
.quest-rocket-modal.is-closing .quest-rocket-modal-box {
  transform: translateY(5px);
  transition: transform 0.36s ease;
}

/* ── Close button ── */
.quest-rocket-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--oc-ink-faint);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s ease;
}
.quest-rocket-modal-close:hover { color: var(--oc-red); }

/* ── Confirmation text ── */
.quest-rocket-modal-thanks {
  font-family: 'Special Elite', cursive;
  font-size: 1.12rem;
  color: var(--oc-ink);
  line-height: 1.35;
  margin: 0 0 16px;
}

.quest-rocket-modal-nudge {
  font-family: 'Courier Prime', monospace;
  font-size: 0.78rem;
  color: var(--oc-ink-faint);
  letter-spacing: 0.04em;
  line-height: 1.65;
  margin: 0 0 16px;
}

/* ── Input + send row ── */
.quest-rocket-modal-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.quest-rocket-modal-input {
  flex: 1;
  font-family: 'Courier Prime', monospace;
  /* 16px minimum — prevents iOS Safari from auto-zooming on focus */
  font-size: 16px;
  color: var(--oc-ink);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(26,18,8,0.3);
  padding: 10px 14px;
  border-radius: 1px;
  outline: none;
  transition: border-color 0.15s ease;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}
.quest-rocket-modal-input:focus   { border-color: var(--oc-gold); }
.quest-rocket-modal-input:disabled { opacity: 0.5; }

.quest-rocket-modal-send {
  font-family: 'Courier Prime', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: var(--oc-red);
  border: none;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.quest-rocket-modal-send:hover    { background: #a01a1a; }
.quest-rocket-modal-send:disabled { opacity: 0.6; cursor: default; }

/* ── Skip link ── */
.quest-rocket-modal-skip {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  font-family: 'Courier Prime', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26,18,8,0.38);
  cursor: pointer;
  padding: 8px 0 0;
  transition: color 0.15s ease;
}
.quest-rocket-modal-skip:hover { color: var(--oc-ink-faint); }

/* ── Success / NOTED state ── */
.quest-rocket-modal-ok {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
}
.quest-rocket-modal-ok.is-visible { display: flex; }

.quest-rocket-ok-stamp {
  font-family: 'Special Elite', cursive;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--oc-red);
  border: 2px solid var(--oc-red);
  padding: 3px 12px 2px;
  display: inline-block;
  transform: rotate(-1.5deg);
}

.quest-rocket-ok-text {
  font-family: 'Courier Prime', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--oc-ink-faint);
  line-height: 1.55;
}

/* ── "Want to share more?" button ── */
.quest-rocket-modal-more {
  margin-top: 10px;
  background: none;
  border: 1px solid rgba(26,18,8,0.22);
  font-family: 'Courier Prime', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oc-ink-faint);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.quest-rocket-modal-more:hover {
  border-color: var(--oc-gold);
  color: var(--oc-ink);
}

/* ── Notify panel: quest tone ── */
.oc-case-notify-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--oc-ink-faint);
}

/* ── Mobile (≤480px): compact + keyboard-safe ── */
@media (max-width: 480px) {
  .quest-rocket-modal {
    padding: 14px;
    align-items: center;
  }
  .quest-rocket-modal-box {
    padding: 28px 20px 24px;
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .quest-rocket-modal-row {
    flex-direction: column;
  }
  /* Reinforce 16px on mobile — never allow sub-16px on any input */
  .quest-rocket-modal-input,
  .quest-rocket-modal-send {
    font-size: 16px;
    padding: 12px 14px;
  }
}
/* ════════════════════════════════════════════════════════════
   QUICK CLUE CHIPS — detail pages
   Path: /css/open-case.css (appended)
   ════════════════════════════════════════════════════════════ */

/* Container */
.oc-quick-clue {
  padding: 18px 17px 4px;
}

.oc-qc-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2b2002;
  opacity: 0.7;
  margin: 0 0 10px;
}

/* Chip grid */
.oc-qc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Individual chip */
.oc-qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;

  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: #1a1208 !important;

  transition:
    border-color 0.18s ease,
    background   0.18s ease,
    color        0.18s ease,
    box-shadow   0.18s ease;

  /* Two chips per row on wider cards */
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

.oc-qc-chip-emoji {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.oc-qc-chip:hover {
  border-color: var(--oc-gold);
  color: var(--oc-gold);
  background: rgba(201, 168, 76, 0.07);
}

/* Selected state */
.oc-qc-chip.is-active,
.oc-qc-chip[aria-pressed="true"] {
  border-color: var(--oc-gold);
  background:   rgba(201, 168, 76, 0.14);
  color:        var(--oc-gold);
  box-shadow:
    0 0 0 1px var(--oc-gold),
    0 0 12px rgba(201, 168, 76, 0.18);
}

/* Full-width on narrow cards / mobile */
@media (max-width: 480px) {
  .oc-qc-chip {
    flex: 1 1 100%;
  }
}

/* ════════════════════════════════════════════════════════════
   1-TAP ROW + PER-CASE NOTIFY PANEL
   Missing styles — added to fix "Keep me posted" on detail pages
   ════════════════════════════════════════════════════════════ */

/* ── 1-tap button row ─────────────────────────────────────── */
.oc-onetap-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 17px 4px;
}

.oc-tap {
  font-family: 'Courier Prime', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 7px 11px;
  border-radius: 3px;
  border: 1px solid rgba(201, 168, 76, 0.25);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(240, 230, 204, 0.55);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  flex: 1 1 auto;
  white-space: nowrap;
}
.oc-tap:hover {
  border-color: var(--oc-gold);
  color: var(--oc-gold);
  background: rgba(201, 168, 76, 0.07);
}
.oc-tap--update {
  border-color: rgba(201, 168, 76, 0.4);
  color: var(--oc-gold);
}
.oc-tap--update:hover {
  background: rgba(201, 168, 76, 0.14);
}

/* ── Per-case notify panel ────────────────────────────────── */
.oc-case-notify-panel {
  display: none;
  padding: 14px 17px 16px;
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  background: rgba(201, 168, 76, 0.04);
}
.oc-case-notify-panel.is-open {
  display: block;
}

.oc-case-notify-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--oc-gold);
  opacity: 0.8;
  margin: 0 0 10px;
}
.oc-case-notify-label strong {
  opacity: 1;
}

.oc-case-notify-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.oc-case-notify-input {
  flex: 1 1 160px;
  font-family: 'Courier Prime', monospace;
  padding: 6px 9px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--oc-paper);
  border-radius: 3px;
  outline: none;
  transition: border-color 0.18s ease;
  /* Prevent iOS zoom (min 16px) */
  font-size: max(0.65rem, 16px);
}
.oc-case-notify-input:focus {
  border-color: var(--oc-gold);
}
.oc-case-notify-input::placeholder {
  color: rgba(240, 230, 204, 0.3);
}

.oc-case-notify-btn {
  font-family: 'Courier Prime', monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid var(--oc-gold);
  background: transparent;
  color: var(--oc-gold);
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.oc-case-notify-btn:hover {
  background: var(--oc-gold);
  color: var(--oc-cork);
}
.oc-case-notify-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.oc-case-notify-err {
  display: none;
  font-family: 'Courier Prime', monospace;
  font-size: 0.65rem;
  color: #c00;
  margin-top: 6px;
}
.oc-case-notify-err.is-visible {
  display: block;
}

.oc-case-notify-ok {
  display: none;
  margin-top: 10px;
}
.oc-case-notify-ok.is-visible {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oc-case-notify-stamp {
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--oc-gold);
  border: 1px solid var(--oc-gold);
  padding: 3px 8px;
  opacity: 0.9;
}

.oc-case-notify-ok-text {
  font-family: 'Courier Prime', monospace;
  font-size: 0.7rem;
  color: rgba(240, 230, 204, 0.6);
}

/* ════════════════════════════════════════════════════════════
   DETAIL PAGE — Keep Me Posted secondary link
   (oc-onetap-row は detail ページでは非表示)
   ════════════════════════════════════════════════════════════ */

/* detail カード内の oc-onetap-row を完全に隠す */
.oc-card--detail .oc-onetap-row {
  display: none !important;
}

/* KEEP ME POSTED を SEND A CLUE の直下に単体表示するセカンダリリンク風スタイル */
.oc-keep-posted-link {
  display: block;
  width: calc(100% - 34px);
  margin: 0 17px 12px;
  padding: 10px 14px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.60rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(201, 168, 76, 0.65);
  background: transparent;
  border: 1px dashed rgba(201, 168, 76, 0.28);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  /* oc-tap の flex 指定を上書き */
  flex: none;
  white-space: normal;
}
.oc-keep-posted-link:hover {
  color: var(--oc-gold);
  border-color: rgba(201, 168, 76, 0.6);
  background: rgba(201, 168, 76, 0.06);
}

/* notify panel を keep-posted-link の直下へ */
.oc-card--detail .oc-case-notify-panel {
  margin: 0 17px 16px;
  border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════
   QUICK CLUE CONFIRMATION DIALOG
   ════════════════════════════════════════════════════════════ */

/* Overlay */
.oc-qc-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 8, 6, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.oc-qc-confirm-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.oc-qc-confirm-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

/* Dialog box */
.oc-qc-confirm-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #0e0b06;
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(201, 168, 76, 0.1);
  padding: 28px 24px 24px;
  transform: translateY(12px);
  transition: transform 0.28s ease;

  /* Scanline texture */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(201, 168, 76, 0.015) 3px,
      rgba(201, 168, 76, 0.015) 4px
    );
}
.oc-qc-confirm-overlay.is-open .oc-qc-confirm-box {
  transform: translateY(0);
}

/* Header row */
.oc-qc-confirm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.oc-qc-confirm-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.oc-qc-confirm-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oc-gold);
}

/* Body text */
.oc-qc-confirm-body {
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: rgba(240, 230, 204, 0.65);
  margin: 0 0 18px;
}

/* Selected fragment preview */
.oc-qc-confirm-fragment {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-left: 3px solid var(--oc-gold);
  padding: 10px 12px;
  margin-bottom: 22px;
}

.oc-qc-confirm-fragment-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.44rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.55);
}

.oc-qc-confirm-fragment-text {
  font-family: 'Space Mono', monospace;
  font-size: 0.70rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: rgba(240, 230, 204, 0.90);
}

/* Button row */
.oc-qc-confirm-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.oc-qc-confirm-btn {
  flex: 1 1 auto;
  font-family: 'Space Mono', monospace;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 11px 14px;
  border-radius: 2px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  white-space: nowrap;
}
.oc-qc-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* TRANSMIT — primary action */
.oc-qc-confirm-btn--transmit {
  background: var(--oc-gold);
  color: #0a0806;
  border: 1px solid var(--oc-gold);
}
.oc-qc-confirm-btn--transmit:hover:not(:disabled) {
  background: #e0be62;
  border-color: #e0be62;
}

/* ABORT — secondary */
.oc-qc-confirm-btn--abort {
  background: transparent;
  color: rgba(240, 230, 204, 0.5);
  border: 1px solid rgba(240, 230, 204, 0.18);
}
.oc-qc-confirm-btn--abort:hover:not(:disabled) {
  border-color: rgba(240, 230, 204, 0.45);
  color: rgba(240, 230, 204, 0.85);
}

/* Result / success state */
.oc-qc-confirm-result {
  margin-top: 16px;
}

.oc-qc-confirm-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.06);
}

.oc-qc-confirm-success-stamp {
  font-family: 'Special Elite', cursive;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--oc-gold);
  border: 1px solid var(--oc-gold);
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.oc-qc-confirm-success-text {
  font-family: 'Space Mono', monospace;
  font-size: 0.60rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: rgba(240, 230, 204, 0.60);
  margin: 0;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .oc-qc-confirm-box {
    padding: 22px 18px 20px;
  }
  .oc-qc-confirm-btns {
    flex-direction: column;
  }
  .oc-qc-confirm-btn {
    width: 100%;
  }
}
/* ════════════════════════════════════════════════════════════
   LIVE INVESTIGATION BADGE + PROGRESS COUNTER
   ════════════════════════════════════════════════════════════ */

/* ── Pulse animation — dot only ── */
@keyframes oc-live-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.25; transform: scale(0.7); }
}

/* ── Row wrapper ── */
.oc-live-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* ── Badge — text is muted dark, only the dot pulses ── */
.oc-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Mono', 'Courier Prime', monospace;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* クリーム背景に馴染む渋い深赤 — ドットの赤だけが目立つ */
  color: #5c1f1f;
  line-height: 1;
}

/* ── Pulsing red dot (鮮やかに点滅する部分) ── */
.oc-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d94040;
  flex-shrink: 0;
  animation: oc-live-pulse 2s ease-in-out infinite;
}

/* ── Progress counter — カード内（クリーム背景）はダークグレー ── */
.oc-live-counter {
  font-family: 'Space Mono', 'Courier Prime', monospace;
  font-size: 0.44rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2a2a2a;
  opacity: 0.72;
  line-height: 1.5;
  padding-left: 14px;
  border-left: 1px solid rgba(42, 42, 42, 0.2);
}