/* COME Play — article-embedded mini-games.
   Scope: .ctc-game container only (plus body.ctc-game-page for page-level hooks).
   Colors map onto the Kadence global palette when available, with standalone
   fallbacks so the module also renders outside the theme. */

.ctc-game{
  /* fallbacks; on-site the Kadence palette vars resolve first */
  --vg-jade:var(--global-palette11,#0e6f5c);
  --vg-jade-deep:var(--global-palette3,#0e2f2b);
  --vg-vermilion:#c7000b;
  --vg-amber:#a06a1b;
  --vg-ink:var(--global-palette3,#14413c);
  --vg-paper:var(--global-palette8,#f7f6f2);
  --vg-white:var(--global-palette9,#fff);
  --vg-line:var(--global-palette7,#d8dedb);
  --vg-text:var(--global-palette4,#22312e);
  --vg-heading:var(--global-palette3,#1c2b29);
  --vg-muted:#5c6d69;
  --vg-ok:#1c7d43;
  --vg-bad:#b3391f;
  --vg-accent:var(--vg-jade);
  --vg-accent-soft:rgba(14,111,92,.10);

  border:1px solid var(--vg-line);
  border-radius:var(--ctc-radius,8px);
  background:var(--vg-white);
  box-shadow:0 18px 42px rgba(18,42,46,.10);
  overflow:hidden;
  margin:26px 0;
  position:relative;
}
.ctc-game[data-accent="route"]{--vg-accent:var(--vg-vermilion);--vg-accent-soft:rgba(199,0,11,.08)}
.ctc-game[data-accent="translator"]{--vg-accent:var(--vg-amber);--vg-accent-soft:rgba(160,106,27,.10)}
.ctc-game[data-accent="region"]{--vg-accent:var(--vg-jade);--vg-accent-soft:rgba(14,111,92,.10)}
.ctc-game[data-accent="culture"]{--vg-accent:var(--vg-ink);--vg-accent-soft:rgba(20,65,60,.10)}
.ctc-game::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--vg-accent),rgba(255,255,255,0))}

.vg-inner{padding:clamp(16px,3vw,26px)}
.vg-chip{display:inline-flex;align-items:center;gap:6px;background:var(--vg-accent-soft);color:var(--vg-accent);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 11px}
.vg-title{margin:10px 0 4px;font-size:clamp(18px,2.4vw,22px);line-height:1.25;color:var(--vg-heading)}
.vg-sub{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--vg-muted)}
.vg-meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.vg-meta span{font-size:11.5px;color:var(--vg-muted);background:var(--vg-paper);border:1px solid var(--vg-line);border-radius:6px;padding:3px 9px}
.vg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;border-radius:var(--ctc-radius-btn,6px);font-weight:700;font-size:14.5px;padding:12px 20px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.vg-btn-primary{background:var(--vg-accent);color:#fff}
.vg-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,42,46,.18)}
.vg-btn-wa{background:#128c4b;color:#fff}
.vg-btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,42,46,.18)}
.vg-btn-ghost{background:transparent;color:var(--vg-text);border:1px solid var(--vg-line)}
.vg-btn-ghost:hover{border-color:var(--vg-accent);color:var(--vg-accent)}
.vg-note{font-size:11.5px;color:#7c8b87;margin-top:10px}

.vg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.vg-progress{font-size:12.5px;font-weight:700;color:var(--vg-accent)}
.vg-score{font-size:12.5px;color:var(--vg-muted)}
.vg-bar{height:4px;background:var(--vg-paper);border-radius:2px;overflow:hidden;margin-bottom:16px}
.vg-bar i{display:block;height:100%;width:0;background:var(--vg-accent);border-radius:2px;transition:width .4s ease}

.vg-q{font-size:clamp(15.5px,2vw,17.5px);font-weight:700;color:var(--vg-heading);line-height:1.45;margin:0 0 14px}
.vg-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vg-opt{text-align:left;border:1px solid var(--vg-line);background:var(--vg-white);border-radius:var(--ctc-radius-btn,6px);padding:12px 14px;font-size:14px;color:var(--vg-text);cursor:pointer;transition:border-color .15s ease,transform .15s ease;font-family:inherit;line-height:1.4}
.vg-opt:hover:not(:disabled){border-color:var(--vg-accent);transform:translateY(-1px)}
.vg-opt:disabled{cursor:default;opacity:.72}
.vg-opt.is-correct{border-color:var(--vg-ok);background:rgba(28,125,67,.08);color:#155732;opacity:1;font-weight:700}
.vg-opt.is-wrong{border-color:var(--vg-bad);background:rgba(179,57,31,.07);color:#7c2a16;opacity:1}

.vg-pool{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.vg-chipbtn{border:1px solid var(--vg-line);background:var(--vg-white);border-radius:var(--ctc-radius-btn,6px);padding:9px 12px;font-size:13px;color:var(--vg-text);cursor:pointer;transition:border-color .15s ease,transform .15s ease;font-family:inherit;text-align:left;line-height:1.35}
.vg-chipbtn:hover:not(:disabled){border-color:var(--vg-accent);transform:translateY(-1px)}
.vg-chipbtn:disabled{opacity:.35;cursor:default}
.vg-seq{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:6px;min-height:40px}
.vg-seq li{display:flex;gap:10px;align-items:flex-start;border:1px dashed var(--vg-line);border-radius:var(--ctc-radius-btn,6px);padding:9px 12px;font-size:13px;color:var(--vg-text);background:var(--vg-paper);cursor:pointer}
.vg-seq li b{color:var(--vg-accent);flex:0 0 auto}
.vg-seq li.is-locked{cursor:default;border-style:solid}
.vg-seq li.is-right{border-color:var(--vg-ok);background:rgba(28,125,67,.07)}
.vg-seq li.is-bad{border-color:var(--vg-bad);background:rgba(179,57,31,.06)}
.vg-answer{margin:10px 0 0;font-size:12.5px;color:#155732;background:rgba(28,125,67,.07);border-radius:var(--ctc-radius-btn,6px);padding:9px 12px;line-height:1.55}

.vg-match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vg-col{display:flex;flex-direction:column;gap:8px}
.vg-col h4{margin:0 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7c8b87}
.vg-card{text-align:left;border:1px solid var(--vg-line);background:var(--vg-white);border-radius:var(--ctc-radius-btn,6px);padding:11px 13px;font-size:13px;color:var(--vg-text);cursor:pointer;transition:border-color .15s ease,transform .15s ease;font-family:inherit;line-height:1.4}
.vg-card:hover:not(:disabled){border-color:var(--vg-accent);transform:translateY(-1px)}
.vg-card.is-picked{border-color:var(--vg-accent);background:var(--vg-accent-soft);font-weight:700}
.vg-card.is-locked{border-color:var(--vg-ok);background:rgba(28,125,67,.07);cursor:default;opacity:1}
.vg-card.is-shake{animation:vg-shake .3s ease}
@keyframes vg-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.vg-fact{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--vg-text);background:var(--vg-accent-soft);border-left:3px solid var(--vg-accent);border-radius:0 var(--ctc-radius-btn,6px) var(--ctc-radius-btn,6px) 0;padding:10px 13px}
.vg-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.vg-next{margin-left:auto}

.vg-result{text-align:center;padding:6px 0 2px}
.vg-stars{font-size:22px;letter-spacing:4px;color:var(--vg-amber)}
.vg-big{font-size:clamp(34px,5vw,46px);font-weight:800;color:var(--vg-accent);line-height:1;margin:8px 0 2px}
.vg-tier{font-size:15px;font-weight:700;color:var(--vg-heading);margin:6px 0 4px}
.vg-msg{max-width:520px;margin:0 auto 18px;font-size:14px;line-height:1.65;color:var(--vg-muted)}
.vg-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.vg-price{margin-top:12px;font-size:12.5px;color:#7c8b87}
.vg-based{margin-top:8px;font-size:11.5px;color:#9aa8a4}

.vg-timer{height:5px;background:var(--vg-paper);border-radius:3px;overflow:hidden;margin:0 0 14px}
.vg-timer i{display:block;height:100%;background:var(--vg-accent);width:100%}
.vg-timer.is-low i{background:var(--vg-bad)}

@media (max-width:560px){
  .vg-opts{grid-template-columns:1fr}
  .vg-match{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .vg-btn:hover,.vg-opt:hover,.vg-chipbtn:hover,.vg-card:hover{transform:none}
  .vg-card.is-shake{animation:none}
}