@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+Myanmar:wght@400;500;600;700&display=swap');

/* THADINGYUT — GOLDEN GRADIENT GLASS THEME */

:root {
  --navy: #2d1606;
  --blue: #5c3010;
  --gold: #ffcf60;
  --gold2: #fff3cb;
  --cream: #fff8e7;
  --text: #fffaf0;
  --muted: #f9e4bd;
  --glass: rgba(255, 238, 200, 0.15);
  --border: rgba(255, 221, 142, 0.45);
  --radius: 28px;
  --transition: 0.3s cubic-bezier(.2, .75, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: #1a0b03;
}

body {
  min-height: 100vh;
  margin: 0;
  isolation: isolate;
  overflow-x: hidden;
  color: var(--text);
  font-family: "Noto Sans Myanmar", "DM Sans", sans-serif;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(255, 230, 160, .4), transparent 40%),
    radial-gradient(ellipse at 85% 20%, rgba(255, 180, 70, .35), transparent 45%),
    radial-gradient(ellipse at 50% 90%, rgba(140, 70, 15, .55), transparent 50%),
    linear-gradient(135deg, #5c3010 0%, #a6631e 25%, #5c3010 55%, #2d1606 80%, #150802 100%);
  background-attachment: fixed;
}

button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible {
  outline: 2px solid #ffe8a0;
  outline-offset: 4px;
}

/* Ambient golden glow with rich glass gradient effect */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 245, 210, .18), transparent 60%),
    radial-gradient(ellipse at 10% 85%, rgba(255, 190, 70, .15), transparent 40%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.moon {
  position: absolute;
  width: clamp(220px, 35vw, 450px);
  height: clamp(220px, 35vw, 450px);
  right: clamp(-80px, 5vw, 80px);
  top: clamp(-110px, -7vw, -40px);
  border-radius: 50%;
  opacity: .95;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff3cc 25%, #f6d16d 55%, rgba(245, 185, 70, .25) 72%, transparent 80%);
  box-shadow: 0 0 50px rgba(255, 232, 170, .35), 0 0 140px rgba(255, 200, 80, .25);
  animation: moonBreath 7s ease-in-out infinite alternate;
}

@keyframes moonBreath {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.04); filter: brightness(1.1); }
}

.pattern {
  position: absolute;
  inset: -50px;
  opacity: .12;
  background-image:
    linear-gradient(30deg, transparent 48%, #fff0b3 49%, transparent 51%),
    linear-gradient(150deg, transparent 48%, #fff0b3 49%, transparent 51%);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  animation: patternMove 24s linear infinite;
}

.sparkles {
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image:
    radial-gradient(circle, rgba(255, 248, 220, .95) 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 215, 120, .75) 1.2px, transparent 2px);
  background-size: 83px 83px, 127px 127px;
  background-position: 0 0, 35px 54px;
  animation: starDrift 28s linear infinite;
}
/* Colorful Floating Sky Lanterns Design */
.lantern3d {
  position: absolute;
  width: 70px;
  height: 100px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 20px rgba(255, 220, 100, 0.7));
  animation: lanternJourney 11s ease-in-out infinite;
  will-change: transform;
}

.lantern-body {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow: inset 0 -12px 20px rgba(0, 0, 0, 0.35), inset 0 10px 18px rgba(255, 255, 255, 0.6);
  animation: lanternSway 4.5s ease-in-out infinite alternate;
  overflow: hidden;
}

/* မီးပုံးပျံတစ်ခုချင်းစီအတွက် ရောင်စုံအလှများ (Colorful Variations) */
.l1 .lantern-body {
  background: linear-gradient(135deg, #fffae0 0%, #ff5252 40%, #c62828 80%, #8e0000 100%); /* တောက်ပသော အနီရောင် */
}
.l2 .lantern-body {
  background: linear-gradient(135deg, #e0f7fa 0%, #00bcd4 40%, #00838f 80%, #004d40 100%); /* စိုပြေသော အပြာ/စိမ်းရောင် */
}
.l3 .lantern-body {
  background: linear-gradient(135deg, #f3e5f5 0%, #ab47bc 40%, #6a1b9a 80%, #4a148c 100%); /* ခရမ်းရောင် လှလှလေး */
}
.l4 .lantern-body {
  background: linear-gradient(135deg, #fffde7 0%, #ffb300 40%, #e65100 80%, #bf360c 100%); /* ရွှေဝါ/လိမ္မော်ရောင် */
}

/* အတွင်းဘက်မှ တောက်ပနေသော မီးရောင် */
.lantern-body::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffeb3b 50%, rgba(255, 100, 0, 0) 100%);
  box-shadow: 0 0 28px 10px rgba(255, 220, 100, 0.95);
  animation: flameFlicker 1.2s ease-in-out infinite alternate;
}

.lantern-cap {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 22px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3e2723, #d7ccc8, #3e2723);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.l1 { left: 5%; top: 15%; animation-delay: -1.2s; }
.l2 { right: 6%; top: 32%; animation-delay: -4.5s; }
.l3 { left: 12%; bottom: 14%; transform: scale(0.78); animation-delay: -6.8s; }
.l4 { right: 15%; bottom: 18%; transform: scale(0.7); animation-delay: -2.8s; }

@keyframes flameFlicker {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.85; }
  100% { transform: translateX(-50%) scale(1.18); opacity: 1; filter: brightness(1.25); }
}



/* Candles with bright lighting animation */
.candle {
  position: absolute;
  width: 38px;
  height: 98px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(90deg, #b37335, #fff5cb 48%, #d49542);
  box-shadow: 0 0 28px rgba(255, 190, 70, .35);
  opacity: .95;
}

.candle span {
  position: absolute;
  width: 16px;
  height: 26px;
  left: 11px;
  top: -21px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse at 50% 65%, #ffffff 0%, #ffe680 45%, #ff9520 78%);
  box-shadow: 0 0 18px 6px rgba(255, 185, 60, .75), 0 0 42px 14px rgba(255, 145, 30, .3);
  transform-origin: 50% 100%;
  animation: candleDance .95s ease-in-out infinite alternate;
}

@keyframes candleDance {
  0% { transform: scale(1) rotate(-3deg); }
  100% { transform: scale(1.12) rotate(3deg); filter: brightness(1.2); }
}

.c1 { left: 9%; bottom: 26%; transform: scale(.75); }
.c2 { right: 11%; bottom: 32%; transform: scale(.85); }
.c3 { right: 32%; top: 19%; transform: scale(.5); }
.c2 span { animation-delay: -.35s; }
.c3 span { animation-delay: -.62s; }

/* Sound toggle */
.sound-toggle {
  position: fixed !important;
  right: 18px !important;
  top: 18px !important;
  z-index: 99999 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 220, 139, .5) !important;
  background: rgba(67, 37, 11, .75) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff8e7;
  box-sizing: border-box !important;
}

/* App layout */
.app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 35px 18px;
}

.screen { width: min(820px, 100%); display: none; text-align: center; }
.screen.active { display: block; animation: enter .65s ease both; }


.logo, .mini-logo {
  display: block;
  /* Logo အရွယ်အစားကို အများကြီး ပိုကြီးလာစေရန် */
  width: min(850px, 98vw) !important;
  max-height: 300px !important;
  object-fit: contain;
  margin: 0 auto 12px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
  transition: transform var(--transition);
}

.mini-logo { 
  width: min(650px, 90%) !important; 
  max-height: 250px !important; 
  margin-bottom: 12px; 
}

.logo:hover, .mini-logo:hover {
  transform: translateY(-2px);
}
.festival-mark {
  font-size: 62px;
  margin: 8px 0 4px;
  filter: drop-shadow(0 0 20px rgba(255, 193, 67, .6));
  animation: glow 2s ease-in-out infinite alternate;
}



/* Typography */
.eyebrow {
  color: #ffe3a0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(255, 201, 86, .2);
}
#formTitle{
 color: #f5c352;
 font-size: clamp(1.5rem, 2vw, 2.5rem);

}
#welcomeTitle {
  font-size: clamp(3.5rem, 5vw, 4.5rem);
  font-weight: 800;
  text-align: center;
  
  /* တောက်ပသော ရွှေရောင် Gradient */
  color: #f5c352;
  background: linear-gradient(135deg, #fff6e0 0%, #f5c352 50%, #ffdf85 100%);
  
  /* Standard background-clip နဲ့ vendor prefix တွဲသုံးခြင်း */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Glowing and Sparkling Animation */
  filter: drop-shadow(0 0 15px rgba(245, 195, 82, 0.6));
  animation: glowFloatSparkle 3.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes glowFloatSparkle {
  0% {
    transform: translateY(0px);
    filter: drop-shadow(0 5px 15px rgba(245, 195, 82, 0.4));
  }
  50% {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 25px rgba(255, 220, 100, 0.9)) drop-shadow(0 0 40px rgba(245, 195, 82, 0.5));
  }
  100% {
    transform: translateY(0px);
    filter: drop-shadow(0 5px 15px rgba(245, 195, 82, 0.4));
  }
}


h1 {
  margin: 10px 0 22px;
  font-size: clamp(44px, 9vw, 84px);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 8px 35px rgba(43, 22, 5, .2);
}

h1 strong {
  color: transparent;
  background: linear-gradient(100deg, #fff9df 0%, #ffe08a 38%, #fff2be 65%, #d99c32 100%);
  background-size: 180% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: goldShimmer 7s ease-in-out infinite;
}

h2 {
  margin: 8px 0 12px;
  font-size: clamp(23px, 5vw, 35px);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.lead {
  max-width: 620px;
  margin: 0 auto;
  color: #f6e7c9;
  line-height: 2;
  font-size: 14.5px;
  text-wrap: pretty;
}

.muted 
{ color: var(--muted); 
  line-height: 1.9; 
  font-size: 13px; 
  text-wrap: pretty; }
.tiny 
{ margin-top: 16px; 
  color: #e5cda6; 
  font-size: 13px; }

/* Prize strip */
.prize-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0;
}

.prize-strip span {
  padding: 7px 13px;
  border: 1px solid rgba(255, 220, 139, .35);
  border-radius: 999px;
  background: rgba(255, 226, 161, .1);
  color: #fff0c5;
  font-size: 12px;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.prize-strip span:hover {
  transform: translateY(-2px);
  background: rgba(255, 226, 161, .17);
  border-color: rgba(255, 230, 166, .58);
}

/* Buttons */
.primary, .secondary {
  border-radius: 999px;
  padding: 14px 25px;
  font-weight: 800;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.primary {
  border: 0;
  color: #3a2107;
  background: linear-gradient(135deg, #fff6ca 0%, #ffd66f 52%, #d99b2d 100%);
  box-shadow: 0 8px 25px rgba(92, 49, 6, .2), inset 0 1px 0 rgba(255, 255, 255, .75);
}

.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 15px 36px rgba(92, 49, 6, .28), 0 0 22px rgba(255, 216, 119, .15);
}

.primary:active, .secondary:active { transform: translateY(1px) scale(.99); }
.primary span { margin-left: 12px; }
.primary:disabled { opacity: .6; cursor: wait; }

.secondary {
  color: #fff1c9;
  background: rgba(255, 248, 225, .09);
  border: 1px solid rgba(255, 220, 139, .45);
}

.secondary:hover {
  background: rgba(255, 248, 225, .16);
  border-color: rgba(255, 230, 166, .7);
  transform: translateY(-1px);
}

.wide { width: 100%; margin-top: 16px; }

/* Glass cards */
.card, .draw-card, .result-card {
position: relative;
overflow: hidden;
max-width: 560px;
margin: auto;
padding: 40px;
border: 1px solid rgba(255, 224, 151, .43);
border-radius: var(--radius);
background:
linear-gradient(145deg, rgba(255, 241, 205, .19), rgba(255, 222, 154, .075)),
   rgba(80, 43, 12, .27);
  box-shadow:
    0 24px 70px rgba(40, 20, 4, .28),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 38px rgba(255, 206, 105, .08);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.card::before, .draw-card::before, .result-card::before {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 207, .85), transparent);
  pointer-events: none;
}

.card:hover, .draw-card:hover, .result-card:hover {
  border-color: rgba(255, 231, 168, .65);
  box-shadow: 0 30px 80px rgba(40, 20, 4, .32), 0 0 32px rgba(255, 194, 67, .1);
}

.icon-circle {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 239, 188, .25), rgba(246, 200, 95, .08));
  border: 1px solid rgba(255, 220, 139, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 24px rgba(45, 23, 5, .12);
  font-size: 30px;
}

/* Form and inputs */
form 
{ margin-top: 25px; 
  text-align: left; }
label 
{ display: block; 
  margin: 15px 0 7px; 
  color: #ffedc8; 
  font-size: 14px; }

input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 239, 188, .32);
  border-radius: 14px;
  background: rgba(55, 29, 8, .3);
  color: #fffaf0;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

input:hover { border-color: rgba(255, 220, 139, .55); }
input:focus {
  border-color: #ffe08a;
  background: rgba(55, 29, 8, .38);
  box-shadow: 0 0 0 4px rgba(246, 200, 95, .13), 0 0 20px rgba(246, 200, 95, .08);
}
input::placeholder { color: rgba(255, 248, 231, .6); }
.error { min-height: 20px; margin-top: 12px; color: #ffd0c4; font-size: 12px; }

/* Gift animation */
.gift-stage { height: 210px; display: grid; place-items: center; perspective: 700px; }
.gift-box {
  position: relative;
  width: 160px;
  height: 125px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 22px 28px rgba(43, 22, 5, .35)) drop-shadow(0 0 14px rgba(255, 193, 67, .12));
}
.gift-box::after {
  content: "";
  position: absolute;
  inset: 25px 0 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #a96f1d, #f6ca58 45%, #75420f);
  box-shadow: inset 0 0 0 2px rgba(255, 241, 173, .25);
}
.gift-lid {
  position: absolute;
  z-index: 3;
  left: -8px;
  top: 12px;
  width: 176px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff0a8, #c98d20);
  transform-origin: center top;
}
.gift-ribbon-v {
  position: absolute;
  z-index: 4;
  left: 67px;
  top: 20px;
  width: 27px;
  height: 105px;
  background: linear-gradient(90deg, #8e162c, #e54b54, #8e162c);
}
.gift-ribbon-h {
  position: absolute;
  z-index: 5;
  left: -7px;
  top: 39px;
  width: 174px;
  height: 24px;
  background: linear-gradient(180deg, #e54b54, #8e162c);
}
.gift-bow { position: absolute; z-index: 8; left: 57px; top: -8px; width: 55px; height: 34px; }
.gift-bow i {
  position: absolute;
  width: 30px;
  height: 24px;
  border-radius: 70% 15%;
  background: #e54b54;
}
.gift-bow i:first-child { left: 0; transform: rotate(28deg); }
.gift-bow i:nth-child(2) { right: 0; transform: scaleX(-1) rotate(28deg); }
.gift-bow b {
  position: absolute;
  left: 21px;
  top: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffd879;
}
.gift-spark { position: absolute; z-index: 9; right: -35px; top: 20px; color: #fff0a8; font-size: 32px; animation: glow 1s infinite alternate; }
.gift-stage.shaking .gift-box { animation: giftShake .16s infinite; }
.gift-stage.open .gift-lid { animation: lidOpen 1s ease forwards; }
.gift-stage.open .gift-box { animation: giftPop .8s ease; }

/* Result / prize */
.slot {
  margin: 18px auto 8px;
  color: #fff0ad;
  font-size: clamp(38px, 9vw, 70px);
  font-weight: 900;
  text-shadow: 0 0 26px rgba(246, 200, 95, .25), 0 3px 18px rgba(43, 22, 5, .22);
}
.success-icon { font-size: 72px; animation: pop .7s ease; }
.result-label { margin: 20px 0 0; color: var(--muted); }
.amount {
  color: #ffe38c;
  font-size: clamp(55px, 12vw, 100px);
  font-weight: 900;
  text-shadow: 0 0 26px rgba(246, 200, 95, .25), 0 3px 18px rgba(43, 22, 5, .22);
}
.amount small 
{ font-size: 22px; 
  vertical-align: middle; }
.transaction 
{ color: #e5cda6; 
  font-size: 10px; 
  letter-spacing: .08em; }


.prize-title-text {
  margin: 15px 0 10px;
  color: #f6e7c9;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}


.highlight-amount {
  color: #ffe38c;
  font-size: 30px; 
  font-weight: 900;
  text-shadow: 0 0 20px rgba(246, 200, 95, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 0 6px;
  display: inline-block;
  vertical-align: middle;
}


.screen {
  display: none !important;
}


.screen.active {
  display: flex !important; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



#wishScreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100vh;
  background-image: url('PA.jpg') !important;
  background-size: cover !important; 
  background-position: top center !important; 
  background-repeat: no-repeat !important;
  display: grid;
  place-items: center;
  overflow-y: auto;
  z-index: 100;
}


#wishScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); 
  z-index: 1;
}

 
#wishScreen .result-card {
  position: relative;
  z-index: 2;
 
  background: rgba(20, 10, 2, 0.05) !important; 
  backdrop-filter: blur(1.5px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(1.5px) saturate(100%) !important;
  border: 1px solid rgba(255, 220, 139, 0.25) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.wish-box-inner {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid rgba(255, 220, 139, 0.15);
  border-radius: 16px;
  color: #fffaf0;
  line-height: 2;
  font-size: 12.1px;
  background: rgba(0, 0, 0, 0.02); 
  text-align: center;
  word-break: break-word;
}


#wishScreen h2 {
  font-size: 22px !important; 
  font-weight: 700;
  color: #fff8e8;
  text-align: center;
  margin: 10px 0 15px;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.wish {
  margin: 24px auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: #f5dfc9;
  line-height: 2;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.12);
}

#closedTitle,#wishTitle {
  /* မီးခွက်လေးတွေပါ တစ်ကြောင်းတည်းပေါ်ပြီး ဘယ်တော့မှ မကျိုးသွားစေရန် */
  white-space: nowrap !important;
  
  /* Card အကျယ်နဲ့ ကွက်တိဖြစ်စေရန် စာလုံးအရွယ်အစားကို အသင့်အတင့် ချိန်ညှိခြင်း */
  font-size: clamp(0.85rem, 1.4vw, 1.25rem) !important;
  font-weight: 700 !important;
  text-align: center !important;
  
  margin: 12px auto 18px auto !important;
  padding: 0 5px !important;
  
  color: #ffdf85;
  text-shadow: 0 0 10px rgba(245, 195, 82, 0.8), 
               0 0 20px rgba(255, 215, 130, 0.5),
               0 0 30px rgba(255, 200, 80, 0.3);
               
  animation: wishFloat 3.5s ease-in-out infinite;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Card ၏ ဘေးဘက် Padding ကို အနည်းငယ် ချိန်ညှိပေးခြင်းဖြင့် မီးခွက်လေးများ လုံးဝမကွယ်တော့ပါ */
.result-card {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
@keyframes wishFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px); /* အပေါ်သို့ အနည်းငယ် လွင့်တက်မည် */
    text-shadow: 0 0 15px rgba(255, 240, 150, 1), 
                 0 0 25px rgba(245, 195, 82, 0.8),
                 0 0 40px rgba(255, 215, 130, 0.6);
  }
  100% {
    transform: translateY(0px);
  }
}
/* Closed Screen active ဖြစ်နေစဉ် နောက်ခံပုံပေါ်စေရန် */
#closed.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: 100vh;
  background-image: url('PB.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: grid;
  place-items: center;
  z-index: 100;
}

/* Card ၏ နောက်ခံကို ပိုမိုမှိန်ပေးခြင်းဖြင့် နောက်ခံပုံအလှများ ပိုမိုပေါ်လွင်စေရန် */
#closed.active .card {
  position: relative;
  z-index: 2;
  background: rgba(10, 5, 1, 0.2) !important; /* နောက်ခံ opacity ကို ပိုလျှော့ချပြီး မှိန်ပေးထားခြင်း */
  backdrop-filter: blur(2.5px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(2.5px) saturate(100%) !important;
  border: 1px solid rgba(255, 220, 139, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  color: #ffffff !important;
}


#closed.active .card h2,
#closed.active .card .muted,
#closed.active .card .eyebrow,
#closed.active .card .wish {
  color: #fffaf0 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8) !important;
}


#closed.active .card .wish {
  background: rgba(255, 220, 139, 0.15) !important;
  border: 1px solid rgba(255, 220, 139, 0.4) !important;
  padding: 12px 20px;
  border-radius: 12px;
  margin-top: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
}

#closed.active .card .wish:hover {
  background: rgba(255, 220, 139, 0.3) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


.tabs {
  display: flex !important;
  gap: 25px !important; 
  margin-bottom: 30px !important;
  flex-wrap: wrap !important;
}

.tab {
  display: inline-block !important;
  padding: 16px 32px !important; 
  font-size: 18px !important;   
  font-weight: 600 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 220, 139, 0.3) !important;
  transition: all 0.3s ease !important;
}

.tab:hover, .tab.active {
  background: linear-gradient(135deg, #f5c352, #e09f2d) !important;
  color: #1a1005 !important;
  border-color: rgba(255, 215, 130, 0.9) !important;
  box-shadow: 0 6px 20px rgba(245, 195, 82, 0.4) !important;
  transform: translateY(-2px) !important;
}
/* Confetti */
.confetti-layer { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.confetti-layer i { position: absolute; top: -30px; font-style: normal; font-size: 22px; animation: fall 3.8s linear forwards; }

/* Animations */
@keyframes enter { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes glow {
  from { filter: drop-shadow(0 0 12px rgba(255, 193, 67, .35)); }
  to { filter: drop-shadow(0 0 30px rgba(255, 193, 67, .8)); }
}
@keyframes pop { 0% { transform: scale(.7); opacity: .3; } 65% { transform: scale(1.16); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fall { to { transform: translateY(110vh) rotate(600deg); opacity: 0; } }
@keyframes giftShake { 0%, 100% { transform: rotate(-2deg) translateX(-2px); } 50% { transform: rotate(2deg) translateX(2px); } }
@keyframes lidOpen { 0% { transform: rotateX(0) translateY(0); } 100% { transform: rotateX(-72deg) translateY(-28px) translateZ(15px); } }
@keyframes giftPop { 0% { transform: scale(.96); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes moonBreath { from { opacity: .72; transform: scale(.985); } to { opacity: .9; transform: scale(1.025); } }
@keyframes starDrift { from { background-position: 0 0, 35px 54px; } to { background-position: 83px 166px, -92px 181px; } }
@keyframes patternMove { from { transform: translate(0, 0); } to { transform: translate(70px, 70px); } }
@keyframes lanternJourney { 0%, 100% { translate: 0 0; } 50% { translate: 0 -20px; } }
@keyframes lanternSway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes lanternPulse { from { opacity: .55; scale: .92; } to { opacity: 1; scale: 1.08; } }
@keyframes candleDance {
  0% { transform: scale(.82, .92) rotate(-4deg); opacity: .78; }
  35% { transform: scale(1.02, 1.08) rotate(3deg); opacity: 1; }
  68% { transform: scale(.9, 1) rotate(-2deg); opacity: .88; }
  100% { transform: scale(1.08, .94) rotate(4deg); opacity: .96; }
}
@keyframes goldShimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }

/* =========================================
   MOBILE RESPONSIVE FIX
   Burmese text + Wish Card
   ========================================= */

@media screen and (max-width: 600px) {

  /* Main screen */
  #wishScreen,
  #closed.active {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  /* Main cards */
  .result-card,
  .card,
  .draw-card {
    width: 100%;
    max-width: 100%;
    padding: 18px 12px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow-wrap: normal;
  }

  /* Burmese body text */
  .card .lead,
  .card .muted,
  .card p,
  #closed p,
  #closed .muted {
    font-size: 13px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    text-align: center;
    max-width: 100%;
    padding: 0;
    margin: 8px auto;
    word-break: normal !important;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
  }

  /* Wish message */
  .wish,
  .wish-box-inner {
    width: 100%;
    max-width: 100%;
    font-size: 13px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    text-align: center;
    padding: 12px 8px !important;
    margin: 12px auto !important;
    word-break: normal !important;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
  }

  /* Main title */
  #closedTitle,
  #wishTitle {
    display: block !important;
    width: 100%;
    max-width: 100%;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
    margin: 12px auto 18px !important;
    padding: 0 4px !important;
    box-sizing: border-box;
    color: #ffdf85;
    text-shadow:
      0 0 10px rgba(245, 195, 82, 0.8),
      0 0 20px rgba(255, 215, 130, 0.5);
    animation: wishFloat 3.5s ease-in-out infinite;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Title icons and emoji */
  #closedTitle span,
  #wishTitle span {
    display: inline !important;
    vertical-align: middle;
  }

  #closedTitle::before,
  #closedTitle::after,
  #wishTitle::before,
  #wishTitle::after {
    vertical-align: middle;
  }

  /* Buttons */
  .primary,
  .secondary,
  button {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 14px !important;
    padding: 12px 16px !important;
    margin-top: 10px;
  }

  /* Footer */
  .foot,
  .tiny,
  footer,
  small {
    font-size: 9px !important;
    line-height: 1.5 !important;
    max-width: 100%;
    padding: 0 4px;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* =========================================
   FINAL MOBILE FIX — WISH SCREEN (iPhone/Safari)
   Keep this block at the VERY END of style.css
   ========================================= */
@media screen and (max-width: 600px) {
  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
  }

  .app {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px 12px;
  }

  /* iOS viewport-safe wish page: allow the whole card to scroll */
  #wishScreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 24px 12px !important;
    display: none !important;
    place-items: center !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  #wishScreen.active {
    display: grid !important;
  }

  #wishScreen .wish-card-custom {
    position: relative !important;
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin: auto !important;
    padding: 22px 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #wishScreen .icon-circle {
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto 14px !important;
  }

  #wishScreen .eyebrow {
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    margin: 8px auto 16px !important;
  }

  /* Cancel the old nowrap rule: Burmese title must be allowed to wrap */
  #wishScreen #wishTitle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 24px !important;
    padding: 0 2px !important;
    font-family: "Noto Sans Myanmar", sans-serif !important;
    font-size: clamp(19px, 5.3vw, 25px) !important;
    font-weight: 700 !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: pretty;
    box-sizing: border-box !important;
  }

  #wishScreen .wish-box-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 18px !important;
    padding: 14px 10px !important;
    font-family: "Noto Sans Myanmar", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  #wishScreen .wish-box-inner strong {
    font-weight: 700 !important;
    white-space: normal !important;
  }

  #wishScreen .secondary.wide,
  #wishScreen button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 16px auto 0 !important;
    padding: 13px 12px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* Closed screen uses the same mobile-safe card width */
  #closed.active {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 24px 12px !important;
    display: grid !important;
    place-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #closed.active .card {
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin: auto !important;
    padding: 22px 14px !important;
    box-sizing: border-box !important;
  }

  #closedTitle {
    white-space: normal !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word !important;
  }

  #closed.active .muted,
  #closed.active .wish {
    font-family: "Noto Sans Myanmar", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
    letter-spacing: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}