.spooky-map{filter:hue-rotate(165deg) saturate(1.45) brightness(.35) contrast(1.15)}
/* Repeated game-button taps are controls, not browser zoom gestures. */
#game-shell button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.story-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,3,14,.7),transparent 55%),linear-gradient(0deg,#08050eea,transparent 62%);pointer-events:none}
#story-screen{align-items:flex-end;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));gap:1rem}
.story-caption{position:relative;z-index:1;max-width:min(680px,66vw);padding:1rem 1.25rem;border-left:6px solid #d68aff;background:#11091eb8;box-shadow:7px 7px 0 #210a32}
.story-caption span{color:#f4beff;font-size:clamp(.8rem,1.3vw,1rem);font-weight:900;letter-spacing:.12em}
.story-caption h2{margin:.35rem 0;color:#fff1c7;font-size:clamp(1.55rem,3.2vw,2.8rem);line-height:1.05;text-shadow:3px 3px #4a165d}
.story-caption p{margin:0;font-size:clamp(.9rem,1.7vw,1.18rem);line-height:1.3;text-shadow:2px 2px #000}
.story-actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex:none}.story-actions .text-button{color:#fff}
.story-progress{position:absolute;z-index:2;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,#dc83ff var(--progress,25%),#372045 var(--progress,25%))}
#unlock-screen .unlock-card{border-color:#be72ef;background:linear-gradient(135deg,#421666,#110b1a 68%)}
#unlock-screen .unlock-card{grid-template-columns:minmax(0,54%) minmax(0,46%);width:min(1000px,96vw);height:min(490px,94dvh)}
.roster-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(4px,1vw,10px);min-height:0;padding:clamp(8px,1.5vw,16px);background:radial-gradient(circle at 50% 50%,#612580,#160a25 75%)}
.roster-art figure{position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;border:2px solid #9f67bb;border-radius:10px;background:#190b2a;box-shadow:0 3px 8px #0008}
.roster-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.95);image-rendering:auto}
.roster-art figcaption{position:absolute;bottom:0;left:0;right:0;padding:3px 2px;background:#10051fe8;text-align:center;color:#fff2c6;font-size:clamp(.46rem,.85vw,.73rem);font-weight:900;white-space:nowrap}
#unlock-screen .unlock-copy{min-width:0;padding:clamp(.6rem,2vw,1.4rem)}
#unlock-screen .unlock-copy h2{font-size:clamp(1.25rem,2.6vw,2.3rem)}
#unlock-screen .unlock-copy p{font-size:clamp(.72rem,1.2vw,.95rem);line-height:1.3}
#unlock-screen .code-row input{padding:.55rem;min-width:0}
#unlock-screen .code-row button{padding:.55rem .75rem}
#unlock-screen .unlock-copy label{color:#e9aaff}
#title-screen{isolation:isolate;flex-direction:column;justify-content:space-between;overflow:hidden;padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 36%,#472274 0,#190c37 44%,#060714 83%)}
#title-screen::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 80%,#b5448659,transparent 46%),repeating-linear-gradient(0deg,transparent 0 5px,#11091e45 6px 7px);pointer-events:none}
.title-tree{position:absolute;inset:0;z-index:-1;background:url('assets/retro/haunted-tree-v23.png') center 58% / auto 95% no-repeat;filter:brightness(.42) saturate(.8) blur(1px);opacity:.56;animation:title-breathe 5s ease-in-out infinite alternate;pointer-events:none}
.title-heading{position:relative;z-index:3;width:100%;text-align:center;filter:drop-shadow(0 7px 0 #190722)}
.title-overline{display:block;color:#eec7ff;font:bold clamp(.65rem,1.15vw,.9rem) monospace;letter-spacing:.26em;text-shadow:0 2px #130519}
#title-screen h1{max-width:none;margin:.12rem auto 0;line-height:.85;letter-spacing:-.055em;transform:skew(-4deg)}
#title-screen h1 span{display:block;color:#ffd45e;font:1000 clamp(2.7rem,8.5vw,7.4rem)/.85 system-ui,sans-serif;-webkit-text-stroke:clamp(1px,.28vw,4px) #291039;text-shadow:3px 4px 0 #f0652e,7px 8px 0 #2d1248,0 0 22px #af52ff}
#title-screen h1 small{display:block;margin-top:.38rem;color:#f6e7ff;font:1000 clamp(1.12rem,3.3vw,2.75rem)/1 system-ui,sans-serif;letter-spacing:.07em;-webkit-text-stroke:1px #3d165c;text-shadow:3px 3px 0 #8c3bc3,0 0 12px #3a123d}
.title-lineup{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1.1vw,16px);width:min(1100px,96vw);height:min(39dvh,235px);margin:auto auto 0}
.title-crew{position:relative;flex:0 1 clamp(76px,12.2vw,172px);width:clamp(76px,12.2vw,172px);margin:0;min-width:0;animation:title-rise 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--crew-order) * -.28s)}
.title-crew:nth-child(1){--crew-order:1}.title-crew:nth-child(2){--crew-order:2}.title-crew:nth-child(3){--crew-order:3}.title-crew:nth-child(4){--crew-order:4}.title-crew:nth-child(5){--crew-order:5}.title-crew:nth-child(6){--crew-order:6}
.title-crew:nth-child(3),.title-crew:nth-child(4){z-index:2;flex-basis:clamp(90px,14vw,192px);width:clamp(90px,14vw,192px)}
.title-portrait{position:relative;aspect-ratio:1.05;overflow:hidden;border:3px solid #dc96ff;border-radius:42% 42% 32% 32%;background:#120722;box-shadow:0 0 0 3px #39154e,0 10px 0 #140c20,0 0 26px #b45adf88}
.title-crew:nth-child(3) .title-portrait{border-color:#ff9bd0}.title-crew:nth-child(6) .title-portrait{border-color:#ffdf69}
.title-portrait img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(2.04);image-rendering:auto}
.title-crew:nth-child(2) img{transform:scale(1.91)}
.title-crew figcaption{position:relative;margin-top:8px;color:#fff1c6;text-align:center;font:bold clamp(.56rem,.85vw,.78rem)/1.1 monospace;text-shadow:2px 2px 0 #190b23,0 0 9px #190b23;white-space:nowrap}
.title-actions{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;padding-top:clamp(8px,1.5vh,18px)}
.title-start{min-width:clamp(170px,23vw,280px);padding:.56rem 1.3rem;border:3px solid #fff0a7;border-radius:8px;background:linear-gradient(#ffe274,#ff9c33);color:#281038;box-shadow:0 6px 0 #7e2e6c,0 9px 22px #000b;font:1000 clamp(1rem,2vw,1.42rem) monospace;letter-spacing:.06em;touch-action:manipulation}
.title-start:active{transform:translateY(4px);box-shadow:0 2px 0 #7e2e6c}
.title-start:focus-visible{outline:3px solid #fff;outline-offset:4px}
.title-actions p{margin:.42rem 0 0;color:#e8cafa;font:bold clamp(.68rem,1.1vw,.88rem) monospace;text-align:center;text-shadow:2px 2px 0 #12051d}
@keyframes title-rise{from{translate:0 3px}to{translate:0 -5px}}
@keyframes title-breathe{from{transform:scale(1)}to{transform:scale(1.03)}}
@media (max-height:520px){#title-screen{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}.title-overline{font-size:.59rem}#title-screen h1 span{font-size:clamp(2.25rem,7.8vw,4.2rem)}#title-screen h1 small{font-size:clamp(.9rem,2.55vw,1.5rem);margin-top:.23rem}.title-lineup{height:min(37dvh,150px)}.title-crew{flex-basis:clamp(62px,11.7vw,123px);width:clamp(62px,11.7vw,123px)}.title-crew:nth-child(3),.title-crew:nth-child(4){flex-basis:clamp(75px,13.4vw,137px);width:clamp(75px,13.4vw,137px)}.title-crew figcaption{font-size:clamp(.47rem,.9vw,.62rem);margin-top:5px}.title-actions{padding-top:4px}.title-start{min-width:165px;padding:.32rem 1rem;font-size:.88rem}.title-actions p{font-size:.6rem;margin:.22rem 0 0}}
@media (max-width:600px) and (orientation:portrait){#title-screen h1 span{font-size:clamp(2.7rem,13vw,5rem)}#title-screen h1 small{font-size:clamp(1.1rem,5vw,1.7rem)}.title-lineup{height:auto;flex-wrap:wrap;align-content:center;max-width:380px;gap:18px 12px}.title-crew,.title-crew:nth-child(3),.title-crew:nth-child(4){flex-basis:28%;width:28%}.title-crew figcaption{font-size:.54rem;white-space:normal}.title-tree{background-size:auto 75%}}
@media (prefers-reduced-motion:reduce){.title-tree,.title-crew{animation:none}}
@media (max-height:520px){#story-screen{padding:12px 22px 18px}.story-caption{max-width:62vw;padding:.6rem .85rem}.story-caption h2{font-size:clamp(1.35rem,3vw,2rem)}.story-caption p{font-size:.9rem}.story-actions .wood-button{padding:.5rem .8rem}#unlock-screen .unlock-copy{padding:.7rem 1rem}#unlock-screen .unlock-copy p{font-size:.86rem;line-height:1.25}#unlock-screen .unlock-card>img{padding:1rem}}
#story-screen{overflow:hidden;background:repeating-linear-gradient(90deg,#090716 0 8px,#100b20 8px 16px)}
#story-screen .story-vignette{background:linear-gradient(0deg,#07030ee8 0,transparent 34%);z-index:1}
#story-screen .story-caption{z-index:2;border:3px solid #f3d37b;border-left:9px solid #c960f9;border-radius:3px;background:#180a2be8;box-shadow:6px 6px 0 #4a1e64;text-shadow:2px 2px #08040d}
#story-screen .story-caption h2{color:#ffe58e;letter-spacing:.015em;text-transform:uppercase;text-shadow:3px 3px #592163}
#story-screen .story-caption span{color:#e4a7ff}
#story-screen .story-actions{z-index:3}
#story-screen .story-progress{z-index:4}
#story-fx{position:absolute;left:50%;top:50%;width:min(100vw,177.78dvh);height:min(100dvh,56.25vw);transform:translate(-50%,-50%);image-rendering:pixelated;pointer-events:none}
.story-caption{animation:caption-arrive .6s ease-out both}
@keyframes caption-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media (max-width:900px), (max-height:520px){
 .story-caption{max-width:58vw;padding:.45rem .6rem;background:#11091ee8}
 .story-caption h2{font-size:clamp(1rem,2.6vw,1.5rem)}
 .story-caption p{font-size:clamp(.65rem,1.45vw,.85rem);line-height:1.2}
 .story-caption span{font-size:.58rem}
 .story-actions{gap:0}.story-actions .wood-button,.story-actions .text-button{font-size:.7rem;padding:.35rem .6rem}
 #unlock-screen .unlock-card{width:96vw;height:94dvh;grid-template-columns:52% 48%}
 #unlock-screen .unlock-copy{padding:.45rem .65rem}
 #unlock-screen .unlock-copy h2{font-size:clamp(1rem,2.2vw,1.4rem);margin:.05rem 0}
 #unlock-screen .unlock-copy p{font-size:clamp(.63rem,1.3vw,.78rem);margin:.18rem 0;line-height:1.18}
 #unlock-screen .unlock-copy .eyebrow,#unlock-screen .unlock-copy label{font-size:.56rem}
 #unlock-screen .code-row{margin:.2rem 0}
 #unlock-screen .code-row input,#unlock-screen .code-row button{font-size:.7rem;padding:.32rem .4rem}
 #unlock-screen .text-button{font-size:.7rem;padding:.2rem 0}
 .roster-art{padding:6px;gap:5px}
 .roster-art figcaption{font-size:clamp(.42rem,.9vw,.58rem)}
}
@media (prefers-reduced-motion:reduce){.story-caption{animation:none!important}}
.screen{background:#090313}
.start-card{background:radial-gradient(circle at 50% 20%,rgba(111,28,170,.54),rgba(8,2,16,.94) 70%);border:2px solid #a84cff;box-shadow:0 0 45px #6e18b788}
h1{max-width:min(940px,92vw);font-size:clamp(2.6rem,7.8vw,6.4rem);line-height:.86}
h1 span{color:#d367ff;-webkit-text-stroke:2px #230032;text-shadow:3px 4px 0 #ff9d19,6px 8px 0 #260035}
.story-card{position:relative;width:min(760px,92vw);padding:1.15rem 2rem 1.25rem 15rem;text-align:left;border-color:#b75cff;background:radial-gradient(circle at 20% 30%,#592087,#160521 66%)}
.story-card p{margin:.48rem 0}.story-card .eyebrow{color:#ffc93d}.story-card h2{font-size:clamp(1.35rem,3vw,2.35rem)}
.story-hero{position:absolute;left:1rem;bottom:.4rem;width:14rem;height:14rem;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 10px #c256ff)}
.pele-quote{color:#e6a2ff}.wood-button{border-color:#411054;background:linear-gradient(#ffd95e,#ac54ff);box-shadow:0 4px 0 #411054,0 7px 18px #0008}
.zone-label{color:#e6b5ff}.icon-button{background:#51166f}.quest{border-left-color:#c35aff;background:#15051edb}.quest span{color:#e99aff}
.action.fire{background:linear-gradient(#d687ff,#7025a7)}.action.boost{overflow:hidden;background:conic-gradient(#ec9cff var(--charge,100%),#241044 0);box-shadow:0 0 22px #a43cff99,0 5px 0 #211052}.action.boost::before{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#915cff,#32118c 72%);z-index:0}.action.boost b,.action.boost span,.action.boost i{position:relative;z-index:1;display:block}.action.boost b{font-size:1.2rem;line-height:1}.action.boost span{font-size:.48rem;letter-spacing:.05em}.action.boost i{font-size:.42rem;font-style:normal;color:#ffe68e}.action.boost:disabled{filter:grayscale(.7);opacity:.72}
.power{color:#f2d1ff;border-color:#c76aff;background:#40105fe8}.dialog{border-color:#b85cff;background:#16051ef5}
.map-card{border-color:#b75cff;background:linear-gradient(#3a0b58,#100318)}.region-map{background:radial-gradient(ellipse at 50% 15%,#4d0f6e 0 12%,transparent 13%),linear-gradient(145deg,#182c27,#0e0919);border-color:#7e3da1}.route{background:repeating-linear-gradient(#d79cff 0 12px,#733a91 13px 18px)}.map-note{color:#e7aaff}
#toast.comic{top:16%;width:max-content;max-width:min(78vw,570px);padding:.7rem 1.2rem;border:4px solid #271038;border-radius:.55rem;background:#ffe48c;color:#351038;text-align:center;font-size:clamp(1rem,2.7vw,1.65rem);font-weight:1000;line-height:1.15;letter-spacing:.035em;text-shadow:1px 1px 0 #fff4c8;box-shadow:5px 6px 0 #a831be,9px 10px 0 #21102d;white-space:normal}
#toast.comic::after{content:"";position:absolute;left:44%;bottom:-21px;width:22px;height:22px;background:#ffe48c;border-right:4px solid #271038;border-bottom:4px solid #271038;transform:rotate(45deg)}
#toast.boss-hint,#toast.boss-hint.show{top:4.1rem;right:max(.65rem,env(safe-area-inset-right));left:auto;width:auto;max-width:min(180px,23vw);padding:.35rem .5rem;border:2px solid #b66bdf;border-radius:.45rem;background:#24112eea;color:#fff;text-align:center;font-size:.7rem;line-height:1.2;letter-spacing:0;text-shadow:none;box-shadow:0 3px 10px #0008;transform:none}
#toast.boss-hint::after{display:none}
.boss-comic{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:#0b0714f2}
.comic-page{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);width:min(920px,95vw);height:min(460px,90vh);overflow:hidden;border:5px solid #f4d783;border-radius:12px;background:#21142d;box-shadow:9px 9px 0 #8e3bac,0 22px 60px #000}
.comic-art{display:grid;place-items:center;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,#67407c,#190c26 70%);border-right:5px solid #f4d783}
.comic-art img{display:block;width:90%;height:90%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 12px 16px #000b)}
.comic-art.giant{position:relative}.comic-art.giant img{position:absolute;left:0;top:50%;width:400%;max-width:none;height:auto;transform:translateY(-50%)}
.comic-art.cage img{width:auto;max-width:95%;height:95%}
.comic-art.tree img{width:110%;height:110%}
.comic-art.hero img{width:auto;height:78%}
.comic-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.55rem;padding:clamp(14px,3vw,30px);background:linear-gradient(160deg,#351044,#1b102a)}
.comic-copy span{color:#f8ca75;font-size:clamp(.7rem,1.2vw,.9rem);font-weight:900;letter-spacing:.13em}
.comic-copy h2{margin:0;color:#fff0c3;font-size:clamp(1.25rem,2.6vw,2.15rem);line-height:1.1;text-shadow:3px 3px 0 #782a90}
.comic-copy p{margin:0;color:#fff;line-height:1.35;font-size:clamp(.9rem,1.5vw,1.1rem)}
.comic-copy button{margin-top:.55rem;align-self:flex-end;cursor:pointer}
@media (max-height:520px){.comic-page{height:90vh}.comic-copy{gap:.3rem}.comic-copy button{margin-top:0;padding:.35rem .85rem}}
@media (max-height:520px){.story-card{padding:.8rem 1.2rem .9rem 11rem;transform:scale(.92)}.story-hero{width:10rem;height:10rem}.story-card p{font-size:.76rem}.story-card h2{font-size:1.2rem}}

/* Landscape phones: a small, reliable two-thumb gamepad within the visible web view. */
@media (pointer:coarse) and (orientation:landscape){
  #game-shell,#game,#touch-controls,#touch-controls *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  #stick-zone{left:max(12px,calc(var(--visible-left,0px) + env(safe-area-inset-left) + 12px));bottom:max(9px,calc(env(safe-area-inset-bottom) + 9px));width:104px;height:104px}
  #stick{inset:10px;border:2px solid #d9a9ed99;background:#13091dbb;box-shadow:0 0 0 3px #12081a66,0 4px 12px #0008}
  #stick span{width:37px;height:37px;border:2px solid #f1c6ffba;background:#a455d4b3;box-shadow:inset 0 2px 8px #f7d6ff70}
  .action-cluster{right:max(12px,calc(var(--visible-right,0px) + env(safe-area-inset-right) + 12px))!important;bottom:max(9px,calc(env(safe-area-inset-bottom) + 9px));width:169px;height:127px}
  .action{border-width:2px;box-shadow:0 3px 0 #250a30,0 3px 11px #0009}
  #fire-action.action.fire{right:0;bottom:0;width:68px;height:68px;font-size:1.1rem}
  #squish-action.action{right:76px;bottom:5px;width:59px;height:59px;font-size:.53rem;line-height:1.05}
  #boost-action.action.boost{right:54px;bottom:75px;width:51px;height:51px}
  #boost-action.action.boost::before{inset:4px}
  #boost-action.action.boost b{font-size:.95rem}
  #boost-action.action.boost span{font-size:.37rem;line-height:1;letter-spacing:0;white-space:nowrap;transform:scale(.83)}
  #boost-action.action.boost i{font-size:.35rem}
  .action span{font-size:.44rem}
  .quest{top:3.15rem;width:min(174px,29vw);padding:.36rem .52rem}
  .quest strong{font-size:.65rem;line-height:1.15}
}

/* Ship title art over the proven playable v129 game. No game or code-menu changes. */
#title-screen{align-items:center;isolation:isolate;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:#080417 url('assets/boo-crew-title-ship-optimized.webp') center / cover no-repeat}
#title-screen::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#070315b0 0%,#10072365 24%,transparent 40%,transparent 72%,#090416ad 100%);pointer-events:none}
#title-screen .title-heading{position:relative;z-index:1;width:100%;text-align:center;filter:drop-shadow(0 5px 0 #180619)}
#title-screen .title-overline{display:block;color:#fff6da;font:900 clamp(.65rem,1.45vw,1.18rem)/1.12 system-ui,sans-serif;letter-spacing:.12em;-webkit-text-stroke:.35px #281032;text-shadow:2px 3px 0 #6a216c,0 0 9px #08030c}
#title-screen h1{max-width:none;margin:0 auto;line-height:.94;letter-spacing:.015em;transform:skew(-5deg) rotate(-1deg)}
#title-screen h1 span{display:block;color:#ffc637;font:900 clamp(3.1rem,9.1vw,8rem)/.92 Impact,'Arial Black',system-ui,sans-serif;-webkit-text-stroke:clamp(1.5px,.34vw,5px) #310632;text-shadow:0 3px 0 #ff8d19,0 6px 0 #df4c12,0 9px 0 #73205b,0 13px 0 #290934,0 17px 20px #000}
#title-screen h1 small{display:block;margin-top:.3rem;color:#f4d2ff;font:900 clamp(1.22rem,3.4vw,3rem)/1.08 Impact,'Arial Black',system-ui,sans-serif;letter-spacing:.055em;-webkit-text-stroke:clamp(.7px,.13vw,2px) #390d4c;text-shadow:2px 3px 0 #a342c4,0 6px 0 #3e145d,0 9px 12px #10021e}
#title-screen .title-actions{position:relative;z-index:1;display:flex;justify-content:center;width:100%;padding-bottom:3px}
#title-screen .title-start{min-width:clamp(170px,24vw,285px);min-height:48px;padding:.5rem 1.4rem;border:3px solid #fff2a7;border-radius:9px;background:linear-gradient(#ffe672,#ff9c26);color:#281038;box-shadow:0 6px 0 #722264,0 10px 20px #000c;font:1000 clamp(1rem,2vw,1.4rem) monospace;letter-spacing:.065em;touch-action:manipulation}
@media (max-height:520px){#title-screen h1 span{font-size:clamp(2.85rem,8.5vw,5.4rem)}#title-screen h1 small{font-size:clamp(1rem,3.1vw,1.95rem)}#title-screen .title-start{min-height:42px;padding:.3rem 1rem;font-size:.95rem}}
@media (max-width:600px) and (orientation:portrait){#title-screen{background-size:100% auto;background-position:center 51%}#title-screen .title-heading{margin-top:clamp(8px,5vh,36px)}#title-screen .title-overline{font-size:clamp(.62rem,2.7vw,.84rem);letter-spacing:.045em}#title-screen h1 span{font-size:clamp(3rem,15vw,5.8rem)}#title-screen h1 small{font-size:clamp(1.08rem,5.4vw,1.7rem)}#title-screen .title-actions{margin-bottom:clamp(12px,6vh,54px)}}

/* Packaging-style title lettering; keep the title art above the crew on short screens. */
@font-face{font-family:IslandTitle;src:url('assets/fonts/island-title.woff') format('woff');font-weight:900;font-style:normal;font-display:swap}
#title-screen .title-heading{filter:none}
#title-screen .title-overline{font:800 clamp(.6rem,1.35vw,1rem)/1.25 system-ui,sans-serif;letter-spacing:.17em;color:#f5dcb8;padding-bottom:.6em;-webkit-text-stroke:0;text-shadow:0 2px 3px #14041f}
#title-screen h1{width:min(88vw,960px,96dvh);max-width:100%;margin:0 auto;transform:none;font-size:0;line-height:0;letter-spacing:0}
#title-screen .title-logo{display:block;width:100%;height:auto;image-rendering:auto;filter:drop-shadow(0 3px 6px #10031999)}
#title-screen .title-actions{flex-direction:column;align-items:center;gap:.6rem}
#title-screen .title-start{font-family:IslandTitle,Georgia,serif;letter-spacing:.04em}
#title-screen .title-copyright{margin:0;max-width:95vw;color:#f6e6ff;font:500 clamp(.54rem,1vw,.72rem)/1.4 system-ui,sans-serif;text-align:center;text-shadow:0 1px 3px #000,0 0 6px #000;letter-spacing:0}
#title-screen .title-copyright a{color:#ffe1a0;text-decoration:underline;text-underline-offset:2px;touch-action:manipulation}
#title-screen .title-copyright a:focus-visible{outline:2px solid #ffe1a0;outline-offset:3px}
@media(max-height:520px){#title-screen .title-overline{font-size:clamp(.58rem,1.25vw,.85rem);padding-bottom:.3em}#title-screen .title-actions{gap:.45rem}#title-screen .title-copyright{font-size:.54rem}}
@media(max-height:330px) and (orientation:landscape){#title-screen h1{width:min(88vw,84dvh)}}
@media(max-width:600px) and (orientation:portrait){#title-screen h1{width:min(100%,500px)}#title-screen .title-overline{max-width:95%;margin:0 auto;font-size:clamp(.6rem,2.65vw,.85rem);line-height:1.4;letter-spacing:.08em}#title-screen .title-actions{margin-bottom:8px}}

#title-screen #title-sound-hint{margin:0;color:#fff0b3;font:600 clamp(.6rem,1.2vw,.8rem)/1.2 system-ui,sans-serif;text-shadow:0 1px 4px #000}
#title-sound-hint[hidden]{display:none}

/* Skelly Gold: a rare hero, using the existing mobile controls. */
#unlock-screen .unlock-copy{max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#unlock-screen .text-button{display:block;min-height:36px;text-align:left}
#unlock-screen .gold-test{color:#ffe17d;font-weight:900}
#unlock-screen .gold-perks{color:#f1d896;font-size:.75rem;margin:.2rem 0}
.hero-gold #boost-action{border-color:#ffe699;background:linear-gradient(#ba8129,#634113);box-shadow:0 0 16px #ffcd4855}
.hero-gold #fire-action{border-color:#ffdc64;background:linear-gradient(#946127,#3b2313)}
.hero-gold #power-status{border-color:#ffdc64;color:#ffe9a3}
.hero-gold #health-hearts{color:#ffe182}
.hero-gold #boost-action span{font-size:.58rem}

/* Full cards and readable character selection, including short phone screens. */
#unlock-screen{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#unlock-screen .unlock-card{grid-template-columns:minmax(0,52%) minmax(0,48%);width:min(1120px,96vw);height:min(650px,94dvh);border-width:2px;border-radius:20px}
#unlock-screen .roster-art{gap:8px;padding:12px;grid-template-rows:repeat(2,minmax(0,1fr))}
#unlock-screen .roster-art figure{display:grid;grid-template-rows:minmax(0,1fr) auto;border:1px solid #9360ad;border-radius:12px;box-shadow:none;background:#170c25}
#unlock-screen .roster-preview{display:block;width:100%;min-height:0;border:0;padding:4px;background:none;overflow:hidden;touch-action:manipulation}
#unlock-screen .roster-art img{display:block;width:100%;height:100%;object-fit:contain;transform:none}
#unlock-screen .roster-art figcaption{position:static;padding:5px 3px;color:#fff1d0;font:700 14px/1.15 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}
#unlock-screen .roster-art figcaption small{display:block;margin-top:3px;color:#c9b4d8;font:500 12px/1.15 system-ui,sans-serif}
#unlock-screen .unlock-copy{padding:clamp(14px,2vw,28px);align-self:center;min-height:0;max-height:100%;overflow:auto;touch-action:pan-y}
#unlock-screen .unlock-copy .eyebrow{font:700 12px/1.3 system-ui,sans-serif;letter-spacing:.1em;color:#dfb6fc;margin:0 0 7px}
#unlock-screen .unlock-copy h2{font:700 clamp(24px,3vw,36px)/1.1 system-ui,sans-serif;letter-spacing:-.025em;margin:0 0 10px}
#unlock-screen .unlock-copy p{font:400 16px/1.4 system-ui,sans-serif;margin:0 0 14px;color:#e9deef}
#unlock-screen .unlock-copy label{font:600 14px/1.3 system-ui,sans-serif;letter-spacing:0;color:#fff0cb}
#unlock-screen .code-row{margin:6px 0 8px;gap:8px}
#unlock-screen .code-row input{font:600 16px/1.2 system-ui,sans-serif;border:2px solid #e2b957;border-radius:10px;padding:10px;min-height:44px}
#unlock-screen .code-row button{font:800 15px/1.2 system-ui,sans-serif;min-height:44px;padding:10px 15px;border-width:2px;border-radius:10px}
#unlock-screen #code-message:empty{display:none}
#unlock-screen .unlock-copy #code-message{font-size:14px;color:#ffdf9d}
#unlock-screen .unlock-copy .try-label{margin:13px 0 7px;font-size:14px;font-weight:600;color:#c9b4d8}
#unlock-screen .hero-test-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#unlock-screen .hero-test-buttons .text-button{display:block;min-height:44px;padding:9px 8px;border:1px solid #9865b6;border-radius:10px;background:#352044;color:#f4e9fc;text-decoration:none;text-align:center;font:650 14px/1.2 system-ui,sans-serif;touch-action:manipulation}
#unlock-screen .hero-test-buttons .gold-test{grid-column:1/-1;color:#ffe59b;border-color:#c69a4a;background:#443019}
#unlock-screen .unlock-copy .gold-perks{font-size:13px;line-height:1.3;margin:9px 0 0;color:#d7bd82}
#unlock-screen button:focus-visible{outline:3px solid #fff;outline-offset:2px}
#character-card-dialog{border:2px solid #c589ea;border-radius:16px;background:#160d22;color:#fff;padding:12px;max-width:94vw;max-height:94dvh;overflow:auto;touch-action:pan-y}
#character-card-dialog::backdrop{background:#090412e8}
#character-card-dialog form{text-align:right;margin-bottom:8px}
#character-card-dialog button{min-height:44px;border:1px solid #b789c9;border-radius:8px;padding:8px 16px;background:#3b2350;color:#fff;font:600 16px system-ui,sans-serif}
#character-card-full{display:block;width:auto;height:auto;max-width:min(84vw,650px);max-height:calc(90dvh - 88px);object-fit:contain}
@media(max-height:480px){
 #unlock-screen .roster-art{padding:7px;gap:6px}
 #unlock-screen .unlock-copy{padding:12px 16px}
 #unlock-screen .unlock-copy h2{font-size:25px;margin-bottom:6px}
 #unlock-screen .unlock-copy p{margin-bottom:9px}
 #unlock-screen .unlock-copy .eyebrow{margin-bottom:4px}
 #unlock-screen .hero-test-buttons{gap:6px}
 #unlock-screen .unlock-copy .try-label{margin-top:9px}
}
@media(max-width:620px) and (orientation:portrait){
 #unlock-screen .unlock-card{grid-template-columns:1fr;overflow-y:auto;touch-action:pan-y}
 #unlock-screen .roster-art{min-height:360px}
 #unlock-screen .unlock-copy{max-height:none;overflow:visible}
}

/* Portrait and name only; no packaging text or rarity captions. */
#unlock-screen .roster-portrait{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4px}
#unlock-screen .roster-portrait canvas{display:block;width:100%;height:100%;object-fit:contain}
#unlock-screen .roster-art figcaption{height:3.4em;padding:6px 4px;display:flex;align-items:center;justify-content:center}
#unlock-screen .hero-test-buttons .gold-test{grid-column:auto}
#unlock-screen .hero-test-buttons .count-test{background:#392356;color:#ebceff;border-color:#ad7bea}
.hero-count #boost-action,.hero-count #fire-action{border-color:#c295f6;background:linear-gradient(#654090,#28143f)}
.hero-count #boost-action span{font-size:.56rem}
#unlock-screen .hero-test-buttons .eye-test{background:#293446;color:#d9fff6;border-color:#95d9ca}
.hero-eye #boost-action,.hero-eye #fire-action{border-color:#baffee;background:linear-gradient(#7754a9,#28213e)}
.hero-eye #boost-action span{font-size:.56rem}
.hero-eye #power-status{border-color:#baffee;color:#e9ddff}
.hero-eye #fire-action{border-color:#ff9caa;background:linear-gradient(#a23f54,#471522)}
#unlock-screen .hero-test-buttons .jack-test{background:#49321c;color:#fff0c8;border-color:#de9c47}
.hero-jack #fire-action{border-color:#bade76;background:linear-gradient(#658444,#29381f)}
.hero-jack #boost-action{border-color:#ffd179;background:linear-gradient(#d48730,#76351d)}
.hero-jack #boost-action span{font-size:.56rem}
.hero-jack #power-status{border-color:#ffca6f;color:#ffe9c4}

.score-pill{display:flex;flex-direction:column;min-width:92px;padding:.3rem .65rem;color:#fff0b8;font-family:system-ui,sans-serif;line-height:1.2}
.score-pill b{font-size:16px;font-variant-numeric:tabular-nums}.score-pill small{font-size:12px;color:#e3caef;white-space:nowrap}.score-pill .combo-hot{color:#ffda55}
.unlock-copy .score-rules{font:14px/1.35 system-ui,sans-serif;color:#dec5ed;margin:.5rem 0}
.run-results{position:absolute;inset:0;z-index:40;background:#11091def;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;touch-action:pan-y}
.results-card{width:min(600px,94vw);max-height:100%;overflow:auto;text-align:center;background:radial-gradient(ellipse at top,#492264,#160b25);border:3px solid #c281eb;border-radius:24px;padding:20px;font:16px/1.4 system-ui,sans-serif;color:#fff4e2}
#results-score{display:block;font-size:clamp(36px,8vh,64px);color:#ffdc6e;line-height:1.1}#results-best{color:#ffd967;font-weight:800}#results-storage{font-size:14px;color:#d8bcdf}.results-card p{margin:8px 0}.results-card button{margin-top:8px;min-height:44px}
@media(max-height:500px){.unlock-copy .score-rules{font-size:14px;line-height:1.2;margin:.3rem 0}.results-card{padding:12px}.results-card h2{font-size:24px}.score-pill{min-width:82px;padding:.25rem .45rem}}

#unlock-screen .unlock-copy .score-rules{font:14px/1.35 system-ui,sans-serif;color:#dec5ed;margin:6px 0 10px}#unlock-screen .unlock-copy .score-rules summary{cursor:pointer;padding:6px 0;color:#ffdb82}#unlock-screen .unlock-copy .score-rules p{font-size:14px;margin:6px 0}
#hud .score-pill{flex-shrink:0}#hud .zone-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#health-hearts.guard-ready::after{content:' ◈';color:#a5f6ff;text-shadow:0 0 7px #58daff}

.island-ending{position:absolute;inset:0;z-index:18;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}.island-ending p{margin:0;padding:10px 18px;border-radius:14px;background:#163720eb;color:#fff9d8;text-align:center;font:700 clamp(14px,2vw,22px)/1.3 system-ui,sans-serif;max-width:760px}.island-ending button{pointer-events:auto;min-height:44px}.island-ending button[hidden]{display:none}

.ending-finish{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:auto}
#ending-thanks{padding:10px 20px;border:1px solid #eec56b88;border-radius:14px;background:#25132ded;color:#fff2ca;text-align:center;box-shadow:0 3px 18px #0006}
#ending-thanks strong{display:block;font:800 clamp(18px,2.4vw,28px)/1.2 system-ui,sans-serif}
#ending-thanks span{display:block;margin-top:4px;font:600 clamp(13px,1.7vw,18px)/1.3 system-ui,sans-serif}
#ending-thanks[hidden]{display:none}
@media(max-height:450px){.island-ending{padding-top:8px;padding-bottom:8px}.island-ending p{padding:6px 12px;font-size:14px}#ending-thanks{padding:6px 12px}.ending-finish{gap:5px}}

#ending-thanks{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px)}
.island-ending p[hidden]{display:none}

#squish-action:disabled{filter:grayscale(.85);opacity:.5;cursor:default}

/* Compact stone gamepad: one frame, short labels, distinct thumb targets. */
#game-shell{--pad-accent:#c19adf;--pad-gold:#c6a271;--pad-ink:#16121d}
#game-shell.hero-pink{--pad-accent:#efa2c0}
#game-shell.hero-gold{--pad-accent:#f0d480}
#game-shell.hero-count{--pad-accent:#bb9ce5}
#game-shell.hero-eye{--pad-accent:#efa0aa}
#game-shell.hero-jack{--pad-accent:#bed08d}
#touch-controls{touch-action:none;-webkit-user-select:none;user-select:none}
#touch-controls .action-cluster{right:max(12px,calc(var(--visible-right,0px) + env(safe-area-inset-right) + 12px))!important;bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));width:144px;height:120px;pointer-events:none;transform:none}
#touch-controls .action{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 3px;border:2px solid var(--pad-gold);border-radius:3px;background:linear-gradient(#39323e,#241e2b);color:#f6e6c5;box-shadow:inset 0 2px #655567,inset 0 -3px #15121c,0 0 0 2px #15101b,0 5px 0 #15101b;font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;text-align:center;text-transform:uppercase;text-shadow:1px 1px #08060e;touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
#touch-controls .action::after{content:"";position:absolute;inset:4px;border:1px solid #78617855;border-radius:0;pointer-events:none}
#touch-controls .action b{display:block;width:24px;height:24px;margin:0;color:var(--pad-accent);line-height:1;pointer-events:none}
#touch-controls .action svg{display:block;width:100%;height:100%;overflow:visible}
#touch-controls .action span{display:block;max-width:100%;font:inherit;font-size:14px;line-height:1;letter-spacing:0;white-space:nowrap;transform:none;pointer-events:none}
#touch-controls #squish-action.action{right:78px;bottom:0;width:66px;height:58px}
#touch-controls #squish-action.action::before{content:none}
#touch-controls #squish-action.action b{width:20px;height:20px;color:#e5c78d}
#touch-controls #fire-action.action.fire{right:0;bottom:0;width:70px;height:66px;border-color:var(--pad-gold);background:linear-gradient(#403747,#28212f);font-size:14px}
#touch-controls #boost-action.action.boost{right:18px;bottom:76px;width:104px;height:44px;display:grid;grid-template-columns:20px 1fr;grid-template-rows:15px 13px;align-content:center;column-gap:4px;row-gap:1px;padding:3px 6px 6px;border:2px solid var(--pad-gold);border-radius:3px;background:linear-gradient(#39323e,#241e2b);box-shadow:inset 0 2px #655567,inset 0 -3px #15121c,0 0 0 2px #15101b,0 5px 0 #15101b}
#touch-controls #boost-action.action.boost::before{content:"";position:absolute;inset:auto 5px 3px;height:3px;border-radius:0;background:linear-gradient(to right,var(--pad-accent) var(--charge,100%),#100d18 0);z-index:1;pointer-events:none}
#touch-controls #boost-action.action.boost b{grid-row:1/3;align-self:center;width:20px;height:20px;position:relative;z-index:1}
#touch-controls #boost-action.action.boost span{position:relative;z-index:1;max-width:none;font-size:14px;line-height:1;letter-spacing:0;white-space:nowrap;transform:none}
#touch-controls #boost-action.action.boost i{position:relative;z-index:1;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e1d2bc;letter-spacing:0;font-style:normal}
#touch-controls .action:active:not(:disabled){transform:translateY(3px);background:#4a3b50;box-shadow:inset 0 2px #655567,inset 0 -2px #15121c,0 0 0 2px #15101b,0 2px 0 #15101b}
#touch-controls .action:focus-visible{outline:3px solid #fff0b8;outline-offset:4px}
#touch-controls .action:disabled{filter:grayscale(.8);opacity:.58;cursor:default}
#touch-controls #stick-zone{left:max(12px,calc(var(--visible-left,0px) + env(safe-area-inset-left) + 12px));bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));width:104px;height:104px;touch-action:none}
#touch-controls #stick{inset:8px;border:2px solid #b99a6bab;border-radius:22px;background:linear-gradient(#2b2533b8,#181520c7);box-shadow:inset 0 2px #65556788,inset 0 -3px #13101c,0 0 0 2px #15101b88,0 4px 0 #15101b88}
#touch-controls #stick::before{content:"";position:absolute;inset:12px;border:1px solid #bba8833b;border-radius:15px;pointer-events:none}
#touch-controls #stick::after{content:"";position:absolute;inset:6px;background:linear-gradient(#c6a27177,#c6a27177) center top/2px 5px no-repeat,linear-gradient(#c6a27177,#c6a27177) center bottom/2px 5px no-repeat,linear-gradient(#c6a27177,#c6a27177) left center/5px 2px no-repeat,linear-gradient(#c6a27177,#c6a27177) right center/5px 2px no-repeat;pointer-events:none}
#touch-controls #stick span{width:34px;height:34px;border:2px solid #d4b986;border-radius:10px;background:linear-gradient(#685675,#3d314a);box-shadow:inset 0 2px #a68aaf,0 3px #17111f;z-index:1}
@media(max-height:360px){
 #touch-controls .action-cluster{bottom:max(8px,calc(env(safe-area-inset-bottom) + 8px))}
 #touch-controls #stick-zone{bottom:max(8px,calc(env(safe-area-inset-bottom) + 8px))}
}

/* One compact maker signature, centered with the title instead of in the corners. */
#title-screen .title-heading{padding:0;flex-shrink:0}
#title-screen .title-masthead{display:flex;align-items:center;justify-content:center;gap:12px;min-height:clamp(32px,6dvh,44px);margin:0 auto 4px}
#title-screen .title-brandmarks{display:flex;flex:none;align-items:center;justify-content:center;gap:5px;height:clamp(32px,6dvh,44px);margin:0;pointer-events:none}
#title-screen .title-brandmarks img{display:block;flex:none;height:auto;object-fit:contain}
#title-screen .title-brandmarks .wailani-mark{width:clamp(38px,7dvh,52px);height:clamp(38px,7dvh,52px);object-fit:cover;object-position:center;clip-path:circle(40.2% at 50% 43.4%);transform:translateY(6.6%)}
#title-screen .title-brandmarks .kc-mark{width:clamp(46px,8.4dvh,62px);filter:drop-shadow(0 2px 2px #10091b)}
#title-screen .title-masthead .title-overline{margin:0;max-width:none;padding:0;text-align:left;font-size:clamp(12px,1.15vw,14px);line-height:1.4;letter-spacing:.12em}
#title-screen .title-actions{gap:5px}
/* Preserve open artwork space so the start button stays above the crew. */
#title-screen .title-copyright{margin-top:calc(clamp(112px,13vw,140px) + 9px)}
@media (orientation:landscape) and (max-height:520px){
 #title-screen h1{width:min(88vw,960px,90dvh)}
 #title-screen .title-actions{gap:2px}
 #title-screen .title-copyright{margin-top:calc(clamp(90px,11vw,104px) + 6px)}
}
@media (orientation:landscape) and (max-height:330px){
 #title-screen h1{width:min(88vw,76dvh)}
}
@media (orientation:portrait) and (max-width:600px){
 #title-screen .title-heading{margin-top:8px}
 #title-screen .title-masthead{gap:8px;margin-bottom:10px}
 #title-screen .title-masthead .title-overline{font-size:12px;letter-spacing:.06em}
 #title-screen .title-copyright{margin-top:129px}
}

/* A compact, illustrated roster with a deliberate selected state. */
#unlock-screen{background:radial-gradient(ellipse at 50% 12%,#4c235f,#130a21 72%)}
#unlock-screen .unlock-card{grid-template-columns:minmax(0,55%) minmax(0,45%);width:min(1060px,calc(100vw - 24px));height:min(610px,calc(100dvh - 20px));border:3px solid #ae72d3;border-radius:15px;background:linear-gradient(135deg,#341746,#150c23 72%);box-shadow:0 14px 38px #06020c}
#unlock-screen .roster-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-height:0;gap:8px;padding:12px;background:radial-gradient(ellipse at 40% 40%,#51236a,#230e39 74%)}
#unlock-screen .hero-choice{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;overflow:hidden;padding:0;border:2px solid #8659a1;border-radius:9px;background:linear-gradient(#2a153f,#11091f);color:#fff1d5;box-shadow:inset 0 1px #fff3,0 3px 0 #0c0714;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#unlock-screen .hero-choice .roster-portrait{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:3px}
#unlock-screen .hero-choice canvas{display:block;width:100%;height:100%;object-fit:contain}
#unlock-screen .hero-choice .hero-name{display:grid;place-items:center;min-height:33px;padding:3px 2px;background:#180c26;color:#fff0ce;font:800 clamp(10px,1.3vw,14px)/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;overflow-wrap:anywhere}
#unlock-screen .hero-choice.rare{border-color:#b68d52}
#unlock-screen .hero-choice[aria-pressed="true"]{border-color:#ffe39a;box-shadow:0 0 0 2px #834bb2,inset 0 0 0 2px #ffe39a,0 0 17px #c371e5b0;transform:translateY(-2px)}
#unlock-screen .hero-choice[aria-pressed="true"] .hero-name{background:#5b3275;color:#fff6d7}
#unlock-screen .hero-choice:focus-visible{outline:3px solid #fff;outline-offset:2px}
#unlock-screen .unlock-copy{min-width:0;min-height:0;align-self:center;padding:clamp(14px,2vw,28px);overflow:auto}
#unlock-screen .unlock-copy h2{font:900 clamp(24px,3vw,35px)/1.1 IslandTitle,Georgia,serif;letter-spacing:0;color:#ffe5a4;text-shadow:2px 3px #52225e;margin:0 0 10px}
#unlock-screen .unlock-copy p{font-size:clamp(13px,1.7vw,16px);line-height:1.35;margin:0 0 12px}
#unlock-screen .unlock-copy .selected-hero{min-height:36px;display:flex;align-items:center;margin:8px 0 12px;padding:7px 10px;border-left:4px solid #ffcc73;background:#3b1d52;color:#ffe9ac;font:800 clamp(12px,1.35vw,15px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
#unlock-screen .unlock-copy label{font:750 14px/1.3 system-ui,sans-serif;letter-spacing:0;color:#ffe8b6}
#unlock-screen .code-row{margin:6px 0 8px;gap:8px}
#unlock-screen .code-row input,#unlock-screen .code-row button{min-height:46px;font-size:16px}
#unlock-screen .code-row input{min-width:0}
#unlock-screen .unlock-copy .code-help{font:500 12px/1.35 system-ui,sans-serif;color:#cdb8d9;margin:0 0 8px}
#unlock-screen .unlock-copy #code-message{font-size:13px;margin:0 0 6px;min-height:1em}
#unlock-screen .unlock-copy .score-rules{font-size:13px;margin:8px 0}

@media (orientation:landscape) and (max-height:520px){
 #unlock-screen .unlock-card{width:calc(100vw - 16px);height:calc(100dvh - 16px);grid-template-columns:minmax(0,53%) minmax(0,47%)}
 #unlock-screen .roster-art{min-height:0;gap:5px;padding:6px}
 #unlock-screen .hero-choice .hero-name{min-height:25px;font-size:clamp(9px,1.35vw,12px)}
 #unlock-screen .unlock-copy{padding:7px 12px;align-self:center}
 #unlock-screen .unlock-copy .eyebrow{font-size:10px;margin-bottom:2px}
 #unlock-screen .unlock-copy h2{font-size:24px;margin-bottom:3px}
 #unlock-screen .unlock-copy p{font-size:12px;line-height:1.23;margin-bottom:5px}
 #unlock-screen .unlock-copy .selected-hero{font-size:12px;min-height:28px;margin:4px 0 6px;padding:5px 8px}
 #unlock-screen .code-row{margin:4px 0}
 #unlock-screen .code-row input,#unlock-screen .code-row button{min-height:44px;font-size:16px;padding:6px 8px}
 #unlock-screen .unlock-copy .code-help{font-size:11px;margin-bottom:4px}
 #unlock-screen .unlock-copy .score-rules{font-size:12px;margin:2px 0}
}
@media (orientation:portrait) and (max-width:620px){
 #unlock-screen .unlock-card{display:flex;flex-direction:column;height:calc(100dvh - 16px);width:calc(100vw - 16px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
 #unlock-screen .roster-art{flex:none;min-height:0;height:clamp(310px,47dvh,420px);gap:5px;padding:7px}
 #unlock-screen .hero-choice .hero-name{font-size:clamp(10px,2.8vw,13px);min-height:35px}
 #unlock-screen .unlock-copy{flex:none;max-height:none;overflow:visible;align-self:stretch;padding:12px 15px 18px}
 #unlock-screen .unlock-copy h2{font-size:28px}
 #unlock-screen .unlock-copy .selected-hero{margin:6px 0}
}

/* Let players reach the title, intro, and code form while holding a phone upright. */
#rotate{display:none}
@media (orientation:portrait) and (max-width:700px){
 #game-shell.playing #rotate{display:flex}
}

/* Arcade character select: one lit player slot and six cabinet-style portraits. */
#unlock-screen{--select-glow:#bd73e9;isolation:isolate;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 10%,#5c2681 0,#201034 42%,#080511 100%)}
#unlock-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 8% 18%,#f7d27088 0 2px,transparent 3px),radial-gradient(circle at 83% 13%,#f7d27077 0 2px,transparent 3px),radial-gradient(circle at 92% 80%,#ca88ed88 0 2px,transparent 3px),repeating-linear-gradient(0deg,transparent 0 5px,#08040f36 6px 7px)}
#unlock-screen[data-hero="pink-a-boo"]{--select-glow:#ff8ebc}
#unlock-screen[data-hero="jack-o-squish"]{--select-glow:#ff9d3d}
#unlock-screen[data-hero="grumblegeist"]{--select-glow:#9676ff}
#unlock-screen[data-hero="skelly-gold"]{--select-glow:#ffd05a}
#unlock-screen[data-hero="count-squishula"]{--select-glow:#b883ff}
#unlock-screen[data-hero="eye-scream"]{--select-glow:#ee8bb7}
#unlock-screen .unlock-card{position:relative;z-index:1;display:flex;flex-direction:column;width:min(1120px,calc(100vw - 16px));height:min(640px,calc(100dvh - 16px));border:4px solid #e6b568;border-radius:11px;background:#180c28;box-shadow:inset 0 0 0 3px #4c255f,0 0 0 3px #14091d,0 16px 42px #030107}
#unlock-screen .unlock-card::after{content:"";position:absolute;inset:7px;border:1px solid #ffe3a054;pointer-events:none;z-index:4}
#unlock-screen .select-marquee{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;flex:none;min-height:62px;padding:5px 19px;border-bottom:4px solid #c88d4e;background:linear-gradient(#6b287d,#2e124a 72%,#1c0b2b);box-shadow:inset 0 3px #ce83e27a,0 4px 0 #0f0718;color:#f8d992}
#unlock-screen .select-marquee::before{content:"";position:absolute;inset:4px 8px auto;height:2px;background:linear-gradient(90deg,transparent,#efc66d,transparent);opacity:.75}
#unlock-screen .select-marquee>span{font:900 clamp(10px,1.1vw,13px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em}
#unlock-screen .select-marquee-stars{text-align:right;color:#ffe071;text-shadow:0 0 10px #ff9f4a}
#unlock-screen .select-marquee h2{margin:0;white-space:nowrap;color:#ffe19a;font:900 clamp(24px,3.6vw,43px)/1 IslandTitle,Georgia,serif;letter-spacing:.025em;text-shadow:2px 3px 0 #712142,0 5px 0 #1a0a24,0 0 18px #f9837960}
#unlock-screen .select-main{display:grid;grid-template-columns:minmax(0,58%) minmax(0,42%);flex:1;min-height:0}
#unlock-screen .roster-area{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:3px solid #a267be;background:radial-gradient(ellipse at 50% 38%,#5c2a75 0,#2e164b 52%,#170b2a 100%)}
#unlock-screen .roster-label{display:flex;justify-content:space-between;align-items:center;flex:none;min-height:30px;margin:0;padding:5px 15px;color:#f6d990;background:#190c2bd9;font:850 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
#unlock-screen .roster-label span:last-child{color:#dfb9ee}
#unlock-screen .roster-art{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));min-height:0;gap:10px;padding:11px;background:none}
#unlock-screen .hero-choice{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;padding:0;overflow:hidden;border:3px solid #9b6baa;border-radius:5px;background:radial-gradient(circle at 50% 54%,#5a2a75,#231337 65%,#10091e);color:#fff1d5;box-shadow:inset 0 0 0 2px #201029,inset 0 3px #e3a5f04d,0 4px 0 #10081e;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;touch-action:manipulation}
#unlock-screen .hero-choice:nth-child(1){--card-glow:#e763b1}
#unlock-screen .hero-choice:nth-child(2){--card-glow:#ff9634}
#unlock-screen .hero-choice:nth-child(3){--card-glow:#8257ee}
#unlock-screen .hero-choice:nth-child(4){--card-glow:#f6c34f}
#unlock-screen .hero-choice:nth-child(5){--card-glow:#a166e0}
#unlock-screen .hero-choice:nth-child(6){--card-glow:#cf73a7}
#unlock-screen .hero-choice .roster-portrait{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:2px;background:radial-gradient(ellipse at 50% 84%,var(--card-glow),transparent 61%);overflow:hidden}
#unlock-screen .hero-choice canvas{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 3px #0d0613a8)}
#unlock-screen .hero-choice .hero-name{display:grid;place-items:center;min-height:34px;padding:3px 2px;border-top:2px solid #ad76bb;background:linear-gradient(#301943,#160d27);color:#fff2d8;font:900 clamp(11px,1.35vw,15px)/1.02 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;text-shadow:1px 2px #14091b;overflow-wrap:anywhere}
#unlock-screen .hero-choice.rare{border-color:#bc8a43}
#unlock-screen .hero-choice[aria-pressed="true"]{z-index:2;border-color:#ffe48d;box-shadow:inset 0 0 0 2px #ffce72,0 0 0 2px #441355,0 0 19px var(--card-glow);transform:translateY(-3px) scale(1.025)}
#unlock-screen .hero-choice[aria-pressed="true"]::after{content:"P1";position:absolute;top:5px;left:5px;padding:3px 6px;border:1px solid #fff3a8;background:#ffcc59;color:#311230;font:1000 12px/1 ui-monospace,monospace;box-shadow:2px 2px #150a1f}
#unlock-screen .hero-choice[aria-pressed="true"] .hero-name{background:linear-gradient(#80437b,#411e59);color:#fff8df}
#unlock-screen .hero-choice:focus-visible{outline:3px solid #fff;outline-offset:3px}
#unlock-screen .unlock-copy{display:flex;flex-direction:column;align-self:stretch;min-width:0;min-height:0;max-height:none;padding:13px 18px 10px;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(135deg,#251039,#120a21 75%);touch-action:pan-y}
#unlock-screen .hero-feature{display:grid;grid-template-columns:minmax(0,47%) minmax(0,53%);flex:none;min-height:0;height:clamp(145px,29dvh,212px);margin-bottom:12px;border:2px solid #985fab;background:linear-gradient(130deg,#3a1d52,#1a0e2c);box-shadow:inset 0 0 0 2px #1c0d29,0 4px 0 #0b0612}
#unlock-screen .feature-art{position:relative;min-width:0;min-height:0;overflow:hidden;border-right:2px solid #8b60a7;background:radial-gradient(ellipse at 50% 63%,var(--select-glow) -55%,#472261 45%,#1a0d2b 79%)}
#unlock-screen .feature-art::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:#c99ce2;font:900 clamp(55px,8vw,96px)/1 IslandTitle,Georgia,serif;text-shadow:0 5px #1d0e2b}
#unlock-screen[data-hero] .feature-art::before{display:none}
#unlock-screen .feature-art canvas{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 3px #10091d8c)}
#unlock-screen .feature-slot{position:absolute;right:5px;bottom:5px;padding:3px 5px;background:#170b26db;color:#ffe6a7;font:850 11px/1 ui-monospace,monospace;letter-spacing:.08em}
#unlock-screen .feature-info{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:8px 12px}
#unlock-screen .feature-kicker{color:#f2c979;font:850 12px/1.2 ui-monospace,monospace;letter-spacing:.14em}
#unlock-screen .unlock-copy .selected-hero{display:block;min-height:0;margin:7px 0 9px;padding:0;border:0;background:none;color:#fff0ba;font:900 clamp(21px,2.8vw,33px)/1.05 IslandTitle,Georgia,serif;text-shadow:2px 3px #602b75;overflow-wrap:anywhere}
#unlock-screen[data-hero="count-squishula"] .selected-hero{font-size:clamp(18px,2vw,23px);letter-spacing:-.025em;overflow-wrap:normal;word-break:normal}
#unlock-screen .feature-prompt{color:#dfc5e9;font:650 13px/1.3 system-ui,sans-serif}
#unlock-screen #unlock-form{padding:9px 10px 10px;border:2px solid #8d5ba7;background:#1d0e2e;box-shadow:inset 0 0 0 2px #361b4b}
#unlock-screen .unlock-copy label{display:flex;justify-content:space-between;gap:5px;color:#ffe1a0;font:850 13px/1.25 ui-monospace,monospace;letter-spacing:.08em}
#unlock-screen .unlock-copy label span{font-size:11px;color:#cda9df}
#unlock-screen .code-row{margin:6px 0 0;gap:8px}
#unlock-screen .code-row input{min-height:46px;border:2px solid #d3a963;border-radius:4px;background:#fff0c9;color:#26132c;font:750 16px/1.2 system-ui,sans-serif}
#unlock-screen .code-row button{min-height:46px;border:2px solid #ffdb8a;border-radius:4px;background:linear-gradient(#ffe781,#f6a034);color:#2d122c;font:1000 16px/1 ui-monospace,monospace;box-shadow:0 3px #7b3b20}
#unlock-screen .code-row button:disabled{opacity:.65}
#unlock-screen .unlock-copy .code-help{margin:7px 0 3px;color:#d5c3df;font:550 12px/1.25 system-ui,sans-serif}
#unlock-screen .unlock-copy #code-message{margin:0 0 2px;color:#ffe09e;font:700 13px/1.25 system-ui,sans-serif}
#unlock-screen .unlock-copy .score-rules{margin:4px 0 0;color:#c8a6dc;font:600 13px/1.25 system-ui,sans-serif}
#unlock-screen .unlock-copy .score-rules summary{padding:4px 0;color:#e0b7ed}
#unlock-screen .unlock-copy .score-rules p{color:#e0d0e7;font-size:13px}
@media (prefers-reduced-motion:no-preference){
 #unlock-screen .hero-choice[aria-pressed="true"]{animation:selectGlow 1.7s ease-in-out infinite alternate}
 @keyframes selectGlow{from{box-shadow:inset 0 0 0 2px #ffce72,0 0 0 2px #441355,0 0 7px var(--card-glow)}to{box-shadow:inset 0 0 0 2px #ffce72,0 0 0 2px #441355,0 0 21px var(--card-glow)}}
}
@media (orientation:landscape) and (max-height:520px){
 #unlock-screen .unlock-card{width:calc(100vw - 12px);height:calc(100dvh - 12px)}
 #unlock-screen .select-marquee{min-height:43px;padding:2px 13px}
 #unlock-screen .select-marquee h2{font-size:clamp(22px,3.1vw,29px)}
 #unlock-screen .select-marquee>span{font-size:10px}
 #unlock-screen .roster-label{min-height:22px;padding:3px 9px;font-size:10px}
 #unlock-screen .roster-art{gap:5px;padding:6px}
 #unlock-screen .hero-choice{border-width:2px}
 #unlock-screen .hero-choice .hero-name{min-height:25px;border-top-width:1px;font-size:clamp(10px,1.3vw,12px)}
 #unlock-screen .unlock-copy{padding:7px 10px 5px}
 #unlock-screen .hero-feature{height:clamp(94px,34dvh,137px);margin-bottom:6px}
 #unlock-screen .feature-info{padding:4px 8px}
 #unlock-screen .feature-kicker{font-size:10px}
 #unlock-screen .unlock-copy .selected-hero{font-size:clamp(17px,2.25vw,24px);margin:4px 0}
 #unlock-screen[data-hero="count-squishula"] .selected-hero{font-size:clamp(17px,1.75vw,20px)}
 #unlock-screen .feature-prompt{font-size:11px}
 #unlock-screen #unlock-form{padding:5px 7px}
 #unlock-screen .unlock-copy label{font-size:11px}
 #unlock-screen .unlock-copy label span{font-size:10px}
 #unlock-screen .code-row{margin-top:4px}
 #unlock-screen .code-row input,#unlock-screen .code-row button{min-height:44px;padding:5px 8px;font-size:16px}
 #unlock-screen .unlock-copy .code-help{font-size:11px;margin:5px 0 2px}
 #unlock-screen .unlock-copy .score-rules{font-size:11px;margin:0}
}
@media (orientation:portrait) and (max-width:620px){
 #unlock-screen .unlock-card{display:flex;height:calc(100dvh - 12px);width:calc(100vw - 12px);overflow-y:auto;touch-action:pan-y}
 #unlock-screen .select-marquee{grid-template-columns:1fr auto;min-height:54px;padding:5px 11px}
 #unlock-screen .select-marquee>span:first-child{grid-column:1/-1;font-size:10px}
 #unlock-screen .select-marquee h2{font-size:clamp(24px,7vw,33px)}
 #unlock-screen .select-marquee-stars{font-size:11px}
 #unlock-screen .select-main{display:flex;flex-direction:column;flex:none;min-height:auto}
 #unlock-screen .roster-area{flex:none;min-height:0;border-right:0;border-bottom:3px solid #a267be}
 #unlock-screen .roster-art{flex:none;height:clamp(278px,40dvh,348px);gap:5px;padding:7px}
 #unlock-screen .hero-choice .hero-name{min-height:30px;font-size:clamp(10px,2.8vw,13px)}
 #unlock-screen .unlock-copy{flex:none;align-self:stretch;max-height:none;overflow:visible;padding:9px 12px 16px}
 #unlock-screen .hero-feature{height:148px;margin-bottom:9px}
 #unlock-screen .unlock-copy .selected-hero{font-size:clamp(21px,6vw,29px)}
 #unlock-screen[data-hero="count-squishula"] .selected-hero{font-size:clamp(17px,4.2vw,22px)}
}