/* Mannala Pils QR menu, Christmas edition (noel.js). Everything is scoped to
   .app.noel, so the normal menu is untouched while the switch is off. */
.app.noel { --sapin: #17673a; --gold: #f0b93a; background: linear-gradient(90deg, #17673a14 50%, transparent 0) 0 0 / 28px 28px, linear-gradient(#c8141f12 50%, transparent 0) 0 0 / 28px 28px, #fffaf0; }
@media (min-width: 900px) { .app.noel { box-shadow: 10px 10px 0 var(--sapin); } }

/* Santa hat, garland, falling snow, hanging baubles, holly on the labels */
.n-hat { position: absolute; pointer-events: none; overflow: visible; }
.n-hat-logo { left: 6px; top: calc(env(safe-area-inset-top, 0px) - 1px); width: 34px; transform: rotate(-22deg); z-index: 2; }
.n-garland { position: absolute; left: 0; right: 0; bottom: -21px; height: 20px; display: flex; justify-content: space-around; align-items: flex-start; padding: 0 6px; pointer-events: none; }
.n-garland::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 10px; border-bottom: 2px solid #4a3a2e; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.n-bulb { position: relative; top: 5px; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c); border: 1.5px solid #111; box-shadow: 0 0 8px 2px var(--c); animation: n-twinkle 1.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes n-twinkle { 50% { opacity: .4; box-shadow: none; } }
.n-snow { position: absolute; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.n-flake { position: absolute; top: -24px; font: 400 var(--s)/1 "Libre Franklin", sans-serif; color: #fff; text-shadow: 1px 1px 0 #111, -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111; opacity: .85; animation: n-fall var(--t) linear infinite; animation-delay: var(--d); }
@keyframes n-fall { to { transform: translate(var(--x), 110vh) rotate(200deg); } }
.noel .hub { position: relative; }
.n-baubles { position: absolute; right: 14px; top: 0; display: flex; gap: 12px; pointer-events: none; z-index: 1; }
.n-bauble { position: relative; width: 2px; height: var(--l); background: #111; transform-origin: top center; animation: n-sway 3s ease-in-out infinite; animation-delay: var(--d); }
.n-bauble::after { content: ""; position: absolute; left: 50%; bottom: -19px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffffffa6 0 3px, transparent 4px), var(--c); border: 2.5px solid #111; }
.n-bauble::before { content: ""; position: absolute; left: 50%; bottom: -3px; width: 9px; height: 5px; margin-left: -4.5px; background: var(--gold); border: 2px solid #111; border-radius: 2px; z-index: 1; }
@keyframes n-sway { 50% { transform: rotate(7deg); } }
.noel .kick::before { content: ""; display: inline-block; width: 22px; height: 13px; margin-right: 6px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M20 12C14 2 6 4 2 8c4 1 4 5 1 7 6 3 12 2 17-3z' fill='%2317673a' stroke='%23111' stroke-width='2'/%3E%3Cpath d='M20 12c6-10 14-8 18-4-4 1-4 5-1 7-6 3-12 2-17-3z' fill='%2317673a' stroke='%23111' stroke-width='2'/%3E%3Ccircle cx='17' cy='14' r='3.2' fill='%23c8141f' stroke='%23111' stroke-width='1.8'/%3E%3Ccircle cx='23' cy='14' r='3.2' fill='%23c8141f' stroke='%23111' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='9.5' r='3.2' fill='%23c8141f' stroke='%23111' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain; }
.noel .hub > div:first-of-type .kick, .noel .hub > .kick { margin-right: 76px; }

/* Snow resting on every card: menu items, home buttons, bubbles, panels */
/* « Tapis de neige »: a thick, uneven snow bank dripping over each card's top edge */
.noel :is(.card, .act, .bub, .promo, .ev, .whoq, .n-mini, .n-cal, .n-scard, .n-sweater)::before { content: ""; position: absolute; left: -10px; right: -10px; top: -21px; height: 36px; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M6 24C1 22 1 12 9 10C14 3 26 2 34 8C44 1 60 1 71 7C83 2 96 3 105 9C117 2 133 2 143 7C155 1 170 2 181 8C190 4 199 9 196 17C199 21 197 27 192 26C188 25 189 19 185 19H131C129 19 128 28 122 28C116 28 116 19 111 19H61C59 19 58 25 53 25C48 25 48 19 43 19H17C15 19 13 26 9 26C7 26 6 25 6 24Z' fill='white' stroke='%23111' stroke-width='2.4' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M10 15C34 13 64 14 96 13C132 12 162 14 190 14' fill='none' stroke='%23cfe6f5' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.noel :is(.act, .promo, .ev, .whoq) { position: relative; }
.noel .cards { gap: 24px; padding-top: 12px; }
.noel .acts { gap: 26px; }

/* Home: calendar shortcut + party request + gift a round */
.n-cal { position: relative; display: flex; gap: 12px; align-items: center; text-align: left; background: var(--sapin); color: var(--cream); border: 3px solid #111; border-radius: 18px; box-shadow: 5px 5px 0 #111; padding: 14px; }
.n-cal b { display: block; font: 400 1.3rem/1.05 Anton, Impact, sans-serif; text-transform: uppercase; }
.n-cal span span { font-size: .85rem; opacity: .9; }
.n-calnum { position: relative; flex: none; width: 58px; height: 58px; display: grid; place-items: center; font: 400 1.9rem/1 Anton, Impact, sans-serif; background: var(--red); border: 3px solid #111; border-radius: 14px; transform: rotate(-6deg); }
.n-hat-cal { right: -16px; top: -21px; width: 40px; transform: rotate(16deg); }
.n-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.n-mini { position: relative; text-align: left; background: #fff; border: 3px solid #111; border-radius: 16px; box-shadow: 4px 4px 0 #111; padding: 14px 12px 12px; display: grid; gap: 5px; align-content: start; }
.n-mini b { font: 400 1.05rem/1.05 Anton, Impact, sans-serif; text-transform: uppercase; }
.n-mini > span:not(.tag) { font-size: .78rem; color: var(--mut); }
.n-mini .n-soon { position: static; justify-self: start; }
.n-soiree { background: #fff8e6; }
.n-hat-mini { right: -12px; top: -20px; width: 38px; transform: rotate(16deg); z-index: 3; }

/* Advent calendar: wrapped presents with a real lid */
.n-demo { display: flex; align-items: center; gap: 8px; align-self: flex-start; background: #111; color: var(--yel); border-radius: 999px; padding: 5px 6px 5px 12px; font: 400 .95rem/1 Bangers, cursive; letter-spacing: .06em; }
.n-demo button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--yel); background: transparent; color: var(--yel); font: 700 1rem/1 "Libre Franklin", sans-serif; }
.n-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 12px; padding: 16px 4px 14px; }
.n-door { position: relative; aspect-ratio: 1; max-width: 100%; padding: 0; color: #111; border: 3px solid #111; border-radius: 8px; box-shadow: 3px 3px 0 #111;
  --rib: linear-gradient(90deg, transparent 41%, #111 41% 43%, var(--r) 43% 57%, #111 57% 59%, transparent 59%), linear-gradient(transparent 31%, #111 31% 33%, var(--r) 33% 45%, #111 45% 47%, transparent 47%);
  --paper: radial-gradient(circle, #ffffff33 1.6px, transparent 2.2px) 0 0 / 11px 11px, var(--c);
  background: var(--rib), var(--paper); }
.n-door::before { content: ""; position: absolute; top: -4px; left: -7px; right: -7px; height: 32%; background: var(--rib), var(--paper); border: 3px solid #111; border-radius: 6px; box-shadow: 0 3px 0 #0000004d; transition: transform .3s; }
.n-bow { position: absolute; left: 50%; top: -18px; width: 0; height: 0; z-index: 1; transition: transform .3s; }
.n-bow::before, .n-bow::after { content: ""; position: absolute; top: 0; width: 18px; height: 13px; background: var(--r); border: 2.5px solid #111; border-radius: 60% 40% 60% 40%; }
.n-bow::before { right: -1px; transform: rotate(-24deg); transform-origin: right center; }
.n-bow::after { left: -1px; transform: rotate(24deg) scaleX(-1); transform-origin: left center; }
.n-bow i { position: absolute; left: -5px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--r); border: 2.5px solid #111; z-index: 1; }
.n-gtag { position: absolute; right: 6%; bottom: 8%; min-width: 30px; padding: 3px 4px 1px; background: var(--cream); border: 2.5px solid #111; border-radius: 7px 7px 7px 2px; font: 400 1.15rem/1 Anton, Impact, sans-serif; transform: rotate(-8deg); box-shadow: 2px 2px 0 #111; }
.n-door.today { z-index: 1; animation: n-wiggle 1.6s ease-in-out infinite; box-shadow: 4px 4px 0 #111, 0 0 0 4px var(--yel); }
.n-door.today .n-gtag { background: var(--yel); }
.n-todaytag { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); white-space: nowrap; font: 400 .62rem/1 Bangers, cursive; letter-spacing: .08em; background: var(--yel); border: 2px solid #111; border-radius: 6px; padding: 2px 4px 1px; }
.n-door.past { filter: saturate(.45) brightness(1.12); box-shadow: 1px 1px 0 #111; }
.n-door.past::before { transform: translate(6px, -9px) rotate(9deg); }
.n-door.past .n-bow { transform: translate(10px, -12px) rotate(9deg); }
.n-door.past .n-gtag::after { content: " ✓"; font: 800 .75rem/1 "Libre Franklin", sans-serif; color: var(--sapin); }
.n-door.shake { animation: n-shake .4s; }
@keyframes n-wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg) scale(1.05); } 80% { transform: rotate(5deg) scale(1.05); } 90% { transform: rotate(-3deg); } }
@keyframes n-shake { 25% { transform: translateX(-5px) rotate(-3deg); } 75% { transform: translateX(5px) rotate(3deg); } }

/* Opening: the lid flies off, confetti bursts, the surprise card flips in */
.n-reveal { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 20px; background: #111c; }
.n-card { position: relative; width: 100%; max-width: 380px; background: #fff; border: 4px solid #111; border-radius: 22px; box-shadow: 8px 8px 0 var(--red); padding: 22px 18px 18px; display: grid; gap: 12px; text-align: center; animation: n-open .55s cubic-bezier(.3,1.5,.5,1) .12s both; transform-origin: left center; }
@keyframes n-open { from { transform: perspective(700px) rotateY(-85deg); opacity: 0; } }
.n-card .kick { justify-self: center; }
.n-card h3 { margin: 0; font: 400 1.7rem/1.02 Anton, Impact, sans-serif; text-transform: uppercase; text-wrap: balance; }
.n-card p { margin: 0; color: var(--mut); }
.n-card .row { justify-content: center; margin-top: 4px; }
.n-num { position: relative; justify-self: center; width: 86px; height: 86px; display: grid; place-items: center; font: 400 3.4rem/1 Anton, Impact, sans-serif; color: var(--cream); background: var(--red); border: 3px solid #111; border-radius: 16px; transform: rotate(-5deg); }
.n-hat-num { right: -22px; top: -26px; width: 56px; transform: rotate(18deg); }
.n-fine { font-size: .78rem; }
.n-poplid { position: absolute; left: 50%; top: 40%; width: 128px; height: 36px; margin-left: -64px; z-index: 2; pointer-events: none; border: 3px solid #111; border-radius: 8px; background: linear-gradient(90deg, transparent 42%, #111 42% 44%, var(--gold) 44% 56%, #111 56% 58%, transparent 58%), var(--red); animation: n-lid .75s cubic-bezier(.3,.7,.4,1) forwards; }
@keyframes n-lid { to { transform: translate(80px, -280px) rotate(55deg); opacity: 0; } }
.n-burst { position: absolute; left: 50%; top: 44%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.n-burst i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; background: var(--c); border: 1.5px solid #111; border-radius: 2px; opacity: 0; animation: n-boom 1s cubic-bezier(.15,.8,.3,1) .12s forwards; }
.n-burst i:nth-child(3n) { border-radius: 50%; width: 9px; height: 9px; }
@keyframes n-boom { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--dist) * -1)) rotate(420deg); } }

/* Secret Santa, ugly sweater, New Year's Eve */
.n-scard { position: relative; background: #fff; border: 3px solid #111; border-radius: 20px; box-shadow: 6px 6px 0 #111; padding: 22px 16px 18px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.n-scard small { font: 400 1.05rem/1 Bangers, cursive; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.n-scard p { margin: 0; font-weight: 600; }
.n-big { position: relative; display: inline-block; font: 400 2.8rem/1 Anton, Impact, sans-serif; text-transform: uppercase; }
.n-big .n-hat { left: -18px; top: -28px; width: 50px; transform: rotate(-20deg); }
.n-sweaters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.n-sweater { position: relative; background: #fff; border: 3px solid #111; border-radius: 16px; box-shadow: 4px 4px 0 #111; padding: 12px 10px 10px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.n-sweater svg { width: 70px; height: 60px; }
.n-sweater b { font: 400 1.05rem/1 Anton, Impact, sans-serif; text-transform: uppercase; }
.n-sweater small { font-size: .75rem; color: var(--mut); }
.n-votes { width: 100%; height: 8px; border-radius: 99px; background: #0000001a; overflow: hidden; }
.n-votes i { display: block; height: 100%; background: var(--red); border-radius: inherit; transition: width .4s; }
.n-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.n-cd div { background: #111; color: var(--yel); border: 3px solid #111; border-radius: 14px; box-shadow: 4px 4px 0 var(--gold); padding: 10px 4px 8px; display: grid; justify-items: center; gap: 4px; }
.n-cd b { font: 400 2rem/1 Anton, Impact, sans-serif; font-variant-numeric: tabular-nums; }
.n-cd span { font: 400 .8rem/1 Bangers, cursive; letter-spacing: .06em; color: var(--cream); }
.n-resol { font: 400 1.5rem/1.1 Anton, Impact, sans-serif !important; text-transform: uppercase; text-wrap: balance; }

/* Party request form inside the menu's sheet */
.n-form { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.n-form h3 { margin: 4px 0 2px !important; }
.n-form label { display: grid; gap: 4px; font-weight: 700; font-size: .85rem; }
.n-form input, .n-form select, .n-form textarea { font: 500 1rem "Libre Franklin", sans-serif; color: #111; background: #fff; border: 3px solid #111; border-radius: 12px; padding: 9px 10px; min-width: 0; width: 100%; }
.n-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .n-snow, .n-poplid, .n-burst { display: none; }
  .n-bulb, .n-bauble, .n-door.today, .n-door.shake, .n-card { animation: none; }
  .n-door::before, .n-bow, .n-votes i { transition: none; }
}

/* Phones in dark mode: never let the browser lighten the ink text */
.app.noel { color: #111; color-scheme: only light; }
.noel :is(.n-scard, .n-sweater, .n-mini, .n-card, .n-form) { color: #111; }
.noel .n-resol, .noel .n-big, .noel .n-scard p { color: #111 !important; }
.noel .n-cal { color: #fffaf0; }

/* Christmas wheel */
.n-wheel { position: relative; width: min(100%, 320px); margin: 10px auto 0; aspect-ratio: 1; }
.n-wsvg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(5px 5px 0 #111); }
.n-wptr { position: absolute; left: 50%; top: -22px; width: 54px; transform: translateX(-50%); transform-origin: 50% 20%; z-index: 2; }
.n-wptr svg { display: block; width: 100%; }
.n-wheel.is-spinning .n-wptr { animation: n-tick .12s ease-in-out infinite alternate; }
@keyframes n-tick { from { transform: translateX(-50%) rotate(-9deg); } to { transform: translateX(-50%) rotate(9deg); } }
.n-wbulb { animation: n-twinkle 1.4s ease-in-out infinite; }
.n-wheel.is-spinning .n-wbulb { animation-duration: .35s; }
.n-hat-wheel { left: 50%; top: 50%; width: 58px; transform: translate(-58%, -112%) rotate(-12deg); z-index: 1; }
.n-wwin { overflow: visible; }
.n-wwin .n-burst { top: 50%; }
@media (prefers-reduced-motion: reduce) { .n-wheel.is-spinning .n-wptr, .n-wbulb { animation: none; } }
.n-wwin { gap: 20px; padding-top: 26px; }
.n-wwin .n-big .n-hat { left: -34px; top: -22px; width: 46px; }

.n-err { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fde1df; border: 2px solid #111; font-weight: 600; }

/* Bottle game (bottle.js), Christmas dress: snowy rim and fir wreath with bulbs
   around the table, snow on each coaster, candy-cane spin button. */
.noel .bgame .tbl { width: min(440px, calc(90vw - 52px)); box-shadow: 0 0 0 7px #fff, 0 0 0 10px #111, 0 0 0 22px var(--sapin), 0 0 0 25px #111, 0 12px 30px #0006; margin: 26px auto; }
.noel .bgame .tbl::before { content: ""; position: absolute; inset: -17px; border-radius: 50%; border: 6px dotted var(--yel); pointer-events: none; z-index: 1; animation: n-twinkle 1.6s ease-in-out infinite; }
.noel .bgame .cst::after { content: ""; position: absolute; left: 14%; right: 14%; top: -5%; height: 20%; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: radial-gradient(circle at 30% 60%, #fff 0 34%, transparent 35%), radial-gradient(circle at 62% 50%, #fff 0 38%, transparent 39%), radial-gradient(circle at 48% 70%, #fff 0 30%, transparent 31%); filter: drop-shadow(0 1px 0 #111) drop-shadow(0 -1px 0 #111); pointer-events: none; }
.noel .bgame .go:not(.take) { position: relative; background: repeating-linear-gradient(45deg, #c8141f 0 12px, #fffaf0 12px 24px); color: #111; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; border: 3px solid #111; }
.noel .bgame .go:not(.take)::before { content: ""; position: absolute; left: 6px; right: 6px; top: -13px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M6 24C1 22 1 12 9 10C14 3 26 2 34 8C44 1 60 1 71 7C83 2 96 3 105 9C117 2 133 2 143 7C155 1 170 2 181 8C190 4 199 9 196 17C199 21 197 27 192 26C188 25 189 19 185 19H131C129 19 128 28 122 28C116 28 116 19 111 19H61C59 19 58 25 53 25C48 25 48 19 43 19H17C15 19 13 26 9 26C7 26 6 25 6 24Z' fill='white' stroke='%23111' stroke-width='2.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .noel .bgame .tbl::before { animation: none; } }