:root{color:#fff;background:#061632;font-family:Trebuchet MS,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--navy: #061632;--ink: #07101f;--yellow: #ffd21a;--yellow-dark: #e7a900;--purple: #7e35ed;--coral: #ff5c68}*{box-sizing:border-box}html{min-width:320px;background:var(--navy);scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.drop-zone-app{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:#0a7ee9}.background-art{position:absolute;z-index:-3;inset:74px 0 0;background:url(/art/drop-zone-island.png) center center / cover no-repeat;transform:scale(1.012);animation:world-breathe 12s ease-in-out infinite alternate}.background-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,22,56,.12) 0%,transparent 42%,rgba(15,4,42,.08) 100%);pointer-events:none}.halftone{position:absolute;z-index:-2;inset:74px 0 0;opacity:.13;mix-blend-mode:multiply;background-image:radial-gradient(rgba(5,15,35,.65) .7px,transparent .8px);background-size:6px 6px;pointer-events:none}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,70px);color:#fff;background:linear-gradient(96deg,#061632,#071a3e 72%,#0a2048);border-bottom:3px solid rgba(255,255,255,.06);position:relative;z-index:20}.brand{display:inline-flex;align-items:center;gap:16px;color:inherit;text-decoration:none;transform:skew(-6deg)}.brand svg{width:26px;height:42px;color:var(--yellow);filter:drop-shadow(2px 3px 0 #000)}.brand span,footer,.category-flag,.difficulty,.roll-button{font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-style:italic;letter-spacing:.055em;text-transform:uppercase}.brand span{font-size:clamp(1.3rem,2vw,2rem);text-shadow:3px 3px 0 rgba(0,0,0,.38)}.brand:focus-visible,.roll-button:focus-visible{outline:4px solid #fff;outline-offset:4px}.hero{min-height:calc(100svh - 126px);width:min(1540px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(360px,.9fr) minmax(500px,1.1fr);align-items:center;gap:clamp(16px,3vw,68px);padding:clamp(38px,4.5vh,74px) clamp(24px,4vw,70px) 32px;perspective:1200px}.headline-wrap{position:relative;transform:rotate(-2.4deg);z-index:2}h1{margin:0;max-width:680px;color:#fff;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:clamp(4rem,7.2vw,8.1rem);font-style:italic;font-weight:900;line-height:.76;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance;filter:drop-shadow(8px 9px 0 #061632)}h1 span,h1 strong{display:block;width:max-content;max-width:100%}h1 strong{color:var(--yellow);font-size:1.17em;text-shadow:0 4px 0 #d89800}.burst{position:absolute;z-index:3;font-family:Impact,sans-serif;filter:drop-shadow(3px 3px 0 #061632)}.bolt-burst{left:-2rem;top:-2rem;color:var(--yellow);font-size:4rem;transform:rotate(-22deg);animation:floaty 3s ease-in-out infinite}.coral-burst{right:1.2rem;bottom:-2.2rem;color:var(--coral);font-size:2.2rem;animation:floaty 2.7s .5s ease-in-out infinite reverse}.card-stage{position:relative;width:100%;max-width:720px;justify-self:end;transform:rotate(1.8deg)}.challenge-frame{position:relative;padding:12px;background:linear-gradient(135deg,#ffe862 0%,var(--yellow) 31%,#bf7400 67%,#ffdd2b 100%);clip-path:polygon(7% 0,78% 2%,82% 0,94% 4%,100% 13%,98% 87%,91% 100%,10% 98%,0 88%,2% 11%);filter:drop-shadow(11px 18px 0 rgba(4,10,24,.7));transform-origin:center bottom}.challenge-frame:before{content:"";position:absolute;inset:6px;border:4px solid var(--ink);clip-path:inherit;pointer-events:none}.challenge-card{position:relative;min-height:560px;display:flex;flex-direction:column;padding:clamp(26px,3vw,44px);color:#f7f9ff;overflow:hidden;background:radial-gradient(circle at 88% 8%,rgba(255,255,255,.08),transparent 19%),repeating-linear-gradient(115deg,transparent 0 18px,rgba(255,255,255,.018) 18px 20px),linear-gradient(150deg,#20232a,#11151d 58%,#242831);border:5px solid var(--ink);clip-path:polygon(5% 0,94% 1%,100% 9%,98% 91%,93% 100%,7% 98%,0 91%,2% 8%);box-shadow:inset 0 0 0 2px #ffffff1f,inset 0 -20px 60px #0000003d}.challenge-card:after{content:"";position:absolute;inset:0;opacity:.09;background-image:radial-gradient(#fff .6px,transparent .7px);background-size:5px 5px;pointer-events:none}.card-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}.category-flag{min-width:230px;display:inline-flex;align-items:center;gap:12px;padding:12px 38px 12px 20px;margin-left:-20px;background:linear-gradient(100deg,#8c45ef,#6230d5);box-shadow:5px 6px #00000052;clip-path:polygon(0 0,100% 0,86% 100%,0 100%);font-size:clamp(1rem,1.4vw,1.35rem)}.squad-dot{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:13px 3px 0 -3px #fff,-4px 10px 0 -3px #fff,8px 12px 0 -3px #fff}.challenge-mark{width:62px;height:62px;display:grid;place-items:center;color:var(--yellow);border:2px solid rgba(255,255,255,.15);transform:rotate(4deg)}.challenge-mark svg{width:45px;height:45px}.card-copy{position:relative;z-index:2;flex:1;display:grid;align-content:center;text-align:center;padding:18px 3% 8px}.card-copy h2{margin:0 auto;max-width:13ch;font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif;font-size:clamp(3.25rem,5.1vw,5.9rem);font-style:italic;font-weight:900;line-height:.88;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;text-shadow:5px 6px 0 #070a0f}.rule-divider{display:flex;align-items:center;gap:14px;margin:18px auto 15px;width:84%;color:var(--coral)}.rule-divider:before,.rule-divider:after{content:"";height:4px;flex:1;background:currentColor;transform:skew(-24deg)}.rule-divider span{font-size:1.3rem}.card-copy p{margin:0 auto;max-width:52ch;font-size:clamp(.96rem,1.3vw,1.18rem);font-weight:700;line-height:1.42;text-wrap:pretty;color:#dce2ed}.difficulty{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--coral);font-size:clamp(.9rem,1.2vw,1.12rem)}.stars{display:inline-flex;gap:5px}.stars i{color:transparent;font-style:normal;-webkit-text-stroke:2px #758092;font-size:1.5em;line-height:1}.stars i.filled{color:var(--yellow);-webkit-text-stroke-color:#d09500;filter:drop-shadow(1px 2px 0 #000)}.roll-button{position:relative;z-index:2;min-height:82px;margin-top:22px;padding:14px 28px;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,42px);color:#070b12;border:4px solid var(--ink);background:linear-gradient(#ffe435,#ffc400 70%,#e2a000);box-shadow:inset 0 0 0 3px #ffffff38,0 7px #6f4100;clip-path:polygon(5% 0,95% 0,100% 25%,96% 100%,5% 97%,0 74%,1% 18%);cursor:pointer;font-size:clamp(1.55rem,2.6vw,2.65rem);transition:transform .16s ease,filter .16s ease}.roll-button svg{width:38px;flex:0 0 auto}.roll-button:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.08)}.roll-button:active{transform:translateY(5px);box-shadow:inset 0 0 0 3px #ffffff2e,0 2px #6f4100}.roll-button:disabled{cursor:wait;filter:saturate(.7)}.impact-lines{position:absolute;z-index:-1;inset:-8% -6%;pointer-events:none}.impact-lines i{position:absolute;height:7px;width:70px;background:#fff;clip-path:polygon(0 35%,100% 0,89% 100%);opacity:.88}.impact-lines i:nth-child(1){right:-1%;top:19%;transform:rotate(-19deg)}.impact-lines i:nth-child(2){left:-4%;bottom:24%;transform:rotate(164deg)}.impact-lines i:nth-child(3){right:5%;bottom:1%;transform:rotate(24deg) scale(.7);background:var(--yellow)}.impact-lines i:nth-child(4){left:10%;top:2%;transform:rotate(-55deg) scale(.55);background:var(--coral)}.dust-cloud{position:absolute;z-index:4;bottom:-13px;width:150px;height:64px;pointer-events:none}.dust-left{left:-28px}.dust-right{right:-20px;transform:scaleX(-1)}.dust-cloud i{position:absolute;bottom:0;border-radius:50%;background:#d9ae78;border:3px solid #5b4837;box-shadow:inset -8px -7px #6243262e}.dust-cloud i:nth-child(1){width:65px;height:42px;left:0}.dust-cloud i:nth-child(2){width:76px;height:55px;left:38px;bottom:3px}.dust-cloud i:nth-child(3){width:51px;height:35px;left:95px}.card-stage.is-rolling .challenge-frame{animation:card-drop .58s cubic-bezier(.2,.8,.26,1)}.card-stage.is-rolling .dust-cloud{animation:dust-pop .5s ease-out}.card-stage.is-rolling .impact-lines i{animation:line-pop .42s ease-out}footer{min-height:52px;position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:28px;padding:10px 24px;color:#dce4f5;background:#071936;border-top:4px solid #fff;font-size:.82rem}.footer-bolt{width:30px;height:30px;display:grid;place-items:center;color:#fff}.footer-bolt svg{width:16px;height:24px}@keyframes card-drop{0%{transform:translate3d(70px,-130px,140px) rotate(7deg) scale(.78);opacity:.1}58%{transform:translate3d(-3px,14px,0) rotate(-1.2deg) scale(1.025);opacity:1}78%{transform:translate3d(0,-7px,0) rotate(.4deg) scale(.995)}to{transform:none}}@keyframes dust-pop{0%{transform:translateY(10px) scale(.45);opacity:0}45%{opacity:1}to{transform:translate(-12px,-5px) scale(1.18);opacity:.65}}@keyframes line-pop{0%{opacity:0;scale:.4}60%{opacity:1}to{opacity:.85;scale:1}}@keyframes floaty{50%{translate:0 -10px;rotate:7deg}}@keyframes world-breathe{0%{transform:scale(1.012)}to{transform:scale(1.035)}}@media(max-width:980px){.hero{grid-template-columns:1fr;gap:42px;padding-top:44px}.headline-wrap{justify-self:center;text-align:center}h1{font-size:clamp(4.2rem,12vw,7.2rem)}h1 span,h1 strong{width:auto}.card-stage{justify-self:center}.background-art{background-position:47% center}footer{margin-top:24px}}@media(max-width:620px){.drop-zone-app{min-height:100svh}.topbar{height:66px;padding:0 18px}.brand{gap:10px}.brand svg{width:20px;height:34px}.brand span{font-size:1.25rem}.background-art,.halftone{inset:66px 0 0}.background-art{background-position:42% center}.hero{min-height:auto;gap:30px;padding:42px 15px 28px}h1{font-size:clamp(3.55rem,17vw,5.1rem);line-height:.78;filter:drop-shadow(5px 6px 0 #061632)}.headline-wrap{transform:rotate(-2deg)}.bolt-burst{left:.2rem;top:-2.2rem;font-size:2.8rem}.coral-burst{right:.5rem;bottom:-1.5rem}.card-stage{width:calc(100% - 4px);transform:rotate(1deg)}.challenge-frame{padding:8px;filter:drop-shadow(7px 11px 0 rgba(4,10,24,.7))}.challenge-card{min-height:510px;padding:22px 18px 19px}.category-flag{min-width:195px;margin-left:-9px;padding:10px 30px 10px 15px;font-size:.91rem}.challenge-mark{width:48px;height:48px}.challenge-mark svg{width:34px}.card-copy{padding:20px 0 8px}.card-copy h2{font-size:clamp(3.15rem,16vw,4.5rem);max-width:11ch}.card-copy p{font-size:.94rem;line-height:1.38}.rule-divider{margin:16px auto 13px}.difficulty{gap:8px;font-size:.83rem}.stars{gap:2px}.roll-button{min-height:72px;margin-top:18px;padding:12px 16px;gap:18px;font-size:clamp(1.45rem,7vw,2rem)}.roll-button svg{width:29px}.dust-cloud{transform:scale(.72);transform-origin:bottom left}.dust-right{transform:scale(-.72,.72);transform-origin:bottom right}footer{min-height:48px;gap:12px;padding-inline:14px;font-size:.68rem;text-align:center}footer span:last-child{display:none}}@media(max-width:370px){h1{font-size:3.15rem}.challenge-card{min-height:480px}.card-copy h2{font-size:2.85rem}.card-copy p{font-size:.86rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.roll-button{transition:none}}