/* tamilamutham/amutham.css: தமிழ் அமுதம் pages (on top of /styles.css).
   Letter-group colours follow the plan (§3.2 A); each group has a strong
   colour (--g) for borders and a light tint (--gt) behind dark text. */

[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.am-g-kuril { --g: #10B981; --gt: #D1FAE5; }
.am-g-nedil { --g: #0EA5E9; --gt: #E0F2FE; }
.am-g-vallinam { --g: #F43F5E; --gt: #FFE4E6; }
.am-g-mellinam { --g: #8B5CF6; --gt: #EDE9FE; }
.am-g-idaiyinam { --g: #F59E0B; --gt: #FEF3C7; }
.am-g-aaytham { --g: #EC4899; --gt: #FCE7F3; }
.am-g-grantham { --g: #14B8A6; --gt: #CCFBF1; }

.am-card { max-width: 46rem; }
.am-card h2 { margin-top: 1.6rem; }
.am-crumbs { font-size: .88rem; color: var(--text-muted); margin-bottom: .8rem; }
.am-crumbs a { color: var(--primary-gold-dark); font-weight: 600; text-decoration: none; display: inline-block; padding: .3rem 0; }
.am-hint { color: var(--text-muted); font-size: .92rem; margin: .2rem 0 .6rem; }
.am-hint .ta { font-family: var(--font-tamil); color: var(--temple-navy); }
.am-age {
  display: inline-block; font: 700 .78rem var(--font-system); color: #065F46;
  background: #D1FAE5; border-radius: 999px; padding: .05rem .5rem; vertical-align: middle;
}
.am-age-older { color: #1E40AF; background: #DBEAFE; }
.am-note {
  background: var(--bg-card-subtle); border: 1px solid var(--border-subtle); border-radius: 12px;
  padding: .7rem .9rem; margin: .8rem 0; font-size: .95rem;
}
.am-note .ta { font-family: var(--font-tamil); font-weight: 700; display: block; margin-bottom: .15rem; }
.am-note-rule { border-left: 5px solid var(--primary-gold); }
.am-details { margin-top: 1.2rem; border: 1px solid var(--border-subtle); border-radius: 12px; padding: .5rem .8rem; }
.am-details > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.am-details > summary { font-family: var(--font-tamil); }
.am-table-wrap { overflow-x: auto; margin: .4rem 0; -webkit-overflow-scrolling: touch; }

/* ---- The Solladal keypad (Letters page and UyirMei lab) ---- */
.am-kb { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; justify-content: center; margin: .6rem 0; }
.am-kb-col { flex: 0 1 auto; min-width: 0; }
.am-kb-sub { font-size: .85rem; color: var(--text-muted); margin-bottom: .3rem; text-align: center; }
.am-kb-sub .ta { font-family: var(--font-tamil); font-weight: 700; color: var(--temple-navy); }
.am-kb-grid { display: grid; gap: 5px; }
.am-kb-mei { grid-template-columns: repeat(6, 48px); }
.am-kb-uyir { grid-template-columns: repeat(4, 48px); }
.am-key {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0; border-radius: 10px;
  border: 2px solid var(--g); background: var(--gt); color: var(--temple-navy);
  font: 700 1.2rem var(--font-tamil); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, opacity .25s ease, background .25s ease;
}
.am-key:hover { transform: translateY(-1px); }
.am-key:focus-visible { outline: 3px solid var(--temple-navy); outline-offset: 2px; }
.am-key[aria-pressed="true"] { background: var(--g); color: #fff; box-shadow: 0 0 0 3px var(--gt); }
.am-kb-building .am-key-empty { background: #fff; border-style: dashed; border-color: var(--border-subtle); color: transparent; pointer-events: none; }
.am-key-new { animation: am-pop .45s ease-out; }
@keyframes am-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.am-kb-controls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .6rem 0 .2rem; }
.am-kb-controls .btn { flex: 1 1 12rem; font-size: .95rem; padding: .7rem .8rem; }
.am-chant { min-height: 1.8em; text-align: center; font: 800 1.15rem var(--font-tamil); color: var(--primary-gold-dark); margin: .3rem 0; }
.am-legend { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .3rem .9rem; font-size: .9rem; margin: .4rem 0 0; }
.am-legend li { display: flex; align-items: center; gap: .4rem; }
.am-legend .ta { font-family: var(--font-tamil); font-weight: 700; }
.am-dot { width: .85rem; height: .85rem; border-radius: 50%; background: var(--g); flex: none; }
.am-count { margin-left: auto; color: var(--text-muted); font-weight: 700; }
.am-kb-building ~ .am-legend li:not(.am-legend-on) { opacity: .45; }

/* ---- Beats ---- */
.am-beats { list-style: none; display: grid; gap: .5rem; }
.am-beats li {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: .1rem .6rem; align-items: center;
  border: 1px solid var(--border-subtle); border-left: 5px solid var(--g); border-radius: 10px; padding: .5rem .7rem;
}
.am-beats .ta { font-family: var(--font-tamil); }
.am-claps { grid-row: span 2; font-size: 1.5rem; text-align: center; }
.am-beat-n { color: var(--text-muted); font-size: .88rem; }

/* ---- 216 table ---- */
.am-matrix { border-collapse: collapse; font-family: var(--font-tamil); margin: 0 auto; }
.am-matrix th, .am-matrix td { border: 1px solid var(--border-subtle); text-align: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .2rem; font-size: 1.05rem; }
.am-matrix thead th { background: #E0F2FE; }
.am-matrix tbody th { background: #FFE4E6; }
.am-matrix-pick td { padding: 0; }
.am-cell {
  width: 100%; min-width: 2.6rem; min-height: 2.6rem; border: 0; background: #fff; cursor: pointer;
  font: 700 1.05rem var(--font-tamil); color: var(--temple-navy);
}
.am-cell:hover, .am-cell:focus-visible { background: var(--primary-gold); color: #fff; }

/* ---- Hub ---- */
.am-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .8rem; }
.am-topic {
  display: grid; grid-template-columns: 3.6rem 1fr; gap: .2rem .8rem; align-items: start;
  padding: .9rem; border: 1.5px solid var(--border-subtle); border-radius: 16px; background: var(--bg-card-subtle);
  color: inherit; text-decoration: none;
}
.am-topic:hover, .am-topic:focus-visible { border-color: var(--primary-gold); }
.am-topic-icon {
  grid-row: span 3; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem;
  border-radius: 14px; background: var(--primary-gold); color: #fff; font: 800 1.6rem var(--font-tamil);
}
.am-topic-title { font-weight: 700; line-height: 1.3; }
.am-topic-title .ta { font-family: var(--font-tamil); font-size: 1.1rem; color: var(--primary-gold-dark); }
.am-topic-text { font-size: .9rem; color: var(--text-muted); }
.am-topic .am-age { justify-self: start; }
.am-soon-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .35rem .8rem; color: var(--text-muted); font-size: .92rem; }
.am-soon-list .ta { font-family: var(--font-tamil); color: var(--temple-navy); }

/* ---- Letter pages ---- */
.am-hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.am-big {
  display: flex; align-items: center; justify-content: center; min-width: 7rem; height: 7rem; padding: 0 .6rem;
  border-radius: 24px; border: 3px solid var(--g); background: var(--gt);
  font: 800 4rem/1 var(--font-tamil); color: var(--temple-navy);
}
.am-hero-text { flex: 1 1 12rem; }
.am-pill { display: inline-block; border-radius: 12px; background: var(--gt); border: 1px solid var(--g); padding: .3rem .7rem; font-size: .9rem; }
.am-pill .ta { font-family: var(--font-tamil); font-weight: 700; }
.am-sound { color: var(--text-muted); font-size: .92rem; margin-top: .4rem; }
.am-prevnext { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: .4rem 0 .6rem; font-size: .9rem; }
.am-prevnext a {
  display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: 0 .7rem;
  border: 1.5px solid var(--border-subtle); border-radius: 12px; color: var(--temple-navy); text-decoration: none; font-weight: 700;
}
.am-prevnext a .ta { font-family: var(--font-tamil); font-size: 1.15rem; }
.am-prevnext a:nth-child(2) { border: 0; color: var(--primary-gold-dark); text-align: center; }
.am-words { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .6rem; }
.am-wordcard { border: 1.5px solid var(--border-subtle); border-radius: 16px; background: #fff; }
.am-wordcard[open] { border-color: var(--primary-gold); }
.am-wordcard > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 3.2rem 1fr; gap: 0 .7rem; align-items: center; padding: .7rem .8rem;
}
.am-wordcard > summary::-webkit-details-marker { display: none; }
.am-pic { grid-row: span 2; font-size: 2.3rem; line-height: 1; text-align: center; }
.am-pic-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px;
  background: var(--bg-card-subtle); font: 800 1.5rem var(--font-tamil); color: var(--primary-gold-dark);
}
.am-word { font: 800 1.35rem var(--font-tamil); color: var(--temple-navy); }
.am-word mark { background: #FDE68A; color: var(--primary-gold-dark); border-radius: 4px; padding: 0 .06em; }
.am-en { display: block; font-size: .9rem; color: var(--text-muted); }
.am-break { margin: 0 .8rem .8rem; padding-top: .5rem; border-top: 1px dashed var(--border-subtle); font-size: 1.1rem; }

/* ---- UyirMei lab ---- */
.am-synth { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem; margin: .9rem 0 .2rem; }
.am-slot {
  display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; height: 3.4rem; padding: 0 .4rem;
  border: 2px dashed var(--border-subtle); border-radius: 14px; font: 800 1.7rem var(--font-tamil); color: var(--temple-navy); background: #fff;
}
.am-slot-out { border-style: solid; border-color: var(--primary-gold); background: #FEF3C7; }
.am-op { font-weight: 800; font-size: 1.4rem; color: var(--text-muted); }
.am-check { flex: 0 1 auto; padding: .7rem 1rem; }
.am-check:disabled { opacity: .45; cursor: default; box-shadow: none; }
#s-hint { text-align: center; }
.am-stage { border: 2px solid var(--primary-gold); border-radius: 18px; padding: .3rem 1rem 1rem; margin: 1rem 0; background: #FFFBEB; }
.am-stage h2, .am-stage h3 { margin-top: .8rem; }
.am-stage h3 { font: 700 1rem var(--font-tamil); color: var(--temple-navy); }
.am-stage-show { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: .6rem 0; }
.am-fuse { font: 800 3.2rem/1.2 var(--font-tamil); color: var(--temple-navy); }
.am-fuse-out { color: var(--primary-gold-dark); }
.am-fuse-arrow { font-size: 1.8rem; color: var(--text-muted); }
.am-stage-play .am-fuse-mei { animation: am-drop-dot .6s ease-out; }
.am-stage-play .am-fuse-out { animation: am-pop .6s .35s ease-out both; }
@keyframes am-drop-dot { 0% { transform: translateY(-6px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.am-steps { padding-left: 1.4rem; display: grid; gap: .45rem; }
.am-steps .ta { font-family: var(--font-tamil); font-weight: 700; display: block; }
.am-shapes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.am-shape {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .3rem;
  border: 1.5px solid var(--border-subtle); border-radius: 8px; background: #fff; font: 700 1.2rem var(--font-tamil); color: var(--temple-navy);
}
mark.am-shape { background: #FDE68A; border-color: var(--primary-gold); color: var(--primary-gold-dark); }
.am-shapes-grantha { padding-top: .35rem; border-top: 1px dashed var(--border-subtle); }
.am-lab-words { list-style: none; display: grid; gap: .4rem; }
.am-kind {
  display: inline-block; margin-top: .2rem; padding: 0 .5rem; border-radius: 999px;
  background: #EDE9FE; color: #5B21B6; font-size: .78rem; font-weight: 700;
}
.am-lab-words li { background: #fff; border: 1px solid var(--border-subtle); border-radius: 12px; padding: .5rem .8rem; }

/* ---- Trace the letter (js/trace-pad.js; shapes from js/letter-svg.js) ---- */
.am-trace-pad {
  border: 2px solid var(--primary-gold); border-radius: 18px; background: #fff; padding: .4rem; margin: .4rem 0 .6rem;
}
.am-trace-svg { display: block; width: 100%; max-height: 70vh; touch-action: none; user-select: none; -webkit-user-select: none; }
.ls-main, .tp-lines .ls-main { stroke: #93C5FD; }
.ls-zone, .tp-lines .ls-zone { stroke: #DBEAFE; }
.ls-letter, .tp-letter { fill: #FFFBEB; stroke: #94A3B8; stroke-width: 6; }
.ls-centre, .tp-centre { stroke: #CBD5E1; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1 28; }
.ls-arrow { fill: none; stroke: #B45309; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ls-start circle { fill: #16A34A; }
.ls-start text { fill: #fff; font-weight: 800; font-family: var(--font-system); text-anchor: middle; }
.tp-next { stroke: #F59E0B; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 30; }
.tp-ink, .tp-done-ink { stroke: #D97706; stroke-width: 54; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.tp-done-dot { fill: #D97706; }
.tp-dot circle { stroke: #fff; stroke-width: 8; }
.tp-dot text { fill: #fff; font: 800 52px var(--font-system); text-anchor: middle; pointer-events: none; }
.tp-dot-start circle { fill: #16A34A; }
.tp-dot-mid circle { fill: #FACC15; stroke: #A16207; }
.tp-dot-end circle { fill: #DC2626; }
.tp-dot-end .tp-ring { fill: #fff; stroke: none; }
.tp-pulse { transform-box: fill-box; transform-origin: center; animation: tp-blink 1.1s ease-in-out infinite; }
@keyframes tp-blink { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .45; } }
.tp-ghost { fill: #0EA5E9; opacity: 0; }
.tp-demo .tp-ghost { opacity: .85; }
.tp-finished .tp-letter { fill: #FEF3C7; stroke: #D97706; }
.am-trace-msg { min-height: 2.6em; text-align: center; font: 700 1rem var(--font-tamil); color: var(--temple-navy); margin: .2rem 0 .5rem; }
.am-trace-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.am-trace-controls .btn { flex: 1 1 11rem; font-size: .95rem; padding: .7rem .8rem; }
.am-print-link { margin-top: .2rem; }

/* ---- Picture worlds (js/scene-explorer.js; first: house/) ---- */
.sc-card-wide { max-width: 64rem; }
.sc-modes, .sc-rooms { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.sc-mode, .sc-labels, .sc-room {
  min-height: 44px; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--border-subtle);
  background: #fff; color: var(--temple-navy); font: 700 .9rem var(--font-system); cursor: pointer;
}
.sc-mode .ta, .sc-labels .ta, .sc-room .ta { font-family: var(--font-tamil); }
.sc-mode[aria-pressed="true"], .sc-labels[aria-pressed="true"], .sc-room[aria-pressed="true"] { background: var(--primary-gold); border-color: var(--primary-gold); color: #fff; }
.sc-rooms .sc-room { font-size: .85rem; }
.sc-days { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .5rem; }
.sc-day {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .3rem .8rem .3rem .35rem;
  border: 1.5px solid #F59E0B; border-radius: 999px; background: #FFFBEB; color: var(--temple-navy); font: 700 .85rem var(--font-system); cursor: pointer;
}
.sc-day .ta { font-family: var(--font-tamil); }
.sc-day-n { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #F59E0B; color: #fff; }
.sc-day[aria-pressed="true"] { background: #F59E0B; color: #fff; }
.sc-day[aria-pressed="true"] .sc-day-n { background: #fff; color: #B45309; }
.art-dim { opacity: .3; transition: opacity .4s ease; }
.sc-ribbon-h { margin: .4rem 0 .1rem; font-weight: 700; font-size: .95rem; }
.sc-ribbon-h .ta { font-family: var(--font-tamil); }

/* Family tree (family/, js/family-tree.js) */
.ft { margin-top: 1.2rem; padding: .8rem; border: 2px solid #16A34A; border-radius: 18px; background: #F0FDF4; }
.ft h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.ft h3 .ta { font-family: var(--font-tamil); }
.ft-tree { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ft-couple, .ft-kids { display: flex; justify-content: center; gap: .4rem; }
.ft-top { position: relative; padding-bottom: .6rem; border-bottom: 3px solid #86EFAC; }
.ft-families { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; width: 100%; }
.ft-fam { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .3rem; border-top: 3px solid #86EFAC; border-radius: 12px; background: #fff; }
.ft-note { font-size: .8rem; color: var(--text-muted); text-align: center; margin: 0; font-family: var(--font-tamil); }
.ft-kids { padding-top: .3rem; border-top: 2px dashed #BBF7D0; }
.ft-box {
  display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; max-width: 7.5rem; min-height: 44px; padding: .25rem .35rem;
  border: 1.5px solid #BBF7D0; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.ft-box:hover { border-color: #16A34A; }
.ft-box:focus-visible { outline: 3px solid var(--temple-navy); outline-offset: 2px; }
.ft-now { margin: .3rem 0 .7rem; padding: .4rem .7rem; border-radius: 12px; background: #FEF3C7; font-weight: 700; text-align: center; }
.ft-now .ta { font-family: var(--font-tamil); font-size: 1.1rem; color: var(--primary-gold-dark); }
.ft-now-pop { animation: am-pop .4s ease-out; }
.ft-box svg { width: 3rem; height: 3rem; }
.ft-term { font: 800 1rem/1.25 var(--font-tamil); color: var(--temple-navy); text-align: center; }
.ft-name { font: 600 .78rem var(--font-tamil); color: var(--text-muted); }
.ft-me { border-color: var(--primary-gold); background: #FEF3C7; box-shadow: 0 0 0 3px #FDE68A; }
.ft-rules { width: 100%; margin-top: .8rem; border-collapse: collapse; font-size: .9rem; background: #fff; }
.ft-rules th, .ft-rules td { border: 1px solid #BBF7D0; padding: .35rem .5rem; text-align: left; vertical-align: top; }
.ft-rules th { background: #DCFCE7; font-weight: 700; }
@media (max-width: 560px) {
  .ft-families { grid-template-columns: 1fr; }
}
.sc-lit::after { content: ''; position: absolute; inset: -6%; border-radius: 50%; border: calc(4px / var(--sc-zoom, 1)) solid #F59E0B; animation: sc-hint .8s ease-in-out infinite; pointer-events: none; }
.sc-card-day { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: #F59E0B; color: #fff; font: 800 2rem var(--font-system); flex: none; }
.sc-cheer {
  position: absolute; left: 50%; bottom: 100%; white-space: nowrap; padding: .15em .6em; border-radius: 999px;
  background: #FDE047; border: 2px solid #F59E0B; color: #7C2D12; font: 800 calc(clamp(13px, 2vw, 22px) / var(--sc-zoom, 1)) var(--font-tamil);
  pointer-events: none; animation: sc-cheer 2.4s ease-out forwards;
}
@keyframes sc-cheer { 0% { transform: translate(-50%, 20%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -40%) scale(1); opacity: 0; } }
.sc-stage {
  position: relative; overflow: hidden; aspect-ratio: 1200 / 1000; border: 3px solid var(--primary-gold);
  border-radius: 18px; background: #E0F2FE; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.sc[data-mode="torch"] .sc-stage { touch-action: none; }
.sc-canvas { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .6s ease; }
.sc-svg { display: block; width: 100%; height: 100%; }
.sc-hot {
  position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; min-width: 22px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.sc-hot:focus-visible { outline: 3px solid var(--temple-navy); outline-offset: 2px; }
.sc-hot:hover { background: rgba(255, 255, 255, .18); }
.sc-star {
  position: absolute; top: 0; right: 0; font-size: calc(clamp(10px, 1.7vw, 18px) / var(--sc-zoom, 1));
  animation: sc-twinkle 1.6s ease-in-out infinite; pointer-events: none;
}
.sc-found .sc-star, .sc[data-mode="torch"] .sc-star, .sc[data-mode="build"] .sc-star { display: none; }
.sc-tag {
  position: absolute; left: 50%; top: 92%; transform: translateX(-50%); display: none; white-space: nowrap;
  padding: .05em .4em; border-radius: 8px; background: #fff; border: 1px solid var(--primary-gold);
  font: 700 calc(clamp(9px, 1.35vw, 15px) / var(--sc-zoom, 1)) var(--font-tamil); color: var(--temple-navy); pointer-events: none;
}
.sc-found .sc-tag, .sc-show-all .sc-tag { display: block; }
.sc-hot[data-tag="above"] .sc-tag { top: auto; bottom: 92%; }
.sc[data-mode="torch"] .sc-tag { display: none; }
.sc-dark {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle min(24vw, 170px) at var(--tx, 50%) var(--ty, 50%), transparent 55%, rgba(8, 12, 35, .94) 100%);
}
.sc-prompt {
  margin: .5rem 0; padding: .6rem .8rem; border: 2px solid var(--primary-gold); border-radius: 14px; background: #FFFBEB;
  font: 700 1.05rem var(--font-tamil); color: var(--temple-navy);
}
.sc-prompt b { font-size: 1.3em; color: var(--primary-gold-dark); }
.sc-prompt-en { font-family: var(--font-system); font-weight: 600; font-size: .9rem; color: var(--text-muted); }
.sc-prompt .btn { display: inline-flex; width: auto; margin: .4rem 0 0; padding: .5rem .9rem; font-size: .9rem; }
mark.sc-pos { background: #BBF7D0; color: #166534; border-radius: 4px; padding: 0 .15em; }
.sc-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: .6rem 0; padding: .5rem; border: 2px dashed var(--primary-gold); border-radius: 16px; }
.sc-sticker { display: flex; padding: .3rem; border: 2px solid var(--border-subtle); border-radius: 14px; background: #fff; cursor: grab; touch-action: none; }
.sc-sticker[aria-pressed="true"] { border-color: var(--primary-gold); box-shadow: 0 0 0 3px #FDE68A; }
.sc-ghost { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%) scale(1.15); opacity: .9; border-color: var(--primary-gold); }
.sc-card {
  display: flex; align-items: center; gap: .9rem; min-height: 5.5rem; margin: .7rem 0; padding: .7rem .9rem;
  border: 2px solid var(--primary-gold); border-radius: 16px; background: #fff;
}
.sc-card .am-hint { margin: 0; }
.sc-card-pic:empty { display: none; }
.sc-card-pic img, .sc-card-pic svg { display: block; width: 4.5rem; height: 4.5rem; }
.sc-card-word { font: 800 2rem/1.15 var(--font-tamil); color: var(--temple-navy); }
.sc-card-alt { font-size: .55em; color: var(--text-muted); font-weight: 700; }
.sc-card-en { color: var(--text-muted); font-weight: 600; }
.sc-card-say { margin-top: .25rem; }
.sc-card-say .ta { display: block; font-weight: 700; font-size: 1.1rem; color: var(--primary-gold-dark); }
.sc-card-letters { margin-top: .3rem; font: 700 1.05rem var(--font-tamil); }
.sc-card-first { font-size: .8rem; color: var(--text-muted); }
.sc-card-letters a { display: inline-block; min-width: 2.2rem; padding: 0 .4rem; border-radius: 8px; background: #FEF3C7; color: var(--primary-gold-dark); text-align: center; text-decoration: none; }
.sc-card-pop { animation: am-pop .45s ease-out; }
.sc-wardrobe { margin: .6rem 0; padding: .6rem .8rem; border: 2px solid #CA8A04; border-radius: 16px; background: #FEFCE8; }
.sc-wardrobe h3 { margin: 0 0 .4rem; font-size: 1rem; }
.sc-wardrobe h3 .ta { font-family: var(--font-tamil); }
.sc-clothes { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
.sc-cloth {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 44px; padding: .4rem;
  border: 1.5px solid var(--border-subtle); border-radius: 14px; background: #fff; cursor: pointer;
}
.sc-cloth img, .sc-cloth svg { width: 3.4rem; height: 3.4rem; }
.sc-cloth-word { font: 800 1rem var(--font-tamil); color: var(--temple-navy); }
.sc-cloth-en { font-size: .78rem; color: var(--text-muted); }
.sc-tray-h { font-size: 1rem; margin-top: 1rem; }
.sc-tray-h .ta { font-family: var(--font-tamil); }
.sc-tray { display: flex; flex-wrap: wrap; gap: .35rem; }
.sc-chip {
  min-width: 44px; min-height: 40px; padding: 0 .55rem; border: 1.5px dashed var(--border-subtle); border-radius: 10px;
  background: #fff; color: var(--text-muted); font: 700 1rem var(--font-tamil); cursor: default;
}
.sc-chip-on { border: 1.5px solid var(--primary-gold); background: #FEF3C7; color: var(--temple-navy); cursor: pointer; }
.sc-credit { font-size: .8rem; margin-top: 1rem; }

/* Picture animations (classes added by the engine to #art-<id>) */
.art { transform-box: fill-box; transform-origin: center; }
.art-away { opacity: 0; }
.anim-pop { animation: sc-pop .6s ease-out; }
.anim-hint { animation: sc-hint .5s ease-in-out 3; }
.anim-glow { animation: sc-glow 1.8s ease-in-out; }
.anim-spin .art-blades { transform-box: fill-box; transform-origin: center; animation: sc-spin .45s linear 4; }
.anim-door .art-door-panel { transform-box: fill-box; transform-origin: left center; animation: sc-door 2.1s ease-in-out; }
.anim-curtain .art-cur-l { transform-box: fill-box; transform-origin: left center; animation: sc-curtain 2.1s ease-in-out; }
.anim-curtain .art-cur-r { transform-box: fill-box; transform-origin: right center; animation: sc-curtain 2.1s ease-in-out; }
.anim-clock .art-hand-m { transform-box: view-box; transform-origin: 0 0; animation: sc-spin 1.6s linear; }
.anim-wobble { animation: sc-wobble .5s ease-in-out 3; }
.anim-ring { transform-origin: top center; animation: sc-wobble .22s ease-in-out 7; }
.anim-wave .art-hand { transform-box: fill-box; transform-origin: bottom left; animation: sc-wobble .3s ease-in-out 5; }
.anim-write .art-letter { animation: sc-write .5s ease-out both; }
.anim-write .art-letter:nth-of-type(2) { animation-delay: .35s; }
.anim-write .art-letter:nth-of-type(3) { animation-delay: .7s; }
.anim-write .art-letter:nth-of-type(4) { animation-delay: 1.05s; }
.anim-flip { animation: sc-flip .8s ease-in-out; }
.anim-jump { animation: sc-jump .45s ease-out 3; }
.art-splash { opacity: 0; }
.anim-splash .art-splash { transform-box: fill-box; transform-origin: center; animation: sc-splash .9s ease-out; }
.anim-splash { animation: sc-wobble .3s ease-in-out 2; }
.anim-blink .art-eyes { transform-box: fill-box; transform-origin: center; animation: sc-blink .35s ease-in-out 3; }
@keyframes sc-splash { 0% { opacity: .85; transform: scale(.3); } 60% { opacity: .55; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sc-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
.anim-float { animation: sc-float 1.6s ease-in-out; }
.art-flame { transform-box: fill-box; transform-origin: bottom center; animation: sc-flicker .8s ease-in-out infinite alternate; }
@keyframes sc-jump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22px); } }
@keyframes sc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-40px); } }
.anim-turn { animation: sc-spin 1.2s ease-in-out; }
@keyframes sc-write { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-flip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.1); } }
.anim-shake { animation: sc-wobble .18s ease-in-out 8; }
.anim-twirl { animation: sc-pop .8s ease-out; }
.anim-swing .art-swing { transform-box: fill-box; transform-origin: top center; animation: sc-wobble .6s ease-in-out 3; }
.anim-glow .art-rays { transform-box: fill-box; transform-origin: center; animation: sc-spin 2s linear; }
.art-fire { transform-box: fill-box; transform-origin: bottom center; animation: sc-flicker .9s ease-in-out infinite alternate; }
@keyframes sc-flicker { from { transform: scaleY(.85); } to { transform: scaleY(1.08); } }
.art-steam, .art-drop { opacity: 0; }
.anim-bubble .art-steam { animation: sc-steam 1.8s ease-out; }
.anim-bubble { animation: sc-wobble .6s ease-in-out 2; }
.anim-drip .art-drop { animation: sc-drip .7s ease-in 3; }
.art-wd-l, .art-wd-r { transform-box: fill-box; transition: transform .5s ease; }
.art-wd-l { transform-origin: left center; }
.art-wd-r { transform-origin: right center; }
.is-open .art-wd-l, .is-open .art-wd-r { transform: scaleX(.15); }
.sc-no { animation: sc-shake .4s ease-in-out; }
.sc-hintstar {
  position: absolute; z-index: 3; transform: translate(-50%, -50%); pointer-events: none;
  font-size: clamp(30px, 6vw, 52px); line-height: 1; filter: drop-shadow(0 0 10px #FDE047) drop-shadow(0 0 4px #F59E0B);
  animation: sc-hintblink .8s ease-in-out infinite;
}
@keyframes sc-hintblink { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 50% { opacity: .35; transform: translate(-50%, -50%) scale(.8); } }
.sc-burst { position: absolute; left: 50%; top: 50%; font-size: 28px; pointer-events: none; animation: sc-burst .9s ease-out forwards; }
@keyframes sc-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@keyframes sc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes sc-hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes sc-glow { 0%, 100% { filter: none; } 40%, 70% { filter: drop-shadow(0 0 14px #FDE047) drop-shadow(0 0 6px #F59E0B); } }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@keyframes sc-door { 0%, 100% { transform: scaleX(1); } 30%, 70% { transform: scaleX(.15); } }
@keyframes sc-curtain { 0%, 100% { transform: scaleX(1); } 30%, 70% { transform: scaleX(.25); } }
@keyframes sc-steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes sc-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes sc-drip { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(40px); } }
@keyframes sc-shake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-58%, -50%); } 75% { transform: translate(-42%, -50%); } }
@keyframes sc-burst { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .am-key, .am-key-new, .am-stage-play .am-fuse-mei, .am-stage-play .am-fuse-out { animation: none; transition: none; }
  .tp-pulse { animation: none; }
  .sc-canvas, .art-wd-l, .art-wd-r { transition: none; }
  .sc-star, .sc-card-pop, .art-fire, .art-flame, .sc-lit::after, .sc-hintstar { animation: none; }
}
@media (max-width: 560px) {
  .sc-room-en { display: none; }
  .sc-days { display: grid; grid-template-columns: 1fr 1fr; }
  .sc-day { font-size: .8rem; padding-right: .4rem; }
  .sc-card { align-items: flex-start; }
  .sc-card-word { font-size: 1.6rem; }
}
@media (max-width: 420px) {
  .am-kb-mei { grid-template-columns: repeat(6, minmax(40px, 1fr)); }
  .am-kb-uyir { grid-template-columns: repeat(4, minmax(40px, 1fr)); }
  .am-kb-col { flex: 1 1 100%; }
  .am-big { min-width: 5.6rem; height: 5.6rem; font-size: 3.2rem; }
  .am-prevnext { font-size: .82rem; }
  .am-prevnext a { padding: 0 .5rem; }
}