/* Festival wishes: a GoDisai blue card with crackers drawn on a canvas, then a plain form to personalise and share it.
   GoDisai theme: flat brand blue and white, ink border with the hard offset shadow the buttons use. No gradients.
   Names sit in a white chip with blue text; the festival colours live only in the crackers and the lamps. */

.wish-stage {
  --sky: var(--accent);
  --tint: #cfe2ff;   /* light brand blue for the Tamil line: 5:1 on the card blue */
  --soft: #dce8ff;
  --flame: #ffc93c;
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  border-radius: 20px;
  background: var(--sky);
  border: 2px solid var(--fg);
  box-shadow: 5px 5px 0 var(--fg);
  color: #fff;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 3rem 1rem;
  isolation: isolate;
}
.wish-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: crosshair;
}
.wish-card {
  max-width: 34rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(13, 22, 38, .55);   /* keeps body text readable over a burst */
  pointer-events: none;   /* taps fall through to the sky so anyone can launch a cracker */
}
.wish-card a, .wish-card button { pointer-events: auto; }
.wish-kicker {
  margin: 0 0 1rem;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
}
.wish-to { margin: 0 0 .25rem; font-size: 1.15rem; color: #fff; }
.wish-to strong, .wish-from strong {
  display: inline-block;
  padding: .05em .45em;
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  text-shadow: none;
  box-shadow: 2px 2px 0 var(--fg);
}
.wish-headline {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 3px 3px 0 var(--fg);   /* the same hard ink shadow as the buttons, so crackers never hide it */
}
.wish-tamil {
  margin: .5rem 0 1.25rem;
  font-family: "Noto Sans Tamil", var(--display);
  font-size: clamp(1.1rem, 3.5vw, 1.45rem);
  color: var(--tint);
}
.wish-message {
  margin: 0 auto 1.25rem;
  max-width: 30rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: #fff;
}
.wish-from { margin: 0; font-size: 1rem; color: var(--soft); }
.wish-from span { display: block; margin-top: .15rem; font-size: .9rem; }
.wish-tap { margin: 1.5rem 0 0; font-size: .8rem; color: var(--soft); }

/* A row of clay lamps. Bowl is a half disc, flame a rotated drop that flickers. */
.diyas {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.75rem;
}
.diya {
  position: relative;
  width: 42px;
  height: 18px;
  background: #d9631e;
  border-radius: 0 0 42px 42px;
  border-top: 3px solid #f08a3c;
}
.flame {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--flame);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  animation: flicker 1.4s cubic-bezier(.23, 1, .32, 1) infinite alternate;
}
.diya:nth-child(2) .flame { animation-delay: .3s; }
.diya:nth-child(3) .flame { animation-delay: .7s; }
.diya:nth-child(4) .flame { animation-delay: .15s; }
.diya:nth-child(5) .flame { animation-delay: .5s; }
@keyframes flicker {
  from { transform: rotate(-45deg) scale(1); opacity: 1; }
  to { transform: rotate(-40deg) scale(.82); opacity: .85; }
}

/* The send form */
.wish-send { max-width: 44rem; margin: 0 auto 2.5rem; }
.wish-send h2 { margin: 0 0 .25rem; }
.wish-form { margin-top: 1.25rem; display: grid; gap: 1.25rem; }
.wish-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wish-fields label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.wish-fields input, .wish-link-row input {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  font: inherit;
  font-weight: 400;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--fg);
}
.wish-fields input:focus-visible, .wish-link-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.wish-choices { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.wish-choices legend { font-weight: 600; font-size: .95rem; margin-bottom: .5rem; padding: 0; }
.wish-choice {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  line-height: 1.5;
  transition: border-color .18s cubic-bezier(.23, 1, .32, 1), background-color .18s cubic-bezier(.23, 1, .32, 1);
}
.wish-choice:hover { border-color: var(--accent); }
.wish-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wish-choice input { margin-top: .3rem; accent-color: var(--accent); flex: none; }
.wish-form .btn { justify-self: start; }
.wish-choice-own span { font-weight: 600; }
.wish-own { display: grid; gap: .35rem; }
.wish-own[hidden] { display: none; }
.wish-own textarea {
  width: 100%;
  min-height: 7rem;
  padding: .7rem .8rem;
  font: inherit;
  line-height: 1.55;
  resize: vertical;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: #fff;
  color: var(--fg);
}
.wish-own textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wish-count { margin: 0; font-size: .85rem; }
.wish-error {
  margin: 0;
  padding: .7rem .9rem;
  border: 1.5px solid var(--stop);
  border-radius: 10px;
  background: #fdecea;
  color: var(--stop);
  font-weight: 600;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wish-share {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  padding: 1.25rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--accent-soft);
}
.wish-share h2 { margin: 0 0 .25rem; }
.wish-share > .muted { margin: 0 0 .9rem; }
.wish-link-row { display: flex; gap: .6rem; }
.wish-link-row input { flex: 1; min-width: 0; font-size: .9rem; color: var(--muted); }
.wish-link-row .btn { flex: none; white-space: nowrap; }
.wish-share-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.wish-status { min-height: 1.4em; margin: .6rem 0 0; font-size: .9rem; }

.wish-others { max-width: 44rem; margin: 0 auto 2rem; }
.wish-others h2 { font-size: 1.1rem; }
.wish-others ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wish-others a {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg);
}
.wish-others a:hover { border-color: var(--accent); color: var(--accent); }

/* Index page */
.wish-intro { max-width: 40rem; margin: 0 0 1.5rem; }
.wish-intro h1 { margin: 0 0 .5rem; }
.wish-featured {
  display: grid;
  gap: .4rem;
  padding: 2rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 20px;
  background: var(--accent);
  border: 2px solid var(--fg);
  box-shadow: 5px 5px 0 var(--fg);
  color: #fff;
  text-decoration: none;
}
.wish-featured strong { font-family: var(--display); font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; }
.wish-featured [lang="ta"] { color: #cfe2ff; font-size: 1.15rem; }
.wish-featured-tag {
  justify-self: start;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
}
.wish-featured-go { margin-top: .6rem; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.wish-featured:hover .wish-featured-go { color: #fff; }
.wish-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.wish-list a {
  display: grid;
  gap: .3rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--fg);
  text-decoration: none;
}
.wish-list a:hover { border-color: var(--accent); }
.wish-list [lang="ta"] { color: var(--muted); font-size: .95rem; }

/* A saved card fills the whole screen: no site header or footer, just the wish. */
.wish-full-page .topbar, .wish-full-page .site-footer { display: none; }
.wish-full-page main { max-width: none; padding: 0; }
.wish-stage-full {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4rem 1.25rem 7rem;   /* room at the bottom so the corner buttons never cover the words */
}

/* Corner buttons on a saved card */
.wish-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  gap: .6rem;
}
.wish-fab-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 48px;
  padding: .7rem 1.2rem;
  border: 2px solid var(--fg);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--fg);
  cursor: pointer;
  transition: transform .16s cubic-bezier(.23, 1, .32, 1), box-shadow .16s cubic-bezier(.23, 1, .32, 1);
}
.wish-fab-btn.ghost { background: var(--accent); color: #fff; border-color: #fff; box-shadow: 3px 3px 0 var(--fg); }
.wish-fab-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--fg); }
.wish-fab-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fg); }
.wish-fab-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Share dialog */
.wish-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: 2px solid var(--fg);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--fg);
}
.wish-dialog::backdrop { background: rgba(13, 22, 38, .55); }
.wish-dialog .wish-share { margin: 0; border: 0; border-radius: 0; }
.wish-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wish-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--fg);
  cursor: pointer;
}
.wish-close:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 600px) {
  .wish-stage { min-height: 520px; padding: 2.5rem 1rem; border-radius: 14px; }
  .wish-stage-full { min-height: 100svh; padding: 3rem 1rem 6.5rem; border-radius: 0; }
  .wish-fab-btn { padding: .65rem 1rem; }
  .wish-fields { grid-template-columns: 1fr; }
  .wish-link-row { flex-direction: column; }
  .diyas { gap: .7rem; }
  .diya { width: 34px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .wish-fab-btn { transition: none; }
  .flame { animation: none; }
  .wish-choice { transition: none; }
}