/* 2026 QA Christmas Exchange Gift – app */
*{box-sizing:border-box}
html,body{margin:0}
body{background:#0D1833;color:#F7F1E3;font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#E8C170}
button{font:inherit}
[hidden]{display:none!important}
em{font-style:italic;color:#E8C170}

.app{position:relative;max-width:430px;margin:0 auto;overflow:hidden;
  min-height:max(100vh,760px);min-height:max(100dvh,760px);
  background:
    radial-gradient(ellipse 85% 50% at 50% 22%,#24396B 0%,rgba(36,57,107,0) 100%),
    linear-gradient(180deg,#13234A 0%,#0D1833 100%);}

/* ---------- decorations ---------- */
.deco{position:absolute;pointer-events:none}
.sky{inset:0;width:100%;height:100%}
.snow{inset:0;overflow:hidden}
.flake{position:absolute;top:0;border-radius:50%;background:#fff;animation:qa-snow linear infinite}
.hangers{top:0;right:0;width:390px;height:230px}
.hills{left:0;bottom:0;width:100%;height:150px}
.twinkle{animation:qa-twinkle 2.4s ease-in-out infinite}
.sway{animation:qa-sway 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}

/* the gift */
.gift{position:absolute;width:200px;height:190px;transform-origin:50% 100%}
.gift .body{position:absolute;left:12px;top:58px;width:176px;height:132px;border-radius:6px;
  background:radial-gradient(rgba(232,193,112,.45) 1.6px,rgba(0,0,0,0) 2.2px) 0 0/16px 16px,linear-gradient(135deg,#2A8E69,#155F45);
  box-shadow:0 22px 34px rgba(0,0,0,.4)}
.gift .body .ribbon{left:74px}
.gift .shade{position:absolute;left:0;top:0;width:100%;height:10px;background:rgba(0,0,0,.2)}
.gift .lid{position:absolute;left:0;top:20px;width:200px;height:46px;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s ease}
.gift .lid-face{position:absolute;inset:0;border-radius:6px;
  background:radial-gradient(rgba(232,193,112,.45) 1.6px,rgba(0,0,0,0) 2.2px) 0 0/16px 16px,linear-gradient(135deg,#34A57B,#1C7353);
  box-shadow:0 6px 10px rgba(0,0,0,.2)}
.gift .lid .ribbon{left:86px}
.ribbon{position:absolute;top:0;width:28px;height:100%;background:linear-gradient(90deg,#B98B3A,#F6DFA0 50%,#B98B3A)}
.loop{position:absolute;top:-38px;width:58px;height:44px;border:11px solid #E8C170;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.loop.l{left:44px;border-radius:50% 50% 10px 50%;transform:rotate(-18deg)}
.loop.r{left:98px;border-radius:50% 50% 50% 10px;transform:rotate(18deg)}
.knot{position:absolute;left:87px;top:-12px;width:26px;height:20px;border-radius:7px;background:linear-gradient(90deg,#B98B3A,#F6DFA0 50%,#B98B3A)}

/* ---------- layout ---------- */
.screen{position:relative;z-index:3;min-height:inherit;display:flex;flex-direction:column}
.welcome{padding:172px 28px 118px}
.pick{padding:20px 24px 44px}
.box{padding:84px 24px 32px}
.reveal{padding:190px 24px 48px}
.grow{flex-grow:1}

.topbar{position:absolute;top:16px;left:0;right:0;z-index:5;height:48px;padding:0 12px 0 20px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:19px;color:#F7F1E3;white-space:nowrap}
.userpill{display:flex;align-items:center;gap:2px;padding:0 4px 0 14px;border-radius:999px;background:rgba(19,35,74,.82);border:1px solid rgba(255,255,255,.18)}
.userpill{min-width:0;margin-left:10px}
.userpill span{font-size:14px;color:#D5DCEB;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{height:44px;padding:0 10px;border:0;background:transparent;color:#E8C170;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
@media (max-width:380px){.topbar{padding-left:16px}.brand{font-size:16px}.userpill{padding-left:10px;margin-left:8px}.userpill span{max-width:100px}}

/* ---------- type ---------- */
.eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.18em;color:#E8C170}
.eyebrow.big{font-size:17px;letter-spacing:.2em}
.center-text{text-align:center}
.title{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:56px;line-height:1;letter-spacing:-.01em;color:#F7F1E3}
.h2{margin:8px 0 0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:38px;line-height:1.02;color:#F7F1E3}
.lead{margin:18px 0 0;max-width:300px;font-size:17px;line-height:1.45;color:#C9D2E6;text-wrap:pretty}
.lead.small{margin-top:10px;font-size:15px}
.narrow{max-width:230px}
.note{margin:0;text-align:center;font-size:14px;line-height:1.4;color:#B9C3D9}

.pills{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(232,193,112,.4);font-size:14px;font-weight:700}

/* ---------- controls ---------- */
.btn{display:flex;align-items:center;justify-content:center;height:58px;border:0;border-radius:16px;background:#E8C170;color:#13234A;
  font-weight:800;font-size:18px;text-decoration:none;box-shadow:0 10px 24px rgba(232,193,112,.28);cursor:pointer;width:100%}
.btn:hover{background:#F0CF86;color:#13234A}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn:focus-visible,.back:focus-visible,.gift-btn:focus-visible,.linkbtn:focus-visible{outline:3px solid #F6DFA0;outline-offset:3px}
.welcome .actions{display:flex;flex-direction:column;gap:10px}

.back{width:44px;height:44px;margin-left:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#F7F1E3;display:flex;align-items:center;justify-content:center}
.pick-title{margin-top:150px;font-size:44px}
.pick form{display:flex;flex-direction:column;flex-grow:1}
.field{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:800;color:#E8C170}
.field label.again{margin-top:6px}
.input{width:100%;height:52px;border:1.5px solid #3A5185;border-radius:14px;padding:0 16px;font:600 17px 'Outfit',system-ui,sans-serif;color:#F7F1E3;background:#1A2C55;outline:none;appearance:none;-webkit-appearance:none}
.input:focus{border-color:#E8C170;box-shadow:0 0 0 3px rgba(232,193,112,.28)}
.input::placeholder{color:#9AA8C7}
.input option{color:#13234A;background:#fff}
.input.pin{letter-spacing:.4em}
.select-wrap{position:relative}
.select-wrap svg{position:absolute;right:16px;top:16px;pointer-events:none}
.hint{font-size:13px;color:#B9C3D9}
.hint.bad{color:#FF9C8F;font-weight:600}
.error{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:#4A1F2A;color:#FFD9D3;font-size:15px;font-weight:600}
.pick .btn{margin-top:24px}

/* ---------- box ---------- */
.gift-btn{position:relative;margin:36px auto 0;display:block;width:280px;height:290px;padding:0;border:0;background:transparent;cursor:pointer}
.gift-btn .glow{position:absolute;left:30px;top:40px;width:220px;height:220px;border-radius:50%;background:rgba(232,193,112,.22);animation:qa-pulse 2.6s ease-in-out infinite}
.gift-btn .burst{position:absolute;left:90px;top:60px;width:100px;height:100px;border-radius:50%;background:#F6DFA0;opacity:0}
.gift-btn .gift{left:40px;top:70px}
.gift-btn.shaking .gift{animation:qa-shake .85s ease-in-out}
.gift-btn.open .lid{transform:translate(40px,-140px) rotate(28deg);opacity:0}
.gift-btn.open .burst{animation:qa-burst .9s ease-out forwards}
.gift-hint{margin:0;align-self:center;font-size:16px;font-weight:800;color:#E8C170}

/* ---------- reveal ---------- */
.ticket{position:relative;width:300px;max-width:100%;align-self:center;margin-top:16px;border-radius:20px;background:#FBF6EA;color:#13234A;box-shadow:0 24px 40px rgba(0,0,0,.4);display:flex;flex-direction:column}
.ticket-top{padding:24px 24px 22px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ticket-for{margin-top:4px;font-size:13px;font-weight:800;letter-spacing:.18em;color:#8A6420}
.ticket-name{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:52px;line-height:1;color:#13234A;overflow-wrap:anywhere}
.perf{position:relative;height:2px}
.perf i{display:block;margin:0 24px;border-top:2px dashed #D8CDB4}
.perf::before,.perf::after{content:"";position:absolute;top:-13px;width:28px;height:28px;border-radius:50%;background:#172A54}
.perf::before{left:-14px}
.perf::after{right:-14px}
.ticket-stats{padding:18px 24px 8px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px}
.ticket-stats div{display:flex;flex-direction:column;gap:2px}
.ticket-stats span{font-size:12px;font-weight:800;letter-spacing:.12em;color:#6B5A35}
.ticket-stats strong{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:23px;color:#13234A;white-space:nowrap}
.ticket-note{margin:0;padding:6px 24px 22px;font-size:14px;line-height:1.4;font-weight:600;color:#4A4F63}
.card{margin-top:24px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:flex;gap:14px;align-items:flex-start}
.card div{display:flex;flex-direction:column;gap:4px}
.card strong{font-size:16px;font-weight:800}
.card span{font-size:15px;line-height:1.4;color:#C9D2E6}
.footer-note{margin:18px 0 0;text-align:center;font-size:13px;color:#B9C3D9}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.confetti i{position:absolute;top:0;border-radius:2px;transform:translateY(-60px);animation:qa-fall linear 1 forwards}

/* ---------- credit ---------- */
.credit{position:absolute;left:0;right:0;bottom:10px;z-index:4;margin:0;text-align:center;font-size:12px;font-weight:600;letter-spacing:.04em;color:#8D9BBB;pointer-events:none}
.view-welcome .credit,.view-box .credit{color:#3A5185}

/* ---------- motion ---------- */
.rise{animation:qa-rise .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes qa-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes qa-shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-7deg)}30%{transform:rotate(6deg)}45%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
@keyframes qa-pulse{0%,100%{transform:scale(.92);opacity:.5}50%{transform:scale(1.05);opacity:.9}}
@keyframes qa-burst{from{transform:scale(.2);opacity:.95}to{transform:scale(2.8);opacity:0}}
@keyframes qa-fall{from{transform:translateY(-60px) rotate(0)}to{transform:translateY(110vh) rotate(620deg)}}
@keyframes qa-rise{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes qa-snow{from{transform:translate(0,-20px)}to{transform:translate(18px,110vh)}}
@keyframes qa-twinkle{0%,100%{opacity:.9}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .flake,.twinkle,.sway,.gift-btn .glow,.rise{animation:none!important}
  .confetti{display:none}
}