@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --bg:     #0a1628;
    --gold:   #FFD166;
    --orange: #FF6B35;
    --teal:   #06D6A0;
    --pink:   #FF4D6D;
    --text:   #FFFFFF;
    --dim:    #94A3B8;
}

/* -------------------------------------------------------
   Overlay — tüm içerik tek ekranda sığacak şekilde
-------------------------------------------------------- */
#om-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 90% 50% at 50% -10%, rgba(6,214,160,.18) 0%, transparent 60%),
        radial-gradient(ellipse 70% 40% at 90% 110%, rgba(255,107,53,.15) 0%, transparent 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    animation: omFadeIn 0.5s ease;
}

@keyframes omFadeIn { from { opacity:0 } to { opacity:1 } }

#om-overlay-inner {
    text-align: center;
    /* Dikey padding küçük — her şey tek ekrana sığsın */
    padding: clamp(10px, 2vh, 28px) clamp(12px, 3vw, 28px) clamp(12px, 2vh, 28px);
    max-width: 900px;
    width: 100%;
    font-family: 'Nunito', sans-serif;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* -------------------------------------------------------
   Başlık
-------------------------------------------------------- */
#om-overlay-msg {
    font-size: clamp(.65rem, 1.4vw, .82rem);
    letter-spacing: .22em;
    color: var(--teal);
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 clamp(4px, .8vh, 10px);
}

#om-word-label {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(1.3rem, 4vw, 2.4rem);
    color: var(--text);
    margin: 0 0 clamp(10px, 2vh, 24px);
    line-height: 1.15;
}

#om-word-label strong { color: var(--gold); font-style: italic; }

/* -------------------------------------------------------
   Hedef tahtaları
-------------------------------------------------------- */
#om-targets {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 30px);
    flex-wrap: nowrap;          /* tek satır — sığdır */
    margin-bottom: clamp(8px, 1.5vh, 20px);
    width: 100%;
}

.om-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1);
    flex: 1;
    max-width: 140px;
    position: relative;
}

.om-target:hover { transform: translateY(-6px) scale(1.05); }

.om-target::after {
    content: '';
    display: block;
    width: 5px;
    height: clamp(14px, 2.5vh, 26px);
    background: linear-gradient(180deg, #6B4226, #3d2710);
    margin: 0 auto;
    border-radius: 0 0 3px 3px;
}

.om-target::before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: clamp(44px, 8vw, 64px);
    height: 4px;
    background: #3d2710;
    border-radius: 3px;
}

.om-board {
    position: relative;
    width: clamp(64px, 13vw, 112px);
    height: clamp(64px, 13vw, 112px);
    border-radius: 50%;
    background: #1a0a00;
    border: 4px solid #2d1500;
    box-shadow: 0 0 0 2px rgba(255,209,102,.15), 0 6px 20px rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow .25s;
}

.om-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

.om-ring-1 { width: 88%; height: 88%; background: var(--gold); }
.om-ring-2 { width: 70%; height: 70%; background: #111; }
.om-ring-3 { width: 52%; height: 52%; background: var(--orange); }
.om-ring-4 { width: 34%; height: 34%; background: #111; }
.om-bullseye {
    position: absolute;
    width: 16%; height: 16%;
    border-radius: 50%;
    background: var(--teal);
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 10px rgba(6,214,160,.8);
    z-index: 2;
}

.om-target.om-selected .om-board {
    border-color: var(--gold);
    animation: tPulse 1.3s ease-in-out infinite;
}

@keyframes tPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(255,209,102,.35), 0 0 24px rgba(255,209,102,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(255,209,102,.55), 0 0 44px rgba(255,209,102,.35); }
}

.om-target.om-correct .om-board {
    animation: tCorrect .65s cubic-bezier(.22,1,.36,1) forwards;
}
.om-target.om-wrong .om-board {
    animation: tWrong .5s ease forwards;
    border-color: var(--pink);
}

@keyframes tCorrect {
    0%  { transform: scale(1); }
    40% { transform: scale(1.14); box-shadow: 0 0 50px rgba(6,214,160,.8); border-color: var(--teal); }
    100%{ transform: scale(1.07); box-shadow: 0 0 25px rgba(6,214,160,.5); border-color: var(--teal); }
}
@keyframes tWrong {
    0%,100%{ transform: translateX(0); }
    20%    { transform: translateX(-9px) rotate(-2deg); }
    40%    { transform: translateX(9px) rotate(2deg); }
    60%    { transform: translateX(-6px); }
    80%    { transform: translateX(6px); }
}

.om-option-text {
    margin: clamp(5px,1vh,9px) 0 0;
    font-size: clamp(.65rem, 1.4vw, .85rem);
    line-height: 1.35;
    color: #FFFFFF;
    text-align: center;
    font-weight: 700;
    text-shadow: 0 1px 5px rgba(0,0,0,.9);
    transition: color .2s;
}

.om-target.om-selected .om-option-text { color: var(--gold); }
.om-target.om-correct  .om-option-text { color: var(--teal); }

/* -------------------------------------------------------
   Hint
-------------------------------------------------------- */
#om-hint {
    font-size: clamp(.7rem, 1.5vw, .88rem);
    color: var(--dim);
    margin: 0 0 clamp(6px, 1.2vh, 14px);
    font-weight: 600;
    min-height: 1.2em;
    transition: color .3s;
}
#om-hint.om-ready { color: var(--teal); }

/* -------------------------------------------------------
   Yay alanı — kompakt
-------------------------------------------------------- */
#om-archer-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.5vh, 14px);
    width: 100%;
    margin-bottom: clamp(6px, 1.2vh, 14px);
}

#om-bow-svg {
    width: clamp(100px, 20vw, 170px);
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.7));
    transform-origin: center center;
    transform: rotate(0deg);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}

/* -------------------------------------------------------
   Fırlat butonu
-------------------------------------------------------- */
#om-fire-btn {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(.9rem, 2.2vw, 1.15rem);
    letter-spacing: .05em;
    color: #0a1628;
    background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);
    border: none;
    border-radius: 50px;
    padding: clamp(9px, 1.5vh, 13px) clamp(22px, 4vw, 44px);
    cursor: pointer;
    box-shadow: 0 3px 0 #c47800, 0 6px 22px rgba(255,107,53,.4), inset 0 1px 0 rgba(255,255,255,.3);
    transition: all .18s cubic-bezier(.34,1.56,.64,1);
    user-select: none;
}
#om-fire-btn::before { content: '🏹'; margin-right: 8px; }

#om-fire-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 5px 0 #c47800, 0 12px 28px rgba(255,107,53,.5);
}
#om-fire-btn:active:not(:disabled) {
    transform: translateY(1px) scale(.98);
    box-shadow: 0 1px 0 #c47800, 0 3px 10px rgba(255,107,53,.3);
}
#om-fire-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* -------------------------------------------------------
   Geri bildirim
-------------------------------------------------------- */
#om-feedback {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(.95rem, 2.2vw, 1.25rem);
    min-height: 1.6em;
    margin: clamp(6px,1.2vh,12px) 0 2px;
    transition: all .3s;
}
#om-feedback.om-success { color: var(--teal); text-shadow: 0 0 16px rgba(6,214,160,.5); }
#om-feedback.om-error   { color: var(--pink); }

#om-attempts {
    font-size: clamp(.7rem, 1.4vw, .84rem);
    color: var(--dim);
    margin: 0;
    font-weight: 600;
    min-height: 1.2em;
}

/* -------------------------------------------------------
   Uçan ok
-------------------------------------------------------- */
.om-flying-arrow { position: fixed; pointer-events: none; z-index: 100000; }

/* -------------------------------------------------------
   İçerik kilit açma
-------------------------------------------------------- */
#om-protected-content {
    transition: filter 1.2s ease;
}
#om-protected-content.om-unlocked {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
}

/* -------------------------------------------------------
   Responsive
-------------------------------------------------------- */
@media (max-width: 600px) {
    #om-targets { gap: 6px; }
}
@media (max-width: 400px) {
    #om-targets { flex-wrap: wrap; }
    .om-target  { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
}