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

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-card: #141414;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --accent: #c41e1e;
    --accent-hover: #e02525;
    --accent-dark: #8b1515;
    --border: #333333;
    --border-light: #444444;
    --success: #2ecc71;
    --warning: #f39c12;
    --danger: #e74c3c;
    --font-heading: 'Jura', system-ui, sans-serif;
    --font-body: 'Karla', system-ui, -apple-system, sans-serif;
    --font-logo: 'Rubik Distressed', 'Rubik Wet Paint', 'Jura', system-ui, sans-serif;
    --radius: 8px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow: 0 4px 20px rgba(0,0,0,0.5);
    --shadow-accent: 0 4px 20px rgba(196,30,30,0.3);
    --transition: 0.3s ease;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; }
h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.main-content { flex: 1; padding-top: 80px; }

/* NAVBAR */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(10,10,10,0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); height: 70px; }
.nav-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 100%; }
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--text-primary); flex-shrink: 0; }
.nav-logo:hover { color: var(--text-primary); }
.nav-logo-img { height: 42px; width: auto; display: block; filter: drop-shadow(0 0 4px rgba(255,255,255,0.45)) drop-shadow(0 0 14px rgba(210,230,255,0.3)); animation: qqLogoFadeIn 3s ease-in-out both; }
.nav-menu { display: flex; align-items: center; list-style: none; gap: 5px; }
.nav-menu a { color: var(--text-secondary); padding: 8px 12px; border-radius: var(--radius); transition: all var(--transition); font-weight: 500; font-size: 0.95rem; white-space: nowrap; }
.nav-menu a:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-admin { color: var(--accent) !important; }
.nav-user { display: flex; align-items: center; gap: 10px; }
.nav-username { color: var(--text-secondary); font-size: 0.9rem; display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.nav-cabinet { text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.05); transition: all 0.2s; }
.nav-cabinet:hover { background: rgba(255,255,255,0.1); color: var(--accent); }
.nav-btn { padding: 8px 20px !important; border-radius: var(--radius) !important; font-weight: 600 !important; font-size: 0.9rem !important; }
.nav-btn-primary { background: var(--accent) !important; color: var(--text-primary) !important; }
.nav-btn-primary:hover { background: var(--accent-hover) !important; }
.nav-btn-outline { border: 1px solid var(--border) !important; color: var(--text-primary) !important; }
.nav-btn-outline:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; }
.nav-toggle span { display: block; width: 25px; height: 2px; background: var(--text-primary); transition: all var(--transition); }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* FX TOGGLES (effects settings) */
.fx-toggle-item { position: relative; list-style: none; display: flex; flex-direction: column; }
.fx-toggle-row { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.fx-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 0.85rem; color: var(--text-secondary); }
.fx-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.fx-toggle-slider { position: relative; display: inline-block; width: 34px; height: 18px; background: #2a2a2a; border: 1px solid var(--border); border-radius: 999px; transition: background var(--transition), border-color var(--transition); flex-shrink: 0; }
.fx-toggle-slider::before { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; background: #ddd; border-radius: 50%; transition: transform var(--transition), background var(--transition); }
.fx-toggle input:checked + .fx-toggle-slider { background: var(--accent); border-color: var(--accent); }
.fx-toggle input:checked + .fx-toggle-slider::before { transform: translateX(16px); background: #fff; }
.fx-toggle input:focus-visible + .fx-toggle-slider { box-shadow: 0 0 0 2px rgba(196,30,30,0.5); }
.fx-toggle-label { font-family: var(--font-body); letter-spacing: 0.3px; }
.fx-toggle:hover .fx-toggle-label { color: var(--text-primary); }

/* Шапка на узких ноутбуках (1240–1399px): те же пункты, но плотнее — иначе строка админа
   (11 пунктов + колокольчик + ник) не помещается. Ниже 1240px меню уходит в гамбургер. */
@media (min-width: 1240px) and (max-width: 1399px) {
    .nav-logo-img { height: 36px; }
    .nav-menu { gap: 2px; }
    .nav-menu a { padding: 8px; font-size: 0.9rem; }
    .fx-toggle-row { padding: 0 4px; }
    .nav-user { gap: 6px; }
    .nav-username { max-width: 110px; }
    .nav-btn { padding: 8px 14px !important; font-size: 0.85rem !important; }
    .nav-notif { margin-left: 2px; }
}
.fx-hint-btn { width: 18px; height: 18px; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.7rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); }
.fx-hint-btn:hover, .fx-hint-btn--active { border-color: var(--accent); color: var(--accent); }
.fx-hint { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 260px; max-width: calc(100vw - 40px); background: rgba(10,10,10,0.97); border: 1px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; font-size: 0.85rem; line-height: 1.4; color: var(--text-primary); box-shadow: 0 6px 24px rgba(0,0,0,0.6); z-index: 1100; }
.fx-hint--open { display: block; }

/* BUTTONS */
.btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius); font-family: var(--font-body); font-weight: 600; font-size: 1rem; cursor: pointer; border: none; transition: all var(--transition); text-align: center; min-height: 44px; }
.btn-primary { background: var(--accent); color: var(--text-primary); }
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent); color: var(--text-primary); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent); color: var(--text-primary); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #27ae60; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #c0392b; }
.btn-sm { padding: 6px 16px; font-size: 0.85rem; }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }

/* HOME PAGE */
.home-page { position: relative; min-height: 100vh; margin-top: -80px; padding-top: 80px; }
.home-page-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url('/images/fon2.jpg') center/cover no-repeat; filter: brightness(0.15); z-index: 0; }
.home-page-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,10,10,0.65); z-index: 0; }

/* HERO */
.hero { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero-content { position: relative; z-index: 1; padding: 40px 20px; }
.hero-logo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin-bottom: 30px; border: 3px solid rgba(196,30,30,0.5); box-shadow: 0 0 40px rgba(196,30,30,0.3); }
.hero h1 { margin-bottom: 20px; line-height: 1; }
.hero-logo-heading { font-size: inherit; }
.hero-logo-img { max-width: 560px; width: 85%; height: auto; display: inline-block; filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)) drop-shadow(0 0 22px rgba(210,230,255,0.35)) drop-shadow(0 0 45px rgba(180,210,255,0.2)); animation: qqLogoFadeIn 4.5s ease-in-out both, textFlicker 4s ease-in-out 4.5s infinite; }
.hero p { font-size: 1.3rem; color: var(--text-secondary); margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-phone { font-size: 1.5rem; color: var(--accent); font-weight: 700; margin-bottom: 30px; display: block; }
.hero-phone:hover { color: var(--accent-hover); }

/* SECTIONS */
.section { padding: 80px 0; }
.section-title { font-size: 2.5rem; text-align: center; margin-bottom: 50px; color: #fff5f5; text-shadow: 0 0 2px #ffffff, 0 0 6px #ffd0d0, 0 0 14px #ff2b2b, 0 0 28px #c41e1e, 0 0 52px #8b0000, 0 0 90px rgba(139,0,0,0.6); }

/* QUEST CARDS */
.quests-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 35px; padding: 0 20px; max-width: 1300px; margin: 0 auto; }
.quest-card { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); display: flex; flex-direction: column; }
.quest-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow-accent); }
.quest-card-img { width: 100%; height: 300px; object-fit: cover; transition: transform var(--transition); }
.quest-card:hover .quest-card-img { transform: scale(1.05); }
.quest-card-img-wrapper { overflow: hidden; position: relative; }
.quest-card-body { padding: 25px; flex: 1; display: flex; flex-direction: column; }
.quest-card-title { font-size: 1.8rem; margin-bottom: 10px; color: var(--accent); }
.quest-card-address { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }
.quest-card-desc { color: var(--text-secondary); margin-bottom: 20px; flex: 1; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quest-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.quest-card-rating { display: flex; align-items: center; gap: 5px; color: var(--warning); font-weight: 600; }

/* QUEST DETAIL */
.quest-page { position: relative; min-height: 100vh; margin-top: -80px; padding-top: 80px; }
.quest-page-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; filter: brightness(0.15); z-index: 0; }
.quest-page-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,10,10,0.65); z-index: 0; }
.quest-hero { height: 300px; display: flex; align-items: flex-end; }
.quest-hero-content { position: relative; z-index: 1; padding: 40px; width: 100%; max-width: 1200px; margin: 0 auto; }
.quest-hero h1 { font-size: 3rem; color: #fff5f5; text-shadow: 0 0 2px #ffffff, 0 0 6px #ffd0d0, 0 0 14px #ff2b2b, 0 0 28px #c41e1e, 0 0 52px #8b0000, 0 0 90px rgba(139,0,0,0.6); }
.quest-hero .quest-address { color: var(--text-secondary); margin-top: 10px; font-size: 1.1rem; }

/* GALLERY */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin: 30px 0; }
.gallery-item { cursor: pointer; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); aspect-ratio: 4/3; }
.gallery-item:hover { border-color: var(--accent); transform: scale(1.02); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* LIGHTBOX */
.lightbox { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 2000; align-items: center; justify-content: center; cursor: pointer; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius); }
.lightbox-close { position: absolute; top: 20px; right: 30px; font-size: 2.5rem; color: var(--text-primary); cursor: pointer; background: none; border: none; line-height: 1; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; color: var(--text-primary); cursor: pointer; background: none; border: none; padding: 20px; transition: color var(--transition); }
.lightbox-prev:hover, .lightbox-next:hover { color: var(--accent); }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* BOOKING */
.booking-container { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
.booking-container h1 { font-size: 2.5rem; text-align: center; margin-bottom: 40px; color: var(--accent); }
.booking-step { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 30px; margin-bottom: 25px; border: 1px solid var(--border); }
.booking-step h3 { font-size: 1.3rem; margin-bottom: 20px; color: var(--accent); font-family: var(--font-body); font-weight: 600; }
.calendar { width: 100%; margin-bottom: 20px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.calendar-header h4 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; }
.calendar-nav { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 8px 15px; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); font-size: 1rem; }
.calendar-nav:hover { border-color: var(--accent); color: var(--accent); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; margin-bottom: 5px; }
.calendar-weekday { text-align: center; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; padding: 8px 0; }
.calendar-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; }
.calendar-day { text-align: center; padding: 10px; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); border: 1px solid transparent; background: var(--bg-card); color: var(--text-primary); font-size: 0.95rem; }
.calendar-day:hover:not(.disabled):not(.empty) { border-color: var(--accent); color: var(--accent); }
.calendar-day.selected { background: var(--accent); color: var(--text-primary); border-color: var(--accent); }
.calendar-day.today { border-color: var(--accent); }
.calendar-day.disabled { color: #555; cursor: not-allowed; background: transparent; }
.calendar-day.empty { background: transparent; cursor: default; }
.time-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.time-slot { padding: 15px; text-align: center; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-weight: 500; font-size: 1.1rem; }
.time-slot:hover:not(.occupied) { border-color: var(--accent); color: var(--accent); }
.time-slot.selected { background: var(--accent); border-color: var(--accent); color: var(--text-primary); }
.time-slot.occupied { background: rgba(255,255,255,0.05); color: #555; cursor: not-allowed; text-decoration: line-through; }
.contact-methods { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.contact-method { padding: 20px; text-align: center; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); border: 2px solid var(--border); background: var(--bg-card); }
.contact-method:hover { border-color: var(--accent); }
.contact-method.selected { border-color: var(--accent); background: rgba(196,30,30,0.1); }
.contact-method-icon { font-size: 2rem; margin-bottom: 8px; }
.contact-method-label { font-weight: 600; font-size: 0.95rem; }

/* CONTACT WIDGET (shared: booking + certificates) */
.contact-widget { display: block; }
.contact-widget .contact-methods { margin-bottom: 18px; }
.contact-method-btn { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 12px; text-align: center; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); border: 2px solid var(--border); background: var(--bg-card); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); user-select: none; }
.contact-method-btn:hover { border-color: var(--accent); }
.contact-method-btn input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.contact-method-btn.active { border-color: var(--accent); background: rgba(196,30,30,0.1); }
.contact-info-input { width: 100%; padding: 14px 16px; background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: inherit; font-size: 1rem; transition: border-color var(--transition); }
.contact-info-input:focus { outline: none; border-color: var(--accent); }

/* REVIEW ADMIN REPLY (public) */
.review-reply { margin-top: 16px; padding: 14px 16px; background: rgba(196,30,30,0.08); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.review-reply-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.review-reply-badge { display: inline-block; padding: 3px 10px; background: var(--accent); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; border-radius: var(--radius); text-transform: uppercase; }
.review-reply-label { color: var(--text-secondary); font-size: 0.85rem; font-style: italic; }
.review-reply-date { color: var(--text-secondary); font-size: 0.8rem; margin-left: auto; }
.review-reply-text { color: var(--text-primary); line-height: 1.6; font-size: 0.95rem; margin: 0; white-space: pre-line; }

/* ADMIN REVIEWS: REPLY FORM */
.admin-reply-current { margin-top: 14px; padding: 12px 14px; background: rgba(196,30,30,0.1); border: 1px solid rgba(196,30,30,0.4); border-radius: var(--radius); }
.admin-reply-current-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.admin-reply-badge { display: inline-block; padding: 2px 8px; background: var(--accent); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; border-radius: var(--radius); text-transform: uppercase; }
.admin-reply-date { color: var(--text-secondary); font-size: 0.8rem; }
.admin-reply-text { margin: 0; color: var(--text-primary); line-height: 1.5; white-space: pre-line; }
.admin-reply-form { margin-top: 14px; margin-bottom: 10px; }

/* BOOKING: PROMO CODE */
.promo-row { margin: 14px 0 8px; padding-top: 12px; border-top: 1px dashed var(--border); }
.promo-label { display: block; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 6px; }
.promo-input-row { display: flex; gap: 8px; }
.promo-input { flex: 1; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-heading); }
.promo-apply-btn { flex-shrink: 0; }
.promo-status { margin-top: 6px; font-size: 0.85rem; color: var(--text-secondary); min-height: 1em; }
.promo-status--ok { color: #34a853; }
.promo-status--err { color: #c41e1e; }

/* NAV MINI-GAME LINK */
.nav-minigame { color: #ffb347 !important; }

/* MINI-GAME PAGE */
html.mg-active, body.mg-active { overflow: hidden !important; height: 100vh; height: 100dvh; overscroll-behavior: none; touch-action: none; }
body.mg-active footer, body.mg-active .footer { display: none !important; }
.mg-page { position: relative; min-height: 100vh; margin-top: -80px; padding-top: 80px; background: #050505; overflow: hidden; }
.mg-page::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, #1a0a0a 0%, #050505 70%); z-index: 0; }
.mg-overlay { position: fixed; inset: 0; display: flex; z-index: 1100; padding: 40px 20px; background: rgba(5,5,5,0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* На поражении — слабее заливка и панель сверху, чтобы было видно оставшихся персонажей */
.mg-overlay--loss { padding-top: 130px; background: rgba(5,5,5,0.25); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mg-overlay--loss .mg-panel { max-width: 520px; margin-top: 0; }
.mg-panel { max-width: 640px; width: 100%; margin: auto; padding: 34px 32px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 0 40px rgba(196,30,30,0.25); }
.mg-panel-title { font-family: var(--font-heading); color: var(--accent); font-size: 2rem; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.mg-panel-lead { color: var(--text-primary); line-height: 1.6; margin: 0 0 18px; text-align: center; font-size: 1.05rem; }
.mg-rules { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.mg-rules li { padding: 10px 14px; background: rgba(10,10,10,0.6); border-left: 2px solid var(--accent); border-radius: var(--radius); color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.mg-rules li b { color: var(--accent); font-weight: 700; }
.mg-status { text-align: center; color: var(--text-secondary); margin-bottom: 14px; min-height: 1em; }
.mg-panel-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.mg-hud { position: fixed; top: 90px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; padding: 10px 20px; background: rgba(10,10,10,0.92); border: 1px solid var(--accent); border-radius: var(--radius-lg); z-index: 1060; box-shadow: 0 0 22px rgba(196,30,30,0.45); }
.mg-hud-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; }
.mg-hud-label { color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.mg-hud-timer #mgTimer { font-family: var(--font-heading); font-size: 1.5rem; color: #fff; font-weight: 700; }
.mg-hud-hearts #mgHearts { font-size: 1.3rem; letter-spacing: 4px; color: #ff3333; }
.mg-hud-found #mgFound { font-family: var(--font-heading); font-size: 1.3rem; color: var(--accent); font-weight: 700; }

.mg-field { position: fixed; top: 150px; left: 0; right: 0; bottom: 20px; z-index: 10; }
.mg-prop { position: absolute; display: inline-block; filter: grayscale(0.6) brightness(0.5); opacity: 0.85; cursor: pointer; user-select: none; text-shadow: 0 0 10px rgba(0,0,0,0.6); }
/* Персонажи и предметы выглядят одинаково — никаких подсказок при наведении (не обводим, не подсвечиваем) */
.mg-character { position: absolute; cursor: pointer; filter: brightness(0.55) contrast(1); user-select: none; pointer-events: auto; max-width: 35vw; }
/* После проигрыша подсвечиваем нетронутых персонажей красным — яркость полная, без затемняющего фильтра */
.mg-character.mg-reveal { filter: brightness(1.6) contrast(1.05) drop-shadow(0 0 12px #c41e1e) drop-shadow(0 0 30px rgba(196,30,30,0.95)); outline: 3px solid #ff3333; outline-offset: 6px; border-radius: 6px; transform: scale(1.25); transform-origin: center; animation: mgRevealPulse 1.4s ease-in-out infinite; pointer-events: none; z-index: 20; }
@keyframes mgRevealPulse {
    0%, 100% { outline-color: rgba(196,30,30,0.7); filter: brightness(1.5) drop-shadow(0 0 12px #c41e1e) drop-shadow(0 0 30px rgba(196,30,30,0.9)); }
    50% { outline-color: #ff4444; filter: brightness(1.9) drop-shadow(0 0 18px #ff3333) drop-shadow(0 0 40px rgba(255,60,60,1)); }
}
.mg-character--found { animation: mgCharFound 0.5s ease forwards; pointer-events: none; }
@keyframes mgCharFound {
    0% { transform: scale(1); filter: brightness(1.2) drop-shadow(0 0 20px #34a853); opacity: 1; }
    60% { transform: scale(1.25); filter: brightness(1.6) drop-shadow(0 0 30px #34a853); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0; }
}
.mg-miss-flash { position: fixed; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(196,30,30,0.65) 0%, rgba(196,30,30,0) 70%); animation: mgMissFlash 0.6s ease-out forwards; z-index: 2002; }
@keyframes mgMissFlash {
    0% { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.mg-promo { margin: 16px 0 22px; padding: 16px 18px; background: linear-gradient(180deg, rgba(52,168,83,0.15), rgba(10,10,10,0.6)); border: 1px solid rgba(52,168,83,0.55); border-radius: var(--radius-lg); text-align: center; }
.mg-promo-label { color: var(--text-secondary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.mg-promo-code { font-family: var(--font-heading); font-size: 2rem; color: #fff; font-weight: 700; letter-spacing: 0.15em; padding: 10px 18px; background: rgba(0,0,0,0.5); border: 1px dashed rgba(52,168,83,0.8); border-radius: var(--radius); display: inline-block; margin-bottom: 8px; user-select: all; }
.mg-promo-note { color: var(--text-secondary); font-size: 0.88rem; }

@media (max-width: 768px) {
    .mg-panel { padding: 24px 20px; }
    .mg-panel-title { font-size: 1.5rem; }
    .mg-hud { top: 80px; gap: 10px; padding: 8px 12px; }
    .mg-hud-item { min-width: 55px; }
    .mg-hud-timer #mgTimer, .mg-hud-found #mgFound { font-size: 1.1rem; }
    .mg-field { top: 130px; }
    .mg-promo-code { font-size: 1.4rem; padding: 8px 12px; }
}

/* QUEST: VIDEO ADD-ON NOTICE */
.quest-video-addon { max-width: 600px; margin: 20px auto 0; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: linear-gradient(180deg, rgba(196,30,30,0.1), rgba(10,10,10,0.6)); border: 1px solid rgba(196,30,30,0.45); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); }
.quest-video-addon-icon { font-size: 1.8rem; flex-shrink: 0; line-height: 1.1; }
.quest-video-addon-title { color: var(--text-primary); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.quest-video-addon-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }

/* ========= «НАПУГАЙ ДРУЗЕЙ» ADD-ON (dom-ada + proklyataya-tserkov only) ========= */
.quest-scare-addon {
    max-width: 600px;
    margin: 14px auto 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background:
        linear-gradient(135deg, rgba(90, 5, 10, 0.35) 0%, rgba(25, 3, 3, 0.85) 100%),
        radial-gradient(ellipse at 85% 10%, rgba(196, 30, 30, 0.18) 0%, transparent 60%);
    border: 1px solid rgba(220, 40, 40, 0.4);
    border-left: 3px solid #8b0000;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(139, 0, 0, 0.25), inset 0 1px 0 rgba(255, 60, 60, 0.08);
}
.quest-scare-addon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 40, 40, 0.06) 50%, transparent 60%);
    pointer-events: none;
    animation: scareShine 6s ease-in-out infinite;
}
@keyframes scareShine {
    0%, 70%, 100% { transform: translateX(-100%); }
    85%           { transform: translateX(100%); }
}
.quest-scare-addon-icon {
    font-size: 1.9rem;
    flex-shrink: 0;
    line-height: 1.1;
    filter: drop-shadow(0 0 8px rgba(220, 30, 30, 0.6));
    animation: scarePulse 2.8s ease-in-out infinite;
}
@keyframes scarePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(220, 30, 30, 0.5)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(255, 60, 60, 0.9)); }
}
.quest-scare-addon-title {
    color: #ffdede;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 12px rgba(220, 30, 30, 0.3);
    position: relative;
    z-index: 1;
}
.quest-scare-addon-desc {
    color: #c9b3b3;
    font-size: 0.9rem;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .quest-scare-addon::before,
    .quest-scare-addon-icon { animation: none; }
}

/* BOOKING: CONTACT LEVEL OPTIONS */
.contact-level-options { display: flex; flex-direction: column; gap: 12px; }
.contact-level-option { cursor: pointer; padding: 18px 20px; background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius); transition: all var(--transition); }
.contact-level-option:hover { border-color: var(--accent); }
.contact-level-option.selected { border-color: var(--accent); background: rgba(196,30,30,0.12); box-shadow: 0 0 14px rgba(196,30,30,0.25); }
.contact-level-option-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.contact-level-option .contact-level-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--accent); color: var(--accent); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; border-radius: var(--radius); flex-shrink: 0; }
.contact-level-option.selected .contact-level-num { background: var(--accent); color: #fff; }
.contact-level-option-title { color: var(--text-primary); font-weight: 600; font-size: 1rem; flex: 1; }
.contact-level-option .contact-level-age { display: inline-block; padding: 2px 9px; background: rgba(196,30,30,0.18); color: var(--accent); border: 1px solid rgba(196,30,30,0.5); border-radius: var(--radius); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; }
.contact-level-option .contact-level-age--hard { background: rgba(196,30,30,0.85); color: #fff; border-color: var(--accent); }
.contact-level-option-text { color: var(--text-secondary); line-height: 1.55; font-size: 0.9rem; margin: 0; }
.contact-level-option--hard { border-color: rgba(196,30,30,0.45); }
.contact-level-option--disabled { cursor: not-allowed; opacity: 0.45; filter: grayscale(0.6); }
.contact-level-option--disabled:hover { border-color: var(--border); }
.contact-level-option-lock { margin: 10px 0 0; color: var(--text-primary); font-size: 0.85rem; font-weight: 600; }

/* BOOKING: CONFIRM STEP */
.confirm-success { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: rgba(52,168,83,0.12); border: 1px solid rgba(52,168,83,0.5); border-radius: var(--radius); margin-bottom: 20px; }
.confirm-success-icon { font-size: 1.6rem; color: #34a853; flex-shrink: 0; line-height: 1; }
.confirm-success-title { font-weight: 700; color: var(--text-primary); font-size: 1.05rem; margin-bottom: 4px; }
.confirm-success-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
.confirm-contacts { display: flex; flex-direction: column; gap: 10px; }
.confirm-contact { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-weight: 500; transition: all var(--transition); text-decoration: none; }
.confirm-contact:hover { border-color: var(--accent); background: rgba(196,30,30,0.08); color: var(--accent); }
.confirm-contact-icon { font-size: 1.3rem; color: var(--accent); flex-shrink: 0; }
.confirm-contact-text { font-size: 1rem; }

/* FORMS */
.form-container { max-width: 480px; margin: 60px auto; padding: 0 20px; }
.form-card { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--border); }
.form-card h1 { font-size: 2rem; text-align: center; margin-bottom: 30px; color: var(--accent); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; }
.form-control { width: 100%; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; transition: border-color var(--transition); }
.form-control:focus { outline: none; border-color: var(--accent); }
.form-control::placeholder { color: #666; }
input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: invert(20%) sepia(60%) saturate(3000%) hue-rotate(350deg) brightness(70%); cursor: pointer; width: 24px; height: 24px; }
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23b0b0b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.form-error { color: var(--danger); font-size: 0.85rem; margin-top: 5px; }
.form-hint { color: var(--text-secondary); font-size: 0.85rem; margin-top: 5px; }
.form-submit { width: 100%; margin-top: 10px; }
.alert { padding: 15px 20px; border-radius: var(--radius); margin-bottom: 20px; font-size: 0.95rem; }
.alert-error { background: rgba(231,76,60,0.15); border: 1px solid rgba(231,76,60,0.3); color: #e74c3c; }
.alert-success { background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.3); color: #2ecc71; }
.alert-warning { background: rgba(243,156,18,0.15); border: 1px solid rgba(243,156,18,0.3); color: #f39c12; }
.ohnohoney { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }
.captcha-container { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.captcha-image { border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); }
.captcha-refresh { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: 10px; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); font-size: 1.2rem; }
.captcha-refresh:hover { border-color: var(--accent); color: var(--accent); }

/* REVIEWS */
.reviews-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.reviews-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
.review-card { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 25px; margin-bottom: 20px; border: 1px solid var(--border); }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
.review-author { font-weight: 600; font-size: 1.1rem; }
.review-quest-name { color: var(--accent); font-size: 0.9rem; }
.review-date { color: var(--text-secondary); font-size: 0.85rem; }
.review-ratings { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 8px; margin-bottom: 15px; }
.review-rating-item { display: flex; justify-content: flex-start; align-items: center; gap: 8px; font-size: 0.9rem; }
.review-rating-label { color: var(--text-secondary); }
.review-stars { color: var(--warning); letter-spacing: 2px; }
.review-text { color: var(--text-secondary); line-height: 1.7; margin-bottom: 15px; }
.review-photos { display: flex; gap: 10px; flex-wrap: wrap; }
.review-photo { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; border: 1px solid var(--border); transition: all var(--transition); }
.review-photo:hover { border-color: var(--accent); transform: scale(1.05); }
.star-rating { display: flex; flex-direction: row-reverse; gap: 5px; justify-content: flex-end; }
.star-rating input { display: none; }
.star-rating label { cursor: pointer; font-size: 1.5rem; color: #555; transition: color var(--transition); }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: var(--warning); }

/* CONTACTS */
.contacts-page { position: relative; min-height: 100vh; margin-top: -80px; padding-top: 80px; }
.contacts-page-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url('/images/fon.jpg') center/cover no-repeat; filter: brightness(0.2); z-index: 0; }
.contacts-page-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,10,10,0.7); z-index: 0; }
.contacts-container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.contact-card { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%); border-radius: var(--radius-lg); padding: 30px; border: 1px solid var(--border); transition: all var(--transition); display: flex; flex-direction: column; }
.contact-card:hover { border-color: rgba(196,30,30,0.4); }
.contact-card h3 { font-family: var(--font-body); font-size: 1.2rem; margin-bottom: 18px; color: var(--accent); font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.contact-info-item { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--text-secondary); line-height: 1.5; }
.contact-card-divider { border-top: 1px dashed var(--border); margin-top: auto; padding-top: 18px; margin-bottom: 14px; }
.contact-info-icon { font-size: 1.2rem; flex-shrink: 0; }
.contact-svg-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-secondary); }
.contacts-map { margin-top: 40px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); height: 400px; }
.contacts-map iframe { width: 100%; height: 100%; border: none; }

/* ADMIN */
.admin-container { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 20px; margin-bottom: 40px; }
.admin-stat { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 25px; text-align: center; border: 1px solid var(--border); }
.admin-stat-value { font-size: 2.5rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 8px; }
.admin-stat-label { color: var(--text-secondary); font-size: 0.9rem; }
.admin-nav { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.admin-nav a { padding: 10px 20px; border-radius: var(--radius); background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); font-weight: 500; transition: all var(--transition); }
.admin-nav a:hover, .admin-nav a.active { color: var(--text-primary); border-color: var(--accent); background: rgba(196,30,30,0.1); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--bg-secondary); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.admin-table th, .admin-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.admin-table th { background: var(--bg-card); color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-table td { font-size: 0.95rem; color: var(--text-primary); }
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.status-pending { background: rgba(243,156,18,0.15); color: var(--warning); border: 1px solid rgba(243,156,18,0.3); }
.status-confirmed { background: rgba(46,204,113,0.15); color: var(--success); border: 1px solid rgba(46,204,113,0.3); }
.status-rejected { background: rgba(231,76,60,0.15); color: var(--danger); border: 1px solid rgba(231,76,60,0.3); }
.admin-actions { display: flex; gap: 8px; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.admin-pagination-info { color: var(--text-secondary); font-size: 0.9rem; }
.admin-pagination-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-pagination-nav .btn { min-width: 36px; text-align: center; }
.admin-pagination-nav .btn.disabled { opacity: 0.4; pointer-events: none; }
.admin-pagination-ellipsis { color: var(--text-secondary); padding: 0 4px; }
/* Тёмный фон для нативного dropdown'а в админке (иначе на белом фоне ОС текст невидим). */
.admin-table select option,
.admin-container select option { background: #1a1a1a; color: #f5f5f5; }
@media (max-width: 600px) {
    .admin-pagination { flex-direction: column; align-items: stretch; }
    .admin-pagination-nav { justify-content: center; }
}

/* ===== METRICS (адаптивные метрики) ===== */
.metrics-period { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.metrics-period a {
    padding: 8px 18px; border-radius: var(--radius); background: var(--bg-secondary);
    border: 1px solid var(--border); color: var(--text-secondary); font-weight: 500;
    text-decoration: none; transition: all var(--transition);
}
.metrics-period a:hover { border-color: var(--accent); color: var(--text-primary); }
.metrics-period a.active { border-color: var(--accent); color: var(--text-primary); }

.metrics-month-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; flex-wrap: wrap; }
.metrics-month-nav a, .metrics-month-nav span.btn-disabled {
    padding: 6px 14px; border-radius: var(--radius); background: var(--bg-secondary);
    border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none;
    font-weight: 500; transition: all var(--transition); white-space: nowrap;
}
.metrics-month-nav a:hover { border-color: var(--accent); color: var(--text-primary); }
.metrics-month-nav span.btn-disabled { opacity: 0.5; cursor: default; }
.metrics-month-hint { font-size: 0.85rem; color: var(--text-secondary); }

.metrics-chart-box {
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px; margin-bottom: 40px; position: relative;
}
.metrics-chart-box canvas { width: 100% !important; }

.metrics-note {
    color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px; line-height: 1.6;
}

.metrics-source-layout { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.metrics-source-chart {
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 20px; flex: 0 0 300px; min-width: 250px;
}
.metrics-source-chart canvas { width: 100% !important; }
.metrics-source-table { flex: 1; min-width: 300px; }

.metrics-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.metrics-scroll table { margin-bottom: 0; }

.metrics-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 40px; }
.metrics-table { min-width: 0 !important; }
.metrics-table th, .metrics-table td { white-space: normal; }

@media (max-width: 768px) {
    .metrics-source-layout { flex-direction: column; }
    .metrics-source-chart { flex: 1 1 auto; min-width: 0; }
    .metrics-source-table { min-width: 0; width: 100%; }
    .metrics-chart-box { padding: 12px; }
    .metrics-source-chart { padding: 12px; }
    .metrics-box { padding: 14px; }
}
@media (max-width: 480px) {
    .metrics-period { gap: 8px; }
    .metrics-period a { padding: 7px 12px; font-size: 0.85rem; }
    .metrics-month-nav { gap: 8px; }
    .metrics-month-nav a, .metrics-month-nav span.btn-disabled { padding: 6px 10px; font-size: 0.85rem; }
}


/* ERROR PAGE */
.error-page { text-align: center; padding: 100px 20px; }
.error-page h1 { font-size: 3rem; color: var(--accent); margin-bottom: 20px; }
.error-page p { color: var(--text-secondary); font-size: 1.2rem; margin-bottom: 30px; }

/* FOOTER */
.footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 50px 0 20px; margin-top: 60px; position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 30px; margin-bottom: 30px; }
.footer-logo-img { height: 48px; width: auto; display: block; margin-bottom: 15px; filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)) drop-shadow(0 0 14px rgba(210,230,255,0.25)); animation: qqLogoFadeIn 3.5s ease-in-out 0.5s both; }
.footer-desc { color: var(--text-secondary); font-size: 0.9rem; }
.footer-col h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 15px; color: var(--text-primary); }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--text-secondary); font-size: 0.9rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
.footer-bottom p { margin: 0 0 8px; }
/* Резервный адрес (латинское имя на том же сервере) — на случай блокировки основного домена. */
.footer-fallback { font-size: 0.8rem; opacity: 0.75; }
.footer-fallback a { color: inherit; text-decoration: underline; }

/* CAROUSEL (quest cards on home page) */
/* ANIMATED QUEST CARD IMAGE — one photo, unique atmosphere on hover */
.quest-anim { position: relative; display: block; width: 100%; height: 300px; overflow: hidden; cursor: pointer; background: #000; }
.quest-anim-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; will-change: transform, filter; }
.quest-anim-fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.quest-anim:hover .quest-anim-fx { opacity: 1; }
.quest-anim:hover .quest-anim-img { animation: qaZoomPan 8s ease-in-out infinite alternate; }
@keyframes qaZoomPan {
    0%   { transform: scale(1) translate(0,0); }
    50%  { transform: scale(1.08) translate(-1%, 1%); }
    100% { transform: scale(1.14) translate(1%, -1%); }
}
/* Вертикальная обложка (WHOLE_COVERS в routes/index.js): кадр целиком по центру, по бокам — его размытая копия.
   Приближение карточки (qaZoomPan и др.) у неё выключено: !important сильнее анимации, а фильтры атмосферы
   квеста (qaCold и т. п.) продолжают работать. */
.quest-anim-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(0.45) saturate(1.2); transform: scale(1.2); }
.quest-anim-img--whole { object-fit: contain; transform: none !important; }

/* Плавное проявление логотипа на загрузке страницы */
@keyframes qqLogoFadeIn {
    0%   { opacity: 0; }
    30%  { opacity: 0.08; }
    60%  { opacity: 0.45; }
    100% { opacity: 1; }
}

/* Дом Ада — дыхание демона (zoom + затемнение/просветление) + ТВ-помехи */
.quest-anim--dom-ada .quest-anim-fx {
    background:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.08) 0 1px,
            rgba(0,0,0,0.08) 1px 2px),
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.04) 0 1px,
            transparent 1px 3px);
    mix-blend-mode: screen;
    opacity: 0;
}
.quest-anim--dom-ada:hover .quest-anim-fx {
    animation: qaTvStatic 5s steps(50, end) infinite;
}
.quest-anim--dom-ada:hover .quest-anim-img {
    animation: qaDomBreath 5s ease-in-out infinite;
}
@keyframes qaDomBreath {
    /* медленный выдох -> медленный вдох -> резкий "вдох" с глитчем -> выдох */
    0%   { transform: scale(1);     filter: brightness(0.65) contrast(1); }
    35%  { transform: scale(1.07);  filter: brightness(1.12) contrast(1.05); }
    /* глитч-вспышка 1 (помехи) */
    37%  { transform: scale(1.075) translateX(-2px); filter: brightness(1.9) contrast(1.6) grayscale(0.8); }
    38%  { transform: scale(1.07)  translateX(2px);  filter: brightness(0.3) contrast(1.4) grayscale(0.6); }
    39%  { transform: scale(1.075) translateX(-1px); filter: brightness(1.6) grayscale(0.9); }
    40%  { transform: scale(1.07);  filter: brightness(1.1); }
    /* короткий повторный "вдох" */
    48%  { transform: scale(1.08);  filter: brightness(1.2);  }
    55%  { transform: scale(1.075); filter: brightness(1.1);  }
    /* глитч-вспышка 2 */
    72%  { transform: scale(1.065) translateY(2px);  filter: brightness(1.8) grayscale(0.85) contrast(1.5); }
    73%  { transform: scale(1.07)  translateY(-1px); filter: brightness(0.45) grayscale(0.7) contrast(1.3); }
    74%  { transform: scale(1.065); filter: brightness(1.1); }
    /* выдох в темноту */
    100% { transform: scale(1);     filter: brightness(0.65) contrast(1); }
}
@keyframes qaTvStatic {
    0%, 34%, 41%, 71%, 75%, 100% { opacity: 0.12; transform: translateY(0); }
    37%      { opacity: 0.9;  transform: translateY(-1px); }
    38%      { opacity: 0.95; transform: translateY(2px); }
    39%      { opacity: 0.85; transform: translateY(-2px); }
    40%      { opacity: 0.4;  transform: translateY(1px); }
    72%      { opacity: 0.9;  transform: translateY(1px); }
    73%      { opacity: 1;    transform: translateY(-2px); }
    74%      { opacity: 0.7;  transform: translateY(2px); }
}

/* Ужас Семьи Аргайл — холод, обесцвечивание, резкие блэкауты */
.quest-anim--uzhas-semyi-argayl .quest-anim-fx {
    background: #000;
    opacity: 0;
}
.quest-anim--uzhas-semyi-argayl:hover .quest-anim-img {
    animation: qaZoomPan 8s ease-in-out infinite alternate, qaCold 3.6s ease-in-out infinite alternate;
}
.quest-anim--uzhas-semyi-argayl:hover .quest-anim-fx { animation: qaBlackout 4.2s steps(1,end) infinite; }
@keyframes qaCold {
    0%   { filter: saturate(1)    brightness(1)    contrast(1);    }
    50%  { filter: saturate(0.2)  brightness(0.6)  contrast(1.3);  }
    100% { filter: saturate(0.75) brightness(0.95) contrast(1.08); }
}
@keyframes qaBlackout {
    0%, 87%        { opacity: 0; }
    88%, 89%       { opacity: 1; }
    90%            { opacity: 0; }
    93%, 94%       { opacity: 1; }
    95%, 100%      { opacity: 0; }
}

/* Проклятая Церковь — молитва (тёплое золото) срывается в ледяную кару и возвращается */
.quest-anim--proklyataya-tserkov .quest-anim-fx {
    background: transparent;
    mix-blend-mode: normal;
}
/* Тёплое золотистое свечение из центра — молитва */
.quest-anim--proklyataya-tserkov .quest-anim-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 55%,
        rgba(255,220,120,0.85) 0%,
        rgba(255,180,60,0.5)   28%,
        rgba(200,120,30,0.22)  55%,
        transparent            82%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(3px);
    pointer-events: none;
}
.quest-anim--proklyataya-tserkov:hover .quest-anim-fx::before {
    animation: qaPrayerWarm 7s ease-in-out infinite;
}
/* Ледяная синяя вспышка — кара сверху */
.quest-anim--proklyataya-tserkov .quest-anim-fx::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(180,225,255,0.95) 0%,
            rgba(120,185,235,0.6)  30%,
            rgba(80,140,200,0.25)  55%,
            transparent            90%),
        radial-gradient(ellipse 75% 45% at 50% 30%,
            rgba(210,235,255,0.55), transparent 75%);
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateY(-35%);
    filter: blur(2px);
    pointer-events: none;
}
.quest-anim--proklyataya-tserkov:hover .quest-anim-fx::after {
    animation: qaColdStrike 7s ease-in-out infinite;
}
/* aux не используется в этом эффекте */
.quest-anim--proklyataya-tserkov .quest-anim-fx-aux { display: none; }

.quest-anim--proklyataya-tserkov:hover .quest-anim-img {
    animation: qaZoomPan 8s ease-in-out infinite alternate, qaChurchLight 7s ease-in-out infinite;
}

/* Лечебница — групповой кадр: якорим к верху, чтобы не срезать головы object-fit:cover */
.quest-anim--lechebnitsa .quest-anim-img {
    object-position: center 8%;
}
.quest-anim--lechebnitsa .quest-anim-fx {
    background: transparent;
    mix-blend-mode: normal;
}

/* Высоковольтный электрический разряд и аварийная красная сигнализация палаты */
.quest-anim--lechebnitsa .quest-anim-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 30% 40%, rgba(0, 220, 255, 0.7) 0%, transparent 60%),
        radial-gradient(ellipse 65% 55% at 75% 65%, rgba(220, 20, 20, 0.75) 0%, transparent 65%),
        radial-gradient(circle at 50% 50%, rgba(100, 240, 255, 0.35) 0%, rgba(180, 0, 0, 0.25) 50%, transparent 85%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}
.quest-anim--lechebnitsa:hover .quest-anim-fx::before {
    animation: qaAsylumPulse 5s ease-in-out infinite;
}

/* Медицинское сканирование ECG и сканирующая сетка */
.quest-anim--lechebnitsa .quest-anim-fx::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(0, 240, 255, 0.12) 47%,
            rgba(255, 30, 30, 0.75) 50%,
            rgba(0, 240, 255, 0.12) 53%,
            transparent 100%),
        repeating-linear-gradient(0deg,
            rgba(0, 255, 200, 0.05) 0 1px,
            transparent 1px 4px);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}
.quest-anim--lechebnitsa:hover .quest-anim-fx::after {
    animation: qaEcgScan 4s linear infinite;
}

.quest-anim--lechebnitsa:hover .quest-anim-img {
    animation: qaZoomPan 8s ease-in-out infinite alternate, qaAsylumShock 5s ease-in-out infinite;
}

@keyframes qaAsylumPulse {
    0%   { opacity: 0.1; transform: scale(0.96); }
    25%  { opacity: 0.5; transform: scale(1.02); }
    48%  { opacity: 0.3; transform: scale(0.98); }
    /* Разряд электрошока */
    50%  { opacity: 1; transform: scale(1.12) rotate(0.4deg); }
    52%  { opacity: 0.15; transform: scale(0.95) rotate(-0.4deg); }
    54%  { opacity: 0.95; transform: scale(1.07); }
    56%  { opacity: 0.25; transform: scale(1); }
    75%  { opacity: 0.6; transform: scale(1.04); }
    100% { opacity: 0.1; transform: scale(0.96); }
}

@keyframes qaEcgScan {
    0%   { opacity: 0.15; transform: translateY(-100%); }
    50%  { opacity: 0.75; transform: translateY(0%); }
    100% { opacity: 0.15; transform: translateY(100%); }
}

@keyframes qaAsylumShock {
    0%   { filter: brightness(0.9) contrast(1.05) hue-rotate(0deg); }
    30%  { filter: brightness(1.1) contrast(1.2) sepia(0.2) hue-rotate(-15deg); }
    48%  { filter: brightness(0.95) contrast(1.3) hue-rotate(-20deg); }
    /* Электрошок: тремор кадра + вспышка высоковольтного тока */
    50%  { transform: scale(1.1) translate(-3px, 2px); filter: brightness(2.3) contrast(1.9) grayscale(0.85) hue-rotate(140deg); }
    51%  { transform: scale(1.07) translate(3px, -2px); filter: brightness(0.25) contrast(2) grayscale(0.5); }
    52%  { transform: scale(1.11) translate(-2px, -1px); filter: brightness(1.9) contrast(1.6) hue-rotate(-30deg); }
    53%  { transform: scale(1.08) translate(2px, 1px); filter: brightness(0.4) contrast(1.4); }
    55%  { transform: scale(1.06); filter: brightness(1.15) contrast(1.2); }
    80%  { filter: brightness(1.05) contrast(1.1) sepia(0.15) hue-rotate(-10deg); }
    100% { filter: brightness(0.9) contrast(1.05) hue-rotate(0deg); }
}

@keyframes qaPrayerWarm {
    0%   { opacity: 0.12; transform: scale(0.5); }
    20%  { opacity: 0.5;  transform: scale(0.9); }
    35%  { opacity: 0.85; transform: scale(1.1); }
    42%  { opacity: 1;    transform: scale(1.22); }
    46%  { opacity: 0.4;  transform: scale(1.05); }  /* срывается */
    54%  { opacity: 0;    transform: scale(0.75); }  /* погашен синей вспышкой */
    68%  { opacity: 0.2;  transform: scale(0.75); }
    80%  { opacity: 0.5;  transform: scale(1);    }  /* тёплое возвращается */
    92%  { opacity: 0.35; transform: scale(0.9);  }
    100% { opacity: 0.12; transform: scale(0.5);  }
}
@keyframes qaColdStrike {
    0%, 43%   { opacity: 0;    transform: translateY(-40%); }
    46%       { opacity: 0.9;  transform: translateY(-12%); }  /* вспышка */
    50%       { opacity: 1;    transform: translateY(0%);   }
    54%       { opacity: 0.85; transform: translateY(6%);   }
    60%       { opacity: 0.45; transform: translateY(14%);  }
    68%       { opacity: 0.12; transform: translateY(20%);  }
    72%, 100% { opacity: 0;    transform: translateY(28%);  }
}
@keyframes qaChurchLight {
    0%   { filter: brightness(0.85) saturate(1)   hue-rotate(0deg); }
    42%  { filter: brightness(1.2)  saturate(1.25) sepia(0.18) hue-rotate(-5deg); }
    50%  { filter: brightness(1.35) saturate(1.3)  hue-rotate(-25deg); }
    54%  { filter: brightness(1.15) saturate(1.15) hue-rotate(-12deg); }
    75%  { filter: brightness(1)    saturate(1.05); }
    100% { filter: brightness(0.85) saturate(1)   hue-rotate(0deg); }
}

/* Mobile / touch devices: run card animations automatically (no :hover) */
@media (hover: none) {
    .quest-anim .quest-anim-fx { opacity: 1; }
    .quest-anim .quest-anim-img { animation: qaZoomPan 8s ease-in-out infinite alternate; }
    .quest-anim--dom-ada .quest-anim-fx { animation: qaTvStatic 5s steps(50, end) infinite; }
    .quest-anim--dom-ada .quest-anim-img { animation: qaDomBreath 5s ease-in-out infinite; }
    .quest-anim--uzhas-semyi-argayl .quest-anim-img { animation: qaZoomPan 8s ease-in-out infinite alternate, qaCold 3.6s ease-in-out infinite alternate; }
    .quest-anim--uzhas-semyi-argayl .quest-anim-fx { animation: qaBlackout 4.2s steps(1,end) infinite; }
    .quest-anim--proklyataya-tserkov .quest-anim-fx::before { animation: qaPrayerWarm 7s ease-in-out infinite; }
    .quest-anim--proklyataya-tserkov .quest-anim-fx::after { animation: qaColdStrike 7s ease-in-out infinite; }
    .quest-anim--proklyataya-tserkov .quest-anim-img { animation: qaZoomPan 8s ease-in-out infinite alternate, qaChurchLight 7s ease-in-out infinite; }
    .quest-anim--lechebnitsa .quest-anim-fx::before { animation: qaAsylumPulse 5s ease-in-out infinite; }
    .quest-anim--lechebnitsa .quest-anim-fx::after { animation: qaEcgScan 4s linear infinite; }
    .quest-anim--lechebnitsa .quest-anim-img { animation: qaZoomPan 8s ease-in-out infinite alternate, qaAsylumShock 5s ease-in-out infinite; object-position: center 8%; }
}

/* QUEST LEGEND + FEATURES + CONTACT LEVELS */
.quest-legend { max-width: 800px; margin: 0 auto 40px; padding: 30px 32px; background: linear-gradient(180deg, rgba(196,30,30,0.08), rgba(10,10,10,0.55)); border: 1px solid rgba(196,30,30,0.35); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); position: relative; }
.quest-legend-label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.25em; color: var(--accent); font-size: 0.85rem; margin-bottom: 14px; }
.quest-legend-body { color: var(--text-primary); line-height: 1.75; white-space: pre-line; font-size: 1.05rem; }

.quest-features { max-width: 800px; margin: 0 auto 40px; padding: 28px 32px; background: rgba(10,10,10,0.55); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.quest-features-title { font-family: var(--font-heading); color: var(--accent); font-size: 1.3rem; margin: 0 0 18px; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; }
.quest-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.quest-features-list li { position: relative; padding-left: 28px; color: var(--text-secondary); line-height: 1.6; font-size: 1rem; }
.quest-features-list li::before { content: '▸'; position: absolute; left: 8px; top: 0; color: var(--accent); font-size: 1rem; line-height: 1.6; }
.quest-features-sep { color: var(--accent); margin-left: 2px; font-weight: 700; }

.quest-age-wrap { max-width: 800px; margin: 0 auto 40px; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.quest-age-label { color: var(--text-secondary); font-size: 1rem; }
.quest-age-badge { display: inline-block; padding: 6px 16px; background: var(--accent); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.1em; border-radius: var(--radius); box-shadow: 0 0 18px rgba(196,30,30,0.55); }

.contact-levels { max-width: 1100px; margin: 0 auto 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.contact-level { position: relative; background: rgba(10,10,10,0.7); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 24px 22px; transition: border-color var(--transition), transform var(--transition); }
.contact-level:hover { border-color: var(--accent); transform: translateY(-3px); }
.contact-level-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.contact-level-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 2px solid var(--accent); color: var(--accent); font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; border-radius: var(--radius); flex-shrink: 0; }
.contact-level-title { color: var(--text-primary); font-weight: 600; font-size: 1.05rem; flex: 1; }
.contact-level-age { display: inline-block; padding: 3px 10px; background: rgba(196,30,30,0.18); color: var(--accent); border: 1px solid rgba(196,30,30,0.5); border-radius: var(--radius); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; }
.contact-level-age--hard { background: rgba(196,30,30,0.85); color: #fff; border-color: var(--accent); box-shadow: 0 0 14px rgba(196,30,30,0.6); }
.contact-level-text { color: var(--text-secondary); line-height: 1.65; font-size: 0.95rem; margin: 0; }
.contact-level--hard { border-color: rgba(196,30,30,0.55); background: linear-gradient(180deg, rgba(196,30,30,0.12), rgba(10,10,10,0.7)); box-shadow: 0 0 24px rgba(196,30,30,0.15); }
.contact-level--hard .contact-level-num { background: var(--accent); color: #fff; box-shadow: 0 0 16px rgba(196,30,30,0.6); }

/* SLIDER (quest detail page) */
.slider { max-width: 900px; margin: 0 auto 30px; }
.slider-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
.slider-viewport { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.slider-image { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.3s ease; background: #0a0a0a; }
.slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.6); color: #fff; border: none; padding: 12px 16px; cursor: pointer; font-size: 1.5rem; z-index: 2; border-radius: var(--radius); transition: background var(--transition); }
.slider-prev:hover, .slider-next:hover { background: rgba(196,30,30,0.8); }
.slider-prev { left: 10px; }
.slider-next { right: 10px; }
.slider-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 5px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.slider-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius); cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition); flex-shrink: 0; opacity: 0.6; }
.slider-thumb.active { border-color: var(--accent); opacity: 1; }
.slider-thumb:hover { opacity: 1; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hero h1 { font-size: 3rem; }
    .quests-grid { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
}

/* Гамбургер-меню. Порог 1239px, а не 768px: строка шапки (логотип + пункты, у админа ещё
   колокольчик и ник) шире планшета, и на планшетах пункты уезжали за правый край экрана. */
@media (max-width: 1239px) {
    .nav-toggle { display: flex; }
    .nav-menu { display: none; position: absolute; top: 70px; left: 0; right: 0; background: rgba(10,10,10,0.98); flex-direction: column; padding: 20px; gap: 12px; border-bottom: 1px solid var(--border); max-height: calc(100vh - 70px); overflow-y: auto; overscroll-behavior: contain; }
    .nav-menu.active { display: flex; }
    .nav-menu li { list-style: none; }
    .nav-menu a { padding: 12px 16px; display: block; }
    .nav-btn { width: 100%; text-align: center; display: block !important; padding: 12px 20px !important; }
    .nav-user { flex-direction: column; align-items: stretch; gap: 12px; padding: 5px 0; }
    .nav-username { max-width: none; }

    /* FX toggles inside hamburger */
    .fx-toggle-item { padding: 10px 16px; border-bottom: 1px solid var(--border); }
    .fx-toggle-item:last-of-type { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
    .fx-toggle-row { justify-content: space-between; padding: 0; }
    .fx-toggle { font-size: 0.95rem; flex: 1; }
    .fx-hint { position: static; width: 100%; max-width: none; margin-top: 10px; }
}

@media (max-width: 768px) {
    /* Hero */
    .hero h1 { font-size: 2.4rem; }
    .hero p { font-size: 1.1rem; }
    .hero-logo { width: 150px; height: 150px; }

    /* Sections */
    .section { padding: 50px 0; }
    .section-title { font-size: 1.8rem; margin-bottom: 30px; }

    /* Quest */
    .quest-hero { height: 300px; }
    .quest-hero h1 { font-size: 2rem; }
    .quest-hero-content { padding: 20px; }
    .quest-legend { padding: 22px 20px; }
    .quest-features { padding: 20px 18px; }
    .contact-levels { grid-template-columns: 1fr; gap: 14px; }
    .contact-level { padding: 20px 18px; }
    .quests-grid { grid-template-columns: 1fr; }
    .quest-card-img { height: 200px; }

    /* Booking */
    .booking-container { padding: 30px 15px; }
    .booking-container h1 { font-size: 2rem; margin-bottom: 25px; }
    .booking-step { padding: 20px; }
    .time-slots { grid-template-columns: repeat(2,1fr); }
    .contact-methods { grid-template-columns: 1fr; }
    .contact-method { padding: 20px 15px; min-height: 44px; }

    /* Calendar */
    .calendar-nav { padding: 6px 10px; font-size: 0.9rem; }

    /* Forms */
    .form-container { margin: 40px auto; }
    .form-card { padding: 25px; }

    /* Reviews */
    .reviews-container { padding: 30px 15px; }
    .review-ratings { grid-template-columns: 1fr; }

    /* Contacts */
    .contacts-grid { grid-template-columns: 1fr; }
    .contacts-map { height: 300px; }

    /* Admin */
    .admin-container { padding: 30px 10px; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .admin-table { font-size: 0.8rem; min-width: 900px; }
    .admin-table th, .admin-table td { padding: 8px 6px; white-space: nowrap; }
    .admin-actions { flex-wrap: nowrap; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; }

    /* Lightbox */
    .lightbox-prev, .lightbox-next { padding: 25px 12px; font-size: 2.5rem; }
    .lightbox-close { top: 15px; right: 15px; font-size: 2rem; padding: 10px; }

    /* Carousel / Slider */
    .quest-anim { height: 200px; }
    .slider-prev, .slider-next { padding: 8px 12px; font-size: 1.2rem; }
    .slider-thumb { width: 60px; height: 45px; }
}

@media (max-width: 480px) {
    /* Nav */
    .nav-logo-img { height: 34px; }
    .hero-logo-img { max-width: 90%; }

    /* Hero */
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; margin-bottom: 20px; }
    .hero-logo { width: 120px; height: 120px; }
    .hero-phone { font-size: 1.2rem; }

    /* Sections */
    .section { padding: 40px 0; }
    .section-title { font-size: 1.5rem; margin-bottom: 25px; }

    /* Quest */
    .quest-hero { height: 250px; }
    .quest-hero h1 { font-size: 1.6rem; }

    /* Gallery */
    .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* Calendar */
    .calendar-weekdays, .calendar-days { gap: 3px; }
    .calendar-weekday { font-size: 0.7rem; padding: 5px 0; }
    .calendar-day { padding: 7px 4px; font-size: 0.8rem; }
    .calendar-header h4 { font-size: 0.95rem; }

    /* Booking */
    .booking-container { padding: 20px 10px; }
    .booking-container h1 { font-size: 1.6rem; margin-bottom: 20px; }
    .booking-step { padding: 15px; margin-bottom: 15px; }
    .time-slots { grid-template-columns: 1fr 1fr; gap: 8px; }
    .time-slot { padding: 12px 8px; font-size: 1rem; }

    /* Forms */
    .form-container { margin: 20px auto; padding: 0 10px; }
    .form-card { padding: 20px; }
    .form-group { margin-bottom: 16px; }
    .captcha-container { flex-wrap: wrap; gap: 10px; }

    /* Reviews */
    .reviews-container { padding: 20px 10px; }
    .review-card { padding: 18px; }
    .review-photos { gap: 6px; }
    .review-photo { width: 90px; height: 68px; }
    .star-rating label { font-size: 1.8rem; }

    /* Contacts */
    .contacts-container { padding: 30px 10px; }
    .contacts-map { height: 250px; }
    .contact-card { padding: 20px; }

    /* Admin */
    .admin-container { padding: 20px 8px; }
    .admin-stats { grid-template-columns: 1fr; gap: 12px; }
    .admin-stat { padding: 18px; }
    .admin-stat-value { font-size: 2rem; }
    .admin-nav { gap: 6px; }
    .admin-nav a { padding: 8px 14px; font-size: 0.85rem; }
    .admin-table { font-size: 0.7rem; min-width: 820px; }
    .admin-table th, .admin-table td { padding: 6px 4px; white-space: nowrap; }
    .btn-sm { padding: 5px 10px; font-size: 0.75rem; }

    /* Footer */
    .footer { padding: 30px 0 15px; margin-top: 40px; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-bottom { font-size: 0.8rem; }

    /* Lightbox */
    .lightbox-prev, .lightbox-next { padding: 30px 10px; font-size: 2rem; }
    .lightbox-close { font-size: 1.8rem; top: 10px; right: 15px; }
    .lightbox img { max-width: 95vw; max-height: 85vh; }

    /* Error */
    .error-page { padding: 60px 15px; }
    .error-page h1 { font-size: 2rem; }
    .error-page p { font-size: 1rem; }

    /* Carousel / Slider */
    .quest-anim { height: 180px; }
    .slider-thumb { width: 50px; height: 38px; }
}

@media (max-width: 360px) {
    .calendar-day { padding: 5px 2px; font-size: 0.75rem; }
    .time-slots { grid-template-columns: 1fr; }
    .hero h1 { font-size: 1.5rem; }
    .booking-container h1 { font-size: 1.4rem; }
    .admin-table { min-width: 780px; }
    .admin-table th, .admin-table td { padding: 4px 3px; font-size: 0.65rem; white-space: nowrap; }
}

/* ==================== KIDS MODE ==================== */
body.kids-mode {
    --accent: #ff8c42;
    --accent-hover: #ffa366;
    --accent-dark: #cc6d2e;
    --shadow-accent: 0 4px 20px rgba(255,140,66,0.35);
}
body.kids-mode .nav-kids { color: #ffd166 !important; font-weight: 600; }
body.kids-mode .nav-admin { color: var(--accent) !important; }

/* Kids landing hero — яркий цветной фон */
.kids-home { position: relative; min-height: 80vh; overflow-x: hidden; }
.kids-bg {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -2;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(255,140,66,0.32), transparent 55%),
        radial-gradient(ellipse at 80% 30%, rgba(155,89,182,0.32), transparent 55%),
        radial-gradient(ellipse at 50% 90%, rgba(26,188,156,0.25), transparent 60%),
        linear-gradient(135deg, #150b18 0%, #0a0f15 100%);
}
.kids-bg-overlay {
    position: fixed; inset: 0; z-index: -1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.9;
}
.kids-bg-overlay::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background-image: url('/images/kids-doodles.svg');
    background-repeat: repeat;
    background-size: 360px 360px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation: kidsDoodlesDrift 90s linear infinite;
}
@keyframes kidsDoodlesDrift {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-360px, -360px, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .kids-bg-overlay::before { animation: none; }
}
.kids-hero { padding: 80px 20px 40px; text-align: center; }
.kids-title {
    font-family: var(--font-logo);
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 4px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffd166 0%, #ff8c42 40%, #ef476f 75%, #9b59b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 24px rgba(255,140,66,0.45));
    animation: qqLogoFadeIn 1.4s ease-out both;
}
.kids-subtitle {
    color: #ffd8b5;
    font-size: 1.3rem;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.kids-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(255,140,66,0.15);
    border: 1px solid rgba(255,140,66,0.45);
    border-radius: 999px;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 30px;
    max-width: 540px;
}
.kids-info-icon { font-size: 1.3rem; }
.kids-section-title {
    background: linear-gradient(90deg, #ffd166, #ff8c42, #ef476f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* Kids notice block — info "10+ лет, сопровождение" */
.kids-notice {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 24px 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,140,66,0.35);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.kids-notice-row {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #f0f0f0;
    font-size: 1rem;
    line-height: 1.5;
}
.kids-notice-icon { font-size: 1.4rem; flex-shrink: 0; }

/* Kids quest card — цветная рамка, bounce при hover */
.kids-card {
    border: 2px solid rgba(255,140,66,0.3);
    border-radius: var(--radius-lg);
    background: rgba(20,15,25,0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}
.kids-card:hover {
    transform: translateY(-6px) rotate(-0.3deg);
    border-color: var(--accent);
    box-shadow: 0 10px 28px rgba(255,140,66,0.35), 0 0 40px rgba(239,71,111,0.2);
}
.kids-card-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease, filter 0.4s ease;
}
.kids-card:hover .kids-card-img {
    transform: scale(1.08);
    filter: saturate(1.25) brightness(1.05);
}
/* Лечебница — групповой кадр: не срезать головы на карточке KIDS */
.kids-card--lechebnitsa .kids-card-img {
    object-position: center 8%;
}
.kids-card--lechebnitsa:hover .kids-card-img {
    transform: scale(1.04);
}
.kids-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, #ffd166, #ff8c42);
    color: #1a0f20;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(255,140,66,0.5);
    letter-spacing: 1px;
}
.kids-card-subtitle {
    color: #ffd166;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
.kids-card-tag {
    color: #ffd166;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Kids quest detail page */
.kids-quest-page .quest-page-bg { filter: saturate(1.15) brightness(0.9); }
.kids-quest-overlay { background: rgba(20,15,25,0.72) !important; }
.kids-quest-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd166, #ff8c42);
    color: #1a0f20;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(255,140,66,0.45);
}
.kids-quest-subtitle {
    color: #ffd166;
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: 6px;
}
.kids-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 50px;
}
.kids-photo-item {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255,140,66,0.25);
    aspect-ratio: 4/3;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.kids-photo-item:hover { transform: scale(1.03); border-color: var(--accent); }
.kids-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kids-price-table { background: rgba(255,140,66,0.08); border: 1px solid rgba(255,140,66,0.3); border-radius: var(--radius-lg); padding: 20px; }
.kids-price-table .price-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(255,140,66,0.25); color: #eee; }
.kids-price-table .price-row:last-child { border-bottom: none; }
.kids-price-table .price-extra { color: #ffd166; font-weight: 600; }
.kids-price-table .price-value { font-weight: 700; color: #ffd166; }

/* Kids button */
.btn-kids {
    background: linear-gradient(135deg, #ff8c42 0%, #ef476f 100%);
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 16px rgba(255,140,66,0.4);
    transition: all 0.3s ease;
}
.btn-kids:hover {
    background: linear-gradient(135deg, #ffa366 0%, #ff6b8b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,140,66,0.55);
    color: #fff !important;
}
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }
.btn-sm { padding: 8px 18px; font-size: 0.9rem; }

@media (max-width: 768px) {
    .kids-title { font-size: 4rem; }
    .kids-subtitle { font-size: 1.1rem; }
    .kids-info-pill { font-size: 0.88rem; padding: 10px 16px; }
    .kids-card-img { height: 200px; }
    .kids-notice { padding: 18px; }
    .kids-notice-row { font-size: 0.92rem; gap: 10px; }
}
@media (max-width: 480px) {
    .kids-title { font-size: 3rem; }
}

/* Booking mode switch (adult vs kids) */
.booking-mode-switch { margin-bottom: 30px; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-tab {
    padding: 16px 18px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}
.mode-tab:hover { border-color: var(--border-light); }
.mode-tab.selected { border-color: var(--accent); background: rgba(196,30,30,0.08); }
.mode-tab[data-mode="kids"].selected { border-color: #ff8c42; background: rgba(255,140,66,0.1); }
.mode-tab-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; color: var(--text-primary); }
.mode-tab-desc { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.4; }

/* Kids accompanying actor info block */
/* Инфо-блок про актёров на форме брони (взрослая и спец.версия): выбора нет,
   три актёра включены в стоимость. Детский вариант — .kids-actor-* ниже, в оранжевой
   палитре KIDS; здесь берём акцентный цвет темы, поэтому в spec-mode блок краснеет сам. */
.actor-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(196,30,30,0.08);
    border: 1px solid rgba(196,30,30,0.4);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
}
.actor-info-icon { font-size: 2rem; flex-shrink: 0; }
.actor-info-title { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.actor-info-desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.4; }

.kids-actor-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: rgba(255,140,66,0.08);
    border: 1px solid rgba(255,140,66,0.4);
    border-left: 4px solid #ff8c42;
    border-radius: var(--radius);
}
.kids-actor-icon { font-size: 2rem; flex-shrink: 0; }
.kids-actor-title { font-weight: 700; color: #ffd166; margin-bottom: 4px; }
.kids-actor-desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.4; }

@media (max-width: 480px) {
    .mode-tabs { grid-template-columns: 1fr; }
}

/* ========= SPEC.VERSION THEME ========= */
body.spec-mode {
    --accent: #8b0000;
}

.spec-bg-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 30%, rgba(139, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 65%);
}

.spec-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    letter-spacing: 0.12em;
    color: #f2e3c6;
    text-shadow: 0 0 18px rgba(196, 0, 26, 0.6), 0 2px 4px #000;
    margin-bottom: 12px;
}

.spec-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 24px;
}

.spec-card {
    border: 1px solid rgba(139, 0, 0, 0.45);
    background: linear-gradient(180deg, rgba(25, 5, 8, 0.85) 0%, rgba(10, 10, 10, 0.9) 100%);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.spec-card:hover {
    transform: translateY(-4px);
    border-color: rgba(220, 30, 30, 0.7);
    box-shadow: 0 10px 30px rgba(139, 0, 0, 0.35);
}

.spec-card-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}
/* На ПК карточки выше (23.10.2026, решение заказчика): вертикальная обложка «Психозницы» видна крупнее,
   у остальных — больше кадра по высоте. На телефоне — прежние 260px. */
@media (min-width: 769px) {
    .spec-card-img { height: 340px; }
}
/* Вертикальная обложка (SPEC_COVER_CONTAIN в routes/spec.js): фото целиком по центру, по бокам — оно же,
   размытое и затемнённое, чтобы карточка не выглядела с пустыми полосами. */
.spec-card-img--backdrop {
    position: absolute;
    inset: 0;
    height: 100%;
    filter: blur(18px) brightness(0.45) saturate(1.2);
    transform: scale(1.2);
}
.spec-card-img--contain {
    position: relative;
    object-fit: contain;
}

.spec-card-subtitle {
    color: #d6a8a8;
    font-style: italic;
    font-size: 0.95rem;
    margin: 6px 0 10px;
}

/* Ruby glossy badge, used on landing cards and detail hero */
.spec-card-badge,
.spec-quest-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 14px;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #f2e3c6;
    background: radial-gradient(ellipse at 30% 30%, #4a0510 0%, #8b0000 80%);
    border: 1px solid rgba(220, 30, 30, 0.55);
    text-shadow: 0 1px 2px #000;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.spec-card-badge::after,
.spec-quest-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 220, 200, 0) 40%,
        rgba(255, 220, 200, 0.45) 50%,
        rgba(255, 220, 200, 0) 60%,
        transparent 100%);
    animation: specShine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes specShine {
    0%   { transform: translateX(0); }
    18%  { transform: translateX(280%); }
    100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
    .spec-card-badge::after,
    .spec-quest-badge::after {
        animation: none;
        display: none;
    }
}

/* Detail-page badge sits inline in the hero (no absolute positioning there) */
.spec-quest-badge {
    position: relative;
    display: inline-block;
    top: auto; left: auto;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.spec-quest-subtitle {
    color: #d6a8a8;
    font-style: italic;
    margin: 12px 0;
}

/* Шапка спец.версии со своим названием: «Специальная версия «Лечебницы»» → название → описание → черта */
.spec-eyebrow,
.spec-card-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(242, 227, 198, 0.62);
    font-weight: 600;
    line-height: 1.4;
}
.spec-eyebrow {
    font-size: 0.9rem;
    margin: 0 0 10px;
}
.spec-card-eyebrow {
    font-size: 0.72rem;
    margin: 0 0 6px;
}
.spec-hero-head h1 {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.spec-hero-head .spec-quest-subtitle {
    max-width: 640px;
    font-size: 1.15rem;
    line-height: 1.5;
}
.spec-head-divider {
    width: min(560px, 100%);
    height: 1px;
    margin: 18px 0 14px;
    background: linear-gradient(90deg, rgba(220, 30, 30, 0.65) 0%, rgba(220, 30, 30, 0.25) 60%, transparent 100%);
}

@media (max-width: 480px) {
    .spec-eyebrow { font-size: 0.78rem; letter-spacing: 0.1em; }
    .spec-hero-head .spec-quest-subtitle { font-size: 1rem; }
}

.spec-quest-overlay {
    background: linear-gradient(180deg, rgba(10, 5, 5, 0.85) 0%, rgba(0, 0, 0, 0.92) 100%);
}

/* Navbar link */
.nav-spec {
    color: #c4001a !important;
    font-weight: 700;
}

.btn-spec {
    background: radial-gradient(ellipse at 30% 30%, #4a0510 0%, #8b0000 80%);
    color: #f2e3c6;
    border: 1px solid rgba(220, 30, 30, 0.6);
    box-shadow: 0 2px 12px rgba(139, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-spec:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(220, 30, 30, 0.55);
}

/* Admin booking row: СПЕЦ pill */
.badge-spec {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #f2e3c6;
    background: linear-gradient(135deg, #4a0510 0%, #8b0000 100%);
    border: 1px solid rgba(220, 30, 30, 0.5);
    text-shadow: 0 1px 2px #000;
    margin-left: 6px;
}

/* Booking page: spec-mode info pill (shown when ?spec=1) */
.booking-spec-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, #2a0708 0%, #1a0304 100%);
    border: 1px solid rgba(220, 30, 30, 0.4);
    color: #d6a8a8;
    font-size: 0.95rem;
}
.booking-spec-notice-icon {
    font-size: 1.3rem;
}

/* Prior-visits prerequisite warning (on /spec, /spec/:slug, and booking page) */
.spec-prior-visits-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(90, 0, 5, 0.55) 0%, rgba(30, 0, 0, 0.75) 100%);
    border: 1px solid rgba(255, 60, 60, 0.55);
    color: #f2d6d6;
    font-size: 0.98rem;
    line-height: 1.5;
    box-shadow: 0 0 24px rgba(139, 0, 0, 0.25);
}
.spec-warning-icon {
    font-size: 1.6rem;
    color: #ff6464;
    flex-shrink: 0;
    line-height: 1.2;
}

/* Cancellation policy notice — shown on home, booking, quest detail pages, kids and spec sections */
.cancellation-policy-wrap {
    max-width: 800px;
    margin: 40px auto 0;
}
.cancellation-policy-notice {
    margin-top: 28px;
    padding: 20px 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(60, 40, 0, 0.55) 0%, rgba(30, 18, 0, 0.8) 100%);
    border: 1px solid rgba(230, 170, 60, 0.5);
    color: #f2e4c8;
    font-size: 0.98rem;
    line-height: 1.6;
    box-shadow: 0 0 24px rgba(180, 120, 30, 0.18);
}
.cancellation-policy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(230, 170, 60, 0.25);
}
.cancellation-policy-icon {
    font-size: 1.4rem;
    color: #ffb44a;
    line-height: 1;
}
.cancellation-policy-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffd888;
    letter-spacing: 0.02em;
}
.cancellation-policy-notice p {
    margin: 0 0 10px;
}
.cancellation-policy-notice p:last-child {
    margin-bottom: 0;
}
.cancellation-policy-notice b {
    color: #ffd888;
}
.cancellation-policy-thanks {
    font-weight: 600;
    color: #ffd888;
    padding-top: 6px;
}
@media (max-width: 480px) {
    .cancellation-policy-notice {
        padding: 16px 16px;
        font-size: 0.92rem;
    }
    .cancellation-policy-title {
        font-size: 1rem;
    }
}

/* Prior-visits numeric input (shown on /booking/:slug?spec=1) */
.spec-prior-visits-field {
    margin: 20px auto;
    max-width: 560px;
    padding: 16px 18px;
    background: rgba(20, 5, 5, 0.6);
    border: 1px solid rgba(220, 30, 30, 0.35);
    border-radius: 6px;
}
.spec-prior-visits-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #e8c8c8;
}
.spec-prior-visits-field input[type="number"] {
    width: 120px;
    padding: 8px 10px;
    font-size: 1.1rem;
    background: #0d0303;
    color: #fff;
    border: 1px solid rgba(220, 30, 30, 0.5);
    border-radius: 4px;
}
.spec-prior-visits-field-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #c9a1a1;
}

/* TEMP: blood-drip rain on cards hidden — replaced by new video overlay. */
.blood-drips { display: none !important; }
.quest-card::before, .quest-card::after { display: none !important; }

/* === Certificates page === */
.certificates-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 40px;
}
.certificates-photo-item {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    cursor: zoom-in;
    transition: transform 0.3s, border-color 0.3s;
    background: var(--bg-secondary);
}
.certificates-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.certificates-photo-item:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}
.certificates-photo-item:hover img {
    transform: scale(1.05);
}
/* Fallback для браузеров без aspect-ratio (Safari <15, Chrome <88): padding-трюк */
@supports not (aspect-ratio: 1 / 1) {
    .gallery-item, .kids-photo-item { position: relative; height: auto; padding-bottom: 75%; }
    .certificates-photo-item { position: relative; height: auto; padding-bottom: 133.3333%; }
    .slider-viewport { position: relative; height: auto; padding-bottom: 56.25%; }
    .gallery-item img, .kids-photo-item img, .certificates-photo-item img, .slider-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
@media (max-width: 600px) {
    .certificates-photos-grid { grid-template-columns: 1fr; gap: 15px; }
}

.certificates-description {
    max-width: 800px;
    margin: 0 auto 40px;
    white-space: pre-line;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
}
.certificates-guest-cta {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    padding: 30px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.certificates-guest-cta .cta-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }
.certificates-form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

/* === Gift cert "Оформить заявку" — stepped cards === */
.cert-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 24px 20px;
    box-shadow: var(--shadow);
    transition: border-color var(--transition);
}
.cert-card:focus-within { border-color: rgba(196,30,30,0.55); }
.cert-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.cert-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    border-radius: var(--radius);
    flex-shrink: 0;
}
.cert-card-title {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}
.cert-card-note {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}
.cert-card-optional { color: var(--text-secondary); font-size: 0.82rem; text-transform: none; letter-spacing: 0; }

/* Quest choice — radio cards (like booking mode/level) */
.quest-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.quest-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 16px 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    user-select: none;
}
.quest-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.quest-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.quest-option.is-selected { border-color: var(--accent); background: rgba(196,30,30,0.12); box-shadow: 0 0 16px rgba(196,30,30,0.22); }
.quest-option-badge { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.quest-option-img { width: 96px; height: 96px; margin-bottom: 10px; display: block; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; background: #0d0d0d; }
.quest-option-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quest-option.is-selected .quest-option-img { border-color: var(--accent); box-shadow: 0 0 14px rgba(196,30,30,0.45); }
.quest-option:hover .quest-option-img { border-color: transparent; }
.quest-option-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-primary); }
.quest-option-desc { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.4; }

/* Delivery choice — two big cards */
.cert-delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.delivery-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 18px 14px;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
    user-select: none;
}
.delivery-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.delivery-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.delivery-option.is-selected { border-color: var(--accent); background: rgba(196,30,30,0.12); box-shadow: 0 0 16px rgba(196,30,30,0.22); }
.delivery-option-img { width: 130px; height: 130px; margin-bottom: 12px; display: block; border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; background: #0d0d0d; }
.delivery-option-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.delivery-option.is-selected .delivery-option-img { border-color: var(--accent); box-shadow: 0 0 14px rgba(196,30,30,0.45); }
.delivery-option:hover .delivery-option-img { border-color: transparent; }
.delivery-option-title { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-primary); }
.delivery-option-desc { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.4; }

/* Auth note + help button */
.cert-auth-note {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(196,30,30,0.08);
    border: 1px solid rgba(196,30,30,0.4);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}
.cert-auth-note strong { color: var(--accent); }
.cert-auth-note a { color: var(--accent); text-decoration: underline; }
.cert-help-btn {
    margin-top: 14px;
    width: 100%;
    justify-content: center;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    padding: 20px;
}
.modal-box {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
}
.modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition);
}
.modal-close:hover { color: var(--accent); }
.modal-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 18px;
    padding-right: 30px;
}
.modal-steps { margin: 0 0 16px; padding-left: 20px; color: var(--text-secondary); line-height: 1.7; }
.modal-steps li { margin-bottom: 10px; }
.modal-steps a { color: var(--accent); text-decoration: underline; }
.modal-note { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6; border-top: 1px solid var(--border); padding-top: 14px; }

/* Form fields */
.cert-field-wrap { display: flex; flex-direction: column; }
.certificates-form .form-label { font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.certificates-form input[type="number"], .certificates-form textarea, .certificates-form .contact-info-input {
    width: 100%; padding: 12px 14px;
    background: var(--bg-secondary); color: var(--text-primary);
    border: 2px solid var(--border); border-radius: var(--radius-md);
    font-family: inherit; font-size: 1rem;
    transition: border-color var(--transition);
}
.certificates-form input[type="number"]:focus, .certificates-form textarea:focus, .certificates-form .contact-info-input:focus {
    outline: none; border-color: var(--accent);
}
.certificates-form textarea { resize: vertical; min-height: 84px; }
.certificates-form .form-hint { color: var(--text-secondary); font-size: 0.85rem; }

/* Submit button */
.cert-submit { width: 100%; justify-content: center; }
@media (max-width: 600px) {
    .cert-delivery-grid { grid-template-columns: 1fr; }
    .quest-options { grid-template-columns: 1fr 1fr; }
    .cert-card { padding: 20px 16px 16px; }
}
.form-error { color: #ff4d4d; padding: 10px; background: rgba(255,77,77,0.1); border-radius: var(--radius-md); }
.certificates-confirm { max-width: 600px; margin: 0 auto; }
.confirm-success { background: rgba(40, 167, 69, 0.1); border: 1px solid #28a745; border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; }
.confirm-check { color: #28a745; font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-list-item { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; color: var(--text-primary); text-decoration: none; }
.contact-list-item:hover { border-color: var(--accent); }

.nav-cert {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #fff4c2 0%, #e8c455 30%, #d4af37 55%, #b8860b 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    letter-spacing: 0.3px;
    padding: 4px 10px !important;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
    transition: filter 0.25s;
}
.nav-cert:hover { filter: drop-shadow(0 0 8px rgba(232, 196, 85, 0.8)) brightness(1.1); }

.fixed-promo-warning {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid #ffc107;
    color: #ffc107;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin: 12px 0;
    font-size: 0.95rem;
}

/* ============= CABINET ============= */
.cabinet-page { max-width: 900px; margin: 0 auto; }

/* --- Header --- */
.cabinet-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.cab-header-left { display: flex; align-items: center; gap: 16px; }
.cab-avatar {
    width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #c41e1e 0%, #7a1010 100%);
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0 0 18px rgba(196,30,30,0.4);
    text-transform: uppercase;
}
.cabinet-header h1 { margin: 0; font-size: 1.9rem; }
.cabinet-subtitle { color: var(--text-secondary); margin: 4px 0 0; font-size: 1rem; }
.cab-logout { min-height: 40px; padding: 8px 20px; font-size: 0.9rem; }

/* --- Sections --- */
.cab-section { margin-bottom: 44px; }
.cab-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cab-section-icon {
    width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: rgba(196,30,30,0.12); border: 1px solid rgba(196,30,30,0.35);
}
.cab-section-title { margin: 0; font-size: 1.45rem; color: var(--text-primary); letter-spacing: 0.02em; }
.cab-count {
    margin-left: auto; background: rgba(196,30,30,0.15); color: var(--accent);
    font-size: 0.85rem; font-weight: 700; padding: 3px 11px; border-radius: 999px;
    border: 1px solid rgba(196,30,30,0.35);
}

/* --- Empty states --- */
.cab-empty {
    text-align: center; padding: 44px 20px; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px dashed var(--border-light);
}
.cab-empty-icon { font-size: 2.8rem; margin-bottom: 14px; opacity: 0.9; }
.cab-empty-text { color: var(--text-secondary); margin: 0 0 20px; font-size: 1.02rem; }

/* --- Lists & cards --- */
.cab-list { display: flex; flex-direction: column; gap: 12px; }
.cab-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    transition: border-color .2s, box-shadow .2s;
}
.cab-card:hover { border-color: var(--border-light); box-shadow: 0 4px 20px rgba(0,0,0,0.35); }
.cab-card-main { min-width: 0; flex: 1; }
.cab-card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cab-card-title { font-weight: 700; font-size: 1.12rem; color: var(--text-primary); }
.cab-badge-mini {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
}
.cab-badge-mini.badge-kids { color: #ff8c42; background: rgba(255,140,66,0.12); border: 1px solid rgba(255,140,66,0.4); }
.cab-badge-mini.badge-spec { color: #f2e3c6; background: linear-gradient(135deg, #4a0510 0%, #8b0000 100%); border: 1px solid rgba(220,30,30,0.5); margin-left: 0; }
.cab-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-secondary); font-size: 0.9rem; }
.cab-meta-item { white-space: nowrap; }
.cab-card-price { font-weight: 700; font-size: 1.15rem; color: var(--accent); margin-top: 10px; }
.cab-card-status { flex-shrink: 0; }

/* --- Badges (statuses) --- */
.cab-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.cab-badge.status-pending { background: rgba(255,193,7,0.15); color: #ffc107; border: 1px solid rgba(255,193,7,0.35); }
.cab-badge.status-confirmed { background: rgba(40,167,69,0.15); color: #3ddc6d; border: 1px solid rgba(40,167,69,0.35); }
.cab-badge.status-completed { background: rgba(120,120,120,0.18); color: #a8a8a8; border: 1px solid rgba(120,120,120,0.3); }
.cab-badge.status-rejected { background: rgba(220,53,69,0.15); color: #f05a6a; border: 1px solid rgba(220,53,69,0.35); }
.cab-badge.status-fulfilled { background: rgba(40,167,69,0.15); color: #3ddc6d; border: 1px solid rgba(40,167,69,0.35); }

/* --- Promo cards --- */
.cab-promos-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cab-promo-card {
    border-radius: var(--radius-lg); padding: 18px 20px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #231414 0%, #120a0a 55%, #1d0f0f 100%);
    border: 1px solid rgba(196,30,30,0.4);
    box-shadow: inset 0 0 30px rgba(196,30,30,0.06), 0 2px 12px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; gap: 14px;
}
.cab-promo-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #c41e1e, #ff6b6b, #c41e1e);
}
.cab-promo-top { display: flex; flex-direction: column; gap: 10px; }
.cab-promo-value { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.cab-promo-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cab-p-code {
    font-family: monospace; font-size: 1.25rem; color: #fff; letter-spacing: 0.08em;
    background: rgba(0,0,0,0.45); border: 1px dashed rgba(196,30,30,0.6);
    padding: 6px 12px; border-radius: 6px; display: inline-block;
}
.cab-promo-bottom { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; color: var(--text-secondary); font-size: 0.88rem; }
.cab-promo-source { color: var(--text-secondary); }
.cab-promo-exp { color: #7fd68f; font-weight: 600; }
.cab-exp--soon { color: #ffc107; }
.cab-exp--expired { color: #a05050; }
.cab-promo-used-badge { color: #3ddc6d; font-weight: 700; font-size: 0.85rem; }
.promo-used { opacity: 0.55; }
.promo-used::before { filter: grayscale(1); }
.promo-expired { opacity: 0.6; }
.promo-expired .cab-promo-value,
.promo-expired .cab-p-code { color: #9a9a9a; border-color: #555; }
.promo-expired::before { background: linear-gradient(90deg, #666, #999, #666); }

/* --- Cert requests --- */
.cab-cert-card { border-left: 3px solid var(--border-light); }
.cab-cert-card.status-pending { border-left-color: #ffc107; }
.cab-cert-card.status-fulfilled { border-left-color: #28a745; }
.cab-cert-card.status-rejected { border-left-color: #dc3545; }
.cab-card-title-row .cab-cert-amount { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #fff; }
.cab-cert-type {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    padding: 2px 10px; border-radius: 999px;
}
.cab-c-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.cab-c-code-label { color: var(--text-secondary); font-size: 0.88rem; }
.cab-c-reason { color: #f05a6a; font-size: 0.9rem; margin-top: 10px; background: rgba(220,53,69,0.08); border-radius: 6px; padding: 8px 12px; }

/* --- Copy button --- */
.btn-copy {
    background: transparent; color: var(--accent); border: 1px solid var(--accent);
    padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
    font-family: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--transition); min-height: 34px;
}
.btn-copy:hover { background: var(--accent); color: #fff; }
.btn-copy-label { white-space: nowrap; }
.btn-copy-inline { padding: 2px 7px; font-size: 0.85rem; margin-left: 6px; line-height: 1; vertical-align: middle; min-height: 0; }
.contact-copy { user-select: all; -webkit-user-select: all; cursor: text; }

@media (max-width: 600px) {
    .cab-card { flex-direction: column; align-items: stretch; gap: 12px; }
    .cab-card-status { align-self: flex-start; }
    .cab-promos-list { grid-template-columns: 1fr; }
    .cabinet-header h1 { font-size: 1.6rem; }
}

/* Admin shared nav + certificate cards */
.admin-nav { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.admin-nav a { color: var(--text-secondary); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); }
.admin-nav a:hover { color: var(--text-primary); }
.admin-nav a.active { color: var(--accent); background: rgba(196,30,30,0.1); }
.admin-nav-count { display: inline-block; background: var(--accent); color: white; font-size: 0.75rem; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.admin-counter { color: var(--text-secondary); margin-bottom: 20px; }
.admin-cert-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px; margin-bottom: 15px; }
.admin-cert-card.status-fulfilled { border-left: 3px solid #28a745; }
.admin-cert-card.status-rejected { border-left: 3px solid #dc3545; opacity: 0.7; }
.admin-cert-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--text-secondary); font-size: 0.9rem; flex-wrap: wrap; gap: 8px; }
.admin-cert-body { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.admin-cert-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-cert-form input[type="number"] { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 10px; border-radius: 4px; width: 120px; font-family: inherit; }
.admin-cert-form label { color: var(--text-secondary); display: flex; gap: 8px; align-items: center; }
.admin-cert-reject { margin-top: 10px; }
.admin-cert-reject summary { color: var(--text-secondary); cursor: pointer; padding: 4px 0; }
.admin-cert-reject textarea { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 8px; border-radius: 4px; margin: 8px 0; min-height: 60px; font-family: inherit; }
.admin-cert-issued, .admin-cert-rejected { color: var(--text-secondary); padding: 8px 0; }

/* === Emoji toolbar (admin reply, user review edit) === */
.emoji-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; padding: 6px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius); }
.emoji-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; padding: 4px 6px; font-size: 1.15rem; line-height: 1; transition: background 0.12s, border-color 0.12s; }
.emoji-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--border); }
.emoji-btn:focus { outline: none; border-color: var(--accent); }

/* === Review edit (user side, on quest page) === */
.review-edit-btn { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.8rem; padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: color 0.12s, border-color 0.12s; }
.review-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.review-edit-form { margin: 0 0 15px 0; }
.review-edit-textarea { width: 100%; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 10px; border-radius: var(--radius); resize: vertical; min-height: 90px; font-family: inherit; font-size: 0.95rem; line-height: 1.6; }
.review-edit-textarea:focus { outline: none; border-color: var(--accent); }
.review-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.review-edit-error { color: var(--danger); font-size: 0.85rem; }
.review-edited-marker { color: var(--text-secondary); font-size: 0.8rem; font-style: italic; }

/* ===== Личный кабинет: меню + вкладки ===== */
.cab-layout { display: flex; gap: 28px; align-items: flex-start; margin-top: 24px; }
.cab-nav {
    flex: 0 0 240px; display: flex; flex-direction: column; gap: 6px;
    background: rgba(20,10,10,0.6); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 10px; position: sticky; top: 90px;
}
.cab-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
    color: var(--text-secondary); text-decoration: none; transition: all var(--transition); font-weight: 500;
}
.cab-nav-item:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.cab-nav-item.is-active { color: var(--text-primary); background: rgba(196,30,30,0.15); box-shadow: inset 3px 0 0 var(--accent); }
.cab-nav-icon { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.cab-nav-text { flex: 1; }
.cab-nav-count {
    background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700;
    padding: 1px 8px; border-radius: 999px; flex-shrink: 0;
}
.cab-content { flex: 1; min-width: 0; }

/* Настройки профиля */
.cab-settings-form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.cab-field { display: flex; flex-direction: column; gap: 6px; }
.cab-field-label { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.cab-field input[type="text"],
.cab-field input[type="password"],
.cab-field input[type="date"],
.cab-field select {
    background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary);
    padding: 10px 14px; border-radius: var(--radius); font-family: inherit; font-size: 0.95rem; width: 100%;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cab-field input:focus, .cab-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(196,30,30,0.2); }
.cab-field-hint { font-size: 0.78rem; color: var(--text-secondary); opacity: 0.8; }
.cab-avatar-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cab-avatar-opt { position: relative; cursor: pointer; }
.cab-avatar-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cab-avatar-opt-face {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 50%; background: rgba(255,255,255,0.05); border: 2px solid var(--border);
    font-size: 1.5rem; transition: all var(--transition);
}
.cab-avatar-opt-face--none { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); }
.cab-avatar-opt:hover .cab-avatar-opt-face { border-color: var(--text-secondary); }
.cab-avatar-opt input:checked + .cab-avatar-opt-face,
.cab-avatar-opt.is-selected .cab-avatar-opt-face { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(196,30,30,0.3); background: rgba(196,30,30,0.12); }
.cab-settings-save { align-self: flex-start; min-width: 200px; }
.cab-alert { padding: 12px 16px; border-radius: var(--radius); font-size: 0.92rem; margin-bottom: 18px; }
.cab-alert--ok { background: rgba(40,167,69,0.12); border: 1px solid rgba(40,167,69,0.4); color: #7fd68f; }
.cab-alert--err { background: rgba(220,53,69,0.12); border: 1px solid rgba(220,53,69,0.4); color: #f05a6a; }

/* ===== Колокольчик уведомлений ===== */
.nav-notif { position: relative; list-style: none; margin-left: 4px; }
.notif-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; transition: all var(--transition); padding: 0;
}
.notif-bell:hover { color: var(--accent); border-color: var(--accent); background: rgba(196,30,30,0.08); }
.notif-badge {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--accent); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px;
    border-radius: 999px; text-align: center; box-shadow: 0 0 0 2px #0a0a0a;
}
.notif-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: calc(100vw - 24px);
    background: rgba(15,10,10,0.98); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.7); z-index: 1100; overflow: hidden;
}
.notif-dropdown-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.notif-dropdown-title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.notif-read-all {
    background: transparent; border: none; color: var(--accent); font-size: 0.8rem; font-weight: 600;
    cursor: pointer; font-family: inherit; padding: 4px 0;
}
.notif-read-all:hover { text-decoration: underline; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; text-decoration: none;
    color: var(--text-primary); border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item.is-unread { background: rgba(196,30,30,0.07); }
.notif-item.is-unread::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    flex-shrink: 0; margin-top: 7px;
}
.notif-item-icon { font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; }
.notif-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notif-item-title { font-weight: 600; font-size: 0.9rem; }
.notif-item-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; overflow-wrap: break-word; }
.notif-item-time { font-size: 0.72rem; color: var(--text-secondary); opacity: 0.7; flex-shrink: 0; white-space: nowrap; margin-top: 2px; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }
.notif-dropdown-foot {
    display: block; text-align: center; padding: 12px 16px; color: var(--accent); text-decoration: none;
    font-weight: 600; font-size: 0.88rem; border-top: 1px solid var(--border);
}
.notif-dropdown-foot:hover { background: rgba(196,30,30,0.08); }

/* Адаптив кабинета */
@media (max-width: 768px) {
    .cab-layout { flex-direction: column; gap: 16px; }
    .cab-nav {
        flex: none; flex-direction: row; flex-wrap: wrap; width: 100%; position: static;
        padding: 8px; gap: 4px;
    }
    .cab-nav-item { flex: 1 1 auto; justify-content: center; padding: 10px 8px; flex-direction: column; gap: 4px; text-align: center; }
    .cab-nav-item.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
    .cab-nav-icon { font-size: 1.25rem; }
    .cab-nav-text { font-size: 0.75rem; line-height: 1.2; }
    .cab-nav-count { position: absolute; top: 4px; right: 8px; }
    .notif-dropdown { right: -60px; width: 320px; }
}

@media (max-width: 600px) {
    .cab-nav-item { min-width: calc(50% - 4px); }
    .notif-dropdown { right: -20px; }
}

@media (max-width: 480px) {
    .notif-dropdown { right: 0; width: calc(100vw - 24px); }
}

/* === PHOTO VIEWER (фото отзывов: полный экран + зум) === */
html.qq-pv-open, body.qq-pv-open { overflow: hidden; }

.qq-pv {
    display: none;
    position: fixed; inset: 0;
    z-index: 2500; /* выше lightbox(2000) и свечи(2001) */
    background: rgba(0,0,0,0.985);
    -webkit-user-select: none; user-select: none;
    touch-action: none;
}
.qq-pv.active { display: block; }

.qq-pv-stage {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.qq-pv-img {
    max-width: 96vw; max-height: 92vh;
    object-fit: contain;
    transform-origin: center center;
    will-change: transform;
    cursor: zoom-in;
    -webkit-user-drag: none;
    transition: opacity var(--transition);
}
.qq-pv.is-zoomed .qq-pv-img { cursor: grab; }
.qq-pv.is-dragging .qq-pv-img { cursor: grabbing; }
.qq-pv.is-loading .qq-pv-img { opacity: 0.25; }

.qq-pv-btn {
    background: rgba(20,20,20,0.72);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.qq-pv-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.qq-pv-btn:disabled { opacity: 0.35; cursor: default; }
.qq-pv-btn:focus { outline: none; }
.qq-pv-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.qq-pv-close {
    position: absolute; top: 16px; right: 16px;
    width: 46px; height: 46px;
    font-size: 1.9rem;
}
.qq-pv-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 50px; height: 74px;
    font-size: 1.8rem;
}
.qq-pv-prev { left: 14px; }
.qq-pv-next { right: 14px; }

.qq-pv-bar {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    background: rgba(20,20,20,0.72);
    border: 1px solid var(--border);
    border-radius: 40px;
    font-family: var(--font-body);
}
.qq-pv-bar .qq-pv-btn {
    width: 38px; height: 38px;
    font-size: 1.4rem;
    border-radius: 50%;
}
.qq-pv-zoom-label {
    min-width: 56px; text-align: center; white-space: nowrap;
    color: var(--text-secondary); font-size: 0.9rem;
}
.qq-pv-counter {
    color: var(--text-secondary); font-size: 0.9rem; white-space: nowrap;
    padding-left: 10px; border-left: 1px solid var(--border);
}
.qq-pv-counter:empty { display: none; }

@media (max-width: 768px) {
    .qq-pv-img { max-width: 100vw; max-height: 86vh; }
    .qq-pv-close { top: 10px; right: 10px; width: 42px; height: 42px; font-size: 1.6rem; }
    .qq-pv-nav { width: 42px; height: 62px; font-size: 1.4rem; }
    .qq-pv-prev { left: 6px; }
    .qq-pv-next { right: 6px; }
    .qq-pv-bar { bottom: 12px; gap: 8px; padding: 6px 12px; }
    .qq-pv-bar .qq-pv-btn { width: 34px; height: 34px; font-size: 1.2rem; }
}

/* === LITE MODE (слабые устройства, экономия трафика, prefers-reduced-motion) ===
   Класс qq-lite ставит инлайн-скрипт в <head> до применения стилей. Глушим то,
   что крутится бесконечно: анимации filter/transform на больших картинках карточек
   перерисовывают их каждый кадр — именно они вместе с видео-эффектами дают
   «залипающий» скролл на бюджетных телефонах. Вёрстка и размеры не меняются.

   Слой .quest-anim-fx не прячем, а фиксируем на слабой прозрачности: сам по себе
   статичный слой ничего не стоит, дорога только анимация. Без явной opacity он
   застывает в состоянии «помехи на полную» (opacity: 1) — анимация как раз и держала
   его почти прозрачным. */
html.qq-lite .hero-logo-img,
html.qq-lite .quest-anim-img,
html.qq-lite .quest-anim-fx,
html.qq-lite .quest-anim-fx::before,
html.qq-lite .quest-anim-fx::after,
html.qq-lite .quest-anim-fx-aux,
html.qq-lite .kids-bg-overlay,
html.qq-lite .spec-card-badge::after {
    animation: none !important;
}
html.qq-lite .quest-anim-fx { opacity: 0.18; }
html.qq-lite .quest-anim-fx::before,
html.qq-lite .quest-anim-fx::after { opacity: 0.25; }
html.qq-lite .quest-anim-img,
html.qq-lite .kids-bg-overlay { will-change: auto; }
html.qq-lite .card-fx-video { display: none !important; }

/* То же самое без JS — для пользователей с системной настройкой «меньше движения». */
@media (prefers-reduced-motion: reduce) {
    .hero-logo-img,
    .quest-anim-img,
    .quest-anim-fx,
    .quest-anim-fx::before,
    .quest-anim-fx::after,
    .quest-anim-fx-aux,
    .kids-bg-overlay,
    .spec-card-badge::after {
        animation: none !important;
    }
    .quest-anim-fx { opacity: 0.18; }
    .quest-anim-fx::before,
    .quest-anim-fx::after { opacity: 0.25; }
    .quest-anim-img, .kids-bg-overlay { will-change: auto; }
    .card-fx-video { display: none !important; }
}

/* ==================== ЧАЕПИТИЕ ==================== */
/* Переключатель + раскрывающееся описание в форме брони (views/booking.ejs, шаг #stepTeaParty).
   Цвета от --accent: в KID'S-режиме блок сам становится оранжевым, в спец.версии — тёмно-красным. */
.tea-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition);
}
.tea-toggle:hover, .tea-toggle.is-on { border-color: var(--accent); }
.tea-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tea-toggle-slider {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 26px;
    background: #2a2a2a;
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: background var(--transition), border-color var(--transition);
}
.tea-toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ddd;
    border-radius: 50%;
    transition: transform var(--transition), background var(--transition);
}
.tea-toggle input:checked + .tea-toggle-slider { background: var(--accent); border-color: var(--accent); }
.tea-toggle input:checked + .tea-toggle-slider::before { transform: translateX(22px); background: #fff; }
.tea-toggle input:focus-visible + .tea-toggle-slider { box-shadow: 0 0 0 3px rgba(255,255,255,0.35); }
.tea-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tea-toggle-title { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.tea-toggle-hint { font-size: 0.9rem; color: var(--text-secondary); }

.tea-details {
    margin-top: 14px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
}
.tea-details[hidden], .tea-details-time[hidden] { display: none; }
.tea-details p { margin-bottom: 10px; }
.tea-details-list { list-style: none; margin: 0 0 10px; padding: 0; }
.tea-details-list li { position: relative; padding-left: 18px; margin-bottom: 4px; color: var(--text-primary); }
.tea-details-list li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tea-details-note { margin: 12px 0; padding: 10px 14px; background: rgba(0,0,0,0.35); border-radius: var(--radius-sm); color: var(--text-primary); }
.tea-details-time { display: block; margin-top: 6px; color: var(--text-secondary); }
.tea-details .tea-details-more { margin-bottom: 0; font-size: 0.9rem; }
.tea-details-more a { white-space: nowrap; }

/* Метка «+1ч» у времени брони: админка, дашборд, сетка слотов, кабинет */
.badge-tea {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    color: #f5deb3;
    background: rgba(210,150,70,0.18);
    border: 1px solid rgba(210,150,70,0.55);
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}
.admin-price-note { margin-top: 2px; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }

/* Страница /tea-party */
.tea-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 48px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto 60px;
}
.tea-lead { margin-bottom: 22px; font-size: 1.12rem; line-height: 1.8; color: var(--text-secondary); }
.tea-price {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 30px;
    padding: 12px 20px;
    background: rgba(196,30,30,0.1);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 1.05rem;
}
.tea-price b { font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: 1px; color: var(--text-primary); }
.tea-block-title { margin-bottom: 14px; font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; letter-spacing: 2px; color: var(--text-primary); }
.tea-list { list-style: none; margin: 0 0 24px; padding: 0; }
.tea-list li { position: relative; margin-bottom: 8px; padding-left: 22px; font-size: 1.02rem; line-height: 1.5; color: var(--text-primary); }
.tea-list li::before { content: ''; position: absolute; left: 4px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(196,30,30,0.7); }
.tea-gift {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: var(--radius);
    line-height: 1.55;
    color: var(--text-secondary);
}
.tea-gift-icon { flex-shrink: 0; font-size: 1.6rem; line-height: 1; }
.tea-gift b { color: #e8c455; }

.tea-photo { position: relative; margin: 0; overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); cursor: zoom-in; }
/* Адрес точки прямо на фото (решение заказчика 27.09.2026) */
.tea-photo-address {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 12px;
    background: rgba(10,10,10,0.78);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    pointer-events: none;
}
/* .section { padding: 80px 0 } обнуляет боковые отступы .container — текст и фото вставали вплотную к краю экрана */
.tea-party-page > .container.section { padding-left: 20px; padding-right: 20px; }
.tea-split-photos { display: grid; gap: 16px; }
.tea-split-photos .tea-photo { aspect-ratio: 4 / 3; }
.tea-split-photos .tea-photo img { height: 100%; object-fit: cover; }
.tea-photo img { display: block; width: 100%; height: auto; transition: transform 0.4s; }
.tea-photo:hover img { transform: scale(1.03); }
.tea-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto 60px; }
.tea-gallery .tea-photo { aspect-ratio: 4 / 3; }
.tea-gallery .tea-photo img { height: 100%; object-fit: cover; }

.tea-section { max-width: 1100px; margin: 0 auto 60px; }
.tea-section-lead { max-width: 720px; margin: 0 auto 28px; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); }
.tea-venues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tea-venue { padding: 24px; background: rgba(20,20,20,0.85); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tea-venue-title { margin-bottom: 6px; font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; color: var(--text-primary); }
.tea-venue-sub { margin-bottom: 14px; font-size: 0.92rem; color: var(--text-secondary); }
.tea-venue-quests { display: flex; flex-wrap: wrap; gap: 10px; }

.tea-rule {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    background: rgba(196,30,30,0.08);
    border: 1px solid rgba(196,30,30,0.45);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-lg);
}
.tea-rule-hours { flex-shrink: 0; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; color: var(--text-primary); text-shadow: 0 0 14px rgba(196,30,30,0.8); }
.tea-rule-text { line-height: 1.6; color: var(--text-secondary); }
.tea-rule-text b { display: block; margin-bottom: 4px; color: var(--text-primary); }

.tea-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: tea-step; }
.tea-steps li {
    position: relative;
    padding: 60px 22px 22px;
    background: rgba(20,20,20,0.85);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    counter-increment: tea-step;
}
.tea-steps li::before {
    content: counter(tea-step);
    position: absolute;
    top: 18px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--accent);
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
}
.tea-step-title { display: block; margin-bottom: 6px; font-weight: 700; color: var(--text-primary); }
.tea-cta { margin-top: 40px; text-align: center; }

@media (max-width: 900px) {
    .tea-split { grid-template-columns: 1fr; gap: 28px; }
    .tea-split-photo { order: -1; width: 100%; max-width: 520px; margin: 0 auto; }
    .tea-split-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tea-split-photos .tea-photo-address { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 3px 8px; font-size: 0.72rem; }
    .tea-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .tea-venues { grid-template-columns: 1fr; }
    .tea-rule { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tea-lead { font-size: 1rem; }
    .tea-toggle { padding: 12px 14px; }
}

/* ==================== МЕССЕНДЖЕРЫ ==================== */
/* Официальные знаки (views/partials/messenger-icon.ejs): глиф в фирменном цвете, белая подложка
   проступает в вырезах — как в оригинальных логотипах. */
.msgr-icon { display: inline-flex; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; }
.msgr-icon svg { display: block; width: 100%; height: 100%; }
.msgr-icon--telegram { background: radial-gradient(circle at center, #fff 0 66%, transparent 67%); color: #26A5E4; }
.msgr-icon--vk { border-radius: 22%; background: linear-gradient(#fff, #fff) center / 76% 76% no-repeat; color: #0077FF; }

/* Форма брони: шаг «Как с вами связаться» */
.contact-field-label { display: block; margin: 0 0 8px; padding: 0; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.call-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 18px 0 22px;
    padding: 14px 16px;
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.35);
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.call-notice b { color: var(--text-primary); }
.call-notice-icon { flex-shrink: 0; font-size: 1.4rem; line-height: 1.1; }
.messenger-field { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.messenger-options { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.messenger-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.messenger-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.messenger-option:hover { border-color: var(--accent); }
.messenger-option.is-selected { border-color: var(--accent); background: rgba(196,30,30,0.1); }
.messenger-option:focus-within { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.messenger-input, .notify-detail { margin-top: 14px; }
.messenger-input[hidden], .notify-detail[hidden], .notify-detail [hidden], .tg-connect[hidden], .tg-connect-done[hidden] { display: none; }
.messenger-input > label, .notify-detail > label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-secondary); }
.notify-detail p, .notify-lead { font-size: 0.92rem; line-height: 1.5; color: var(--text-secondary); }
.notify-lead { margin: 0 0 12px; }
.messenger-warning {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(243,156,18,0.1);
    border: 1px solid rgba(243,156,18,0.45);
    border-radius: var(--radius);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.messenger-warning b { color: #f5c16c; }
.messenger-warning ul { margin: 6px 0 12px 18px; }
.messenger-confirm { display: flex; align-items: flex-start; gap: 10px; color: var(--text-primary); cursor: pointer; }
.messenger-confirm input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
/* Проверка Telegram-контакта (booking.js, lib/tg-contact-check.js) */
.tg-check { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.03); }
.tg-check[hidden], .tg-check-retry[hidden], .messenger-warning[hidden] { display: none; }
.tg-check-text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-secondary); }
.tg-check--ok { border-color: rgba(46,160,67,0.5); background: rgba(46,160,67,0.08); }
.tg-check--ok .tg-check-text { color: var(--success); }
.tg-check--error { border-color: rgba(196,30,30,0.6); background: rgba(196,30,30,0.08); }
.tg-check--error .tg-check-text { color: var(--text-primary); }
.tg-check-retry { margin-top: 10px; }
.messenger-hint { margin-top: 8px; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); }
.link-btn { margin-top: 6px; padding: 0; background: none; border: 0; font: inherit; font-size: 0.88rem; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* Подключение Telegram-бота и сообщества ВКонтакте: экран успеха брони и кабинет */
.btn-telegram, .btn-vk { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.btn-telegram { background: #26A5E4; }
.btn-telegram:hover { background: #1c93cf; color: #fff; }
.btn-vk { background: #0077FF; }
.btn-vk:hover { background: #0066db; color: #fff; }
.btn-telegram .msgr-icon, .btn-vk .msgr-icon { width: 20px; height: 20px; }
.tg-connect { margin-bottom: 18px; padding: 16px 18px; background: rgba(38,165,228,0.08); border: 1px solid rgba(38,165,228,0.5); border-radius: var(--radius); }
.tg-connect--vk { background: rgba(0,119,255,0.08); border-color: rgba(0,119,255,0.5); }
.tg-connect-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 700; color: var(--text-primary); }
.tg-connect p { margin-bottom: 12px; font-size: 0.92rem; line-height: 1.5; color: var(--text-secondary); }
.tg-connect-done { margin-bottom: 18px; color: var(--success); }
.tg-connect p.tg-connect-wait { margin: 12px 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.tg-connect-wait[hidden] { display: none; }
/* Подключение бота в форме до отправки (data-notify-connect) */
.notify-detail .tg-connect { margin: 12px 0 0; }
.notify-detail .tg-connect-done { margin: 12px 0 0; }
.notify-detail p.notify-linked, .notify-detail p.tg-connect-done { color: var(--success); }
.notify-code { font-size: 1.05rem; letter-spacing: 0.08em; color: var(--text-primary); white-space: nowrap; }
.tg-connect p.notify-down { margin: 12px 0 0; color: var(--warning, #e0a100); }
.notify-down[hidden] { display: none; }
.saved-contacts-note { margin: 0 0 14px; font-size: 0.9rem; color: var(--text-secondary); }
/* Форма брони: «что сделать» — подсказки заранее, ошибка у самого поля (booking.js::pointToField),
   список «Чтобы отправить заявку» над кнопкой (booking.js::renderTodo), свёрнутые условия отмены. */
.field-instruction { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.45; color: var(--text-primary); }
.field-instruction[hidden], .field-has-error > .field-instruction { display: none; }
.field-error { margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(255,90,90,0.75); border-radius: var(--radius); background: rgba(196,30,30,0.18); color: #fff; font-weight: 600; font-size: 0.95rem; line-height: 1.45; }
.field-error::before { content: "👇 "; }
.field-has-error { outline: 2px solid #ff4d4d; outline-offset: 4px; border-radius: var(--radius); animation: fieldErrorPulse 1.2s ease-out 2; }
@keyframes fieldErrorPulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,0.55); } 100% { box-shadow: 0 0 0 14px rgba(255,77,77,0); } }
@media (prefers-reduced-motion: reduce) { .field-has-error { animation: none; } }
.connect-steps { margin: 0 0 14px 20px; padding: 0; font-size: 0.95rem; line-height: 1.55; color: var(--text-primary); }
.connect-steps li { margin-bottom: 4px; }
.booking-todo { margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(255,90,90,0.45); border-radius: var(--radius); background: rgba(196,30,30,0.06); }
.booking-todo[hidden] { display: none; }
.booking-todo.is-ready { border-color: rgba(46,160,67,0.6); background: rgba(46,160,67,0.08); }
.booking-todo-title { margin: 0 0 8px; font-weight: 700; color: var(--text-primary); }
.booking-todo.is-ready .booking-todo-title { margin: 0; color: var(--success); }
.booking-todo-list { list-style: none; margin: 0; padding: 0; }
.booking-todo-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 0.95rem; line-height: 1.4; color: var(--text-secondary); }
.booking-todo-mark { flex-shrink: 0; width: 1.4em; text-align: center; }
.booking-todo-link { padding: 0; background: none; border: 0; font: inherit; font-weight: 600; color: #ff8a8a; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.booking-todo-link::after { content: " →"; }
.booking-policy { margin-top: 20px; }
.booking-policy > summary { list-style: none; padding: 10px 12px; border: 1px solid rgba(243,156,18,0.35); border-radius: var(--radius); background: rgba(243,156,18,0.08); font-size: 0.92rem; line-height: 1.45; color: var(--text-secondary); cursor: pointer; }
.booking-policy > summary::-webkit-details-marker { display: none; }
.booking-policy-more { color: #f5c16c; text-decoration: underline; white-space: nowrap; }
.booking-policy[open] > summary { margin-bottom: 12px; }
/* Кнопка отправки, пока заявка не готова: приглушена, пишет, что осталось (нажать можно — booking.js::renderSubmitState) */
.btn.btn-primary.is-incomplete { background: rgba(196,30,30,0.22); color: rgba(255,255,255,0.82); box-shadow: inset 0 0 0 1px rgba(255,120,120,0.5); }
.btn.btn-primary.is-incomplete:hover { background: rgba(196,30,30,0.32); box-shadow: inset 0 0 0 1px rgba(255,120,120,0.7); transform: none; }
.confirm-contact-icon .msgr-icon { width: 24px; height: 24px; }
.contact-list-item--icon { display: flex; align-items: center; gap: 10px; }
.contact-list-item--icon .msgr-icon { width: 20px; height: 20px; }

/* Админка: бронь, к которой вернулись после действия (?highlight=<id>#booking-<id>) */
.admin-booking-row { scroll-margin-top: 110px; }
.admin-booking-row.is-highlighted td { background: rgba(46,160,67,0.14); }
.admin-booking-row.is-highlighted td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.admin-created { margin-top: 4px; font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }

/* Админка: «Места на Halloween» — счётчик свободных мест по сеансам (views/admin/bookings.ejs, до конца 31.10) */
.admin-hw-seats { scroll-margin-top: 110px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid rgba(255,140,0,0.45); border-radius: 8px; background: rgba(194,65,12,0.12); }
.admin-hw-seat { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 8px; margin-top: 6px; }
.admin-hw-seat-info { color: var(--text-secondary); font-size: 0.85rem; }
.admin-hw-seat-counter { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 480px) {
    /* Время и счётчик — в одну строку, «заявки · закрыто вручную» — под ними на всю ширину. */
    .admin-hw-seat { grid-template-columns: 50px 1fr; row-gap: 2px; margin-top: 10px; }
    .admin-hw-seat-counter { grid-column: 2; grid-row: 1; justify-self: end; }
    .admin-hw-seat-info { grid-column: 1 / -1; grid-row: 2; }
}

/* Админка: мессенджер клиента и статус подтверждения */
.admin-messenger { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.admin-messenger:hover { color: var(--text-primary); }
.admin-messenger:hover span { text-decoration: underline; }
.admin-messenger .msgr-icon { width: 22px; height: 22px; }
.admin-muted { color: var(--text-secondary); }
.admin-table td.admin-messenger-cell { white-space: normal; min-width: 170px; }
.confirm-state { display: flex; align-items: flex-start; gap: 6px; max-width: 240px; margin-top: 4px; font-size: 0.75rem; line-height: 1.35; }
.confirm-state .msgr-icon { width: 16px; height: 16px; margin-top: 1px; }
.admin-check { margin-top: 3px; font-size: 0.72rem; color: var(--text-secondary); }
.admin-check--ok { color: var(--success); }
.admin-check--warn { color: var(--warning); }
.admin-msgr-label { margin-bottom: 3px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary); opacity: 0.8; }
.admin-msgr-label--confirm { margin-top: 10px; margin-bottom: 0; }
.confirm-state--ok { color: var(--success); }
.confirm-state--warn { color: var(--warning); }
.confirm-state--error { color: var(--danger); }
.confirm-state--muted { color: var(--text-secondary); }

/* Кабинет: памятка к игре и подключение Telegram / ВКонтакте */
.cab-tg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.cab-tg-hint { font-size: 0.82rem; color: var(--text-secondary); }
.cab-tg-hint--ok { color: var(--success); }
.cab-memo { margin-top: 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius); }
.cab-memo summary { padding: 10px 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.cab-memo-text { padding: 0 14px 14px; white-space: pre-line; overflow-wrap: anywhere; font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); }

/* Всплывающее уведомление (public/js/notifications.js) */
.qq-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1150;
    display: flex;
    gap: 12px;
    width: min(360px, calc(100vw - 32px));
    padding: 14px 16px;
    background: rgba(15,10,10,0.98);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.qq-toast.is-visible { opacity: 1; transform: none; }
.qq-toast-icon { flex-shrink: 0; font-size: 1.5rem; line-height: 1.1; }
.qq-toast-body { flex: 1; min-width: 0; }
.qq-toast-title { margin-bottom: 4px; font-weight: 700; }
.qq-toast-text { font-size: 0.88rem; line-height: 1.4; color: var(--text-secondary); overflow-wrap: anywhere; }
.qq-toast-link { display: inline-block; margin-top: 8px; font-size: 0.88rem; font-weight: 600; color: var(--accent); }
.qq-toast-close { align-self: flex-start; padding: 0 2px; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.qq-toast-close:hover { color: var(--text-primary); }

@media (max-width: 480px) {
    .messenger-options { grid-auto-flow: row; }
    .messenger-option { justify-content: flex-start; }
    .qq-toast { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .qq-toast { transition: none; }
}