:root {
    --primary: #00C9A7;
    --secondary: #4A9EFF;
    --accent: #6FEDD6;
    --dark: #1A1A2E;
    --light: #FFF8F0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Karla', sans-serif;
    background: linear-gradient(135deg, #1A1A2E 0%, #2E3A4E 100%);
    color: var(--light);
    min-height: 100vh;
}

.container { max-width: 900px; margin: 0 auto; padding: 1rem; }
header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.35rem 0 0.25rem;
}
header h1 {
    font-family: 'Righteous', cursive;
    font-size: clamp(2.2rem, 7vw, 3.8rem);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 0.55rem;
    background: linear-gradient(90deg, #8ff8e0 0%, #a7dfff 40%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 10px rgba(79, 197, 173, 0.22);
}
.subtitle {
    display: inline-block;
    padding: 0.32rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(111, 237, 214, 0.38);
    background: rgba(17, 34, 53, 0.6);
    color: #c9fff4;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-size: 0.74rem;
}

.main-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
}
.seo-copy {
    margin-top: 1.2rem;
    padding: 0.65rem 1.1rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(111, 237, 214, 0.16);
    border-radius: 14px;
}
.seo-copy summary {
    list-style: none;
    cursor: pointer;
    font-family: 'Righteous', cursive;
    font-size: 1rem;
    color: #d6fff7;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.seo-copy summary::-webkit-details-marker { display: none; }
.seo-copy summary::before {
    content: '▸';
    font-size: 0.9rem;
    color: #9dd7ff;
    transition: transform 0.16s ease;
}
.seo-copy[open] summary::before { transform: rotate(90deg); }
.seo-copy-content {
    margin-top: 0.5rem;
}
.seo-copy p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 248, 240, 0.92);
}
.seo-copy p + p { margin-top: 0.45rem; }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1rem; }

/* Temporarily hide the cuisine and price dropdowns and their labels */
.filters .filter-group label, #cuisine, #priceLevel { display: none !important; }
.filter-group label { display:block; margin-bottom:0.4rem; font-weight:700; color:var(--accent); font-size:0.8rem; text-transform:uppercase; }
select { width:100%; padding:0.7rem; border-radius:10px; background: rgba(0,0,0,0.18); color:var(--light); border:1px solid rgba(0,201,167,0.2); }

.spinner-container { display:flex; justify-content:center; margin:1rem 0; }
.cuisine-spinner { width:320px; height:320px; position:relative; }
.spinner-wheel {
    width:100%;
    height:100%;
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.03), transparent 20%),
                conic-gradient(from 0deg, #00C9A7 0deg 36deg, #4A9EFF 36deg 72deg, #6FEDD6 72deg 108deg, #00B894 108deg 144deg, #3498DB 144deg 180deg, #00C9A7 180deg 216deg, #4A9EFF 216deg 252deg, #6FEDD6 252deg 288deg, #00B894 288deg 324deg, #3498DB 324deg 360deg);
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
    box-shadow: 0 8px 30px rgba(79, 197, 173, 0.08), inset 0 0 40px rgba(74,158,255,0.08);
    position: relative;
    overflow: hidden;
}
.spinner-label {
    position: absolute;
    width: 140px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--light);
    text-shadow: 0 0 6px rgba(111,237,214,0.6), 0 0 10px rgba(74,158,255,0.2);
    pointer-events: none;
    white-space: nowrap;
    transform-origin: center center;
}

.ring {
    position:absolute;
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}
.ring-outer{
    width:98%;
    height:98%;
    box-shadow: 0 0 30px rgba(74,158,255,0.18), 0 0 60px rgba(0,201,167,0.08) inset;
    border: 1px solid rgba(111,237,214,0.06);
}
.ring-inner{
    width:64%;
    height:64%;
    box-shadow: 0 0 18px rgba(0,201,167,0.2) inset;
    border: 1px solid rgba(74,158,255,0.06);
}
.scanline{
    position:absolute;
    left:-50%;
    top:50%;
    width:200%;
    height:2px;
    background: linear-gradient(90deg, transparent, rgba(111,237,214,0.35), transparent);
    transform: translateY(-50%) rotate(15deg);
    animation: scan 3s linear infinite;
    mix-blend-mode: screen;
}
@keyframes scan{
    0% { transform: translateX(-100%) translateY(-50%) rotate(15deg); }
    100% { transform: translateX(100%) translateY(-50%) rotate(15deg); }
}

@keyframes slot-pulse {
    0% { filter: drop-shadow(0 0 0px rgba(0,201,167,0)); }
    50% { filter: drop-shadow(0 0 30px rgba(0,201,167,0.8)); }
    100% { filter: drop-shadow(0 0 0px rgba(0,201,167,0)); }
}

.spinner-wheel.landed {
    animation: slot-pulse 0.8s ease-out;
}

.restaurant-card { background: rgba(0,201,167,0.08); border-radius:12px; padding:1rem; margin-top:1rem; border:1px solid var(--primary); }
.action-btn { display:block; width:100%; text-align:center; padding:0.7rem; margin-top:0.6rem; border-radius:8px; text-decoration:none; font-weight:700; background:var(--accent); color:var(--dark); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
.top-pick-link { color: inherit; text-decoration: underline; text-underline-offset: 4px; transition: color 0.16s ease, text-shadow 0.16s ease; }
.option-link { color: inherit; text-decoration: none; transition: color 0.16s ease; }
@media (hover: hover) {
    .top-pick-link:hover {
        color: #9dd7ff;
        text-shadow: 0 0 10px rgba(157, 215, 255, 0.45);
    }
    .option-link:hover {
        color: #9dd7ff;
    }
    .action-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(111, 237, 214, 0.35);
        filter: brightness(1.03);
    }
}
.top-pick-link:focus-visible,
.option-link:focus-visible,
.action-btn:focus-visible {
    outline: 2px solid rgba(157, 215, 255, 0.85);
    outline-offset: 2px;
}
.hidden { display:none; }
.center-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2rem; }
.mascot { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:2.2rem; }
.spinner-pointer{
    position:absolute;
    left:50%;
    top:-14px;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:14px solid transparent;
    border-right:14px solid transparent;
    border-top:24px solid #FFF8F0;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
    z-index:6;
    pointer-events:none;
}
.center-icon#spinCenter{
    cursor:pointer;
    width:74px;
    height:74px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background: #2e7fd6;
    box-shadow: 0 10px 28px rgba(0,201,167,0.2), inset 0 0 20px rgba(255,255,255,0.12);
    border:2px solid rgba(255,248,240,0.58);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    z-index:5;
    user-select:none;
}
.center-icon#spinCenter::after{
    content:'';
    position:absolute;
    width:102px;
    height:102px;
    border-radius:50%;
    border:1px solid rgba(111,237,214,0.32);
    box-shadow: 0 0 0 0 rgba(111,237,214,0.2);
    animation: spin-cta-pulse 1.9s ease-out infinite;
    pointer-events:none;
}
.spin-label{
    font-family:'Righteous', cursive;
    font-size:0.78rem;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:#f4fffc;
}
@keyframes spin-cta-pulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    70% { transform: scale(1.06); opacity: 0; }
    100% { transform: scale(1.08); opacity: 0; }
}
@media (hover: hover) {
    .center-icon#spinCenter:hover{
        transform:translate(-50%,-50%) scale(1.03);
        box-shadow: 0 14px 30px rgba(111,237,214,0.3), inset 0 0 20px rgba(255,255,255,0.18);
        filter: brightness(1.04);
    }
}
.center-icon#spinCenter.active{
    transform:translate(-50%,-50%) scale(0.98);
}
.center-icon#spinCenter:focus-visible{
    outline: 2px solid rgba(157, 215, 255, 0.9);
    outline-offset: 3px;
}
.spinner-wheel.spinning { filter: drop-shadow(0 8px 30px rgba(0,201,167,0.12)); }
.loading-card { text-align:center; }
.result-loader {
    width:36px;
    height:36px;
    margin:10px auto 6px;
    border:3px solid rgba(255,255,255,0.18);
    border-top-color:#6FEDD6;
    border-radius:50%;
    animation: result-spin 0.8s linear infinite;
}
@keyframes result-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 420px) {
    .subtitle {
        font-size: 0.68rem;
        letter-spacing: 0.09em;
        padding: 0.28rem 0.68rem;
    }
}
.mode-switch { text-align:center; margin-bottom:1rem; padding:10px; background:rgba(74,158,255,0.08); border-radius:8px; }
.mode-switch button { background:var(--secondary); color:white; border:none; padding:6px 10px; border-radius:6px; }
.footer { text-align:center; margin-top:1.5rem; opacity:0.7; font-size:0.85rem; }