/* ==========================================================================
   Queens — "Royal Logic" aesthetic
   Game widget + /play-queens page sections. Page chrome inherits style.css.
   ========================================================================== */

:root {
  --q-ink: #1d1422;          /* deep aubergine ink            */
  --q-ink-2: #2a1d31;        /* panel surface                 */
  --q-ink-3: #38283f;        /* raised surface / borders      */
  --q-bronze: #c9a24b;       /* regal brass accent            */
  --q-bronze-2: #e3c478;     /* lighter brass                 */
  --q-cream: #f6efe2;        /* parchment text on dark        */
  --q-muted: #b9a9bf;        /* muted text on dark            */
  --q-line: rgba(246, 239, 226, 0.14);
  --q-seam: #160f1a;         /* thick region seam colour      */
  --q-danger: #e2543f;
  --q-radius: 16px;
  --q-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ---- Page hero / sections (light page, fits site) ----------------------- */

.queens-page { max-width: 980px; margin: 0 auto; padding: 20px 16px 56px; }

.queens-hero { text-align: center; margin: 8px 0 24px; }
.queens-hero .q-eyebrow {
  font: 600 0.78rem/1 var(--q-display);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #9a7b2e; margin-bottom: 12px;
}
.queens-hero h1 {
  font-family: var(--q-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  color: var(--q-ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.queens-hero h1 em { font-style: italic; color: #9a7b2e; }
.queens-hero p { color: #5c5460; max-width: 60ch; margin: 0 auto; font-size: 1.05rem; }

/* ---- The game panel (dark, refined) ------------------------------------- */

.q-game {
  background:
    radial-gradient(120% 80% at 50% -10%, #34233d 0%, var(--q-ink-2) 55%, var(--q-ink) 100%);
  border: 1px solid var(--q-ink-3);
  border-radius: var(--q-radius);
  padding: 18px 18px 22px;
  box-shadow: 0 24px 60px -28px rgba(20, 10, 26, 0.7), inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--q-cream);
  position: relative;
  overflow: hidden;
}
.q-game::before { /* faint grain/texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* toolbar */
.q-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.q-size-group { display: flex; gap: 6px; flex-wrap: wrap; }
.q-size {
  font: 600 0.9rem/1 system-ui, sans-serif;
  color: var(--q-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--q-line);
  border-radius: 9px; padding: 8px 11px; cursor: pointer;
  transition: all 0.15s ease;
}
.q-size:hover { color: var(--q-cream); border-color: rgba(201,162,75,0.5); }
.q-size.is-active {
  color: var(--q-ink); background: linear-gradient(180deg, var(--q-bronze-2), var(--q-bronze));
  border-color: var(--q-bronze-2); box-shadow: 0 2px 10px -2px rgba(201,162,75,0.5);
}
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.q-btn {
  font: 600 0.9rem/1 system-ui, sans-serif;
  color: var(--q-cream);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--q-line);
  border-radius: 10px; padding: 10px 14px; cursor: pointer;
  transition: all 0.15s ease;
}
.q-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(201,162,75,0.5); transform: translateY(-1px); }
.q-btn:active { transform: translateY(0); }
.q-btn-primary {
  color: var(--q-ink);
  background: linear-gradient(180deg, var(--q-bronze-2), var(--q-bronze));
  border-color: var(--q-bronze-2);
}
.q-btn-primary:hover { filter: brightness(1.05); }

/* status bar */
.q-statusbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.q-chip {
  font: 600 0.85rem/1 system-ui, sans-serif;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--q-line);
}
.q-timer { font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.q-diff[data-level="easy"]   { color: #9be08a; }
.q-diff[data-level="medium"] { color: var(--q-bronze-2); }
.q-diff[data-level="hard"]   { color: #f3a35e; }
.q-diff[data-level="expert"] { color: #ef8497; }

.q-switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--q-muted); font-size: 0.85rem; }
.q-switch input { accent-color: var(--q-bronze); width: 16px; height: 16px; }
.q-switch:hover { color: var(--q-cream); }

/* ---- Board -------------------------------------------------------------- */

.q-board-wrap { position: relative; display: flex; justify-content: center; z-index: 1; }

.q-board {
  --n: 8;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: min(100%, 540px);
  aspect-ratio: 1 / 1;
  background: var(--q-seam);
  border: 3px solid var(--q-seam);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,0.7);
  touch-action: manipulation;
}

.q-cell {
  position: relative;
  background: var(--rc, #ddd);
  border: 0.5px solid rgba(22, 15, 26, 0.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: filter 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.q-cell:hover { filter: brightness(1.06); }
.q-cell:active { transform: scale(0.96); }
.q-cell:focus-visible { outline: 3px solid var(--q-ink); outline-offset: -3px; z-index: 2; }

/* thick seams between regions */
.q-cell.b-top    { border-top: 3px solid var(--q-seam); }
.q-cell.b-bottom { border-bottom: 3px solid var(--q-seam); }
.q-cell.b-left   { border-left: 3px solid var(--q-seam); }
.q-cell.b-right  { border-right: 3px solid var(--q-seam); }

/* marks */
.q-mark { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: clamp(0.8rem, 3.4vw, 1.3rem); font-weight: 700; line-height: 1; }

.q-cell.has-x .q-mark   { color: rgba(20, 10, 26, 0.72); }
.q-cell.has-autox .q-mark { color: rgba(20, 10, 26, 0.26); font-weight: 600; }

.q-crown { width: 62%; height: 62%; color: #2a1a06; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35)); }
.q-cell.has-crown .q-crown { animation: q-pop 0.22s cubic-bezier(.2,1.4,.4,1); }
.q-cell.has-crown { box-shadow: inset 0 0 0 2px rgba(42,26,6,0.18); }

.q-cell.is-conflict { background: var(--q-danger) !important; }
.q-cell.is-conflict .q-crown { color: #fff; animation: q-shake 0.32s; }

.q-cell.is-hint::after {
  content: ""; position: absolute; inset: 8%; border-radius: 8px;
  box-shadow: 0 0 0 3px var(--q-ink), 0 0 16px 3px rgba(29,20,34,0.6);
  animation: q-hint 0.8s ease-in-out infinite alternate;
}
.q-cell.is-won .q-crown { animation: q-win-bounce 0.5s cubic-bezier(.2,1.5,.4,1) backwards; animation-delay: var(--win-delay, 0ms); }

/* colour-blind region labels */
.q-cb-label {
  position: absolute; top: 2px; left: 4px;
  font: 700 0.62rem/1 system-ui, sans-serif; color: rgba(20,10,26,0.5);
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.q-board.is-cb .q-cb-label { opacity: 1; }

@keyframes q-pop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes q-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes q-hint { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes q-win-bounce { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ---- Win overlay -------------------------------------------------------- */

.q-win {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 10, 22, 0.72); backdrop-filter: blur(4px);
  animation: q-fade 0.25s ease;
}
.q-win[hidden] { display: none; }
.q-win-card {
  background: linear-gradient(180deg, var(--q-ink-3), var(--q-ink-2));
  border: 1px solid rgba(201,162,75,0.4);
  border-radius: 16px; padding: 26px 28px; text-align: center;
  max-width: 340px; box-shadow: 0 30px 70px -25px rgba(0,0,0,0.8);
}
.q-win-crown { width: 52px; margin: 0 auto 6px; }
.q-win-crown .q-crown { width: 100%; height: 100%; color: var(--q-bronze-2); }
.q-win-card h3 { font: 600 1.8rem/1 var(--q-display); color: var(--q-cream); margin: 0 0 6px; }
.q-win-sub { color: var(--q-muted); font-size: 0.95rem; margin: 0 0 18px; }
.q-win-actions { display: flex; gap: 10px; justify-content: center; }
.q-win-copied { color: #9be08a; font-size: 0.85rem; margin: 12px 0 0; }

@keyframes q-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Message + stats ---------------------------------------------------- */

.q-msg { text-align: center; color: var(--q-muted); min-height: 1.2em; margin: 12px 0 4px;
  position: relative; z-index: 1; font-size: 0.92rem; }

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

/* ---- Content sections below the game ------------------------------------ */

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

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

/* FAQ accordion */
.q-faq details {
  background: #fff; border: 1px solid #ece6f0; border-radius: 12px;
  padding: 4px 18px; margin: 10px 0; transition: box-shadow 0.15s ease;
}
.q-faq details[open] { box-shadow: 0 8px 22px -14px rgba(40,20,50,0.5); }
.q-faq summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  font: 600 1.02rem/1.4 system-ui, sans-serif; color: var(--q-ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.q-faq summary::-webkit-details-marker { display: none; }
.q-faq summary::after { content: "+"; font: 400 1.4rem/1 var(--q-display); color: var(--q-bronze); transition: transform 0.2s ease; }
.q-faq details[open] summary::after { transform: rotate(45deg); }
.q-faq details p { margin: 0 0 14px; }

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

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 560px) {
  .q-game { padding: 14px 12px 18px; }
  .q-toolbar { gap: 10px; }
  .q-actions { width: 100%; }
  .q-actions .q-btn { flex: 1; padding: 10px 8px; }
  .q-size { padding: 7px 9px; font-size: 0.84rem; }
  .q-board { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .q-cell, .q-crown, .q-cell.is-won .q-crown, .q-cell.is-hint::after,
  .q-win, .q-cell.has-crown .q-crown { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   /queens-answer-today  (answer & hints page)
   ========================================================================== */

.qa-puzzle-num {
  display: inline-block; margin-top: 8px;
  font: 600 0.95rem/1 system-ui, sans-serif; color: #9a7b2e;
  background: #fbf4e3; border: 1px solid #efe0bd; padding: 6px 13px; border-radius: 999px;
}

/* answer box (above the fold) */
.qa-answerbox {
  background: linear-gradient(180deg, #fffdf8, #fff);
  border: 1px solid #efe6d6; border-radius: 16px; padding: 22px;
  box-shadow: 0 14px 36px -24px rgba(40,20,50,0.5); margin: 8px 0 26px;
}
.qa-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.qa-tag {
  font: 600 0.82rem/1 system-ui; padding: 7px 12px; border-radius: 999px;
  background: #f4eee5; color: #6a5d48; border: 1px solid #e8ddc9;
}
.qa-tag b { color: var(--q-ink); }
.qa-tag.is-diff { background: #fbf0e3; color: #9a6a2e; border-color: #f0d9bd; }
.qa-trap { color: #5c5460; font-size: 0.98rem; margin: 0 0 18px; }
.qa-trap strong { color: var(--q-ink); }

/* generic blur-to-reveal */
.qa-reveal { text-align: center; }
.qa-reveal-btn {
  font: 600 1rem/1 system-ui; cursor: pointer; color: var(--q-ink);
  background: linear-gradient(180deg, var(--q-bronze-2), var(--q-bronze));
  border: 0; border-radius: 12px; padding: 13px 22px;
  box-shadow: 0 6px 18px -8px rgba(201,162,75,0.7); transition: filter 0.15s ease;
}
.qa-reveal-btn:hover { filter: brightness(1.05); }
.qa-reveal-btn small { display: block; font-weight: 500; font-size: 0.72rem; color: #5b4a1e; margin-top: 3px; }
.qa-hidden { display: none; }

/* solution: board grid + text coordinates, side by side */
.qa-solution { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 600px) { .qa-solution { grid-template-columns: 1fr; } }

.qa-grid {
  display: grid; aspect-ratio: 1/1; width: 100%; max-width: 360px; margin: 0 auto;
  border: 3px solid var(--q-seam); border-radius: 10px; overflow: hidden;
  background: var(--q-seam); box-shadow: 0 12px 30px -18px rgba(0,0,0,0.5);
}
.qa-grid .qa-cell {
  background: #fbf7ef; border: 0.5px solid #e7ddc9;
  display: flex; align-items: center; justify-content: center;
}
.qa-grid .qa-cell.is-crown { background: #fff5dc; }
.qa-grid .qa-cell .q-crown { width: 60%; height: 60%; color: #9a6a13; }

.qa-coords h3 { font: 600 1.05rem/1.3 var(--q-display); color: var(--q-ink); margin: 0 0 10px; }
.qa-coord-list { list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.qa-coord-list li {
  font: 600 0.92rem/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: #463f4d;
  padding: 6px 10px; background: #faf6ef; border: 1px solid #eee5d4; border-radius: 8px;
}
.qa-coord-list b { color: #9a6a13; }
.qa-copy {
  font: 600 0.85rem/1 system-ui; cursor: pointer; color: var(--q-ink);
  background: #fff; border: 1px solid #e3d8c4; border-radius: 9px; padding: 9px 14px;
  transition: all 0.15s ease;
}
.qa-copy:hover { border-color: var(--q-bronze); }
.qa-copied { color: #2e9e6b; font-size: 0.82rem; margin-left: 8px; }

/* progressive hint ladder */
.qa-hints { display: grid; gap: 10px; margin-top: 6px; }
.qa-hint { background: #fff; border: 1px solid #ece6f0; border-radius: 12px; overflow: hidden; }
.qa-hint-btn {
  width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
  padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font: 600 1rem/1.3 system-ui; color: var(--q-ink);
}
.qa-hint-btn:hover { background: #faf7fb; }
.qa-hint-btn .qa-hint-cue { font: 500 0.82rem/1 system-ui; color: var(--q-bronze); }
.qa-hint-body { padding: 0 18px 16px; color: #4b4452; line-height: 1.6; }

/* yesterday */
.qa-yesterday {
  background: #f7f4fa; border: 1px dashed #ddd3e4; border-radius: 12px;
  padding: 16px 18px; margin-top: 22px;
}
.qa-yesterday h3 { font: 600 1.05rem/1 var(--q-display); color: var(--q-ink); margin: 0 0 6px; }
.qa-yesterday p { margin: 0; color: #5c5460; font-size: 0.95rem; }
.qa-yesterday a { color: #9a7b2e; font-weight: 600; text-decoration: none; }