/* Per-game layouts. One stylesheet shared by all seven game pages. */

/* ==========================================================================
   Pookalam Builder
   ========================================================================== */

.builder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 860px) {
  .builder { grid-template-columns: minmax(0, 1fr) 268px; }
}

.builder__stage { padding: .75rem; background: var(--paper); }
.builder__stage svg { display: block; width: 100%; height: auto; touch-action: none; }

.pookalam-cell {
  /* Barely there: enough to give each petal an edge where two of the same
     flower meet, not enough to look like grouting between tiles. */
  stroke: rgba(43, 31, 18, .13);
  stroke-width: .35;
  cursor: pointer;
  transition: opacity .12s ease;
}
.pookalam-cell:hover { opacity: .82; }

.tool-foot {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .86rem;
}
.tool-foot a { color: var(--green); font-weight: 700; }

.tool-title {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-body);
  margin: 1rem 0 .5rem;
}
.tool-title:first-child { margin-top: 0; }
.tool-title .mal { text-transform: none; letter-spacing: 0; font-size: .92rem; }

.palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: .45rem;
}

.swatch {
  aspect-ratio: 1;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(43, 31, 18, .18), var(--shadow-sm);
  transition: transform .12s ease, box-shadow .15s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--green), var(--shadow-sm);
}
.swatch--erase {
  background:
    linear-gradient(45deg, transparent 44%, var(--chethi) 44% 56%, transparent 56%),
    var(--cream-deep);
}

.tool-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin-top: 1.1rem;
}
.tool-actions .btn { width: 100%; }
.tool-actions .btn--wide { grid-column: 1 / -1; }

/* ==========================================================================
   Vallamkali Race
   ========================================================================== */

.river {
  position: relative;
  height: clamp(220px, 42vw, 320px);
  background:
    linear-gradient(180deg, #7FC3AE 0%, #4EA48D 45%, #2F8A73 100%);
  overflow: hidden;
}

/* Drifting ripples, so the water reads as moving even when nobody is rowing. */
.river::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, transparent 3px 46px);
  animation: river-drift 3.5s linear infinite;
}
@keyframes river-drift { to { transform: translateX(-46px); } }

.lane {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  display: flex;
  align-items: center;
}
.lane--p1 { top: 0; }
.lane--p2 { top: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

.boat {
  position: absolute;
  left: 0;
  width: 22%;
  min-width: 96px;
  z-index: 2;
  translate: 0 0;
  will-change: left;
}
.boat svg { display: block; width: 100%; height: auto; }

.finish {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4%;
  width: 12px;
  z-index: 1;
  background:
    repeating-linear-gradient(180deg, #FFFDF7 0 10px, #2B1F12 10px 20px);
  box-shadow: 0 0 0 1px rgba(43,31,18,.25);
}

.lane__tag {
  position: absolute;
  left: .6rem;
  top: .4rem;
  z-index: 3;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.oars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .8rem;
}
.oars[data-solo="true"] { grid-template-columns: 1fr; }

.oar {
  border: 0;
  padding: 1.2rem .8rem;
  border-radius: var(--radius);
  background: var(--green);
  color: #FFF8E7;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease, filter .06s ease;
}
.oar--p2 { background: var(--chethi); }
.oar:active, .oar.is-hit { transform: scale(.97); filter: brightness(1.15); }
.oar[disabled] { opacity: .5; }
.oar small {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

.count-in {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 18vw, 6rem);
  line-height: 1;
  color: var(--green);
}

.mode-choice { display: grid; gap: .5rem; margin-bottom: .9rem; }

/* ==========================================================================
   Uriyadi
   ========================================================================== */

.uri {
  position: relative;
  height: 340px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #FFFDF7 0%, #F7EAD2 62%, #E9D6B0 100%);
  touch-action: manipulation;
  user-select: none;
}

/* Warm haze behind the pot, so the scene isn't just objects on a flat wash. */
.uri::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  width: 260px;
  height: 260px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 154, 30, .22), transparent 68%);
}

.uri__beam {
  position: absolute;
  top: 26px;
  left: 8%;
  right: 8%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #A6742A, #6E4A16);
  box-shadow: var(--shadow-sm);
}

/* The two uprights the beam is lashed to. */
.uri__post {
  position: absolute;
  top: 26px;
  bottom: 26px;
  width: 13px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(90deg, #5E3E12, #A6742A 45%, #5E3E12);
}
.uri__post--left  { left: 8%; }
.uri__post--right { right: 8%; }

/* The rope and pot hang from here; JS rotates this whole pivot. */
.uri__pivot {
  position: absolute;
  top: 31px;
  left: 50%;
  width: 0;
  transform-origin: top center;
}
.uri__rope {
  position: absolute;
  top: 0;
  left: -1.5px;
  width: 3px;
  height: 160px;
  background: repeating-linear-gradient(180deg, #C9A45C 0 6px, #A6813A 6px 12px);
}
.uri__pot {
  position: absolute;
  top: 152px;
  left: -34px;
  width: 68px;
  transition: opacity .18s linear;
}
.uri__pot svg { display: block; width: 100%; height: auto; }
.uri__pot.is-broken { animation: pot-break .34s ease-out forwards; }
@keyframes pot-break {
  40% { transform: scale(1.18) rotate(-8deg); }
  100% { transform: scale(.5) rotate(22deg); opacity: 0; }
}

/* Band showing how much slack the current level allows. */
.uri__zone {
  position: absolute;
  top: 176px;
  left: 50%;
  height: 116px;
  translate: -50% 0;
  border-left: 2px dashed rgba(198, 40, 40, .5);
  border-right: 2px dashed rgba(198, 40, 40, .5);
  background: rgba(239, 154, 30, .16);
  border-radius: 6px;
  transition: width .3s ease;
}
.uri__mark {
  position: absolute;
  top: 176px;
  bottom: 30px;
  left: 50%;
  width: 2px;
  translate: -1px 0;
  background: rgba(43, 31, 18, .35);
}

.uri__stick {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 26px;
  height: 152px;
  translate: -50% 0;
  transform-origin: bottom center;
  transform: rotate(-72deg);
}
.uri__stick svg { width: 100%; height: 100%; }
.uri__stick.is-swinging { animation: stick-swing .26s ease-out; }
@keyframes stick-swing {
  0%   { transform: rotate(-72deg); }
  45%  { transform: rotate(4deg); }
  100% { transform: rotate(-72deg); }
}

.uri__ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: linear-gradient(180deg, #C9A96F, #A9884D);
}

/* Shot clock for the current pot. */
.uri__clock {
  position: absolute;
  top: 0; left: 0;
  height: 6px;
  width: 100%;
  background: var(--marigold);
  transform-origin: left center;
}

.uri__call {
  position: absolute;
  top: 46%;
  left: 50%;
  translate: -50% -50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  color: var(--chethi);
  text-shadow: 0 2px 0 rgba(255, 253, 247, .9);
  opacity: 0;
  pointer-events: none;
}
.uri__call.is-shown { animation: call-pop .7s ease-out; }
@keyframes call-pop {
  0%   { opacity: 0; scale: .7; }
  25%  { opacity: 1; scale: 1.08; }
  70%  { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1; translate: -50% -110%; }
}

.lives { letter-spacing: .1em; }

/* ==========================================================================
   Sundarikku Pottu Thodal
   ========================================================================== */

.pottu {
  position: relative;
  height: clamp(320px, 68vw, 420px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, #FFFDF7, #F4E6C9 70%);
  touch-action: manipulation;
  cursor: crosshair;
  user-select: none;
}

.pottu__face {
  position: absolute;
  width: 168px;
  transition: opacity .5s ease;
}
.pottu__face svg { display: block; width: 100%; height: auto; }

/* Gone, not faint — the whole game is remembering where she was, and a ghost
   of her gives it away. It snaps out quickly rather than fading, so a fast
   tapper cannot catch her on the way. The element keeps its place in the
   layout, which is what lets the forehead still be measured. */
.pottu__face.is-blind {
  opacity: 0;
  transition: opacity .12s ease;
}

/* Where the player tapped. */
.pottu__guess,
.pottu__truth {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  pointer-events: none;
}
.pottu__guess { background: var(--chethi); box-shadow: 0 0 0 3px rgba(255,253,247,.9); }
.pottu__truth {
  background: transparent;
  border: 3px dashed var(--green);
  animation: truth-pop .4s ease-out;
}
@keyframes truth-pop { from { scale: .3; opacity: 0; } }

.pottu__link {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: repeating-linear-gradient(90deg, var(--green) 0 5px, transparent 5px 10px);
  pointer-events: none;
}

/* Countdown ring shown while the face is still visible. */
.pottu__timer {
  position: absolute;
  top: .75rem;
  left: 50%;
  translate: -50% 0;
  padding: .3rem .9rem;
  border-radius: 999px;
  background: rgba(255, 253, 247, .92);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  font-size: .84rem;
  color: var(--muted);
}

.round-dots { display: flex; gap: .3rem; justify-content: center; }
.round-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cream-deep);
  box-shadow: inset 0 0 0 1px var(--line);
}
.round-dots i.is-done { background: var(--marigold); }

/* ==========================================================================
   Onasadya
   ========================================================================== */

.leaf-stage {
  padding: .9rem;
  background: linear-gradient(180deg, #FFFDF7, #F6EAD4);
}
.leaf-stage svg { display: block; width: 100%; height: auto; }

.leaf-slot {
  fill: none;
  stroke: #FFFDF7;
  stroke-width: 3;
  stroke-dasharray: 6 6;
  opacity: 0;
}
.leaf-slot.is-next { opacity: .95; animation: slot-pulse 1.3s ease-in-out infinite; }
@keyframes slot-pulse {
  50% { opacity: .35; r: 30; }
}

.leaf-item {
  transform-box: fill-box;
  transform-origin: center;
  animation: item-land .32s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes item-land { from { opacity: 0; transform: scale(.4); } }

.tray {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  margin-top: .9rem;
}
@media (min-width: 720px) {
  .tray { grid-template-columns: repeat(4, 1fr); }
}

.dish {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  border: 0;
  padding: .8rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: .94rem;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--gold);
  transition: transform .12s ease, box-shadow .15s ease;
}
.dish:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dish .mal { font-size: .84rem; color: var(--muted); font-weight: 500; }
.dish.is-wrong { animation: dish-shake .34s ease; background: #FBE3E1; }
.dish[disabled] { opacity: .4; pointer-events: none; }
@keyframes dish-shake {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

.serve-order {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--green);
}

/* ==========================================================================
   Ormakkali (memory match)
   ========================================================================== */

.board {
  display: grid;
  gap: .5rem;
  padding: .9rem;
  /* The stage is a flex column, where auto margins alone would shrink this to
     its (zero) content width. The explicit width keeps the grid tracks real. */
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

.card {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
  -webkit-tap-highlight-color: transparent;
}

.card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.3, .8, .35, 1);
  border-radius: var(--radius-sm);
}
.card.is-open .card__inner,
.card.is-matched .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  backface-visibility: hidden;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__face svg { width: 74%; height: 74%; }

.card__back {
  background: var(--green);
  box-shadow: inset 0 0 0 2px rgba(232, 197, 106, .55), var(--shadow-sm);
}
.card__back svg { width: 62%; height: 62%; opacity: .9; }
.card__front {
  background: var(--paper);
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 2px var(--gold-light), var(--shadow-sm);
}

.card.is-matched { animation: matched-pop .45s ease; }
.card.is-matched .card__front { background: #EAF5EE; box-shadow: inset 0 0 0 3px var(--green); }
.card.is-matched { pointer-events: none; }
@keyframes matched-pop { 45% { transform: scale(1.06); } }

.size-chips { justify-content: center; margin-bottom: .9rem; }

/* ==========================================================================
   Onam Quiz
   ========================================================================== */

.quiz { padding: 1.4rem 1.2rem 1.6rem; }

.quiz__timer {
  position: absolute;
  top: 0; left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, var(--marigold), var(--chethi));
  transform-origin: left center;
  transition: transform .2s linear;
}

.quiz__count {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Malayalam carries the question; the English sits under it a size down, for
   whoever speaks it better than they read it. */
.quiz__count { font-family: var(--font-mal); }

.quiz__q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 4.4vw, 1.6rem);
  line-height: 1.25;
  margin: .35rem 0 1.1rem;
}
.quiz__q-mal {
  display: block;
  font-family: var(--font-mal);
  font-weight: 700;
  line-height: 1.4;
}
.quiz__q-en {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .66em;
  line-height: 1.35;
  color: var(--muted);
}

.options { display: grid; gap: .5rem; }
@media (min-width: 680px) {
  .options { grid-template-columns: 1fr 1fr; }
}

.opt {
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 0;
  padding: .85rem 1rem;
  min-height: 56px;
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(192, 138, 30, .22);
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.opt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--gold), var(--shadow-sm); }

/* Stacked rather than run together: the English is bracketed either way, and a
   long answer like "New clothes given at Onam" wraps far better on its own line. */
.opt__text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.opt__mal {
  font-family: var(--font-mal);
  font-weight: 700;
  font-size: 1.06em;
  line-height: 1.3;
}
.opt__en {
  font-size: .8em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--muted);
}
.opt.is-correct .opt__en { color: var(--green); }
.opt.is-wrong .opt__en { color: var(--chethi); }
.opt b {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper);
  font-size: .82rem;
  color: var(--gold);
}
.opt.is-correct {
  background: #E4F2E9;
  box-shadow: inset 0 0 0 2px var(--green);
}
.opt.is-correct b { background: var(--green); color: #FFF8E7; }
.opt.is-wrong {
  background: #FBE3E1;
  box-shadow: inset 0 0 0 2px var(--chethi);
}
.opt.is-wrong b { background: var(--chethi); color: #FFF8E7; }
.quiz.is-locked .opt { pointer-events: none; }

.quiz__note {
  margin: 1rem 0 0;
  min-height: 1.5rem;
  font-size: .92rem;
  color: var(--muted);
}
.quiz__note b { color: var(--green); }
.quiz__note-mal { font-family: var(--font-mal); color: var(--ink); }
.quiz__note-en {
  display: block;
  margin-top: .12rem;
  font-size: .88em;
  color: var(--muted);
}

.streak {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .5rem;
  color: var(--marigold);
  font-weight: 800;
}

/* Flower swatches show the bloom itself rather than a block of colour, sitting
   on the same swept earth the pookalam is laid on. */
.swatch svg { width: 100%; height: 100%; display: block; }
.swatch:not(.swatch--erase) { background: #EBDCBE; overflow: hidden; }

.flower-name {
  margin: .6rem 0 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--muted);
}
.flower-name b { color: var(--ink); }
.flower-name .mal { color: var(--green); }
.flower-name em { font-style: normal; display: block; font-size: .78rem; }