/* festivals — त्योहार (#/festivals, #/festivals/:id) */
:root { --ci-idle: #F4EEE0; --ci-ground: #FFF8EA; --mehndi: #7A2E12; --mehndi-bg: #F3D7B6; --milk: #FFFDF6; --night: #1B2238; }
:root[data-theme="dark"] { --ci-idle: #2A3A3C; --ci-ground: #1E2A2C; --mehndi-bg: #E2C19C; --night: #0E1322; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ci-idle: #2A3A3C; --ci-ground: #1E2A2C; --mehndi-bg: #E2C19C; --night: #0E1322; } }

/* ---- Home ---- */
.festivals-home { display: grid; gap: 18px; }
.fest-vary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.fest-vary > .icon { color: var(--marigold-deep); flex: none; }
.fest-vary > span { flex: 1 1 0; min-width: 0; }
.fest-vary .ml { color: var(--ink); font-weight: 600; }
.fest-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
.fest-grid > li { display: grid; animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
.fest-card { position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 20px 20px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink); background: linear-gradient(150deg, var(--h1), var(--surface) 80%); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease); overflow: hidden; min-width: 0; }
.fest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.fest-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fest-card-pic { display: block; width: 72px; height: 72px; margin-bottom: 6px; }
.fest-card-pic svg { width: 100%; height: 100%; display: block; }
.fest-card-pic.fest-emoji { font-size: 3.4rem; line-height: 72px; }
.fest-ml { font: 800 1.45rem/1.3 var(--f-display); color: var(--hi); overflow-wrap: anywhere; }
.fest-alt { font: 600 1rem/1.3 var(--f-ml); color: var(--ink-2); }
.fest-en { font-weight: 700; }
.fest-make { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-2); font-size: .92rem; }
.fest-make .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--marigold-deep); flex: none; }
.fest-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fest-meta .chip .icon { width: 14px; height: 14px; }
.fest-more { margin: 0; text-align: center; }

/* ---- Festival page ---- */
.festival-page { display: grid; gap: 22px; }
.festival-page > * { min-width: 0; }
.fest-hero { margin-bottom: 0; }
.fest-hero-pic { flex: none; display: block; width: clamp(84px, 16vw, 128px); height: clamp(84px, 16vw, 128px); animation: pop .5s var(--spring) both; }
.fest-hero-pic svg { width: 100%; height: 100%; display: block; }
.fest-hero-pic.fest-emoji { font-size: clamp(3.4rem, 2.5rem + 4vw, 5.5rem); line-height: 1; width: auto; height: auto; }
.fest-hero-alt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0; font: 700 1.2rem var(--f-ml); color: var(--ink-2); }
.fest-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 1.3rem; margin: 0 0 10px; }
.fest-sub > .icon { color: var(--marigold-deep); }
.fest-sub .ml { color: var(--peacock-deep); }
.fest-sub .en { font: 600 1rem var(--f-ui); color: var(--ink-2); }

.fest-when { padding: 16px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.fest-when-ta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font: 700 1.2rem/1.5 var(--f-ml); }
.fest-when-en { margin: 2px 0 10px; color: var(--ink-2); }
.fest-when-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: .9rem; color: var(--ink-2); }
.fest-when-meta .chip .icon { width: 14px; height: 14px; }
.fest-vary-sm .ml { color: var(--ink); }

.fest-about { display: grid; gap: 12px; }
.fest-lines { display: grid; gap: 8px; }
.fest-line { padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: background .2s, border-color .2s; }
.fest-line.is-speaking { background: var(--zari-soft); border-color: var(--marigold); }
.fest-line.is-echo { border-style: dashed; }
.fest-line-ta { display: flex; align-items: flex-start; gap: 6px; }
.fest-line-ta .rt { flex: 1; min-width: 0; }
.fest-line .rt-line { margin: 0; }
.fest-line .en { margin: 2px 0 0; color: var(--ink-2); font-size: .95rem; }
.fest-fact { padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.fest-fact summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.fest-fact p { margin: 8px 0 0; max-width: 70ch; line-height: 1.6; }

.fest-craft { padding: 20px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 80px; }
.fest-craft .act-title { margin-bottom: 4px; }
.fest-craft .act-lede { text-align: center; margin: 0 auto; max-width: 60ch; }
.fest-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.fest-reset { border: 1px solid var(--line); background: var(--surface); }
.fest-done { margin-top: 4px; padding: 18px; border-radius: var(--r-md); background: var(--leaf-soft); border: 2px solid var(--leaf); display: grid; gap: 8px; text-align: center; }
.fest-done p { margin: 0; }
.fest-done-title { font: 800 1.4rem var(--f-display); color: var(--leaf); }
.fest-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fest-done-actions .btn { white-space: normal; max-width: 100%; flex-wrap: wrap; }
.fest-craft > * { min-width: 0; }

.fest-words-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fest-words-head .fest-sub { margin: 0; }
.fest-words-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.fest-word { position: relative; width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 44px; padding: 12px 8px 10px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; text-align: center; transition: border-color .2s, transform .2s var(--ease); }
.fest-word:hover { border-color: var(--marigold); transform: translateY(-2px); }
.fest-word.is-heard { border-color: var(--leaf); }
.fest-word .ml { font: 700 1.15rem/1.35 var(--f-ml); overflow-wrap: anywhere; }
.fest-word .en { font-size: .82rem; color: var(--ink-2); line-height: 1.3; }
.fest-word-pic { display: block; width: 52px; height: 52px; }
.fest-word-pic svg { width: 100%; height: 100%; display: block; }
.fest-word-pic.fest-emoji { font-size: 2.3rem; line-height: 52px; }
.fest-word-spk { position: absolute; top: 6px; right: 6px; color: var(--marigold-deep); }
.fest-word-spk .icon { width: 18px; height: 18px; }

/* ---- Colour-in ---- */
.ci { display: grid; gap: 14px; justify-items: center; }
.ci-palette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ci-swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.ci-swatch[aria-checked="true"] { border-color: var(--peacock); box-shadow: 0 0 0 3px var(--peacock-soft); font-weight: 700; }
.ci-swatch .ml { font-family: var(--f-ml); }
.ci-swatch .en { font-size: .8rem; color: var(--ink-2); }
.ci-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); flex: none; }
.ci-canvas { width: min(100%, 440px); }
.ci-svg { width: 100%; height: auto; display: block; }
.ci-ground { fill: var(--ci-ground); stroke: var(--line); stroke-width: 2; }
.ci-region { stroke: var(--ink-3); stroke-width: 1.4; cursor: pointer; transition: fill .2s; }
.ci-region:hover { stroke: var(--ink); stroke-width: 2.4; }
.ci-region:focus-visible { outline: none; stroke: var(--focus); stroke-width: 5; }
.ci-dots { fill: var(--ink-3); }
:root[data-contrast="high"] .ci-region { stroke: var(--ink); stroke-width: 2.2; }

/* ---- Pongal pot ---- */
.pot { display: grid; gap: 14px; justify-items: center; }
.pot-stage { position: relative; width: min(100%, 400px); }
.pot-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.pot-milk { fill: var(--milk); opacity: 0; transition: opacity .5s; }
.pot-art:not([data-stage="empty"]) .pot-milk { opacity: 1; }
.pot-flame { fill: #F5A30F; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.3); transition: opacity .4s, transform .4s var(--spring); }
.pot-flame.f2 { fill: #FFC83D; }
.pot-art[data-fire="1"] .pot-flame { opacity: 1; transform: scale(.55); }
.pot-art[data-fire="2"] .pot-flame { opacity: 1; transform: scale(.8); }
.pot-art[data-fire="3"] .pot-flame { opacity: 1; transform: scale(1); animation: flicker 1.2s ease-in-out infinite alternate; }
.pot-foam { fill: var(--milk); stroke: #E8DCC0; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.1); transition: opacity .3s, transform 1.2s var(--ease); }
.pot-art[data-stage="boil"] .pot-foam { opacity: 1; transform: scaleY(.55); animation: pot-bubble .5s ease-in-out infinite alternate; }
.pot-art[data-stage="over"] .pot-foam, .pot-art[data-stage="add"] .pot-foam, .pot-art[data-stage="done"] .pot-foam { opacity: 1; transform: scaleY(1); }
.pot-spill { fill: var(--milk); stroke: #E8DCC0; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: opacity .2s, transform 1s var(--ease); }
.pot-art[data-stage="over"] .pot-spill, .pot-art[data-stage="add"] .pot-spill, .pot-art[data-stage="done"] .pot-spill { opacity: 1; transform: scaleY(1); }
@keyframes pot-bubble { to { transform: scaleY(.7); } }
.pot-shout { margin: -8px auto 0; position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 18px; border-radius: var(--r-md); background: var(--surface); border: 3px solid var(--marigold); box-shadow: var(--shadow-2); text-align: center; animation: pop .5s var(--spring) both; width: max-content; max-width: 94%; }
.pot-shout .ml { font: 800 clamp(1.4rem, 1rem + 2vw, 2rem)/1.3 var(--f-display); color: var(--kumkum); }
.pot-shout .en { font-size: .85rem; color: var(--ink-2); }
.pot-status { margin: 0; text-align: center; font-weight: 700; }
.pot-status .ml { font: 800 1.2rem var(--f-ml); color: var(--peacock-deep); }
.pot-status .en { color: var(--ink-2); font-weight: 600; }
.pot-controls { display: flex; justify-content: center; width: 100%; }
.pot-controls .btn .ml { font-family: var(--f-ml); }
.pot-dots { margin-left: 6px; letter-spacing: 2px; font-size: .8rem; }
.pot-add { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pot-ing { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.pot-ing .ml { font: 700 1.05rem var(--f-ml); }
.pot-ing .en { font-size: .8rem; color: var(--ink-2); }
.pot-ing:hover:not(:disabled) { border-color: var(--marigold); }
.pot-ing.is-used { opacity: .45; cursor: default; }

/* ---- New Year plate ---- */
.plate-wrap { display: grid; gap: 16px; justify-items: center; }
.plate { position: relative; width: min(100%, 460px); }
.plate-svg { width: 100%; display: block; }
.plate-items { position: absolute; inset: 0; }
.plate-placed { position: absolute; transform: translate(-50%, -50%); animation: plate-in .5s var(--spring) both; filter: drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.plate-placed-pic { display: block; font-size: clamp(30px, 8vw, 46px); line-height: 1; }
.plate-placed-pic svg { width: clamp(36px, 9vw, 54px); height: clamp(36px, 9vw, 54px); display: block; }
@keyframes plate-in { from { opacity: 0; transform: translate(-50%, 10%) scale(.4); } }
.plate-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: 10px; width: 100%; }
.plate-thing { display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 10px 6px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.plate-thing:hover:not(:disabled) { border-color: var(--marigold); transform: translateY(-2px); }
.plate-thing.is-used { opacity: .45; cursor: default; }
.plate-thing { min-width: 0; }
.plate-thing .ml { font: 700 1rem/1.3 var(--f-ml); text-align: center; }
.plate-thing .en { font-size: .78rem; color: var(--ink-2); }
.plate-pic { display: block; font-size: 2rem; line-height: 1; }
.plate-pic svg { width: 40px; height: 40px; display: block; }

/* ---- Lamps ---- */
.diya-wrap { display: grid; gap: 14px; justify-items: center; width: 100%; }
.diya-count { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0; min-height: 1.8em; }
.diya-count .ml { font: 800 1.6rem var(--f-display); color: var(--marigold-deep); }
.diya-count .en { color: var(--ink-2); font-weight: 600; }
.diya-night { width: min(100%, 560px); padding: 18px 14px; border-radius: var(--r-lg); background: var(--night); }
.diyas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; max-width: 480px; margin: 0 auto; }
.diyas--few { max-width: 440px; }
.diya { border: 0; background: none; padding: 0; cursor: pointer; min-height: 44px; border-radius: var(--r-sm); }
.diya:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.diya svg { width: 100%; display: block; }
.diya-flame { fill: #FFD36B; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.diya-glow { fill: rgba(255,200,100,.3); opacity: 0; filter: blur(5px); }
.diya-wick { opacity: .8; }
.diya.is-lit .diya-flame { opacity: 1; animation: flicker 1.6s ease-in-out infinite alternate; }
.diya.is-lit .diya-glow { opacity: 1; }
.diya-hill { width: min(100%, 560px); padding-top: 26px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(var(--night), #2A3350); margin-bottom: -14px; overflow: hidden; }
.diya-hill svg { width: 100%; display: block; overflow: visible; }
.hill-flame { fill: #FFC83D; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.2); transition: opacity .6s, transform .8s var(--spring); }
.hill-glow { fill: rgba(255,200,100,.35); opacity: 0; filter: blur(8px); transition: opacity .8s; }
.diya-hill.is-lit .hill-flame { opacity: 1; transform: scale(1); }
.diya-hill.is-lit .hill-glow { opacity: 1; }
.diya-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 560px; }
.diya-num { min-height: 44px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.diya-num b { color: var(--marigold-deep); }
.diya-num .ml { font: 600 1rem var(--f-ml); }

/* ---- Golu ---- */
.golu { display: grid; gap: 14px; justify-items: center; }
.golu-scene { width: min(100%, 560px); }
.golu-stand { display: grid; justify-items: center; gap: 0; }
.golu-step { position: relative; width: var(--w); min-height: 64px; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(#C8412B, #A8321F); border-top: 6px solid #F5C23A; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.golu-step:nth-child(even) { background: linear-gradient(#B3136B, #93105A); }
.golu-step.is-full { box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), inset 0 0 0 2px rgba(255,255,255,.35); }
.golu-drop { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.golu-drop:hover { background: rgba(255,255,255,.1); }
.golu-drop:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.golu-row { position: relative; z-index: 1; display: flex; gap: 2px; justify-content: center; align-items: flex-end; padding: 2px 4px 4px; pointer-events: none; }
.golu-placed { pointer-events: auto; border: 0; background: none; padding: 0 2px; cursor: pointer; min-width: 44px; min-height: 52px; display: grid; place-items: end center; animation: plate-in-g .45s var(--spring) both; border-radius: 8px; }
.golu-placed:focus-visible { outline: 3px solid var(--focus); }
@keyframes plate-in-g { from { opacity: 0; transform: translateY(-20px) scale(.5); } }
.golu-pic { display: block; font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 2px 1px rgba(0,0,0,.25)); }
.golu-pic svg { width: 44px; height: 44px; display: block; }
.golu-floor { height: 10px; background: #8A5A2A; border-radius: 0 0 8px 8px; }
.golu-msg { margin: 0; min-height: 1.5em; text-align: center; font-weight: 600; }
.golu-msg .ml { font-family: var(--f-ml); color: var(--peacock-deep); }
.golu-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; width: 100%; }
.golu-tray.is-empty { display: none; }
.golu-doll { display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 8px 4px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: grab; font: inherit; touch-action: none; user-select: none; -webkit-user-select: none; }
.golu-doll:hover { border-color: var(--marigold); }
.golu-doll[aria-pressed="true"] { border-color: var(--peacock); box-shadow: 0 0 0 3px var(--peacock-soft); background: var(--peacock-soft); }
.golu-doll.is-dragging { opacity: .4; }
.golu-doll .ml { font: 700 .95rem/1.3 var(--f-ml); text-align: center; }
.golu-doll .en { font-size: .75rem; color: var(--ink-2); }
.golu-ghost { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -60%) scale(1.3); }

/* ---- Rice ---- */
.rice-canvas-wrap { width: min(100%, 480px); }
.rice-canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; border-radius: 50%; }
.rice-canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.rice-pick .ml { font: 800 1.5rem var(--f-display); padding: 0 6px; }

/* ---- Mehndi ---- */
.mehndi-canvas { width: min(100%, 340px); }
.mehndi-svg { width: 100%; display: block; cursor: crosshair; touch-action: manipulation; }
.mehndi-svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-md); }
.mehndi-hand { fill: var(--mehndi-bg); stroke: #B98657; stroke-width: 3; }
.mehndi-stamp { fill: var(--mehndi); }
.mehndi-icon svg { width: 30px; height: 30px; display: block; }
.mehndi-pick .mehndi-icon { background: #F3D7B6; border-radius: 50%; padding: 2px; }

@media (max-width: 560px) {
  .fest-craft { padding: 16px 10px; }
  .fest-hero-pic { width: 84px; height: 84px; }
  .diyas { gap: 6px 8px; }
  .golu-step { min-height: 56px; }
  .golu-pic { font-size: 1.7rem; }
  .golu-pic svg { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .diya.is-lit .diya-flame, :root:not([data-motion="full"]) .pot-flame { animation: none !important; }
}
:root[data-motion="reduced"] .diya.is-lit .diya-flame, :root[data-motion="reduced"] .pot-flame, :root[data-motion="reduced"] .pot-foam { animation: none !important; }
@media print {
  .fest-actions, .ci-palette, .reader, .letter-nav, .fest-words-grid .fest-word-spk { display: none !important; }
}