*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

:root { --ad-height: 60px; }
body.is-admin { --ad-height: 0px; }
html, body {
    height:100%; width:100%; margin:0; padding:0; overflow:hidden;
    background:#fdf6ee; font-family:Arial,"Open Sans",sans-serif;
    -webkit-font-smoothing:antialiased;
}
 
/* ===== AUTH ===== */
#authOverlay {
    position:fixed; inset:0; z-index:9000;
    background:rgba(90,58,26,0.55);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:20px;
}
#authOverlay.hidden { display:none; }
#authBox {
    background:#fff; border-radius:16px; padding:28px 24px 24px;
    width:100%; max-width:360px; box-shadow:0 8px 32px rgba(0,0,0,0.22);
}
#authTabs { display:flex; border-bottom:2px solid #EFD2B0; margin-bottom:18px; }
.auth-tab {
    flex:1; padding:9px; border:none; background:none;
    font-size:0.95rem; font-weight:bold; color:#aaa; cursor:pointer;
    border-bottom:3px solid transparent; margin-bottom:-2px;
    transition:color 0.15s, border-color 0.15s;
}
.auth-tab.active { color:#5a3a1a; border-bottom-color:#5a3a1a; }
#authBox input {
    display:block; width:100%; padding:11px 13px; margin-bottom:10px;
    font-size:1rem; border:1.5px solid #d4b896; border-radius:8px;
    background:#fdf6ee; color:#333; -webkit-appearance:none;
}
#authBox input:focus { outline:none; border-color:#5a3a1a; }
.auth-submit {
    display:block; width:100%; padding:13px; margin-top:4px;
    font-size:1rem; font-weight:bold; border:none; border-radius:8px;
    background:#EFD2B0; color:#5a3a1a; cursor:pointer; transition:background 0.13s;
}
.auth-submit:active { background:#d4b475; }
.auth-error { color:#c62828; font-size:0.83rem; min-height:18px; margin-bottom:6px; font-weight:bold; }
 
/* ===== TYPE PICKER ===== */
#typePickerBg {
    position:fixed; inset:0; z-index:7000;
    background:rgba(0,0,0,0.4); backdrop-filter:blur(2px);
    display:none;
}
#typePickerBg.open { display:block; }
 
#typePicker {
    position:fixed; bottom:0; left:0; right:0; z-index:7001;
    background:#fff; border-radius:20px 20px 0 0;
    padding:12px 20px 30px;
    box-shadow:0 -4px 24px rgba(0,0,0,0.22);
    transform:translateY(100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
#typePicker.open { transform:translateY(0); }
 
.tp-handle {
    width:40px; height:4px; background:#e0e0e0;
    border-radius:2px; margin:0 auto 14px;
}
.tp-title {
    text-align:center; font-weight:bold; font-size:1rem;
    color:#5a3a1a; margin-bottom:16px;
}
.tp-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:10px; margin-bottom:14px;
}
.tp-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:14px 6px; border-radius:14px;
    border:2.5px solid #EFD2B0; background:#fdf6ee;
    cursor:pointer; gap:6px; transition:all 0.15s;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
}
.tp-btn .tp-emoji { font-size:2rem; line-height:1; }
.tp-btn .tp-label { font-size:0.72rem; font-weight:bold; color:#5a3a1a; text-align:center; }
.tp-btn:active  { transform:scale(0.93); background:#EFD2B0; }
.tp-btn.selected { background:#EFD2B0; border-color:#c8a050; }
.tp-cancel {
    display:block; width:100%; padding:13px; border:none;
    border-radius:10px; background:#f5f5f5; color:#888;
    font-size:0.95rem; font-weight:bold; cursor:pointer;
}
 
/* ===== MAP ===== */
#map {
    position:fixed; top:0; left:0; right:0; bottom:0;
    width:100%; height:100vh; height:100svh; height:100dvh;
    z-index:0; touch-action:pan-x pan-y;
    background:linear-gradient(#87ceeb,white);
}
 
/* ===== OFFLINE BANNER ===== */
#offlineBanner {
    position:fixed; top:0; left:0; right:0;
    background:#d32f2f; color:#fff; text-align:center;
    padding:12px; font-size:0.9rem; font-weight:bold; z-index:2000;
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform 0.3s ease-in-out, opacity 0.2s ease;
}
#offlineBanner.visible { transform:translateY(0); opacity:1; pointer-events:auto; }
 
/* ===== TYPE INDICATOR ===== */
#typeIndicator {
    position:fixed;
    right: calc(max(clamp(14px, 3vw, 24px), env(safe-area-inset-right, 0px)) + clamp(50px, 13vmin, 70px) / 2);
    bottom: calc(clamp(28px, 5vh, 48px) + env(safe-area-inset-bottom,0px) + var(--ad-height));
    transform: translateX(50%);
    z-index:1000;
    background:rgba(255,255,255,0.95);
    border:1.5px solid #EFD2B0; border-radius:16px;
    padding:4px 10px; font-size:clamp(0.68rem, 2vmin, 0.85rem); font-weight:bold; color:#5a3a1a;
    backdrop-filter:blur(4px); white-space:nowrap; pointer-events:none;
    transition:opacity 0.2s;
}

/* ===== FLOATING BUTTONS ===== */
button#toiletBtn, button#nearestBtn, button#hereBtn {
    position:fixed;
    right: max(clamp(14px, 3vw, 24px), env(safe-area-inset-right, 0px));
    z-index:1000;
    width: clamp(50px, 13vmin, 70px);
    height: clamp(50px, 13vmin, 70px);
    border-radius:50%;
    border:none; font-size:clamp(1.2rem, 4vmin, 1.7rem); line-height:1;
    background:#EFD2B0; color:#5a3a1a;
    box-shadow:0 4px 14px rgba(0,0,0,0.28); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.13s, box-shadow 0.13s, background 0.13s;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
    touch-action:manipulation;
}
button#toiletBtn  { bottom: calc(clamp(80px, 11vh, 112px)  + env(safe-area-inset-bottom,0px) + var(--ad-height)); }
button#nearestBtn { bottom: calc(clamp(142px, 19.5vh, 196px) + env(safe-area-inset-bottom,0px) + var(--ad-height)); }
button#hereBtn    { bottom: calc(clamp(204px, 28vh, 280px)  + env(safe-area-inset-bottom,0px) + var(--ad-height)); }
button#toiletBtn:active, button#nearestBtn:active, button#hereBtn:active {
    box-shadow:0 2px 6px rgba(0,0,0,0.2) !important;
}

/* ===== AD BANNER ===== */
#adBanner {
    position:fixed; left:0; right:0; bottom:0;
    height:60px; z-index:1500;
    background:#fff; border-top:1px solid #e0e0e0;
    display:flex; align-items:center; justify-content:center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow:0 -2px 8px rgba(0,0,0,0.08);
    overflow:hidden;
}
body.is-admin #adBanner { display:none; }
.ad-placeholder {
    font-size:0.72rem; color:#999; letter-spacing:0.08em; text-transform:uppercase;
}

/* ===== VIDEO AD MODAL ===== */
#videoAdModal {
    position:fixed; inset:0; z-index:9700;
    background:rgba(0,0,0,0.88);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
}
.video-ad-box {
    background:#111; border-radius:14px; overflow:hidden;
    width:100%; max-width:520px;
    box-shadow:0 10px 40px rgba(0,0,0,0.55);
    display:flex; flex-direction:column;
}
.video-ad-label {
    color:#fff; font-size:0.72rem; letter-spacing:0.1em;
    text-transform:uppercase; padding:9px 14px;
    background:rgba(255,255,255,0.08);
    display:flex; justify-content:space-between; align-items:center;
}
.video-ad-box video {
    width:100%; max-height:60vh; background:#000; display:block;
}
.video-ad-footer {
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:11px 14px; background:rgba(255,255,255,0.06);
    color:#ddd; font-size:0.82rem;
}
.video-ad-footer button {
    padding:9px 18px; border:none; border-radius:8px;
    background:#EFD2B0; color:#5a3a1a; font-weight:bold;
    cursor:pointer; font-size:0.85rem; white-space:nowrap;
}
.video-ad-footer button:disabled {
    background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.45);
    cursor:not-allowed;
}

/* ===== LEADERBOARD ===== */
#leaderboardContainer {
    position:fixed; top:clamp(12px, 2vh, 20px); left:50%; transform:translateX(-50%);
    width: clamp(180px, 30vw, 240px); background:white; border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,0.3); z-index:2000;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1); overflow:hidden;
}
.leaderboard-header {
    background:#EFD2B0; color:#5a3a1a; padding:10px 15px;
    font-weight:bold; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    font-size:1rem;
}
.leaderboard-content { max-height:200px; overflow-y:auto; padding:0 10px 10px; background:#fff; }
.leaderboard-minimized { height:42px; }
.lb-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 5px; border-bottom:1px solid #eee; font-size:0.88rem;
}
.lb-rank { font-weight:bold; width:30px; }
.lb-name { flex-grow:1; text-align:left; color:#333; }
.lb-points {
    font-weight:bold; color:#4caf50; background:#f0f9f0;
    padding:2px 8px; border-radius:10px; font-size:0.8rem;
}
.connection-lost { opacity:0; pointer-events:none; transform:translateY(-20px); transition:all 0.4s ease; }
 
/* ===== SETTINGS / USER BADGE ===== */
#settingsBtn {
    position:fixed;
    top: clamp(10px, 1.8vh, 20px); left: clamp(10px, 2vw, 18px);
    width: clamp(36px, 9vmin, 50px); height: clamp(36px, 9vmin, 50px);
    background:white; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:clamp(18px, 5vmin, 26px); cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,0.2); z-index:3000;
}
#userBadge {
    position:fixed;
    top: clamp(10px, 1.8vh, 20px); right: clamp(10px, 2vw, 18px);
    background:white; border-radius:10px; font-weight:bold; cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,0.2); z-index:3000;
    font-size: clamp(0.75rem, 2.2vmin, 0.95rem);
    padding: clamp(7px, 1.5vmin, 12px) clamp(10px, 2.5vmin, 18px);
}
 
/* ===== POPUP ===== */
.leaflet-popup-content-wrapper {
    border-radius:12px !important; padding:0 !important;
    max-height: 70vh;
    display: flex; flex-direction: column;
}
.leaflet-popup-content {
    margin:0 !important; padding:12px 14px !important;
    font-size:0.9rem; line-height:1.4;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;
    overscroll-behavior: contain;
}
.leaflet-popup-content input { font-size:1rem !important; }
 
/* ===== REVIEWS ===== */
.review {
    margin-top:5px; background:#fdf6ee; padding:7px 10px;
    border-radius:6px; border-left:3px solid #EFD2B0;
    font-size:0.85rem; line-height:1.4;
}
.review b { font-weight:bold; }
.review .reviewer { font-size:0.75rem; color:#888; margin-top:2px; }
.report-item { background:#fff0f0 !important; border-left:3px solid #e53935 !important; color:#b71c1c; }
.report-item b { color:#d32f2f; }
 
/* ===== STARS ===== */
.star-row { display:flex; gap:4px; margin:8px 0; }
.star {
    font-size:1.7rem; cursor:pointer; transition:transform 0.1s;
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; line-height:1;
}
.star:active { transform:scale(1.3); }
 
/* ===== MISC ===== */
.details-link-btn {
    background:#fdf8f2; border:1.5px solid #EFD2B0; border-radius:8px;
    color:#5a3a1a; font-size:0.85rem; font-weight:600; cursor:pointer;
    padding:8px 12px; text-align:center; transition:all 0.2s ease;
    display:flex; align-items:center; justify-content:center; gap:5px; margin-top:5px;
}
.report-btn { background:#f9e0e0 !important; color:#8b2020 !important; }
.report-btn:active { background:#f0c0c0 !important; }
hr { border:0; border-top:1px solid #eee; margin:10px 0; }