body {
    margin: 0;
    font-family: 'Cinzel', serif;
    background: #0b0b1a;
    color: white;
    text-align: center;
}

#app {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 5%; */
    height: 100vh;
}

.result {
    /* padding: 20px; */
    max-width: 600px;
}

.result small {
    color: #ffffff;
    font-size: 18px;
}

.footer {
    margin-top: 40px;
    opacity: 0.7;
}

.retry-btn {
    margin-bottom: 60px;
    padding: 10px 20px;
    border: none;
    background: #ff4d6d;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

.retry-btn:hover {
    background: #ff758f;
}

/* ad slot styling for mock placeholders only */
.ad-slot.mock {
    display: none !important;
}

.ad-slot.ad-top { width: 728px; height: 90px; max-width: 95%; }
.ad-slot.ad-inline { width: 300px; height: 100px; }

/* vertical side ads */
.ad-slot.ad-side {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 600px;
    max-height: 80vh;
    padding: 12px;
    z-index: 999;
}
.ad-slot.ad-left { left: 12px; }
.ad-slot.ad-right { right: 12px; }

/* hide side ads on smaller screens */
@media (max-width: 1000px) {
    .ad-slot.ad-side { display: none; }
    #app { padding: 0 12px; }
}

.mock-ad { display:flex; gap:10px; align-items:center; }
.mock-media { flex: 0 0 auto; }
.mock-body { flex: 1 1 auto; text-align: left; }
.mock-title { font-weight:700; color:#111; margin-bottom:4px; }
.mock-desc { font-size:12px; color:#555; margin-bottom:6px; }
.mock-cta { display:inline-block; padding:6px 10px; background:#ff4d6d; color:#fff; border-radius:6px; text-decoration:none; font-size:13px; }