/* Guess the deck: a round, its four answers, the explanation and the result. It builds on card-tournament.css (ct-*). */

.gd-play { gap: 1.1rem; }
.gd-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gd-round { font-weight: 800; font-size: 0.95rem; }
.gd-bar { --gd-progress: 0%; flex: 1 1 8rem; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.gd-bar i { display: block; height: 100%; width: var(--gd-progress); background: linear-gradient(90deg, #7a42ee, #fbbf24); transition: width 0.3s ease; }
.gd-score { color: var(--ct-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.gd-score b { color: var(--ct-gold); font-size: 1.2rem; }
.gd-q { margin: 0; font-size: 1.2rem; font-weight: 700; }

.gd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr)); gap: 0.8rem; justify-items: center; }
.gd-card { margin: 0; width: 100%; max-width: 11rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gd-card img { cursor: zoom-in; display: block; width: 100%; height: auto; aspect-ratio: 488 / 680; border-radius: 4.5%; background: var(--ct-deep); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); }
.gd-card figcaption { font-size: 0.78rem; font-weight: 600; color: #cfc6e6; text-align: center; overflow-wrap: anywhere; }
.gd-card.is-new { animation: gd-in 0.35s ease; }
@keyframes gd-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

.gd-hintrow { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

.gd-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.gd-option { min-height: 58px; padding: 0.7rem 1rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: var(--ct-deep); color: #f4efff; font: inherit; font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease; }
.gd-option:hover { border-color: var(--ct-violet-soft); transform: translateY(-2px); }
.gd-option:focus-visible { outline: 2px solid #d998ff; outline-offset: 2px; }
.gd-options.is-locked .gd-option { cursor: default; transform: none; opacity: 0.55; }
.gd-options.is-locked .gd-option.is-right { opacity: 1; background: #123524; border-color: var(--ct-green); box-shadow: 0 0 0 1px var(--ct-green); }
.gd-options.is-locked .gd-option.is-wrong { opacity: 1; background: #3a1519; border-color: #f87171; box-shadow: 0 0 0 1px #f87171; }

.gd-feedback { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.1rem; border-radius: 16px; background: #120d1b; border: 1px solid rgba(255, 255, 255, 0.08); }
.gd-verdict { font-size: 1.25rem; font-weight: 800; }
.gd-verdict.is-right { color: var(--ct-green); }
.gd-verdict.is-wrong { color: #fca5a5; }
.gd-sig { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: 0.7rem; }
.gd-sig .gd-card { max-width: 8rem; }

.gd-result { gap: 1.2rem; }
.gd-result__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.gd-result__head h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; }
.gd-big { display: flex; align-items: baseline; gap: 0.7rem; }
.gd-big b { font-size: clamp(3.4rem, 12vw, 5.5rem); line-height: 1; font-weight: 800; color: var(--ct-gold); font-variant-numeric: tabular-nums; }
.gd-big small { color: var(--ct-muted); font-weight: 700; }
.gd-review { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.gd-review li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0.8rem; border-radius: 12px; background: #120d1b; border: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.9rem; }
.gd-review li.is-right i { color: var(--ct-green); }
.gd-review li.is-wrong i { color: #f87171; }
.gd-review span { overflow-wrap: anywhere; font-weight: 600; }
.gd-review b { color: var(--ct-muted); font-variant-numeric: tabular-nums; }
.gd-canvas { display: none; }
.gd-signup { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.2rem; border-radius: 16px; background: linear-gradient(135deg, rgba(122, 66, 238, 0.25), rgba(251, 191, 36, 0.08)); border: 1px solid rgba(167, 123, 255, 0.35); }
.gd-signup > i { font-size: 1.5rem; color: var(--ct-gold); }
.gd-signup div { flex: 1 1 14rem; min-width: 0; }
.gd-signup p { margin: 0.15rem 0 0; color: #cfc6e6; font-size: 0.9rem; }

/* the ranking */
.gd-table { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.gd-table li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.7rem 1rem; border-radius: 14px; background: #120d1b; border: 1px solid rgba(255, 255, 255, 0.07); }
.gd-table li.is-mine { border-color: var(--ct-violet-soft); background: #1c1233; }
.gd-table__n { font-weight: 800; color: var(--ct-muted); text-align: center; font-variant-numeric: tabular-nums; }
.gd-table li:nth-child(1) .gd-table__n { color: #fbbf24; }
.gd-table li:nth-child(2) .gd-table__n { color: #cbd5e1; }
.gd-table li:nth-child(3) .gd-table__n { color: #d6925a; }
.gd-table__who { display: flex; flex-direction: column; min-width: 0; }
.gd-table__who b { overflow-wrap: anywhere; }
.gd-table__who small { color: var(--ct-muted); font-size: 0.78rem; }
.gd-table__score { font-size: 1.35rem; font-weight: 800; color: var(--ct-gold); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .gd-options, .gd-review { grid-template-columns: minmax(0, 1fr); }
    /* the formats: three to a row on a phone */
    .gd-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
    .gd-formats .ct-chip { min-width: 0; padding: 0.5rem 0.3rem; align-items: center; text-align: center; }
    .gd-formats .ct-chip b { font-size: 0.86rem; overflow-wrap: anywhere; }
    .gd-formats .ct-chip small { font-size: 0.62rem; white-space: nowrap; }
    .gd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .gd-card figcaption { font-size: 0.68rem; }
    .gd-sig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .gd-card.is-new, .gd-bar i { animation: none; transition: none; } }
.gd { scroll-margin-top: 5rem; }

/* a card enlarged: full screen, the card as big as the screen allows */
html.gd-zoom-on, html.gd-zoom-on body { overflow: hidden; }
.gd-zoom { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: max(1rem, env(safe-area-inset-top)) 3.4rem max(1rem, env(safe-area-inset-bottom)); background: rgba(8, 5, 14, 0.94); backdrop-filter: blur(4px); animation: gd-zoom-in 0.16s ease; }
.gd-zoom[hidden] { display: none; }
@keyframes gd-zoom-in { from { opacity: 0; } to { opacity: 1; } }
.gd-zoom__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; max-width: 100%; max-height: 100%; min-height: 0; }
.gd-zoom__fig img { display: block; width: auto; height: auto; max-width: min(100%, 30rem); max-height: calc(100dvh - 7rem); aspect-ratio: 488 / 680; object-fit: contain; border-radius: 4.5%; background: transparent; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); }
.gd-zoom__fig figcaption { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; text-align: center; color: #f3eefc; }
.gd-zoom__fig figcaption b { font-size: 1rem; overflow-wrap: anywhere; }
.gd-zoom__fig figcaption small { color: #a99fc4; font-size: 0.8rem; }
.gd-zoom__close, .gd-zoom__nav { position: absolute; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1.05rem; cursor: pointer; }
.gd-zoom__close { top: max(0.7rem, env(safe-area-inset-top)); right: 0.7rem; }
.gd-zoom__nav { top: 50%; transform: translateY(-50%); }
.gd-zoom__nav[hidden] { display: none; }
.gd-zoom__nav--prev { left: 0.4rem; }
.gd-zoom__nav--next { right: 0.4rem; }
.gd-zoom__close:hover, .gd-zoom__nav:hover { background: rgba(167, 123, 255, 0.35); }
.gd-zoom__close:focus-visible, .gd-zoom__nav:focus-visible, .gd-card img:focus-visible { outline: 2px solid #d998ff; outline-offset: 2px; }
@media (max-width: 640px) {
    .gd-zoom { padding-left: 0.6rem; padding-right: 0.6rem; }
    .gd-zoom__nav { top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); transform: none; width: 3rem; height: 3rem; }
    .gd-zoom__fig img { max-height: calc(100dvh - 9.5rem); }
}
@media (prefers-reduced-motion: reduce) { .gd-zoom { animation: none; } }