/* =============================================================================
   GAME.CSS — Blueprint dot-to-dot bulmaca
   main.css CSS değişkenlerine bağımlı. Yalnızca is_front_page() yükler.
   ============================================================================= */


/* =============================================================================
   0. GLOBAL — [hidden] override
   .btn gibi display:inline-flex kuralları tarayıcı UA [hidden]{display:none}'u
   ezer. Bu kural author-level'da garanti altına alır.
   ============================================================================= */

[hidden] { display: none !important; }


/* =============================================================================
   1. BÖLÜM — section-game
   ============================================================================= */

.section-game {
    padding:    var(--space-32) 0;
    border-top: 1px solid rgba(58, 58, 58, 0.38);
}

/* Başlığı ortala ve max-width kısıtını kaldır */
.section-game .section-header {
    text-align:    center;
    max-width:     none;
    margin-left:   auto;
    margin-right:  auto;
    margin-bottom: var(--space-14);
}

.section-game .section-header .section-label,
.section-game .section-header .section-title,
.section-game .section-header .section-subtitle {
    text-align: center;
}

.section-game .section-subtitle {
    font-size:    var(--text-sm);
    color:        var(--color-smoke);
    margin-top:   var(--space-4);
    max-width:    42ch;
    margin-left:  auto;
    margin-right: auto;
}


/* =============================================================================
   2. OYUN SARICI
   ============================================================================= */

.game-wrap {
    max-width: 600px;
    margin:    0 auto;
}

.game-instructions {
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-smoke);
    text-align:     center;
    margin-bottom:  var(--space-6);
    text-transform: uppercase;
}


/* =============================================================================
   3. CANVAS
   ============================================================================= */

.game-canvas-wrap {
    position:      relative;
    border:        1px solid rgba(58, 58, 58, 0.35);
    border-radius: var(--radius-sm);
    overflow:      hidden;
    background:    #050403;
    aspect-ratio:  100 / 80;
}

.game-svg {
    position:  relative;
    z-index:   2;
    width:     100%;
    height:    100%;
    display:   block;
    cursor:    crosshair;
}


/* =============================================================================
   4. ÇİZGİLER
   ============================================================================= */

.game-line {
    stroke:         rgba(201, 166, 107, 0.78);
    stroke-width:   0.45;
    stroke-linecap: round;
    fill:           none;
    transition:     stroke-dashoffset 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    filter:         drop-shadow(0 0 1.2px rgba(201, 166, 107, 0.55));
}


/* =============================================================================
   5. NOKTALAR
   ============================================================================= */

.game-dot-group { cursor: pointer; }

.game-dot-pulse {
    fill:             none;
    stroke:           rgba(201, 166, 107, 0.38);
    stroke-width:     0.4;
    transform-box:    fill-box;
    transform-origin: center;
    opacity:          0;
    pointer-events:   none;
}

.game-dot {
    fill:             rgba(201, 166, 107, 0.65);
    stroke:           none;
    transform-box:    fill-box;
    transform-origin: center;
    transition:       fill 0.25s ease;
    pointer-events:   none;
}

.game-dot-hit {
    fill:   transparent;
    stroke: none;
}

.game-dot-label {
    fill:           rgba(201, 166, 107, 0.48);
    font-family:    var(--font-mono);
    font-size:      2.6px;
    pointer-events: none;
    user-select:    none;
    transition:     fill 0.25s ease, opacity 0.3s ease;
}

/* Sıradaki nokta */
.game-dot-group.is-next .game-dot {
    fill: var(--color-gold);
}
.game-dot-group.is-next .game-dot-pulse {
    opacity:   1;
    animation: game-pulse 1.5s ease-in-out infinite;
}
.game-dot-group.is-next .game-dot-label {
    fill: var(--color-gold);
}

@keyframes game-pulse {
    0%, 100% { transform: scale(1);   opacity: 0.4; }
    55%      { transform: scale(2.1); opacity: 0;   }
}

/* Tamamlanan nokta */
.game-dot-group.is-done .game-dot {
    fill: rgba(201, 166, 107, 0.28);
}
.game-dot-group.is-done .game-dot-label {
    opacity: 0.2;
}

/* Yanlış nokta — shake */
.game-dot-group.is-wrong .game-dot {
    fill:      rgba(200, 65, 65, 0.85);
    animation: game-wrong 0.42s ease;
}
@keyframes game-wrong {
    0%, 100% { transform: translateX(0);      }
    18%      { transform: translateX(-2px);   }
    36%      { transform: translateX(2px);    }
    54%      { transform: translateX(-1.5px); }
    72%      { transform: translateX(1px);    }
}


/* =============================================================================
   6. REVEAL GÖRSELİ
   ============================================================================= */

.game-reveal {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    opacity:         0;
    z-index:         1;
    transition:      opacity 1.6s ease;
}

.game-reveal.is-visible {
    opacity: 0.7;
}


/* =============================================================================
   7. HUD — Sayaç + Progress Bar
   ============================================================================= */

.game-hud {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-4);
    margin-top:      var(--space-5);
}

.game-counter {
    font-size:      var(--text-xs);
    letter-spacing: 0.15em;
    color:          var(--color-smoke);
    white-space:    nowrap;
    transition:     color 0.4s ease;
    flex-shrink:    0;
}

.game-wrap.is-complete .game-counter {
    color: rgba(201, 166, 107, 0.7);
}

/* Progress bar */
.game-progress {
    flex:           1;
    height:         1px;
    background:     rgba(58, 58, 58, 0.5);
    border-radius:  1px;
    overflow:       hidden;
}

.game-progress__fill {
    height:     100%;
    background: rgba(201, 166, 107, 0.7);
    transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 1px;
}

.game-wrap.is-complete .game-progress__fill {
    background: var(--color-gold);
}


/* =============================================================================
   8. KİLİTLİ CTA — oyun bitmeden tıklanamaz
   ============================================================================= */

.game-unlock-wrap {
    margin-top: var(--space-8);
    text-align: center;
}

.game-unlock-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-3);
    padding:         var(--space-5) var(--space-12);
    min-width:       220px;
    border:          1px solid rgba(201, 166, 107, 0.18);
    background:      transparent;
    color:           rgba(201, 166, 107, 0.3);
    font-size:       var(--text-xs);
    letter-spacing:  0.2em;
    text-transform:  uppercase;
    cursor:          not-allowed;
    border-radius:   var(--radius-base);
    white-space:     nowrap;
    transition:      border-color 0.7s ease, color 0.7s ease, box-shadow 0.7s ease;
    position:        relative;
    overflow:        hidden;
}

/* Kilide tıklamak — shake */
.game-unlock-btn.is-shaking {
    animation: game-unlock-shake 0.35s ease;
}

@keyframes game-unlock-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

/* Açılma animasyonu */
.game-unlock-btn.is-unlocked {
    border-color:   rgba(201, 166, 107, 0.7);
    color:          var(--color-gold); /* fallback */
    cursor:         pointer;
    pointer-events: auto;
    padding:        var(--space-5) var(--space-16);
    animation:      game-unlock-glow 2.8s ease-in-out infinite;
}

/* Altın-krema shimmer — label + ikon */
.game-unlock-btn.is-unlocked .game-unlock-btn__label,
.game-unlock-btn.is-unlocked .game-unlock-btn__icon {
    background: linear-gradient(
        90deg,
        #c9a66b 0%,
        #efe6d7 28%,
        #c9a66b 50%,
        #efe6d7 72%,
        #c9a66b 100%
    );
    background-size:            300% auto;
    -webkit-background-clip:    text;
    background-clip:            text;
    -webkit-text-fill-color:    transparent;
    animation:                  game-btn-shimmer 3.5s linear infinite;
}

@keyframes game-btn-shimmer {
    from { background-position: 0% center; }
    to   { background-position: 300% center; }
}

/* Hover — arka plan altın-krema dolar, metin koyu */
.game-unlock-btn.is-unlocked:hover {
    background: linear-gradient(
        115deg,
        var(--color-gold) 0%,
        var(--color-cream) 60%,
        var(--color-gold) 100%
    );
    border-color: transparent;
    animation:    none;
    box-shadow:   0 0 28px rgba(201, 166, 107, 0.55);
}

.game-unlock-btn.is-unlocked:hover .game-unlock-btn__label,
.game-unlock-btn.is-unlocked:hover .game-unlock-btn__icon {
    background:              none;
    -webkit-text-fill-color: var(--color-black);
    animation:               none;
}

@keyframes game-unlock-glow {
    0%, 100% { box-shadow: 0 0 0   0px rgba(201, 166, 107, 0);    }
    50%      { box-shadow: 0 0 20px 3px rgba(201, 166, 107, 0.4); }
}

/* Shine sweep açılırken */
.game-unlock-btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 65%
    );
    transform:  translateX(-150%);
    transition: none;
}

.game-unlock-btn.is-unlocked::before {
    animation: game-unlock-shine 2.5s ease-in-out 0.3s infinite;
}

@keyframes game-unlock-shine {
    0%, 70%, 100% { transform: translateX(-150%); }
    30%           { transform: translateX(150%);  }
}

.game-unlock-btn__icon {
    font-size: 1em;
}


/* =============================================================================
   9. RAFFLE FORMU — oyun tamamlanınca belirir
   ============================================================================= */

.game-raffle {
    margin-top:  var(--space-10);
    padding-top: var(--space-8);
    border-top:  1px solid rgba(58, 58, 58, 0.38);
    opacity:     0;
    transform:   translateY(12px);
    pointer-events: none;
    transition:  opacity 0.7s ease, transform 0.7s ease;
}

.game-raffle.is-visible {
    opacity:        1;
    transform:      none;
    pointer-events: auto;
}

.game-raffle__inner {
    max-width:  440px;
    margin:     0 auto;
    text-align: center;
}

.game-raffle__heading {
    font-size:      var(--text-xs);
    letter-spacing: 0.2em;
    color:          rgba(201, 166, 107, 0.8);
    text-transform: uppercase;
    margin-bottom:  var(--space-3);
}

.game-raffle__sub {
    font-size:    var(--text-sm);
    color:        var(--color-smoke);
    margin-bottom: var(--space-6);
    line-height:  1.6;
}

/* Input + submit satırı */
.game-raffle__field {
    display:   flex;
    gap:       var(--space-3);
    width:     100%;
}

.game-raffle__input {
    flex:           1;
    min-width:      0;
    padding:        var(--space-4) var(--space-6);
    background:     rgba(255, 255, 255, 0.04);
    border:         1px solid rgba(58, 58, 58, 0.6);
    border-radius:  var(--radius-base);
    color:          var(--color-cream);
    font-family:    var(--font-body);
    font-size:      var(--text-sm);
    outline:        none;
    transition:     border-color 0.25s ease;
    -webkit-appearance: none;
}

.game-raffle__input::placeholder {
    color: rgba(201, 166, 107, 0.25);
}

.game-raffle__input:focus {
    border-color: rgba(201, 166, 107, 0.55);
}

.game-raffle__submit {
    flex-shrink:    0;
    display:        inline-flex;
    align-items:    center;
    padding:        var(--space-4) var(--space-6);
    border:         1px solid var(--color-gold);
    background:     transparent;
    color:          var(--color-gold);
    font-family:    var(--font-body);
    font-size:      var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius:  var(--radius-base);
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background 0.25s ease, color 0.25s ease;
}

.game-raffle__submit:hover {
    background: var(--color-gold);
    color:      var(--color-black);
}

.game-raffle__submit:disabled {
    opacity:   0.5;
    cursor:    wait;
    animation: none;
}

/* Pulse animasyonu — raffle formu açıkken */
.game-raffle.is-visible .game-raffle__submit:not(:disabled) {
    animation:   game-enter-draw-pulse 1.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes game-enter-draw-pulse {
    0%, 100% { transform: scale(1);    box-shadow: none; }
    50%       { transform: scale(1.07); box-shadow: 0 0 16px rgba(201, 166, 107, 0.4); }
}

.game-raffle__note {
    font-size:      var(--text-xs);
    letter-spacing: 0.1em;
    color:          rgba(58, 58, 58, 0.7);
    margin-top:     var(--space-4);
    text-align:     center;
}

.game-raffle__error {
    font-size:   var(--text-xs);
    color:       rgba(200, 65, 65, 0.85);
    margin-top:  var(--space-3);
    min-height:  1.2em;
    text-align:  center;
}

.game-raffle__success {
    font-size:      var(--text-sm);
    letter-spacing: 0.15em;
    color:          rgba(201, 166, 107, 0.85);
    text-align:     center;
    padding:        var(--space-5);
    animation:      game-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* =============================================================================
   10. TAMAMLANMA EFEKTLERİ
   ============================================================================= */

/* Footer üstü altın gradient — game-completed class body'ye eklenir */
body.game-completed .site-footer {
    position: relative;
}

body.game-completed .site-footer::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     120px;
    background: linear-gradient(
        to bottom,
        rgba(201, 166, 107, 0.18) 0%,
        rgba(201, 166, 107, 0.06) 50%,
        transparent 100%
    );
    pointer-events: none;
    animation:  game-footer-glow 3s ease-in-out infinite;
    z-index:    0;
}

@keyframes game-footer-glow {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1;   }
}

/* Rise partiküller — section-game içinde absolute */
.section-game {
    position: relative;
    overflow: visible;
}

.game-rise-particle {
    position:   absolute;
    bottom:     0;
    color:      rgba(201, 166, 107, 0.9);
    font-size:  10px;
    pointer-events: none;
    z-index:    5;
    animation:  game-particle-rise var(--dur, 2.2s) ease-out forwards;
}

@keyframes game-particle-rise {
    0%   { opacity: 0;   transform: translateY(0)      scale(0.6); }
    12%  { opacity: 1; }
    70%  { opacity: 0.5; }
    100% { opacity: 0;   transform: translateY(-120px) scale(0.3) rotate(30deg); }
}

/* Confetti canvas */
.game-confetti-canvas {
    position:       fixed;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    pointer-events: none;
    z-index:        9999;
}


/* =============================================================================
   11. ANIMASYONLAR
   ============================================================================= */

@keyframes game-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}


/* =============================================================================
   11b. LIGHT MODE OVERRIDES
   Dark canvas ve raffle elementleri — cream arka planda uyum için.
   ============================================================================= */

[data-theme="light"] .section-game {
    border-top-color: rgba(154, 106, 48, 0.2);
}

/* Canvas: #050403 → daha yumuşak koyu, gold çerçeve */
[data-theme="light"] .game-canvas-wrap {
    background:   #191410;
    border-color: rgba(154, 106, 48, 0.28);
    box-shadow:   0 4px 40px rgba(10, 9, 8, 0.22);
}

/* Locked button — rgba(201,166,107,0.3) cream zeminde görünmez */
[data-theme="light"] .game-unlock-btn:not(.is-unlocked) {
    color:        rgba(100, 68, 25, 0.55);
    border-color: rgba(100, 68, 25, 0.28);
}

/* Progress bar track */
[data-theme="light"] .game-progress {
    background: rgba(154, 106, 48, 0.15);
}

/* Unlocked button — light modda shimmer (#efe6d7 cream görünmez) → header CTA gibi outline-gold */
[data-theme="light"] .game-unlock-btn.is-unlocked {
    border-color: var(--color-gold);
    animation:    none;
    box-shadow:   none;
}

[data-theme="light"] .game-unlock-btn.is-unlocked .game-unlock-btn__label,
[data-theme="light"] .game-unlock-btn.is-unlocked .game-unlock-btn__icon {
    background:              none;
    -webkit-text-fill-color: var(--color-gold);
    animation:               none;
}

/* Hover: gold dolgu, koyu metin — header CTA hover ile aynı */
[data-theme="light"] .game-unlock-btn.is-unlocked:hover {
    background:   var(--color-gold);
    border-color: var(--color-gold);
    box-shadow:   none;
}

[data-theme="light"] .game-unlock-btn.is-unlocked:hover .game-unlock-btn__label,
[data-theme="light"] .game-unlock-btn.is-unlocked:hover .game-unlock-btn__icon {
    background:              none;
    -webkit-text-fill-color: var(--color-black);
    animation:               none;
}

/* Raffle form */
[data-theme="light"] .game-raffle {
    border-top-color: rgba(154, 106, 48, 0.2);
}

[data-theme="light"] .game-raffle__input {
    background:   rgba(255, 255, 255, 0.55);
    border-color: rgba(154, 106, 48, 0.3);
}

[data-theme="light"] .game-raffle__input::placeholder {
    color: rgba(154, 106, 48, 0.38);
}

[data-theme="light"] .game-raffle__note {
    color: rgba(28, 21, 16, 0.38);
}


/* =============================================================================
   12. MOBİL
   ============================================================================= */

@media ( max-width: 600px ) {
    .game-wrap {
        max-width: 100%;
    }

    .game-raffle__field {
        flex-direction: column;
    }

    .game-unlock-btn {
        padding: var(--space-4) var(--space-6);
        font-size: calc(var(--text-xs) * 0.9);
    }
}