:root{font-family:Inter,"Noto Sans TC",system-ui,sans-serif;color:#40352c;background:#ddeaf0}*{box-sizing:border-box}body{margin:0;min-height:100vh}.app{width:min(100%,430px);min-height:100dvh;margin:auto;position:relative;overflow:hidden;background:#f7f0e5;box-shadow:0 0 40px #26465730}.screen{display:none;min-height:calc(100dvh - 72px);padding:18px 16px 94px}.screen.active{display:block}.topbar{display:flex;gap:7px;position:relative;z-index:5}.topbar>*{border:0;border-radius:14px;padding:9px 10px;background:#075f89e8;color:white;font-size:12px}.topbar span{margin-right:auto}.helper-card{position:absolute;z-index:4;top:70px;left:16px;display:flex;gap:9px;width:180px;padding:10px;background:#fffdeee8;border-radius:16px;box-shadow:0 5px 18px #17334825}.helper-avatar{font-size:38px}.helper-card small,.helper-card strong{display:block}.helper-card strong{color:#19954c}.helper-card p{font-size:11px;margin:4px 0}.world{position:absolute;inset:0 0 72px;background:linear-gradient(#2aa4e8 0 27%,#a8e6fb 27% 42%,#48b0cc 42% 55%,#c5a674 55%);overflow:hidden}.world:before{content:"";position:absolute;left:-15%;right:-15%;bottom:0;height:53%;background:linear-gradient(145deg,#629350 0 24%,#e7d5a8 24% 52%,#488e9c 52%);clip-path:polygon(0 42%,23% 26%,43% 39%,67% 8%,100% 28%,100% 100%,0 100%)}.theme-neon .world{background:linear-gradient(#100d35,#302064 45%,#110f2a)}.theme-neon .world:before{background:linear-gradient(145deg,#38185d 0 28%,#172c62 28% 57%,#11182e 57%);filter:drop-shadow(0 0 12px #ff3de8);clip-path:polygon(0 30%,25% 17%,46% 31%,65% 12%,100% 24%,100% 100%,0 100%)}.sun{position:absolute;right:22px;top:80px;width:48px;height:48px;background:#ffdb67;border-radius:50%;box-shadow:0 0 30px #fff08e}.theme-neon .sun{background:#b63cff;box-shadow:0 0 30px #00e5ff}.lighthouse{position:absolute;z-index:1;right:50px;top:150px;width:48px;height:140px;background:repeating-linear-gradient(#fff 0 24px,#ef5757 24px 42px);clip-path:polygon(25% 0,75% 0,90% 100%,10% 100%)}.lighthouse i{display:block;width:100%;height:22px;background:#273850}.house{position:absolute;z-index:2;left:45px;top:295px;width:190px;height:145px;border:10px solid #6b492f;border-top-width:48px;background:#f5d79a;clip-path:polygon(50% 0,100% 34%,94% 100%,6% 100%,0 34%)}.house b{position:absolute;bottom:10px;left:35px;background:#205d78;color:white;padding:7px}.theme-neon .house{border-color:#541d70;background:#1f254d;box-shadow:0 0 22px #ff40ea}.dock{position:absolute;z-index:2;left:130px;bottom:0;width:180px;height:140px;background:repeating-linear-gradient(90deg,#7d5735 0 16px,#ac7a48 16px 22px);clip-path:polygon(38% 0,67% 0,100% 100%,0 100%)}.sprite{position:absolute;z-index:3;border:0;background:none;font-size:43px;filter:drop-shadow(0 5px 3px #0005);animation:bob 2s ease-in-out infinite}.tao{left:45px;bottom:160px}.yapi{left:174px;bottom:174px}.yume{right:52px;bottom:155px}.interaction{position:absolute;z-index:4;right:107px;bottom:230px;padding:7px;background:white;border-radius:12px;animation:bob 1.5s infinite}@keyframes bob{50%{transform:translateY(-6px)}}.event-card{position:absolute;z-index:6;left:16px;right:16px;bottom:85px;display:flex;align-items:end;gap:10px;padding:14px;background:#fffaf0ed;border-radius:20px;box-shadow:0 7px 22px #17334835}.event-card small{color:#dc3f78}.event-card h2{font-size:20px;margin:3px 0}.event-card p{font-size:12px;margin:0}.event-card button,.primary,.event-detail button,.next-trip button,.theme-status button{border:0;border-radius:13px;background:#ed477d;color:#fff;padding:12px;font-weight:700}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.page-title h1{margin:0}.page-title span{font-size:13px}.map{height:64dvh;position:relative;background:linear-gradient(#40a9df,#75c1d0);border-radius:24px;overflow:hidden}.map:before{content:"";position:absolute;inset:8% 15%;background:#6fa959;clip-path:polygon(50% 0,79% 17%,100% 44%,79% 72%,57% 100%,24% 84%,0 60%,12% 27%)}.place{position:absolute;z-index:2;border:0;border-radius:13px;background:#fffdf1;padding:8px;display:grid;box-shadow:0 4px 10px #0003}.place small{color:#e83d76}.active-place{top:12%;left:30%}.neon{top:36%;right:6%}.manor{top:53%;left:8%}.beach{bottom:10%;left:35%}.locked{bottom:24%;right:8%;filter:grayscale(1)}.primary{width:100%;margin-top:14px}.companion-list{display:grid;gap:12px}.companion-card{display:flex;align-items:center;gap:14px;padding:14px;background:#fff;border-radius:18px;box-shadow:0 5px 15px #5a47351c}.companion-card .face{font-size:48px}.companion-card div{flex:1}.companion-card h2,.companion-card p{margin:3px}.companion-card button{border:0;border-radius:12px;background:#f1dce5;padding:9px;color:#a52e5b}.companion-card.resident-card{outline:2px solid #ed477d}.event-detail{margin-top:18px;padding:18px;background:#fff;border-radius:22px;text-align:center}.event-detail small{color:#e23872}.event-detail h2{margin:5px}.portraits{display:flex;justify-content:center}.portraits span{font-size:40px;width:62px;height:62px;display:grid;place-items:center;background:#f5e8da;border-radius:50%;margin:-4px}.event-detail strong{display:block;color:#e23872;font-size:20px}.actions{display:flex;gap:6px;margin-top:14px}.actions button{flex:1;padding:9px;font-size:11px}.tabs{display:flex;gap:6px;overflow:auto;margin-bottom:14px}.tabs button{border:0;border-radius:10px;padding:8px 12px;background:#e5ded3}.tabs .selected{background:#ed477d;color:white}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.collectible{min-height:120px;padding:10px 5px;background:#fff;border-radius:15px;text-align:center;box-shadow:0 4px 10px #00000012}.collectible span{font-size:45px;display:block}.collectible b{font-size:13px}.collectible.locked-item{filter:grayscale(1);opacity:.5}.unlock-note{margin-top:15px;padding:14px;background:#fff;border-radius:16px}.profile-card,.resident,.theme-status,.next-trip{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border-radius:20px;margin-bottom:12px}.profile-avatar{font-size:48px}.profile-card h2,.profile-card p{margin:2px}.profile-card progress{accent-color:#ed477d}.resident strong{margin-right:auto}.resident button,.page-title button{border:0;background:#f3e4e9;border-radius:10px;padding:9px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.stats div{background:#fff;border-radius:16px;padding:16px;text-align:center}.stats b,.stats span{display:block}.stats b{font-size:24px;color:#e43f78}.theme-status div,.next-trip{flex:1}.theme-status h2,.next-trip h2{margin:2px}.next-trip{display:block}.next-trip button{margin-top:8px}.bottom-nav{position:absolute;z-index:20;left:0;right:0;bottom:0;height:72px;display:flex;background:#385b69ee;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{flex:1;border:0;background:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;opacity:.75}.bottom-nav span{font-size:12px}.bottom-nav .active{color:#ff72a4;opacity:1}dialog{border:0;border-radius:24px;width:min(92%,410px);background:#faf3e8;color:#40352c;padding:0}dialog::backdrop{background:#10263399}dialog form{padding:18px}dialog header{display:flex;justify-content:space-between;align-items:center}dialog header h2{margin:0}dialog header button{border:0;background:none;font-size:20px}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.theme-options button{border:0;border-radius:18px;background:white;padding:8px}.theme-preview{height:130px;display:grid;place-items:center;font-size:50px;border-radius:13px}.coast-preview{background:linear-gradient(#42aff0,#73d3d2,#cdb77a)}.neon-preview{background:linear-gradient(#171244,#572477,#e83cca)}.theme-options b,.theme-options small{display:block;margin-top:5px}.ticket{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:12px;margin-top:12px}.ticket time{text-align:center;color:#e43f78}.ticket div{flex:1}.ticket h3,.ticket p{margin:2px}.ticket p,.ticket span{font-size:11px}.ticket span{color:#d43d70}.ticket button{border:1px solid #ddd;background:#fff;padding:10px}.helper-line{padding:13px;background:#e7f4dc;border-radius:14px}
@media(min-width:700px){body{padding:24px}.app{min-height:820px;border-radius:32px}.screen{min-height:748px}}

/* Production pixel-art assets */
.world{background:url("./assets/home-coast.png") center/cover no-repeat}
.theme-neon .world{background:url("./assets/home-neon.png") center/cover no-repeat}
.world:before,.sun,.lighthouse,.house,.dock{display:none}
.sprite{width:104px;height:124px;border:0;background-image:url("./assets/companions.png");background-repeat:no-repeat;background-size:300% 100%;font-size:0}
.tao{left:34px;bottom:150px;background-position:0 center}
.yapi{left:160px;bottom:160px;background-position:50% center}
.yume{right:30px;bottom:148px;background-position:100% center}
.companion-card .face{display:block;width:62px;height:74px;background-image:url("./assets/companions.png");background-repeat:no-repeat;background-size:300% 100%;font-size:0;flex:0 0 62px}
.companion-card .tao-face{background-position:0 center}
.companion-card .yapi-face{background-position:50% center}
.companion-card .yume-face{background-position:100% center}
.coast-preview{background:url("./assets/home-coast.png") center/cover}
.neon-preview{background:url("./assets/home-neon.png") center/cover}