*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08090b;font-family:Georgia,serif}body{display:grid;place-items:center}#wrap{width:min(100vw,125vh);aspect-ratio:5/4;position:relative;box-shadow:0 0 60px #000}#scene{position:absolute;inset:0;overflow:hidden;background:#71c7ed}.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.hidden{display:none!important}.background{z-index:0}.enemyShip{z-index:1;left:-10%;top:-9%;width:120%;height:100%;animation:shipDrift 9s ease-in-out infinite alternate}.screenMul{z-index:2;mix-blend-mode:multiply}.smoke{z-index:6;opacity:.66;mix-blend-mode:screen;animation:smoke 3.5s ease-in-out infinite alternate}.smoke2{animation-delay:-1.7s;opacity:.5}.foreground{z-index:8}.coalStanding,.coalFallen{z-index:10}.multiply{mix-blend-mode:multiply}.screen{mix-blend-mode:screen}.glow{z-index:11;mix-blend-mode:screen;animation:firePulse .55s ease-in-out infinite alternate}#coalFallen,#coalFallenGlow,#coalFallenMul{left:-4.6%;top:-5.8%;width:109.3%;height:111.6%}
#guyRig{position:absolute;z-index:14;left:9.45%;bottom:20%;width:12.4%;aspect-ratio:320/950;pointer-events:none}#guybrush{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 2px #0006)}#guybrush.actionFeet{clip-path:inset(0 0 22% 0)}.actionFrame{z-index:15;display:none;transform:translateY(-1.12%);transform-origin:0 0}.actionFrame#actionMultiplyFrame{z-index:13}.actionFrame#actionGlowFrame{z-index:16}
#binding{position:absolute;z-index:18;left:7.6%;top:51.5%;width:21.8%;height:20.5%;object-fit:fill;pointer-events:none;filter:drop-shadow(0 2px 1px #0004)}
#knifeThrow,#knifeStuck{position:absolute;display:none;pointer-events:none;filter:drop-shadow(2px 3px 2px #0008)}#knifeThrow{z-index:30;width:15%;left:105%;top:31%}#knifeThrow.flying{display:block;animation:knifeFlight .68s linear forwards}#knifeStuck{z-index:17;left:18.35%;top:34%;width:7%;transform:scaleX(-1) rotate(79deg)}#knifeStuck.stuck{display:block}
#copyrightParrot{position:absolute;z-index:80;left:4%;bottom:24%;width:20%;opacity:0;pointer-events:none}#copyrightParrot.pop{opacity:1}
.hot{position:absolute;z-index:40;border:2px solid transparent}.enemyEdge{right:0;top:25%;width:5.5%;height:43%}.ropeHot{left:10%;top:15%;width:26%;height:48%}.shipHot{left:35%;top:2%;width:61%;height:36%}.brazierHot{left:0;top:55%;width:25%;height:35%}.coalHot{left:7%;top:68%;width:28%;height:28%}.cannonHot{left:75%;top:32%;width:23%;height:35%}.holdHot{left:55%;top:60%;width:28%;height:28%}
#subtitle{position:absolute;z-index:100;left:8%;right:8%;bottom:10%;min-height:38px;padding:6px 12px;text-align:center;color:#fff;font:bold 23px/1.3 Georgia;text-shadow:0 2px 2px #000,2px 2px 3px #000,-2px -2px 3px #000;pointer-events:none}#hover,#objective,#help,#verbLabel{position:absolute;z-index:90;color:#fff;text-shadow:2px 2px #000;pointer-events:none;font-family:Arial}#hover{left:20%;bottom:7%;font-weight:bold}#objective{right:2%;top:2%}#help{right:2%;bottom:2%;font-size:12px}#verbLabel{left:20%;bottom:3%;color:#f5e8b2;font-weight:bold}
#verbWheel{position:absolute;z-index:90;left:1.2%;bottom:1.2%;width:19%;aspect-ratio:1}.wheel{position:absolute;inset:0;width:100%;height:100%}.verbIcon{position:absolute;border:0;background:transparent;padding:0;opacity:.92}.verbIcon img{width:100%;height:100%;object-fit:contain}.verbIcon.active,.verbIcon:hover{transform:scale(1.18);filter:drop-shadow(0 0 6px #ffe98b)}.verbIcon.look{width:27%;height:27%;left:6%;top:6%}.verbIcon.talk{width:30%;height:24%;right:3%;top:8%}.verbIcon.use{width:29%;height:31%;right:5%;bottom:3%}.verbIcon.pointer{width:31%;height:29%;left:3%;bottom:4%;pointer-events:none}
#ending{display:none;position:absolute;z-index:120;inset:0;background:#000b;color:#fff;place-items:center;align-content:center;gap:16px;text-align:center}#ending.show{display:grid}#ending b{font-size:52px;color:#ffd86a}#ending span{font-size:24px}.spark{position:absolute;z-index:12;width:1.5%;aspect-ratio:1;background:url('assets/scene/spark.png') center/contain no-repeat;animation:sparkFly .9s linear forwards;pointer-events:none}
#scene.cursor-look,#scene.cursor-look .hot{cursor:url('assets/ui/cursor_eye.png') 24 24,auto}#scene.cursor-talk,#scene.cursor-talk .hot{cursor:url('assets/ui/cursor_mouth.png') 24 24,auto}#scene.cursor-use,#scene.cursor-use .hot{cursor:url('assets/ui/cursor_hand.png') 16 12,auto}
@keyframes shipDrift{to{transform:translateX(3%) translateY(.5%)}}@keyframes smoke{from{transform:translate(0,1%)}to{transform:translate(1%,-1.5%)}}@keyframes firePulse{from{opacity:.62}to{opacity:1;filter:brightness(1.22)}}@keyframes sparkFly{to{opacity:0;transform:translate(35px,-100px) scale(1.2)}}@keyframes knifeFlight{from{left:105%;top:27%}to{left:18.35%;top:34%}}
/* Clean 1.1 interaction pass */
#scene{cursor:auto}
#scene.cursor-look,#scene.cursor-talk,#scene.cursor-use{cursor:auto}
#scene.cursor-look .hot{cursor:url('assets/ui/cursor_eye.png') 24 24,pointer}
#scene.cursor-talk .hot{cursor:url('assets/ui/cursor_mouth.png') 24 24,pointer}
#scene.cursor-use .hot{cursor:url('assets/ui/cursor_hand.png') 16 12,pointer}
#scene.cursor-neutral .hot{cursor:pointer}
.hot{border:2px solid transparent;border-radius:12px;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}
.hot:hover{border-color:rgba(255,241,139,.95);box-shadow:0 0 8px #fff7a8,0 0 18px #ffd95c,0 0 30px rgba(255,180,40,.8),inset 0 0 14px rgba(255,238,130,.18);background:rgba(255,225,90,.035)}
.verbIcon.pointer{display:none!important}
.coalFallFrame{z-index:15;display:none;transform:translateY(-1.12%);transform-origin:0 0}.coalFallFrame#coalFallMultiplyFrame{z-index:13}.coalFallFrame#coalFallGlowFrame{z-index:16}
#knifeThrow{z-index:30;width:15%;left:106%;top:27%;transform-origin:50% 50%}
#knifeThrow.flying{display:block;animation:knifeSpinAcross 1.05s linear forwards}
#knifeStuck{display:none!important}
#copyrightParrot.pop{opacity:1;animation:parrotEntrance .32s cubic-bezier(.2,1.5,.45,1),parrotBob .55s ease-in-out .32s infinite alternate,parrotFlutter .14s ease-in-out .32s infinite alternate;transform-origin:45% 80%}
@keyframes knifeSpinAcross{from{left:106%;top:27%;transform:rotate(0deg)}to{left:-22%;top:39%;transform:rotate(-1440deg)}}
@keyframes parrotEntrance{from{opacity:0;transform:translateY(22%) scale(.72) rotate(-8deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes parrotBob{from{transform:translateY(-2%) rotate(-1.5deg)}to{transform:translateY(2%) rotate(1.5deg)}}
@keyframes parrotFlutter{0%,100%{filter:drop-shadow(0 3px 2px #0007) brightness(1)}50%{filter:drop-shadow(0 3px 2px #0007) brightness(1.12)}}


/* Clean 1.4 fancy feedback pass */
#scene,#scene.cursor-neutral{cursor:url('assets/ui/bone_cursor.png') 20 20,auto!important}
#scene.cursor-neutral .hot{cursor:url('assets/ui/bone_cursor.png') 20 20,pointer!important}
#fxLayer{position:absolute;inset:0;z-index:115;pointer-events:none;overflow:hidden}
#vignette{position:absolute;inset:0;box-shadow:inset 0 0 120px 22px rgba(5,3,0,.44);mix-blend-mode:multiply}
#grain{position:absolute;inset:-30%;opacity:.075;background-image:repeating-radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1px 4px);background-size:7px 7px;animation:grainJitter .22s steps(2) infinite;mix-blend-mode:overlay}
#flash{position:absolute;inset:0;background:#fff7c8;opacity:0}
#flash.bang{animation:screenFlash .34s ease-out}
#actionWord{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%) rotate(-5deg) scale(.45);font:900 clamp(30px,5vw,82px)/.9 Georgia,serif;letter-spacing:.05em;color:#ffe77b;text-shadow:4px 4px 0 #5c1d0c,-2px -2px 0 #fff5bd,0 0 18px #ff8c22;opacity:0}
#actionWord.show{animation:actionPop .72s cubic-bezier(.2,1.5,.3,1)}
#toast{position:absolute;left:50%;bottom:17%;transform:translateX(-50%) translateY(10px);padding:7px 18px;border-radius:20px;background:rgba(20,10,2,.68);border:1px solid rgba(255,226,130,.55);font:bold 17px Georgia,serif;color:#ffeaa1;text-shadow:0 2px 2px #000;opacity:0;white-space:nowrap;backdrop-filter:blur(2px)}
#toast.show{animation:toastIn 1.15s ease both}
#verbLabel{transition:transform .14s ease,color .14s ease,text-shadow .14s ease}
#verbLabel.fx{transform:scale(1.08);color:#fff0a6;text-shadow:0 0 8px #ffcf54,0 2px 2px #000}
#hover{transition:opacity .12s,transform .12s,filter .12s}
#hover:not(:empty){filter:drop-shadow(0 0 5px rgba(255,220,100,.55));animation:hoverPulse 1.3s ease-in-out infinite alternate}
#scene.shake{animation:screenShake .34s linear}
#copyrightParrot.pop::after{content:''}
.ember{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffcf55;box-shadow:0 0 7px #ff6a00;animation:emberRise 1.3s ease-out forwards}
.splashText{position:absolute;font:900 20px Georgia,serif;color:#dff8ff;text-shadow:0 2px 2px #123,0 0 8px #fff;animation:splashFloat 1s ease-out forwards}
@keyframes screenFlash{0%{opacity:.8}18%{opacity:.35}100%{opacity:0}}
@keyframes screenShake{0%,100%{transform:translate(0)}15%{transform:translate(-5px,3px)}30%{transform:translate(6px,-2px)}48%{transform:translate(-4px,-2px)}65%{transform:translate(3px,2px)}82%{transform:translate(-2px,1px)}}
@keyframes actionPop{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(.35)}18%{opacity:1;transform:translate(-50%,-50%) rotate(4deg) scale(1.18)}62%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(.98)}100%{opacity:0;transform:translate(-50%,-58%) rotate(-6deg) scale(1.08)}}
@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(12px)}15%,72%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-7px)}}
@keyframes hoverPulse{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes grainJitter{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes emberRise{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),-90px) scale(.2)}}
@keyframes splashFloat{0%{opacity:0;transform:translateY(12px) scale(.7)}20%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-35px) scale(.9)}}

/* Clean 1.5 battle cannon */
#scene.distantShake{animation:distantShake .28s linear}
@keyframes distantShake{0%,100%{transform:translate(0)}30%{transform:translate(-2px,1px)}60%{transform:translate(2px,-1px)}}

/* Clean 1.7 atmosphere overload */
#battleGlow{position:absolute;inset:0;background:radial-gradient(circle at 78% 35%,rgba(255,115,30,.22),transparent 24%),radial-gradient(circle at 62% 58%,rgba(255,195,70,.10),transparent 18%);opacity:.45;animation:battleGlow 3.8s ease-in-out infinite alternate;mix-blend-mode:screen}
#seaMist{position:absolute;left:-20%;right:-20%;bottom:-3%;height:30%;background:repeating-linear-gradient(170deg,transparent 0 25px,rgba(210,240,255,.08) 28px 34px,transparent 38px 70px);filter:blur(5px);animation:mistDrift 7s linear infinite;opacity:.65}
#battleParticles{position:absolute;inset:0;overflow:hidden}
.ash,.spray,.battleSpark,.smokePuff{position:absolute;pointer-events:none}
.ash{width:3px;height:3px;border-radius:50%;background:#ffd078;box-shadow:0 0 6px #ff7b22;animation:ashDrift var(--dur) linear forwards}
.spray{width:4px;height:10px;border-radius:50%;background:rgba(220,247,255,.75);box-shadow:0 0 5px rgba(255,255,255,.55);animation:sprayFly 1.1s ease-out forwards}
.battleSpark{width:6px;height:2px;background:#fff0a0;box-shadow:0 0 7px #ff9c20;transform-origin:left center;animation:battleSpark .55s ease-out forwards}
.smokePuff{width:45px;height:28px;border-radius:50%;background:rgba(95,88,78,.25);filter:blur(7px);animation:puff 2.3s ease-out forwards}
#enemyShip{animation:shipDrift 4.8s ease-in-out infinite alternate,enemyBob 2.6s ease-in-out infinite alternate!important}
#copyrightParrot.pop{filter:drop-shadow(0 0 8px rgba(255,225,90,.38))}
@keyframes battleGlow{from{opacity:.28;filter:brightness(.9)}to{opacity:.62;filter:brightness(1.15)}}
@keyframes mistDrift{from{transform:translateX(-4%)}to{transform:translateX(8%)}}
@keyframes enemyBob{from{margin-top:-3px}to{margin-top:5px}}
@keyframes ashDrift{0%{opacity:0;transform:translate(0,10px)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(240deg)}}
@keyframes sprayFly{0%{opacity:0;transform:translate(0,15px) rotate(10deg)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-80px) rotate(-25deg)}}
@keyframes battleSpark{0%{opacity:1;transform:translate(0,0) scaleX(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scaleX(.2)}}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.45)}25%{opacity:.7}100%{opacity:0;transform:translate(var(--dx),-55px) scale(2.1)}}

/* Clean 1.8 radial action wheel */
#verbWheel{position:absolute!important;z-index:150!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:min(25vw,300px)!important;height:min(25vw,300px)!important;transform:translate(-50%,-50%) scale(.55) rotate(-12deg)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .18s ease,transform .30s cubic-bezier(.2,1.35,.35,1),visibility .18s!important;filter:drop-shadow(0 15px 24px #000b)}
#verbWheel.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(-50%,-50%) scale(1) rotate(0)!important}
#wheelBackdrop{position:absolute;z-index:145;inset:0;background:radial-gradient(circle at center,rgba(20,11,3,.08) 0 15%,rgba(0,0,0,.38) 52%,rgba(0,0,0,.62));opacity:0;visibility:hidden;pointer-events:none;transition:.18s}
#wheelBackdrop.open{opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:blur(1.5px)}
#actionHint{position:absolute;z-index:130;left:50%;bottom:2.3%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid rgba(255,223,120,.35);border-radius:18px;background:rgba(15,8,2,.55);font:12px/1.1 Georgia,serif;color:#f4d99b;letter-spacing:.04em;text-shadow:0 1px 2px #000;backdrop-filter:blur(3px);animation:hintBreathe 2.2s ease-in-out infinite alternate}
#actionHint b{font-size:11px;padding:3px 6px;border:1px solid #d8b96888;border-radius:5px;background:#2a190b;color:#fff1bd;box-shadow:inset 0 0 5px #0008}
#actionHint span{margin-left:3px;font-weight:bold;color:#ffe89c}
.deckDust{position:absolute;width:8px;height:3px;border-radius:50%;background:rgba(202,169,112,.38);filter:blur(1px);animation:dustSkitter 1.7s ease-out forwards}
.impactRing{position:absolute;width:20px;height:20px;border:3px solid rgba(255,220,120,.7);border-radius:50%;transform:translate(-50%,-50%);animation:ringBurst .7s ease-out forwards}
#scene.battlePulse #battleGlow{animation:battlePulse .5s ease-out}
@keyframes hintBreathe{from{opacity:.66;box-shadow:0 0 0 rgba(255,190,70,0)}to{opacity:1;box-shadow:0 0 15px rgba(255,190,70,.16)}}
@keyframes dustSkitter{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.8)}}
@keyframes ringBurst{0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes battlePulse{0%{opacity:.3}20%{opacity:1;filter:brightness(1.7)}100%{opacity:.4}}

/* Clean 1.11 */
#enemyShip{margin-left:-2.4%!important}

/* Clean 1.12: object hover title */
#hover{
 position:absolute!important;
 z-index:140!important;
 left:50%!important;
 top:4.5%!important;
 right:auto!important;
 bottom:auto!important;
 transform:translateX(-50%)!important;
 min-width:0!important;
 padding:6px 15px!important;
 border-radius:16px!important;
 background:rgba(14,8,2,.58)!important;
 border:1px solid rgba(255,225,128,.38)!important;
 font:bold 18px/1.1 Georgia,serif!important;
 letter-spacing:.08em!important;
 color:#ffe99d!important;
 text-align:center!important;
 text-shadow:0 2px 2px #000,0 0 9px rgba(255,199,68,.65)!important;
 pointer-events:none!important;
 opacity:0;
 transition:opacity .12s ease,transform .12s ease!important;
 backdrop-filter:blur(2px);
}
#hover:not(:empty){
 opacity:1!important;
 transform:translateX(-50%) translateY(0)!important;
 animation:hoverTitleGlow 1.2s ease-in-out infinite alternate!important;
}
@keyframes hoverTitleGlow{
 from{filter:drop-shadow(0 0 3px rgba(255,210,90,.25))}
 to{filter:drop-shadow(0 0 9px rgba(255,210,90,.7))}
}

/* Clean 1.13: hover object title attached above action-wheel hint */
#hover{
 top:auto!important;
 bottom:6.7%!important;
 left:50%!important;
 transform:translateX(-50%)!important;
}
#hover:not(:empty){
 transform:translateX(-50%) translateY(0)!important;
}
#actionHint{bottom:2.3%!important}

/* Clean 1.14: restore object title + attach selected action to tooltip */
#hover{
 top:4.5%!important;
 bottom:auto!important;
 left:50%!important;
 transform:translateX(-50%)!important;
}
#hover:not(:empty){
 transform:translateX(-50%) translateY(0)!important;
}
#verbLabel{
 position:absolute!important;
 z-index:131!important;
 left:50%!important;
 top:auto!important;
 right:auto!important;
 bottom:6.3%!important;
 transform:translateX(-50%)!important;
 width:auto!important;
 min-width:0!important;
 padding:3px 12px!important;
 border-radius:12px!important;
 background:rgba(15,8,2,.48)!important;
 border:1px solid rgba(255,224,125,.25)!important;
 font:bold 14px/1.1 Georgia,serif!important;
 color:#ffe89c!important;
 letter-spacing:.08em!important;
 text-align:center!important;
 text-shadow:0 1px 2px #000,0 0 6px rgba(255,205,80,.35)!important;
 pointer-events:none!important;
 white-space:nowrap!important;
}
#actionHint{bottom:2.3%!important}

/* Clean 1.16: selected verb belongs to the action wheel */
#verbLabel{
 position:absolute!important;
 z-index:151!important;
 left:50%!important;
 top:calc(50% - min(25vw,300px)/2 - 42px)!important;
 right:auto!important;
 bottom:auto!important;
 transform:translateX(-50%) translateY(8px)!important;
 padding:5px 14px!important;
 border-radius:14px!important;
 background:rgba(15,8,2,.68)!important;
 border:1px solid rgba(255,224,125,.34)!important;
 font:bold 16px/1.1 Georgia,serif!important;
 color:#ffe89c!important;
 letter-spacing:.1em!important;
 text-align:center!important;
 text-shadow:0 1px 2px #000,0 0 7px rgba(255,205,80,.45)!important;
 white-space:nowrap!important;
 pointer-events:none!important;
 opacity:0!important;
 visibility:hidden!important;
 transition:opacity .18s ease,transform .30s cubic-bezier(.2,1.35,.35,1),visibility .18s!important;
}
#verbWheel.open ~ #verbLabel{
 opacity:1!important;
 visibility:visible!important;
 transform:translateX(-50%) translateY(0)!important;
}

/* Clean 1.17: smaller flying knife */
#knifeThrow{width:11%!important}