:root{font-family:"Trebuchet MS",Arial,sans-serif;color:#173522;background:#10251d}*{box-sizing:border-box}html,body,#game-shell{width:100%;height:100%;margin:0;overflow:hidden}#game{display:block;width:100%;height:100%;background:#8fcf63}.screen{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 30%,rgba(255,241,166,.45),transparent 34%),linear-gradient(155deg,#80d25b,#3f9c78);z-index:4}.screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-12deg,transparent 0 34px,rgba(255,255,255,.045) 35px 38px);pointer-events:none}.select-card{position:relative;width:min(1040px,96vw);padding:28px 34px 32px;border:5px solid #173522;border-radius:32px;background:#fff8da;box-shadow:0 15px 0 #244f37,0 26px 50px #17352277;text-align:center}.eyebrow{margin:0;color:#e0703c;font-weight:900;letter-spacing:.18em;font-size:.8rem}.select-card h1{margin:6px 0 0;font-size:clamp(2.1rem,6vw,4rem);line-height:1;color:#173522;text-shadow:3px 3px 0 #f7cf53}.subtitle{margin:10px 0 22px;color:#56705e;font-weight:700}.character-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.character-button{position:relative;min-width:0;padding:12px 12px 16px;border:4px solid #244f37;border-radius:24px;background:linear-gradient(#fff,#eef8d8);cursor:pointer;transition:.16s transform,.16s box-shadow;overflow:hidden}.character-button:hover,.character-button.selected{transform:translateY(-7px);box-shadow:0 10px 0 #f2b840}.character-button:focus-visible{outline:5px solid #ef7b45;outline-offset:3px}.character-button img{display:block;width:100%;height:min(42vh,360px);object-fit:contain;filter:drop-shadow(0 8px 5px #17352233)}.character-button strong{display:block;margin-top:3px;font:900 1.45rem "Trebuchet MS";color:#173522}.character-button span{color:#67806c;font-weight:700}.select-help{margin:23px 0 0;color:#66806e;font-size:.85rem;font-weight:700}#hud{position:fixed;z-index:3;top:18px;left:18px;display:flex;gap:12px;align-items:center}.identity,.controls{display:flex;align-items:center;border:3px solid #173522;border-radius:16px;background:#fff9dfeb;box-shadow:0 5px 0 #244f37;padding:7px 12px}.identity img{width:50px;height:50px;object-fit:cover;object-position:50% 18%;border:2px solid #173522;border-radius:12px;background:#d8edbd}.identity div{display:grid;margin-left:9px}.identity b{font-size:1.05rem}.identity span{color:#597060;font-size:.78rem;font-weight:700}.controls{font-size:.7rem;font-weight:900;color:#607667}.controls span{margin-right:7px;padding:6px;border-radius:8px;background:#173522;color:#fff}.hidden{display:none!important}#place-banner{position:fixed;z-index:3;top:22px;left:50%;transform:translateX(-50%);padding:9px 22px;border:3px solid #173522;border-radius:999px;background:#fff9dfed;color:#173522;font-weight:900;box-shadow:0 5px 0 #244f37;animation:banner 2.3s both}@keyframes banner{0%{opacity:0;transform:translate(-50%,-15px)}15%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}@media(max-width:700px){.select-card{padding:20px 13px}.character-list{gap:7px}.character-button{padding:7px;border-width:3px}.character-button img{height:33vh}.character-button strong{font-size:1rem}.character-button span{font-size:.68rem}.controls{display:none}}

#world-map{position:fixed;z-index:20;inset:0;overflow:hidden;background:linear-gradient(#4ab7df,#167dae);color:#173522}
#world-map::before,#world-map::after{content:"";position:absolute;inset:-30%;background:repeating-radial-gradient(ellipse at center,transparent 0 28px,rgba(255,255,255,.2) 30px 34px,transparent 36px 65px);animation:ocean-drift 18s linear infinite;pointer-events:none}
#world-map::after{transform:rotate(25deg);opacity:.45;animation-duration:25s}
@keyframes ocean-drift{to{translate:90px 45px}}
.world-map-title{position:absolute;z-index:2;top:24px;left:50%;transform:translateX(-50%);width:min(620px,90vw);padding:12px 24px;border:4px solid #173522;border-radius:20px;background:#fff8daf2;text-align:center;box-shadow:0 7px 0 #244f37}
.world-map-title p{margin:0;color:#e0703c;font-weight:900;letter-spacing:.18em}.world-map-title h2{margin:4px 0;font-size:clamp(1.5rem,4vw,2.5rem)}
.map-island{position:absolute;z-index:2;left:50%;width:min(390px,72vw);min-height:145px;transform:translateX(-50%);padding:18px;border:5px solid #173522;border-radius:48% 42% 46% 40%;color:#173522;box-shadow:0 10px 0 #145678,0 16px 35px #073d5c88;text-align:center;font-family:inherit}
.map-island strong,.map-island small{display:block}.map-island strong{font-size:clamp(1.2rem,3vw,2rem)}.map-island small{margin-top:6px;font-weight:900}.map-island span{display:block;margin-bottom:8px;font-size:2rem}
.map-island.sunpatch{top:58%;background:radial-gradient(circle at 50% 30%,#f8de76 0 15%,#8bce62 16% 63%,#d9bb72 64%);cursor:pointer}
.map-island.sunpatch.selected{outline:8px solid #fff5a8;outline-offset:5px;animation:island-pulse 1.4s ease-in-out infinite alternate}
.map-island.northern{top:22%;background:radial-gradient(circle at 50% 35%,#9bd57d 0 18%,#39794b 19% 66%,#726b52 67%);filter:saturate(.55);opacity:.82;cursor:not-allowed}
@keyframes island-pulse{to{transform:translateX(-50%) scale(1.025)}}
.map-help{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);width:min(620px,90vw);margin:0;padding:10px 18px;border:3px solid #173522;border-radius:999px;background:#fff8daf0;text-align:center;font-weight:900}
@media(max-height:650px){.map-island{min-height:110px;padding:10px}.map-island.northern{top:20%}.map-island.sunpatch{top:56%}.map-island span{font-size:1.35rem;margin-bottom:3px}.map-help{bottom:8px}}