:root{--ink:#192443;--muted:#798097;--blue:#338ee2;--pink:#e95792;--paper:#fffaf4;--line:#e9e3dc;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 0 100%,#dcefffaa,transparent 35%),radial-gradient(ellipse at 100% 100%,#ffe1ebaa,transparent 35%),var(--paper)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8166cf;outline-offset:4px}h1,h2,p{margin:0}h1,h2,.choice strong{font-family:Georgia,'Times New Roman',serif}h1{letter-spacing:-.045em;line-height:1.06}h2{letter-spacing:-.025em}.decor{position:fixed;width:340px;height:340px;border-radius:50%;filter:blur(65px);opacity:.2;pointer-events:none;z-index:-1}.decor-blue{background:#a8d8ff;left:-220px;top:0}.decor-pink{background:#ffb4cd;right:-220px;bottom:0}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.19em;color:var(--muted)}.mobile{max-width:440px;margin:0 auto;padding:44px 30px 30px;min-height:100svh;text-align:center}.mobile .event-title{font:600 15px Georgia,serif;margin:22px 0 28px}.mobile h1{font-size:48px}.intro{color:#697187;font-size:15px;line-height:1.65;margin:18px 0 26px}.mobile form{text-align:left}.mobile fieldset{display:grid;grid-template-columns:1fr 1fr;gap:14px;border:0;padding:0;margin:0 0 28px}.choice{position:relative;height:151px;border:2px solid transparent;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;cursor:pointer;transition:.2s}.boy{color:var(--blue);background:#e7f3ff}.girl{color:var(--pink);background:#ffe9f1}.choice .heart{font:52px/1 Georgia,serif;filter:drop-shadow(0 6px 5px #ffffff)}.choice strong{font-size:23px}.choice input{position:absolute;opacity:0;width:1px;height:1px}.choice .check{position:absolute;right:10px;top:10px;border-radius:50%;width:23px;height:23px;background:currentColor;display:none}.choice .check::first-letter{color:white}.choice:has(input:checked){border-color:currentColor;box-shadow:0 5px 20px #ed619018}.choice:has(input:checked) .check{display:block;background:var(--pink);color:white}.choice.boy:has(input:checked) .check{background:var(--blue)}.choice:has(input:focus-visible){outline:3px solid #8166cf;outline-offset:3px}.choice:hover{transform:translateY(-2px)}label[for]{display:block;font-size:14px;margin:0 0 10px;font-weight:600}input[type=text],input:not([type]){display:block;width:100%;background:#fffdfb;border:1px solid #cbd1dc;border-radius:13px;padding:18px 16px;font-size:18px;color:var(--ink)}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:18px 20px;border-radius:13px;text-decoration:none;font-size:15px;font-weight:600}.primary{border:0;background:linear-gradient(110deg,#f47fab,#e95391);color:white;box-shadow:0 9px 22px #e9579220}.primary span{margin-left:auto;font-size:21px}.mobile .primary{margin-top:17px}.secondary{background:#fffdfa;border:1px solid #dea5bb;color:var(--ink)}.hint{font-size:12px;line-height:1.6;color:var(--muted);margin:17px 0;text-align:center}.signature{font:italic 21px/1.45 Georgia,serif;color:#8a91a1;margin-top:34px}.success-icon{width:94px;height:94px;margin:15px auto 28px;display:grid;place-items:center;font-size:52px;font-weight:300;color:white;background:linear-gradient(135deg,#ffacc6,#e65b94);border-radius:50%;box-shadow:0 0 0 14px #ffedf3}.pill{display:inline-block;margin-top:24px;padding:13px 25px;border-radius:99px;font-weight:600;background:#ffe5ef;color:var(--pink)}.pill.boy{background:#e7f3ff;color:var(--blue)}.leading{background:#fffefc;border:1px solid var(--line);padding:20px;border-radius:16px;box-shadow:0 6px 22px #18244005;margin:24px 0}.leading span,.leading strong{display:block}.leading span{font-size:12px;color:var(--muted);margin-bottom:9px}.leading strong{font-size:20px}.closed{padding:15px;border-radius:12px;background:#f3eee6;font-size:14px;line-height:1.6;margin-top:20px}.error{color:#b33249;font-size:14px;line-height:1.5;margin-top:15px}.error:empty,.connection:empty{display:none}.connection{font-size:12px;color:#b06c31;margin-top:8px}.hearts{font-size:60px;letter-spacing:-8px;margin:45px 0 28px}.hearts span{font:italic 19px Georgia;letter-spacing:0;vertical-align:middle;color:var(--muted)}.create h1{font-size:60px}.create .intro{margin-bottom:35px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}.loading{padding:30px;text-align:center;color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;background:var(--ink);color:white;padding:14px 22px;border-radius:14px;box-shadow:0 8px 30px #19244322;z-index:10;font-size:14px}#toast:empty{display:none}
/* A fixed viewport composition keeps the projection screen clear of scrolling. */
.screen{height:100svh;min-height:590px;padding:4vh 4vw 1.5vh;display:flex;flex-direction:column;gap:2.5vh;overflow:hidden}.screen header{display:flex;align-items:center;justify-content:space-between;gap:30px}.screen h1{font-size:clamp(34px,3.6vw,76px);margin:10px 0}.screen header p{font:clamp(15px,1.5vw,29px) Georgia,serif;color:#636a7d}.live{font-size:clamp(12px,1vw,20px);display:flex;align-items:center;gap:9px;white-space:nowrap}.dot{width:10px;height:10px;border-radius:50%;background:#40bd88;box-shadow:0 0 0 5px #40bd8810}.live.paused .dot{background:#c29465}.score-labels{display:flex;justify-content:space-between;margin-bottom:10px;font-size:clamp(18px,1.6vw,34px);font-weight:600}.score-labels b{margin:0 12px;font-size:1.3em}.score-labels span{font-size:.7em;font-weight:400;color:var(--muted)}.blue{color:var(--blue)}.pink{color:var(--pink)}.bar{display:flex;height:16px;border-radius:20px;overflow:hidden;background:#f2ede5}.bar>div{transition:width .7s ease;width:50%}#boy-bar{background:linear-gradient(90deg,#83c5fc,#3994e9)}#girl-bar{background:linear-gradient(90deg,#ee7ca6,#f4aac4)}#total{text-align:center;color:var(--muted);font-size:13px;margin-top:8px}.stage{display:grid;grid-template-columns:1fr clamp(180px,17vw,330px);gap:3vw;flex:1;min-height:0;align-items:center}.cloud-wrap{height:100%;position:relative;min-height:160px}#cloud{position:absolute;inset:0 0 18px}#cloud .word{position:absolute;line-height:1.05;font-family:Georgia,'Times New Roman',serif;font-weight:700;white-space:nowrap;animation:appear .65s ease both;letter-spacing:-.035em}#cloud .word.boy{color:var(--blue);background:none}#cloud .word.girl{color:var(--pink);background:none}#cloud .word.new{filter:drop-shadow(0 0 14px #ffd0e9)}@keyframes appear{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}#overflow{position:absolute;bottom:-6px;left:0;right:0;margin:0}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:17px;color:#8b92a1}#empty>span{font:100px/1 Georgia;color:#eab3c7}#empty h2{font-size:clamp(24px,2.5vw,48px);color:var(--ink)}#empty p{font-size:clamp(13px,1.2vw,22px)}.qr-card{background:#fffefd;border:1px solid #f1ebe3;padding:clamp(15px,1.5vw,29px);border-radius:24px;text-align:center;box-shadow:0 14px 45px #7966490d}.qr-card h2{font-size:clamp(20px,1.9vw,34px)}.qr-card img{display:block;width:100%;height:auto;aspect-ratio:1;margin:7px 0}.qr-card strong{font-size:clamp(16px,1.3vw,26px)}.qr-card p{font-size:clamp(12px,1vw,20px);line-height:1.5;margin-top:9px;color:#737b8f}.qr-card a{display:block;color:var(--muted);font-size:11px;margin-top:15px}.screen footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.winner{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:18px;border:1px solid #e9579214}.winner.boy{border-color:#338ee214}.crown{font-size:34px}.winner span:not(.crown),.overall span{display:block;font-size:clamp(11px,1vw,18px);margin-bottom:5px}.winner strong,.overall strong{display:block;font:700 clamp(17px,1.6vw,29px)/1.25 Georgia,serif;overflow-wrap:anywhere}.overall{padding:18px 12px}.overall span{color:var(--muted)}.screen-bottom{display:flex;align-items:center;justify-content:center;gap:20px;color:var(--muted);font-size:11px}.screen-bottom button{border:0;background:none;font-size:23px;color:var(--muted);padding:0 10px}.screen-bottom .connection{margin:0}.host{max-width:900px;padding:50px 25px;margin:auto}.host h1{font-size:48px;margin:20px 0}.host-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.host .hint{text-align:left}.host h2{margin-top:35px}.moderation-row{display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line)}.moderation-row strong{flex:1;overflow-wrap:anywhere}.moderation-row button{padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:#fff}.new-game{display:inline-block;margin-top:35px;font-size:14px}#host-total{font-size:23px;margin-top:24px}
@media(min-width:700px){.mobile{margin:35px auto;min-height:0;padding:40px 35px;background:#fffaf5d9;border:1px solid #eee7df;border-radius:30px;box-shadow:0 20px 70px #6651380a}}@media(max-width:800px){.screen{height:auto;min-height:100svh;padding:25px 20px;gap:22px;overflow:visible}.screen header{display:block}.live{margin-top:18px}.screen h1{font-size:35px}.stage{grid-template-columns:1fr}.cloud-wrap{height:360px}.qr-card{width:210px;margin:auto}.screen footer{grid-template-columns:1fr 1fr;gap:10px}.overall{grid-column:1/-1;text-align:center}.winner{padding:14px 10px;gap:8px}.screen-bottom{flex-wrap:wrap}.host-actions{grid-template-columns:1fr}.host h1{font-size:38px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
