/* ===== Комната благодарности — витраж ===== */
body.gratitude-room {
  background: radial-gradient(1100px 760px at 50% -5%, #1d3056 0%, #142340 48%, #0b1228 100%) fixed;
  color: #f3ecdc;
}
/* фон-стена под цвет тёмного стекла витража: разноцветное боке + блики */
.vitrag-room-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.vitrag-room-bg .vrb-bokeh, .vitrag-room-bg .vrb-glints { position: absolute; inset: 0; }
.vitrag-room-bg .orb { position: absolute; border-radius: 50%; filter: blur(34px); transform: translate(-50%, -50%);
  animation: orbFloat ease-in-out infinite; will-change: transform; }
@keyframes orbFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(calc(-50% + var(--dx, 1) * 46px), calc(-50% + var(--dy, 1) * 46px)); }
}
.vitrag-room-bg .vglint { position: absolute; border-radius: 50%; mix-blend-mode: screen; filter: blur(8px); opacity: .5;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,238,196,.5) 45%, rgba(255,250,235,.62) 50%, rgba(206,222,255,.45) 60%, rgba(255,255,255,0));
  animation: vglintTw ease-in-out infinite; will-change: opacity, transform; }
@keyframes vglintTw {
  0%, 100% { opacity: .28; transform: rotate(var(--rot, 0deg)) scaleX(.92); }
  50% { opacity: .62; transform: rotate(var(--rot, 0deg)) scaleX(1.08); }
}
@media (prefers-reduced-motion: reduce) { .vitrag-room-bg .orb, .vitrag-room-bg .vglint { animation: none; } }

body.gratitude-room .page-head h1 { color: #fdf3df; text-shadow: 0 2px 18px rgba(0,0,0,.5); }

.sun { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sun .ray { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,224,150,.5), transparent 70%);
  filter: blur(6px); animation: float 9s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-14px); opacity: .85; } }

.wrap, .room-nav { position: relative; z-index: 2; }

/* ===== Солнце-витраж ===== */
.sun-stage { display: flex; justify-content: center; margin: 8px 0 6px; }
.sun-svg { width: min(88vw, 380px); height: auto; overflow: visible;
  filter: drop-shadow(0 12px 34px rgba(210,150,60,.32)); }
#sunBack { transition: opacity 1.2s ease; }
.frag { stroke: #2a1d12; stroke-width: 1.4; stroke-linejoin: round; transition: fill .6s ease, filter .25s ease; }
.frag-fx { pointer-events: none; stroke: none; }
.frag.dark { fill: #3a2c3a; }                 /* неосвещённое стекло */
.frag.lit { cursor: pointer; }
.frag.lit:hover { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,240,180,.5)); }
.frag.sel { stroke: #fff; stroke-width: 2.4; filter: brightness(1.18) drop-shadow(0 0 10px rgba(255,240,180,.8)); }
.frag.born { animation: fragBorn .9s ease; }
@keyframes fragBorn { 0% { opacity: 0; filter: brightness(2.4); } 55% { filter: brightness(1.5); } 100% { opacity: 1; filter: brightness(1); } }

/* ===== Генеративный витраж (SunGen) ===== */
.vitrag-stage { display: flex; justify-content: center; margin: 8px 0 8px; }
.vitrag-frame { position: relative; height: min(62vh, 540px); aspect-ratio: 1080 / 1920;
  border-radius: 12px; overflow: hidden; box-shadow: 0 20px 56px rgba(40,20,10,.45); }
.vitrag-frame.cosmos { height: auto; width: min(92vw, 460px); aspect-ratio: 1 / 1; border-radius: 14px; box-shadow: none; }
.vitrag-svg { position: absolute; inset: 0; }
.vitrag-svg svg { display: block; width: 100%; height: 100%; }
/* незажжённые осколки — полупрозрачное стекло, сквозь которое видно стену */
.vitrag-svg .frag:not(.lit) { filter: brightness(.7) saturate(.7); opacity: .26; }
/* зажжённые — ярко сияют с тёплым ореолом (перебивает .frag.lit из самого SVG) */
.vitrag-svg .frag.lit { filter: brightness(2.3) saturate(1.4)
  drop-shadow(0 0 6px rgba(255,240,180,1)) drop-shadow(0 0 14px rgba(255,224,150,.85)); }
.vitrag-svg .frag.lit:hover { filter: brightness(2.6) saturate(1.5)
  drop-shadow(0 0 8px rgba(255,245,200,1)) drop-shadow(0 0 18px rgba(255,224,150,.95)); }
.vitrag-veil { position: absolute; inset: 0; background: #06060c; pointer-events: none; transition: opacity 1.3s ease; }

/* текст тапнутого осколка */
.frag-info { text-align: center; max-width: 460px; margin: 8px auto 0; overflow: hidden; transition: all .25s; }
.frag-info.show { background: rgba(255,255,255,.62); border-radius: 16px; padding: 12px 18px; box-shadow: 0 6px 18px rgba(180,140,80,.18); }
.frag-info .fi-cat { display: block; font-weight: 800; font-size: .8rem; color: #7a5a2a; }
.frag-info .fi-text { display: block; font-size: 1.05rem; color: #5a4a38; margin: 3px 0; }
.frag-info .fi-date { display: block; font-size: .74rem; color: #a08a6a; }

.section-h2 { font-family: 'Comfortaa', sans-serif; font-size: 1.3rem; margin: 26px 0 14px; color: #f3e6c8; text-shadow: 0 2px 12px rgba(0,0,0,.45); display: flex; align-items: center; gap: 9px; }
.section-h2 .cnt { font-size: .8rem; font-weight: 800; color: #6a4f2a; background: rgba(255,240,200,.85); padding: 3px 11px; border-radius: 999px; }

/* список благодарностей */
.entries-list { display: grid; gap: 12px; }
.grat-entry { position: relative; background: var(--g, #f3d97a); border-radius: 14px; padding: 13px 15px; color: #2a2236;
  box-shadow: 0 4px 14px rgba(120,90,40,.14), 0 0 16px var(--glow, rgba(247,217,106,.5)); }
.grat-entry .ge-q { font-size: .76rem; font-weight: 800; opacity: .72; margin-bottom: 4px; }
.grat-entry .ge-text { font-weight: 700; font-size: 1.02rem; line-height: 1.4; word-break: break-word; }
.grat-entry .ge-date { font-size: .74rem; opacity: .6; margin-top: 5px; }
.grat-entry .ge-del { position: absolute; top: 9px; right: 10px; border: none; background: rgba(255,255,255,.5); color: #2a2236;
  cursor: pointer; border-radius: 50%; width: 22px; height: 22px; font-size: .95rem; opacity: 0; transition: opacity .2s; }
.grat-entry:hover .ge-del { opacity: 1; }
.entries-empty { text-align: center; color: #9a7a4a; font-style: italic; padding: 24px; }

/* ===== Окно-витраж (старое, не используется) ===== */
.window-stage { display: flex; justify-content: center; margin: 6px 0 8px; }
.window {
  position: relative; width: min(94vw, 460px); padding: 16px;
  border: 11px solid #9c733f; border-radius: 50% 50% 16px 16px / 26% 26% 0 0;
  background: #241d33;
  box-shadow: 0 18px 46px rgba(120,80,40,.34), inset 0 0 44px rgba(255,210,140,.18), 0 0 0 3px #c79b5c;
  overflow: hidden;
}
.window::before { /* тёплый свет за стеклом — ярче с каждым стёклышком */
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 95% at 50% 0%, rgba(255,224,150,.85), transparent 72%);
  opacity: var(--lit, .35); transition: opacity 1.2s ease;
}
.window .mullion-v, .window .mullion-h { position: absolute; background: #8a6536; z-index: 3; pointer-events: none; }
.window .mullion-v { top: 0; bottom: 0; width: 4px; left: 50%; transform: translateX(-50%); }
.window .mullion-h { left: 0; right: 0; height: 4px; top: 46%; }

.glass-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.tile {
  aspect-ratio: 1; border-radius: 4px; position: relative; overflow: hidden;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.tile.filled {
  background: var(--g);
  box-shadow: inset 0 0 0 1px rgba(20,12,30,.5), inset 0 6px 10px rgba(255,255,255,.35), 0 0 10px var(--glow);
  cursor: pointer; animation: lite .7s ease;
}
.tile.filled::after { /* блик стекла */
  content: ''; position: absolute; top: 6%; left: 8%; width: 36%; height: 60%; border-radius: 50%;
  background: linear-gradient(150deg, rgba(255,255,255,.55), transparent 70%);
}
.tile.filled.sel { box-shadow: inset 0 0 0 2px #fff, 0 0 16px var(--glow); }
@keyframes lite { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

.win-caption { text-align: center; color: #ddd0b4; font-size: .86rem; margin: 0 0 22px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.win-caption b { color: #fff3d6; }

/* инфо по стёклышку */
.shard-info { min-height: 1.4em; text-align: center; margin: 10px auto 0; max-width: 460px;
  background: rgba(255,255,255,.6); border-radius: 16px; padding: 0; overflow: hidden; transition: all .25s; }
.shard-info.show { padding: 14px 18px; box-shadow: 0 6px 18px rgba(180,140,80,.18); }
.shard-info .si-cat { font-weight: 800; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; }
.shard-info .si-text { font-size: 1.05rem; color: #5a4a38; margin: 4px 0; }
.shard-info .si-date { font-size: .78rem; color: #a08a6a; }

/* ===== Сбор витража (форма) ===== */
.collect { background: rgba(255,255,255,.72); backdrop-filter: blur(8px); border: 1px solid rgba(180,150,100,.2);
  border-radius: 24px; box-shadow: 0 12px 34px rgba(180,140,80,.16); padding: 26px; margin-bottom: 22px; }
.collect h2 { font-family: 'Comfortaa', sans-serif; font-size: 1.35rem; margin: 0 0 4px; color: #6a4f2a; }
.collect .sub { color: #9a7a4a; margin: 0 0 18px; font-size: .95rem; }
.glass-field { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.glass-field .chip-dot { flex: none; width: 30px; height: 30px; border-radius: 9px; position: relative;
  box-shadow: inset 0 0 0 1px rgba(20,12,30,.3), inset 0 3px 5px rgba(255,255,255,.5), 0 3px 8px var(--glow); background: var(--g); }
.glass-field .chip-dot::after { content: ''; position: absolute; top: 4px; left: 5px; width: 9px; height: 11px; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.7), transparent); }
.glass-field .gf-input { flex: 1; }
.glass-field .gf-input .lbl { display: block; font-weight: 700; font-size: .85rem; color: #6a4f2a; margin-bottom: 5px; }
.glass-field input { width: 100%; padding: 11px 14px; border: 1px solid rgba(180,150,100,.25); border-radius: 12px;
  font-family: inherit; font-size: 1rem; color: #4a4030; background: rgba(255,255,255,.85); }
.glass-field input:focus { outline: none; border-color: #e0b860; box-shadow: 0 0 0 4px rgba(224,184,96,.18); }

.btn-warm { border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 1rem; padding: 14px 28px; border-radius: 999px;
  color: #6a4a1a; background: linear-gradient(135deg, #ffe6a0, #f4c46a); box-shadow: 0 8px 22px rgba(230,180,90,.4); transition: transform .15s; margin-top: 6px; }
.btn-warm:hover { transform: translateY(-2px); }

.section-h2 { font-family: 'Comfortaa', sans-serif; font-size: 1.3rem; margin: 26px 0 8px; color: #6a4f2a; }