/* Wish Card — the "wish" theme (warm orange, used on the make-a-card page and
   this game's card in the hub), one colour set per occasion (.wish-eid,
   .wish-birthday, ...) for the card itself, and the parts only this game has:
   the occasion picker, the envelope, the card with its picture, confetti and
   animations. Classes come from config/wish_card.php. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;600;700&display=swap');
.wish {
  --blue: #ff7a2f;
  --blue-deep: #cf5412;
  --line: #ffbf94;
  --soft: #ffe0c9;
}
body.wish {
  background-color: #ffeedd;
  background-image: url("../shared/sky.svg"), linear-gradient(180deg, #ffdcc0 0%, #ffeddc 40%, #fff9f3 100%);
}
.wish .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #ff9a5c, #ff7a2f); }
.wish .tbtn .arrow { color: var(--blue); }
.wish .tbtn-pink .arrow { color: var(--pink); }
.wish .note::before { background-image: radial-gradient(circle at 12px 12px, #ffeedd 0 6px, #f2c4a0 6px 8px, transparent 8.5px); }
.wish .review li { background: #fff8f1; }
.wish .field > label { font-size: 17px; }
.wish .field > label small { font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.wish .tcard .field + .field { margin-top: 6px; }
.wish textarea.input { min-height: 96px; resize: vertical; line-height: 1.4; }

/* — one colour set per occasion (on <body> for a card, on a tile in the picker) — */
body.wish.wish-eid, .occasion.is-eid { --blue: #12a06d; --blue-deep: #0b7a52; --line: #8fdcb9; --soft: #cdeedd; }
body.wish.wish-birthday, .occasion.is-birthday { --blue: #ff5c93; --blue-deep: #d6336c; --line: #ffa9c6; --soft: #ffd9e6; --pink: #8f5cff; --pink-deep: #6b35c9; }
body.wish.wish-independence, .occasion.is-independence { --blue: #0f8a4b; --blue-deep: #0a6537; --line: #86d3a8; --soft: #cdeedb; }
body.wish.wish-newyear, .occasion.is-newyear { --blue: #4b5bff; --blue-deep: #2f3bd1; --line: #a9b1ff; --soft: #dadeff; }
body.wish.wish-ramadan, .occasion.is-ramadan { --blue: #1b8f9e; --blue-deep: #116a76; --line: #8fd3dc; --soft: #cdecf0; }
body.wish.wish-wedding, .occasion.is-wedding { --blue: #e03a4e; --blue-deep: #b01e33; --line: #f5a3ad; --soft: #fbd9dd; --pink: #d98a00; --pink-deep: #a86a00; }
body.wish.wish-anniversary, .occasion.is-anniversary { --blue: #b44cd6; --blue-deep: #8a2fb0; --line: #dba6ee; --soft: #f0d9f8; }
body.wish.wish-congrats, .occasion.is-congrats { --blue: #d97f00; --blue-deep: #a85f00; --line: #f4c877; --soft: #fbe6bd; }
body.wish.wish-ramadan { background-color: #dff3f5; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #c5e9ee 0%, #e3f5f7 40%, #f6fcfd 100%); }
body.wish.wish-wedding { background-color: #ffe6e6; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #ffd2d4 0%, #ffe8e9 40%, #fff7f7 100%); }
body.wish.wish-anniversary { background-color: #f5e6fb; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #ead0f6 0%, #f5e7fb 40%, #fcf7fe 100%); }
body.wish.wish-congrats { background-color: #fff2d1; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #ffe7ad 0%, #fff3d6 40%, #fffbf0 100%); }
body.wish.wish-eid { background-color: #dcf5e8; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #c3ecd7 0%, #e2f7ec 40%, #f6fcf9 100%); }
body.wish.wish-birthday { background-color: #ffe6ee; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #ffd3e2 0%, #ffe8ef 40%, #fff7fa 100%); }
body.wish.wish-independence { background-color: #dff5e8; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #c8edd7 0%, #e4f7ec 40%, #f7fcf9 100%); }
body.wish.wish-newyear { background-color: #e4e7ff; background-image: url("../shared/sky.svg"), linear-gradient(180deg, #d0d5ff 0%, #e6e9ff 40%, #f7f8ff 100%); }
.wish-eid .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #2fc48d, #12a06d); }
.wish-birthday .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #ff7dab, #ff4f8b); }
.wish-independence .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #27b06a, #0f8a4b); }
.wish-newyear .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #7682ff, #4b5bff); }
.wish-ramadan .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #36b3c3, #1b8f9e); }
.wish-wedding .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #f0667a, #e03a4e); }
.wish-anniversary .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #cb78e6, #b44cd6); }
.wish-congrats .tbtn:not(.tbtn-pink):not(.tbtn-green):not(.tbtn-white) { --face: linear-gradient(180deg, #f5a623, #d97f00); }

/* — Urdu: right to left, in Nastaliq, which needs much taller lines — */
.wish .ur { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; line-height: 2.1; letter-spacing: 0; }
.wish .note h1.ur { font-size: clamp(26px, 8vw, 40px); line-height: 1.9; }
.wish .note .hand.ur { font-size: 19px; line-height: 2.3; transform: none; }
.wish .wish-from.ur { text-align: left; font-size: 18px; }
.wish .note[dir="rtl"] { padding: 30px 46px 26px 20px; }
.wish .note[dir="rtl"]::before { left: auto; right: 10px; }
.wish .note[dir="rtl"]::after { left: auto; right: 28px; transform: rotate(7deg); }
.wish .note[dir="rtl"] .squiggle { margin: 10px 0 0 12%; }
.envelope strong.ur { font-size: clamp(22px, 6.4vw, 30px); line-height: 2; }
.envelope > span.ur:not(.tbtn) { font-family: "Noto Nastaliq Urdu", serif; font-size: 19px; }
.tbtn .ur { font-size: .82em; line-height: 1.9; }

/* — occasion picker — */
.occasions { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 10px; }
.occasion {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px 8px; cursor: pointer; text-align: center;
  font-weight: 700; font-size: 15px; line-height: 1.2;
  background: #fff; border: 3px solid var(--soft); border-radius: 22px;
  box-shadow: 0 5px 0 var(--soft);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.occasion input { position: absolute; opacity: 0; pointer-events: none; }
.occasion-emoji { font-size: 30px; line-height: 1.1; }
.wish .occasion small.ur { font-size: 12px; font-weight: 400; line-height: 1.9; opacity: .85; }

/* — language switch — */
.lang-toggle { display: inline-flex; padding: 4px; gap: 4px; background: #fff3e8; border-radius: 999px; }
.lang-toggle label { cursor: pointer; }
.lang-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.lang-toggle span {
  display: block; min-width: 96px; padding: 7px 18px; border-radius: 999px; text-align: center;
  font-weight: 700; font-size: 16px; color: var(--ink-soft);
  transition: background .12s ease, color .12s ease;
}
.wish .lang-toggle span.ur { font-size: 15px; line-height: 1.7; }
.lang-toggle input:checked + span { background: var(--blue); color: #fff; }
.lang-toggle input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* — ready-made messages: a short scrolling list under the message box — */
.msg-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 290px; overflow-y: auto; padding: 4px 4px 8px; margin: -4px;
  scrollbar-width: thin;
}
.msg-pick {
  flex: none; padding: 10px 14px; cursor: pointer; text-align: start;
  font-family: var(--font-toon); font-size: 15.5px; line-height: 1.4; color: var(--ink);
  background: #fff8f1; border: 2px solid var(--soft); border-radius: 16px;
  transition: border-color .12s ease, background .12s ease;
}
.wish .msg-pick.ur { font-size: 15px; line-height: 2.2; }
.msg-pick:hover { border-color: var(--blue); }
.msg-pick.is-picked { background: #fff; border-color: var(--blue); box-shadow: 0 3px 0 var(--blue); }
.msg-pick.is-picked::before { content: "✓ "; font-weight: 700; color: var(--blue-deep); }
.msg-pick:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.wish textarea.input.ur { font-size: 16px; line-height: 2.2; }
.occasion:hover { transform: translateY(-2px); }
.occasion:has(input:checked) { color: #fff; background: var(--blue); border-color: #fff; box-shadow: 0 5px 0 var(--blue-deep); }
.occasion:has(input:checked)::after {
  content: "✓"; position: absolute; top: -10px; right: -6px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 16px; color: #fff; background: var(--ink); border: 3px solid #fff;
}
.occasion:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* — envelope: the label of a hidden checkbox; ticking it swaps envelope for card — */
.wish-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.envelope {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 20px 30px; cursor: pointer; text-align: center;
  background: #fff; border: 4px solid var(--line); border-radius: 30px;
  box-shadow: 0 10px 0 rgba(29, 39, 71, .1);
}
.envelope svg { width: min(62%, 230px); animation: nudge 2.2s ease-in-out infinite; }
.envelope strong { font-size: clamp(26px, 7.6vw, 34px); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.envelope > span:not(.tbtn) { font-family: var(--font-hand); font-size: 24px; color: var(--ink-soft); }
.envelope .tbtn { margin-top: 10px; }
.wish-toggle:focus-visible + .envelope { outline: 3px solid var(--ink); outline-offset: 4px; }
.wish-toggle:checked + .envelope { display: none; }
.wish-toggle:not(:checked) ~ .wish-card,
.wish-toggle:not(:checked) ~ .wish-after { display: none; }

/* — the card — */
.wish-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 10px 0; overflow: hidden;
  border-radius: 34px; border: 4px solid #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 26%, #fff) 0%, #fff 78%);
  box-shadow: 0 12px 0 rgba(29, 39, 71, .1), 0 22px 34px rgba(29, 39, 71, .12);
  animation: pop .5s cubic-bezier(.2, 1.3, .4, 1);
}
.wish-art { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.wish-card .note { z-index: 1; margin: 4px 6px 0; }
.wish-card .note h1 { font-size: clamp(30px, 9.4vw, 46px); }
.wish-card .note .hand { font-size: 24px; transform: rotate(-1.5deg); }
.wish-from { display: block; margin-top: 16px; text-align: right; font-weight: 700; font-size: 21px; color: var(--blue-deep); overflow-wrap: anywhere; }
.wish-crowd { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; margin: 6px 0 -14px; }
.wish-crowd .avatar { width: 20%; max-width: 92px; margin: 0 -1%; animation: bob 2.6s ease-in-out infinite; }
.wish-crowd .avatar:nth-child(2n) { animation-delay: -1.3s; }
.wish-crowd .avatar:nth-child(3) { width: 24%; max-width: 110px; }

/* falling paper */
.wish-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wish-confetti i {
  position: absolute; top: -24px; left: var(--x); width: 10px; height: 15px; border-radius: 3px;
  background: var(--c); opacity: .9; transform: rotate(var(--r));
  animation: fall var(--d) linear var(--delay) infinite;
}
.wish-confetti i:nth-child(3n) { width: 12px; height: 12px; border-radius: 50%; }
.wish-confetti i:nth-child(4n) { width: 7px; height: 18px; }

/* — animations used by the pictures in _art.blade.php — */
.wish-art .swing { animation: swing 3.2s ease-in-out infinite; }
.wish-art .bob { animation: drift 4s ease-in-out infinite; }
.wish-art .flick { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .5s ease-in-out infinite alternate; }
.wish-art .spark { animation: spark 2s ease-out infinite; }
.wish-art .wave { transform-box: fill-box; transform-origin: 0 50%; animation: wave 2.4s ease-in-out infinite; }
.wish-art .twinkle { transform-box: fill-box; transform-origin: 50% 50%; animation: twinkle 1.8s ease-in-out infinite; }
.wish-art .beat { transform-box: fill-box; transform-origin: 50% 60%; animation: beat 1.3s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes flick { from { transform: scale(.82, .9); } to { transform: scale(1.08, 1.12); } }
@keyframes spark { 0% { transform: scale(.25); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes wave { 0%, 100% { transform: skewY(-3deg); } 50% { transform: skewY(3deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.09); } 36% { transform: scale(1); } 54% { transform: scale(1.06); } }
@keyframes fall { to { transform: translateY(980px) rotate(calc(var(--r) + 540deg)); } }
@keyframes nudge { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .wish-card, .envelope svg, .wish-crowd .avatar,
  .wish-art .swing, .wish-art .bob, .wish-art .flick, .wish-art .wave, .wish-art .twinkle, .wish-art .beat { animation: none; }
  /* fireworks and falling paper would freeze out of sight, so show them still */
  .wish-art .spark { animation: none; opacity: 1; }
  .wish-confetti i { animation: none; top: calc(var(--x) * .9); opacity: .55; }
}

/* "Congratulations," is one long word: a little smaller so it stays on one line on phones. */
.wish-congrats .wish-card .note h1:not(.ur) { font-size: clamp(24px, 6.6vw, 40px); }