/* Centaora Pulse — game styles. Self-hosted, no CDN. Built on the
   official Centaora design tokens (brand-book.md / tokens.json): navy
   leads; teal appears only on navy/deep-navy grounds (ocean replaces it
   on light grounds); gold is a filled accent, never a text colour;
   headings in Montserrat, running text in Source Sans 3.

   !important appears only on the handful of interactive elements
   (buttons, and the three objective cards which act as buttons) that
   the active theme's own button defaults were overriding — turning them
   into low-contrast, pill-shaped controls that didn't suit two lines of
   text. Scoping everything under .son-root already wins most battles;
   these few properties need the extra push. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Source+Sans+3:wght@400;600&display=swap');

.son-root {
  --navy: #082452;
  --deep-navy: #021735;
  --teal: #10AFC2;
  --ocean: #075D78;
  --gold: #D9A53A;
  --gold-deep: #B9852C;
  --ivory: #FFF9ED;
  --soft: #EEF4F7;
  --ink: #13213A;
  --muted: #627087;
  --white: #FFFFFF;
  --danger: #B23A1E;
  --border: #D5DFE8;
  --border-strong: #7A8AA3;
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(2,23,53,.08);
  --shadow-md: 0 8px 24px rgba(2,23,53,.12);
  --font-display: Montserrat, system-ui, sans-serif;
  --font-sans: "Source Sans 3", system-ui, sans-serif;

  font-family: var(--font-sans);
  color: var(--ink);
  box-sizing: border-box;
}
.son-root * { box-sizing: border-box; }

/* Full-bleed band so the game isn't squeezed by a narrow theme column —
   same viewport-breakout technique used for the hub card section —
   with a generous but bounded inner reading width. */
.son-band {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: var(--soft);
  padding: 36px 24px 56px;
}
.son-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(0px, calc((100vw - 1180px) / 2 - 24px));
  padding-right: max(0px, calc((100vw - 1180px) / 2 - 24px));
}
@media (max-width: 1228px) {
  .son-inner { padding-left: 0; padding-right: 0; }
}

.son-fade-in { animation: son-fade .35s ease both; }
@keyframes son-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.son-root .son-title {
  font-family: var(--font-display);
  color: var(--deep-navy);
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 6px;
}
.son-root .son-sub { color: var(--muted); font-size: 17px; margin: 0 0 18px; line-height: 1.5; }

/* ---- How to play ---- */
.son-root .son-guide-toggle {
  background: var(--white) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--navy) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: 16px;
  padding: 9px 16px;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
}
.son-root .son-guide-toggle:hover { border-color: var(--ocean) !important; color: var(--ocean) !important; }

.son-guide {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 24px;
  max-height: 900px;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease, margin .3s ease;
}
.son-guide--collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-width: 0; }
.son-guide-framing { font-family: var(--font-sans); font-style: italic; color: var(--deep-navy); font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
.son-guide-section { margin-bottom: 14px; }
.son-guide-section:last-child { margin-bottom: 0; }
.son-guide-section h4 { font-family: var(--font-display); font-weight: 600; color: var(--ocean); font-size: 16px; margin: 0 0 4px; }
.son-guide-section p { color: var(--ink); font-size: 16px; line-height: 1.6; margin: 0; }

/* Modal (help button during play) */
.son-help-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--deep-navy);
  color: var(--ivory);
  border: none;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 9999;
}
.son-help-btn:hover { background: var(--ocean); }
.son-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(2,23,53,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 10000;
}
.son-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.son-modal .son-guide { border: none; padding: 0; max-height: none; margin-bottom: 20px; }
.son-root .son-modal-close {
  display: block;
  margin: 0 auto;
  background: var(--soft) !important;
  border: none !important;
  color: var(--navy) !important;
  font-weight: 600;
  font-family: var(--font-sans) !important;
  padding: 10px 22px;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
}
.son-root .son-modal-close:hover { background: var(--border) !important; }

/* ---- Start / sign-up screen ---- */
.son-start { padding: 8px 4px 32px; }
.son-objectives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 18px 0;
}
/* Rendered as a <button>, which is why the shape and contrast below are
   locked down with !important — left to the theme's own button
   defaults, these were turning into low-contrast, pill/oval shapes with
   no room for two lines of text. A proper rounded rectangle (radius-lg,
   per the card spec in the brand book) fits a heading and a sentence. */
.son-root .son-objective-card {
  text-align: left !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm);
  padding: 22px !important;
  cursor: pointer;
  font-family: var(--font-sans) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px;
  width: 100%;
  height: auto !important;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.son-root .son-objective-card:hover { border-color: var(--teal) !important; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.son-root .son-objective-card strong {
  display: block;
  font-size: 18px;
  color: var(--deep-navy) !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
}
.son-root .son-objective-card span {
  display: block;
  font-size: 16px;
  color: var(--muted) !important;
  line-height: 1.45;
}

.son-history { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 16px; }
.son-history h3 { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 17px; margin: 0 0 10px; }
.son-history-row { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); padding: 6px 0; border-bottom: 1px solid var(--soft); }
.son-history-row span:first-child { color: var(--ink); font-weight: 600; }

/* ---- Play screen ---- */
.son-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  background: var(--deep-navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 18px;
  font-size: 16px;
}
.son-round { font-weight: 700; }
.son-objective { color: var(--teal); font-weight: 600; }
.son-tokens { display: flex; align-items: center; gap: 6px; }
.son-token {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: inline-block;
  transition: background .2s;
}
.son-token--on { background: var(--gold); }

.son-landing {
  background: linear-gradient(135deg, var(--ocean), var(--navy));
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 18px;
  animation: son-fade .4s ease both;
}
.son-landing strong { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 18px; display: block; margin-bottom: 4px; }
.son-landing p { margin: 0; font-size: 16px; line-height: 1.5; }

.son-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

/* Card flip — front shows the decision, back reveals the consequence. */
.son-flipper {
  perspective: 1200px;
  min-height: 220px;
  position: relative;
}
.son-card,
.son-card-back {
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.4,.1,.2,1);
  transform-style: preserve-3d;
  height: 100%;
}
.son-card { border-left: 5px solid var(--muted); background: var(--white); position: relative; z-index: 2; }
.son-card-back {
  border-left: 5px solid var(--teal);
  background: var(--deep-navy);
  color: var(--white);
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  justify-content: center;
}
.son-flipper > .son-card { position: relative; }
.son-flipper--flipped > .son-card { transform: rotateY(180deg); }
.son-flipper--flipped > .son-card-back { transform: rotateY(0deg); }
.son-card-back-tag { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.son-card-back p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; }

.son-card--noise { border-left-color: var(--border-strong); background: var(--soft); }
.son-card--rumour { border-left-color: var(--danger); background: #FBEEEA; }
.son-card--hint { border-left-color: var(--teal); background: #EAF8FA; }
.son-card--pivot { border-left-color: var(--gold); background: #FDF5E7; }
.son-card--opportunity { border-left-color: var(--navy); background: #EEF1F7; }

.son-card-kindtag {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--muted);
}
.son-card--hint .son-card-kindtag { color: var(--ocean); }
.son-card--pivot .son-card-kindtag { color: var(--gold-deep); }
.son-card--opportunity .son-card-kindtag { color: var(--navy); }
.son-card--rumour .son-card-kindtag { color: var(--danger); }

.son-card-title { font-size: 18px; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.son-card-text { font-size: 16px; color: var(--muted); line-height: 1.5; flex: 1; }

.son-root .son-card-btn {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--deep-navy) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans) !important;
  transition: background .15s, transform .1s;
}
.son-root .son-card-btn:hover:not(:disabled) { background: var(--ocean) !important; }
.son-root .son-card-btn:active:not(:disabled) { transform: scale(.97); }
.son-root .son-card-btn:disabled { background: var(--border) !important; color: var(--muted) !important; cursor: default; }

.son-root .son-next {
  display: block;
  margin: 0 auto;
  background: var(--gold) !important;
  color: var(--deep-navy) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 13px 30px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-sans) !important;
  transition: background .15s, transform .1s;
}
.son-root .son-next:hover { background: var(--gold-deep) !important; color: var(--deep-navy) !important; }
.son-root .son-next:active { transform: scale(.98); }
.son-root .son-next:disabled { background: var(--border) !important; color: var(--muted) !important; cursor: default; }

/* ---- Review / report ---- */
.son-review, .son-report { padding: 8px 4px 32px; }
.son-pattern-text { font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 22px; }

.son-meters { display: flex; flex-direction: column; gap: 18px; margin: 20px 0; max-width: 560px; }
.son-meter-label { display: flex; justify-content: space-between; font-weight: 700; color: var(--navy); margin-bottom: 6px; font-size: 16px; font-family: var(--font-display); }
.son-meter-num { font-variant-numeric: tabular-nums; }
.son-meter-track { background: var(--border); border-radius: 6px; height: 12px; overflow: hidden; }
.son-meter-fill { height: 100%; border-radius: 6px; transition: width .65s cubic-bezier(.2,.6,.3,1); }
.son-meter-fill--focus { background: var(--teal); }
.son-meter-fill--strategy { background: var(--navy); }
.son-meter-fill--adaptability { background: var(--gold); }

.son-detail { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 4px 18px; margin-bottom: 20px; max-width: 640px; }
.son-detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--soft); font-size: 16px; }
.son-detail-row:last-child { border-bottom: none; }
.son-detail-row span:first-child { color: var(--muted); }
.son-detail-row span:last-child { font-weight: 700; color: var(--ink); }

.son-passed-by {
  background: #FBEEEA;
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 22px;
  max-width: 720px;
}
.son-passed-by strong { color: var(--deep-navy); }

/* ---- Sign-up / consent gate (shared: pre-play and end-of-report) ---- */
.son-gate { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 20px; max-width: 480px; }
.son-gate p { margin: 0 0 12px; font-size: 16px; color: var(--ink); line-height: 1.5; }
.son-gate input[type="text"],
.son-gate input[type="email"] {
  display: block; width: 100%; padding: 11px 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-size: 16px; margin-bottom: 10px; font-family: var(--font-sans);
  color: var(--ink); background: var(--white);
}
.son-gate input:focus { outline: 2px solid var(--focus, var(--ocean)); outline-offset: 2px; }
.son-gate-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  margin: 4px 0 12px;
  cursor: pointer;
}
.son-gate-consent input[type="checkbox"] {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--ocean);
  flex-shrink: 0;
}
.son-gate-msg { color: var(--danger); font-size: 15px; min-height: 18px; font-weight: 600; }

.son-actions { display: flex; justify-content: center; }

@media (max-width: 600px) {
  .son-band { padding: 26px 16px 40px; }
  .son-root .son-title { font-size: 24px; }
  .son-topbar { flex-direction: column; align-items: flex-start; }
  .son-grid { grid-template-columns: 1fr; }
  .son-help-btn { bottom: 16px; right: 16px; }
}