/* ==========================================================================
   Pinpoint — "Spotlight" aesthetic
   Game widget + /play-pinpoint & /pinpoint-answer-today page styles.
   ========================================================================== */

:root {
  --p-ink: #181014;          /* warm near-black           */
  --p-ink-2: #241a1f;        /* panel surface             */
  --p-ink-3: #36272e;        /* raised / borders          */
  --p-coral: #ff6f61;        /* spotlight accent          */
  --p-coral-2: #ff9279;      /* highlight                 */
  --p-amber: #ffcf6b;        /* secondary accent          */
  --p-cream: #f4ece7;        /* text on dark              */
  --p-muted: #b49aa4;        /* muted on dark             */
  --p-line: rgba(244,236,231,0.12);
  --p-good: #6fd09a;
  --p-radius: 16px;
  --p-display: 'Fraunces', Georgia, serif;
}

/* ---- Page hero / sections ----------------------------------------------- */

.pinpoint-page { max-width: 980px; margin: 0 auto; padding: 20px 16px 56px; }
.pinpoint-hero { text-align: center; margin: 8px 0 24px; }
.pinpoint-hero .p-eyebrow { font: 600 0.78rem/1 var(--p-display); letter-spacing: 0.22em; text-transform: uppercase; color: #c85a4d; margin-bottom: 12px; }
.pinpoint-hero h1 { font: 600 clamp(2rem, 5vw, 3rem)/1.05 var(--p-display); color: var(--p-ink); margin: 0 0 10px; letter-spacing: -0.01em; }
.pinpoint-hero h1 em { font-style: italic; color: #c85a4d; }
.pinpoint-hero p { color: #5c4f55; max-width: 60ch; margin: 0 auto; font-size: 1.05rem; }

/* ---- Game panel --------------------------------------------------------- */

.p-game {
  background: radial-gradient(90% 70% at 50% 0%, #3a2630 0%, var(--p-ink-2) 55%, var(--p-ink) 100%);
  border: 1px solid var(--p-ink-3); border-radius: var(--p-radius);
  padding: 20px 18px 22px; color: var(--p-cream); position: relative; overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(10,6,9,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* spotlight cone from the top */
.p-game::before { content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 70%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,207,107,0.10), transparent 70%); }

.p-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; position: relative; z-index: 1; }
.p-seg { display: inline-flex; gap: 4px; background: rgba(255,255,255,0.04); border: 1px solid var(--p-line); border-radius: 11px; padding: 4px; }
.p-seg-btn { font: 600 0.85rem/1 system-ui, sans-serif; color: var(--p-muted); background: none; border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: all 0.15s ease; }
.p-seg-btn:hover { color: var(--p-cream); }
.p-seg-btn.is-active { color: var(--p-ink); background: linear-gradient(180deg, var(--p-coral-2), var(--p-coral)); }

.p-btn { font: 600 0.9rem/1 system-ui, sans-serif; color: var(--p-cream); background: rgba(255,255,255,0.06); border: 1px solid var(--p-line); border-radius: 10px; padding: 11px 16px; cursor: pointer; transition: all 0.15s ease; }
.p-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,111,97,0.5); transform: translateY(-1px); }
.p-btn-primary { color: var(--p-ink); background: linear-gradient(180deg, var(--p-coral-2), var(--p-coral)); border-color: var(--p-coral-2); }
.p-btn-primary:hover { filter: brightness(1.05); }
.p-link { background: none; border: 0; color: var(--p-muted); text-decoration: underline; padding: 8px; }
.p-link:hover { color: var(--p-cream); background: none; transform: none; }

/* ---- Stage -------------------------------------------------------------- */

.p-stage { text-align: center; position: relative; z-index: 1; padding: 8px 0 4px; }
.p-prompt { color: var(--p-muted); font-size: 0.95rem; margin: 0 0 16px; }
.p-clues { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 56px; }
.p-clue {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: #fbf4ee; color: #2a1f24; font: 600 1.05rem/1 system-ui, sans-serif;
  padding: 14px 18px 14px 14px; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5);
}
.p-clue-n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 0.72rem/1 system-ui; background: var(--p-coral); color: #fff; }
.p-clue.is-new { animation: p-reveal 0.4s cubic-bezier(.2,1.3,.4,1) backwards; box-shadow: 0 0 0 2px var(--p-amber), 0 8px 20px -8px rgba(255,207,107,0.5); }

.p-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.p-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); transition: background 0.2s ease; }
.p-dot.is-on { background: var(--p-coral); }

@keyframes p-reveal { from { transform: scale(0.7) translateY(6px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.shake { animation: p-shake 0.34s; }
@keyframes p-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} }

/* ---- Guess bar ---------------------------------------------------------- */

.p-guessbar { display: flex; gap: 8px; margin: 22px auto 6px; max-width: 460px; position: relative; z-index: 1; }
.p-input {
  flex: 1; font: 500 1rem/1 system-ui, sans-serif; color: var(--p-cream);
  background: rgba(255,255,255,0.06); border: 1px solid var(--p-line); border-radius: 11px; padding: 13px 15px;
}
.p-input::placeholder { color: var(--p-muted); }
.p-input:focus { outline: none; border-color: var(--p-coral); box-shadow: 0 0 0 3px rgba(255,111,97,0.25); }
.p-input:disabled { opacity: 0.5; }
.p-controls { text-align: center; position: relative; z-index: 1; }
.p-msg { text-align: center; color: var(--p-amber); min-height: 1.2em; margin: 8px 0 4px; font-size: 0.92rem; position: relative; z-index: 1; }

/* ---- Result ------------------------------------------------------------- */

.p-result { position: relative; z-index: 1; margin-top: 10px; }
.p-result[hidden] { display: none; }
.p-result-card { background: linear-gradient(180deg, var(--p-ink-3), var(--p-ink-2)); border: 1px solid var(--p-line); border-radius: 14px; padding: 22px; text-align: center; }
.p-result-tag { font: 700 0.82rem/1 system-ui; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 8px; }
.p-result-tag.is-win { color: var(--p-good); }
.p-result-tag.is-lose { color: var(--p-coral); }
.p-result-cat { font: 600 1.7rem/1.1 var(--p-display); color: var(--p-cream); margin: 0 0 14px; }
.p-result-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.p-result-item { background: rgba(255,255,255,0.07); border: 1px solid var(--p-line); border-radius: 999px; padding: 6px 13px; font: 600 0.88rem/1 system-ui; color: var(--p-cream); }
.p-result-explain { color: var(--p-muted); font-size: 0.95rem; margin: 0 0 18px; }
.p-result-actions { display: flex; gap: 10px; justify-content: center; }
.p-copied { color: var(--p-good); font-size: 0.85rem; margin: 12px 0 0; }

.p-statsbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--p-line); color: var(--p-muted); font-size: 0.85rem; position: relative; z-index: 1; }
.p-statsbar b { color: var(--p-coral-2); }

/* ---- Content sections --------------------------------------------------- */

.pinpoint-section { margin: 40px 0 0; }
.pinpoint-section h2 { font: 600 1.6rem/1.2 var(--p-display); color: var(--p-ink); margin: 0 0 14px; }
.pinpoint-section h3 { font: 600 1.15rem/1.3 var(--p-display); color: var(--p-ink); margin: 22px 0 8px; }
.pinpoint-section p, .pinpoint-section li { color: #483c42; font-size: 1.02rem; line-height: 1.7; }
.pinpoint-section ul, .pinpoint-section ol { padding-left: 1.25em; margin: 10px 0; }
.pinpoint-section li { margin: 6px 0; }

.p-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 18px 0; }
.p-rule-card { background: #fff; border: 1px solid #ece3e6; border-left: 4px solid var(--p-coral); border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 14px -10px rgba(24,16,20,0.4); }
.p-rule-card .p-rule-n { font: 700 0.78rem/1 system-ui; color: #c85a4d; letter-spacing: 0.08em; }
.p-rule-card h4 { margin: 8px 0 4px; font-size: 1.02rem; color: var(--p-ink); }
.p-rule-card p { font-size: 0.92rem; color: #5e5158; margin: 0; }

.p-faq details { background: #fff; border: 1px solid #ece3e6; border-radius: 12px; padding: 4px 18px; margin: 10px 0; }
.p-faq details[open] { box-shadow: 0 8px 22px -14px rgba(24,16,20,0.5); }
.p-faq summary { cursor: pointer; list-style: none; padding: 14px 0; font: 600 1.02rem/1.4 system-ui, sans-serif; color: var(--p-ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--p-display); color: var(--p-coral); }
.p-faq details[open] summary::after { content: "–"; }
.p-faq details p { margin: 0 0 14px; }

.pinpoint-cross { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.pinpoint-cross a { display: block; text-align: center; padding: 14px 10px; border-radius: 11px; background: #fff; border: 1px solid #ece3e6; color: var(--p-ink); font-weight: 600; text-decoration: none; transition: all 0.15s ease; }
.pinpoint-cross a:hover { border-color: var(--p-coral); transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(24,16,20,0.5); }

/* ==========================================================================
   /pinpoint-answer-today
   ========================================================================== */

.pa-puzzle-num { display: inline-block; margin-top: 8px; font: 600 0.95rem/1 system-ui, sans-serif; color: #c85a4d; background: #fdeee9; border: 1px solid #f6d8cf; padding: 6px 13px; border-radius: 999px; }
.pa-answerbox { background: linear-gradient(180deg, #fffaf8, #fff); border: 1px solid #efe3df; border-radius: 16px; padding: 22px; box-shadow: 0 14px 36px -24px rgba(24,16,20,0.5); margin: 8px 0 26px; }
.pa-sub { color: #5c4f55; margin: 0 0 16px; }
.pa-clue-list { display: grid; gap: 10px; margin: 0 0 18px; }
.pa-clue { display: flex; align-items: center; gap: 12px; background: #fbf4f1; border: 1px solid #f1e2dd; border-radius: 12px; padding: 13px 16px; }
.pa-clue .pa-clue-n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font: 700 0.78rem/1 system-ui; background: var(--p-coral); color: #fff; }
.pa-clue.pa-blur .pa-clue-word { filter: blur(6px); user-select: none; }
.pa-clue-word { font: 600 1.05rem/1 system-ui; color: var(--p-ink); }
.pa-revealnext, .pa-reveal-btn { font: 600 0.95rem/1 system-ui; cursor: pointer; border: 0; border-radius: 11px; padding: 12px 18px; }
.pa-revealnext { color: var(--p-ink); background: #f4e7e2; border: 1px solid #ecd6cf; }
.pa-revealnext:hover { background: #efd9d2; }
.pa-reveal-btn { color: var(--p-ink); background: linear-gradient(180deg, var(--p-coral-2), var(--p-coral)); box-shadow: 0 6px 18px -8px rgba(255,111,97,0.7); display: block; width: 100%; margin-top: 4px; }
.pa-reveal-btn small { display: block; font-weight: 500; font-size: 0.72rem; color: #7a2c22; margin-top: 3px; }
.pa-answer { text-align: center; }
.pa-hidden { display: none; }
.pa-answer-reveal { margin-top: 16px; padding: 18px; background: #fff6f3; border: 1px dashed #f3cabf; border-radius: 12px; }
.pa-answer-reveal .pa-cat { font: 600 1.5rem/1.2 var(--p-display); color: var(--p-ink); margin: 0 0 6px; }
.pa-answer-reveal .pa-explain { color: #5c4f55; margin: 0; font-size: 0.95rem; }
.pa-copy { margin-top: 14px; font: 600 0.85rem/1 system-ui; cursor: pointer; color: var(--p-ink); background: #fff; border: 1px solid #ecd6cf; border-radius: 9px; padding: 9px 14px; }
.pa-copy:hover { border-color: var(--p-coral); }
.pa-copied { color: #2e9e6b; font-size: 0.82rem; margin-left: 8px; }

.pa-yesterday { background: #f8f2f4; border: 1px dashed #e6d3d9; border-radius: 12px; padding: 16px 18px; margin-top: 22px; }
.pa-yesterday h3 { font: 600 1.05rem/1 var(--p-display); color: var(--p-ink); margin: 0 0 6px; }
.pa-yesterday p { margin: 0; color: #5c4f55; font-size: 0.95rem; }
.pa-yesterday a { color: #c85a4d; font-weight: 600; text-decoration: none; }

@media (max-width: 560px) {
  .p-game { padding: 16px 12px 18px; }
  .p-guessbar { flex-direction: column; }
  .p-result-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .p-clue.is-new, .shake { animation: none !important; } }