:root{
  --bg:#eef5f5;
  --ink:#102935;
  --navy:#083954;
  --navy2:#0b5666;
  --green:#0d7c69;
  --yellow:#ffd12c;
  --panel:#ffffff;
  --line:#d4e1e5;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
a{color:#0c7a67}button,input{font:inherit}button{cursor:pointer}.hide{display:none!important}

.top{height:54px;background:#fff;border-bottom:1px solid #dfe9e8;display:flex;align-items:center;justify-content:space-between;padding:6px max(16px,calc((100vw - 1180px)/2));gap:16px}
.brand img{width:148px;display:block;height:auto}.toplink{text-decoration:none;border:1px solid #cdded8;border-radius:999px;padding:9px 13px;font-weight:800;font-size:13px;background:#fff}
body[data-view="play"] .top, body[data-view="results"] .top{display:none}

main{max-width:1400px;margin:0 auto;padding:18px 18px 42px}
.intro{max-width:850px;margin:auto;text-align:center;padding:14px 0 32px}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:2px;color:#15866d}.intro h1{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-2px;margin:16px 0 10px}.intro h1 span{color:#138b73}.sub{font-size:clamp(18px,2.3vw,24px);margin:0 0 18px}.info{max-width:640px;margin:0 auto 20px;line-height:1.55;color:#446055}
.startform{border:1px solid #d8e4df;background:#fff;border-radius:20px;padding:24px;max-width:510px;margin:0 auto;box-shadow:0 18px 45px rgba(49,88,59,.08)}
.startform label{display:block;text-align:left;font-size:14px;font-weight:800;margin-bottom:9px}.startform label span{font-weight:500;color:#61766b}.startform input{width:100%;height:48px;border:1px solid #bcd0c6;border-radius:12px;padding:12px 14px;font-size:16px;outline-color:#198a73}.privacy{text-align:left;margin:8px 0 22px;font-size:12px;color:#667970}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:16px;background:var(--yellow);color:#1d2f20;border:0;border-radius:12px;padding:16px 24px;font-weight:900;font-size:15px;box-shadow:0 5px 0 #cfa71b;text-decoration:none;transition:transform .12s}.primary:hover{transform:translateY(-2px)}.startform .primary{width:100%}

.play{max-width:1320px;margin:0 auto}
.gamehead{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;background:linear-gradient(110deg,var(--navy),var(--navy2));color:#fff;border-radius:20px 20px 0 0}
.gamebrand{display:flex;align-items:center;gap:14px;min-width:0}.gamebrand img{width:118px;filter:brightness(1.05)}.gamehead small{display:block;font-weight:900;letter-spacing:1.4px;color:#bfe4d7;font-size:11px}.gamehead h2{margin:4px 0 0;font-size:clamp(18px,2.2vw,28px)}
.score{display:grid;justify-items:center;min-width:124px;background:#052b2e;border-radius:12px;padding:8px 18px}.score span{font-size:10px;color:#bbdfd1;font-weight:900;letter-spacing:1px}.score strong{font-size:36px;line-height:1.08;color:#ffdf52;font-variant-numeric:tabular-nums}

.arena{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(350px,.78fr);overflow:hidden;border-radius:0 0 20px 20px;box-shadow:0 15px 38px rgba(29,79,96,.18);background:#fff;min-height:500px}
.stadium{position:relative;min-height:500px;background:#6cbde3;overflow:hidden}
.field-scene{position:relative;height:100%;min-height:500px;overflow:hidden;background:#76bee7}.scene-photo{position:absolute;inset:0;background-image:url('assets/stadium-3d.webp');background-size:cover;background-position:28% center;transition:transform .35s ease;filter:saturate(1.06)}.field-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00263e08 65%,#04311a6e 100%)}
.scene-badge{position:absolute;top:16px;left:16px;z-index:6;padding:9px 15px;background:#093449e8;border-radius:999px;color:#fff;font-weight:900;font-size:12px;letter-spacing:1.1px}
.field-overlay{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:6;background:#062d40de;color:#fff;border:1px solid #ffffff66;border-radius:13px;padding:10px 16px;font-size:13px;font-weight:700;white-space:nowrap}
.sound{position:absolute;right:12px;bottom:12px;z-index:16;background:rgba(255,255,255,.93);border:0;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:800;color:#184e3b}
.incoming-ball{position:absolute;z-index:12;left:90%;top:56%;width:28px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 31% 24%,#ff9f9a,#d12428 44%,#7b070c);box-shadow:inset -3px -2px 5px #740c18,0 0 13px #fff9,0 5px 10px #0006;opacity:0;pointer-events:none}.incoming-ball:before{content:'';position:absolute;inset:5px 12px;border-left:2px dashed #ffe3cf;border-right:2px dashed #ffe3cf;border-radius:50%;transform:rotate(-25deg)}
.impact-flash{position:absolute;left:25.5%;top:47.9%;width:18px;height:18px;transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:13;border-radius:50%;background:radial-gradient(circle,#fffbe8 0%,#ffd04c 36%,rgba(255,211,77,.9) 54%,rgba(255,255,255,0) 76%);box-shadow:0 0 0 4px rgba(255,224,100,.28),0 0 20px 6px rgba(255,222,120,.25)}.impact-flash.active{animation:impactPop .22s ease-out forwards}@keyframes impactPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.75)}}
.shot-ribbon{position:absolute;z-index:14;top:16%;left:50%;transform:translate(-50%,-15%) scale(.5);font-size:clamp(38px,5vw,84px);font-weight:1000;color:#fff7a8;text-shadow:-3px 3px 1px #044c59,0 5px 25px #002d52;opacity:0;white-space:nowrap}.shot-ribbon.active{animation:popshot .72s cubic-bezier(.2,1.6,.3,1) forwards}@keyframes popshot{0%{opacity:0;transform:translate(-50%,20%) scale(.4)}70%{opacity:1;transform:translate(-50%,-15%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-15%) scale(1)}}
.field-scene.six .scene-photo{animation:hitZoom 1.1s ease-in-out forwards}.field-scene.dot .scene-photo{animation:hitZoom 1.1s ease-in-out forwards}@keyframes hitZoom{25%{transform:scale(1.035) translateX(-1%)}100%{transform:scale(1.08) translateX(-4%)}}
.field-scene.dot .scene-badge{background:#b45213;color:#fff}
.dot-fielder{display:none;position:absolute;right:3%;bottom:-13%;z-index:13;width:178px;height:268px;transform:translateX(205px);background:url('assets/fielder-3d.png') center bottom/contain no-repeat;filter:drop-shadow(0 2px 3px rgba(0,0,0,.12))}.dot-fielder.active{display:block;animation:fielderRun 1.02s ease-out forwards}.dot-fielder::before{content:'';position:absolute;left:28%;bottom:15%;width:118px;height:20px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(0,0,0,.36) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,0) 78%)}@keyframes fielderRun{0%{transform:translateX(205px) translateY(0) scale(.9)}60%{transform:translateX(18px) translateY(0) scale(.95)}100%{transform:translateX(0) translateY(2px) scale(.97)}}


.delivery{padding:22px;background:#fff;display:flex;flex-direction:column;justify-content:center;min-width:0}.overline{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:900;letter-spacing:1.1px;color:#587b68}.balls{display:flex;gap:8px}.balls span{display:grid;place-items:center;background:#eaf1e8;color:#326448;border-radius:50%;width:34px;height:34px;font-size:18px}.balls span.hit{background:#d7f3d8;color:#125e3e}.balls span.dot{background:#fff1da;color:#8c5014}
.scenario{margin:16px 0 6px;font-size:12px;font-weight:900;color:#006e8b;text-transform:uppercase;letter-spacing:.7px}.delivery h3{font-size:clamp(20px,1.7vw,27px);line-height:1.3;margin:0 0 16px}.answers{display:grid;grid-template-columns:1fr;gap:10px}.answer{min-height:58px;background:linear-gradient(#fff,#f2f8fb);border:1.5px solid #d7e2e8;border-radius:13px;color:#244536;text-align:left;font-size:15px;font-weight:700;line-height:1.35;display:flex;align-items:center;gap:12px;padding:10px 14px}.answer:hover:not(:disabled),.answer:focus-visible{border-color:#0a83a9;background:#e9f7ff}.answer:disabled{cursor:default}.answer b{flex-shrink:0;background:#d9e8f3;color:#0a4d75;border-radius:50%;width:33px;height:33px;display:grid;place-items:center}.answer.correct{border-color:#1c9b67;background:#e9f8ed}.answer.wrong{border-color:#d29a52;background:#fff6e8}

.arena.cinematic{grid-template-columns:minmax(0,1fr)}.arena.cinematic .delivery{display:none}.arena.cinematic .stadium{min-height:500px;height:500px}.arena.cinematic .field-scene{min-height:500px}.arena.cinematic .scene-photo{background-image:url('assets/stadium-wide.webp');background-position:50% 48%}.arena.cinematic .field-overlay{display:none}
.miniPromo{font-size:14px;color:#436b55;text-align:center;background:#eaf4e9;padding:14px 14px;margin:12px 0 20px;border-radius:12px;border:1px solid #badedb;line-height:1.5}.miniPromo a{font-weight:800}

.results{text-align:center;max-width:780px;margin:12px auto 25px}.results>h2{font-size:clamp(29px,4vw,43px);margin:15px 0 18px}.scorecard{background:linear-gradient(145deg,#185849,#092f30);border-radius:18px;padding:24px 20px;color:#fff;box-shadow:0 13px 35px rgba(19,63,50,.25)}.scorecardTop{font-weight:850;font-size:11px;letter-spacing:2px;color:#d5d9b4}.playerLine{margin-top:20px;font-size:21px;font-weight:750}.bigScore{display:flex;justify-content:center;align-items:baseline;gap:12px}.bigScore span{font-size:clamp(70px,13vw,105px);font-weight:950;color:#ffdf5a;line-height:1.2;letter-spacing:-5px}.bigScore small{font-weight:850;color:#d6efdf}.scoreballs{display:flex;gap:12px;justify-content:center;margin:8px 0 15px}.scoreballs span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);font-weight:900;font-size:22px}.scorecard p{margin:10px 0 3px}
.coursePitch{text-align:left;background:#fff;border:2px solid #dce8df;border-radius:18px;padding:25px;margin:23px auto}.coursePitch h3{font-size:clamp(21px,3vw,30px);margin:0 0 10px}.coursePitch p{line-height:1.6;color:#3c5447}.coursePitch .linkbutton{width:100%;text-align:center}
.sharewrap{margin:27px 0 15px}.sharewrap h3{margin-bottom:13px}.secondary,.quiet{border-radius:10px;padding:12px 16px;margin:4px;background:#fff;border:1px solid #b6d5c6;font-size:13px;font-weight:750;color:#236d56}.secondary:hover{background:#e7f6ed}.quiet{border:0;background:transparent;text-decoration:underline;color:#617468}.shareNote{font-size:12px;color:#678173}
footer{background:#143d35;color:#d9e9dd;padding:16px max(20px,calc((100vw - 1180px)/2));display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px}footer a{color:#e5efb8}

@media(min-width:1000px) and (min-height:650px){.play .arena{min-height:min(65vh,590px)}.play .arena .stadium,.play .arena .field-scene{min-height:min(65vh,590px)}}
@media(max-width:850px){main{padding:14px 12px 40px}.gamehead{padding:12px}.gamebrand img{width:102px}.arena{grid-template-columns:1fr}.stadium,.field-scene{height:clamp(240px,45vw,410px);min-height:0}.delivery{padding:18px}.arena.cinematic .stadium,.arena.cinematic .field-scene{height:clamp(300px,65vw,500px);min-height:0}.scene-photo{background-position:30% center}.delivery h3{font-size:21px}.answer{min-height:50px}.field-overlay{bottom:12px;padding:8px 10px;font-size:11px;white-space:normal;text-align:center;min-width:210px}.dot-fielder{width:136px;height:205px;right:3%;bottom:-14%}.impact-flash{left:25.5%;top:47.9%}.miniPromo{margin-bottom:14px}}
@media(max-width:540px){.top{height:48px;padding:5px 10px}.brand img{width:120px}.toplink{font-size:11px;padding:7px 9px}.intro{padding-top:10px}.intro h1{letter-spacing:-1px}.startform{padding:18px}.gamehead h2{font-size:18px}.gamehead small{font-size:9px}.score{min-width:88px;padding:6px 10px}.score strong{font-size:28px}.stadium,.field-scene{height:250px}.arena.cinematic .stadium,.arena.cinematic .field-scene{height:310px}.scene-photo{background-position:26% 50%}.delivery{padding:13px}.delivery h3{font-size:19px}.scenario{margin-top:9px}.answer{min-height:47px;font-size:14px;padding:7px 10px}.overline{font-size:11px}.field-overlay{display:none}.sound{padding:7px 9px;right:8px;bottom:8px}.impact-flash{left:25.5%;top:47.9%}.dot-fielder{width:112px;height:160px;right:2%;bottom:-14%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}

.sharingHelp{color:#4b6b62;font-size:14px;line-height:1.5;margin:0 auto 12px;max-width:530px}

/* V3.5: result screen scrolling and share/preview controls */
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
body[data-view="results"] main{padding-bottom:90px;min-height:100vh}
body[data-view="results"] .results{height:auto;min-height:0;overflow:visible;max-height:none}
.share-main{background:#f3d343;color:#123e39;border:1px solid #d0a925;font-weight:900}
.sharewrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.sharewrap h3,.sharewrap .shareNote{flex-basis:100%}
.shareNote{line-height:1.5;overflow-wrap:anywhere}
#cardPreview{border:0;border-radius:18px;padding:18px;width:min(94vw,850px);max-height:90dvh;overflow-y:auto;box-shadow:0 16px 65px #0007}
#cardPreview::backdrop{background:#081c28ba}
#cardPreview img{display:block;max-width:100%;height:auto;margin:auto;border-radius:12px}
.preview-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.preview-head button{font-size:23px;background:transparent;border:0;padding:7px}
#cardPreview p{font-size:13px;color:#526a60;line-height:1.4}
@media(max-width:540px){.results{padding:5px 4px 30px}.results>h2{font-size:27px}.scorecard{padding:15px 10px}.coursePitch{padding:16px;margin:16px auto}.coursePitch h3{font-size:21px}.sharewrap{margin:18px 0}.sharewrap button{min-height:46px}body[data-view="results"] main{padding-bottom:70px}}

/* Desktop score sharing */
.social-linkedin{background:#0a66c2;color:#fff;border-color:#0a66c2}.social-linkedin:hover{background:#07549f;color:#fff}.social-facebook{background:#1877f2;color:#fff;border-color:#1877f2}.social-facebook:hover{background:#0f60cc;color:#fff}