@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--ink:#1b2a20;--green:#00663c;--lime:#e2ffc0;--line:#cde7b2;--muted:#58705e}*{box-sizing:border-box}body{margin:0;background:#f6ffea;color:var(--ink);font-family:Nunito,sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #00a862;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.wrap{max-width:1440px;margin:auto;padding:22px 4vw}.top{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font:600 24px Fredoka,sans-serif;color:var(--green);letter-spacing:.02em}.brand span{display:inline-grid;place-items:center;background:var(--green);color:white;border-radius:12px;width:39px;height:39px;margin-right:9px}.small{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.pill{display:inline-block;background:var(--lime);border-radius:100px;padding:8px 15px;color:var(--green);font-weight:900}.panel{background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px;box-shadow:0 10px 35px #467a2910}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:24px}.hero h1,h1,h2,h3{font-family:Fredoka,sans-serif;margin:0}.hero h1{font-size:clamp(38px,5.2vw,76px);line-height:1.04;color:var(--green);margin:18px 0}.lead{font-size:18px;line-height:1.5;color:var(--muted);max-width:520px}.accent{background:var(--lime);border-radius:15px;padding:0 .13em}.btn{background:#006b40;color:white;border-radius:14px;padding:13px 20px;font-weight:900;box-shadow:0 4px 0 #004f30}.btn.secondary{background:#e7f5df;color:#00663c;box-shadow:none}.btn.danger{background:#fae8e4;color:#a63f2d;box-shadow:none}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:18px}.field{display:grid;gap:7px;margin:15px 0;font-weight:900}.field input,.field select{border:1px solid var(--line);border-radius:13px;padding:13px;background:#fbfff8;width:100%;color:var(--ink)}.qr{display:flex;gap:20px;align-items:center}.qr img{width:150px;border:1px solid var(--line);border-radius:16px}.code{font:600 48px Fredoka;color:var(--green);letter-spacing:.12em}.url{word-break:break-all;color:var(--muted);font-size:13px}.teamlist{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.chip{background:#f3f9ee;border-radius:99px;padding:8px 12px;font-weight:800}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--team);margin-right:7px}.game-head{display:flex;gap:20px;justify-content:space-between;align-items:center}.question-title{font-size:clamp(24px,3vw,43px);line-height:1.15;margin:12px 0}.timer{flex:none;display:grid;place-items:center;width:98px;height:98px;border:9px solid #b5e791;border-radius:50%;font:600 36px Fredoka;color:var(--green)}.timer.urgent{border-color:#e97e68;color:#c94731}.city{background:linear-gradient(#ddecf1 0%,#eff8e4 78%);border-radius:26px;margin-top:20px;padding:22px 22px 15px;overflow:hidden}.city-head{display:flex;justify-content:space-between;gap:10px}.skyline{min-height:245px;display:flex;align-items:end;justify-content:space-around;gap:10px;padding-top:25px}.tower-col{text-align:center;min-width:0;flex:1}.tower{width:min(100%,110px);margin:auto;background:var(--team);border:3px solid #ffffffa0;border-radius:9px 9px 3px 3px;min-height:14px;box-shadow:0 8px 0 #7da69a44;position:relative;transition:height .5s}.tower:before{content:'';display:block;height:100%;min-height:10px;background:repeating-linear-gradient(to bottom,transparent 0 9px,#ffffffb8 9px 15px,transparent 15px 22px);margin:0 9px}.tower.solar:after{content:'▰ ▰';position:absolute;top:-20px;left:0;right:0;color:#337c86}.tower-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption{font-size:12px;color:var(--muted);font-weight:800}.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;font-size:12px;color:#536859}.play-wrap{max-width:560px;margin:auto;padding:18px}.identity{background:var(--team);padding:12px 16px;border-radius:14px;font-weight:900;margin:20px 0}.options{display:grid;gap:10px;margin:18px 0}.option{text-align:left;background:#f7fbf4;color:var(--ink);border:1px solid var(--line);border-radius:15px;padding:16px;font-weight:800}.option:hover:not(:disabled){background:var(--lime)}.option.correct{background:#d8f4d9;border-color:#1e9e57}.option.selected{border:2px solid #00663c}.colors{display:flex;gap:10px;flex-wrap:wrap}.color{width:40px;height:40px;border-radius:50%;background:var(--team);border:3px solid transparent}.color.chosen{border-color:#00663c;box-shadow:0 0 0 3px white inset}.notice{background:#fff1e9;color:#9b422e;padding:12px;border-radius:12px;margin:12px 0}.podium{display:flex;gap:12px;align-items:end;margin-top:25px}.podium .place{background:var(--team);padding:20px;border-radius:18px;flex:1;text-align:center}.muted{color:var(--muted)}@media(max-width:700px){.wrap{padding:16px}.hero{grid-template-columns:1fr}.hero h1{font-size:45px}.skyline{overflow-x:auto;justify-content:start}.tower-col{min-width:80px}.panel{padding:20px}.game-head{align-items:start}.timer{width:70px;height:70px;font-size:26px;border-width:6px}.qr img{width:110px}.code{font-size:35px}.top{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.release{border:0;background:transparent;color:#58705e;text-decoration:underline;padding:4px;cursor:pointer}.tower{animation:rise .5s ease-out}.tower.vines{border-left:5px solid #42a66d}.tower.roof-garden:after{content:'♣  ▰  ♣';color:#16815c}.tower.shake{animation:shake .4s}.celebration{position:relative;overflow:hidden}.confetti{pointer-events:none;position:absolute;inset:0;background-image:radial-gradient(circle,#ffd25e 3px,transparent 4px),radial-gradient(circle,#f5a3b8 3px,transparent 4px),radial-gradient(circle,#86c5f4 3px,transparent 4px);background-size:113px 91px,157px 113px,173px 131px;background-position:0 0,30px 40px,60px 20px;opacity:.55;animation:confetti 6s linear infinite}.celebration>*:not(.confetti){position:relative}@keyframes rise{from{transform:translateY(-12px);opacity:.5}to{transform:translateY(0);opacity:1}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes confetti{to{background-position:60px 400px,-30px 400px,120px 400px}}

.award{position:relative;overflow:hidden;margin-top:24px;padding:32px 4vw 28px;border:1px solid #cde7b2;border-radius:30px;background:radial-gradient(ellipse at 50% 20%,#fff 0,#f6ffeb 50%,#dcefcf 100%)}.award>*:not(.confetti){position:relative}.award-heading{text-align:center}.award-heading h1{font-size:clamp(38px,4vw,66px);line-height:1.05;color:#00663c;margin:14px 0 8px}.award-heading h1 span{color:#71b82e}.award-heading p{color:#58705e;margin:0;font-weight:700}.award-scene{display:flex;justify-content:center;align-items:end;gap:clamp(8px,2vw,28px);margin:35px auto 0;max-width:900px}.award-team{flex:1;max-width:250px;text-align:center;min-width:0}.award-crown{font-size:27px;color:#f0b82b;line-height:1}.place-1 .award-crown{font-size:44px}.award-name{font-family:Fredoka,sans-serif;font-size:clamp(18px,2.3vw,29px);color:#00663c;overflow-wrap:anywhere}.award-badge{font-size:12px;font-weight:900;color:#58705e;margin:5px 0 14px}.award-building{position:relative;height:75px;width:65%;margin:auto;background:var(--team);border:4px solid #fff;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 0 0 1px #74aa7a50}.place-1 .award-building{height:116px}.place-3 .award-building{height:57px}.award-roof{position:absolute;left:20%;right:20%;top:-10px;height:7px;background:#368e79;border-radius:6px}.award-windows{position:absolute;inset:12px 14% 14px;background:repeating-linear-gradient(90deg,#fff9 0 12px,transparent 12px 23px),repeating-linear-gradient(0deg,transparent 0 12px,#fff8 12px 15px);opacity:.9}.award-door{position:absolute;width:15px;height:20px;background:#427b64;bottom:0;left:calc(50% - 7px);border-radius:6px 6px 0 0}.award-block{height:100px;padding:11px;background:var(--team);border:4px solid white;border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 8px 18px #34652a22}.place-1 .award-block{height:150px;background:#c7ef89}.place-3 .award-block{height:75px}.award-number{font:600 clamp(38px,5vw,64px) Fredoka;color:#00663c;line-height:1}.award-label{font-size:10px;letter-spacing:.12em;font-weight:900;color:#00663c}.winner-line{display:flex;justify-content:center;align-items:center;gap:14px;background:#00663c;color:white;border-radius:18px;padding:16px;margin:0 auto;max-width:700px}.winner-line .small{color:#c7efa9}.winner-line strong{font:600 25px Fredoka}.winner-icon{font-size:35px;color:#e2ffc0}.other-teams{max-width:700px;margin:20px auto 0}.other-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #d8eac9}.other-row b{flex:1}.other-row span{color:#58705e;font-size:13px}.other-number{font:600 18px Fredoka;color:#00663c!important}.other-row strong{white-space:nowrap}@media(max-width:600px){.award{padding:24px 12px}.award-scene{gap:5px;margin-top:25px}.award-name{font-size:16px}.award-badge{font-size:10px}.award-building{width:80%}.award-label{font-size:8px}.winner-line strong{font-size:20px}.other-row span:not(.other-number){font-size:10px}}

/* Ciudad ilustrada */
.city{position:relative;isolation:isolate;background:linear-gradient(180deg,#dceff1 0%,#eef9e5 72%,#d9edc9 100%);padding:26px 28px 18px;border:1px solid #d0e8d4}.city-head,.skyline,.city-empty,.legend{position:relative;z-index:2}.city-head h2{color:#075e40;font-size:clamp(24px,2.4vw,34px);margin-top:3px}.city-subtitle{margin:5px 0 0;color:#5a7664;font-size:14px;font-weight:700}.city-landscape{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}.city-sun{position:absolute;right:17%;top:75px;width:76px;height:76px;border-radius:50%;background:#fff4b9;box-shadow:0 0 0 15px #fff5c255}.cloud{position:absolute;width:85px;height:20px;border-radius:30px;background:#ffffff80}.cloud:before,.cloud:after{content:'';position:absolute;background:inherit;border-radius:50%;width:32px;height:32px;bottom:0;left:16px}.cloud:after{width:42px;height:42px;left:38px}.cloud-one{top:110px;left:14%}.cloud-two{top:145px;right:27%;transform:scale(.7)}.hill{position:absolute;bottom:42px;background:#b9dcb2;border-radius:50% 50% 0 0;width:75%;height:150px;opacity:.43}.hill-one{left:-19%;transform:rotate(5deg)}.hill-two{right:-25%;height:125px;background:#a9d3b5}.land-tree{position:absolute;bottom:42px;width:9px;height:52px;background:#7caa83;border-radius:8px}.land-tree:before{content:'';position:absolute;bottom:32px;left:-16px;width:40px;height:54px;border-radius:50%;background:#87bf8e}.tree-one{left:6%}.tree-two{right:8%;transform:scale(.8)}.tree-three{right:13%;transform:scale(.55)}.city-empty{min-height:270px;display:flex;justify-content:center;align-items:center;gap:clamp(30px,6vw,100px);padding:25px 30px 12px}.empty-buildings{position:relative;display:flex;align-items:end;gap:8px;height:190px;width:270px;border-bottom:7px solid #7fae84;border-radius:4px}.empty-building{position:relative;width:75px;border:4px solid #fff;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 5px 16px #356f4030;background:#9ad9b7}.empty-building span{position:absolute;inset:15px 12px;background:repeating-linear-gradient(90deg,#ffffffbb 0 12px,transparent 12px 23px),repeating-linear-gradient(0deg,transparent 0 14px,#ffffff99 14px 18px);border-radius:4px}.eb-one{height:105px;background:#a8d6e6}.eb-two{height:165px;width:90px;background:#a8df9d}.eb-three{height:125px;background:#f1c6aa}.eb-two:before{content:'';position:absolute;top:-12px;left:20px;right:20px;height:9px;background:#4a9f80;border-radius:5px}.empty-leaf{position:absolute;top:-2px;right:5px;background:#e2ffc0;color:#158455;width:45px;height:45px;display:grid;place-items:center;border-radius:50%;font-size:25px}.empty-copy{max-width:390px}.empty-kicker{font-size:11px;letter-spacing:.14em;font-weight:900;color:#4e8e66}.empty-copy h3{font-size:clamp(27px,2.8vw,39px);line-height:1.08;color:#076141;margin:9px 0}.empty-copy p{color:#58705e;font-size:15px;line-height:1.5;margin:10px 0 16px}.empty-wait{display:inline-flex;align-items:center;gap:8px;background:#ffffffb8;border:1px solid #d5ead6;padding:9px 13px;border-radius:100px;color:#47765a;font-size:12px;font-weight:900}.empty-wait i{width:8px;height:8px;border-radius:50%;background:#53bd7b;box-shadow:0 0 0 4px #bce9c5}.skyline{min-height:270px;padding-top:35px}.tower{box-shadow:0 8px 0 #7da69a44,0 10px 25px #2c6d4c22}.tower-status{font-size:11px;display:inline-block;background:#ffffffe0;border-radius:30px;padding:5px 9px;color:#367458;font-weight:900;margin-bottom:7px}.tower-info{background:#ffffffd9;border:1px solid #d8ebd6;border-radius:14px;padding:7px 4px;margin:9px 2px 0}.tower-score{font:600 18px Fredoka;color:#087148}.legend{align-items:center;border-top:1px solid #bad9bc;padding-top:13px;margin-top:8px;gap:14px}.legend b{color:#46775b;letter-spacing:.06em}.legend span{display:flex;align-items:center;gap:5px;white-space:nowrap}.legend i{width:9px;height:9px;border-radius:50%}@media(max-width:700px){.city{padding:19px 16px}.city-empty{min-height:0;flex-direction:column;gap:20px;padding:24px 5px}.empty-buildings{height:145px;transform:scale(.8);transform-origin:bottom center;margin-top:-25px}.empty-copy{text-align:center}.empty-copy h3{font-size:28px}.city-subtitle{font-size:12px}.city-head{align-items:start}.legend{gap:8px;font-size:10px}}

.join-panel{display:flex;flex-direction:column;justify-content:center;gap:22px}.join-panel .qr{align-items:center;gap:clamp(20px,3vw,40px)}.qr-frame{flex:0 0 48%;max-width:300px;background:#f4faee;border:1px solid #d8eccd;border-radius:22px;padding:12px;text-align:center}.qr-frame img{display:block;width:100%;height:auto;border:0;border-radius:12px;background:white}.qr-frame span{display:block;color:#41835b;font-size:10px;font-weight:900;letter-spacing:.12em;margin-top:10px}.qr-details{min-width:0;flex:1}.qr-details .code{font-size:clamp(43px,5vw,70px);line-height:1.1;margin:8px 0}.qr-details p{color:#58705e;font-size:14px;line-height:1.5;font-weight:700}.qr-details .url{font-size:12px}.join-panel>.small{color:#00663c}@media(max-width:700px){.join-panel .qr{gap:16px}.qr-frame{flex-basis:45%;padding:8px}.qr-frame span{font-size:8px}.qr-details .code{font-size:40px}.qr-details p{font-size:12px}}
