.island-home{max-width:1280px;margin:auto;padding:22px 24px 0}
.island-greeting{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 4px 18px}.island-greeting h1{font-size:clamp(24px,3vw,36px);margin:0}.island-hint{font-size:15px;color:#756b7c}
.island-board{position:relative;min-height:670px;border-radius:34px;isolation:isolate;background:#b3dddd url('assets/island.png') center/cover;box-shadow:0 12px 30px #44334614;border:5px solid white;overflow:hidden;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-content:start;padding:80px 35px 200px}
.island-board:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#f9fbf215,#e2f4f130)}
.island-stop{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 10px 16px;border:3px solid #fff;box-shadow:0 8px 0 #36575a28,0 12px 25px #3f536221;border-radius:30px;min-width:0;background:#fff8ec;transition:transform .15s}
.island-stop:hover{transform:translateY(-4px)}.island-stop:active{transform:translateY(3px)}.island-stop.mint{background:#e9f4eb;margin-top:70px;margin-bottom:-70px}.island-stop.lavender{background:#f1eafa}.island-stop.yellow{background:#fff4d7;margin-top:70px;margin-bottom:-70px}
.stop-scene{position:relative;display:block;height:142px;width:100%;overflow:hidden;border-radius:20px;background:#f3ddc6}.mint .stop-scene{background:#cde6ce}.lavender .stop-scene{background:#ded4eb}.yellow .stop-scene{background:#f0e4b5}
.stop-scene .character{position:absolute;left:50%;top:-8px;margin-left:-128px;transform:scale(.65);transform-origin:50% 0;animation:none}.stop-prop{position:absolute;bottom:3px;right:5px;font-size:46px;filter:drop-shadow(0 3px 0 #fff)}
.island-stop strong{font-size:27px;margin-top:10px}.stop-detail{font-size:13px;margin:4px 0 10px;font-weight:400}.stop-progress{border-radius:20px;background:#fff9;padding:7px 12px;font-size:12px;line-height:1.2}.resume-tag{position:absolute;top:0;right:-4px;background:#735d92;color:white;border-radius:16px;padding:7px 10px;font-size:11px}
.memory-pair{position:absolute;left:12%;top:25px;display:flex;gap:8px;font-size:35px;transform:rotate(-10deg);background:white;border-radius:12px;padding:14px 7px;box-shadow:0 3px 0 #d5bf80}.memory-pair span{display:block;background:white;transform:rotate(20deg);padding:0 5px}
.island-companion{position:absolute;bottom:-42px;left:28px}.island-companion .character{transform:scale(.78);transform-origin:bottom left}.pet-accessory{position:absolute;left:150px;bottom:80px;font-size:38px}.exam-sign{position:absolute;bottom:30px;right:30px;max-width:250px;background:#fffcf2;border:3px solid white;box-shadow:0 5px 0 #36575a28;font-size:16px}.exam-sign small{font-size:11px;color:#756b7c;line-height:1.4}
@media(max-width:900px){.island-board{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px 28px 140px;gap:24px;min-height:760px;background-size:auto 100%}.island-stop.mint,.island-stop.yellow{margin:0}.stop-scene{height:120px}.stop-scene .character{transform:scale(.58)}.island-stop strong{font-size:24px}.island-companion{bottom:-70px;left:12px}.island-companion .character{transform:scale(.55)}.exam-sign{bottom:24px;right:20px}}
@media(max-width:500px){.island-home{padding:16px 0 0}.island-greeting{padding:0 18px;margin-bottom:14px;display:block}.island-greeting h1{font-size:25px}.island-hint{display:block;margin-top:6px;font-size:13px}.island-board{border-radius:24px;border-width:0;padding:22px 18px 130px;gap:18px 14px;min-height:690px}.island-stop{border-radius:24px;padding:7px 7px 12px}.stop-scene{height:105px;border-radius:17px}.stop-scene .character{transform:scale(.52)}.stop-prop{font-size:35px}.island-stop strong{font-size:23px;margin-top:7px}.stop-detail{font-size:12px;margin-bottom:7px}.stop-progress{font-size:11px;padding:7px 8px}.memory-pair{left:9%;font-size:27px;top:18px;padding:12px 4px}.exam-sign{right:18px;max-width:205px;font-size:14px;padding:12px}.island-companion{left:0}.island-companion .character{transform:scale(.5)}}
@media(prefers-reduced-motion:reduce){.island-stop{transition:none}}
.stop-scene .character.grandpa{top:6px;transform:scale(.5)}
@media(max-width:500px){.stop-scene .character.grandpa{top:8px;transform:scale(.4)}}