/* Cookie Kingdom - style.css */

:root {
    --bg-1: #2b1b12;
    --bg-2: #4a2c1a;
    --accent: #e8a13a;
    --accent-2: #d97a3a;
    --text: #fdf3e7;
    --text-dim: #cbb69c;
    --glass: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.14);
    --success: #4caf7d;
    --error: #e05c5c;
    --gold: #ffd76a;
    --radius: 14px;
}

body[data-theme="night"] { --bg-1: #0d1226; --bg-2: #1c2447; --accent: #7d9dff; --accent-2: #4c6fff; }
body[data-theme="candy"] { --bg-1: #3a1030; --bg-2: #601a4a; --accent: #ff6fae; --accent-2: #ff9ecf; }
body[data-theme="christmas"] { --bg-1: #0d2b1a; --bg-2: #123d24; --accent: #e33; --accent-2: #2e8b57; }
body[data-theme="halloween"] { --bg-1: #1a0d26; --bg-2: #2c1440; --accent: #ff8c1a; --accent-2: #8b2fc9; }
body[data-theme="galaxy"] { --bg-1: #050318; --bg-2: #10082e; --accent: #a06bff; --accent-2: #4fd6ff; }
body[data-theme="royal"] { --bg-1: #1a0f2e; --bg-2: #2f1a4d; --accent: #ffd76a; --accent-2: #b78bff; }
body[data-theme="neon"] { --bg-1: #05050a; --bg-2: #0d0d1a; --accent: #39ff9d; --accent-2: #ff3df0; }
body[data-theme="steampunk"] { --bg-1: #241a10; --bg-2: #3a2a17; --accent: #c98a3a; --accent-2: #7a5a3a; }
body[data-theme="aurora"] { --bg-1: #061224; --bg-2: #0b2440; --accent: #5be3c0; --accent-2: #7a8bff; }
body.light-mode { --bg-1: #fdf3e7; --bg-2: #ffe6c7; --text: #2b1b12; --text-dim: #6b5644; --glass: rgba(0,0,0,0.05); --glass-border: rgba(0,0,0,0.1); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at 20% 10%, var(--bg-2), var(--bg-1) 70%);
    color: var(--text);
    overflow-x: hidden;
    transition: background 0.5s ease, color 0.5s ease;
}

/* ---------- Decorative photo border ----------
   Drop-in images: assets/images/border/corner-*.png and edge-*.png.
   Purely cosmetic overlay - pointer-events disabled so it never blocks
   clicks, and it renders as nothing if a file is missing. Hidden entirely
   on narrow/mobile screens so it can never eat into gameplay space. */
#decor-frame { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.decor-corner {
    position: fixed; width: 110px; height: 110px;
    background-repeat: no-repeat; background-size: contain; background-position: center;
}
.decor-tl { top: 0; left: 0; background-image: url('../assets/images/border/corner-tl.png'); }
.decor-tr { top: 0; right: 0; background-image: url('../assets/images/border/corner-tr.png'); }
.decor-bl { bottom: 0; left: 0; background-image: url('../assets/images/border/corner-bl.png'); }
.decor-br { bottom: 0; right: 0; background-image: url('../assets/images/border/corner-br.png'); }
.decor-edge { position: fixed; background-size: auto 100%; }
.decor-top, .decor-bottom { left: 110px; right: 110px; height: 34px; background-repeat: repeat-x; }
.decor-left, .decor-right { top: 110px; bottom: 110px; width: 34px; background-repeat: repeat-y; background-size: 100% auto; }
.decor-top { top: 0; background-image: url('../assets/images/border/edge-top.png'); }
.decor-bottom { bottom: 0; background-image: url('../assets/images/border/edge-bottom.png'); }
.decor-left { left: 0; background-image: url('../assets/images/border/edge-left.png'); }
.decor-right { right: 0; background-image: url('../assets/images/border/edge-right.png'); }

/* Never show the border on mobile/narrow viewports - keep all screen space for gameplay */
@media (max-width: 900px) {
    #decor-frame { display: none; }
}

/* ---------- Secret photo gallery (unlocked by clicking the title 10 times) ----------
   Grid + fullscreen viewer styles live further down under "Bonus gallery". */
.gallery-box { max-width: 560px; text-align: center; }
@keyframes gallery-fade-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 560px) {
    .modal-box.gallery-box { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* ---------- Loading Screen ---------- */
#loading-screen {
    position: fixed; inset: 0; z-index: 999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, var(--bg-2), var(--bg-1));
    gap: 14px;
}
.loading-cookie { font-size: 90px; animation: spin-bounce 1.6s ease-in-out infinite; }
@keyframes spin-bounce { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(180deg); } }
#loading-screen h1 { margin: 0; font-size: 2rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loading-bar-track { width: 280px; height: 12px; background: var(--glass); border-radius: 20px; overflow: hidden; border: 1px solid var(--glass-border); }
.loading-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.2s ease; }
#loading-tip { color: var(--text-dim); font-size: 0.9rem; max-width: 320px; text-align: center; }

.hidden { display: none !important; }

/* ---------- Top Bar ---------- */
#top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; gap: 12px; flex-wrap: wrap;
    background: var(--glass); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.2rem; }
.brand-icon { font-size: 1.6rem; }
.version-tag { font-size: 0.7rem; color: var(--text-dim); font-weight: 400; }
.top-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat-pill {
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px;
    padding: 6px 14px; font-weight: 600; font-size: 0.95rem;
}
.stat-pill span { color: var(--accent); }
.crowns-pill span { color: var(--gold); }
.top-actions { display: flex; gap: 8px; }
.icon-btn {
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px;
    color: var(--text); font-size: 1.1rem; padding: 6px 10px; cursor: pointer; transition: transform 0.15s;
}
.icon-btn:hover { transform: scale(1.1); background: rgba(255,255,255,0.15); }

/* ---------- Buff bar ---------- */
#buff-bar { display: flex; gap: 8px; padding: 6px 20px; flex-wrap: wrap; min-height: 4px; }
.buff-chip {
    background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #201205;
    border-radius: 16px; padding: 4px 12px; font-size: 0.8rem; font-weight: 700;
    display: flex; gap: 6px; animation: pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 4px rgba(255,215,106,0.4);} 50% { box-shadow: 0 0 14px rgba(255,215,106,0.9);} }

/* ---------- Layout ---------- */
#main-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.3fr); gap: 18px; padding: 18px; max-width: 1500px; margin: 0 auto; }

#cookie-panel {
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius);
    padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    backdrop-filter: blur(10px); position: relative;
}

#golden-cookie-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#golden-cookie {
    position: absolute; font-size: 3.2rem; background: none; border: none; cursor: pointer;
    filter: drop-shadow(0 0 16px var(--gold)); animation: golden-float 2s ease-in-out infinite, golden-spin 4s linear infinite;
    pointer-events: all;
}
@keyframes golden-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes golden-spin { 0% { filter: drop-shadow(0 0 16px var(--gold)) hue-rotate(0deg);} 100% { filter: drop-shadow(0 0 16px var(--gold)) hue-rotate(360deg);} }

#cookie-click-area { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px 0; }
#main-cookie {
    font-size: 11rem; background: none; border: none; cursor: pointer; line-height: 1;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.4));
    transition: transform 0.08s ease;
    user-select: none;
}
#main-cookie:hover { transform: scale(1.04); filter: drop-shadow(0 10px 30px var(--accent)); }
#main-cookie:active { transform: scale(0.94); }
#main-cookie.bounce { animation: cookie-bounce 0.25s ease; }
@keyframes cookie-bounce { 0% { transform: scale(0.88) rotate(-3deg);} 60% { transform: scale(1.08) rotate(2deg);} 100% { transform: scale(1) rotate(0);} }

#float-numbers, #particle-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.float-number {
    position: absolute; font-weight: 800; color: var(--accent); font-size: 1.3rem;
    animation: float-up 1.2s ease-out forwards; text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.float-number.crit { color: var(--error); font-size: 1.8rem; }
@keyframes float-up { 0% { opacity: 1; transform: translateY(0) scale(1);} 100% { opacity: 0; transform: translateY(-70px) scale(1.3);} }
.crumb-particle {
    position: absolute; width: 6px; height: 6px; border-radius: 2px; background: var(--accent-2);
    animation: crumb-fly 0.6s ease-out forwards;
}
@keyframes crumb-fly { 0% { opacity: 1; transform: translate(0,0) rotate(0);} 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(200deg);} }

.panel-stats { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; color: var(--text-dim); font-size: 0.9rem; }
.panel-stats span { color: var(--accent); font-weight: 700; }

#quest-widget { width: 100%; }
#quest-widget h3 { margin: 4px 0 8px; font-size: 1rem; }
.quest-item { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.quest-item.quest-done { border-color: var(--success); }
.quest-name { font-weight: 700; font-size: 0.9rem; }
.quest-desc { font-size: 0.8rem; color: var(--text-dim); }
.quest-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; }
.quest-progress-track { height: 6px; background: rgba(255,255,255,0.1); border-radius: 6px; margin-top: 6px; overflow: hidden; }
.quest-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.quest-claim { margin-top: 6px; width: 100%; }

/* ---------- Side panel ---------- */
#side-panel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(10px); display: flex; flex-direction: column; min-height: 500px; overflow: hidden; }
#tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--glass-border); }
.tab-btn {
    flex: 1; min-width: 100px; background: none; border: none; color: var(--text-dim);
    padding: 12px 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.2s;
    border-bottom: 3px solid transparent;
}
.tab-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(255,255,255,0.04); }

#tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.tab-pane { display: none; flex-direction: column; flex: 1; overflow: hidden; padding: 14px; gap: 10px; }
.tab-pane.active { display: flex; }

.scroll-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.scroll-list::-webkit-scrollbar { width: 8px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 8px; }

.buy-mode-row { display: flex; align-items: center; gap: 8px; }
.buy-mode-btn {
    background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
    padding: 5px 12px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.buy-mode-btn.active { background: var(--accent); color: #201205; }

.shop-item {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
    transition: all 0.2s; position: relative;
}
.shop-item.affordable { border-color: var(--accent); box-shadow: 0 0 10px rgba(232,161,58,0.15); }
.shop-item.favorited { background: rgba(255,215,106,0.06); }
.shop-item.owned { opacity: 0.7; }
.fav-star { background: none; border: none; color: var(--gold); font-size: 1.1rem; cursor: pointer; padding: 0 4px; }
.shop-icon { font-size: 1.8rem; width: 42px; text-align: center; }
.shop-info { flex: 1; min-width: 0; }
.shop-name { font-weight: 700; font-size: 0.92rem; }
.owned-badge { background: var(--glass); border-radius: 8px; padding: 1px 8px; font-size: 0.75rem; margin-left: 6px; }
.shop-desc { font-size: 0.78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-sub { font-size: 0.75rem; color: var(--accent); }
.buy-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #201205; border: none;
    border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; text-align: center; min-width: 90px;
    transition: transform 0.15s;
}
.buy-btn:hover:not(:disabled) { transform: scale(1.05); }
.buy-btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--glass); color: var(--text-dim); }
.shop-item:not(.affordable) .buy-btn:not(:disabled) { opacity: 0.55; }

#upgrade-search { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); }
.category-header { font-weight: 800; color: var(--accent); margin-top: 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
.empty-msg { color: var(--text-dim); text-align: center; padding: 20px; }

.grid-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ach-card { background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 6px; text-align: center; }
.ach-card.unlocked { border-color: var(--gold); background: rgba(255,215,106,0.08); }
.ach-card.locked { opacity: 0.5; }
.ach-icon { font-size: 1.6rem; }
.ach-name { font-size: 0.68rem; margin-top: 4px; }
#achievement-progress { font-weight: 700; color: var(--accent); }

.prestige-stat { margin-bottom: 4px; }
.big-btn {
    background: linear-gradient(135deg, var(--gold), var(--accent-2)); color: #201205; border: none;
    padding: 14px; border-radius: 12px; font-weight: 800; font-size: 1rem; cursor: pointer; width: 100%;
    transition: transform 0.15s;
}
.big-btn:hover:not(:disabled) { transform: scale(1.02); }
.big-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hint { color: var(--text-dim); font-size: 0.8rem; }

.minigame-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.mg-tab-btn { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.mg-tab-btn.active { background: var(--accent); color: #201205; }
.mg-pane { display: none; flex-direction: column; gap: 12px; align-items: center; text-align: center; overflow-y: auto; }
.mg-pane.active { display: flex; }
#slots-reels { font-size: 2.4rem; letter-spacing: 10px; }

.stat-row { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--glass-border); font-size: 0.9rem; }

/* ---------- Toasts ---------- */
#toast-container { position: fixed; bottom: 16px; right: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.toast {
    background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-border);
    padding: 10px 16px; border-radius: 10px; font-size: 0.9rem; opacity: 0; transform: translateX(30px);
    transition: all 0.3s ease; max-width: 320px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { border-color: var(--success); }
.toast-error { border-color: var(--error); }
.toast-golden { border-color: var(--gold); }

/* ---------- Achievement popup ---------- */
#achievement-popup-container { position: fixed; top: 70px; right: 16px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.achievement-popup {
    display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--gold), var(--accent-2));
    color: #201205; padding: 10px 16px; border-radius: 12px; opacity: 0; transform: translateX(40px) scale(0.9);
    transition: all 0.4s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.achievement-popup.show { opacity: 1; transform: translateX(0) scale(1); }
.ach-popup-icon { font-size: 1.8rem; }
.ach-popup-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; }
.ach-popup-name { font-weight: 800; }

/* ---------- Modals ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); z-index: 800; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--bg-2); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 24px; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.modal-box.small { max-width: 340px; text-align: center; }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text); font-size: 1.2rem; cursor: pointer; }
.settings-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; gap: 10px; }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.settings-actions button { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); cursor: pointer; }
.settings-actions button.danger { background: rgba(224,92,92,0.2); border-color: var(--error); }
#save-textarea { width: 100%; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); border-radius: 8px; padding: 8px; font-family: monospace; }
#btn-patchnotes { margin-top: 10px; width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); cursor: pointer; }

/* Give the desktop border room to breathe without covering game content */
@media (min-width: 901px) {
    #main-layout { padding-left: 44px; padding-right: 44px; }
    #top-bar { padding-left: 44px; padding-right: 44px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    #main-layout { grid-template-columns: 1fr; }
    #main-cookie { font-size: 8rem; }
}
@media (max-width: 560px) {
    .top-stats { order: 3; width: 100%; justify-content: center; }
    #main-cookie { font-size: 6.5rem; }
    .tab-btn { font-size: 0.72rem; padding: 10px 4px; }
}

/* ---------- Boss key cover (fake typing-practice screen) ---------- */
#boss-cover {
    position: fixed; inset: 0; z-index: 2000; background: #f4f6fb; color: #26324a;
    overflow-y: auto; cursor: pointer; font-family: system-ui, sans-serif;
}
.typing-page { max-width: 700px; margin: 0 auto; padding: 40px 20px; cursor: auto; text-align: center; }
.typing-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.typing-logo { font-weight: 800; font-size: 1.3rem; color: #2d5be3; }
.typing-stats { font-size: 0.85rem; color: #54607a; }
.typing-progress-track { height: 10px; background: #e2e7f3; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.typing-progress-fill { height: 100%; width: 34%; background: linear-gradient(90deg, #2d5be3, #5b8bff); }
.typing-lesson-label { font-size: 0.8rem; color: #8a93ab; margin: 0 0 24px; }
.typing-passage {
    font-family: 'Consolas', 'Courier New', monospace; font-size: 1.3rem; line-height: 2;
    background: #fff; border: 1px solid #e2e7f3; border-radius: 12px; padding: 24px;
    text-align: left; color: #b8bfd1;
}
.typed { color: #26324a; }
.typing-cursor { background: #2d5be3; color: #fff; border-radius: 3px; padding: 0 2px; }
.typing-keyboard-hint { margin: 20px 0 10px; font-family: monospace; letter-spacing: 6px; color: #b8bfd1; }
.typing-keyboard-hint .gap { display: inline-block; width: 20px; }
.typing-hint { font-size: 0.75rem; color: #8a93ab; margin-top: 20px; }
@media (max-width: 560px) {
    .typing-page { padding: 24px 14px; }
    .typing-passage { font-size: 1.05rem; padding: 16px; }
}

/* ---------- Teacher-coming cover (fullscreen drop-in image) ---------- */
#teacher-cover {
    position: fixed; inset: 0; z-index: 2000; background: #000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
#teacher-cover-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.teacher-cover-missing { color: var(--text-dim); font-family: system-ui, sans-serif; font-size: 0.9rem; text-align: center; padding: 20px; }
.teacher-cover-missing code { background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; color: #fff; }

/* ---------- Sign-in screen ---------- */
#signin-screen {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, var(--bg-2), var(--bg-1));
}
.signin-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius);
    padding: 32px 28px; max-width: 320px; width: 90%; backdrop-filter: blur(10px);
}
.signin-cookie { font-size: 3rem; }
.signin-card h1 { margin: 0; font-size: 1.3rem; }
.signin-names { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.signin-name-btn {
    background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
    padding: 8px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.15s;
}
.signin-name-btn.active { background: var(--accent); color: #201205; }
.signin-pin {
    width: 100%; text-align: center; letter-spacing: 4px; padding: 10px; border-radius: 8px;
    border: 1px solid var(--glass-border); background: var(--glass); color: var(--text); font-size: 1.1rem;
}
.signin-error { color: var(--error); font-size: 0.85rem; margin: 0; }

/* ---------- Video widget ---------- */
#video-widget {
    position: fixed; top: 60px; left: 10px; z-index: 60;
    background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border); border-radius: 10px;
    padding: 6px; backdrop-filter: blur(6px);
}
.video-widget-frame { width: 180px; max-width: 40vw; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
.video-widget-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
#video-widget.collapsed .video-widget-frame { display: none; }
.video-widget-toggle {
    position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); border: none; cursor: pointer; font-size: 0.7rem; line-height: 1; z-index: 1;
}

/* ---------- Tutorial overlay ---------- */
#tutorial-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tutorial-card {
    background: var(--bg-2); border: 1px solid var(--glass-border); border-radius: var(--radius);
    padding: 24px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.tutorial-step-body { min-height: 90px; }
.tutorial-step-body h3 { margin: 0 0 8px; }
.tutorial-step-body p { color: var(--text-dim); margin: 0; line-height: 1.5; }
.tutorial-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 10px; }
.tutorial-actions #tutorial-skip { background: none; border: none; color: var(--text-dim); cursor: pointer; }
.tutorial-actions .big-btn { width: auto; padding: 10px 20px; }

/* ---------- Bonus gallery: grid + fullscreen viewer ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.gallery-thumb {
    aspect-ratio: 1; border-radius: 10px; overflow: hidden; cursor: pointer; border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.gallery-thumb:hover { transform: scale(1.05); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.missing { font-size: 0.65rem; color: var(--text-dim); text-align: center; padding: 6px; line-height: 1.3; }
#gallery-fullscreen {
    position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.92); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px;
}
#gallery-fullscreen-img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 8px; animation: gallery-fade-in 0.25s ease; }
.gallery-fullscreen-hint { color: var(--text-dim); font-size: 0.8rem; }

/* ---------- Admin panel ---------- */
#modal-admin .settings-actions { flex-direction: column; }
#modal-admin .settings-actions button { width: 100%; }

/* ---------- Memorial ---------- */
.memorial-pill { cursor: pointer; color: var(--text-dim); font-family: inherit; }
.memorial-pill:hover { color: var(--text); }
.memorial-box { text-align: center; }
.gravestone { display: flex; flex-direction: column; align-items: center; margin: 10px 0 16px; }
.gravestone-shape {
    width: 200px; padding: 18px 14px 22px; background: #8a8f98; color: #2a2d33;
    border-radius: 90px 90px 8px 8px; border: 3px solid #6d727a; font-family: Georgia, serif;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.25);
}
.gravestone-rip { font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 8px; }
.gravestone-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.gravestone-dates { font-size: 0.75rem; margin-bottom: 6px; }
.gravestone-cause { font-size: 0.68rem; font-style: italic; line-height: 1.4; }
.gravestone-mound { width: 240px; height: 16px; background: #4a3b2a; border-radius: 50%; margin-top: -4px; }
.memorial-bio { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; text-align: left; }