/* ===== Base — Lex & J claymorphic theme ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Pink */ --pink-50: #FFF0F5; --pink-100: #FFD9E5; --pink-200: #FFB8CF; --pink-300: #FF8FB1; --pink-400: #F26891; --pink-500: #D94B7A; /* Blue */ --blue-50: #EEF6FF; --blue-100: #D6E8FF; --blue-200: #B5D4FF; --blue-300: #7FB8FF; --blue-400: #5A99F0; --blue-500: #3D7AD1; /* Lavender */ --lav-100: #F1E8FF; --lav-200: #E4D6FF; --lav-300: #C4B0F5; /* Neutrals */ --cream: #FFF6EE; --cream-2: #FFE4EE; --ink: #2B1F2A; --ink-soft: #5A4754; --line: #F5D9E5; --white: #FFFFFF; /* Legacy aliases — keep names so existing rules cascade */ --rose: #D94B7A; --rose-soft: #FF8FB1; --rose-glow: #FFD9E5; --gold: #C4B0F5; /* Gradients */ --grad-spine: linear-gradient(135deg, #FF8FB1 0%, #C4B0F5 50%, #7FB8FF 100%); --grad-soft: linear-gradient(135deg, #FFE4EE 0%, #EFE2FF 50%, #DDEBFF 100%); --grad-warm: linear-gradient(135deg, #FFC9DC 0%, #F4B5D0 100%); --grad-cool: linear-gradient(135deg, #B5D4FF 0%, #C8E0FF 100%); --grad-lav: linear-gradient(135deg, #F1E8FF 0%, #E4D6FF 100%); /* Claymorphic shadow recipes */ --clay-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -8px 14px rgba(255,255,255,.55) inset, 0 8px 0 rgba(214,170,190,.25), 0 18px 28px -8px rgba(180,140,170,.35), 0 4px 10px rgba(180,140,170,.18); --clay-shadow-blue: 0 1px 0 rgba(255,255,255,.95) inset, 0 -8px 14px rgba(255,255,255,.55) inset, 0 8px 0 rgba(140,170,220,.28), 0 18px 28px -8px rgba(120,150,210,.35), 0 4px 10px rgba(120,150,210,.2); --clay-shadow-lav: 0 1px 0 rgba(255,255,255,.95) inset, 0 -8px 14px rgba(255,255,255,.55) inset, 0 8px 0 rgba(170,150,210,.25), 0 18px 28px -8px rgba(140,120,190,.32), 0 4px 10px rgba(140,120,190,.18); /* Legacy shadow aliases */ --shadow: var(--clay-shadow); --shadow-lg: 0 24px 60px -10px rgba(180, 140, 170, 0.35), 0 8px 20px rgba(180,140,170,.18); --radius: 28px; --radius-sm: 18px; /* Theme-driven background blob colors (overridden per theme) */ --bg-blob-1: #FFD9E5; --bg-blob-2: #D6E8FF; --bg-blob-3: #FFE4EE; --bg-blob-4: #E4D6FF; --bg-grad-top: #FFF6F0; --bg-grad-mid: #FFF0F5; --bg-grad-bot: #F0F4FF; /* AI-generated background image per theme (overridden per [data-theme]) */ --bg-image: url('assets/generated/bg-sweet.webp'); --bg-image-opacity: 0.35; --bg-image-blur: 0px; /* Pattern dot colors */ --pattern-dot-1: rgba(255,143,177,.35); --pattern-dot-2: rgba(127,184,255,.35); /* Topbar / surface */ --surface: rgba(255,255,255,.85); --surface-2: rgba(255,255,255,.6); --surface-line: rgba(180,140,170,.22); /* Solid card surface (used by .game-card, modals, etc) — themable */ --card-bg: #FFFFFF; --card-bg-soft: #FAF7F4; /* Topbar bg (semi-transparent overlay over the page bg) */ --topbar-bg: rgba(255, 246, 240, 0.65); --topbar-line: rgba(255, 217, 229, 0.4); } /* ===== Themes (data-theme on ) ===== */ [data-theme="midnight"] { --pink-50: #1f1530; --pink-100: #2a1d40; --pink-200: #ff8fb1; --pink-300: #ffaecf; --pink-400: #ff6e9b; --pink-500: #ff4d85; --blue-50: #14182a; --blue-100: #1a2238; --blue-200: #6ea0ff; --blue-300: #87b4ff; --blue-400: #5d92ec; --blue-500: #3a72d2; --lav-100: #1f1830; --lav-200: #2c2243; --lav-300: #cbb6ff; --cream: #1a1230; --cream-2: #261a3d; --ink: #f5e8f5; --ink-soft: #c5b4cb; --line: rgba(255,143,177,.18); --white: #f5e8f5; --bg-blob-1: rgba(120,40,90,.5); --bg-blob-2: rgba(60,80,160,.45); --bg-blob-3: rgba(150,60,110,.4); --bg-blob-4: rgba(90,60,150,.45); --bg-grad-top: #1c1230; --bg-grad-mid: #1a0f2c; --bg-grad-bot: #15192e; --pattern-dot-1: rgba(255,143,177,.18); --pattern-dot-2: rgba(127,184,255,.18); --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.04); --surface-line: rgba(255,255,255,.12); --bg-image: url('assets/generated/bg-midnight.webp'); --bg-image-opacity: 0.55; --card-bg: #2a1d40; --card-bg-soft: #261a3d; --topbar-bg: rgba(30, 18, 50, 0.72); --topbar-line: rgba(255, 143, 177, 0.18); /* Topbar nav pill */ --nav-pill-bg: rgba(255, 255, 255, 0.06); --nav-pill-border: rgba(255, 255, 255, 0.12); --nav-pill-inner: rgba(255, 255, 255, 0.04); color-scheme: dark; } /* Midnight: brighten nav link text for readability on the dark nav pill */ [data-theme="midnight"] .topbar nav a, [data-theme="midnight"] .topbar nav .nav-link { color: #f0e0f0; } [data-theme="midnight"] .topbar nav a:hover, [data-theme="midnight"] .topbar nav .nav-link:hover { background: rgba(255, 143, 177, 0.18); color: #ffaecf; } [data-theme="midnight"] .nav-menu { background: var(--card-bg); border-color: rgba(255, 255, 255, 0.1); } [data-theme="midnight"] .nav-menu a { color: var(--ink); } [data-theme="midnight"] .nav-menu a:hover { background: rgba(255, 143, 177, 0.12); color: var(--pink-300); } /* ===== Midnight overrides for hardcoded light gradients ===== */ /* Many cards use literal gradient hex values that don't pick up theme variables. We override them per-class for the dark theme so text stays readable. */ [data-theme="midnight"] .clay-pink, [data-theme="midnight"] .clay-blue, [data-theme="midnight"] .clay-lav { background: linear-gradient(180deg, #34234d 0%, #261a3d 100%); border-color: rgba(255,255,255,.06); } [data-theme="midnight"] .clay-pink { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 0 rgba(0,0,0,.25), 0 18px 28px -8px rgba(0,0,0,.45); } [data-theme="midnight"] .clay-blue { background: linear-gradient(180deg, #1f2a4d 0%, #1a213a 100%); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 0 rgba(0,0,0,.25), 0 18px 28px -8px rgba(0,0,0,.45); } [data-theme="midnight"] .clay-lav { background: linear-gradient(180deg, #2c2148 0%, #211934 100%); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 0 rgba(0,0,0,.25), 0 18px 28px -8px rgba(0,0,0,.45); } [data-theme="midnight"] .q-card, [data-theme="midnight"] .wyr-card, [data-theme="midnight"] .td-card { background: linear-gradient(180deg, #34234d 0%, #261a3d 100%); border-color: rgba(255,255,255,.08); } [data-theme="midnight"] .rbt-item.rose, [data-theme="midnight"] .rbt-item.bud, [data-theme="midnight"] .rbt-item.thorn { background: linear-gradient(135deg, #34234d, #261a3d); border-color: rgba(255,255,255,.08); } [data-theme="midnight"] .reason-note, [data-theme="midnight"] .reason-note:nth-child(4n+1), [data-theme="midnight"] .reason-note:nth-child(4n+2), [data-theme="midnight"] .reason-note:nth-child(4n+3), [data-theme="midnight"] .reason-note:nth-child(4n+4) { background: linear-gradient(135deg, #34234d, #261a3d); } [data-theme="midnight"] .game-pack.pack-color-pink, [data-theme="midnight"] .game-pack.pack-color-blue, [data-theme="midnight"] .game-pack.pack-color-lav, [data-theme="midnight"] .game-pack.pack-color-green, [data-theme="midnight"] .shop-pack.pack-color-pink, [data-theme="midnight"] .shop-pack.pack-color-blue, [data-theme="midnight"] .shop-pack.pack-color-lav, [data-theme="midnight"] .shop-pack.pack-color-green { background: linear-gradient(180deg, #34234d 0%, #261a3d 100%); } /* Other tinted backgrounds that contain text */ [data-theme="midnight"] .countdown-display, [data-theme="midnight"] .pulse-card, [data-theme="midnight"] .mood-card, [data-theme="midnight"] .stack-card, [data-theme="midnight"] .ssb-card, [data-theme="midnight"] .bucket-item, [data-theme="midnight"] .watch-card, [data-theme="midnight"] .letter-card, [data-theme="midnight"] .note-card, [data-theme="midnight"] .scene-modal, [data-theme="midnight"] .ts-card, [data-theme="midnight"] .my-card, [data-theme="midnight"] .er-card, [data-theme="midnight"] .pt-photo-frame, [data-theme="midnight"] .modal { background: var(--card-bg); } /* Inputs / textareas inside the dark theme */ [data-theme="midnight"] input[type="text"], [data-theme="midnight"] input[type="search"], [data-theme="midnight"] input[type="email"], [data-theme="midnight"] input[type="number"], [data-theme="midnight"] input[type="date"], [data-theme="midnight"] input[type="time"], [data-theme="midnight"] input[type="url"], [data-theme="midnight"] input[type="password"], [data-theme="midnight"] textarea, [data-theme="midnight"] select { background: rgba(255, 255, 255, 0.06); color: var(--ink); border-color: rgba(255, 255, 255, 0.12); } [data-theme="midnight"] input::placeholder, [data-theme="midnight"] textarea::placeholder { color: rgba(245, 232, 245, 0.4); } /* Chips / pills with light backgrounds */ [data-theme="midnight"] .chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } /* Generic .card (home cards: countdown, mood, spinner) — and its variants */ [data-theme="midnight"] .card { background: linear-gradient(180deg, #34234d 0%, #261a3d 100%); border-color: rgba(255,255,255,.08); } [data-theme="midnight"] .card.spinner-card { background: linear-gradient(180deg, #1f2a4d 0%, #1a213a 100%); } /* Partner-pick highlights & reveal cards */ [data-theme="midnight"] .tot-option.picked-partner { background: linear-gradient(135deg, #3d2c4f, #261a3d); border-color: rgba(196, 181, 253, .4); } [data-theme="midnight"] .bigq-theirs-display.revealed { background: linear-gradient(135deg, #34234d, #261a3d); color: var(--ink); } /* Nav modal items hover */ [data-theme="midnight"] .nav-menu-modal-item:hover { background: linear-gradient(135deg, #3d2c4f, #34234d); } [data-theme="midnight"] .nav-menu-modal-overview { background: linear-gradient(135deg, #3d2c4f, #34234d); border-color: rgba(255,143,177,.3); color: var(--pink-300); } /* Pulse-card / pulse rows / partner-mood highlights */ [data-theme="midnight"] .pulse-row, [data-theme="midnight"] .ssb-grid .ssb-card, [data-theme="midnight"] .bucket-list .bucket-item, [data-theme="midnight"] .watchlist .watch-card, [data-theme="midnight"] .letters-grid .letter-card, [data-theme="midnight"] .notes-list .note-card { background: var(--card-bg); } /* Shop pack covers — keep them tinted but darker */ [data-theme="midnight"] .shop-pack.pack-color-pink .shop-pack-cover { background: linear-gradient(135deg, #4a2538, #34234d); } [data-theme="midnight"] .shop-pack.pack-color-blue .shop-pack-cover { background: linear-gradient(135deg, #1f3454, #1a213a); } [data-theme="midnight"] .shop-pack.pack-color-lav .shop-pack-cover { background: linear-gradient(135deg, #3a2a55, #2c2148); } [data-theme="midnight"] .shop-pack.pack-color-green .shop-pack-cover { background: linear-gradient(135deg, #1f3a30, #1a2a25); } /* Game pack green (catan etc) */ [data-theme="midnight"] .game-pack.pack-color-green { background: linear-gradient(180deg, #1f3a30 0%, #1a2a25 100%); } [data-theme="ocean"] { --bg-image: url('assets/generated/bg-ocean.webp'); --bg-image-opacity: 0.4; --pink-100: #cdeefb; --pink-200: #a3e0ff; --pink-300: #5fc7ff; --pink-400: #2eaee6; --pink-500: #1d87bd; --blue-100: #d6f3ff; --blue-200: #b3e3ff; --blue-300: #7fcaff; --blue-400: #46a8e0; --blue-500: #1d6fae; --lav-100: #d8f4f0; --lav-200: #b9e8e1; --lav-300: #6dc7bd; --cream: #f0f9ff; --cream-2: #d8f0fc; --ink: #0c2436; --ink-soft: #3c596f; --line: #b9e2f4; --white: #ffffff; --bg-blob-1: #b3e3ff; --bg-blob-2: #d8f0fc; --bg-blob-3: #b9e8e1; --bg-blob-4: #cdeefb; --bg-grad-top: #f0f9ff; --bg-grad-mid: #d6f3ff; --bg-grad-bot: #cdeefb; --pattern-dot-1: rgba(46,174,230,.35); --pattern-dot-2: rgba(109,199,189,.35); } [data-theme="forest"] { --bg-image: url('assets/generated/bg-forest.webp'); --bg-image-opacity: 0.4; --pink-100: #e1f0d8; --pink-200: #c2e0a8; --pink-300: #92c478; --pink-400: #6ba34d; --pink-500: #4a7d2f; --blue-100: #ddebd1; --blue-200: #c0d8a8; --blue-300: #92b674; --blue-400: #6e8f50; --blue-500: #4d6932; --lav-100: #e8e2c8; --lav-200: #d4c79a; --lav-300: #a08a5b; --cream: #f8f4e8; --cream-2: #efe6c8; --ink: #2b3520; --ink-soft: #5a6849; --line: #c8dab0; --white: #fffdf2; --bg-blob-1: #c2e0a8; --bg-blob-2: #ddebd1; --bg-blob-3: #efe6c8; --bg-blob-4: #d4c79a; --bg-grad-top: #f8f4e8; --bg-grad-mid: #f0eed8; --bg-grad-bot: #e1f0d8; --pattern-dot-1: rgba(107,163,77,.35); --pattern-dot-2: rgba(160,138,91,.35); } [data-theme="sunset"] { --bg-image: url('assets/generated/bg-sunset.webp'); --bg-image-opacity: 0.4; --pink-100: #ffe2d2; --pink-200: #ffc09a; --pink-300: #ff986a; --pink-400: #ee6e44; --pink-500: #c9482a; --blue-100: #ffdcc8; --blue-200: #ffba90; --blue-300: #ff955f; --blue-400: #ec6b3a; --blue-500: #b34a23; --lav-100: #ffe5d8; --lav-200: #ffc8b0; --lav-300: #f49a78; --cream: #fff1e7; --cream-2: #ffe0d3; --ink: #3a1a08; --ink-soft: #6e3a1f; --line: #ffc8a8; --white: #fff8f1; --bg-blob-1: #ffc09a; --bg-blob-2: #ffba90; --bg-blob-3: #ffe2d2; --bg-blob-4: #ffd0aa; --bg-grad-top: #fff1e7; --bg-grad-mid: #ffe0d3; --bg-grad-bot: #ffc8a8; --pattern-dot-1: rgba(238,110,68,.35); --pattern-dot-2: rgba(244,154,120,.35); } [data-theme="lavender"] { --bg-image: url('assets/generated/bg-lavender.webp'); --bg-image-opacity: 0.4; --pink-100: #efe0ff; --pink-200: #d9bbff; --pink-300: #b58cff; --pink-400: #8e62e6; --pink-500: #6d44b8; --blue-100: #e6daff; --blue-200: #c8a8ff; --blue-300: #a37df0; --blue-400: #8059d4; --blue-500: #5c3ea0; --lav-100: #f5edff; --lav-200: #e2d0ff; --lav-300: #c4a3ff; --cream: #f8f1ff; --cream-2: #ebd9ff; --ink: #2a1640; --ink-soft: #553a76; --line: #e2d0ff; --white: #fdfaff; --bg-blob-1: #e2d0ff; --bg-blob-2: #c8a8ff; --bg-blob-3: #efe0ff; --bg-blob-4: #d9bbff; --bg-grad-top: #f8f1ff; --bg-grad-mid: #ede0ff; --bg-grad-bot: #dac1ff; --pattern-dot-1: rgba(142,98,230,.35); --pattern-dot-2: rgba(196,163,255,.35); } [data-theme="cozy"] { --bg-image: url('assets/generated/bg-cozy.webp'); --bg-image-opacity: 0.4; --pink-100: #f3e2c8; --pink-200: #e6c298; --pink-300: #c89865; --pink-400: #a37340; --pink-500: #7a522a; --blue-100: #f2e8d7; --blue-200: #e3cfa6; --blue-300: #c2a268; --blue-400: #94762e; --blue-500: #6e5318; --lav-100: #f1e6d3; --lav-200: #dfc7a0; --lav-300: #b88f59; --cream: #faf3e6; --cream-2: #efe2c8; --ink: #3a230f; --ink-soft: #6e4f2e; --line: #e3cfa6; --white: #fffbf0; --bg-blob-1: #e6c298; --bg-blob-2: #f3e2c8; --bg-blob-3: #efe2c8; --bg-blob-4: #dfc7a0; --bg-grad-top: #faf3e6; --bg-grad-mid: #efe2c8; --bg-grad-bot: #e0c694; --pattern-dot-1: rgba(163,115,64,.3); --pattern-dot-2: rgba(184,143,89,.3); } [data-theme="starwars"] { /* Galactic — deep space with gold/saber-blue accents */ --pink-50: #0e1628; --pink-100: #18223b; --pink-200: #ffd700; --pink-300: #ffe85c; --pink-400: #ffd700; --pink-500: #ffb84d; --blue-50: #0a1020; --blue-100: #14203d; --blue-200: #5096ff; --blue-300: #7eb8ff; --blue-400: #4a85f0; --blue-500: #2d65cc; --lav-100: #1a1530; --lav-200: #2c2243; --lav-300: #c4b0f5; --cream: #08101e; --cream-2: #14203d; --ink: #f4ecd0; --ink-soft: #c8b88a; --line: rgba(255, 215, 0, 0.18); --white: #f4ecd0; --bg-blob-1: rgba(80, 40, 130, 0.5); --bg-blob-2: rgba(255, 184, 77, 0.18); --bg-blob-3: rgba(40, 80, 200, 0.35); --bg-blob-4: rgba(255, 215, 0, 0.12); --bg-grad-top: #0a1020; --bg-grad-mid: #08101e; --bg-grad-bot: #050912; --pattern-dot-1: rgba(255, 215, 0, 0.22); --pattern-dot-2: rgba(127, 184, 255, 0.18); --surface: rgba(255, 215, 0, 0.06); --surface-2: rgba(255, 215, 0, 0.04); --surface-line: rgba(255, 215, 0, 0.18); --card-bg: #14203d; --card-bg-soft: #18223b; --topbar-bg: rgba(8, 12, 24, 0.78); --topbar-line: rgba(255, 215, 0, 0.22); --nav-pill-bg: rgba(255, 215, 0, 0.06); --nav-pill-border: rgba(255, 215, 0, 0.2); --nav-pill-inner: rgba(255, 215, 0, 0.04); --bg-image: url('assets/generated/bg-starwars.webp'); --bg-image-opacity: 0.55; --board-wash: rgba(20, 32, 61, 0.78); color-scheme: dark; } /* Star Wars overrides for hardcoded light gradients */ [data-theme="starwars"] .clay-pink, [data-theme="starwars"] .clay-blue, [data-theme="starwars"] .clay-lav, [data-theme="starwars"] .q-card, [data-theme="starwars"] .wyr-card, [data-theme="starwars"] .td-card, [data-theme="starwars"] .card, [data-theme="starwars"] .reason-note, [data-theme="starwars"] .reason-note:nth-child(4n+1), [data-theme="starwars"] .reason-note:nth-child(4n+2), [data-theme="starwars"] .reason-note:nth-child(4n+3), [data-theme="starwars"] .reason-note:nth-child(4n+4) { background: linear-gradient(180deg, #1a2748 0%, #14203d 100%); border-color: rgba(255, 215, 0, 0.18); } [data-theme="starwars"] .topbar nav a, [data-theme="starwars"] .topbar nav .nav-link { color: #f4ecd0; } [data-theme="starwars"] .topbar nav a:hover, [data-theme="starwars"] .topbar nav .nav-link:hover { background: rgba(255, 215, 0, 0.18); color: #ffd700; } [data-theme="starwars"] .nav-menu { background: var(--card-bg); border-color: rgba(255, 215, 0, 0.18); } [data-theme="starwars"] .nav-menu a { color: var(--ink); } [data-theme="starwars"] .nav-menu a:hover { background: rgba(255, 215, 0, 0.12); color: #ffd700; } [data-theme="starwars"] .cn-tile { --cn-tile-bg: #1f2c4d; --cn-tile-border: rgba(255, 215, 0, 0.2); } [data-theme="starwars"] .cd-tile { --cd-tile-bg: #1f2c4d; --cd-tile-border: rgba(255, 215, 0, 0.2); } [data-theme="starwars"] input[type="text"], [data-theme="starwars"] input[type="search"], [data-theme="starwars"] input[type="email"], [data-theme="starwars"] input[type="number"], [data-theme="starwars"] input[type="date"], [data-theme="starwars"] input[type="time"], [data-theme="starwars"] textarea, [data-theme="starwars"] select { background: rgba(255, 215, 0, 0.05); color: var(--ink); border-color: rgba(255, 215, 0, 0.18); } [data-theme="gear5"] { /* Sun God Nika — bright sunny white + crimson red + lightning gold */ --pink-50: #fef2f2; --pink-100: #fee2e2; --pink-200: #fecaca; --pink-300: #f87171; --pink-400: #ef4444; --pink-500: #dc2626; --blue-50: #fffbeb; --blue-100: #fef3c7; --blue-200: #fde047; --blue-300: #fbbf24; --blue-400: #f59e0b; --blue-500: #d97706; --lav-100: #fff7ed; --lav-200: #ffedd5; --lav-300: #fdba74; --cream: #fffaf0; --cream-2: #fef3c7; --ink: #2b1308; --ink-soft: #6b3a1a; --line: rgba(220, 38, 38, 0.28); --white: #ffffff; --bg-blob-1: rgba(251, 191, 36, 0.4); --bg-blob-2: rgba(220, 38, 38, 0.2); --bg-blob-3: rgba(255, 255, 255, 0.6); --bg-blob-4: rgba(253, 224, 71, 0.35); --bg-grad-top: #fffaf0; --bg-grad-mid: #fef3c7; --bg-grad-bot: #fde68a; --pattern-dot-1: rgba(251, 191, 36, 0.4); --pattern-dot-2: rgba(220, 38, 38, 0.25); --surface: rgba(255, 255, 255, 0.88); --surface-2: rgba(255, 255, 255, 0.65); --surface-line: rgba(251, 191, 36, 0.32); --card-bg: #fffefa; --card-bg-soft: #fef9e7; --topbar-bg: rgba(255, 250, 240, 0.78); --topbar-line: rgba(251, 191, 36, 0.4); --bg-image: url('assets/generated/bg-gear5.webp'); --bg-image-opacity: 0.4; --board-wash: rgba(255, 254, 250, 0.78); } [data-theme="naruto"] { /* Konoha — sunset orange + leaf green + warm parchment */ --pink-50: #fff7ed; --pink-100: #ffedd5; --pink-200: #fed7aa; --pink-300: #fb923c; --pink-400: #f97316; --pink-500: #c2410c; --blue-50: #f0fdf4; --blue-100: #dcfce7; --blue-200: #86efac; --blue-300: #4ade80; --blue-400: #22c55e; --blue-500: #16a34a; --lav-100: #fef3c7; --lav-200: #fde68a; --lav-300: #facc15; --cream: #fff5e6; --cream-2: #ffe4c0; --ink: #1e2a3d; --ink-soft: #4a5a72; --line: rgba(249, 115, 22, 0.28); --white: #fffcf5; --bg-blob-1: rgba(249, 115, 22, 0.28); --bg-blob-2: rgba(22, 163, 74, 0.22); --bg-blob-3: rgba(251, 146, 60, 0.25); --bg-blob-4: rgba(254, 215, 170, 0.4); --bg-grad-top: #fff5e6; --bg-grad-mid: #ffe4c0; --bg-grad-bot: #fdba74; --pattern-dot-1: rgba(249, 115, 22, 0.32); --pattern-dot-2: rgba(22, 163, 74, 0.28); --surface: rgba(255, 252, 245, 0.85); --surface-2: rgba(255, 252, 245, 0.6); --surface-line: rgba(249, 115, 22, 0.28); --card-bg: #fff5e0; --card-bg-soft: #ffe4c0; --topbar-bg: rgba(255, 245, 230, 0.72); --topbar-line: rgba(249, 115, 22, 0.32); --bg-image: url('assets/generated/bg-naruto.webp'); --bg-image-opacity: 0.45; --board-wash: rgba(255, 245, 224, 0.78); } [data-theme="hogwarts"] { /* Common Room — parchment + scarlet + gold + candlelit warmth */ --pink-50: #fbf0d8; --pink-100: #f5e2b8; --pink-200: #d9b97a; --pink-300: #c19a3b; --pink-400: #a06621; --pink-500: #7f0a13; --blue-50: #f8ecd0; --blue-100: #ecd9ad; --blue-200: #c19a3b; --blue-300: #a06621; --blue-400: #7f4a18; --blue-500: #5a2810; --lav-100: #fbe8d2; --lav-200: #e8c994; --lav-300: #b88c3a; --cream: #fbf0d8; --cream-2: #f0dfb0; --ink: #2b1408; --ink-soft: #5a3a1a; --line: rgba(193, 154, 59, 0.32); --white: #fffaf0; --bg-blob-1: rgba(193, 154, 59, 0.28); --bg-blob-2: rgba(127, 10, 19, 0.18); --bg-blob-3: rgba(232, 201, 148, 0.4); --bg-blob-4: rgba(160, 102, 33, 0.22); --bg-grad-top: #fbf0d8; --bg-grad-mid: #f0dfb0; --bg-grad-bot: #d9b97a; --pattern-dot-1: rgba(193, 154, 59, 0.32); --pattern-dot-2: rgba(127, 10, 19, 0.22); --surface: rgba(255, 250, 240, 0.85); --surface-2: rgba(255, 250, 240, 0.6); --surface-line: rgba(193, 154, 59, 0.28); --card-bg: #fdf5e0; --card-bg-soft: #f5e2b8; --topbar-bg: rgba(251, 240, 216, 0.72); --topbar-line: rgba(193, 154, 59, 0.32); --bg-image: url('assets/generated/bg-hogwarts.webp'); --bg-image-opacity: 0.42; --board-wash: rgba(253, 245, 224, 0.78); } [data-theme="mint"] { --bg-image: url('assets/generated/bg-mint.webp'); --bg-image-opacity: 0.4; --pink-100: #d1f0e1; --pink-200: #a5e1c2; --pink-300: #6ed1a3; --pink-400: #43b681; --pink-500: #2a8a5d; --blue-100: #d8f2ee; --blue-200: #b4e3dc; --blue-300: #7ec9bd; --blue-400: #51a698; --blue-500: #347a6d; --lav-100: #e6f4eb; --lav-200: #c4e2ce; --lav-300: #93c7a3; --cream: #f1faf2; --cream-2: #d6efde; --ink: #143420; --ink-soft: #355545; --line: #c4e2ce; --white: #f8fff8; --bg-blob-1: #b4e3dc; --bg-blob-2: #c4e2ce; --bg-blob-3: #d6efde; --bg-blob-4: #d1f0e1; --bg-grad-top: #f1faf2; --bg-grad-mid: #d6efde; --bg-grad-bot: #c1e6cc; --pattern-dot-1: rgba(67,182,129,.3); --pattern-dot-2: rgba(81,166,152,.3); } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } html, body { /* No horizontal jitter when scrolling vertically */ overflow-x: hidden; width: 100%; max-width: 100vw; } body { font-family: 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif; font-weight: 500; color: var(--ink); background: var(--cream); line-height: 1.55; min-height: 100vh; /* Prevent the iOS pull-to-refresh from triggering when the user pulls down at the top of the page — feels app-like in the PWA. `contain` is milder than `none` and doesn't break Chrome trackpad inertia on Mac. */ overscroll-behavior-y: contain; transition: background 0.4s ease, color 0.4s ease; /* No `touch-action` on body — let the browser default handle scrolling. Earlier values (`pan-y`, `manipulation`) were causing some Chrome on Mac users to lose two-finger trackpad scroll. Specific elements that need touch-action overrides (3D canvases, etc.) set it themselves. */ } /* Topbar nav is the one element that SHOULD scroll horizontally — restore horizontal touch within it so the swipe-through-nav still works. */ .topbar nav { touch-action: pan-x; } /* Game canvases handle their own input — let them capture touches both ways */ #cabin-canvas, #catan-canvas, #vr-canvas, #cosmos-canvas, #globe-canvas, #eb-canvas { touch-action: none; } /* Belt-and-suspenders for mobile: cap any direct child of body so nothing accidentally pushes the page wider than the viewport. */ @media (max-width: 600px) { main, header, footer, section { max-width: 100vw; overflow-x: hidden; } } /* Background blobs + optional pattern overlay (kept fixed behind everything) */ .app-bg { position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 12% 18%, var(--bg-blob-1) 0%, transparent 42%), radial-gradient(circle at 88% 12%, var(--bg-blob-2) 0%, transparent 40%), radial-gradient(circle at 78% 88%, var(--bg-blob-3) 0%, transparent 38%), radial-gradient(circle at 22% 82%, var(--bg-blob-4) 0%, transparent 40%), linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg-grad-mid) 50%, var(--bg-grad-bot) 100%); pointer-events: none; transition: background 0.4s ease; } /* AI-generated background image — sits on top of the gradient blobs at low opacity so text remains readable. Cross-fades smoothly on theme change. */ .app-bg::after { content: ''; position: absolute; inset: 0; background-image: var(--bg-image); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: var(--bg-image-opacity, 0.35); filter: blur(var(--bg-image-blur, 0px)); transition: opacity 0.5s ease; pointer-events: none; } .app-pattern { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35; } .pattern-dots { background-image: radial-gradient(var(--pattern-dot-1) 1.5px, transparent 1.5px), radial-gradient(var(--pattern-dot-2) 1.5px, transparent 1.5px); background-size: 28px 28px, 28px 28px; background-position: 0 0, 14px 14px; } .pattern-grid { background-image: linear-gradient(rgba(255,143,177,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(127,184,255,.18) 1px, transparent 1px); background-size: 32px 32px; } .pattern-hearts { background-image: url("data:image/svg+xml;utf8,"); background-size: 50px 50px; } .pattern-clouds { background-image: radial-gradient(ellipse 40px 18px at 30% 30%, rgba(255,255,255,.95), transparent 70%), radial-gradient(ellipse 60px 24px at 70% 60%, rgba(214,232,255,.85), transparent 70%), radial-gradient(ellipse 30px 14px at 20% 80%, rgba(255,217,229,.85), transparent 70%); background-size: 240px 200px; } h1, h2, h3, h4, h5 { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-variation-settings: "SOFT" 60, "WONK" 1; font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); } h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 500; } h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; } h3 { font-size: 1.6rem; font-weight: 500; } h4 { font-size: 1.15rem; font-weight: 600; } h5 { font-size: 1rem; font-weight: 600; } p { color: var(--ink-soft); font-weight: 500; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(255,143,177,.4); color: var(--ink); } /* Gradient shimmery text utility (for hero italic spans, eyebrows) */ @keyframes lj-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .gradient-text { background: linear-gradient(90deg, #FF8FB1, #C4B0F5, #7FB8FF, #C4B0F5, #FF8FB1); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lj-shimmer 8s linear infinite; } /* Soft float / bounce animations */ @keyframes lj-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes lj-pulse-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .bounce { animation: lj-bounce 2.2s ease-in-out infinite; } /* Scrollbars */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,143,177,.3); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,143,177,.55); background-clip: content-box; } /* ===== Top bar — claymorphic pill nav ===== */ .topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 16px; /* When the app is installed as a PWA on iOS, env(safe-area-inset-top) is the notch/status-bar height. Adding it as extra top padding keeps content from sliding under the notch in standalone mode. */ padding: calc(18px + env(safe-area-inset-top)) calc(32px + env(safe-area-inset-right)) 18px calc(32px + env(safe-area-inset-left)); background: var(--topbar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--topbar-line); transition: background 0.4s ease, border-color 0.4s ease; } .topbar a, .topbar button { pointer-events: auto; } .topbar nav { flex: 1; justify-content: center; } .topbar .logo { flex-shrink: 0; } .connect-pill { flex-shrink: 0; } .topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative; } @media (max-width: 600px) { .topbar { padding: 14px 16px; gap: 8px; } .topbar-actions { gap: 6px; } .lj-log-btn, .theme-pill { width: 34px; height: 34px; font-size: 15px; } .connect-pill { padding: 6px 12px; font-size: 0.8rem; } } /* Theme switcher button + popover */ .theme-pill { appearance: none; border: 1px solid var(--surface-line); background: var(--surface); border-radius: 999px; width: 38px; height: 38px; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .theme-pill:hover { transform: translateY(-1px) rotate(8deg); } .theme-pill:active { transform: translateY(0); } .theme-popover { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--surface-line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 200; display: none; animation: themePopIn 0.18s ease; } .theme-popover.open { display: block; } .theme-popover h5 { margin: 0 0 10px; font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; } @keyframes themePopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .theme-swatch { appearance: none; border: 2px solid transparent; background: rgba(255,255,255,.4); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 700; color: var(--ink); transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; text-align: left; } .theme-swatch:hover { transform: translateY(-1px); background: rgba(255,255,255,.7); } .theme-swatch.active { border-color: var(--pink-400); background: rgba(255,255,255,.85); box-shadow: 0 2px 0 rgba(180,140,170,.18); } .theme-swatch-emoji { font-size: 16px; } .theme-swatch-bar { display: inline-flex; border-radius: 4px; overflow: hidden; width: 36px; height: 10px; flex-shrink: 0; margin-left: auto; } .theme-swatch-bar > span { flex: 1; display: inline-block; } /* Premium-locked theme swatches (free users) */ .theme-swatch.premium-locked { position: relative; opacity: 0.65; } .theme-swatch.premium-locked:hover { opacity: 0.85; background: rgba(255,255,255,.5); } /* Premium history-lock card (shown at the bottom of lists for free users when older items are hidden). */ .lj-history-locked { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #FFE4EE 0%, #F1E8FF 100%); border-radius: 16px; padding: 14px 18px; margin-top: 16px; box-shadow: var(--clay-shadow-lav); list-style: none; flex-wrap: wrap; } .lj-history-locked-icon { font-size: 1.6rem; flex-shrink: 0; } .lj-history-locked > div { display: flex; flex-direction: column; flex: 1; min-width: 140px; gap: 2px; line-height: 1.3; } .lj-history-locked strong { font-family: 'Fraunces', serif; font-weight: 600; font-size: 0.98rem; color: var(--ink); } .lj-history-locked span:not(.lj-history-locked-icon) { font-size: 0.85rem; color: var(--ink-soft); } .lj-history-locked .btn { padding: 8px 18px; font-size: 0.88rem; flex-shrink: 0; } @media (max-width: 600px) { .lj-history-locked { flex-direction: column; align-items: stretch; text-align: center; } .lj-history-locked > div { align-items: center; min-width: 0; } .lj-history-locked .btn { width: 100%; } } .theme-swatch-lock { position: absolute; top: 4px; right: 4px; font-size: 11px; background: linear-gradient(135deg, #FFB8CF, #C4B0F5); color: #fff; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(180,140,170,0.4); } @media (max-width: 720px) { .theme-popover { right: -32px; } } .logo { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15rem; color: var(--pink-500); text-decoration: none; } .logo-img { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; box-shadow: 0 2px 6px -1px rgba(180,140,170,.35); } [data-theme="midnight"] .logo-img { box-shadow: 0 2px 6px -1px rgba(0,0,0,.5); } .logo span { background: var(--grad-spine); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: -0.005em; } .topbar nav { display: inline-flex; gap: 4px; padding: 6px; background: var(--nav-pill-bg, rgba(255,255,255,.7)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 999px; border: 1px solid var(--nav-pill-border, rgba(255,255,255,.9)); box-shadow: 0 1px 0 var(--nav-pill-inner, rgba(255,255,255,.9)) inset, 0 4px 0 rgba(214,170,190,.18), 0 12px 24px -8px rgba(180,140,170,.3); transition: background 0.4s ease, border-color 0.4s ease; } .topbar nav a, .topbar nav .nav-link { padding: 9px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); transition: all 0.18s ease; } .topbar nav a:hover, .topbar nav .nav-link:hover { background: rgba(255, 217, 229, 0.7); color: var(--pink-500); } .topbar nav .nav-link.active { background: var(--grad-spine); color: white; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -3px 8px rgba(0,0,0,.06) inset, 0 3px 0 rgba(150,90,140,.25), 0 8px 14px -4px rgba(180,100,150,.35); } /* ===== Sections ===== */ main { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .section { padding: 80px 0; } .section.alt { background: transparent; border-radius: 32px; margin: 30px 0; padding: 80px 0; } .section-head { text-align: center; margin-bottom: 52px; } .section-head .eyebrow { margin-bottom: 18px; } .section-head h2 { margin-bottom: 14px; } .section-sub { max-width: 560px; margin: 0 auto; font-size: 1.05rem; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pink-500); background: var(--card-bg); padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 8px 14px -4px rgba(180,140,170,.22); } /* ===== Hero ===== */ .hero { padding: 90px 0 60px; position: relative; overflow: hidden; } .hero-inner { text-align: center; position: relative; z-index: 2; } /* The home page now uses the same theme background image as every other page, so the theme picker actually shows through. The .hero-art element in the HTML is left empty as a no-op (kept for backward compatibility). */ .hero-art { display: none; } /* Heart particle canvas — fixed across the whole viewport, behind everything */ .hero-vfx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.5s ease; } .hero-vfx-canvas.show { opacity: 1; } .hero h1 { margin: 24px auto 20px; max-width: 880px; font-weight: 500; text-wrap: balance; } .lede { max-width: 580px; margin: 0 auto 48px; font-size: 1.12rem; line-height: 1.5; } .cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; max-width: 780px; margin: 0 auto; } .card { background: linear-gradient(180deg, #FFEAF1 0%, #FFD9E5 100%); border-radius: var(--radius); padding: 32px; box-shadow: var(--clay-shadow); border: 1px solid rgba(255,255,255,.8); text-align: left; } .card.spinner-card { background: linear-gradient(180deg, #E8F2FF 0%, #D6E8FF 100%); box-shadow: var(--clay-shadow-blue); } .card-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; background: var(--grad-spine); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; } .spinner-card .card-label { background: linear-gradient(135deg, #5A99F0, #3D7AD1); -webkit-background-clip: text; background-clip: text; color: transparent; } .countdown-display { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .countdown-display #days-num { font-family: 'Fraunces', serif; font-weight: 600; font-size: 5rem; background: linear-gradient(135deg, #F26891, #D94B7A); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 0.9; letter-spacing: -0.02em; } .countdown-unit { font-size: 1.3rem; font-weight: 700; color: var(--ink-soft); } .date-pick { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin-top: 10px; } .date-pick input { margin-top: 8px; display: block; width: 100%; padding: 12px 16px; border: 1px solid rgba(255,143,177,.35); border-radius: 14px; font-family: inherit; font-weight: 700; background: rgba(255,255,255,.7); color: var(--ink); outline: none; } .date-pick input:focus { border-color: var(--pink-300); background: var(--card-bg); } .spinner-card { display: flex; flex-direction: column; align-items: center; } /* Spinning wheel */ .wheel-wrap { position: relative; width: 100%; max-width: 280px; aspect-ratio: 1; margin: 6px auto 14px; } .wheel-pointer { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--pink-500); filter: drop-shadow(0 4px 6px rgba(220, 80, 130, 0.4)); z-index: 4; } .wheel-svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 28px rgba(180, 140, 170, 0.4)) drop-shadow(0 6px 0 rgba(214, 170, 190, 0.3)); } .wheel-spin-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 999px; border: 3px solid white; background: var(--grad-spine); background-size: 200% 200%; color: white; font-family: inherit; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 8px rgba(0,0,0,.1) inset, 0 5px 0 rgba(150,90,140,.4), 0 12px 22px -4px rgba(180,100,150,.45); z-index: 3; transition: transform 0.15s ease; } .wheel-spin-btn:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.06); } .wheel-spin-btn:active:not(:disabled) { transform: translate(-50%, -50%) scale(0.94); } .wheel-spin-btn:disabled { opacity: 0.85; cursor: default; } .wheel-result { width: 100%; } .wheel-winner { padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.85); text-align: center; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 12px 22px -4px rgba(180,140,170,.28); animation: wheel-pop 0.5s cubic-bezier(.34, 1.56, .64, 1); } @keyframes wheel-pop { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } .wheel-winner-tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; color: var(--pink-500); } .wheel-winner-icon { font-size: 2.6rem; margin: 6px 0; } .wheel-winner-label { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; color: var(--ink); } /* Card flip animation (used by 36 Questions, Trivia, Big Questions, etc.) */ .q-card { perspective: 1200px; } .q-card.flipping { animation: q-card-flip 0.55s cubic-bezier(.34, 1.56, .64, 1); } @keyframes q-card-flip { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } /* ===== Buttons — claymorphic ===== */ .btn { appearance: none; font-family: inherit; font-size: 0.92rem; font-weight: 700; padding: 12px 22px; border: 1px solid rgba(255,255,255,.85); background: var(--card-bg); color: var(--ink); border-radius: 999px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 8px rgba(255,255,255,.6) inset, 0 4px 0 rgba(214,170,190,.22), 0 10px 18px -5px rgba(180,140,170,.28); } .btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 8px rgba(255,255,255,.6) inset, 0 6px 0 rgba(214,170,190,.25), 0 14px 22px -6px rgba(180,140,170,.32); } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 0 rgba(214,170,190,.3), 0 6px 12px -4px rgba(180,140,170,.3); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; } .btn.primary { background: var(--grad-spine); background-size: 200% 200%; background-position: 0% 50%; color: white; border: 1px solid rgba(255,255,255,.85); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 8px rgba(0,0,0,.08) inset, 0 5px 0 rgba(150,90,140,.32), 0 12px 20px -5px rgba(180,100,150,.4); } .btn.primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 8px rgba(0,0,0,.08) inset, 0 7px 0 rgba(150,90,140,.32), 0 16px 24px -6px rgba(180,100,150,.45); } .btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -2px 6px rgba(0,0,0,.1) inset, 0 2px 0 rgba(150,90,140,.32), 0 6px 12px -4px rgba(180,100,150,.35); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; box-shadow: none; } .btn.ghost:hover { background: rgba(255, 217, 229, 0.7); color: var(--pink-500); transform: translateY(-1px); box-shadow: none; } .btn.ghost:active { transform: translateY(0); box-shadow: none; } /* Claymorphic primitives (used by the new design's clay-pink/clay-blue/clay-lav cards) */ .clay { background: var(--card-bg); border-radius: 28px; box-shadow: var(--clay-shadow); border: 1px solid rgba(255,255,255,.7); } .clay-pink { background: linear-gradient(180deg, #FFEAF1 0%, #FFD9E5 100%); box-shadow: var(--clay-shadow); border: 1px solid rgba(255,255,255,.8); border-radius: 28px; } .clay-blue { background: linear-gradient(180deg, #E8F2FF 0%, #D6E8FF 100%); box-shadow: var(--clay-shadow-blue); border: 1px solid rgba(255,255,255,.8); border-radius: 28px; } .clay-lav { background: linear-gradient(180deg, #F1E8FF 0%, #E4D6FF 100%); box-shadow: var(--clay-shadow-lav); border: 1px solid rgba(255,255,255,.8); border-radius: 28px; } /* ===== Game cards — claymorphic ===== */ .game-card { background: var(--card-bg); border-radius: 28px; padding: 36px; transition: background 0.4s ease, color 0.4s ease; box-shadow: var(--clay-shadow); border: 1px solid rgba(255,255,255,.7); margin-bottom: 32px; overflow: hidden; } /* AI-generated banner that sits above the game-head — only shown for cards that have a matching banner image (see game-banner injector in app.js). */ .game-banner { margin: -36px -36px 24px; height: 140px; background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 1px solid rgba(255,255,255,.4); position: relative; } .game-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.15) 100%); pointer-events: none; } [data-theme="midnight"] .game-banner { border-bottom-color: rgba(255,255,255,.08); } @media (max-width: 600px) { .game-banner { height: 100px; margin: -24px -24px 18px; } } .game-head { margin-bottom: 24px; } .game-head h3 { margin-bottom: 8px; font-weight: 500; } .game-head p { font-size: 0.98rem; } .q-card { background: linear-gradient(135deg, #FFEAF1, #FFD9E5); border-radius: 22px; padding: 36px; margin-bottom: 18px; min-height: 160px; display: flex; flex-direction: column; justify-content: center; text-align: center; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -8px 14px rgba(255,255,255,.55) inset, 0 6px 0 rgba(214,170,190,.18); border: 1px solid rgba(255,255,255,.8); } .q-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(196,176,245,.45), transparent 70%); opacity: 0.6; pointer-events: none; } .q-meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px; position: relative; } .q-text { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--ink); position: relative; line-height: 1.4; } .game-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* ===== Rose Bud Thorn ===== */ .rbt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .rbt-item { padding: 24px; border-radius: var(--radius-sm); text-align: center; } .rbt-item.rose { background: linear-gradient(135deg, #FFD1DC, #FFE3E0); } .rbt-item.bud { background: linear-gradient(135deg, #DDF0D8, #F0F7E5); } .rbt-item.thorn { background: linear-gradient(135deg, #F8E5D0, #FCEFD9); } .rbt-emoji { font-size: 2rem; display: block; margin-bottom: 8px; } .rbt-item h4 { font-family: 'Fraunces', serif; margin-bottom: 4px; } .rbt-item p { font-size: 0.9rem; } /* ===== Story builder ===== */ .story-area { margin-bottom: 18px; } .story-prompt { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--ink); background: linear-gradient(135deg, var(--cream-2), #FFE3E0); padding: 20px; border-radius: var(--radius-sm); margin-bottom: 12px; } #story-text { width: 100%; min-height: 140px; padding: 16px; font-family: inherit; font-size: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); resize: vertical; background: var(--cream); color: var(--ink); } #story-text:focus { outline: 2px solid var(--rose-soft); outline-offset: 2px; } /* ===== Would You Rather ===== */ .wyr-card { background: linear-gradient(135deg, #FFE3E0, var(--rose-glow)); padding: 36px; border-radius: var(--radius-sm); text-align: center; margin-bottom: 18px; min-height: 140px; display: flex; align-items: center; justify-content: center; } .wyr-text { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--ink); } /* ===== Truth or Dare ===== */ .td-card { background: linear-gradient(135deg, #FCE9DD, #FFE3E0); padding: 32px; border-radius: var(--radius-sm); text-align: center; margin-bottom: 18px; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .td-tag { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; background: var(--card-bg); color: var(--rose); } .td-tag.truth { background: #E5DDF0; color: #6B4F9C; } .td-tag.dare { background: var(--rose); color: white; } [data-theme="midnight"] .td-tag.truth { background: #2a1a4d; color: #d4baff; } /* ===== This or That ===== */ .tot-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 18px; } .tot-option { padding: 28px 20px; font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--ink); background: linear-gradient(135deg, var(--cream-2), #FFE3E0); border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.18s ease; min-height: 100px; } .tot-option:hover { border-color: var(--rose-soft); transform: translateY(-2px); } .tot-option.picked { border-color: var(--rose); background: linear-gradient(135deg, var(--rose-glow), #FFE3E0); } .tot-or { font-family: 'Fraunces', serif; font-style: italic; color: var(--rose); font-size: 1.1rem; } @media (max-width: 600px) { .tot-row { grid-template-columns: 1fr; } .tot-or { padding: 4px; } } /* ===== Filter chips ===== */ .filter-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; } .chip { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.85); background: var(--card-bg); color: var(--ink-soft); font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.18s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 8px 14px -4px rgba(180,140,170,.22); } .chip:hover { transform: translateY(-2px); color: var(--pink-500); } .chip.active { background: var(--grad-spine); border-color: rgba(255,255,255,.5); color: white; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -2px 6px rgba(0,0,0,.06) inset, 0 4px 0 rgba(150,90,140,.28), 0 10px 16px -4px rgba(180,100,150,.35); } /* ===== Ideas grid ===== */ .ideas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .idea { background: var(--card-bg); border-radius: var(--radius-sm); padding: 22px; box-shadow: var(--shadow); cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; } .idea:hover { transform: translateY(-3px); border-color: var(--rose-glow); } .idea-emoji { font-size: 1.8rem; display: block; margin-bottom: 10px; } .idea h4 { font-family: 'Fraunces', serif; margin-bottom: 6px; } .idea p { font-size: 0.9rem; line-height: 1.5; } .idea-tag { display: inline-block; margin-top: 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose); } /* ===== Us section ===== */ .us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; } .add-row { display: flex; gap: 8px; margin-bottom: 16px; } .add-row input { flex: 1; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 0.95rem; background: var(--cream); color: var(--ink); } .add-row input:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .list { list-style: none; } .list li { padding: 12px 16px; background: var(--cream); border-radius: var(--radius-sm); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.95rem; } .list li.done { opacity: 0.55; text-decoration: line-through; } .list li button { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 1.1rem; padding: 0 4px; transition: color 0.15s; } .list li button:hover { color: var(--rose); } .list .item-text { flex: 1; cursor: pointer; } .list.notes li { flex-direction: column; align-items: flex-start; background: linear-gradient(135deg, #FFF, var(--cream-2)); } .list.notes .note-text { font-style: italic; color: var(--ink); width: 100%; } .list.notes .note-meta { font-size: 0.75rem; color: var(--ink-soft); margin-top: 4px; } /* ===== Footer ===== */ footer { text-align: center; padding: 50px 24px 40px; font-size: 0.88rem; color: var(--ink-soft); max-width: 600px; margin: 0 auto; } /* ===== Connect pill (top right) ===== */ .connect-pill { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.9); background: var(--card-bg); color: var(--ink); border-radius: 999px; font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.18s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 8px rgba(255,255,255,.6) inset, 0 4px 0 rgba(214,170,190,.22), 0 10px 18px -6px rgba(180,140,170,.28); } .connect-pill:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 8px rgba(255,255,255,.6) inset, 0 6px 0 rgba(214,170,190,.25), 0 14px 22px -6px rgba(180,140,170,.32); } .presence-dot { width: 9px; height: 9px; border-radius: 999px; background: #FFB142; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 177, 66, 0.22); animation: lj-pulse-soft 2.2s ease-in-out infinite; } .presence-dot.online { background: #5DD49E; box-shadow: 0 0 0 3px rgba(93, 212, 158, 0.25); } .presence-dot.waiting { background: #FFB142; box-shadow: 0 0 0 3px rgba(255, 177, 66, 0.25); } .presence-dot.off { background: #c9c0b8; box-shadow: none; animation: none; } /* ===== Modal ===== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(120, 80, 110, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1300; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; padding: 20px; } .modal-backdrop.show { opacity: 1; pointer-events: auto; } .modal { background: var(--card-bg); border-radius: 28px; padding: 36px 32px 28px; max-width: 460px; width: 100%; box-shadow: var(--clay-shadow); border: 1px solid rgba(255,255,255,.8); position: relative; transform: translateY(8px); transition: transform 0.2s ease; max-height: 88vh; overflow-y: auto; } .modal-backdrop.show .modal { transform: translateY(0); } .modal h3 { font-family: 'Fraunces', serif; margin-bottom: 10px; } .modal-sub { font-size: 0.95rem; margin-bottom: 18px; color: var(--ink-soft); } .modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 1.2rem; color: var(--ink-soft); cursor: pointer; padding: 6px 10px; border-radius: 999px; transition: all 0.15s; } .modal-close:hover { background: var(--cream); color: var(--rose); } .modal-form { display: flex; gap: 8px; margin-bottom: 8px; } .modal-form input { flex: 1; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 0.95rem; background: var(--cream); } .modal-form input:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .share-link { display: flex; gap: 8px; margin: 8px 0 18px; } .share-link input { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; font-family: 'Inter', monospace; font-size: 0.85rem; background: var(--cream); color: var(--ink-soft); } .modal-meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-soft); padding: 10px 0; border-top: 1px solid var(--line); margin-top: 10px; margin-bottom: 8px; } .modal-meta strong { color: var(--ink); } .setup-steps { margin: 0 0 18px 18px; padding: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.7; } .setup-steps li { margin-bottom: 6px; } .setup-steps a { color: var(--rose); text-decoration: underline; } .setup-steps code { background: var(--cream); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; color: var(--rose); } /* ===== Partner pick badge on This-or-That ===== */ .tot-option { position: relative; } .tot-option.picked-partner { border-color: var(--gold); background: linear-gradient(135deg, #FCEFD9, #FFE3D6); } .tot-option[data-badge]:not([data-badge=""])::after { content: attr(data-badge); position: absolute; top: 8px; right: 10px; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; background: var(--rose); color: white; padding: 3px 8px; border-radius: 999px; } .tot-option.picked-partner[data-badge]:not([data-badge=""])::after { background: var(--gold); } /* ===== Mood / Need check-in ===== */ .mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 760px) { .mood-grid { grid-template-columns: 1fr; } } .mood-card-side { background: var(--cream); border-radius: var(--radius-sm); padding: 22px; } .mood-card-side.theirs { background: linear-gradient(135deg, #FFE3E0, var(--cream-2)); display: flex; flex-direction: column; } .mood-side-name { font-family: 'Fraunces', serif; font-size: 1.05rem; margin-bottom: 14px; color: var(--ink); } .mood-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .mood-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 8px 6px; background: var(--card-bg); border: 2px solid transparent; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 0.7rem; color: var(--ink-soft); transition: all 0.15s ease; min-width: 56px; } .mood-btn span:first-child { font-size: 1.4rem; line-height: 1.1; } .mood-btn:hover { transform: translateY(-2px); } .mood-btn.active { border-color: var(--rose); background: var(--rose-glow); color: var(--rose); } .mood-need-label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rose); margin: 8px 0 8px; } .need-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-bg); cursor: pointer; font-family: inherit; font-size: 0.85rem; color: var(--ink-soft); transition: all 0.15s; } .need-btn:hover { border-color: var(--rose-soft); color: var(--rose); } .need-btn.active { background: var(--rose); color: white; border-color: var(--rose); } .mood-note { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 0.92rem; background: var(--card-bg); margin-top: 6px; } .mood-note:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .partner-mood-display { text-align: center; padding: 28px 12px; flex: 1; display: flex; flex-direction: column; justify-content: center; } .partner-mood-empty { color: var(--ink-soft); font-style: italic; font-size: 0.92rem; } .partner-mood-emoji-big { font-size: 4.6rem; display: block; margin-bottom: 6px; line-height: 1; } .partner-mood-portrait { display: block; width: 120px; height: 120px; margin: 0 auto 8px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 20px -4px rgba(180,140,170,.4); border: 2px solid rgba(255,255,255,.6); } [data-theme="midnight"] .partner-mood-portrait { border-color: rgba(255,255,255,.12); box-shadow: 0 6px 20px -4px rgba(0,0,0,.5); } .partner-mood-label { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--ink); margin-bottom: 14px; } .partner-mood-need { display: inline-block; padding: 7px 16px; background: var(--rose); color: white; border-radius: 999px; font-size: 0.88rem; margin-bottom: 12px; } .partner-mood-need .need-prefix { opacity: 0.7; margin-right: 4px; } .partner-mood-note { font-style: italic; color: var(--ink); font-size: 0.95rem; margin: 0 auto 10px; max-width: 280px; line-height: 1.5; } .partner-mood-time { font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.04em; } /* ===== Pulse meter ===== */ .pulse-vis { position: relative; height: 90px; margin: 18px 0 8px; } .pulse-bar { position: absolute; top: 50%; left: 0; right: 0; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #d96868 0%, #e8a86b 28%, #ead37a 50%, #a8c87a 75%, #4caf6f 100%); transform: translateY(-50%); box-shadow: inset 0 1px 4px rgba(0,0,0,0.18); } .pulse-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; z-index: 2; transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .pulse-marker.mine { background: var(--blue-400); color: white; margin-top: 26px; } .pulse-marker.theirs { background: var(--pink-400); color: white; margin-top: -26px; } .pulse-marker::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 999px; border: 3px solid white; left: 50%; transform: translateX(-50%); } .pulse-marker.mine::after { background: var(--blue-400); top: -22px; } .pulse-marker.theirs::after { background: var(--pink-400); bottom: -22px; } #pulse-slider { width: 100%; accent-color: var(--rose); margin: 8px 0 12px; } .pulse-readouts { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; color: var(--ink-soft); } .pulse-readouts strong { color: var(--rose); font-size: 1.2rem; font-family: 'Fraunces', serif; } /* ===== Big questions ===== */ .bigq-prompt-card { margin-bottom: 18px; } .bigq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } @media (max-width: 760px) { .bigq-grid { grid-template-columns: 1fr; } } .bigq-side label { display: block; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rose); margin-bottom: 8px; } #bigq-mine-text { width: 100%; min-height: 130px; padding: 14px; font-family: inherit; font-size: 0.95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); resize: vertical; color: var(--ink); line-height: 1.5; } #bigq-mine-text:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .bigq-theirs-display { min-height: 130px; padding: 14px; background: linear-gradient(135deg, var(--cream-2), #FFE3E0); border-radius: 12px; font-style: italic; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .bigq-theirs-display.revealed { font-style: normal; color: var(--ink); background: linear-gradient(135deg, #FFD1DC, #FFE3E0); } .bigq-status { margin-top: 6px; font-size: 0.78rem; color: var(--ink-soft); font-style: italic; } .bigq-status.shared { color: var(--rose); font-style: normal; font-weight: 500; } /* ===== Doodle canvas ===== */ .canvas-wrap { background: var(--card-bg); border-radius: var(--radius-sm); padding: 0; margin-bottom: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); position: relative; } #doodle { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: var(--card-bg); cursor: crosshair; touch-action: none; } .canvas-tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .color-row { display: flex; gap: 8px; align-items: center; } .swatch { width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--line); background: var(--c, #fff); cursor: pointer; padding: 0; transition: all 0.15s ease; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.85rem; font-weight: 700; } .swatch:hover { transform: scale(1.1); } .swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); } .swatch.eraser { background: var(--card-bg); color: var(--ink-soft); border: 2px dashed var(--line); } .brush-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-soft); } .brush-label input[type="range"] { accent-color: var(--rose); width: 100px; } /* ===== Tap-to-reach button + hearts ===== */ .reach-btn { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 8px; padding: 14px 22px; background: linear-gradient(135deg, var(--rose), var(--rose-soft)); color: white; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 0.95rem; font-weight: 600; box-shadow: 0 10px 30px rgba(196, 69, 105, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .reach-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(196, 69, 105, 0.45); } .reach-btn:active { transform: scale(0.96); } .reach-btn .reach-icon { font-size: 1.3rem; line-height: 1; transform: translateY(-1px); } .reach-btn.pulsing { animation: reachPulse 0.6s ease; } @keyframes reachPulse { 0% { transform: scale(1); } 40% { transform: scale(1.18); box-shadow: 0 18px 40px rgba(196, 69, 105, 0.55); } 100% { transform: scale(1); } } .reach-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; } .heart-float { position: absolute; font-size: 2rem; animation: heartFloat 2.4s ease-out forwards; user-select: none; filter: drop-shadow(0 4px 12px rgba(196, 69, 105, 0.4)); } @keyframes heartFloat { 0% { transform: translateY(0) scale(0.5) rotate(-8deg); opacity: 0; } 15% { transform: translateY(-20px) scale(1.1) rotate(0deg); opacity: 1; } 100% { transform: translateY(-60vh) scale(0.8) rotate(12deg); opacity: 0; } } @media (max-width: 600px) { .reach-btn { padding: 12px 16px; font-size: 0.85rem; right: 14px; bottom: 14px; } .reach-btn .reach-label { display: none; } .reach-btn .reach-icon { font-size: 1.5rem; } } /* ===== Reasons wall ===== */ .us-full { margin-top: 22px; } .reasons-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; } .reasons-empty, .photos-empty { grid-column: 1 / -1; text-align: center; padding: 36px 16px; color: var(--ink-soft); font-style: italic; font-size: 0.92rem; } .reason-note { position: relative; padding: 18px 18px 14px; border-radius: 10px; font-family: 'Fraunces', serif; font-size: 1.02rem; color: var(--ink); line-height: 1.45; box-shadow: 0 4px 10px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); transform: rotate(var(--rot, 0deg)); transition: transform 0.2s ease, box-shadow 0.2s ease; } .reason-note:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.12); z-index: 2; } .reason-note:nth-child(4n+1) { background: linear-gradient(135deg, #FFE3E0, #FFD1DC); } .reason-note:nth-child(4n+2) { background: linear-gradient(135deg, #FCEFD9, #FFE9D6); } .reason-note:nth-child(4n+3) { background: linear-gradient(135deg, #DDF0D8, #F0F7E5); } .reason-note:nth-child(4n+4) { background: linear-gradient(135deg, #E5DDF0, #F0E9F7); } .reason-meta { display: block; margin-top: 12px; font-family: 'Inter', sans-serif; font-size: 0.72rem; color: var(--ink-soft); font-style: italic; } .reason-delete { position: absolute; top: 6px; right: 8px; background: none; border: none; cursor: pointer; color: var(--ink-soft); opacity: 0; transition: opacity 0.15s, color 0.15s; font-size: 0.95rem; padding: 4px 6px; border-radius: 999px; } .reason-note:hover .reason-delete { opacity: 0.5; } .reason-delete:hover { opacity: 1 !important; color: var(--rose); } /* ===== Photo wall ===== */ .photo-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; } .photo-upload-btn { display: inline-flex; align-items: center; cursor: pointer; } .photo-upload-hint { font-size: 0.85rem; color: var(--ink-soft); } .photo-upload-hint.error { color: var(--rose); } .photo-upload-hint.success { color: #4caf6f; } .photo-board { position: relative; width: 100%; height: 620px; margin-top: 18px; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.7) 0, transparent 55%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.6) 0, transparent 55%), linear-gradient(135deg, #FFEAF1 0%, #F1E8FF 50%, #DDEBFF 100%); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -8px 14px rgba(255,255,255,.55); touch-action: none; } .photo-board-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-style: italic; font-size: 0.95rem; pointer-events: none; } .photo-pin { position: absolute; width: 162px; background: var(--card-bg); padding: 8px 8px 4px; cursor: grab; user-select: none; touch-action: none; box-shadow: 0 4px 14px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.08); transition: box-shadow 0.18s ease; border-radius: 3px; will-change: transform, left, top; } .photo-pin:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.1); } .photo-pin.dragging { cursor: grabbing; box-shadow: 0 18px 38px rgba(0,0,0,0.32), 0 4px 8px rgba(0,0,0,0.15); transition: box-shadow 0.1s ease; } .photo-pin img { display: block; width: 146px; height: 146px; object-fit: cover; pointer-events: none; background: var(--cream); } .photo-caption { text-align: center; font-family: 'Fraunces', serif; font-style: italic; font-size: 0.78rem; color: var(--ink-soft); padding: 6px 4px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .photo-pin .photo-delete { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.55); color: white; border: none; border-radius: 999px; width: 22px; height: 22px; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; z-index: 2; } .photo-pin:hover .photo-delete { opacity: 1; } .photo-pin .photo-delete:hover { background: var(--rose); } @media (max-width: 600px) { .photo-board { height: 480px; } .photo-pin { width: 130px; } .photo-pin img { width: 114px; height: 114px; } } /* Lightbox */ .photo-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; z-index: 250; padding: 30px; cursor: zoom-out; animation: lightboxFade 0.2s ease; } .photo-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } @keyframes lightboxFade { from { opacity: 0; } to { opacity: 1; } } /* ===== Nav dropdowns ===== */ .nav-dropdown { position: relative; } .nav-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 4px; } .nav-dropdown > .nav-link::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); margin-left: 2px; opacity: 0.65; transition: transform 0.18s ease; } .nav-dropdown.open > .nav-link::after { transform: rotate(225deg) translate(-1px, -1px); } .nav-menu { /* Dropdowns are no longer used — the menu items are rendered into a modal when the parent nav link is clicked (see .nav-menu-modal). */ display: none !important; } .nav-menu-modal { max-width: 460px; text-align: left; } .nav-menu-modal h3 { font-family: 'Fraunces', serif; font-weight: 500; margin: 0 0 6px; color: var(--ink); } .nav-menu-modal-sub { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 18px; } .nav-menu-modal-items { display: flex; flex-direction: column; gap: 8px; } .nav-menu-modal-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--card-bg); border: 1px solid rgba(255,255,255,.85); border-radius: 14px; font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 8px 14px -4px rgba(180,140,170,.22); } .nav-menu-modal-item:hover { transform: translateX(4px); background: linear-gradient(135deg, #FFF0F4, #FFE3EC); } .nav-menu-modal-arrow { color: var(--pink-400); font-weight: 700; } .nav-menu-modal-overview { background: linear-gradient(135deg, #FFEAF1, #FFD9E5); border-color: var(--pink-200); color: var(--pink-500); margin-bottom: 4px; justify-content: center; } /* Invisible bridge so the cursor can travel from the trigger to the menu without leaving the hover area. */ .nav-menu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-dropdown.open .nav-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-menu a { display: block; padding: 8px 14px; font-size: 0.9rem; font-weight: 500; color: var(--ink); border-radius: 8px; white-space: nowrap; transition: all 0.12s ease; } .nav-menu a:hover { background: var(--rose-glow); color: var(--rose); } /* Active section highlight */ .topbar nav .nav-link.active { background: var(--rose-glow); color: var(--rose); } /* Hide non-active pages — use class on the section itself, no JS dependency for initial state */ main > section { display: none; } main > section.active, main > section.page.active { display: block; } @media (max-width: 760px) { .nav-menu { left: 0; transform: translateY(-4px); min-width: 180px; } .nav-dropdown.open .nav-menu { transform: translateY(0); } } /* ===== Toast ===== */ .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--grad-spine); color: white; padding: 14px 24px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 100; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 5px 0 rgba(150,90,140,.32), 0 14px 28px -6px rgba(180,100,150,.45); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== Shop ===== */ .shop-hearts-banner { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 36px; } .hearts-pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: linear-gradient(135deg, #FFEAF1, #FFD9E5); border-radius: 999px; border: 1px solid rgba(255,255,255,.85); box-shadow: var(--clay-shadow); } .hearts-icon { font-size: 1.6rem; filter: drop-shadow(0 4px 8px rgba(220, 80, 130, 0.35)); } .hearts-count { font-family: 'Fraunces', serif; font-size: 2.2rem; font-weight: 600; background: linear-gradient(135deg, #F26891, #D94B7A); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .hearts-label { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .hearts-tip { text-align: center; font-size: 0.88rem; color: var(--ink-soft); max-width: 540px; margin: 0; line-height: 1.5; } /* Conversation game packs in shop */ .shop-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .game-pack { position: relative; background: var(--card-bg); border-radius: 28px; padding: 24px; border: 1px solid rgba(255,255,255,.8); box-shadow: var(--clay-shadow); display: flex; flex-direction: column; gap: 14px; } .game-pack.pack-color-pink { background: linear-gradient(180deg, #FFEAF1 0%, #FFD9E5 100%); } .game-pack.pack-color-blue { background: linear-gradient(180deg, #E8F2FF 0%, #D6E8FF 100%); box-shadow: var(--clay-shadow-blue); } .game-pack.pack-color-lav { background: linear-gradient(180deg, #F1E8FF 0%, #E4D6FF 100%); box-shadow: var(--clay-shadow-lav); } .game-pack.pack-color-green { background: linear-gradient(180deg, #DDF7E5 0%, #B8EDC8 100%); } .game-pack-head { display: flex; align-items: center; gap: 12px; } .game-pack-icon { font-size: 2rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)); } .game-pack-head h4 { font-family: 'Fraunces', serif; margin: 0; font-weight: 500; font-size: 1.15rem; } .game-pack-desc { font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); margin: 0; } .game-pack-tiers { display: flex; flex-direction: column; gap: 6px; } .game-pack-tier { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 14px; font-family: inherit; font-size: 0.88rem; font-weight: 700; border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.7); color: var(--ink); cursor: pointer; transition: all 0.15s ease; } .game-pack-tier.unlocked { background: rgba(155, 230, 175, 0.4); border-color: rgba(93, 212, 158, 0.5); cursor: default; } .game-pack-tier.unlocked .tier-status { color: #2a6a3e; font-size: 0.78rem; } .game-pack-tier.can-afford { background: rgba(255, 217, 229, 0.85); border-color: var(--pink-300); } .game-pack-tier.can-afford:hover { background: var(--pink-300); color: white; transform: translateY(-2px); } .game-pack-tier.cant-afford { opacity: 0.6; cursor: not-allowed; } .tier-price { font-weight: 800; } /* Locked diff button */ .diff-btn.locked { opacity: 0.55; cursor: not-allowed; } .diff-btn.locked:hover { background: rgba(255, 240, 245, 0.5); color: var(--ink-soft); } /* Difficulty selector — used at the top of games with tiered content */ .diff-selector { display: flex; gap: 6px; margin: 0 0 18px; padding: 6px; background: rgba(255, 240, 245, 0.6); border-radius: 999px; width: fit-content; } .diff-btn { appearance: none; border: none; background: transparent; font-family: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all 0.18s ease; } .diff-btn:hover { background: rgba(255, 217, 229, 0.5); color: var(--pink-500); } .diff-btn.active[data-diff="easy"] { background: linear-gradient(135deg, #DDF7E5, #B8EDC8); color: #2a6a3e; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 3px 0 rgba(120,180,140,.22); } .diff-btn.active[data-diff="hard"] { background: var(--grad-spine); color: white; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 3px 0 rgba(150,90,140,.3); } .diff-btn.active[data-diff="impossible"] { background: linear-gradient(135deg, #C4B0F5, #9B7FE0); color: white; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 3px 0 rgba(110,80,170,.3); } /* Difficulty badges */ .shop-pack-difficulty { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.95); } .shop-pack-difficulty.difficulty-easy { color: #4a9a64; } .shop-pack-difficulty.difficulty-hard { color: #D94B7A; } .shop-pack-difficulty.difficulty-impossible { color: #7B5DC4; } .pack-shelf-difficulty { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 9px; border-radius: 999px; font-family: 'Nunito', sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.85); vertical-align: middle; } .pack-shelf-difficulty.difficulty-easy { color: #4a9a64; } .pack-shelf-difficulty.difficulty-hard { color: #D94B7A; } .pack-shelf-difficulty.difficulty-impossible { color: #7B5DC4; } /* Locked / placeholder pack states */ .shop-pack.locked { opacity: 0.85; } .shop-pack.locked .shop-pack-cover { filter: grayscale(0.3) brightness(0.97); } .shop-pack.placeholder { opacity: 0.6; cursor: not-allowed; } .shop-pack.placeholder:hover { transform: none; box-shadow: var(--clay-shadow); } .shop-pack-lock { position: absolute; top: 14px; right: 14px; font-size: 1.2rem; z-index: 2; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.18)); } .shop-pack-buy { display: flex; align-items: center; justify-content: center; gap: 6px; } .shop-pack-buy strong { font-weight: 700; } .shop-pack-locked, .shop-pack-buy:disabled { cursor: not-allowed; opacity: 0.7; } /* Pack-shelf locked state */ .pack-shelf-pack.locked { opacity: 0.78; } .pack-shelf-locked { text-align: center; padding: 14px; font-size: 0.9rem; color: var(--ink-soft); font-style: italic; } .pack-shelf-locked a { color: var(--pink-500); font-weight: 700; text-decoration: underline; } .pack-shelf-locked strong { color: var(--pink-500); font-style: normal; } .shop-section-row { display: grid; grid-template-columns: 1fr; gap: 36px; } .shop-game-block { display: flex; flex-direction: column; gap: 18px; } .shop-game-title { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 500; margin: 0; text-align: center; } .shop-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; } .shop-pack { position: relative; background: var(--card-bg); border-radius: 28px; padding: 22px; border: 1px solid rgba(255,255,255,.8); box-shadow: var(--clay-shadow); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; gap: 16px; /* Fixed card height so every pack — across both Murder + Escape grids — lines up button-to-button. Tall enough for any description we ship. */ min-height: 480px; } .shop-pack:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -8px 14px rgba(255,255,255,.55) inset, 0 12px 0 rgba(214,170,190,.28), 0 24px 36px -10px rgba(180,140,170,.4); } .shop-pack-cover { border-radius: 22px; padding: 28px 18px; text-align: center; background-color: #f8d6e5; background-image: var(--grad-warm); background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -8px 14px rgba(255,255,255,.45) inset; position: relative; overflow: hidden; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; } /* Dark fade at the bottom so the icon/name/count read well over photographic covers */ .shop-pack-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%); border-radius: 22px; pointer-events: none; } .shop-pack-cover > * { position: relative; z-index: 1; } /* Pack-color gradients only apply when there's no AI cover (background-image isn't overridden by inline). The :not check is a no-op CSS-wise; the inline style attribute always wins due to higher specificity. */ .shop-pack.pack-color-pink .shop-pack-cover { background-image: linear-gradient(135deg, #FFC9DC 0%, #F4B5D0 100%); } .shop-pack.pack-color-blue .shop-pack-cover { background-image: linear-gradient(135deg, #B5D4FF 0%, #C8E0FF 100%); } .shop-pack.pack-color-lav .shop-pack-cover { background-image: linear-gradient(135deg, #E4D6FF 0%, #C4B0F5 100%); } .shop-pack.pack-color-green .shop-pack-cover { background-image: linear-gradient(135deg, #C8EFCE 0%, #A8DDB0 100%); } .shop-pack-icon { font-size: 2rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); margin-bottom: 6px; } .shop-pack-name { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: #fff; margin-bottom: 4px; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.3); } .shop-pack-count { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.6); } .shop-pack-desc { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; text-align: center; flex: 1; /* Equalize description height across cards so the two side-by-side grids (Murder Mysteries + Escape Rooms) line up button-to-button. */ min-height: 4.5em; display: flex; align-items: center; justify-content: center; } .shop-pack-open, .shop-pack-buy, .shop-pack-premium, .shop-pack-locked { align-self: stretch; } /* Shop modal — pack contents reveal */ .shop-modal { max-width: 580px; padding: 28px 24px; } .shop-modal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 143, 177, 0.18); } .shop-modal-icon { font-size: 3rem; flex-shrink: 0; } .shop-modal-head h3 { font-family: 'Fraunces', serif; margin: 0 0 4px; font-weight: 500; } .shop-modal-head p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; } .shop-modal-items { display: flex; flex-direction: column; gap: 12px; } .shop-modal-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--cream); border-radius: 16px; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset; } .shop-modal-item-info { flex: 1; min-width: 0; } .shop-modal-item-info h4 { font-family: 'Fraunces', serif; margin: 0 0 4px; font-weight: 500; font-size: 1.08rem; } .shop-modal-item-info p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; } .shop-item-play { flex-shrink: 0; padding: 10px 16px; font-size: 0.82rem; } /* Pack-shelf layout used by Mystery + Escape idle screens */ .pack-shelf { width: 100%; display: flex; flex-direction: column; gap: 16px; } .pack-shelf-pack { background: var(--card-bg); border: 1px solid rgba(255,255,255,.8); border-radius: 22px; padding: 18px 20px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 12px 22px -8px rgba(180,140,170,.28); } .pack-shelf-pack.pack-color-pink { background: linear-gradient(135deg, #FFEAF1, #FFD9E5); } .pack-shelf-pack.pack-color-blue { background: linear-gradient(135deg, #E8F2FF, #D6E8FF); } .pack-shelf-pack.pack-color-lav { background: linear-gradient(135deg, #F1E8FF, #E4D6FF); } .pack-shelf-pack.pack-color-green { background: linear-gradient(135deg, #DDF7E5, #B8EDC8); } .pack-shelf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .pack-shelf-icon { font-size: 2rem; flex-shrink: 0; } .pack-shelf-head h4 { font-family: 'Fraunces', serif; margin: 0 0 2px; font-weight: 500; font-size: 1.15rem; } .pack-shelf-head p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.45; } .pack-shelf-cases { display: flex; flex-direction: column; gap: 6px; } .pack-shelf-case { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.85); border-radius: 14px; font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: all 0.15s ease; text-align: left; } .pack-shelf-case:hover { background: var(--card-bg); transform: translateX(4px); box-shadow: 0 4px 10px -2px rgba(180,140,170,.18); } .pack-shelf-case-arrow { color: var(--pink-400); font-weight: 700; flex-shrink: 0; margin-left: 12px; } @media (min-width: 900px) { .shop-section-row { grid-template-columns: 1fr 1fr; } } /* ===== Shared scene-modal (used by Escape Room + Murder Mystery) ===== */ .scene-modal-backdrop { position: fixed; inset: 0; background: rgba(120, 80, 110, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; animation: scene-fade 0.2s ease; } @keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } } .scene-modal { position: relative; background: var(--card-bg); border-radius: 28px; box-shadow: var(--clay-shadow); border: 1px solid rgba(255,255,255,.8); padding: 32px 28px; max-width: 520px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; animation: scene-pop 0.22s cubic-bezier(0.2, 0.8, 0.4, 1.2); } @keyframes scene-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .scene-modal-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 1.1rem; color: var(--ink-soft); cursor: pointer; width: 32px; height: 32px; border-radius: 999px; transition: all 0.15s ease; } .scene-modal-close:hover { background: var(--rose-glow); color: var(--rose); } /* ===== Escape Room — interactive scene ===== */ .er-scene-wrap { display: flex; flex-direction: column; gap: 12px; } .er-scene-bar { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .er-scene { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, #FFD9E5 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, #D6E8FF 0%, transparent 55%), linear-gradient(180deg, #FFF6F0 0%, #F1E8FF 50%, #DDEBFF 100%); box-shadow: var(--clay-shadow); border: 1px solid rgba(255,255,255,.8); } /* When an AI room shot is set inline via background-image, ensure it cover-fits */ .er-scene-with-art { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } /* Per-room scene themes */ .er-scene-library { background: radial-gradient(ellipse at 30% 30%, #F1E8FF 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, #FFE3D6 0%, transparent 55%), linear-gradient(180deg, #FFF6EE 0%, #F4ECDA 60%, #E5D0B8 100%); } .er-scene-cathedral { background: radial-gradient(ellipse at 50% 20%, #FFE3EC 0%, transparent 60%), radial-gradient(ellipse at 50% 80%, #E4D6FF 0%, transparent 55%), linear-gradient(180deg, #F8EDFF 0%, #DEC8F0 60%, #C0A0DC 100%); } .er-scene-witch { background: radial-gradient(ellipse at 30% 20%, #DDF7E5 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, #E4D6FF 0%, transparent 55%), linear-gradient(180deg, #F0F5E8 0%, #C8DFC0 60%, #9CB890 100%); } .er-scene-manor { background: radial-gradient(ellipse at 30% 20%, #E4D6FF 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, #FFE3EC 0%, transparent 55%), linear-gradient(180deg, #ECE0F5 0%, #C8B0E0 60%, #8E6FB0 100%); } .er-scene-carnival { background: radial-gradient(ellipse at 25% 25%, #FFD9E5 0%, transparent 55%), radial-gradient(ellipse at 75% 75%, #FFEEB5 0%, transparent 55%), linear-gradient(180deg, #FFEAE5 0%, #FFC0D8 50%, #C4A0F8 100%); } .er-scene-station { background: radial-gradient(ellipse at 50% 30%, #B5D4FF 0%, transparent 55%), radial-gradient(ellipse at 50% 90%, #C4B0F5 0%, transparent 55%), linear-gradient(180deg, #E0EDFF 0%, #A8C5FA 60%, #5A6FB8 100%); } .er-scene-timeloop { background: radial-gradient(ellipse at 30% 50%, #E4D6FF 0%, transparent 55%), radial-gradient(ellipse at 70% 50%, #FFEEB5 0%, transparent 55%), linear-gradient(180deg, #F8EAFA 0%, #C8B5E8 50%, #8C7BB0 100%); } .er-scene-cyberpunk { background: radial-gradient(ellipse at 25% 25%, #FFB8CF 0%, transparent 50%), radial-gradient(ellipse at 75% 75%, #7FB8FF 0%, transparent 50%), linear-gradient(180deg, #2B1F3A 0%, #4A2A5C 50%, #2B1F3A 100%); } .er-scene-cave { background: radial-gradient(ellipse at 50% 30%, #B5D4FF 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, #FFEEB5 0%, transparent 55%), linear-gradient(180deg, #4A6F90 0%, #2C4858 60%, #1A2A38 100%); } .er-scene-tomb { background: radial-gradient(ellipse at 50% 30%, #FFEEB5 0%, transparent 55%), radial-gradient(ellipse at 50% 90%, #FFC9A0 0%, transparent 55%), linear-gradient(180deg, #F4DBA0 0%, #C9A065 60%, #8B6535 100%); } .er-scene-temple { background: radial-gradient(ellipse at 30% 30%, #DDF7E5 0%, transparent 55%), radial-gradient(ellipse at 70% 70%, #FFEEB5 0%, transparent 55%), linear-gradient(180deg, #C8E5C4 0%, #8DBE85 60%, #4F7A4A 100%); } .er-scene-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255, 180, 140, 0.14) 0%, transparent 60%), radial-gradient(ellipse at 50% 0%, rgba(196, 176, 245, 0.18) 0%, transparent 50%); pointer-events: none; } /* Lighthouse-specific scene elements — only render visually inside .er-scene-lighthouse */ .er-scene:not(.er-scene-lighthouse) .er-scene-window, .er-scene:not(.er-scene-lighthouse) .er-scene-glow { display: none; } .er-scene-window { position: absolute; top: 12%; right: 6%; width: 22%; height: 26%; border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, rgba(181, 212, 255, 0.55) 0%, rgba(214, 232, 255, 0.7) 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), inset 0 0 12px rgba(255, 255, 255, 0.4), 0 8px 18px -4px rgba(120, 150, 210, 0.25); pointer-events: none; } .er-scene-window::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.85); transform: translateY(-50%); } .er-scene-window::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: rgba(255, 255, 255, 0.85); transform: translateX(-50%); } .er-scene-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 70%, rgba(255, 209, 132, 0.18) 0%, transparent 50%); animation: er-flicker 4s ease-in-out infinite; } @keyframes er-flicker { 0%, 100% { opacity: 0.85; } 45% { opacity: 1; } 60% { opacity: 0.7; } 85% { opacity: 0.95; } } .er-hotspot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border: 2px solid transparent; border-radius: 18px; background: rgba(255, 255, 255, 0.55); color: var(--ink); font-family: inherit; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .er-hotspot[disabled] { cursor: not-allowed; } .er-hotspot-icon { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); } .er-hotspot-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .er-hotspot-locked { opacity: 0.55; filter: grayscale(0.4); background: rgba(255, 255, 255, 0.3); } .er-hotspot-solved { background: rgba(155, 230, 175, 0.35); border-color: rgba(93, 212, 158, 0.6); color: var(--ink-soft); } .er-hotspot-solved .er-hotspot-icon { color: #4a9a64; } .er-hotspot-active { background: rgba(255, 217, 229, 0.85); border-color: var(--pink-300); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 5px rgba(255, 143, 177, 0.18), 0 0 28px rgba(255, 143, 177, 0.4); animation: er-pulse 1.8s ease-in-out infinite; } .er-hotspot-active:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 8px rgba(255, 143, 177, 0.25), 0 0 36px rgba(255, 143, 177, 0.55); } @keyframes er-pulse { 0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 5px rgba(255, 143, 177, 0.18), 0 0 28px rgba(255, 143, 177, 0.4); } 50% { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 10px rgba(255, 143, 177, 0.28), 0 0 44px rgba(255, 143, 177, 0.65); } } .er-scene-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 0.85rem; font-style: italic; color: var(--ink-soft); pointer-events: none; font-weight: 600; } .er-scene-hint.success { color: #4a9a64; font-style: normal; } /* Discovered clues panel — persistent reveal text under the scene */ .er-discovered { margin-top: 14px; padding: 16px 20px; background: linear-gradient(180deg, #FFF8E8, #FFEFCE); border: 1px dashed var(--gold); border-radius: 18px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; } .er-discovered-title { font-family: 'Fraunces', serif; font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; color: #8E6F2A; } .er-discovered ul { margin: 0; padding-left: 20px; list-style-type: '✦ '; } .er-discovered li { font-family: 'Fraunces', serif; font-size: 0.95rem; line-height: 1.55; color: var(--ink); margin-bottom: 4px; } .er-modal { max-width: 520px; } .er-modal-wide { max-width: 720px; } .er-modal.shake { animation: er-shake 0.36s; } .er-modal.flash-success { animation: er-flash-success 0.7s ease; } @keyframes er-flash-success { 0%, 100% { box-shadow: var(--shadow-lg); } 50% { box-shadow: 0 0 0 6px rgba(107, 170, 117, 0.35), 0 12px 40px rgba(107, 170, 117, 0.4); } } /* ---- Find puzzle (hidden objects) ---- */ .er-find-scene { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 25% 35%, rgba(255, 217, 229, 0.55) 0%, transparent 45%), radial-gradient(ellipse at 75% 65%, rgba(214, 232, 255, 0.5) 0%, transparent 45%), linear-gradient(135deg, #FFF6F0 0%, #F1E8FF 50%, #DDEBFF 100%); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -8px 14px rgba(255,255,255,.55) inset, 0 6px 0 rgba(214,170,190,.15); margin-bottom: 12px; } .er-find-bg { position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 80%, rgba(196, 176, 245, 0.18) 0%, transparent 40%), radial-gradient(circle at 70% 20%, rgba(255, 143, 177, 0.14) 0%, transparent 35%); pointer-events: none; } .er-find-object { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: rgba(255, 255, 255, 0.4); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; opacity: 0.55; filter: grayscale(0.3); transition: all 0.18s ease; } .er-find-object:hover { opacity: 1; filter: none; transform: translate(-50%, -50%) scale(1.18); background: rgba(255, 217, 229, 0.85); border-color: var(--pink-200); box-shadow: 0 6px 14px -4px rgba(255, 143, 177, 0.4); } .er-find-object.found { opacity: 1; filter: none; background: rgba(155, 230, 175, 0.55); border-color: rgba(93, 212, 158, 0.7); cursor: default; animation: er-found-pop 0.4s ease; } @keyframes er-found-pop { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.4); } 100% { transform: translate(-50%, -50%) scale(1); } } .er-find-check { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: #5DD49E; color: white; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; box-shadow: 0 4px 8px rgba(93, 212, 158, 0.4); } .er-find-counter { text-align: center; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; } /* ---- Lock puzzle (4-dial combination) ---- */ .er-lock { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px; background: linear-gradient(145deg, #F1E8FF 0%, #E4D6FF 100%); border-radius: 22px; border: 1px solid rgba(255,255,255,.8); box-shadow: var(--clay-shadow-lav); margin-bottom: 12px; } .er-lock.shake { animation: er-shake 0.36s; } .er-lock.opened { background: linear-gradient(145deg, #DDF7E5 0%, #B8EDC8 100%); transition: background 0.5s ease; } .er-lock-row { display: flex; gap: 12px; } .er-lock-dial { display: flex; flex-direction: column; align-items: center; gap: 4px; } .er-lock-arrow { width: 38px; height: 26px; border: 1px solid rgba(255,255,255,.8); background: var(--card-bg); border-radius: 8px; color: var(--ink-soft); cursor: pointer; font-size: 0.85rem; font-weight: 700; transition: all 0.15s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 rgba(170,150,210,.22), 0 4px 8px -2px rgba(140,120,190,.22); } .er-lock-arrow:hover { background: var(--lav-100); color: var(--lav-300); transform: translateY(-1px); } .er-lock-arrow:active { transform: scale(0.92); } .er-lock-num { width: 44px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--cream); border-radius: 6px; font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700; color: var(--ink); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 -2px 4px rgba(255, 255, 255, 0.6); } .er-lock.opened .er-lock-num { background: #b8e2bd; color: #2a4a30; } /* ---- Coop puzzle (asymmetric) ---- */ .er-coop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .er-coop-card { padding: 14px; border-radius: var(--radius-sm); background: var(--cream); border: 1px solid var(--line); } .er-coop-card.mine { background: linear-gradient(180deg, #FFEAF1, #FFD9E5); border-color: rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 8px 14px -4px rgba(180,140,170,.22); } .er-coop-card.theirs { background: linear-gradient(180deg, #E8F2FF, #D6E8FF); border: 1px dashed rgba(127, 184, 255, 0.5); opacity: 0.85; } .er-coop-card.theirs.solo { background: linear-gradient(180deg, #F1E8FF, #E4D6FF); border-style: solid; border-color: rgba(255,255,255,.8); opacity: 1; } .er-coop-card-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--rose); margin-bottom: 8px; } .er-coop-card.theirs:not(.solo) .er-coop-card-label { color: var(--ink-soft); } .er-coop-card-content { font-family: 'Fraunces', serif; font-size: 1.1rem; line-height: 1.55; color: var(--ink); white-space: pre-wrap; } .er-coop-hidden { font-style: italic; color: var(--ink-soft); font-size: 0.95rem; } .er-coop-solo-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--gold); margin-left: 4px; } @media (max-width: 600px) { .er-coop { grid-template-columns: 1fr; } .er-find-scene { aspect-ratio: 4 / 3; } } @keyframes er-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .er-modal-tag { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px; } .er-modal-puzzle { margin-bottom: 16px; } /* ===== Murder Mystery — interactive scene ===== */ .my-stage { min-height: 280px; } .my-idle { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; } .my-idle-icon { font-size: 2.4rem; } .my-idle-text { font-style: italic; color: var(--ink-soft); } .my-case-list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 520px; } .my-case-card { padding: 18px; background: linear-gradient(135deg, #FFF0F4, #FFE3EC); border: 1px solid var(--rose-glow); border-radius: var(--radius-sm); text-align: left; } .my-case-card h4 { font-family: 'Fraunces', serif; margin: 0 0 8px; color: var(--ink); } .my-case-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; } .my-active { display: flex; flex-direction: column; gap: 14px; } .my-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .my-header h4 { font-family: 'Fraunces', serif; margin: 0; color: var(--rose); } .my-end-btn { font-size: 0.85rem; color: var(--ink-soft); } .my-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .my-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-soft); font-family: inherit; font-size: 0.88rem; cursor: pointer; transition: all 0.15s ease; } .my-tab:hover { border-color: var(--rose-soft); color: var(--rose); } .my-tab.active { background: var(--rose); border-color: var(--rose); color: white; } .my-tab-accuse { font-weight: 600; } .my-tab-content { padding: 6px 0; } /* Universal win-screen banner — appears on game victory states. Used by Connections, Codenames, Wavelength, Wordle, Catan, Mystery, Escape. */ .lj-win-art { width: 100%; aspect-ratio: 16 / 9; max-height: 220px; border-radius: 16px; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0 0 16px; box-shadow: 0 8px 24px -6px rgba(0,0,0,0.25); animation: ljWinPop 0.6s cubic-bezier(.2,.9,.4,1.1); } @keyframes ljWinPop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } } [data-theme="midnight"] .lj-win-art { box-shadow: 0 8px 24px -6px rgba(0,0,0,0.6); } /* Catan win overlay — sits above the canvas inside .catan-board-wrap */ .catan-board-wrap { position: relative; } .catan-win-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; pointer-events: none; z-index: 10; } .catan-win-overlay .lj-win-art { margin: 0; max-height: none; } /* AI-generated case cover — atmospheric scene at top of each Murder Mystery brief */ .my-case-cover { width: 100%; aspect-ratio: 4 / 3; max-height: 280px; border-radius: 18px; background-size: cover; background-position: center; background-repeat: no-repeat; margin-bottom: 24px; position: relative; overflow: hidden; box-shadow: 0 6px 18px -4px rgba(0,0,0,.25); display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px 20px; } .my-case-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%); border-radius: 18px; } .my-case-cover-title { position: relative; z-index: 1; font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); text-wrap: balance; } .my-section-title { font-family: 'Fraunces', serif; margin: 0 0 8px; } .my-setting { font-family: 'Fraunces', serif; font-size: 1.05rem; line-height: 1.6; color: var(--ink); margin: 0 0 14px; } .my-victim { padding: 14px; background: var(--cream); border-left: 3px solid var(--rose); border-radius: 6px; margin-bottom: 14px; } .my-victim-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose); } .my-victim p { margin: 6px 0 0; } .my-tip { font-size: 0.88rem; color: var(--ink-soft); font-style: italic; } .my-suspects, .my-locations { display: flex; flex-direction: column; gap: 12px; } .my-suspect-card, .my-location-card { padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); } .my-suspect-card.interviewed, .my-location-card.investigated { background: var(--cream); border-color: var(--rose-glow); } .my-suspect-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .my-suspect-emoji { font-size: 2rem; } .my-suspect-card h4, .my-location-card h4 { font-family: 'Fraunces', serif; margin: 0; } .my-suspect-role { font-size: 0.85rem; color: var(--ink-soft); margin: 2px 0 0; } .my-suspect-alibi, .my-location-desc { font-size: 0.92rem; color: var(--ink); margin: 0 0 10px; line-height: 1.5; } .my-suspect-secret { font-size: 0.92rem; padding: 10px 12px; background: var(--rose-glow); border-radius: 6px; margin: 8px 0 0; color: var(--ink); line-height: 1.5; } .my-clues { list-style: none; padding: 0; margin: 0; } .my-clues li { padding: 8px 12px; background: var(--rose-glow); border-radius: 6px; margin-bottom: 6px; font-size: 0.92rem; line-height: 1.5; color: var(--ink); } .my-clues li::before { content: '🔍 '; margin-right: 4px; } .my-evidence { display: flex; flex-direction: column; gap: 10px; } .my-evidence-item { padding: 12px 14px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 6px; } .my-evidence-loc { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose); } .my-evidence-item p { margin: 4px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink); } .my-evidence-empty { text-align: center; font-style: italic; color: var(--ink-soft); padding: 30px 0; } .my-notes { display: flex; flex-direction: column; gap: 6px; } .my-notes label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .my-notes textarea { width: 100%; min-height: 180px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-bg); font-family: inherit; font-size: 0.95rem; color: var(--ink); line-height: 1.55; resize: vertical; } .my-notes textarea:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .my-accuse-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--cream); border: 1px dashed var(--rose-glow); border-radius: var(--radius-sm); } .my-accuse-form h4 { font-family: 'Fraunces', serif; margin: 0; } .my-accuse-form > p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); font-style: italic; } .my-accuse-form label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin-top: 4px; } .my-accuse-form select, .my-accuse-form input { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-bg); font-family: inherit; font-size: 0.95rem; color: var(--ink); } .my-accuse-form select:focus, .my-accuse-form input:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .my-accuse-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; } .my-verdict { padding: 18px; border-radius: var(--radius-sm); text-align: center; } .my-verdict.correct { background: linear-gradient(135deg, #DDF0D8, #F0F7E5); border: 1px solid #b3d8a3; } .my-verdict.wrong { background: linear-gradient(135deg, #FFE3E0, #FFD1DC); border: 1px solid var(--rose-glow); } .my-verdict h4 { font-family: 'Fraunces', serif; font-size: 1.4rem; margin: 0 0 8px; } .my-verdict-line { font-size: 1rem; margin: 0 0 12px; color: var(--ink); } .my-verdict-truth { margin-top: 14px; padding: 14px; background: var(--card-bg); border-radius: 6px; text-align: left; } .my-verdict-truth h5 { font-family: 'Fraunces', serif; margin: 0 0 8px; color: var(--rose); font-size: 1.05rem; } .my-verdict-truth p { font-size: 0.95rem; line-height: 1.55; color: var(--ink); margin: 0 0 8px; } .my-verdict-truth p:last-child { margin-bottom: 0; } /* ===== Murder Mystery — interactive scene ===== */ .my-scene { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: radial-gradient(ellipse at 20% 0%, rgba(255, 217, 229, 0.5) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(196, 176, 245, 0.45) 0%, transparent 55%), linear-gradient(180deg, #FFF6F0 0%, #F1E8FF 50%, #FFD9E5 100%); border-radius: 28px; color: var(--ink); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--clay-shadow); } .my-scene-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 143, 177, 0.2); } .my-scene-header h4 { font-family: 'Fraunces', serif; margin: 0 0 4px; background: var(--grad-spine); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; font-size: 1.6rem; } .my-scene-sub { font-size: 0.92rem; color: var(--ink-soft); font-style: italic; margin: 0; } .my-scene .my-end-btn { color: var(--ink-soft); } .my-scene .my-end-btn:hover { background: rgba(255, 217, 229, 0.7); color: var(--pink-500); } .my-section-label { font-family: 'Nunito', sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; } .my-floor-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .my-room-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; background: var(--card-bg); border: 1px solid rgba(255,255,255,.8); border-radius: 18px; color: var(--ink); font-family: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 10px 18px -5px rgba(180,140,170,.25); } .my-room-tile:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 0 rgba(214,170,190,.22), 0 16px 24px -5px rgba(180,140,170,.32); } .my-room-tile.investigated { background: linear-gradient(180deg, #DDF7E5, #B8EDC8); border-color: rgba(93, 212, 158, 0.4); } .my-room-icon { font-size: 2rem; } .my-room-name { font-size: 0.9rem; font-weight: 700; color: var(--ink); } .my-room-status { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .my-room-tile.investigated .my-room-status { color: #4a9a64; } .my-suspects-bar { } .my-suspects-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .my-suspect-avatar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; width: 88px; background: var(--card-bg); border: 1px solid rgba(255,255,255,.85); border-radius: 18px; color: var(--ink); font-family: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.18), 0 10px 16px -4px rgba(180,140,170,.25); } .my-suspect-avatar:hover { transform: translateY(-3px); } .my-suspect-avatar.interviewed { background: linear-gradient(180deg, #DDF7E5, #B8EDC8); border-color: rgba(93, 212, 158, 0.4); } .my-avatar-emoji { font-size: 2.1rem; line-height: 1; } .my-avatar-name { font-size: 0.78rem; font-weight: 700; color: var(--ink); } .my-avatar-flag { position: absolute; top: 6px; right: 8px; font-size: 0.85rem; color: #4a9a64; font-weight: 700; } .my-tools-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 14px; border-top: 1px solid rgba(255, 143, 177, 0.18); } .my-tool-accuse { font-weight: 700; } .my-status-bar { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px; font-size: 0.78rem; color: var(--ink-soft); padding-top: 4px; font-weight: 600; } .my-status-bar strong { color: var(--pink-500); } /* Modals — suspect, location, notes, evidence, accuse */ .my-modal { max-width: 540px; } .my-suspect-modal .my-suspect-head, .my-location-modal .my-location-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .my-suspect-emoji.big, .my-location-emoji { font-size: 2.6rem; } .my-suspect-modal h4, .my-location-modal h4 { font-family: 'Fraunces', serif; margin: 0; } .my-suspect-modal .my-suspect-role { font-size: 0.88rem; color: var(--ink-soft); margin: 4px 0 0; } .my-suspect-section, .my-location-clues { margin-bottom: 14px; } .my-suspect-section h5, .my-location-clues h5 { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--rose); margin: 0 0 8px; } .my-suspect-section p, .my-location-desc { font-size: 0.95rem; line-height: 1.55; color: var(--ink); margin: 0; } .my-suspect-section.secret { padding: 12px 14px; background: var(--rose-glow); border-radius: var(--radius-sm); } .my-suspect-section.secret h5 { color: var(--rose); } .my-location-modal .my-location-desc { margin-bottom: 14px; font-style: italic; color: var(--ink-soft); } .my-notes-modal h4, .my-evidence-modal h4, .my-accuse-form h4 { font-family: 'Fraunces', serif; margin: 0 0 8px; } .my-modal-sub { font-size: 0.88rem; color: var(--ink-soft); font-style: italic; margin: 0 0 14px; } .my-notes-modal textarea { width: 100%; min-height: 200px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); font-family: inherit; font-size: 0.95rem; color: var(--ink); line-height: 1.55; resize: vertical; } .my-notes-modal textarea:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } @media (max-width: 600px) { .my-floor-plan { grid-template-columns: repeat(2, 1fr); } .my-suspect-avatar { width: 72px; } } /* ===== Escape Room ===== */ .er-stage { min-height: 280px; } .er-idle, .er-active, .er-complete { display: flex; flex-direction: column; gap: 14px; } .er-idle, .er-complete { align-items: center; } .er-idle-icon, .er-icon { font-size: 2.4rem; } .er-idle-text { font-style: italic; color: var(--ink-soft); } .er-room-list { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 12px; } .er-room-card { padding: 18px; background: linear-gradient(135deg, #FCEFD9, #FFE3D6); border: 1px solid var(--cream-2); border-radius: var(--radius-sm); text-align: left; } .er-room-card h4 { font-family: 'Fraunces', serif; margin: 0 0 8px; color: var(--ink); } .er-room-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.5; } .er-progress { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .er-puzzle { padding: 22px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); } .er-prompt { font-family: 'Fraunces', serif; font-size: 1.08rem; line-height: 1.65; color: var(--ink); margin: 0; } .er-hint { margin-top: 14px; padding: 10px 14px; background: var(--rose-glow); border-radius: 6px; font-size: 0.92rem; color: var(--ink); line-height: 1.5; } .er-input-form { display: flex; gap: 8px; } .er-input-form input { flex: 1; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 1rem; background: var(--card-bg); color: var(--ink); } .er-input-form input:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .er-feedback { text-align: center; font-size: 0.92rem; color: var(--rose); font-style: italic; margin: 0; } .er-feedback.success { color: #4a7c4a; font-style: normal; font-weight: 600; } .er-complete { text-align: center; padding: 24px 0; } .er-complete h4 { font-family: 'Fraunces', serif; font-size: 1.6rem; color: var(--rose); margin: 0; } .er-time { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); margin: 0; } .er-epilogue { font-family: 'Fraunces', serif; font-size: 1.05rem; line-height: 1.65; color: var(--ink); max-width: 480px; margin: 14px auto; } /* ===== Battleship ===== */ .bs-status { text-align: center; font-family: 'Fraunces', serif; font-size: 1rem; color: var(--ink-soft); font-style: italic; margin: 4px 0 14px; min-height: 1.5em; } .bs-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; justify-items: center; margin: 8px 0; } .bs-side { display: flex; flex-direction: column; align-items: center; gap: 10px; } .bs-side-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .bs-side:nth-child(2) .bs-side-label { color: var(--rose); } .bs-grid { display: flex; flex-direction: column; gap: 2px; } .bs-row { display: grid; grid-template-columns: var(--bs-label, 16px) repeat(var(--bs-count, 10), var(--bs-cell, 24px)); gap: 2px; } .bs-coord { font-size: 0.65rem; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-weight: 600; } .bs-cell { width: var(--bs-cell, 24px); height: var(--bs-cell, 24px); background: var(--card-bg); border: 1px solid var(--line); border-radius: 3px; position: relative; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .bs-cell.bs-placing { cursor: pointer; } .bs-cell.bs-placing:hover { border-color: var(--rose-soft); } .bs-cell.bs-ship { background: var(--lav-300); border-color: #8B6FD0; } .bs-cell.bs-pending { background: var(--rose-soft); border-color: var(--rose); box-shadow: 0 0 0 1px var(--rose) inset; animation: bs-pending-pulse 1.4s ease-in-out infinite; } @keyframes bs-pending-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } .bs-cell.bs-targetable { cursor: crosshair; } .bs-cell.bs-targetable:hover { background: var(--rose-glow); border-color: var(--rose-soft); } .bs-cell.bs-hit, .bs-cell.bs-hit-on-me { background: var(--rose); border-color: var(--rose); } .bs-cell.bs-hit::after, .bs-cell.bs-hit-on-me::after { content: '✕'; color: white; font-size: 0.85rem; font-weight: 700; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .bs-cell.bs-miss, .bs-cell.bs-miss-on-me { background: var(--cream-2); border-color: var(--line); } .bs-cell.bs-miss::after, .bs-cell.bs-miss-on-me::after { content: '·'; color: var(--ink-soft); font-weight: 700; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .bs-cell.bs-sunk { background: var(--pink-500); border-color: var(--pink-500); } .bs-placement { margin-top: 14px; padding: 14px; background: var(--cream); border: 1px dashed var(--rose-glow); border-radius: var(--radius-sm); } .bs-ships { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; justify-content: center; } .bs-ship-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; color: var(--ink-soft); transition: all 0.15s ease; } .bs-ship-tag.placed { background: var(--cream-2); color: var(--ink-soft); text-decoration: line-through; opacity: 0.7; } .bs-ship-tag.active { background: var(--rose); border-color: var(--rose); color: var(--white); box-shadow: 0 4px 14px rgba(196, 69, 105, 0.25); } .bs-ship-tag.active .bs-ship-cells { color: var(--white); } .bs-ship-name { font-weight: 600; } .bs-ship-cells { letter-spacing: 1px; color: #8e7f72; } .bs-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .bs-end { text-align: center; margin-top: 14px; } .bs-reset-bar { display: flex; justify-content: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .bs-reset-link { font-size: 0.85rem; color: var(--ink-soft); } .bs-reset-link:hover { color: var(--rose); } @media (max-width: 720px) { .bs-grid { --bs-cell: 20px; --bs-label: 14px; } .bs-grids { gap: 12px; } } @media (max-width: 480px) { .bs-grid { --bs-cell: 16px; --bs-label: 12px; } .bs-cell { border-radius: 2px; } .bs-coord { font-size: 0.6rem; } } /* ===== Drawing Telephone ===== */ .tel-stage { min-height: 280px; display: flex; align-items: center; justify-content: center; } .tel-idle, .tel-waiting, .tel-turn, .tel-reveal { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .tel-icon { font-size: 2.4rem; } .tel-prompt-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); margin: 0; } .tel-prompt-text { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--ink); margin: 0; max-width: 480px; } #tel-canvas { width: 100%; max-width: 480px; height: auto; background: var(--card-bg); border: 2px dashed var(--rose-glow); border-radius: var(--radius-sm); cursor: crosshair; touch-action: none; } .tel-canvas-tools { display: flex; gap: 10px; justify-content: center; } .tel-hint { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; margin: 0; } .tel-drawing-display { max-width: 480px; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card-bg); } .tel-guess-form { display: flex; gap: 8px; width: 100%; max-width: 480px; } .tel-guess-form input { flex: 1; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 0.95rem; background: var(--cream); color: var(--ink); } .tel-guess-form input:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .tel-reveal-title { font-family: 'Fraunces', serif; color: var(--rose); margin: 0; } .tel-reveal-list { display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 480px; width: 100%; } .tel-reveal-item { width: 100%; padding: 14px 18px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: center; } .tel-reveal-item.prompt { background: linear-gradient(135deg, #FFF0F4, #FFE3EC); border-color: var(--rose-glow); } .tel-reveal-item.drawing { background: var(--card-bg-soft, var(--card-bg)); } [data-theme="midnight"] .tel-reveal-item.prompt { background: linear-gradient(135deg, #34234d, #261a3d); border-color: rgba(255,143,177,.3); } .tel-reveal-item.drawing img { display: block; margin: 8px auto 0; max-width: 100%; height: auto; border-radius: 6px; } .tel-reveal-item p { font-family: 'Fraunces', serif; color: var(--ink); margin: 6px 0 0; font-size: 1.05rem; } .tel-reveal-tag { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .tel-arrow { color: var(--rose); font-size: 1.4rem; line-height: 1; } /* ===== Photo Memory ===== */ .pt-empty { text-align: center; padding: 30px 16px; color: var(--ink-soft); font-style: italic; font-size: 0.95rem; } .pt-empty a { color: var(--rose); text-decoration: underline; } .pt-active { display: flex; flex-direction: column; gap: 16px; } .pt-photo { display: block; max-width: 100%; max-height: 360px; margin: 0 auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--card-bg); } .pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pt-side { display: flex; flex-direction: column; gap: 6px; } .pt-side label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .pt-side textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-bg); font-family: 'Fraunces', Georgia, serif; font-size: 1rem; color: var(--ink); line-height: 1.5; resize: vertical; } .pt-side textarea:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .pt-status { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; } .pt-status.shared { color: var(--rose); font-style: normal; } .pt-theirs-display { min-height: 110px; padding: 14px 16px; background: var(--cream); border-radius: var(--radius-sm); font-family: 'Fraunces', Georgia, serif; color: var(--ink-soft); line-height: 1.55; font-style: italic; white-space: pre-wrap; } .pt-theirs-display.revealed { background: linear-gradient(135deg, #FFF0F4, #FFE3EC); color: var(--ink); font-style: normal; } @media (max-width: 600px) { .pt-grid { grid-template-columns: 1fr; } } /* ===== Daily Wordle ===== */ .wordle-date { text-align: center; font-family: 'Fraunces', serif; font-size: 1rem; color: var(--ink-soft); font-style: italic; margin: 4px 0 18px; } .wordle-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; justify-items: center; margin-bottom: 4px; } .wordle-side { display: flex; flex-direction: column; align-items: center; gap: 10px; } .wordle-side-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .wordle-side.theirs .wordle-side-label { color: var(--rose); } .wordle-board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; } .wordle-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; } .wordle-cell { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 700; border: 2px solid var(--line); border-radius: 6px; background: var(--card-bg); color: var(--ink); text-transform: uppercase; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease; } .wordle-cell.typing { border-color: var(--rose-soft); transform: scale(1.05); } .wordle-cell.correct { background: #6BAA75; border-color: #6BAA75; color: white; } .wordle-cell.present { background: #E0A458; border-color: #E0A458; color: white; } .wordle-cell.absent { background: #B5A89E; border-color: #B5A89E; color: white; } .wordle-input-row { display: flex; gap: 8px; margin-top: 18px; justify-content: center; } .wordle-input-row input { width: 220px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.22em; text-align: center; text-transform: uppercase; background: var(--cream); color: var(--ink); } .wordle-input-row input:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .wordle-input-row input:disabled { opacity: 0.55; } .wordle-status { margin-top: 14px; text-align: center; font-size: 0.95rem; color: var(--ink-soft); min-height: 1.5em; } @media (max-width: 600px) { .wordle-cell { width: 34px; height: 34px; font-size: 1.05rem; border-width: 1.5px; } .wordle-grids { gap: 14px; } .wordle-input-row input { width: 180px; font-size: 1rem; letter-spacing: 0.18em; } } /* ===== Hangman ===== */ .hm-stage { min-height: 360px; } .hm-idle { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0; } .hm-icon { font-size: 2.6rem; } .hm-idle-text { font-style: italic; color: var(--ink-soft); text-align: center; } .hm-game { display: flex; flex-direction: column; gap: 18px; align-items: center; } .hm-top { display: flex; align-items: center; gap: 24px; width: 100%; justify-content: center; flex-wrap: wrap; } .hm-gallows-wrap { display: flex; justify-content: center; } .hm-gallows { width: 120px; height: 150px; color: var(--pink-500); filter: drop-shadow(0 4px 8px rgba(196, 69, 105, 0.18)); } .hm-status { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 140px; } .hm-lives { display: inline-block; padding: 8px 14px; background: linear-gradient(135deg, #DDF7E5, #B8EDC8); border: 1px solid rgba(93, 212, 158, 0.4); border-radius: 999px; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; color: #2a6a3e; } .hm-lives.low { background: linear-gradient(135deg, #FFE3E0, #FFD1DC); border-color: var(--pink-300); color: var(--pink-500); } .hm-wrongs { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .hm-word { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; margin: 6px 0; } .hm-word .hm-letter { display: inline-block; min-width: 28px; text-align: center; border-bottom: 3px solid var(--pink-300); padding: 4px 6px; color: var(--ink); transition: color 0.15s ease; } .hm-word .hm-letter.shown { border-bottom-color: var(--pink-500); color: var(--pink-500); } .hm-word .hm-letter.missed { color: rgba(120, 80, 110, 0.5); } .hm-word .hm-space { display: inline-block; min-width: 18px; } .hm-alphabet { display: grid; grid-template-columns: repeat(13, 1fr); gap: 5px; width: 100%; max-width: 540px; } .hm-letter-btn { appearance: none; border: 1px solid rgba(255, 255, 255, 0.85); background: var(--card-bg); font-family: inherit; font-size: 0.95rem; font-weight: 700; color: var(--ink); width: 100%; aspect-ratio: 1; border-radius: 8px; cursor: pointer; transition: transform 0.1s ease, background 0.15s ease; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 rgba(214,170,190,.18), 0 4px 8px -2px rgba(180,140,170,.18); } .hm-letter-btn:not(:disabled):hover { transform: translateY(-2px); background: var(--pink-50); } .hm-letter-btn:not(:disabled):active { transform: translateY(0); } .hm-letter-btn:disabled { cursor: not-allowed; } .hm-letter-btn.correct { background: linear-gradient(135deg, #DDF7E5, #B8EDC8); color: #2a6a3e; border-color: rgba(93, 212, 158, 0.4); } .hm-letter-btn.wrong { background: linear-gradient(135deg, #FFE3E0, #FFD1DC); color: var(--pink-500); border-color: var(--pink-200); text-decoration: line-through; opacity: 0.65; } .hm-result { text-align: center; font-family: 'Fraunces', serif; font-size: 1.2rem; padding: 14px 18px; border-radius: 14px; width: 100%; max-width: 480px; } .hm-result.won { background: linear-gradient(135deg, #DDF7E5, #B8EDC8); color: #2a6a3e; } .hm-result.lost { background: linear-gradient(135deg, #FFE3E0, #FFD1DC); color: var(--pink-500); } .hm-result strong { font-weight: 700; } /* 1v1 mode pieces */ .hm-mode-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; max-width: 540px; } .hm-mode-row .btn { flex: 1 1 220px; } .hm-mode-hint { font-size: 0.85rem; color: var(--ink-soft); text-align: center; max-width: 480px; line-height: 1.45; margin: 0; } .hm-mode-hint strong { color: var(--ink); font-weight: 700; } .hm-selecting, .hm-waiting { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; text-align: center; width: 100%; } .hm-selecting h4, .hm-waiting h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem; margin: 0; color: var(--ink); } .hm-selecting-hint { font-size: 0.9rem; color: var(--ink-soft); max-width: 420px; margin: 0; line-height: 1.45; } .hm-pick-form { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 460px; justify-content: center; } .hm-pick-form input { flex: 1 1 240px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 143, 177, 0.4); background: rgba(255, 255, 255, 0.7); font-family: inherit; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); outline: none; } .hm-pick-form input:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.18); } .hm-mode-banner { width: 100%; max-width: 480px; padding: 10px 14px; border-radius: 12px; font-size: 0.92rem; font-weight: 600; text-align: center; letter-spacing: 0.01em; } .hm-mode-banner.picker { background: linear-gradient(135deg, #FFEAF1, #FFD9E5); color: var(--pink-500); } .hm-mode-banner.guesser { background: linear-gradient(135deg, #E4D6FF, #D6E8FF); color: #6B4FB8; } .hm-end-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; max-width: 540px; } .hm-end-row .btn { flex: 1 1 160px; } @media (max-width: 600px) { .hm-alphabet { grid-template-columns: repeat(7, 1fr); } .hm-word { font-size: 1.5rem; } .hm-word .hm-letter { min-width: 22px; } .hm-gallows { width: 100px; height: 125px; } .hm-mode-row .btn, .hm-end-row .btn { flex: 1 1 100%; } } /* ===== Per-game "How to play" guide bar ===== */ .game-guide { margin: 10px 0 0; font-family: 'Inter', system-ui, sans-serif; } .game-guide summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 143, 177, 0.15); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; border: 1px solid rgba(255, 143, 177, 0.3); transition: background 0.15s ease, transform 0.12s ease; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent; } .game-guide summary::-webkit-details-marker { display: none; } .game-guide summary::after { content: '▾'; font-size: 10px; opacity: 0.6; margin-left: 2px; transition: transform 0.2s ease; } .game-guide[open] summary::after { transform: rotate(180deg); } .game-guide summary:hover { background: rgba(255, 143, 177, 0.25); transform: translateY(-1px); } .game-guide[open] summary { background: rgba(255, 143, 177, 0.3); } .game-guide-body { margin-top: 10px; padding: 14px 18px; background: rgba(255, 250, 242, 0.75); border-left: 3px solid rgba(255, 143, 177, 0.55); border-radius: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); animation: gameGuideSlide 0.25s ease; } @keyframes gameGuideSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .game-guide-body ul { margin: 0; padding-left: 22px; } .game-guide-body li { margin-bottom: 5px; } .game-guide-body li:last-child { margin-bottom: 0; } .game-guide-body strong { color: var(--ink); } .game-guide-body kbd { display: inline-block; background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.1); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.4; } .game-guide-tagline { display: block; margin-bottom: 8px; font-style: italic; color: var(--ink); } /* ===== AI-generated game-board backdrops ===== Each game's playing-area wrapper gets a textured tabletop image, MUTED by a translucent --board-wash layer so text/tiles stay readable on top. Theme-aware: light theme washes with cream, midnight washes with deep purple. */ :root { --board-wash: rgba(255, 252, 247, 0.78); /* default washed-cream */ } [data-theme="midnight"] { --board-wash: rgba(40, 26, 64, 0.78); } [data-theme="ocean"] { --board-wash: rgba(240, 250, 255, 0.78); } [data-theme="forest"] { --board-wash: rgba(248, 244, 232, 0.78); } [data-theme="sunset"] { --board-wash: rgba(255, 245, 235, 0.78); } [data-theme="lavender"] { --board-wash: rgba(248, 241, 255, 0.78); } [data-theme="cozy"] { --board-wash: rgba(250, 243, 230, 0.78); } [data-theme="mint"] { --board-wash: rgba(241, 250, 242, 0.78); } [data-theme="starwars"] { --board-wash: rgba(20, 32, 61, 0.82); } [data-theme="hogwarts"] { --board-wash: rgba(253, 245, 224, 0.78); } [data-theme="naruto"] { --board-wash: rgba(255, 245, 224, 0.78); } [data-theme="gear5"] { --board-wash: rgba(255, 254, 250, 0.82); } /* Shared rule: background = wash gradient on top of textured image. Using a linear-gradient with the same start+end color creates a flat translucent overlay above the image. */ .wordle-grids, .cn-grid, .cd-grid, .hm-stage, .bs-grids, .sc-stage, .catan-board-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 18px; } .wordle-grids { background-image: linear-gradient(var(--board-wash), var(--board-wash)), url('assets/generated/board-wordle.webp'); padding: 22px; box-shadow: 0 4px 14px -4px rgba(0,0,0,.15); } .cn-grid { background-image: linear-gradient(var(--board-wash), var(--board-wash)), url('assets/generated/board-connections.webp'); padding: 14px; border-radius: 14px; } .cd-grid { background-image: linear-gradient(var(--board-wash), var(--board-wash)), url('assets/generated/board-codenames.webp'); padding: 14px; border-radius: 14px; } .hm-stage { background-image: linear-gradient(var(--board-wash), var(--board-wash)), url('assets/generated/board-hangman.webp'); padding: 22px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.25); } .bs-grids { background-image: linear-gradient(var(--board-wash), var(--board-wash)), url('assets/generated/board-battleship.webp'); padding: 22px; box-shadow: 0 4px 14px -4px rgba(30,60,100,.25); } .sc-stage { background-image: linear-gradient(var(--board-wash), var(--board-wash)), url('assets/generated/board-scattergories.webp'); padding: 18px; border-radius: 16px; box-shadow: 0 4px 14px -4px rgba(0,0,0,.15); } .catan-board-wrap { background-image: linear-gradient(var(--board-wash), var(--board-wash)), url('assets/generated/board-catan.webp'); padding: 14px; box-shadow: 0 6px 18px -6px rgba(60,40,20,.35); } @media (max-width: 600px) { .wordle-grids, .hm-stage, .bs-grids { padding: 14px; } .cn-grid, .cd-grid { padding: 8px; } } /* ===== Account button (topbar) ===== */ .lj-account-btn { appearance: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--surface-line); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 800; color: var(--ink); transition: transform 0.15s ease, background 0.15s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: relative; } .lj-account-btn:hover { transform: translateY(-1px); } .lj-account-btn .lj-account-icon { line-height: 1; } .lj-account-btn.signed-in { background: linear-gradient(180deg, #fff, #ffe1ec); color: var(--pink-500); border-color: rgba(255,143,177,.4); } [data-theme="midnight"] .lj-account-btn.signed-in { background: rgba(255,143,177,.15); color: #ffaecf; border-color: rgba(255,143,177,.3); } .lj-account-btn.premium::after { content: '⭐'; position: absolute; top: -3px; right: -3px; font-size: 12px; filter: drop-shadow(0 1px 2px rgba(245,158,11,.5)); } /* ===== Auth modal ===== */ .lj-auth-modal-bd { position: fixed; inset: 0; background: rgba(40, 20, 30, 0.55); display: none; align-items: center; justify-content: center; z-index: 1400; padding: 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lj-auth-modal-bd.visible { display: flex; } .lj-auth-modal { background: linear-gradient(180deg, #fffaf2, #ffe9d6); border-radius: 22px; padding: 28px 26px; max-width: 420px; width: 100%; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.35); position: relative; font-family: 'Inter', system-ui, sans-serif; max-height: 90vh; overflow-y: auto; } [data-theme="midnight"] .lj-auth-modal { background: linear-gradient(180deg, #2a1a3d, #1f1530); } [data-theme="starwars"] .lj-auth-modal { background: linear-gradient(180deg, #18223b, #0e1628); } [data-theme="hogwarts"] .lj-auth-modal { background: linear-gradient(180deg, #fdf5e0, #f5e2b8); } [data-theme="naruto"] .lj-auth-modal { background: linear-gradient(180deg, #fff5e0, #ffe4c0); } [data-theme="gear5"] .lj-auth-modal { background: linear-gradient(180deg, #fffefa, #fef3c7); } .lj-auth-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; background: rgba(0,0,0,.06); border-radius: 999px; font-size: 14px; cursor: pointer; color: var(--ink); } .lj-auth-close:hover { background: rgba(0,0,0,.12); } .lj-auth-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; } .lj-auth-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .lj-auth-form input { padding: 12px 14px; border: 1px solid rgba(180,140,170,.3); border-radius: 10px; font-family: inherit; font-size: 14px; background: rgba(255,255,255,.85); color: var(--ink); outline: none; } [data-theme="midnight"] .lj-auth-form input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); } .lj-auth-form input:focus { border-color: var(--pink-400); } .lj-auth-form button { padding: 12px 18px; } .lj-auth-or { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 12px; position: relative; } .lj-auth-or::before, .lj-auth-or::after { content: ''; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--surface-line); } .lj-auth-or::before { left: 0; } .lj-auth-or::after { right: 0; } .lj-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; } .lj-auth-foot { display: flex; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; gap: 8px; } .lj-link-btn { appearance: none; border: none; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(0,0,0,.2); font-family: inherit; } .lj-link-btn:hover { color: var(--pink-500); } .lj-auth-error { margin-top: 12px; color: var(--pink-500); font-size: 13px; font-weight: 600; min-height: 18px; } .lj-auth-success { margin-top: 12px; color: #16a34a; font-size: 13px; font-weight: 600; } /* ===== Account drawer (signed-in version of the modal) ===== */ .lj-account-status { border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; background: rgba(255,255,255,.5); border: 1px solid var(--surface-line); } [data-theme="midnight"] .lj-account-status { background: rgba(255,255,255,.06); } .lj-account-status.premium { background: linear-gradient(135deg, rgba(252,211,77,.25), rgba(245,158,11,.18)); border-color: rgba(245,158,11,.3); } .lj-status-badge { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.08); color: var(--ink); } .lj-account-status.premium .lj-status-badge { background: linear-gradient(180deg, #fde68a, #f59e0b); color: #5a2c0e; } .lj-status-sub { margin-top: 6px; font-size: 12px; color: var(--ink-soft); } .lj-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } @media (max-width: 420px) { .lj-pricing { grid-template-columns: 1fr; } } .lj-price-card { border: 1px solid var(--surface-line); border-radius: 14px; padding: 14px; background: rgba(255,255,255,.7); text-align: center; position: relative; } [data-theme="midnight"] .lj-price-card { background: rgba(255,255,255,.06); } .lj-price-card.popular { border-color: var(--pink-400); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,225,236,.85)); box-shadow: 0 4px 0 rgba(214,75,122,.18); } [data-theme="midnight"] .lj-price-card.popular { background: linear-gradient(180deg, rgba(255,143,177,.18), rgba(255,143,177,.08)); } .lj-price-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--pink-500); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.06em; } .lj-price-name { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; } .lj-price-amount { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; color: var(--ink); margin: 4px 0 2px; } .lj-price-amount span { font-size: 12px; font-weight: 600; color: var(--ink-soft); } .lj-price-savings { font-size: 10px; font-weight: 700; color: #16a34a; margin-bottom: 8px; } .lj-buy-btn { width: 100%; padding: 9px 12px; font-size: 13px; } .lj-account-meta { font-size: 13px; color: var(--ink-soft); text-align: center; margin-top: 12px; font-style: italic; } /* ===== Activity log ===== Bell icon in the topbar opens a panel listing recent partner activity: notes, photos, reasons, surprises, letters, calendar events, mood, etc. Persists across reloads via localStorage. */ .lj-log-btn { appearance: none; position: relative; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--surface-line); background: var(--surface); font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.15s ease, background 0.15s ease; } .lj-log-btn:hover { transform: translateY(-1px); } .lj-log-btn.has-unread { animation: ljLogShake 0.5s ease 1; } @keyframes ljLogShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } } .lj-log-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink-500); color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(217,75,122,.35); border: 2px solid var(--topbar-bg, var(--card-bg)); } .lj-log-count[hidden] { display: none; } .lj-log-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--surface-line); border-radius: 16px; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 210; display: none; animation: themePopIn 0.18s ease; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; } .lj-log-panel.open { display: block; } .lj-log-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; border-bottom: 1px solid var(--surface-line); } .lj-log-head h5 { margin: 0; font-family: 'Fraunces', serif; font-size: 14px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; } .lj-log-clear { appearance: none; border: none; background: transparent; color: var(--ink-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.12s ease, color 0.12s ease; } .lj-log-clear:hover { background: rgba(255,143,177,.15); color: var(--pink-500); } .lj-log-list { max-height: 380px; overflow-y: auto; padding: 6px; } .lj-log-list::-webkit-scrollbar { width: 6px; } .lj-log-list::-webkit-scrollbar-thumb { background: rgba(255,143,177,.3); border-radius: 999px; } .lj-log-empty { text-align: center; font-size: 12px; color: var(--ink-soft); font-style: italic; padding: 24px 14px; } .lj-log-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px; border-radius: 10px; cursor: pointer; transition: background 0.12s ease, transform 0.12s ease; position: relative; } .lj-log-item:hover { background: rgba(255,143,177,.1); transform: translateX(-1px); } .lj-log-item.unread::before { content: ''; position: absolute; top: 14px; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-500); box-shadow: 0 0 6px rgba(217,75,122,.4); } .lj-log-item.unread { padding-left: 16px; } .lj-log-icon { font-size: 20px; line-height: 1.1; flex-shrink: 0; } .lj-log-body { flex: 1; min-width: 0; } .lj-log-title { font-weight: 700; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lj-log-sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lj-log-time { font-size: 10px; color: var(--ink-soft); font-weight: 600; margin-top: 3px; } @media (max-width: 720px) { .lj-log-panel { right: -32px; width: 320px; } } /* ===== Art Gallery ===== */ .gallery-stage { display: flex; flex-direction: column; gap: 28px; } .gallery-section { display: flex; flex-direction: column; gap: 12px; } .gallery-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .gallery-section-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .gallery-section-count { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); background: rgba(255,255,255,.5); padding: 3px 10px; border-radius: 999px; } [data-theme="midnight"] .gallery-section-count { background: rgba(255,255,255,.06); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .gallery-tile { appearance: none; border: 1px solid var(--surface-line); background: var(--card-bg); padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; position: relative; display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: 'Inter', system-ui, sans-serif; text-align: left; } .gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(180,140,170,.4); } [data-theme="midnight"] .gallery-tile:hover { box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); } .gallery-tile-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: rgba(0,0,0,0.04); } .gallery-tile-img.aspect-square { aspect-ratio: 1 / 1; } .gallery-tile-img.aspect-wide { aspect-ratio: 16 / 9; } .gallery-tile-img.aspect-banner { aspect-ratio: 16 / 9; } .gallery-tile-img.aspect-cover { aspect-ratio: 4 / 3; } .gallery-tile-label { font-size: 12px; font-weight: 700; color: var(--ink); padding: 8px 10px; border-top: 1px solid var(--surface-line); background: var(--card-bg-soft, var(--card-bg)); } .gallery-tile-where { display: block; font-size: 10px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; font-style: italic; } /* Lightbox (click a tile to zoom) */ .gallery-lightbox-bd { position: fixed; inset: 0; background: rgba(10, 6, 18, 0.92); display: none; align-items: center; justify-content: center; z-index: 1500; padding: 24px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .gallery-lightbox-bd.visible { display: flex; animation: galleryFadeIn 0.2s ease; } @keyframes galleryFadeIn { from { opacity: 0; } to { opacity: 1; } } .gallery-lightbox-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease; z-index: 2; } .gallery-lightbox-close:hover { background: rgba(255,255,255,0.25); } .gallery-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; font-size: 28px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.15s ease; z-index: 2; line-height: 1; } .gallery-lightbox-nav:hover { background: rgba(255,255,255,0.25); } .gallery-lightbox-nav.prev { left: 18px; } .gallery-lightbox-nav.next { right: 18px; } .gallery-lightbox-frame { max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 12px; } .gallery-lightbox-frame img { max-width: 100%; max-height: calc(90vh - 50px); border-radius: 14px; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.6); display: block; } .gallery-lightbox-caption { color: rgba(255,255,255,0.85); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .gallery-lightbox-caption .where { display: block; font-size: 12px; color: rgba(255,255,255,0.65); font-style: italic; font-weight: 500; margin-top: 4px; } @media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .gallery-tile-label { font-size: 11px; padding: 6px 8px; } .gallery-lightbox-nav { width: 40px; height: 40px; font-size: 24px; } } /* ===== Shared Calendar ===== */ .cal-stage { display: flex; flex-direction: column; gap: 16px; } .cal-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cal-nav-btn { font-size: 22px; padding: 4px 14px; font-weight: 700; line-height: 1; } .cal-month-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 600; margin: 0; flex: 1; text-align: center; color: var(--ink); text-wrap: balance; } .cal-today-btn { font-size: 13px; padding: 6px 14px; } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: uppercase; text-align: center; } .cal-weekdays span { padding: 4px 0; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-day-cell { position: relative; background: rgba(255, 250, 242, 0.6); border: 1px solid rgba(180, 140, 170, 0.18); border-radius: 10px; padding: 6px; min-height: 84px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease; overflow: hidden; font-family: 'Inter', system-ui, sans-serif; } .cal-day-cell:hover { background: rgba(255, 250, 242, 0.95); border-color: rgba(255, 143, 177, 0.4); transform: translateY(-1px); } .cal-day-cell.other-month { background: rgba(255, 255, 255, 0.25); opacity: 0.55; } .cal-day-cell.today { background: linear-gradient(180deg, #ffe1ec, #ffd1dd); border-color: #F26891; box-shadow: 0 2px 0 rgba(214, 75, 122, 0.2); } .cal-day-cell.weekend { background: rgba(244, 220, 230, 0.4); } .cal-day-num { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 1px; } .cal-day-cell.today .cal-day-num { color: #D94B7A; font-weight: 800; } .cal-event-chip { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: rgba(255, 143, 177, 0.25); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--pink-500); max-width: 100%; } .cal-event-chip.cat-work { background: rgba(91, 158, 255, 0.18); border-left-color: #5C9FFF; } .cal-event-chip.cat-class { background: rgba(196, 181, 253, 0.3); border-left-color: #7B5DC4; } .cal-event-chip.cat-date { background: rgba(255, 143, 177, 0.25); border-left-color: #F26891; } .cal-event-chip.cat-travel { background: rgba(147, 197, 253, 0.3); border-left-color: #2563EB; } .cal-event-chip.cat-event { background: rgba(252, 211, 77, 0.3); border-left-color: #f59e0b; } .cal-event-chip.cat-family { background: rgba(110, 231, 183, 0.3); border-left-color: #16a34a; } .cal-event-chip.cat-personal{ background: rgba(180, 180, 180, 0.25); border-left-color: #777; } .cal-event-chip.cat-appt { background: rgba(248, 113, 113, 0.25); border-left-color: #ef4444; } .cal-event-chip.cat-bday { background: rgba(252, 165, 100, 0.3); border-left-color: #f97316; } .cal-event-overflow { font-size: 10px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; } .cal-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: var(--ink-soft); padding-top: 10px; border-top: 1px dashed rgba(180, 140, 170, 0.3); } .cal-legend-item { display: inline-flex; align-items: center; gap: 5px; } .cal-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* Day modal */ .cal-day-bd { position: fixed; inset: 0; background: rgba(40, 20, 30, 0.55); display: none; align-items: center; justify-content: center; z-index: 1300; backdrop-filter: blur(6px); } .cal-day-bd.visible { display: flex; } .cal-day { background: linear-gradient(180deg, #fffaf2, #ffe9d6); border-radius: 22px; padding: 28px 26px; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.3); position: relative; font-family: 'Inter', system-ui, sans-serif; max-height: 88vh; overflow-y: auto; } .cal-day h4 { margin: 0 0 14px; font-family: 'Fraunces', serif; font-size: 24px; color: var(--ink); } .cal-day-events { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .cal-day-events:empty::before { content: 'Nothing on the calendar yet for this day.'; display: block; font-style: italic; color: var(--ink-soft); font-size: 13px; text-align: center; padding: 14px; } .cal-event-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); border-left: 5px solid var(--pink-500); } .cal-event-row.cat-work { border-left-color: #5C9FFF; } .cal-event-row.cat-class { border-left-color: #7B5DC4; } .cal-event-row.cat-date { border-left-color: #F26891; } .cal-event-row.cat-travel { border-left-color: #2563EB; } .cal-event-row.cat-event { border-left-color: #f59e0b; } .cal-event-row.cat-family { border-left-color: #16a34a; } .cal-event-row.cat-personal{ border-left-color: #777; } .cal-event-row.cat-appt { border-left-color: #ef4444; } .cal-event-row.cat-bday { border-left-color: #f97316; } .cal-event-info { flex: 1; min-width: 0; } .cal-event-title-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .cal-event-title-text { font-weight: 700; font-size: 15px; color: var(--ink); } .cal-event-time { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: rgba(0, 0, 0, 0.05); padding: 1px 8px; border-radius: 6px; } .cal-event-by { font-size: 11px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; } .cal-event-by .me { color: #D94B7A; font-weight: 800; } .cal-event-note-text { font-size: 13px; color: var(--ink-soft); margin-top: 4px; white-space: pre-wrap; line-height: 1.4; } .cal-event-delete { appearance: none; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .cal-event-delete:hover { background: rgba(217, 75, 122, 0.15); color: #D94B7A; } .cal-add-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed rgba(180, 140, 170, 0.3); padding-top: 16px; } .cal-add-form input[type="text"], .cal-add-form input[type="time"], .cal-add-form select, .cal-add-form textarea { padding: 10px 12px; border: 1px solid rgba(180, 140, 170, 0.3); border-radius: 10px; font-family: inherit; font-size: 14px; background: rgba(255, 255, 255, 0.85); outline: none; font-weight: 500; } .cal-add-form input[type="text"] { font-weight: 700; } .cal-add-form textarea { resize: vertical; min-height: 38px; } .cal-add-form input:focus, .cal-add-form select:focus, .cal-add-form textarea:focus { border-color: #F26891; } .cal-add-row { display: flex; gap: 8px; } .cal-add-row input[type="time"] { flex: 1; } .cal-add-row select { flex: 1; } @media (max-width: 600px) { .cal-day-cell { min-height: 64px; padding: 4px; } .cal-day-num { font-size: 11px; } .cal-event-chip { font-size: 9px; padding: 1px 4px; } .cal-month-title { font-size: 20px; } .cal-weekdays { font-size: 10px; } .cal-weekdays span:first-letter { display: inline; } } @media (max-width: 420px) { .cal-weekdays span { font-size: 0; } .cal-weekdays span:first-letter { font-size: 10px; } } /* ===== Wavelength ===== */ .wl-stage { display: flex; flex-direction: column; gap: 18px; } .wl-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .wl-round { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--ink); } .wl-role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid rgba(255,143,177,.4); background: linear-gradient(180deg, #fef3e1, #ffe1ec); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; } .wl-role-badge.psychic { background: linear-gradient(180deg, #fde68a, #f59e0b); color: #5a2c0e; border-color: rgba(245,158,11,.5); } .wl-role-badge.guesser { background: linear-gradient(180deg, #dbeafe, #93c5fd); color: #1e3a8a; border-color: rgba(59,130,246,.4); } .wl-score { background: rgba(255, 215, 0, 0.18); color: #92580c; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; font-family: 'Inter', system-ui, sans-serif; } /* Spectrum bar */ .wl-spectrum-area { padding: 30px 14px 14px; background: linear-gradient(180deg, #fffaf2, #ffe9d6); border-radius: 18px; border: 1px solid rgba(180,140,170,.2); } .wl-spectrum { position: relative; height: 60px; background: linear-gradient(90deg, #93c5fd 0%, #c4b5fd 50%, #f9a8d4 100%); border-radius: 999px; box-shadow: 0 4px 0 rgba(120,90,140,.15), inset 0 2px 4px rgba(0,0,0,.1); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: none; } .wl-bands { position: absolute; inset: 0; pointer-events: none; border-radius: 999px; overflow: hidden; opacity: 0; transition: opacity 0.35s ease; } .wl-bands.visible { opacity: 1; } .wl-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; transform: translateX(-50%); } .wl-band-outer { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); width: 24%; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset; } .wl-band-inner { background: linear-gradient(180deg, #fde68a, #f59e0b); width: 14%; box-shadow: 0 0 12px rgba(245,158,11,.3); } .wl-band-bull { background: linear-gradient(180deg, #f87171, #ef4444); width: 4%; box-shadow: 0 0 18px rgba(239,68,68,.6); } /* Dial pointer */ .wl-dial { position: absolute; top: -16px; bottom: -16px; left: 50%; width: 4px; transform: translateX(-50%); pointer-events: none; z-index: 3; transition: left 0.05s linear; } .wl-dial.locking { transition: left 0.6s cubic-bezier(.2,.9,.4,1.1); } .wl-dial-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #1f2937; border-radius: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.7); transform: translateX(-50%); } .wl-dial-tip { position: absolute; top: -2px; left: 50%; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid #1f2937; transform: translateX(-50%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } /* Tick marks under the bar */ .wl-tickmarks { position: absolute; left: 0; right: 0; bottom: -12px; display: flex; justify-content: space-between; pointer-events: none; } .wl-tickmarks span { width: 1px; height: 6px; background: rgba(0, 0, 0, 0.25); } .wl-end-labels { display: flex; justify-content: space-between; margin-top: 18px; padding: 0 4px; font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--ink); } .wl-end-label-left, .wl-end-label-right { background: rgba(255,255,255,.7); padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(180,140,170,.25); } .wl-end-label-left::before { content: '◀ '; opacity: 0.5; } .wl-end-label-right::after { content: ' ▶'; opacity: 0.5; } /* Clue area */ .wl-clue-area { background: rgba(255,250,242,.7); border: 1px solid rgba(180,140,170,.25); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: 'Inter', system-ui, sans-serif; min-height: 56px; } .wl-clue-prompt { font-size: 13px; color: var(--ink-soft); font-weight: 600; } .wl-clue-display { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--ink); flex: 1; } .wl-clue-input-row { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; } .wl-clue-input-row input[type="text"] { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid rgba(180,140,170,.3); border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; outline: none; background: rgba(255,255,255,.85); } .wl-clue-input-row input:focus { border-color: #F26891; } .wl-clue-empty { font-style: italic; color: var(--ink-soft); font-size: 14px; } .wl-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .wl-reveal { font-family: 'Inter', system-ui, sans-serif; text-align: center; font-size: 14px; color: var(--ink); min-height: 22px; font-weight: 700; } .wl-reveal-points { display: inline-block; margin: 6px 0; padding: 6px 16px; background: linear-gradient(180deg, #fef3c7, #fcd34d); border-radius: 999px; color: #5a2c0e; font-size: 18px; font-weight: 800; animation: wlPop 0.5s cubic-bezier(.2,.9,.4,1.4); } .wl-reveal-summary { color: var(--ink-soft); font-weight: 600; margin-top: 6px; } @keyframes wlPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .wl-bottom-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; border-top: 1px dashed rgba(180,140,170,.3); padding-top: 14px; margin-top: 6px; } .wl-finished { text-align: center; padding: 24px 16px; background: linear-gradient(180deg, #fef3c7, #ffe1ec); border-radius: 16px; font-family: 'Fraunces', serif; } .wl-finished-headline { font-size: 28px; font-weight: 600; margin: 0 0 8px; color: var(--ink); } .wl-finished-score { font-size: 64px; font-weight: 700; background: linear-gradient(135deg, #F26891, #D94B7A); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; } .wl-finished-rating { font-size: 16px; color: var(--ink-soft); margin-top: 12px; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; } @media (max-width: 600px) { .wl-end-labels { font-size: 14px; } .wl-spectrum { height: 50px; } } /* ===== Wavelength midnight overrides ===== The default Wavelength styles use hardcoded light gradients/colors that become invisible (or unreadable) on the dark theme. */ [data-theme="midnight"] .wl-spectrum-area { background: linear-gradient(180deg, #2a1a3d, #1f1530); border-color: rgba(255,255,255,.06); } [data-theme="midnight"] .wl-end-label-left, [data-theme="midnight"] .wl-end-label-right { background: rgba(40, 26, 64, 0.65); border-color: rgba(255,255,255,0.1); color: var(--ink); } [data-theme="midnight"] .wl-clue-area { background: rgba(40, 26, 64, 0.65); border-color: rgba(255,255,255,0.1); } [data-theme="midnight"] .wl-clue-input-row input[type="text"], [data-theme="midnight"] .wl-clue-input-row input[type="number"] { background: rgba(255,255,255,0.06); color: var(--ink); border-color: rgba(255,255,255,0.12); } /* Dial pointer — invert from dark gray to light so it shows on dark spectrum */ [data-theme="midnight"] .wl-dial-line { background: #f5e8f5; box-shadow: 0 0 0 2px rgba(20,10,35,0.7); } [data-theme="midnight"] .wl-dial-tip { border-top-color: #f5e8f5; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); } /* Tickmarks — visible against dark bg */ [data-theme="midnight"] .wl-tickmarks span { background: rgba(255,255,255,0.25); } /* ===== Codenames ===== */ .cd-stage { display: flex; flex-direction: column; gap: 14px; } .cd-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; } .cd-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cd-pack-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: var(--ink); } .cd-role-badge { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(180deg, #fef3e1, #ffe1ec); border: 1px solid rgba(255,143,177,.4); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; } .cd-role-badge.spymaster { background: linear-gradient(180deg, #fde68a, #f59e0b); color: #5a2c0e; border-color: rgba(245,158,11,.5); } .cd-role-badge.operative { background: linear-gradient(180deg, #dbeafe, #93c5fd); color: #1e3a8a; border-color: rgba(59,130,246,.4); } .cd-stats { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); font-weight: 600; } .cd-agents-left { background: rgba(248,113,113,.25); color: #b91c1c; padding: 4px 10px; border-radius: 8px; font-weight: 700; } [data-theme="midnight"] .cd-agents-left { background: rgba(248,113,113,.18); color: #fca5a5; } .cd-mistakes { display: inline-flex; align-items: center; gap: 6px; } /* Clue area */ .cd-clue-area { background: rgba(255,250,242,.7); border: 1px solid rgba(180,140,170,.25); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cd-clue-prompt { font-size: 13px; color: var(--ink-soft); font-weight: 600; } .cd-clue-display { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--ink); flex: 1; display: flex; align-items: baseline; gap: 10px; } .cd-clue-display .cd-clue-num { background: var(--pink-500); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; font-family: 'Inter', system-ui, sans-serif; } .cd-clue-input-row { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; } .cd-clue-input-row input[type="text"] { flex: 1; min-width: 140px; padding: 9px 12px; border: 1px solid rgba(180,140,170,.3); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; outline: none; background: rgba(255,255,255,.85); } .cd-clue-input-row input[type="number"] { width: 64px; padding: 9px 8px; border: 1px solid rgba(180,140,170,.3); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; outline: none; background: rgba(255,255,255,.85); text-align: center; } .cd-clue-input-row input:focus { border-color: #F26891; } .cd-clue-empty { font-style: italic; color: var(--ink-soft); font-size: 14px; } /* 5x5 word grid */ .cd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .cd-tile { appearance: none; border: 2px solid var(--cd-tile-border, rgba(180,140,170,.25)); background: var(--cd-tile-bg, #f5ede5); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 4px; border-radius: 10px; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; word-break: break-word; transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; } .cd-tile:hover:not(:disabled):not(.revealed) { transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(0,0,0,.12); } .cd-tile:disabled { cursor: default; } [data-theme="midnight"] .cd-tile { --cd-tile-bg: #3d2c4f; --cd-tile-border: rgba(255,255,255,0.1); } /* Spymaster's hidden-color hints (for unrevealed tiles) — agents are RED */ .cd-tile.hint-agent { background: linear-gradient(180deg, #ffd0d0, #ff9f9f); border-color: #e53e3e; } .cd-tile.hint-neutral { background: linear-gradient(180deg, #f0e7d8, #e3d6c0); border-color: #b89968; } .cd-tile.hint-assassin { background: linear-gradient(180deg, #444, #1a1a1a); color: #fff; border-color: #000; text-shadow: 0 1px 2px rgba(0,0,0,.6); } /* Revealed tiles (visible to both players) — agents are RED */ .cd-tile.revealed.agent { background: linear-gradient(180deg, #f87171, #dc2626); color: #fff; border-color: #b91c1c; box-shadow: 0 4px 0 rgba(153,27,27,.25); text-shadow: 0 1px 2px rgba(0,0,0,.4); } .cd-tile.revealed.neutral { background: linear-gradient(180deg, #d8c8a8, #b89968); color: #4a3520; border-color: #8b6f3a; } .cd-tile.revealed.assassin { background: linear-gradient(180deg, #1a1a1a, #000); color: #ff5b6e; border-color: #000; text-shadow: 0 0 8px rgba(255,91,110,.6); animation: cdAssassin 0.6s ease; } .cd-tile.popping { animation: cnPop 0.5s ease; } @keyframes cdAssassin { 0% { transform: scale(1); } 30% { transform: scale(1.1) rotate(-2deg); } 60% { transform: scale(1.05) rotate(2deg); } 100% { transform: scale(1) rotate(0); } } .cd-bottom-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; border-top: 1px dashed rgba(180,140,170,.3); padding-top: 14px; margin-top: 6px; } .cd-pack-picker { padding: 8px 10px; border: 1px solid rgba(180,140,170,.3); border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.7); cursor: pointer; outline: none; } .cd-pack-picker:focus { border-color: #F26891; } @media (max-width: 600px) { .cd-tile { font-size: 10px; padding: 8px 3px; min-height: 48px; } .cd-grid { gap: 4px; } .cd-clue-display { font-size: 18px; } } /* ===== Connections ===== */ .cn-stage { display: flex; flex-direction: column; gap: 14px; } .cn-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .cn-puzzle-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 600; color: var(--ink); } .cn-mistakes { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); font-weight: 600; } .cn-mistakes-dots { display: inline-flex; gap: 5px; } .cn-mistake-dot { width: 12px; height: 12px; border-radius: 50%; background: #F26891; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; transition: background 0.2s ease, transform 0.2s ease; } .cn-mistake-dot.spent { background: rgba(0, 0, 0, 0.18); transform: scale(0.8); } .cn-solved { display: flex; flex-direction: column; gap: 8px; } .cn-solved-row { border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; font-family: 'Inter', system-ui, sans-serif; animation: cnReveal 0.5s cubic-bezier(.2,.9,.4,1.2); } .cn-solved-theme { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 0, 0, 0.7); } .cn-solved-words { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: rgba(0, 0, 0, 0.85); } .cn-color-yellow { background: linear-gradient(180deg, #fde68a, #f7d046); } .cn-color-green { background: linear-gradient(180deg, #a7f3d0, #6ee7b7); } .cn-color-blue { background: linear-gradient(180deg, #bfdbfe, #93c5fd); } .cn-color-purple { background: linear-gradient(180deg, #e9d5ff, #c4b5fd); } @keyframes cnReveal { 0% { transform: translateY(-12px) scale(0.96); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .cn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .cn-tile { appearance: none; border: 1px solid var(--cn-tile-border, rgba(0,0,0,0.08)); background: var(--cn-tile-bg, #d4c5b3); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 6px; border-radius: 10px; cursor: pointer; min-height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; word-break: break-word; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.6) inset; } [data-theme="midnight"] .cn-tile { --cn-tile-bg: #3d2c4f; --cn-tile-border: rgba(255,255,255,0.12); box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06) inset; } .cn-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,0.7) inset; } [data-theme="midnight"] .cn-tile:hover { box-shadow: 0 4px 10px -2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,0.08) inset; } .cn-tile.selected { background: #5a4438; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0,0,0,.15), 0 8px 16px -4px rgba(90,68,56,.45); } .cn-tile.shaking { animation: cnShake 0.45s ease; } .cn-tile.popping { animation: cnPop 0.6s ease; } @keyframes cnShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } @keyframes cnPop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } .cn-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .cn-toast { text-align: center; font-size: 13px; font-weight: 700; color: var(--pink-500); min-height: 18px; font-family: 'Inter', system-ui, sans-serif; } .cn-bottom-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; border-top: 1px dashed rgba(180,140,170,.3); padding-top: 14px; margin-top: 6px; } /* Maker modal */ .cn-make-bd { position: fixed; inset: 0; background: rgba(40, 20, 30, 0.55); display: none; align-items: center; justify-content: center; z-index: 1300; backdrop-filter: blur(6px); } .cn-make-bd.visible { display: flex; } .cn-make { background: linear-gradient(180deg, #fffaf2, #ffe9d6); border-radius: 22px; padding: 28px 26px; max-width: 540px; width: calc(100% - 32px); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.3); position: relative; font-family: 'Inter', system-ui, sans-serif; max-height: 88vh; overflow-y: auto; } .cn-make h4 { margin: 0 0 6px; font-family: 'Fraunces', serif; font-size: 24px; color: var(--ink); } .cn-make-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; } .cn-make input[type="text"] { width: 100%; padding: 10px 14px; border: 1px solid rgba(180,140,170,.3); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; outline: none; margin-bottom: 14px; background: rgba(255,255,255,.7); } .cn-make input[type="text"]:focus { border-color: #F26891; } .cn-make-groups { display: flex; flex-direction: column; gap: 12px; } .cn-make-group { background: rgba(255,255,255,.55); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .cn-make-group-head { display: flex; align-items: center; gap: 8px; } .cn-make-color-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .cn-make-group input.cn-theme { flex: 1; margin: 0; font-size: 13px; padding: 8px 10px; } .cn-make-words { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .cn-make-words input { padding: 7px 10px; border: 1px solid rgba(180,140,170,.3); border-radius: 8px; font-family: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: rgba(255,255,255,.8); outline: none; } .cn-make-words input:focus { border-color: #F26891; } .cn-make-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } @media (max-width: 600px) { .cn-tile { font-size: 11px; padding: 10px 4px; min-height: 56px; } .cn-grid { gap: 6px; } } /* ===== Scattergories ===== */ .sc-stage { min-height: 360px; } .sc-idle { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0; text-align: center; } .sc-icon { font-size: 2.6rem; } .sc-idle-text { font-style: italic; color: var(--ink-soft); margin: 0; max-width: 460px; line-height: 1.5; } .sc-idle-rules { background: linear-gradient(135deg, #F4EEFF, #FAEEFC); border-radius: 14px; padding: 14px 18px; font-size: 0.9rem; color: #3A2C45; /* always dark — box is always light, regardless of theme */ line-height: 1.55; max-width: 480px; text-align: left; } .sc-idle-rules strong { color: #2A1F35; } .sc-idle-rules ul { margin: 6px 0 0; padding-left: 20px; } .sc-idle-rules li { margin-bottom: 4px; color: #3A2C45; } .sc-active { display: flex; flex-direction: column; gap: 16px; width: 100%; } .sc-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #FFEAF1, #E4D6FF); border-radius: 18px; padding: 14px 20px; } .sc-letter-display { display: flex; align-items: center; gap: 12px; } .sc-letter-label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--pink-500); } .sc-letter { font-family: 'Fraunces', serif; font-size: 3.2rem; font-weight: 600; line-height: 1; color: var(--ink); background: var(--card-bg); border-radius: 14px; width: 70px; height: 70px; display: grid; place-items: center; box-shadow: 0 4px 12px -4px rgba(180, 140, 170, 0.4); } .sc-timer { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .sc-timer-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); } .sc-timer-value { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .sc-timer-value.warn { color: #D94B7A; } .sc-timer-value.crit { color: #D94B7A; animation: sc-pulse 0.6s ease-in-out infinite; } @keyframes sc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .sc-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .sc-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(255, 255, 255, 0.7); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.9); } .sc-cat { font-size: 0.92rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .sc-cat-couple { display: inline-block; margin-left: 6px; font-size: 0.7rem; padding: 2px 6px; border-radius: 8px; background: linear-gradient(135deg, #FFB8CF, #F26891); color: white; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; } .sc-input { padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 143, 177, 0.35); background: var(--card-bg); font-family: inherit; font-size: 0.95rem; color: var(--ink); outline: none; } .sc-input:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.18); } .sc-input:disabled { background: rgba(255, 255, 255, 0.4); color: var(--ink-soft); cursor: not-allowed; } .sc-status-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.88rem; color: var(--ink-soft); } .sc-status-row .sc-partner-status.done { color: #2a6a3e; font-weight: 700; } .sc-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .sc-controls .btn { flex: 1 1 160px; } /* Reveal */ .sc-reveal { display: flex; flex-direction: column; gap: 18px; width: 100%; } .sc-reveal-banner { background: linear-gradient(135deg, #FFEAF1, #E4D6FF); border-radius: 18px; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .sc-reveal-letter { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; color: var(--ink); } .sc-reveal-letter strong { font-size: 2rem; color: var(--pink-500); margin: 0 4px; } .sc-reveal-progress { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); } .sc-reveal-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center; background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.9); } .sc-reveal-cat { font-size: 0.88rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .sc-reveal-cell { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.85); font-size: 0.95rem; } .sc-reveal-cell.empty { color: var(--ink-soft); font-style: italic; background: rgba(255, 255, 255, 0.3); } .sc-reveal-cell.duplicate { background: linear-gradient(135deg, #FFE3E0, #FFD1DC); text-decoration: line-through; color: #b14b6e; } .sc-reveal-cell.bonus { background: linear-gradient(135deg, #DDF7E5, #B8EDC8); color: #2a6a3e; font-weight: 600; } .sc-reveal-cell.bonus::after { content: '✨ +1'; font-size: 0.7rem; margin-left: auto; background: var(--card-bg); padding: 2px 6px; border-radius: 6px; font-weight: 700; } .sc-reveal-cell.rejected { background: rgba(255, 200, 200, 0.5); color: var(--ink-soft); text-decoration: line-through; } .sc-reveal-cell .sc-tag { margin-left: auto; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--card-bg); color: var(--ink-soft); padding: 2px 6px; border-radius: 6px; text-decoration: none; flex-shrink: 0; } .sc-reveal-cell.rejected .sc-tag { color: #b14b6e; background: #fff; } .sc-vote-btn { margin-left: auto; border: none; background: rgba(255, 255, 255, 0.7); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; display: grid; place-items: center; transition: all 0.15s ease; flex-shrink: 0; } .sc-vote-btn:hover { transform: scale(1.1); } .sc-vote-btn.down { background: #FFD1DC; color: #b14b6e; } [data-theme="midnight"] .sc-vote-btn.down { background: #4a2a3a; color: #ffb3c6; } .sc-vote-btn.disabled { cursor: default; opacity: 0.5; } .sc-reveal-header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 14px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); } .sc-reveal-header .sc-name { text-align: center; } .sc-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; background: linear-gradient(135deg, white, #FFEAF1); border-radius: 18px; padding: 18px 24px; text-align: center; } .sc-scoreboard .sc-player { display: flex; flex-direction: column; gap: 4px; } .sc-scoreboard .sc-player-name { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); } .sc-scoreboard .sc-player-score { font-family: 'Fraunces', serif; font-size: 2.6rem; font-weight: 600; color: var(--ink); } .sc-scoreboard .sc-vs { font-size: 0.9rem; color: var(--ink-soft); font-weight: 700; } .sc-scoreboard .sc-player.winner { color: var(--pink-500); } .sc-scoreboard .sc-player.winner .sc-player-score { background: linear-gradient(135deg, #F26891, #D94B7A); -webkit-background-clip: text; background-clip: text; color: transparent; } .sc-scoreboard-result { grid-column: 1 / -1; font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-soft); font-size: 1rem; padding-top: 6px; } .sc-waiting { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0; text-align: center; color: var(--ink-soft); } .sc-waiting-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 143, 177, 0.25); border-top-color: var(--pink-400); animation: sc-spin 1s linear infinite; } @keyframes sc-spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .sc-row { grid-template-columns: 1fr; gap: 6px; padding: 8px 10px; } .sc-letter { width: 56px; height: 56px; font-size: 2.4rem; } .sc-reveal-row { grid-template-columns: 1fr; gap: 6px; } .sc-reveal-header { display: none; } .sc-reveal-cell { font-size: 0.9rem; } .sc-controls .btn { flex: 1 1 100%; } .sc-scoreboard { padding: 14px 16px; } } /* ===== Watchlist ===== */ .watch-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .watch-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .watch-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .watch-item:hover { border-color: var(--rose-glow); box-shadow: 0 4px 14px rgba(196, 69, 105, 0.06); } .watch-item.done { opacity: 0.78; } .watch-item.done .watch-title { text-decoration: line-through; } .watch-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } .watch-title { font-weight: 500; color: var(--ink); word-break: break-word; } .watch-by { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; } .watch-status { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; flex-shrink: 0; } .watch-status.status-queued { background: var(--cream-2); color: var(--ink-soft); } .watch-status.status-watching { background: var(--rose-glow); color: var(--rose); } .watch-status.status-done { background: #DAEFD9; color: #4a7c4a; } .watch-actions { display: flex; gap: 4px; } .watch-btn { width: 32px; height: 32px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; border-radius: 999px; font-size: 1rem; transition: all 0.15s ease; } .watch-btn:hover { background: var(--rose-glow); color: var(--rose); } .watch-btn.watch-del:hover { background: var(--rose); color: var(--white); } .watch-rating { grid-column: 1 / -1; display: flex; gap: 2px; padding-top: 4px; } .star { border: none; background: none; cursor: pointer; font-size: 1.25rem; color: #d6c4b6; padding: 2px 4px; line-height: 1; transition: color 0.15s ease, transform 0.15s ease; } .star.on { color: var(--gold); } .star:hover { transform: scale(1.18); } .watch-empty { text-align: center; opacity: 0.55; font-style: italic; padding: 24px 0; } /* ===== Letters to future us ===== */ .letter-form { display: flex; flex-direction: column; gap: 10px; background: var(--cream); border: 1px dashed var(--rose-glow); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; } .letter-form input[type="text"], .letter-form textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-bg); font-family: inherit; font-size: 0.95rem; color: var(--ink); resize: vertical; } .letter-form textarea { min-height: 120px; line-height: 1.55; font-family: 'Fraunces', Georgia, serif; font-size: 1rem; } .letter-form input:focus, .letter-form textarea:focus { outline: 2px solid var(--rose-soft); outline-offset: 1px; border-color: transparent; } .letter-form-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .letter-date { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink-soft); } .letter-date input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-family: inherit; color: var(--ink); background: var(--card-bg); } .letters-list { display: flex; flex-direction: column; gap: 12px; } .letter-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; transition: all 0.18s ease; } .letter-card.sealed { background: linear-gradient(180deg, #FFF8F1, #FBEEE3); border-color: var(--cream-2); } .letter-card.unlocked { background: linear-gradient(135deg, #FFF0F4, #FFE3EC); border-color: var(--rose-glow); box-shadow: 0 8px 24px rgba(196, 69, 105, 0.14); } .letter-card.opened { background: var(--card-bg); border-color: var(--line); } .letter-head { display: flex; align-items: center; gap: 14px; } .letter-seal { font-size: 1.7rem; flex-shrink: 0; } .letter-card.unlocked .letter-seal { animation: letter-bounce 1.6s ease-in-out infinite; } @keyframes letter-bounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } } .letter-meta { flex: 1; min-width: 0; } .letter-meta h4 { margin: 0 0 4px; font-family: 'Fraunces', serif; color: var(--ink); word-break: break-word; } .letter-by { font-size: 0.82rem; color: var(--ink-soft); margin: 0; } .letter-del { background: transparent; border: none; color: var(--ink-soft); cursor: pointer; width: 28px; height: 28px; border-radius: 999px; font-size: 0.9rem; flex-shrink: 0; transition: all 0.15s ease; } .letter-del:hover { background: var(--rose); color: var(--white); } .letter-countdown { margin: 14px 0 2px; text-align: center; font-size: 0.92rem; color: var(--ink-soft); font-style: italic; } .letter-countdown strong { color: var(--rose); font-style: normal; font-size: 1.15rem; font-weight: 700; } .letter-open-btn { display: block; width: 100%; margin-top: 14px; } .letter-body { margin-top: 14px; padding: 16px 18px; background: var(--cream); border-radius: var(--radius-sm); font-family: 'Fraunces', Georgia, serif; color: var(--ink); line-height: 1.7; font-size: 1.02rem; white-space: pre-wrap; word-break: break-word; } .letter-footer { margin-top: 10px; text-align: right; font-size: 0.82rem; color: var(--rose); font-style: italic; } .letters-empty { text-align: center; opacity: 0.55; font-style: italic; padding: 30px 0; } /* ===== Responsive ===== */ @media (max-width: 700px) { /* === Topbar redesign for phones: logo+actions on top, nav scrolls horizontally below === */ .topbar { padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left)); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo . actions" "nav nav nav"; gap: 8px 6px; align-items: center; } .topbar .logo { grid-area: logo; font-size: 1rem; gap: 4px; } .topbar-actions { grid-area: actions; gap: 6px; } .topbar nav { grid-area: nav; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; justify-content: flex-start; padding: 4px 6px; /* fade right edge to hint there's more to scroll */ mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%); } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav a { padding: 7px 12px; font-size: 0.8rem; flex: 0 0 auto; white-space: nowrap; } .lj-log-btn, .theme-pill { width: 40px; height: 40px; font-size: 16px; } /* === Sections === */ main { padding: 0 14px; } .section { padding: 56px 0; } .section.alt { padding: 56px 14px; } /* === Game cards === */ .game-card { padding: 20px; border-radius: 22px; } .q-card, .wyr-card, .td-card { padding: 22px; } .q-text, .wyr-text { font-size: 1.1rem; } /* === Modals — tighter padding so they fit comfortably === */ .modal { padding: 24px 20px; max-width: calc(100vw - 24px); } .scene-modal-backdrop { padding: 14px; } .scene-modal { padding: 20px 18px; } .cabin-customizer, .cabin-cook, .cn-make, .cal-day { padding: 20px 18px; max-width: calc(100vw - 24px); } .cabin-customizer-bd, .cabin-cook-bd, .cn-make-bd, .cal-day-bd, .gallery-lightbox-bd { padding: 14px; } /* === Notification log panel — full-width on mobile === */ .lj-log-panel { width: 100%; max-width: calc(100vw - 12px); right: -8px; } .lj-log-list { max-height: 60vh; } /* === Theme popover === */ .theme-popover { right: -8px; min-width: 200px; max-width: calc(100vw - 12px); } /* === Cabin canvas — cap height so the catalog/inventory show without scrolling forever === */ .cabin-canvas-wrap { max-height: 50vh; } /* === Battleship: keep cells legible without overflowing === */ .bs-grid { --bs-cell: 18px; --bs-label: 11px; } } /* Smallest phones (≤380px) — extra-tight grids so 4×4/5×5 don't crush text */ @media (max-width: 380px) { .game-card { padding: 16px; } .cn-grid { gap: 5px; padding: 6px; } .cn-tile { padding: 10px 3px; font-size: 11px; min-height: 56px; } .cd-grid { gap: 4px; padding: 6px; } .cd-tile { padding: 9px 2px; font-size: 10px; min-height: 50px; } .bs-grid { --bs-cell: 14px; --bs-label: 9px; } .cal-day-cell { min-height: 56px; padding: 3px; } .cal-day-num { font-size: 10px; } .cal-event-chip { font-size: 8px; padding: 1px 3px; } } /* ===== Catan Lite ===== */ .catan-stage { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; } .catan-status { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink); font-size: 1.05rem; text-align: center; min-height: 1.4em; } .catan-status .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-style: normal; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; margin: 0 4px; background: linear-gradient(135deg, #FFEAF1, #FFD9E5); color: var(--pink-500); } .catan-status .pill.them { background: linear-gradient(135deg, #D6E8FF, #B5D4FF); color: var(--blue-500); } .catan-status .pill.ai-a { background: linear-gradient(135deg, #FFE3E0, #FFC9DC); color: #b14b6e; } .catan-status .pill.ai-b { background: linear-gradient(135deg, #E4D6FF, #C4B0F5); color: #6B4FB8; } .catan-mode-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink-soft); justify-content: center; } .catan-board-wrap { position: relative; width: 100%; max-width: 720px; margin: 0 auto; aspect-ratio: 1.05; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at center, #6BA8D4 0%, #4A82B0 70%, #2F5C82 100%); box-shadow: 0 14px 30px -8px rgba(40, 60, 90, 0.4), 0 4px 0 rgba(80, 100, 130, 0.2); } #catan-canvas { display: block; width: 100%; height: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; } .catan-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; max-width: 720px; margin: 0 auto; } .catan-player { background: rgba(255, 255, 255, 0.65); border-radius: 14px; padding: 10px 12px; border: 2px solid transparent; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s ease, transform 0.15s ease; } .catan-player.active { border-color: var(--pink-400); background: linear-gradient(135deg, white, #FFEAF1); transform: translateY(-2px); box-shadow: 0 6px 14px -4px rgba(255, 143, 177, 0.3); } .catan-player-row { display: flex; align-items: center; gap: 8px; } .catan-player-color { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .catan-player-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); } .catan-player-vp { margin-left: auto; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); } .catan-player-tags { display: flex; gap: 4px; font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; letter-spacing: 0.04em; } .catan-player-tag.you { color: var(--pink-500); } .catan-player-tag.team { color: var(--blue-500); } .catan-player-tag.ai { color: #6B4FB8; } .catan-player-resources { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.78rem; color: var(--ink); } .catan-resource-chip { background: rgba(255, 255, 255, 0.85); border-radius: 8px; padding: 2px 7px; font-weight: 700; display: inline-flex; gap: 2px; align-items: center; } .catan-resource-chip .ico { font-size: 12px; } .catan-player-stock { font-size: 0.72rem; color: var(--ink-soft); } /* My player (highlighted) */ .catan-me-panel { background: linear-gradient(135deg, white, #FFEAF1); border-radius: 18px; padding: 14px 18px; border: 1px solid rgba(255, 143, 177, 0.25); margin: 0 auto; max-width: 720px; display: flex; flex-direction: column; gap: 10px; } .catan-me-resources { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .catan-resource-card { background: var(--card-bg); border-radius: 10px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); font-weight: 700; font-size: 0.92rem; color: var(--ink); border: 2px solid transparent; } .catan-resource-card.wood { border-color: #2d6e2d; background: linear-gradient(135deg, #EAF5E2, white); } .catan-resource-card.brick { border-color: #b35a2c; background: linear-gradient(135deg, #FFE2D0, white); } .catan-resource-card.sheep { border-color: #6abf6a; background: linear-gradient(135deg, #E8F8E2, white); } .catan-resource-card.wheat { border-color: #c9a838; background: linear-gradient(135deg, #FFF1C4, white); } .catan-resource-card.ore { border-color: #5a6680; background: linear-gradient(135deg, #DDE3EE, white); } .catan-resource-card .ico { font-size: 18px; } .catan-resource-card.zero { opacity: 0.4; } .catan-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; max-width: 720px; margin: 0 auto; } .catan-action-btn { appearance: none; border: 1px solid rgba(180, 140, 170, 0.25); background: var(--card-bg); border-radius: 12px; padding: 9px 14px; font-family: inherit; font-size: 0.92rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; display: flex; align-items: center; gap: 6px; } .catan-action-btn:hover:not(:disabled) { background: linear-gradient(135deg, #FFEAF1, #FFD9E5); transform: translateY(-1px); } .catan-action-btn:disabled { opacity: 0.4; cursor: not-allowed; } .catan-action-btn.primary { background: linear-gradient(135deg, #FF8FB1, #F26891); color: white; border-color: transparent; } .catan-action-btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, #F26891, #D94B7A); } .catan-action-cost { font-size: 0.7rem; color: var(--ink-soft); font-weight: 600; } .catan-action-btn.primary .catan-action-cost { color: rgba(255, 255, 255, 0.85); } .catan-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* Modal for trade dialog and dice roll — raised above floating launchers (1100) */ .catan-modal-bd { position: fixed; inset: 0; background: rgba(20, 8, 28, 0.7); display: none; align-items: center; justify-content: center; z-index: 1200; padding: 20px; } .catan-modal-bd.visible { display: flex; } .catan-modal { background: var(--card-bg); border-radius: 22px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); } .catan-modal h4 { margin: 0 0 12px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem; } .catan-dice { display: flex; gap: 16px; justify-content: center; margin: 20px 0; } .catan-die { width: 56px; height: 56px; background: var(--card-bg); border-radius: 12px; border: 2px solid var(--ink); display: grid; place-items: center; font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.3); animation: catan-die-tumble 0.6s ease-out; } @keyframes catan-die-tumble { 0% { transform: rotate(0deg) scale(0.5); opacity: 0; } 60% { transform: rotate(360deg) scale(1.2); } 100% { transform: rotate(720deg) scale(1); opacity: 1; } } @media (max-width: 600px) { .catan-side { grid-template-columns: 1fr; } .catan-board-wrap { aspect-ratio: 1; } } /* ===== Screen Share (WebRTC) ===== */ .ss-stage { display: flex; flex-direction: column; gap: 12px; } .ss-status { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-soft); text-align: center; font-size: 0.95rem; min-height: 1.4em; } .ss-status.connecting { color: #b35a2c; } .ss-status.connected { color: #2a6a3e; font-weight: 600; } .ss-status.connected::before { content: '●'; color: #4ad08a; margin-right: 5px; animation: ss-pulse 2s ease-in-out infinite; } .ss-status.error { color: var(--pink-500); } @keyframes ss-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .ss-display { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1a0d1f, #2a1530); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px -8px rgba(20, 8, 28, 0.5); } .ss-video { width: 100%; height: 100%; object-fit: contain; display: none; background: #0a0612; } .ss-video.active { display: block; } .ss-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, 0.75); text-align: center; padding: 20px; } .ss-idle.hidden { display: none; } .ss-empty-icon { font-size: 48px; } .ss-idle-text { margin: 0; font-style: italic; font-family: 'Fraunces', serif; font-size: 1rem; } .ss-idle-hint { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); max-width: 360px; } .ss-overlay-host { position: absolute; top: 12px; left: 12px; background: rgba(255, 143, 177, 0.92); color: white; font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); display: none; z-index: 4; } .ss-overlay-host.visible { display: block; animation: ss-pulse-shadow 2s ease-in-out infinite; } @keyframes ss-pulse-shadow { 0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 143, 177, 0.5); } 50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 143, 177, 0); } } .ss-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* Pulse animation on the Unmute button when there's audio waiting */ #ss-unmute.pulse { animation: ssUnmutePulse 1.4s ease-in-out infinite; } @keyframes ssUnmutePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 143, 177, 0.55); } 50% { box-shadow: 0 0 0 12px rgba(255, 143, 177, 0); } } /* Fullscreen toggle button — top-right of the video display */ .ss-fullscreen-btn { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: none; border-radius: 10px; background: rgba(0, 0, 0, 0.55); color: white; font-size: 18px; cursor: pointer; display: none; place-items: center; z-index: 5; transition: background 0.15s ease, transform 0.12s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ss-fullscreen-btn.visible { display: grid; } .ss-fullscreen-btn:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.05); } /* ===== FULLSCREEN MODE ===== The display element goes fullscreen — video fills the screen, fullscreen button stays accessible. */ .ss-display:fullscreen, .ss-display:-webkit-full-screen { background: #000; padding: 0; margin: 0; width: 100vw; height: 100vh; border-radius: 0; aspect-ratio: auto; } .ss-display:fullscreen .ss-video, .ss-display:-webkit-full-screen .ss-video { width: 100%; height: 100%; object-fit: contain; } .ss-display:fullscreen .ss-fullscreen-btn, .ss-display:-webkit-full-screen .ss-fullscreen-btn { display: grid; } /* ===== Watch Together (YouTube sync) ===== */ .wp-stage { display: flex; flex-direction: column; gap: 14px; } .wp-url-form { display: flex; gap: 8px; flex-wrap: wrap; } .wp-url-form input { flex: 1; min-width: 200px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 143, 177, 0.4); background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 0.95rem; color: var(--ink); outline: none; } .wp-url-form input:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.18); } .wp-player-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #1a0d1f, #2a1530); box-shadow: 0 14px 30px -8px rgba(20, 8, 28, 0.5); } .wp-player-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, 0.7); font-style: italic; font-family: 'Fraunces', serif; } .wp-empty-icon { font-size: 48px; } .wp-iframe-holder { position: absolute; inset: 0; } .wp-iframe-holder iframe, #wp-iframe { width: 100%; height: 100%; border: 0; } .wp-overlay-controlled { position: absolute; bottom: 12px; left: 12px; background: rgba(0, 0, 0, 0.65); color: white; font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; pointer-events: none; display: none; animation: wp-pulse 2s ease-in-out infinite; } .wp-overlay-controlled.visible { display: block; } @keyframes wp-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } .wp-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wp-status-label { font-size: 0.88rem; font-style: italic; color: var(--ink-soft); font-family: 'Fraunces', serif; } .wp-status-label.playing { color: #2a6a3e; } .wp-status-label.synced::before { content: '●'; color: #4ad08a; margin-right: 4px; animation: wp-pulse 2s ease-in-out infinite; } /* ===== Memory Cosmos ===== */ .cosmos-stage { display: flex; flex-direction: column; gap: 12px; } .cosmos-canvas-wrap { position: relative; width: 100%; aspect-ratio: 1.7; max-height: 540px; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at center, #2a1a3a 0%, #1a0d24 50%, #0a0612 100%); box-shadow: 0 14px 30px -8px rgba(20, 8, 28, 0.5); } #cosmos-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; } #cosmos-canvas:active { cursor: grabbing; } .cosmos-overlay { position: absolute; inset: 0; pointer-events: none; } .cosmos-overlay > * { pointer-events: auto; } .cosmos-stats { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, 0.85); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-style: italic; font-family: 'Fraunces', serif; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cosmos-legend { position: absolute; bottom: 14px; left: 14px; background: rgba(0, 0, 0, 0.55); color: white; padding: 6px 10px; border-radius: 12px; font-size: 0.7rem; display: flex; flex-wrap: wrap; gap: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: calc(100% - 28px); } .cosmos-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .cosmos-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 4px currentColor; } .cosmos-reset-btn { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.15); color: white; font-size: 18px; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.15s ease, transform 0.12s ease; } .cosmos-reset-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.06); } /* Tooltip that follows the hovered star */ .cosmos-tooltip { position: absolute; pointer-events: none; background: rgba(255, 255, 255, 0.95); color: var(--ink); padding: 6px 12px; border-radius: 10px; font-size: 0.85rem; font-family: 'Fraunces', serif; font-style: italic; white-space: nowrap; transform: translate(-50%, -130%); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3); display: none; } .cosmos-tooltip.visible { display: block; } /* Modal */ .cosmos-modal-bd { position: fixed; inset: 0; background: rgba(15, 8, 22, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 1200; padding: 20px; opacity: 0; transition: opacity 0.3s ease; } .cosmos-modal-bd.visible { display: flex; opacity: 1; } .cosmos-modal { position: relative; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; background: linear-gradient(135deg, white, #FFEAF1); border-radius: 22px; padding: 32px 28px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); transform: scale(0.92); opacity: 0; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease; } .cosmos-modal-bd.visible .cosmos-modal { transform: scale(1); opacity: 1; } .cosmos-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--ink-soft); font-size: 14px; cursor: pointer; z-index: 2; } .cosmos-modal-close:hover { background: var(--card-bg); color: var(--ink); } .cosmos-modal-eyebrow { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--pink-500); margin-bottom: 6px; } .cosmos-modal-meta { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 16px; } .cosmos-modal-photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; } .cosmos-modal-text { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.1rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; text-wrap: balance; } .cosmos-modal-title { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; } .cosmos-modal-visits { margin-top: 16px; font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; text-align: center; font-weight: 700; } @media (max-width: 600px) { .cosmos-canvas-wrap { aspect-ratio: 1.2; } .cosmos-legend { font-size: 0.62rem; } } /* ===== Couple's Cabin (2D pixel survival) ===== */ .cabin-stage { display: flex; flex-direction: column; gap: 12px; } .cabin-inventory-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; background: rgba(255, 255, 255, 0.6); border-radius: 12px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.85); } .cabin-inv-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--card-bg); border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .cabin-canvas-wrap { position: relative; width: 100%; aspect-ratio: 1.33; max-height: 540px; border-radius: 18px; overflow: hidden; background: #2a1530; box-shadow: 0 14px 30px -10px rgba(60, 30, 60, 0.3), 0 4px 0 rgba(120, 60, 90, 0.15); } #cabin-canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } .cabin-controls-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; } /* HUD — health & hunger bars (top-left of canvas) */ .cabin-hud { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; font-family: 'Inter', system-ui, sans-serif; z-index: 3; } .cabin-hud-bar { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.55); padding: 3px 7px 3px 5px; border-radius: 999px; -webkit-font-smoothing: antialiased; backdrop-filter: blur(2px); } .cabin-hud-icon { font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); } .cabin-hud-track { width: 92px; height: 7px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; overflow: hidden; position: relative; } .cabin-hud-fill { height: 100%; border-radius: 999px; transition: width 0.25s ease, background 0.25s ease; } .cabin-hud-hp .cabin-hud-fill { background: linear-gradient(90deg, #ff5b6e, #ff8fb1); box-shadow: 0 0 6px rgba(255,91,110,.6) inset; width: 100%; } .cabin-hud-hunger .cabin-hud-fill { background: linear-gradient(90deg, #f59e0b, #fcd34d); box-shadow: 0 0 6px rgba(245,158,11,.6) inset; width: 100%; } .cabin-hud-num { font-size: 10px; font-weight: 700; color: #fff; min-width: 22px; text-align: right; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0,0,0,.6); } /* Hotbar */ .cabin-hotbar { display: flex; gap: 8px; margin-top: 10px; padding: 8px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 143, 177, 0.3); border-radius: 14px; flex-wrap: wrap; justify-content: center; } .cabin-slot { appearance: none; border: 2px solid rgba(255, 143, 177, 0.4); background: rgba(255, 255, 255, 0.85); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; position: relative; min-width: 64px; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; font-family: 'Inter', system-ui, sans-serif; } .cabin-slot:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(180,140,170,.3); } .cabin-slot.active { background: linear-gradient(180deg, #fff, #ffe1ec); border-color: #F26891; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 0 rgba(214,170,190,.3), 0 8px 14px -4px rgba(180,140,170,.4); transform: translateY(-1px); } .cabin-slot.locked { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); } .cabin-slot-key { position: absolute; top: 3px; left: 5px; font-size: 9px; font-weight: 700; color: var(--ink-soft); background: rgba(255, 255, 255, 0.7); padding: 1px 4px; border-radius: 4px; } .cabin-slot-icon { font-size: 22px; line-height: 1; } .cabin-slot-name { font-size: 10px; font-weight: 600; color: var(--ink); } .cabin-slot-count { display: inline-block; background: #F26891; color: #fff; font-size: 9px; padding: 0 4px; border-radius: 6px; margin-left: 2px; } /* Cooking modal */ .cabin-cook-bd { position: fixed; inset: 0; background: rgba(40, 20, 30, 0.55); display: none; align-items: center; justify-content: center; z-index: 1300; backdrop-filter: blur(6px); } .cabin-cook-bd.visible { display: flex; } .cabin-cook { background: linear-gradient(180deg, #fffaf2, #ffe9d6); border-radius: 22px; padding: 28px 26px; max-width: 480px; width: calc(100% - 32px); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.3); position: relative; font-family: 'Inter', system-ui, sans-serif; max-height: 88vh; overflow-y: auto; } .cabin-cook h4 { margin: 0 0 6px; font-family: 'Fraunces', serif; font-size: 24px; color: var(--ink); } .cabin-cook-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 16px; } .cabin-cook-list { display: flex; flex-direction: column; gap: 10px; } .cabin-cook-row { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 180, 100, 0.35); border-radius: 14px; padding: 10px 12px; } .cabin-cook-row.cant-afford { opacity: 0.55; } .cabin-cook-art { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 10px -2px rgba(180,140,170,.3); } .cabin-cook-icon { font-size: 22px; flex-shrink: 0; } .cabin-cook-info { flex: 1; min-width: 0; } .cabin-cook-name { font-weight: 700; font-size: 14px; color: var(--ink); } .cabin-cook-recipe { font-size: 11px; color: var(--ink-soft); margin-top: 2px; } .cabin-cook-effect { font-size: 11px; color: #16a34a; font-weight: 600; margin-top: 2px; } .cabin-cook-btn { appearance: none; border: none; background: linear-gradient(180deg, #F26891, #D94B7A); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-family: inherit; box-shadow: 0 3px 0 rgba(160, 50, 90, 0.3); } .cabin-cook-btn:disabled { opacity: 0.4; cursor: not-allowed; } .cabin-cook-btn:hover:not(:disabled) { transform: translateY(-1px); } /* Name labels overlay above the canvas — uses normal text rendering, not pixelated */ .cabin-names-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; /* Override the pixelated rendering inherited from the canvas wrap */ image-rendering: auto; } .cabin-name-tag { position: absolute; background: rgba(0, 0, 0, 0.72); color: white; font-size: 11px; padding: 2px 7px; border-radius: 6px; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -webkit-font-smoothing: antialiased; backdrop-filter: blur(2px); } .cabin-help-text { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; } .cabin-category-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; border-bottom: 1px solid rgba(180, 140, 170, 0.18); padding-bottom: 8px; } .cabin-cat-tab { appearance: none; border: 1px solid rgba(180, 140, 170, 0.25); background: var(--card-bg); border-radius: 10px; padding: 5px 11px; font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: background 0.12s ease, transform 0.12s ease; } .cabin-cat-tab:hover { transform: translateY(-1px); } .cabin-cat-tab.active { background: linear-gradient(135deg, #FFEAF1, #E4D6FF); border-color: var(--pink-400); box-shadow: 0 2px 6px -1px rgba(255, 143, 177, 0.3); } .cabin-item.cant-afford { opacity: 0.55; cursor: not-allowed; } .cabin-item .cabin-item-recipe { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 0.55rem; color: var(--ink-soft); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.85); padding: 1px 0; } .cabin-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.85); padding: 5px 14px; border-radius: 999px; font-size: 0.78rem; font-style: italic; color: var(--ink); font-family: 'Fraunces', serif; pointer-events: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(60, 30, 60, 0.15); transition: opacity 0.2s ease; } .cabin-hint.placing { background: linear-gradient(135deg, #FFB8CF, #F26891); color: white; font-weight: 700; } .cabin-hint.empty { background: rgba(255, 255, 255, 0.7); } .cabin-selected-actions { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; background: rgba(255, 255, 255, 0.95); padding: 6px; border-radius: 14px; box-shadow: 0 4px 14px -4px rgba(60, 30, 60, 0.3); } .cabin-action-btn { appearance: none; border: none; background: rgba(180, 140, 170, 0.1); border-radius: 10px; padding: 6px 12px; font-family: inherit; font-size: 0.92rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .cabin-action-btn:hover { background: rgba(255, 143, 177, 0.2); transform: translateY(-1px); } .cabin-action-btn.delete:hover { background: #FFD1DC; color: #b14b6e; } .cabin-catalog-wrap { background: rgba(255, 255, 255, 0.6); border-radius: 14px; padding: 10px 14px 12px; border: 1px solid rgba(255, 255, 255, 0.85); } .cabin-catalog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cabin-catalog-title { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); } .cabin-hearts-display { font-size: 0.85rem; font-weight: 700; color: var(--pink-500); } .cabin-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; } .cabin-item { position: relative; aspect-ratio: 1; background: var(--card-bg); border-radius: 12px; border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; transition: transform 0.12s ease, border-color 0.12s ease; overflow: hidden; } .cabin-item:hover { transform: translateY(-2px); border-color: rgba(255, 143, 177, 0.4); } .cabin-item.selected { border-color: var(--pink-400); background: linear-gradient(135deg, white, #FFEAF1); box-shadow: 0 4px 12px -2px rgba(255, 143, 177, 0.4); } .cabin-item.locked { opacity: 0.5; cursor: not-allowed; } .cabin-item.locked:hover { transform: none; } .cabin-item-icon { font-size: 28px; line-height: 1; } .cabin-item-name { font-size: 0.65rem; color: var(--ink); font-weight: 600; text-align: center; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .cabin-item-cost { position: absolute; top: 4px; right: 4px; font-size: 0.6rem; font-weight: 800; background: linear-gradient(135deg, #FFB8CF, #F26891); color: white; padding: 1px 5px; border-radius: 999px; letter-spacing: 0.04em; } .cabin-item.unlocked .cabin-item-cost { background: rgba(180, 140, 170, 0.2); color: var(--ink-soft); } /* Character customizer modal */ .cabin-customizer-bd { position: fixed; inset: 0; background: rgba(20, 8, 28, 0.78); display: none; align-items: center; justify-content: center; z-index: 1200; padding: 20px; } .cabin-customizer-bd.visible { display: flex; } .cabin-customizer { position: relative; background: linear-gradient(135deg, white, #FFEAF1); border-radius: 20px; padding: 24px; max-width: 380px; width: 100%; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5); } .cabin-customizer h4 { margin: 0 0 12px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem; } .cabin-customizer-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(180, 140, 170, 0.15); cursor: pointer; font-size: 14px; } .cabin-customizer-preview { width: 100%; height: 140px; background: #f5e8d8; border-radius: 12px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; image-rendering: pixelated; position: relative; } .cabin-customizer-preview canvas { image-rendering: pixelated; } .cabin-customizer-row { margin-bottom: 12px; } .cabin-customizer-row label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 4px; } .cabin-color-row { display: flex; gap: 6px; flex-wrap: wrap; } .cabin-color-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; } .cabin-color-swatch:hover { transform: scale(1.1); } .cabin-color-swatch.active { border-color: var(--ink); transform: scale(1.1); } .cabin-customizer .btn { width: 100%; margin-top: 6px; } @media (max-width: 600px) { .cabin-canvas-wrap { aspect-ratio: 1.3; } .cabin-catalog { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } .cabin-item-icon { font-size: 22px; } .cabin-item-name { font-size: 0.6rem; } } /* ===== Sealed Surprises ===== */ .ssb-compose { background: linear-gradient(135deg, #FFEAF1, #E4D6FF); border-radius: 18px; padding: 18px 20px; margin-bottom: 18px; } .ssb-form { display: flex; flex-direction: column; gap: 12px; } .ssb-form textarea { width: 100%; min-height: 90px; resize: vertical; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 143, 177, 0.35); background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 1rem; color: var(--ink); outline: none; } .ssb-form textarea:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.18); } .ssb-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ssb-photo-btn { cursor: pointer; white-space: nowrap; } .ssb-photo-btn.has-photo { background: linear-gradient(135deg, #DDF7E5, #B8EDC8); color: #2a6a3e; } .ssb-date-pick { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--ink); } .ssb-date-pick input[type="date"] { padding: 9px 12px; border: 1px solid rgba(255, 143, 177, 0.4); border-radius: 12px; background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 0.92rem; color: var(--ink); outline: none; } .ssb-date-pick input[type="date"]:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.18); } #ssb-seal-btn { margin-left: auto; } .ssb-hint { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; } .ssb-hint.error { color: var(--pink-500); } .ssb-hint.success { color: #2a6a3e; } .ssb-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid rgba(180, 140, 170, 0.18); padding-bottom: 0; } .ssb-tab { appearance: none; background: none; border: none; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 0.92rem; color: var(--ink-soft); font-weight: 600; position: relative; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ssb-tab.active { color: var(--ink); border-bottom-color: var(--pink-400); } .ssb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; } .ssb-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); font-style: italic; padding: 32px 16px; } /* The wrapped gift box card */ .ssb-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.85); text-align: center; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.25s ease; position: relative; overflow: hidden; } .ssb-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(180, 100, 150, 0.3); } .ssb-card.opened { cursor: default; opacity: 0.85; } .ssb-card.opened:hover { transform: none; box-shadow: none; } /* The 3D-ish box illustration */ .ssb-box { position: relative; width: 120px; height: 120px; margin: 8px auto 4px; perspective: 600px; transform-style: preserve-3d; } .ssb-box-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 6px 18px -4px rgba(180,140,170,.4); z-index: 0; } /* Hide the legacy CSS-drawn box pieces — the AI wrapping replaces them. */ .ssb-box-body, .ssb-box-lid, .ssb-box-ribbon-h, .ssb-box-ribbon-v { display: none; } /* Keep the bow as an accent above the wrapping */ .ssb-box-bow { z-index: 1; } [data-theme="midnight"] .ssb-box-art { box-shadow: 0 6px 18px -4px rgba(0,0,0,.6); } .ssb-box-body { position: absolute; inset: 12px 0 0 0; border-radius: 8px; background: linear-gradient(135deg, var(--ssb-color-1, #FFB8CF), var(--ssb-color-2, #F26891)); box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.18), inset 0 4px 8px rgba(255, 255, 255, 0.5), 0 6px 14px -4px rgba(0, 0, 0, 0.25); } .ssb-box-lid { position: absolute; top: 0; left: -4px; right: -4px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--ssb-color-1, #FFB8CF), var(--ssb-color-2, #F26891)); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.2), inset 0 2px 6px rgba(255, 255, 255, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.2); transform-origin: bottom; transition: transform 0.6s cubic-bezier(.34,1.56,.64,1); } /* Cross ribbon */ .ssb-box-ribbon-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 14px; margin-left: -7px; background: linear-gradient(to right, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); box-shadow: 0 0 6px rgba(255, 255, 255, 0.4); z-index: 2; } .ssb-box-ribbon-h { position: absolute; top: 12px; left: 0; right: 0; height: 12px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); box-shadow: 0 0 6px rgba(255, 255, 255, 0.4); z-index: 2; } /* Bow */ .ssb-box-bow { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 28px; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); animation: ssb-bow-bob 3.6s ease-in-out infinite; } @keyframes ssb-bow-bob { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); } 50% { transform: translateX(-50%) translateY(-2px) rotate(3deg); } } /* Ready-to-open: pulse + sparkle */ .ssb-card.ready .ssb-box { animation: ssb-pulse 1.6s ease-in-out infinite; } @keyframes ssb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .ssb-card.ready .ssb-box::before, .ssb-card.ready .ssb-box::after { content: '✨'; position: absolute; font-size: 14px; animation: ssb-sparkle 2.4s ease-in-out infinite; pointer-events: none; } .ssb-card.ready .ssb-box::before { top: -6px; right: -8px; animation-delay: 0s; } .ssb-card.ready .ssb-box::after { bottom: 4px; left: -10px; animation-delay: 1.2s; } @keyframes ssb-sparkle { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.2); } } /* Opened state — lid is off, body shows soft glow */ .ssb-card.opened .ssb-box-lid { transform: translateY(-12px) rotate(-18deg); opacity: 0.7; } .ssb-card.opened .ssb-box-bow { opacity: 0.6; transform: translateX(-50%) translateY(-14px) rotate(-12deg); } .ssb-card-meta { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; } .ssb-card-meta.ready { color: var(--pink-500); font-weight: 700; } .ssb-card-from { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; } .ssb-card-action { margin-top: 4px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink-500); } .ssb-card.opened .ssb-card-action { color: var(--ink-soft); } /* Sender controls (for "From me" tab) */ .ssb-card-controls { display: flex; justify-content: center; gap: 8px; margin-top: 6px; } .ssb-card-controls button { appearance: none; border: none; background: rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 4px 10px; font-size: 0.72rem; cursor: pointer; color: var(--ink-soft); } .ssb-card-controls button:hover { background: var(--card-bg); color: var(--ink); } /* ===== Open Modal ===== */ .ssb-modal-backdrop { position: fixed; inset: 0; background: rgba(20, 8, 28, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 1200; padding: 20px; opacity: 0; transition: opacity 0.3s ease; } .ssb-modal-backdrop.visible { display: flex; opacity: 1; } .ssb-modal { position: relative; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; background: linear-gradient(135deg, white, #FFEAF1); border-radius: 24px; padding: 32px 28px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; transform: scale(0.92); opacity: 0; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease; } .ssb-modal-backdrop.visible .ssb-modal { transform: scale(1); opacity: 1; } .ssb-modal-close { position: absolute; top: 14px; right: 14px; appearance: none; border: none; background: rgba(255, 255, 255, 0.8); width: 32px; height: 32px; border-radius: 50%; font-size: 14px; cursor: pointer; color: var(--ink-soft); z-index: 2; } .ssb-modal-close:hover { background: var(--card-bg); color: var(--ink); } /* Confetti container in modal */ .ssb-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 24px; } .ssb-confetti-piece { position: absolute; width: 8px; height: 14px; border-radius: 2px; top: -20px; animation: ssb-confetti-fall 2.6s linear forwards; } @keyframes ssb-confetti-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(120vh) rotate(720deg); opacity: 0.4; } } /* Modal content */ .ssb-modal-content { position: relative; z-index: 2; text-align: center; } .ssb-modal-eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pink-500); font-weight: 700; margin-bottom: 6px; } .ssb-modal-from { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; } .ssb-modal-photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; margin-bottom: 18px; box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.3); animation: ssb-photo-rise 0.7s cubic-bezier(.34,1.56,.64,1) 0.3s backwards; } @keyframes ssb-photo-rise { from { transform: translateY(20px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .ssb-modal-message { font-family: 'Fraunces', serif; font-size: 1.15rem; line-height: 1.5; color: var(--ink); font-style: italic; text-wrap: balance; white-space: pre-wrap; animation: ssb-photo-rise 0.7s cubic-bezier(.34,1.56,.64,1) 0.5s backwards; } .ssb-modal-meta { margin-top: 18px; font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; } /* Big animated unwrap header in modal */ .ssb-modal-header { display: grid; place-items: center; margin-bottom: 18px; position: relative; height: 64px; } .ssb-modal-header-emoji { font-size: 56px; filter: drop-shadow(0 6px 12px rgba(255, 143, 177, 0.5)); animation: ssb-bow-pop 0.6s cubic-bezier(.34,1.56,.64,1); } @keyframes ssb-bow-pop { 0% { transform: scale(0) rotate(-45deg); } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) rotate(0); } } /* ===== Magic 8-Ball ===== */ .eb-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0; } .eb-canvas-wrap { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; filter: drop-shadow(0 24px 32px rgba(50, 30, 60, 0.35)); } #eb-canvas { display: block; width: 100%; height: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; } .eb-answer-overlay { position: absolute; top: 50%; left: 50%; width: 62%; transform: translate(-50%, -50%) scale(0.82); text-align: center; font-family: 'Fraunces', serif; font-size: clamp(1.05rem, 2.5vw, 1.4rem); font-weight: 600; font-style: italic; color: #f3eaff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 18px rgba(180, 140, 255, 0.55), 0 0 36px rgba(255, 143, 177, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.05); text-wrap: balance; line-height: 1.25; letter-spacing: 0.01em; } .eb-answer-overlay.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } .eb-form { display: flex; gap: 10px; width: 100%; max-width: 460px; flex-wrap: wrap; } .eb-form input { flex: 1 1 240px; min-width: 0; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 143, 177, 0.4); background: rgba(255, 255, 255, 0.7); font-family: inherit; font-size: 1rem; color: var(--ink); outline: none; } .eb-form input:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.18); } .eb-form .btn { flex: 0 0 auto; min-width: 100px; } .eb-current-q { font-family: 'Fraunces', serif; font-style: italic; color: var(--ink-soft); text-align: center; font-size: 0.95rem; min-height: 1.4em; max-width: 460px; } .eb-current-q.has-q { color: var(--ink); font-size: 1.05rem; } .eb-history-wrap { margin-top: 18px; border-top: 1px solid rgba(180, 140, 170, 0.18); padding-top: 16px; } .eb-history-label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; } .eb-history { display: flex; flex-direction: column; gap: 8px; } .eb-history-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: rgba(255, 255, 255, 0.55); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.7); } .eb-history-q { font-size: 0.85rem; color: var(--ink-soft); font-style: italic; } .eb-history-a { font-size: 0.95rem; color: var(--ink); font-weight: 600; font-family: 'Fraunces', serif; } .eb-history-meta { font-size: 0.7rem; color: var(--ink-soft); letter-spacing: 0.06em; margin-top: 2px; } /* ============================================ */ /* ===== 3D VFX: tilt, globe, hero hearts ===== */ /* ============================================ */ /* Tilt-on-hover — applies to all clay/game cards. The IIFE writes inline transform during mousemove; we add the transition for smooth resets on mouseleave + provide a perspective container. */ .tilt-3d { transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.05); transform-style: preserve-3d; will-change: transform; } .tilt-3d:active { transition: transform 0.12s ease; } /* Cards inside the wheel/spinner shouldn't tilt — they have their own transforms */ .spinner-card.tilt-3d, .wheel-wrap, .wheel-svg, .wheel-spin-btn { transform-style: flat; } /* ===== Globe card ===== */ .globe-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; margin: 8px 0 16px; } .globe-canvas-wrap { position: relative; width: 100%; aspect-ratio: 1.4; max-height: 480px; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at center, rgba(180, 200, 255, 0.18), rgba(255, 200, 220, 0.08) 60%, transparent 100%); } #globe-canvas { display: block; width: 100%; height: 100%; cursor: grab; } #globe-canvas:active { cursor: grabbing; } .globe-distance { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 999px; padding: 6px 14px; font-family: 'Fraunces', serif; font-style: italic; font-size: 0.95rem; color: var(--ink); box-shadow: 0 4px 14px -4px rgba(180, 140, 170, 0.3); white-space: nowrap; } .globe-cities { display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; } .globe-city { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, 0.6); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.85); } .globe-city .globe-pin { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 4px 8px -2px rgba(0, 0, 0, 0.15); } .globe-city.me .globe-pin { background: var(--pink-400); } .globe-city.them .globe-pin { background: var(--blue-400, #5C9FFF); } .globe-city .globe-name { font-weight: 600; color: var(--ink); } .globe-city .globe-meta { margin-left: auto; color: var(--ink-soft); font-size: 0.82rem; font-variant-numeric: tabular-nums; } .globe-city.empty .globe-name { font-style: italic; color: var(--ink-soft); font-weight: 400; } .globe-city-action { appearance: none; border: none; background: rgba(255, 255, 255, 0.6); color: var(--ink-soft); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; line-height: 1; display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .globe-city-action:hover { background: var(--card-bg); color: var(--pink-500); transform: scale(1.08); } .globe-city-action[data-act="remove"]:hover { background: #FFE3E0; color: #D94B7A; } .globe-hint { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; text-align: center; } .globe-hint.error { color: var(--pink-500); } .globe-hint.success { color: #2a6a3e; } @media (min-width: 800px) { .globe-wrap { grid-template-columns: 1.4fr 1fr; } } @media (max-width: 600px) { .globe-canvas-wrap { aspect-ratio: 1.1; } } /* ===== Live Chat ===== */ .chat-launcher { position: fixed; left: 20px; bottom: 20px; z-index: 1100; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none; } .chat-launcher > * { pointer-events: auto; } .chat-launcher-btn { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 3px solid white; background: linear-gradient(135deg, #B5D4FF, #7FB8FF); cursor: pointer; font-size: 24px; display: grid; place-items: center; box-shadow: 0 8px 18px -4px rgba(80, 130, 200, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -3px 8px rgba(0, 0, 0, 0.1) inset; transition: transform 0.2s ease, background 0.2s ease; } .chat-launcher-btn:hover { transform: scale(1.08); } .chat-launcher-btn:active { transform: scale(0.96); } .chat-launcher-icon { line-height: 1; } .chat-launcher-badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: linear-gradient(135deg, #F26891, #D94B7A); color: white; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(217, 75, 122, 0.5); border: 2px solid white; animation: chat-badge-pop 0.4s cubic-bezier(.34, 1.56, .64, 1); } @keyframes chat-badge-pop { from { transform: scale(0); } to { transform: scale(1); } } /* The expanding chat panel */ .chat-panel { background: var(--card-bg); border-radius: 22px; width: 340px; max-width: calc(100vw - 40px); height: 480px; max-height: calc(100vh - 120px); box-shadow: 0 24px 50px -12px rgba(60, 30, 60, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; display: none; flex-direction: column; overflow: hidden; transform-origin: bottom left; } .chat-launcher.open .chat-panel { display: flex; animation: chat-panel-pop 0.28s cubic-bezier(.34, 1.56, .64, 1); } @keyframes chat-panel-pop { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(135deg, #FFEAF1, #E4D6FF); border-bottom: 1px solid rgba(180, 140, 170, 0.12); flex-shrink: 0; } .chat-header-text { display: flex; flex-direction: column; gap: 2px; } .chat-title { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.1rem; font-weight: 500; color: var(--ink); } .chat-presence { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 600; } .chat-presence.online { color: #2a6a3e; } .chat-presence.online::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ad08a; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(74, 208, 138, 0.25); } .chat-close { appearance: none; border: none; background: rgba(255, 255, 255, 0.7); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 18px; font-weight: 700; color: var(--ink-soft); display: grid; place-items: center; line-height: 1; } .chat-close:hover { background: var(--card-bg); color: var(--ink); } .chat-messages { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: rgba(180, 140, 170, 0.3) transparent; } .chat-messages::-webkit-scrollbar { width: 6px; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(180, 140, 170, 0.3); border-radius: 3px; } .chat-empty { text-align: center; font-style: italic; color: var(--ink-soft); padding: 32px 16px; font-size: 0.9rem; } .chat-day-divider { text-align: center; font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin: 12px 0 6px; position: relative; } .chat-day-divider::before, .chat-day-divider::after { content: ''; display: inline-block; width: 24px; height: 1px; background: rgba(180, 140, 170, 0.25); vertical-align: middle; margin: 0 8px; } .chat-msg-group { display: flex; flex-direction: column; gap: 2px; max-width: 80%; } .chat-msg-group.me { align-self: flex-end; align-items: flex-end; } .chat-msg-group.them { align-self: flex-start; align-items: flex-start; } .chat-msg-author { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-soft); padding: 0 4px; margin-bottom: 2px; } .chat-msg-bubble { padding: 9px 13px; border-radius: 16px; font-size: 0.95rem; line-height: 1.4; color: var(--ink); word-wrap: break-word; white-space: pre-wrap; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .chat-msg-group.me .chat-msg-bubble { background: linear-gradient(135deg, #FFD9E5, #FFB8CF); border-bottom-right-radius: 6px; color: var(--ink); } .chat-msg-group.them .chat-msg-bubble { background: linear-gradient(135deg, #E4D6FF, #D6E8FF); border-bottom-left-radius: 6px; } /* Stack subsequent bubbles in same group with tighter corners */ .chat-msg-group.me .chat-msg-bubble:not(:last-child) { border-bottom-right-radius: 16px; } .chat-msg-group.me .chat-msg-bubble:not(:first-child) { border-top-right-radius: 6px; } .chat-msg-group.them .chat-msg-bubble:not(:last-child) { border-bottom-left-radius: 16px; } .chat-msg-group.them .chat-msg-bubble:not(:first-child) { border-top-left-radius: 6px; } .chat-msg-time { font-size: 0.65rem; color: var(--ink-soft); padding: 0 4px; margin-top: 2px; opacity: 0.7; } /* Bubbles that are pure emoji shed the chat-bubble look and just float */ .chat-msg-bubble.emoji-only { background: transparent !important; box-shadow: none !important; padding: 4px 6px; border-radius: 0 !important; font-size: 1.6rem; line-height: 1.1; } .chat-msg-bubble.emoji-large { font-size: 2.4rem; } .chat-msg-bubble.emoji-jumbo { font-size: 4rem; filter: drop-shadow(0 4px 10px rgba(255, 143, 177, 0.4)); } /* Reaction chips below bubble */ .chat-msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding: 0 4px; } .chat-msg-group.me .chat-msg-reactions { justify-content: flex-end; } .chat-msg-group.them .chat-msg-reactions { justify-content: flex-start; } .chat-msg-reaction-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(180, 140, 170, 0.2); border-radius: 999px; font-size: 0.78rem; color: var(--ink); cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; user-select: none; } .chat-msg-reaction-chip:hover { transform: scale(1.08); background: var(--card-bg); } .chat-msg-reaction-chip.mine { background: linear-gradient(135deg, #FFEAF1, #FFD9E5); border-color: rgba(255, 143, 177, 0.5); font-weight: 700; } .chat-msg-reaction-chip .chat-react-count { font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; } /* Quick-react picker that pops over a bubble */ .chat-react-picker { position: absolute; background: var(--card-bg); border-radius: 999px; padding: 6px 8px; box-shadow: 0 8px 22px -6px rgba(60, 30, 60, 0.35), 0 0 0 1px rgba(180, 140, 170, 0.1); display: flex; gap: 2px; z-index: 20; animation: chat-react-pop 0.22s cubic-bezier(.34,1.56,.64,1); bottom: calc(100% + 6px); left: 0; } .chat-msg-group.me .chat-react-picker { left: auto; right: 0; } @keyframes chat-react-pop { from { opacity: 0; transform: translateY(4px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .chat-react-emoji { appearance: none; border: none; background: transparent; width: 32px; height: 32px; font-size: 19px; cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background 0.12s ease, transform 0.12s ease; } .chat-react-emoji:hover { background: rgba(255, 143, 177, 0.15); transform: scale(1.2); } /* Bubble has a hover affordance suggesting clickability */ .chat-msg-bubble { position: relative; cursor: pointer; } .chat-msg-bubble:hover { filter: brightness(1.04); } .chat-typing { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; padding: 0 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; } .chat-typing.active::after { content: '...'; animation: chat-dots 1.2s steps(4) infinite; width: 12px; display: inline-block; text-align: left; } @keyframes chat-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* Emoji picker (slides in above the input form) */ .chat-emoji-picker { display: none; border-top: 1px solid rgba(180, 140, 170, 0.12); padding: 10px 12px; background: rgba(255, 255, 255, 0.85); flex-shrink: 0; max-height: 180px; overflow-y: auto; } .chat-emoji-picker.open { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; animation: chat-emoji-pop 0.2s ease-out; } @keyframes chat-emoji-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .chat-emoji-pick { width: 32px; height: 32px; border: none; background: rgba(180, 140, 170, 0.06); border-radius: 8px; cursor: pointer; font-size: 19px; display: grid; place-items: center; transition: background 0.12s ease, transform 0.12s ease; padding: 0; } .chat-emoji-pick:hover { background: linear-gradient(135deg, #FFEAF1, #E4D6FF); transform: scale(1.15); } .chat-emoji-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(180, 140, 170, 0.08); cursor: pointer; font-size: 20px; display: grid; place-items: center; transition: background 0.15s ease, transform 0.15s ease; } .chat-emoji-btn:hover { background: rgba(255, 143, 177, 0.15); transform: scale(1.06); } .chat-emoji-btn.active { background: linear-gradient(135deg, #FFEAF1, #E4D6FF); } .chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(180, 140, 170, 0.12); flex-shrink: 0; } .chat-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 143, 177, 0.3); background: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 0.95rem; color: var(--ink); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .chat-form input:focus { border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255, 143, 177, 0.18); } .chat-send { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, #F26891, #D94B7A); color: white; cursor: pointer; font-size: 16px; font-weight: 700; display: grid; place-items: center; transition: transform 0.15s ease, opacity 0.15s ease; box-shadow: 0 4px 10px -2px rgba(217, 75, 122, 0.4); } .chat-send:hover { transform: scale(1.08); } .chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } @media (max-width: 600px) { .chat-launcher { left: 12px; bottom: 12px; } .chat-launcher-btn { width: 50px; height: 50px; font-size: 20px; } .chat-panel { width: calc(100vw - 24px); height: calc(100vh - 100px); border-radius: 18px; } } /* ===== Live Emote Launcher ===== */ .emote-launcher { position: fixed; right: 20px; bottom: 100px; /* above the existing reach button */ z-index: 1100; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; } .emote-launcher > * { pointer-events: auto; } .emote-launcher-btn { width: 56px; height: 56px; border-radius: 50%; border: 3px solid white; background: linear-gradient(135deg, #FFB8CF, #F26891); cursor: pointer; font-size: 26px; display: grid; place-items: center; box-shadow: 0 8px 18px -4px rgba(180, 100, 150, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -3px 8px rgba(0, 0, 0, 0.1) inset; transition: transform 0.2s ease, background 0.2s ease; } .emote-launcher-btn:hover { transform: scale(1.08); } .emote-launcher-btn:active { transform: scale(0.96); } .emote-launcher.armed .emote-launcher-btn { background: linear-gradient(135deg, #C4B0F5, #7B5DC4); animation: emote-armed-pulse 1.4s ease-in-out infinite; } @keyframes emote-armed-pulse { 0%, 100% { box-shadow: 0 8px 18px -4px rgba(123, 93, 196, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 0 rgba(196, 176, 245, 0.6); } 50% { box-shadow: 0 8px 18px -4px rgba(123, 93, 196, 0.5), 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 12px rgba(196, 176, 245, 0); } } .emote-launcher-panel { background: var(--card-bg); border-radius: 18px; padding: 12px; box-shadow: 0 14px 30px -10px rgba(60, 30, 60, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; min-width: 240px; max-width: 280px; display: none; transform-origin: bottom right; } .emote-launcher.open .emote-launcher-panel { display: block; animation: emote-panel-pop 0.25s cubic-bezier(.34,1.56,.64,1); } @keyframes emote-panel-pop { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .emote-launcher-hint { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 8px; text-align: center; font-style: italic; } .emote-launcher-armed { font-size: 0.78rem; color: var(--pink-500); margin-top: 10px; text-align: center; font-weight: 700; letter-spacing: 0.04em; display: none; } .emote-launcher.armed .emote-launcher-armed { display: block; } .emote-launcher.armed .emote-launcher-hint { display: none; } .emote-launcher-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 220px; overflow-y: auto; } .emote-pick { width: 36px; height: 36px; border: none; background: rgba(180, 140, 170, 0.08); border-radius: 8px; cursor: pointer; font-size: 22px; display: grid; place-items: center; transition: background 0.15s ease, transform 0.15s ease; padding: 0; } .emote-pick:hover { background: linear-gradient(135deg, #FFEAF1, #E4D6FF); transform: scale(1.12); } .emote-pick.active { background: linear-gradient(135deg, #C4B0F5, #7B5DC4); color: white; transform: scale(1.12); box-shadow: 0 4px 10px -2px rgba(123, 93, 196, 0.4); } /* Cursor follower in armed mode (mouse only) */ .emote-cursor { position: fixed; pointer-events: none; font-size: 36px; z-index: 9998; transform: translate(-50%, -50%); opacity: 0.8; filter: drop-shadow(0 2px 6px rgba(180, 100, 150, 0.4)); transition: opacity 0.15s ease; display: none; } .emote-launcher.armed ~ .emote-cursor, body.emote-armed .emote-cursor { display: block; } /* Dropped emote — bounce in, float up, fade out */ .emote-drop { position: fixed; pointer-events: none; font-size: 56px; z-index: 9999; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 14px rgba(255, 143, 177, 0.55)); animation: emote-drop-anim 2.6s cubic-bezier(.2, .9, .3, 1) forwards; user-select: none; } @keyframes emote-drop-anim { 0% { transform: translate(-50%, -50%) scale(0.2) rotate(-25deg); opacity: 0; } 18% { transform: translate(-50%, -55%) scale(1.5) rotate(10deg); opacity: 1; } 35% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; } 60% { transform: translate(-50%, -90%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -180%) scale(1.2) rotate(15deg); opacity: 0; } } /* Optional little author label below the emote — fades fast */ .emote-drop-by { position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%, 32px); font-size: 0.72rem; font-weight: 700; color: white; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); letter-spacing: 0.04em; animation: emote-drop-by-anim 1.6s ease-out forwards; } @keyframes emote-drop-by-anim { 0% { opacity: 0; transform: translate(-50%, 24px); } 20% { opacity: 1; transform: translate(-50%, 32px); } 100% { opacity: 0; transform: translate(-50%, 48px); } } /* When armed, change body cursor */ body.emote-armed, body.emote-armed * { cursor: copy !important; } @media (max-width: 600px) { .emote-launcher { right: 12px; bottom: 90px; } .emote-launcher-btn { width: 50px; height: 50px; font-size: 22px; } .emote-launcher-panel { min-width: 220px; } .emote-pick { width: 32px; height: 32px; font-size: 19px; } .emote-drop { font-size: 44px; } } /* ============================================================ Premium section — the "shop window" for subscribers ============================================================ */ .lj-nav-premium { background: linear-gradient(135deg, #FF8FB1 0%, #C4B0F5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700 !important; } #premium { padding-top: 24px; } .lj-prem-hero { position: relative; border-radius: var(--radius); background: radial-gradient(ellipse at top left, rgba(255,180,205,.45), transparent 60%), radial-gradient(ellipse at bottom right, rgba(196,176,245,.45), transparent 55%), linear-gradient(135deg, #FFE4EE 0%, #F1E8FF 50%, #DDEBFF 100%); padding: 48px 32px 40px; text-align: center; overflow: hidden; box-shadow: var(--clay-shadow-lav); margin-bottom: 28px; } .lj-prem-hero.is-premium { background: radial-gradient(ellipse at top, rgba(255,215,150,.5), transparent 60%), linear-gradient(135deg, #FFF0DC 0%, #FFE4EE 50%, #F1E8FF 100%); } .lj-prem-hero-inner { max-width: 640px; margin: 0 auto; } .lj-prem-hero .eyebrow { color: var(--pink-500); margin-bottom: 8px; } .lj-prem-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; } .lj-prem-lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 520px; margin: 0 auto 28px; line-height: 1.5; } .lj-prem-pricing { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; } .lj-prem-cta { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 28px; border: none; border-radius: 18px; background: linear-gradient(135deg, #FFB8CF, #C4B0F5); color: #fff; font-family: inherit; cursor: pointer; position: relative; min-width: 180px; box-shadow: 0 8px 0 rgba(180,140,200,.28), 0 16px 28px -10px rgba(180,140,200,.45); transition: transform .15s ease, box-shadow .15s ease; } .lj-prem-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 0 rgba(180,140,200,.32), 0 20px 32px -10px rgba(180,140,200,.5); } .lj-prem-cta:active { transform: translateY(2px); box-shadow: 0 4px 0 rgba(180,140,200,.28); } .lj-prem-cta.yearly { background: linear-gradient(135deg, #FF8FB1, #B89AF0); border: 2px solid rgba(255,255,255,0.5); } .lj-prem-cta-tag { position: absolute; top: -10px; right: 12px; background: var(--ink); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .lj-prem-cta-amt { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 600; line-height: 1; } .lj-prem-cta-amt span { font-size: 0.85rem; font-weight: 500; opacity: 0.85; margin-left: 2px; } .lj-prem-cta-label { font-size: 0.78rem; opacity: 0.95; font-weight: 500; letter-spacing: 0.02em; } .lj-prem-fineprint { font-size: 0.82rem; color: var(--ink-soft); opacity: 0.8; margin-top: 14px; } .lj-prem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 32px; } .lj-prem-card { background: var(--card-bg, #fff); border-radius: 22px; padding: 22px 20px 18px; box-shadow: var(--clay-shadow); display: flex; flex-direction: column; position: relative; transition: transform .15s ease; } .lj-prem-card:hover { transform: translateY(-2px); } .lj-prem-card.locked::before { content: ''; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(135deg, rgba(255,143,177,0.04), rgba(196,176,245,0.04)); pointer-events: none; } .lj-prem-card-icon { font-size: 2rem; margin-bottom: 6px; } .lj-prem-card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: 0 0 4px; } .lj-prem-card-tag { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.4; } .lj-prem-card-list { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; } .lj-prem-card-list li { font-size: 0.86rem; color: var(--ink); padding: 5px 0 5px 18px; position: relative; border-bottom: 1px dashed var(--surface-line); line-height: 1.4; } .lj-prem-card-list li:last-child { border-bottom: none; } .lj-prem-card-list li::before { content: '·'; position: absolute; left: 6px; color: var(--pink-300); font-weight: 700; } .lj-prem-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--surface-line); } .lj-prem-card-status { font-size: 0.78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; letter-spacing: 0.02em; } .lj-prem-card-status.locked { background: linear-gradient(135deg, #FFE4EE, #F1E8FF); color: var(--pink-500); } .lj-prem-card-status.unlocked { background: linear-gradient(135deg, #DCF5DC, #E4F5E0); color: #4a7a3e; } .lj-prem-card-go { font-size: 0.85rem; color: var(--pink-500); text-decoration: none; font-weight: 600; } .lj-prem-card-go:hover { text-decoration: underline; } .lj-prem-foot { background: var(--card-bg, #fff); border-radius: var(--radius); padding: 28px 28px 32px; box-shadow: var(--clay-shadow); text-align: center; } .lj-prem-foot h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.4rem; color: var(--ink); margin: 0 0 14px; } .lj-prem-foot ul { list-style: none; padding: 0; max-width: 540px; margin: 0 auto 24px; text-align: left; } .lj-prem-foot li { padding: 10px 0 10px 28px; position: relative; color: var(--ink); font-size: 0.95rem; line-height: 1.5; border-bottom: 1px dashed var(--surface-line); } .lj-prem-foot li:last-child { border-bottom: none; } .lj-prem-foot li::before { content: '✦'; position: absolute; left: 6px; top: 10px; color: var(--pink-400); } .lj-prem-cta-bottom { flex-direction: row; gap: 8px; font-size: 1rem; padding: 16px 28px; } @media (max-width: 600px) { .lj-prem-hero { padding: 32px 18px 28px; } .lj-prem-pricing { gap: 12px; } .lj-prem-cta { min-width: 150px; padding: 14px 20px; } .lj-prem-cta-amt { font-size: 1.5rem; } .lj-prem-grid { grid-template-columns: 1fr; gap: 14px; } .lj-prem-card { padding: 18px 16px 14px; } } /* Premium gate buttons in the Shop (free users see these instead of heart prices) */ .shop-pack-premium { background: linear-gradient(135deg, #FFB8CF, #C4B0F5) !important; color: #fff !important; border: none !important; font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 4px 0 rgba(180,140,200,.28), 0 10px 18px -8px rgba(180,140,200,.4) !important; } .shop-pack-premium strong { font-weight: 700; letter-spacing: 0.04em; } .shop-pack-premium:hover { transform: translateY(-1px); filter: brightness(1.05); } .game-pack-tier.premium-gate { background: linear-gradient(135deg, rgba(255,184,207,0.4), rgba(196,176,245,0.4)) !important; border-color: rgba(196,176,245,0.5) !important; cursor: pointer; } .game-pack-tier.premium-gate .tier-price { color: var(--pink-500); font-weight: 700; letter-spacing: 0.02em; } .game-pack-tier.premium-gate:hover { background: linear-gradient(135deg, rgba(255,184,207,0.55), rgba(196,176,245,0.55)) !important; } /* Shop redeem-code widget */ .shop-redeem-card { margin: 18px 0 24px; } .shop-redeem { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #FFE4EE 0%, #F1E8FF 100%); border-radius: 18px; padding: 14px 18px; box-shadow: var(--clay-shadow-lav); flex-wrap: wrap; } .shop-redeem-icon { font-size: 1.6rem; flex-shrink: 0; } .shop-redeem-text { display: flex; flex-direction: column; flex: 1; min-width: 130px; line-height: 1.3; } .shop-redeem-text strong { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); } .shop-redeem-text span { font-size: 0.82rem; color: var(--ink-soft); } .shop-redeem input { flex: 1; min-width: 130px; padding: 10px 14px; border: 1.5px solid rgba(180,140,170,0.3); border-radius: 999px; font-family: inherit; font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.8); color: var(--ink); } .shop-redeem input::placeholder { letter-spacing: 0.06em; color: rgba(91, 71, 84, 0.5); } .shop-redeem input:focus { outline: none; border-color: var(--pink-400); box-shadow: 0 0 0 3px rgba(255,143,177,0.2); background: #fff; } .shop-redeem button { padding: 10px 22px; font-size: 0.9rem; flex-shrink: 0; } .shop-redeem button:disabled { opacity: 0.6; cursor: not-allowed; } .shop-redeem-status { margin-top: 10px; padding: 10px 16px; border-radius: 12px; font-size: 0.92rem; text-align: center; font-weight: 500; } .shop-redeem-status.error { background: #FFE4E4; color: #B33; } .shop-redeem-status.success { background: #DEF7E0; color: #2A6E3E; } @media (max-width: 600px) { .shop-redeem { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; } .shop-redeem input { min-width: 0; width: 100%; text-align: center; } .shop-redeem button { width: 100%; padding: 12px; } .shop-redeem-text { text-align: center; min-width: 0; } } /* ============================================================ Premium welcome modal — fires once after upgrade ============================================================ */ .lj-welcome-bd { position: fixed; inset: 0; background: rgba(43, 31, 42, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; padding: 20px; } .lj-welcome-bd.visible { opacity: 1; } .lj-welcome-modal { background: var(--cream, #FFF6EE); border-radius: 28px; max-width: 540px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative; box-shadow: 0 24px 60px -10px rgba(180,140,170,0.55); transform: scale(0.95); transition: transform 0.3s ease; } .lj-welcome-bd.visible .lj-welcome-modal { transform: scale(1); } .lj-welcome-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.85); border: none; font-size: 0.95rem; color: var(--ink); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .lj-welcome-close:hover { background: #fff; } .lj-welcome-hero { background: radial-gradient(ellipse at top, rgba(255,215,150,.45), transparent 60%), linear-gradient(135deg, #FFE4EE 0%, #F1E8FF 50%, #DDEBFF 100%); text-align: center; padding: 48px 28px 32px; border-radius: 28px 28px 0 0; position: relative; } .lj-welcome-stars { font-size: 1.8rem; letter-spacing: 0.4em; margin-bottom: 10px; filter: drop-shadow(0 2px 8px rgba(255,200,100,0.4)); animation: ljStarsPulse 2.4s ease-in-out infinite; } @keyframes ljStarsPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } } .lj-welcome-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; } .lj-welcome-sub { color: var(--ink-soft); font-size: 0.98rem; max-width: 380px; margin: 0 auto; } .lj-welcome-body { padding: 24px 28px 8px; } .lj-welcome-section { margin-bottom: 22px; } .lj-welcome-section h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); margin: 0 0 10px; } .lj-welcome-section p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; margin-bottom: 8px; } .lj-welcome-section p strong { color: var(--ink); } .lj-welcome-list { list-style: none; padding: 0; margin: 0; } .lj-welcome-list li { padding: 10px 0; display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; color: var(--ink); line-height: 1.4; border-bottom: 1px dashed var(--surface-line); } .lj-welcome-list li:last-child { border-bottom: none; } .lj-welcome-icon { font-size: 1.15rem; flex-shrink: 0; line-height: 1.3; } .lj-welcome-hearts { background: linear-gradient(135deg, #FFF0F5, #FFE4EE); border-radius: 18px; padding: 18px 18px 14px; } .lj-welcome-hearts h3 { margin-top: 0; } .lj-welcome-hearts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0 12px; font-size: 0.85rem; color: var(--ink); } .lj-welcome-hearts-grid span { padding: 4px 0; } .lj-welcome-hearts-balance { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 16px; background: rgba(255,255,255,0.75); border-radius: 12px; font-size: 0.95rem; color: var(--ink-soft); } .lj-welcome-hearts-balance strong { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--pink-500); font-weight: 600; } .lj-welcome-actions { padding: 12px 28px 28px; display: flex; flex-direction: column; gap: 10px; align-items: center; } .lj-welcome-cta { width: 100%; text-align: center; text-decoration: none !important; padding: 14px 24px; font-size: 1rem; } .lj-welcome-skip { background: none; border: none; color: var(--ink-soft); font-size: 0.88rem; text-decoration: underline; cursor: pointer; padding: 6px 12px; } .lj-welcome-skip:hover { color: var(--ink); } @media (max-width: 600px) { .lj-welcome-hero { padding: 40px 22px 26px; } .lj-welcome-body { padding: 22px 22px 4px; } .lj-welcome-actions { padding: 10px 22px 22px; } .lj-welcome-hearts-grid { grid-template-columns: 1fr; } }