:root{
  --pink:#ff2d87; --hot:#d6246e; --blush:#ffd6e7; --rose:#ffeef5; --gold:#f5c542; --gold2:#e0a920;
  --ink:#3a0d22; --plum:#5b1037; --green:#009246; --red:#ce2b37; --white:#fff;
  --r:22px; --shadow:0 10px 30px rgba(120,10,60,.18);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:
  radial-gradient(1200px 600px at 110% -10%,#ffe08a55,transparent 60%),
  radial-gradient(900px 600px at -20% 30%,#ff7ab855,transparent 60%),
  linear-gradient(180deg,#fff0f6 0%,#ffe3ef 50%,#fff6e0 100%);
  background-attachment:fixed;padding-bottom:calc(88px + var(--safe-b));overflow-x:hidden}
h1,h2,h3{margin:0}
.script{font-family:Pacifico,cursive;font-weight:400}
.serif{font-family:"Playfair Display",serif}
main{max-width:560px;margin:0 auto;padding:16px 16px 24px;position:relative;z-index:2}
.boot{font-size:64px;text-align:center;margin-top:40vh;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.floaties{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.floaties span{position:absolute;bottom:-60px;font-size:26px;opacity:.55;animation:floatUp linear infinite}
@keyframes floatUp{to{transform:translateY(-120vh) rotate(360deg)}}
.flag{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--green) 0 33%,#fff 33% 66%,var(--red) 66%);box-shadow:0 2px 6px #0002}

/* Hero */
.hero{position:relative;border-radius:30px;padding:26px 20px 20px;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,#ff2d87 0%,#c2185b 55%,#7b1046 100%);box-shadow:var(--shadow)}
.hero:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 20deg,#ffffff14 20deg 40deg,transparent 40deg 60deg,#ffffff14 60deg 80deg,transparent 80deg);animation:spin 40s linear infinite}
.hero > *{position:relative}
.hero .kicker{letter-spacing:.25em;text-transform:uppercase;font-size:11px;font-weight:800;color:var(--gold)}
.hero h1{font-family:Pacifico,cursive;font-weight:400;font-size:44px;line-height:1.05;margin:8px 0 4px;text-shadow:0 3px 0 #7b1046,0 6px 20px #0004}
.hero h1 .gold{color:var(--gold);display:block;font-size:52px}
.hero .sub{opacity:.95;font-weight:600}
.hero .skyline{display:block;width:100%;height:auto;margin-top:12px;opacity:.95}
.ring{position:absolute;right:14px;top:14px;font-size:38px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-8deg)}}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.countdown div{background:#ffffff26;border:1px solid #ffffff55;border-radius:16px;padding:10px 4px;text-align:center;backdrop-filter:blur(4px)}
.countdown b{display:block;font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.countdown small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blush)}
.cd-msg{margin-top:12px;font-weight:800;text-align:center;font-size:18px;color:var(--gold)}

/* Cards */
.card{background:#ffffffe8;border-radius:var(--r);padding:16px;margin-top:14px;box-shadow:var(--shadow);border:1px solid #fff}
.card h2{font-family:"Playfair Display",serif;font-size:22px;color:var(--plum);margin-bottom:8px}
.card h3{font-size:16px;color:var(--plum)}
.title{display:flex;align-items:center;gap:10px;margin:8px 2px 4px}
.title h1{font-family:Pacifico,cursive;font-weight:400;font-size:34px;color:var(--hot);text-shadow:0 2px 0 #fff}
.title .em{font-size:34px}
.lead{margin:2px 2px 6px;color:#7a3b58;font-size:14px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.tile{display:block;text-decoration:none;color:var(--ink);background:#fff;border-radius:20px;padding:14px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .15s}
.tile:active{transform:scale(.96)}
.tile .ic{font-size:30px}
.tile b{display:block;margin-top:6px;font-size:15px}
.tile small{color:#9a5577;font-size:12px}
.tile:after{content:"";position:absolute;right:-20px;bottom:-20px;width:70px;height:70px;border-radius:50%;background:var(--blush);opacity:.6}
.tile.gold:after{background:#ffe9a8}
.muted{color:#9a5577;font-size:13px}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--blush);color:var(--hot);letter-spacing:.04em}
.pill.warn{background:#fff1c2;color:#8a5a00}
.pill.ex{background:#e9e1ff;color:#5530c7}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:8px}
.grow{flex:1}

/* Buttons & forms */
.btn{appearance:none;border:0;border-radius:14px;padding:12px 16px;font:700 15px Poppins,sans-serif;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--hot));box-shadow:0 6px 16px #d6246e55;text-decoration:none;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn:active{transform:scale(.97)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);box-shadow:0 6px 16px #e0a92055}
.btn.ghost{background:#fff;color:var(--hot);box-shadow:inset 0 0 0 2px var(--blush)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:12px}
.btn.block{width:100%}
.btn.danger{background:#fff;color:#b00020;box-shadow:inset 0 0 0 2px #ffd0d8}
.btn[disabled]{opacity:.5}
input,select,textarea{width:100%;font:16px Poppins,sans-serif;padding:12px 14px;border-radius:14px;border:2px solid var(--blush);background:#fff;color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--pink)}
textarea{min-height:110px;resize:vertical}
label.lbl{display:block;font-weight:700;font-size:13px;margin:12px 0 6px;color:var(--plum)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--blush);background:#fff;border-radius:99px;padding:8px 12px;font:600 14px Poppins;color:var(--plum);cursor:pointer}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff}

/* Gate */
.gate{min-height:82vh;display:flex;flex-direction:column;justify-content:center;text-align:center}
.gate .big{font-size:72px;animation:bob 2.4s ease-in-out infinite}
.gate h1{font-family:Pacifico,cursive;font-weight:400;font-size:40px;color:var(--hot);line-height:1.1}
.gate input{text-align:center;font-size:22px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin:16px 0 10px}

/* Plan */
.daytabs{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.daytabs::-webkit-scrollbar{display:none}
.daytab{flex:0 0 auto;border:0;border-radius:18px;padding:10px 14px;background:#fff;box-shadow:var(--shadow);font:700 14px Poppins;color:var(--plum);text-align:left}
.daytab small{display:block;font-weight:600;color:#9a5577;font-size:11px}
.daytab.on{background:linear-gradient(135deg,var(--pink),var(--hot));color:#fff}
.daytab.on small{color:var(--blush)}
.timeline{position:relative;margin-top:6px;padding-left:22px}
.timeline:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(var(--pink),var(--gold))}
.stop{position:relative;background:#fff;border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.stop:before{content:"";position:absolute;left:-20px;top:18px;width:13px;height:13px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 2px var(--pink)}
.stop .time{font-size:12px;font-weight:800;color:var(--hot);letter-spacing:.05em;text-transform:uppercase}
.stop h3{font-family:"Playfair Display",serif;font-size:19px;margin:2px 0 4px}
.stop p{margin:0 0 10px;font-size:14px;color:#5e2a43}
.daybanner{border-radius:22px;padding:16px;color:#fff;background:linear-gradient(135deg,#7b1046,#d6246e);box-shadow:var(--shadow);margin-bottom:12px}
.daybanner .e{font-size:34px}
.daybanner h2{font-family:Pacifico,cursive;font-weight:400;font-size:28px}

/* Kasse */
.bal{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--blush);font-weight:600}
.bal:last-child{border:0}
.pos{color:var(--green)} .neg{color:var(--red)}
.transfer{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#fff,#fff6db);border-radius:14px;padding:12px;margin-top:8px;font-weight:700;box-shadow:inset 0 0 0 2px #ffe9a8}
.transfer .arrow{color:var(--hot);font-size:20px}
.exp{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #fde4ef}
.exp .amt{font-weight:800;color:var(--plum);white-space:nowrap}
.exp small{display:block;color:#9a5577}
.bigsum{font-size:34px;font-weight:800;color:var(--hot);font-family:"Playfair Display",serif}

/* Bingo */
.bingo{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.cell{aspect-ratio:1;border:0;border-radius:14px;background:#fff;box-shadow:0 4px 10px #c2185b22;padding:3px;font:600 9px/1.1 Poppins;letter-spacing:-.2px;color:var(--plum);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;cursor:pointer;hyphens:manual;overflow-wrap:break-word}
.cell.done{background:linear-gradient(135deg,var(--pink),var(--hot));color:#fff}
.cell.done:after{content:"✓";position:absolute;right:4px;top:2px;font-size:14px;color:var(--gold);font-weight:800}
.cell.free{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);font-size:11px;font-weight:800}
.cell.win{animation:pulse 1s ease-in-out infinite}
.cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.cell span{position:relative}
@keyframes pulse{50%{transform:scale(1.06);box-shadow:0 0 0 3px var(--gold)}}
.progress{height:14px;border-radius:99px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 2px var(--blush)}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--gold));border-radius:99px;transition:width .6s}

/* Fotos */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.gallery button{border:0;padding:0;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--blush);position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .tag{position:absolute;left:4px;bottom:4px;font-size:10px;background:#000a;color:#fff;border-radius:8px;padding:1px 6px}
.upload{display:flex;flex-direction:column;align-items:center;gap:6px;border:3px dashed var(--pink);border-radius:20px;padding:20px;background:#fff9;text-align:center;cursor:pointer;color:var(--hot);font-weight:800}
.upload .ic{font-size:40px}

/* Quiz & Polls */
.opt{display:block;width:100%;text-align:left;margin-top:8px;border:2px solid var(--blush);background:#fff;border-radius:14px;padding:12px 14px;font:600 15px Poppins;color:var(--ink);cursor:pointer;position:relative;overflow:hidden}
.opt .bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ffd6e7,#ffeab0);transition:width .6s;z-index:0}
.opt > span{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px}
.opt.mine{border-color:var(--pink)}
.opt.right{border-color:var(--green);background:#e8f8ee}
.opt.wrong{border-color:var(--red);background:#fdeaea}
.lb{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--blush)}
.lb .pos{width:30px;text-align:center;font-size:20px}

/* Infos */
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #fde4ef;cursor:pointer}
.check .box{flex:0 0 26px;height:26px;border-radius:9px;border:2px solid var(--pink);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.check.on .box{background:var(--pink)}
.check.on .txt{text-decoration:line-through;color:#b07a95}
.check small{display:block;color:#9a5577}
.sos{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--blush)}
.sos a{font-weight:800;color:var(--hot);text-decoration:none;font-size:17px}
.sos.top a{font-size:26px;color:var(--red)}

/* Nav */
#nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-b));width:min(540px,calc(100% - 20px));z-index:40;
  display:grid;grid-template-columns:repeat(7,1fr);background:#ffffffee;backdrop-filter:blur(12px);border-radius:24px;padding:6px;box-shadow:0 10px 30px #7b104633;border:1px solid #fff}
#nav a{position:relative;display:flex;flex-direction:column;align-items:center;font-size:10px;font-weight:700;color:#9a5577;text-decoration:none;padding:6px 0;border-radius:16px}
#nav a span{font-size:21px;line-height:1.2}
#nav a.on{background:linear-gradient(135deg,var(--pink),var(--hot));color:#fff}

#toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translate(-50%,30px);background:var(--plum);color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;font-size:14px;opacity:0;transition:.3s;z-index:60;max-width:90%;text-align:center;pointer-events:none}
body.in-chat #toast{bottom:calc(210px + var(--safe-b))}
#toast.show{opacity:1;transform:translate(-50%,0)}
#modal{position:fixed;inset:0;z-index:70;background:#3a0d22b3;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
#modal .sheet{background:#fff;width:100%;max-width:560px;border-radius:26px 26px 0 0;padding:20px 18px calc(20px + var(--safe-b));max-height:90vh;overflow:auto;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
#modal .sheet h2{font-family:"Playfair Display",serif;color:var(--plum);font-size:22px;margin-bottom:8px}
.photo-full{width:100%;border-radius:16px;display:block}
.celebrate{text-align:center;padding:10px 0}
.celebrate .big{font-family:Pacifico,cursive;font-size:64px;color:var(--hot);animation:bob 1s ease-in-out infinite;text-shadow:0 4px 0 var(--gold)}
.mt{margin-top:12px}.mt2{margin-top:20px}
.hidden{display:none!important}
[hidden]{display:none!important}

.cell span{display:flex;flex-direction:column;align-items:center;gap:2px}
.cell .ce{font-style:normal;font-size:20px;line-height:1}
.cell.free .ce{font-size:22px}
.hero .kicker{padding-right:48px}

#nav .badge{position:absolute;top:1px;right:calc(50% - 22px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--gold);color:var(--ink);font:800 10px/18px Poppins;text-align:center;box-shadow:0 0 0 2px #fff;animation:bob 1.6s ease-in-out infinite}
body.in-chat{padding-bottom:calc(200px + var(--safe-b))}
.chatlist{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.chat-empty{text-align:center;padding:40px 10px;background:#fff9;border-radius:var(--r)}
.chat-day{text-align:center;margin:10px 0 4px}
.chat-day span{background:#ffffffcc;color:#9a5577;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;box-shadow:0 2px 6px #c2185b1a}
.msg{max-width:80%;align-self:flex-start;background:#fff;border-radius:18px 18px 18px 6px;padding:8px 12px 6px;box-shadow:0 4px 12px #c2185b1f;word-wrap:break-word;overflow-wrap:anywhere}
.msg.own{align-self:flex-end;background:linear-gradient(135deg,var(--pink),var(--hot));color:#fff;border-radius:18px 18px 6px 18px}
.msg .who{font-size:12px;font-weight:800;color:var(--hot);margin-bottom:2px}
.msg .txt{font-size:15px;line-height:1.35}
.msg img{display:block;max-width:100%;width:240px;border-radius:12px;margin:2px 0 4px;cursor:pointer}
.msg .tm{font-size:10.5px;text-align:right;opacity:.7;margin-top:2px}
.msg.own .tm{color:#ffe3ef;opacity:.9}
.composer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--safe-b));width:min(540px,calc(100% - 20px));z-index:39;background:#ffffffee;backdrop-filter:blur(12px);border-radius:22px;padding:6px 8px 8px;box-shadow:0 8px 24px #7b104633;border:1px solid #fff}
.emojis{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.emojis::-webkit-scrollbar{display:none}
.emojis button{flex:0 0 auto;border:0;background:none;font-size:22px;padding:2px 5px;cursor:pointer}
.crow{display:flex;gap:6px;align-items:flex-end}
.crow textarea{min-height:44px;max-height:120px;padding:10px 12px;border-radius:16px;resize:none;line-height:1.3}
.cbtn{flex:0 0 44px;height:44px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--rose);cursor:pointer}
.cbtn.send{background:linear-gradient(135deg,var(--pink),var(--hot));color:#fff;font-size:18px;box-shadow:0 4px 12px #d6246e55}
.pend{display:flex;align-items:center;gap:8px;padding:4px;margin-bottom:6px;background:var(--rose);border-radius:12px;font-size:13px;font-weight:600}
.pend img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.pend button{margin-left:auto;border:0;background:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer}
.mdel{border:0;background:none;font-size:12px;padding:0 0 0 4px;cursor:pointer;opacity:.85}

.prize-card{background:linear-gradient(135deg,#fff,#fff3cf);box-shadow:var(--shadow),inset 0 0 0 2px #ffe08a}
.kicker{letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-weight:800;color:var(--gold2)}
.crown-card{text-align:center;background:linear-gradient(160deg,#ff2d87,#7b1046);color:#fff}
.crown-card h2{color:#fff;font-family:Pacifico,cursive;font-weight:400;font-size:34px;margin:2px 0}
.crown-card .kicker{color:var(--gold)}
.crown-big{font-size:54px;animation:bob 1.8s ease-in-out infinite}
.crown-xl{font-size:96px;animation:bob 1.2s ease-in-out infinite;filter:drop-shadow(0 6px 12px #e0a92088)}
.prize-reveal{margin-top:14px;padding:14px;border-radius:18px;background:linear-gradient(135deg,#fff6d6,#ffe08a);font-size:15px;box-shadow:inset 0 0 0 2px var(--gold)}
.prize-reveal b{font-size:19px;color:var(--plum)}
.chips:has(.chip[data-view]){flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px 6px;scrollbar-width:none}
.chip[data-view]{white-space:nowrap;flex:none}
.lbb{width:100%;background:none;border:0;border-bottom:1px dashed var(--blush);font:inherit;color:inherit;text-align:left;cursor:pointer}
.lbb .grow{display:flex;flex-direction:column}
.lbb small{color:var(--muted,#8a6a7a);font-size:12px}
.firstbingo{background:#fff3cf;border-radius:12px;padding:8px 12px;font-size:13px;margin:0 0 6px}
.bingo.readonly .cell:not(.done){opacity:.75}

.cell{position:relative}
.cell.locked{filter:grayscale(1);opacity:.55}
.cell.claimed{box-shadow:0 0 0 3px var(--gold),0 6px 16px #e0a92066;animation:bob 1.6s ease-in-out infinite}
.cell .lock{position:absolute;inset:auto 2px 2px 2px;background:#2a0f1fcc;color:#fff;border-radius:8px;font:700 8px/1.15 Poppins;font-style:normal;padding:2px 1px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cell.locked .lock{filter:none}
.myclaim{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;cursor:pointer;background:linear-gradient(135deg,#fff6d6,#ffe08a);box-shadow:var(--shadow),inset 0 0 0 2px var(--gold);font:inherit;color:var(--plum)}
.myclaim .ce{font-size:18px;font-style:normal;margin-right:4px}
.cd{font:800 15px Poppins;color:var(--pink);font-variant-numeric:tabular-nums}
.cd.big{font-size:30px}
.claims-card .claim-row{padding:10px 0;border-bottom:1px dashed var(--blush)}
.claims-card .claim-row:last-child{border:0}
.claims-card .cr-top{display:flex;justify-content:space-between;align-items:center}
.claims-card .ce{font-style:normal;margin-right:4px}
.claims-card p{margin:4px 0;font-size:14px}
.claims-card.for-bride{background:linear-gradient(160deg,#fff,#ffe4f0);box-shadow:var(--shadow),inset 0 0 0 2px var(--pink)}
.lockinfo{background:#fff3cf;border-radius:12px;padding:8px 12px;font-size:14px}
.msg.sys{align-self:center;max-width:92%;background:#fff6d6;border:1px solid #ffe08a;text-align:center;border-radius:16px}
.msg.sys .tm{text-align:center}
.shots{font-size:64px;animation:bob 1.2s ease-in-out infinite}
.pause-note{font-size:13px;color:var(--muted,#8a6a7a)}
