*{box-sizing:border-box}body{margin:0;overflow:hidden;color:#263e36;background:#b8e6ef;font-family:Arial,Helvetica,sans-serif}canvas{display:block;width:100vw;height:100vh}header{position:absolute;top:28px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;gap:12px;align-items:center;font-size:25px;font-weight:1000;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:2.4px;margin-top:5px}.tomato{color:#e64c33;font-size:48px;text-shadow:3px 3px 0 #f7c65a}.badge,.pill{font-size:10px;font-weight:bold;letter-spacing:1px;background:#fff8e8dd;border:1px solid #fff;padding:12px 16px;border-radius:30px}.badge b{margin-left:16px;color:#da583a}.score{position:absolute;left:36px;top:120px;background:#fff8e8e8;border-radius:15px;padding:17px 22px;box-shadow:0 5px 0 #263e3615}.score small{letter-spacing:2px;font-size:9px}.score div{display:flex;gap:9px;align-items:baseline;margin-top:10px}.score strong{font-size:30px}.score span{font-size:9px;margin-right:14px}nav{position:absolute;right:36px;top:118px;display:flex;gap:8px}button{cursor:pointer;border:0;border-radius:10px;padding:14px 18px;font-weight:700;font-size:13px;background:#e84e34;color:#fff9ea;box-shadow:0 4px 0 #a73b29;transition:transform .12s}button:hover{transform:translateY(-2px)}button:active{transform:translateY(2px)}button.light{background:#fff8e8;color:#30473d;box-shadow:0 4px 0 #c7c6a6}footer{position:absolute;bottom:26px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:15px}footer>span:nth-child(2){background:#fff8e8e8;padding:14px 22px;border-radius:30px}i{margin:0 10px;color:#e84e34}#cross{position:absolute;pointer-events:none;color:white;text-shadow:0 1px 3px #273d35;font:30px Arial;transform:translate(-50%,-50%);display:none}#toast{position:absolute;left:50%;top:23%;transform:translateX(-50%) rotate(-5deg);font-weight:1000;font-size:36px;color:#fff8dd;text-shadow:3px 3px #db4a32;pointer-events:none}dialog{border:0;border-radius:24px;padding:28px;width:540px;max-width:94vw;color:#263e36;background:#fff8e8;box-shadow:0 25px 100px #17352c66}dialog::backdrop{background:#16342b66;backdrop-filter:blur(4px)}.modalhead{display:flex;align-items:center;justify-content:space-between;gap:15px}small{font-size:10px;letter-spacing:1.5px}h1{margin:8px 0 0;font-size:34px;letter-spacing:-1.5px}p{font-size:13px;color:#627269;line-height:1.6}#slots{display:flex;gap:8px;margin:22px 0}#slots button{background:#e8e6d3;color:#30473d;box-shadow:none;flex:1;padding:12px}#slots button.active{background:#2d5c48;color:white}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-size:11px;font-weight:700;display:flex;flex-direction:column;gap:8px}select,input{width:100%;height:40px;border:1px solid #c7cdbb;background:white;border-radius:8px;padding:6px;color:#30473d}input[type=color]{padding:3px}.modalfoot{display:flex;justify-content:space-between;align-items:end;margin:25px 0 18px;gap:20px}.saved{color:#748075;font-size:9px}#error{position:absolute;top:40%;left:20%;right:20%;padding:30px;background:#fff8e8;border-radius:20px}@media(max-width:760px){header{left:16px;right:16px;top:16px}.badge{display:none}.score{left:16px;top:90px;padding:12px}nav{right:16px;top:90px;flex-direction:column}nav button{padding:10px}footer{left:12px;right:12px;bottom:12px}footer .pill{display:none}.brand{font-size:21px}}
:root{--cream:#fff8e8;--forest:#2d5c48;--tomato:#e84e34}
dialog{width:1000px;max-height:92vh;padding:26px 30px;overflow:auto}
.modalhead h1{font-size:36px}.modalhead #progress{font-size:11px;font-weight:bold;color:var(--forest);white-space:nowrap}
.countbar{display:flex;align-items:center;gap:24px;margin:16px 0;font-size:12px}#counts{display:flex;gap:7px}#counts button{width:39px;padding:10px;background:#e8e6d3;color:var(--forest);box-shadow:none}#counts button.active{background:var(--forest);color:white}
#slots{margin:10px 0 20px;justify-content:flex-start}#slots button{max-width:110px;display:flex;align-items:center;justify-content:center;padding:4px 10px;gap:8px}#slots svg{height:47px;width:40px}#slots span{font-size:12px}
.creatorbody{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px}.previewpanel{background:#e8e8cf;border-radius:18px;padding:20px;text-align:center;align-self:start;position:sticky;top:0}#portrait svg{width:100%;height:230px}.previewpanel h2{font-size:20px;margin:10px 0}.previewpanel #person-status{display:block;font-size:11px;line-height:1.6;min-height:35px}.previewpanel button{margin-top:20px;width:100%}.audio-choice{display:flex;flex-direction:row;align-items:center;text-align:left;font-size:11px;margin-top:24px;gap:8px}.audio-choice input{width:17px;height:17px;accent-color:var(--forest)}
#options{min-width:0}.optiongroup{margin-bottom:16px}.optiongroup h3{font-size:12px;margin:0 0 8px}.optionrow{display:flex;gap:6px;align-items:center}.optiontrack{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 2px 9px;scrollbar-width:thin;scrollbar-color:#b6c2a5 transparent;flex:1;min-width:0}.optioncard{flex:0 0 98px;padding:6px;background:#f0eddf;color:#30473d;box-shadow:none;border:2px solid transparent;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.optioncard.chosen{border-color:var(--forest);background:#dce7cf}.optioncard svg{width:64px;height:74px}.optioncard .swatch{display:block;height:28px;width:70px;border-radius:6px;border:1px solid #0002}.arrow{background:#e8e6d3;color:var(--forest);box-shadow:none;padding:8px;font-size:22px}
.creatoractions{display:flex;gap:12px;align-items:center;border-top:1px solid #d8ddca;padding-top:18px;margin-top:14px}.creatoractions #instruction{font-size:11px;line-height:1.5;flex:1}.creatoractions button{white-space:nowrap}.creatoractions button:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.saved{display:block;margin-top:16px}button:focus-visible{outline:3px solid #ebad40;outline-offset:3px}
@media(max-width:720px){dialog{padding:20px}.creatorbody{grid-template-columns:1fr}.previewpanel{position:static;padding:12px;display:grid;grid-template-columns:100px 1fr;gap:6px;text-align:left}#portrait{grid-row:1/5}#portrait svg{height:140px}.previewpanel button{margin:0}.audio-choice{margin:0}.creatoractions{flex-wrap:wrap}.creatoractions #instruction{flex-basis:100%}.countbar{gap:12px}.modalhead h1{font-size:28px}.optioncard{flex-basis:90px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.creatoractions{position:sticky;bottom:-26px;background:var(--cream);padding:16px 0;z-index:3;box-shadow:0 -8px 14px var(--cream)}

#power{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);background:#fff8e8ef;border-radius:14px;padding:14px 20px;width:300px;text-align:center;pointer-events:none}#power[hidden]{display:none}#power strong{font-size:11px;letter-spacing:1.5px}.powertrack{height:12px;background:#dcdcc4;border-radius:9px;margin:9px 0;overflow:hidden}#powerfill{display:block;height:100%;background:linear-gradient(90deg,#f2c654,#e84e34);width:0}#power small{font-size:9px;letter-spacing:0}footer{font-size:11px}#toast{font-size:clamp(18px,2.5vw,34px);text-align:center;max-width:75vw}

.modalhead h1#creator-title{font-size:clamp(30px,3.8vw,50px);line-height:1.05;letter-spacing:-2px;max-width:700px}
.creator-tagline{font-size:clamp(21px,2.3vw,29px);line-height:1.3;font-weight:700;color:var(--forest);margin:14px 0 12px}.creator-tagline em{font-style:normal;color:var(--tomato)}
#range-message{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:min(520px,40vw);text-align:center;pointer-events:none;text-shadow:0 1px 0 #fff8e8}#range-message[hidden]{display:none}#range-message strong{display:block;font-size:clamp(18px,2.4vw,32px);letter-spacing:-1px;line-height:1.15}#range-message span{display:block;font-size:12px;line-height:1.5;margin-top:7px;font-weight:600}
#game{cursor:none}#cross{width:36px;height:36px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 2px #263e36,0 2px 8px #0005;color:#fff;z-index:2;background:linear-gradient(#fff,#fff) center/2px 12px no-repeat,linear-gradient(#fff,#fff) center/12px 2px no-repeat}
#cross:before,#cross:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;box-shadow:0 0 1px #263e36}#cross:before{width:48px;height:2px;z-index:-1}#cross:after{height:48px;width:2px;z-index:-1}.reticle-dot{position:absolute;inset:8px;border-radius:50%;background:#263e36}
#aim-label{position:absolute;left:50%;top:45px;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:1.5px;font-weight:700;text-shadow:0 1px 3px #000;background:#263e36cf;padding:4px 7px;border-radius:4px}
#cross.on-target{border-color:#ffcc5c}#cross.charging{box-shadow:0 0 0 3px #e84e34,0 2px 8px #0005}.on-target #aim-label{color:#ffdc7b}
@media(max-width:900px){#range-message{top:190px;width:80vw}#range-message strong{font-size:22px}#range-message span{font-size:11px}}

#range-message{top:20px;width:min(580px,44vw);background:#fff8e8f5;border:1px solid #ffffff;border-radius:15px;padding:12px 18px;box-shadow:0 4px 14px #28473520;text-shadow:none}#range-message .range-name{display:block;font-size:11px;letter-spacing:3px;color:#ad3d29;margin-bottom:5px}#range-message strong{font-size:clamp(19px,2vw,28px)}#range-message span{font-size:12px;color:#263e36}.badge{display:none}#game{cursor:default}footer>span:nth-child(2){font-weight:bold}@media(max-width:1000px){#range-message{top:180px;width:80vw;max-width:580px}.brand{font-size:20px}}
.namefield{margin:12px 0;text-align:left}.namefield input{font-size:12px}.nameplate{position:absolute;transform:translate(-50%,-50%);background:#fff8e8ed;color:#263e36;padding:5px 9px;border-radius:6px;font-size:11px;font-weight:bold;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 2px 4px #0002}#nameplates{pointer-events:none}#rankings{width:800px}#rankings h1{font-size:30px}.rankrow{display:grid;grid-template-columns:38px 70px 1fr auto;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid #d9dfce}.rankrow svg{width:65px;height:78px}.rankrow strong{display:block;font-size:14px}.rankrow small{display:block;margin-top:8px;font-size:10px;letter-spacing:0;line-height:1.5}.rankrow>b{font-size:13px}#rank-list{margin:20px 0}nav{top:135px;gap:6px}nav button{padding:12px 13px;font-size:12px}@media(max-width:760px){.rankrow{grid-template-columns:25px 45px 1fr;gap:8px}.rankrow svg{width:45px}.rankrow>b:last-child{grid-column:3}nav{top:100px}}

#intro{width:700px;background:#fff8e8}#intro h1{font-size:clamp(50px,8vw,88px);line-height:.9;margin:22px 0;letter-spacing:-5px;color:#2d5c48}#intro .creator-tagline{font-size:25px}.intro-steps{margin:24px 0}.intro-steps p{font-size:13px}.intro-steps b{color:#2d5c48;margin-right:8px}#intro-start{width:100%;font-size:16px}#intro::backdrop{background:#274b3cb3;backdrop-filter:blur(6px)}
.photoassist{margin:16px 0;text-align:left;border:1px dashed #a6b798;border-radius:10px;padding:10px}.photoassist input{font-size:10px;height:auto;padding:6px;width:100%}.photoassist small,.photoassist p{font-size:10px;letter-spacing:0;line-height:1.5;margin:7px 0}.photoassist canvas{width:100%;height:auto;cursor:crosshair;border-radius:8px;margin-top:8px}.photoassist canvas[hidden],#photo-tools[hidden]{display:none}.photoassist button{font-size:11px;margin-top:7px}.photoassist select{font-size:11px}.previewpanel{position:static}
#feedback{position:absolute;left:30px;bottom:105px;width:min(290px,25vw);pointer-events:none;z-index:3}#feedback p{font-size:12px;line-height:1.4;background:#fff8e8eb;border-left:3px solid #e84e34;padding:9px 12px;border-radius:5px;margin:7px 0;color:#263e36}
#bonus-hud{position:absolute;right:30px;bottom:100px;background:#fff8e8ed;border-radius:12px;padding:13px 17px;max-width:250px}#bonus-hud b{display:block;font-size:12px}#bonus-hud small{display:block;font-size:10px;letter-spacing:0;line-height:1.4;margin-top:7px}#gift-label{position:absolute;transform:translateX(-50%);background:#2d5c48;color:#fff8e8;padding:7px 10px;font-weight:bold;font-size:10px;border-radius:6px;pointer-events:none}#gift-label[hidden]{display:none}
body:has(#intro[open]) header,body:has(#intro[open]) nav,body:has(#intro[open]) footer,body:has(#intro[open]) .score,body:has(#intro[open]) #range-message,body:has(#intro[open]) #bonus-hud{visibility:hidden}
@media(max-width:760px){#feedback{left:12px;bottom:110px;width:45vw}#feedback p{font-size:10px}#bonus-hud{right:12px;max-width:42vw;bottom:100px;padding:9px}#bonus-hud small{display:none}}

#feedback{display:none!important}#reactions{position:absolute;inset:0;pointer-events:none}.reaction{position:absolute;transform:translate(-50%,-100%);background:#fff8e8;color:#263e36;border:2px solid #2d5c48;border-radius:14px;padding:9px 13px;max-width:190px;font-weight:bold;font-size:13px;line-height:1.3;text-align:center;box-shadow:0 3px 0 #2d5c4833}.reaction:after{content:"";position:absolute;bottom:-8px;left:50%;width:12px;height:12px;background:#fff8e8;border-right:2px solid #2d5c48;border-bottom:2px solid #2d5c48;transform:translateX(-50%) rotate(45deg)}#photo-tools label{margin-top:10px;font-size:10px}#photo-tools input[type=range]{height:24px;padding:0;accent-color:#2d5c48}#photo-auto:disabled{opacity:.5;cursor:wait}.photoassist small{font-size:10px}