/* Styles for index.php only. Interactive reflection screens use their existing styles. */
.reflection-menu-page { --menu-ink: #203b32; --menu-muted: #6e7b76; --menu-surface: #fff; --menu-border: #e3e9e4; --menu-accent: #287451; min-height: 100%; }
:root[data-theme="light"] body.reflection-menu-page { background: radial-gradient(ellipse at 50% 2%, #eaf2e9 0, transparent 48%), #f7f8f4; color: var(--menu-ink); }
html[data-theme="dark"] .reflection-menu-page { --menu-ink: #edf4ef; --menu-muted: #afc0b6; --menu-surface: #192f2a; --menu-border: #30443d; --menu-accent: #8bd4a8; background: radial-gradient(ellipse at 50% 2%, #243d32 0, transparent 55%), #12241f; }
.reflection-menu { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 30px; }
.menu-intro { text-align: center; margin: 0 0 38px; }
.menu-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--menu-accent); font-size: 10px; font-weight: 750; letter-spacing: 1.6px; }
.menu-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px #35985d13; }
.menu-intro h1 { color: var(--menu-ink); margin: 15px 0 12px; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.14; font-weight: 780; letter-spacing: -1.8px; }
.menu-intro p { margin: 0; color: var(--menu-muted); font-size: 15px; line-height: 1.7; }
.intro-break { display: none; }
.menu-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.menu-section-head h2 { margin: 0; color: var(--menu-ink); font-size: 17px; font-weight: 720; letter-spacing: -.3px; }
.menu-qr-note { display: inline-flex; align-items: center; gap: 7px; color: var(--menu-muted); font-size: 12px; }
.reflection-menu svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-qr-note svg { width: 15px; height: 15px; }
.reflection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.reflection-card { --card-accent: #287451; --card-art: #edf6f1; background: var(--menu-surface); border: 1px solid var(--menu-border); border-radius: 23px; overflow: hidden; box-shadow: 0 5px 10px #253d3003, 0 16px 40px #253d3005; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.reflection-card--mood { --card-accent: #7655a3; --card-art: #f1eef9; }
.reflection-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px #253d3010; border-color: color-mix(in srgb, var(--card-accent), transparent 65%); }
.reflection-art { position: relative; height: 258px; overflow: hidden; background: var(--card-art); }
.reflection-art > img { display: block; width: auto; max-width: 100%; height: 100%; margin: 0 auto; object-fit: contain; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); transition: transform .45s ease; }
.reflection-card:hover .reflection-art > img { transform: scale(1.025); }
.reflection-duration { position: absolute; top: 18px; left: 20px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid #ffffff94; border-radius: 50px; color: #59645f; background: #ffffffb8; backdrop-filter: blur(10px); font-size: 10px; font-weight: 600; }
.reflection-duration svg { width: 13px; height: 13px; }
.reflection-card-body { padding: 25px 28px 24px; }
.reflection-kind { display: flex; align-items: center; gap: 6px; color: var(--card-accent); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.reflection-kind > span { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.reflection-card h3 { margin: 9px 0 10px; font-size: 26px; line-height: 1.2; font-weight: 750; letter-spacing: -.8px; color: var(--menu-ink); }
.reflection-card p { margin: 0; color: var(--menu-muted); font-size: 13px; line-height: 1.75; }
.reflection-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
.reflection-detail { color: var(--menu-muted); font-size: 11px; }
.reflection-launch { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 12px 17px; min-height: 44px; border: 0; border-radius: 11px; color: #fff; background: var(--card-accent); font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.reflection-launch svg { width: 17px; height: 17px; transition: transform .15s ease; }
.reflection-launch:hover { background: color-mix(in srgb, var(--card-accent), #000 12%); }
.reflection-launch:hover svg { transform: translateX(3px); }
.reflection-launch:focus-visible, .reflection-menu-page .topbar :focus-visible { outline: 3px solid #69b693; outline-offset: 4px; }
.reflection-launch:disabled { opacity: .7; cursor: wait; }
.menu-guide { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 30px; padding: 24px 0 0; border-top: 1px solid var(--menu-border); color: var(--menu-muted); }
.menu-guide > div { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.menu-step-number { color: var(--menu-accent); font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.menu-guide > svg { width: 16px; height: 16px; opacity: .35; }
.menu-status { color: #a6363f; background: #fff0f0; border: 1px solid #ebc5c7; border-radius: 12px; padding: 12px 16px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; }
.menu-status[hidden] { display: none; }
html[data-theme="dark"] .reflection-card--weather { --card-accent: #357f5c; }
html[data-theme="dark"] .reflection-card--mood { --card-accent: #8161b2; }
html[data-theme="dark"] .reflection-kind { color: #95d6b0; }
html[data-theme="dark"] .reflection-card--mood .reflection-kind { color: #cfb9ef; }
html[data-theme="dark"] .reflection-art { filter: brightness(.88); }
@media (min-width: 1700px) { .reflection-menu { padding-top: 55px; } .menu-intro { margin-bottom: 42px; } }
@media (max-width: 760px) {
  .reflection-menu { width: min(560px, calc(100% - 32px)); padding-top: 32px; }
  .menu-intro { margin-bottom: 28px; }
  .menu-intro h1 { font-size: clamp(29px, 6vw, 38px); letter-spacing: -1.1px; }
  .menu-intro p { font-size: 13px; }
  .intro-break { display: inline; }
  .menu-eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .reflection-grid { grid-template-columns: 1fr; gap: 20px; }
  .reflection-art { height: auto; aspect-ratio: 2 / 1; }
  .reflection-card-body { padding: 23px 24px; }
  .reflection-card h3 { font-size: 25px; }
  .menu-guide { gap: 18px; flex-wrap: wrap; justify-content: flex-start; margin-top: 26px; padding: 21px 4px 0; }
  .menu-guide > svg { display: none; }
  .menu-guide > div { width: 100%; }
  .reflection-menu-page .topbar { padding: 12px 14px; gap: 10px; }
  .reflection-menu-page .top-actions { gap: 7px; }
  .reflection-menu-page .brand { gap: 8px; }
  .reflection-menu-page .brand-subtitle { font-size: 10px; }
  .reflection-menu-page .brand-title { font-size: 14px; }
  .reflection-menu-page .topbar .btn { padding: 9px 11px; font-size: 12px; }
}
@media (max-width: 380px) {
  .menu-section-head h2 { font-size: 15px; }
  .menu-qr-note { font-size: 10px; }
  .reflection-card-body { padding: 22px 20px; }
  .reflection-launch { gap: 16px; padding: 12px 14px; }
  .reflection-card p { font-size: 12px; }
  .reflection-detail { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .reflection-card, .reflection-art > img, .reflection-launch, .reflection-launch svg { transition: none; }
  .reflection-card:hover, .reflection-card:hover .reflection-art > img, .reflection-launch:hover svg { transform: none; }
}