/* ------------------------------------------------------------------ */
/* Oyun (orijinal TrollDungeon.html stilleri, okunur biçimde)          */
/* ------------------------------------------------------------------ */

:root {
    color-scheme: dark;
    --ad-top: 0px;
    --ad-bottom: 0px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #080c19;
    touch-action: none;
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
}

#game {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    display: block;
    touch-action: none;
    image-rendering: pixelated;
}

#rotateNotice {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    background: radial-gradient(ellipse at center, #293256, #0b1024 70%);
    color: #fff;
    padding: 24px;
}

#rotateNotice h1 {
    font-size: clamp(18px, 6vw, 28px);
    margin: 4px 0;
    font-weight: 900;
    letter-spacing: 1px;
}

#rotateNotice p {
    opacity: .75;
    font-size: 14px;
    margin: 0;
}

.phone {
    font-size: 64px;
    color: #74f5d4;
    animation: turn 2s ease-in-out infinite alternate;
}

#rotateFullscreen {
    border: 2px solid #74f5d4;
    border-radius: 12px;
    background: #1b3a4a;
    color: white;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 800;
    margin-top: 12px;
}

@keyframes turn {
    from { transform: rotate(-30deg); }
    to { transform: rotate(30deg); }
}

@media (orientation: portrait) {
    #rotateNotice { display: flex; }
    #game { visibility: hidden; }
    .ad-dock { visibility: hidden; }
}

/* ------------------------------------------------------------------ */
/* Banner reklam şeritleri (tuval bu şeritler kadar küçülür)           */
/* ------------------------------------------------------------------ */

.ad-dock {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    background: #050812;
    pointer-events: none;
}

#ad-dock-top {
    top: 0;
    height: var(--ad-top);
}

#ad-dock-bottom {
    bottom: 0;
    height: var(--ad-bottom);
}

.ad-slot {
    display: none;
    width: 100%;
    height: var(--ad-h, 50px);
    pointer-events: auto;
}

.ad-slot.is-on {
    display: block;
}

.ad-mock {
    height: 100%;
    margin: 0 auto;
    max-width: 728px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed #44607888;
    background: repeating-linear-gradient(45deg, #101a31, #101a31 10px, #0c1428 10px, #0c1428 20px);
    color: #a9bbd2;
    font: 800 12px ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 1px;
}

.ad-mock small {
    opacity: .6;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Test reklam penceresi, güncelleme penceresi, toast                  */
/* ------------------------------------------------------------------ */

#ad-overlay,
#modal {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 8, 18, .86);
}

#ad-overlay.is-open,
#modal.is-open {
    display: flex;
}

.ad-mock-card,
.td-card {
    width: min(420px, 100%);
    padding: 18px 20px;
    border: 2px solid #44607899;
    border-radius: 14px;
    background: #101a31;
    color: #e5eafa;
    text-align: center;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.ad-mock-card h3,
.td-card h2 {
    margin: 8px 0;
    color: #ffe09e;
    font-size: 20px;
}

.ad-mock-card p,
.td-card p {
    margin: 0 0 12px;
    font-size: 13px;
    opacity: .8;
}

.ad-mock-tag {
    font-size: 11px;
    color: #a9bbd2;
    letter-spacing: 1px;
}

.ad-mock-bar {
    height: 8px;
    margin: 4px 0 14px;
    border-radius: 4px;
    background: #121e34;
    overflow: hidden;
}

.ad-mock-bar i {
    display: block;
    width: 0;
    height: 100%;
    background: #fbd17a;
}

.ad-mock-actions,
.td-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.td-btn {
    min-width: 120px;
    padding: 10px 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    font: 900 15px ui-monospace, Menlo, Consolas, monospace;
    color: #0b1b29;
    cursor: pointer;
}

.td-btn:disabled {
    opacity: .6;
    cursor: default;
}

.td-btn-main { background: #67eec5; }
.td-btn-gold { background: #fbd17a; }

.td-btn-ghost {
    background: #202c47;
    border-color: #263550;
    color: #e9efff;
}

#toast {
    position: fixed;
    left: 50%;
    top: calc(var(--ad-top) + 14px);
    z-index: 40;
    max-width: 90vw;
    padding: 9px 16px;
    border: 1px solid #44607899;
    border-radius: 10px;
    background: #101a31f0;
    color: #eef4fa;
    font: 800 13px ui-monospace, Menlo, Consolas, monospace;
    transform: translate(-50%, -12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

#toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}