*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 10%,#26396a,#10132e 65%);color:#fff;font:16px/1.45 system-ui,sans-serif;min-height:100dvh}main{max-width:1200px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center}.brand{color:#8df2db;font-weight:900;letter-spacing:.15em;text-decoration:none}.quiet{background:transparent;color:#b7c9e5;border:1px solid #4a5b7f;border-radius:9px;padding:9px 14px}.hidden{display:none!important}button,input{font:inherit}button{cursor:pointer;font-weight:800;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}.home{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(30px,8vw,100px);align-items:center;min-height:80vh}.eyebrow{color:#8df2db;font-weight:800;font-size:.75rem;letter-spacing:.15em}h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.05em;margin:12px 0 20px}em{color:#8df2db;font-style:normal}p{color:#bdcce2}.rules{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.rules span,.pill{background:#283558;padding:8px 12px;border-radius:20px;font-size:.85rem}.card{background:#17213b;border:1px solid #415275;border-radius:22px;padding:clamp(22px,4vw,36px);box-shadow:0 18px 45px #0003}.card h2{margin:0 0 20px;font-size:1.7rem}label{display:block;font-size:.85rem;font-weight:700;margin:14px 0 7px;color:#d5e2f4}input{background:#101a30;color:white;border:1px solid #536381;border-radius:10px;padding:14px;width:100%}.primary,.whatsapp,.secondary,.join button{border:0;border-radius:10px;padding:14px;width:100%;margin-top:14px;background:#8df2db;color:#10263a}.whatsapp{background:#39db82}.secondary{background:#2c3e60;color:white}.divider{text-align:center;color:#95a8c3;font-size:.7rem;letter-spacing:.13em;margin-top:20px}.join{display:flex;gap:8px}.join button{width:auto;margin:0;padding:12px 20px}.small{font-size:.85rem;color:#9fb1c9}.lobby{max-width:620px;margin:5vh auto}.room-head{display:flex;justify-content:space-between;align-items:center}.room-head h1{font-size:3rem;letter-spacing:.12em;margin:0}.players{display:grid;gap:8px;margin:25px 0}.player{padding:12px;background:#23304e;border-radius:10px}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:10px}.lobby>.leave{margin-top:10px}.game{max-width:650px;margin:5px auto}.gamebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.gamebar span{color:#8df2db;margin-left:16px}.arena{height:min(56vh,540px);min-height:260px;position:relative;overflow:hidden;border:2px solid #48618d;border-radius:18px;background:radial-gradient(ellipse at center,#253962,#0b1026)}.stars{position:absolute;inset:0;background-image:radial-gradient(#ffffff80 1px,transparent 1px);background-size:37px 47px;opacity:.4}.rock,.ship{position:absolute;transform:translate(-50%,-50%);text-align:center}.rock{border-radius:40%;background:#ff8296;box-shadow:0 0 20px #ff6070aa;aspect-ratio:1}.ship{top:90%;font-size:25px;line-height:1}.ship small{display:block;font-size:10px;color:white;text-shadow:0 1px 4px #000;white-space:nowrap}.ship.out{opacity:.25}.over{position:absolute;inset:0;display:grid;place-items:center;background:#080e20d9;padding:15px}.over .card{text-align:center;max-width:360px;width:100%}.controls{display:flex;gap:10px;margin-top:10px}.controls button{width:50%;min-height:58px;border:1px solid #52678b;border-radius:12px;background:#26395d;color:white;font-size:1.3rem;user-select:none;touch-action:none}.controls span{font-size:.8rem}.roster{display:flex;gap:8px;overflow-x:auto;margin-top:10px}.roster span{white-space:nowrap;padding:5px 9px;background:#243150;border-radius:8px;font-size:.78rem}#notice{position:fixed;z-index:9;top:10px;left:50%;transform:translateX(-50%);background:#a73d55;padding:10px 16px;border-radius:10px;display:none}#notice.show{display:block}@media(max-width:700px){main{padding:14px}.home{grid-template-columns:1fr;gap:24px;min-height:auto;padding-top:30px}.home h1{font-size:3.2rem}.rules{margin-top:18px}.card{padding:22px}.game .arena{height:53dvh}.game{margin-top:10px}}
button:disabled{opacity:.45;cursor:not-allowed}.choices{margin:15px 0;color:#c8d7ea;font-size:.9rem}.colors{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}.colors button{width:38px;height:38px;border-radius:50%;border:3px solid transparent}.colors button.selected{border-color:white;box-shadow:0 0 0 3px #77e7dc}.colors button.taken{opacity:.25}.player .ready-label{float:right;color:#8df2db;font-size:.8rem}.rock{transition:top 80ms linear;box-shadow:inset -5px -5px 0 #0003,0 0 20px #ff6070aa}.rock.large{background:#ffb15e}.rock.fast{background:#ff547f;box-shadow:0 0 16px #ff9db1}.ship{transition:left 80ms linear;color:inherit;text-shadow:0 0 12px currentColor}.ship.out{filter:grayscale(1);opacity:.28}.warning,.spectating,.countdown{position:absolute;z-index:2;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;border-radius:12px;padding:8px 15px;background:#8d2948;font-weight:800}.warning{top:12px}.spectating{bottom:12px;background:#26395d}.countdown{top:35%;font-size:5rem;background:transparent;text-shadow:0 0 30px #8df2db;color:#8df2db}.reaction-display{position:absolute;right:15px;top:15px;z-index:3;font-weight:700;pointer-events:none;text-shadow:0 2px 5px #000}.results{max-height:150px;overflow:auto;margin:10px 0;text-align:left}.results div{display:flex;justify-content:space-between;padding:5px 8px;border-bottom:1px solid #40506d;font-size:.85rem}.reactions{display:flex;align-items:center;gap:6px;margin-top:8px;color:#abbdd2;font-size:.8rem}.reactions button{background:#26395d;border:0;border-radius:9px;padding:7px 12px;font-size:1.1rem}.over .card{padding:18px}.over h2{margin-bottom:6px}.over p{margin:6px 0}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.ship.hit{animation:hit .5s ease-out}@keyframes hit{0%{transform:translate(-50%,-50%) scale(1);filter:brightness(1)}35%{transform:translate(-50%,-50%) scale(1.8);filter:brightness(3)}100%{transform:translate(-50%,-50%) scale(1);filter:grayscale(1)}}
/* Warm brown and gold theme */
body{background:radial-gradient(circle at 20% 10%,#704629,#24140e 65%);color:#fff8e9}
.brand,.eyebrow,em,.player .ready-label,.gamebar span{color:#f4ce79}
p{color:#e5d2b8}
.card{background:#38231a;border-color:#805d3d;box-shadow:0 18px 45px #10090466}
.quiet{color:#f3dfbd;border-color:#896b4d}
.rules span,.pill,.player{background:#573a29}
label,.choices{color:#f1dfc4}
input{background:#261910;color:#fff8e9;border-color:#98724b}
.primary,.join button,.whatsapp{background:#e9ba5e;color:#281909}
.secondary{background:#705036;color:#fff5df}
.divider,.small{color:#d2b99a}
.arena{border-color:#9b734a;background:radial-gradient(ellipse at center,#795033,#21130d)}
.stars{background-image:radial-gradient(#fbe0a4aa 1px,transparent 1px)}
.rock{background:#c49a70;box-shadow:inset -5px -5px 0 #3c241755,0 0 20px #e4ac5d88}
.rock.large{background:#d29a58}.rock.fast{background:#f2d47c;box-shadow:0 0 16px #ffd78c}
.over{background:#1b100bd9}
.controls button,.reactions button,.spectating{background:#61402b;border-color:#99734e;color:#fff5df}
.roster span{background:#563a29}.reactions{color:#dcc3a0}
.colors button.selected{box-shadow:0 0 0 3px #e9ba5e}
.countdown{color:#f4ce79;text-shadow:0 0 30px #f4ce79}
.results div{border-color:#805d3d}
/* Green falling balls, with shades that distinguish hazard types. */
.rock{background:#66c977;box-shadow:inset -5px -5px 0 #175c3155,0 0 20px #54d97688}
.rock.large{background:#3d9b5a}
.rock.fast{background:#a4ef89;box-shadow:0 0 16px #9ff98b}
/* Dodge Drop: warm, playful arcade identity */
body{background-color:#f6e5bd;background-image:radial-gradient(circle at 10% 15%,#e7c887 2px,transparent 3px),radial-gradient(circle at 80% 75%,#e6c37d 2px,transparent 3px);background-size:48px 48px,66px 66px;color:#3f281a;font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}
main{max-width:1160px;padding:24px}
header{padding:10px 0 18px;border-bottom:2px solid #b7894f}
.brand{color:#59351c;letter-spacing:.07em;font-size:1.1rem;font-weight:950}
.quiet{color:#5a3a24;border:2px solid #845b37;background:#fff4d8;border-radius:12px;font-weight:800}
.home{grid-template-columns:1.05fr .95fr;min-height:min(75vh,700px);gap:clamp(32px,7vw,95px)}
.home>div:first-child{position:relative}.home>div:first-child:before{content:'●  ●  ●';display:inline-block;color:#438a48;background:#fff2c8;border:2px solid #664220;border-radius:999px;letter-spacing:.5em;padding:8px 12px;margin-bottom:15px}
.eyebrow{color:#80501d;background:#f6d480;border:2px solid #9d7137;border-radius:999px;display:inline-block;padding:7px 12px;letter-spacing:.09em}
h1{font-weight:950;letter-spacing:-.06em}.home h1{color:#462b1b;font-size:clamp(3.3rem,7vw,6.4rem);line-height:.94}.home h1 em{color:#9f661e}
p{color:#6d4c32}.home p:not(.eyebrow){font-size:1.1rem;max-width:460px}
.rules{gap:8px}.rules span,.pill{background:#fff3d3;color:#56381f;border:2px solid #ad8655;border-radius:12px;font-weight:800}
.card{background:#fff8e7;color:#3f281a;border:3px solid #684329;border-radius:25px;box-shadow:9px 10px 0 #b5874d;padding:clamp(24px,4vw,38px)}
.card h2{color:#462b1b}.card label,.choices{color:#634124}input{background:#fffdf5;color:#3f281a;border:2px solid #b28b5d;border-radius:12px}input::placeholder{color:#8b745e}
.primary,.join button,.whatsapp{background:#edb83f;color:#3f281a;border:2px solid #684329;border-radius:12px;box-shadow:0 4px 0 #8d602b}.primary:hover,.join button:hover,.whatsapp:hover{background:#f8ce68}.primary:active,.join button:active,.whatsapp:active{transform:translateY(3px);box-shadow:0 1px 0 #8d602b}
.secondary{background:#f1dfb4;color:#4c301d;border:2px solid #9e774c}.divider,.small{color:#7e624b}.player{background:#f8eac9;color:#4b3020;border:1px solid #ddc49b}.player .ready-label{color:#397746}.colors button.selected{box-shadow:0 0 0 3px #ba8529;border-color:#fff}
.gamebar{color:#56361e}.gamebar span{color:#87601c}.arena{border:4px solid #67472d;background:linear-gradient(180deg,#d3ae72,#f4dc9e);box-shadow:7px 7px 0 #ad804b}.stars{background-image:radial-gradient(#fff9e7 2px,transparent 2px);background-size:45px 52px;opacity:.6}.ship small{background:#513926;padding:2px 5px;border-radius:5px;text-shadow:none}.rock{border:2px solid #306e3d}.over{background:#3f281acd}.over .card{box-shadow:7px 7px 0 #ac814e}.controls button{background:#f7d178;color:#4b301d;border:2px solid #714b2c;box-shadow:0 4px 0 #ac804a}.controls button:active{transform:translateY(3px);box-shadow:0 1px 0 #ac804a}
.roster span{background:#fff4da;color:#5a3a24;border:1px solid #c6a276}.reactions{color:#684a2f}.reactions button{background:#f7dfac;border:1px solid #ad8655}.results div{border-color:#dfc69c}.warning{background:#8b4c19;color:white}.spectating{background:#69492e;color:white}.countdown{color:#563416;text-shadow:0 2px 0 #fff1c4}
#notice{background:#783b28;color:white}button:focus-visible,input:focus-visible{outline-color:#397746}
@media(max-width:700px){main{padding:14px}.home{grid-template-columns:1fr;gap:20px;padding:24px 0 30px}.home h1{font-size:clamp(3rem,13vw,4.8rem)}.home>div:first-child:before{margin-bottom:6px}.home p:not(.eyebrow){font-size:1rem}.rules{margin-top:14px}.card{padding:22px;box-shadow:6px 7px 0 #b5874d}.game .arena{height:51dvh}}
.header-actions{display:flex;gap:8px;align-items:center}.tutorial-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#291a10d9}.tutorial-card{width:min(100%,550px);max-height:92dvh;overflow:auto;position:relative}.tutorial-card h2{margin:8px 0 18px}.tutorial-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:2px solid #805d3d;border-radius:50%;background:#fff3d3;color:#55351e;font-size:1.5rem;line-height:1}.tutorial-steps{padding:0;list-style:none;counter-reset:step;display:grid;gap:13px}.tutorial-steps li{counter-increment:step;display:grid;grid-template-columns:38px 1fr;column-gap:12px}.tutorial-steps li:before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e9ba5e;color:#3f281a;font-weight:900}.tutorial-steps strong,.tutorial-steps span{grid-column:2}.tutorial-steps span{color:#70543c;font-size:.9rem}.tutorial-card .primary{margin-top:8px}@media(max-width:450px){.header-actions .quiet{padding:8px;font-size:.8rem}.tutorial-card{padding:20px}.tutorial-steps{gap:9px}}