:root{--bg:#fbf6ee;--surface:#fffdf9;--ink:#302633;--muted:#6e6270;--line:#dfd3d0;--primary:#c0567a;--accent:#f0a04b;--sea:#77c5d5;--shadow:0 16px 40px #5b31452b;font-family:"Noto Sans TC",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
html[data-theme="sakura"]{--bg:#fdf0f2;--surface:#fff9fa;--ink:#382832;--muted:#765b69;--line:#ebcbd5;--sea:#78b8d2}html[data-theme="cream"]{--bg:#fbf6ee;--surface:#fffdf9;--ink:#302633;--muted:#6e6270;--line:#dfd3d0;--sea:#77c5d5}html[data-theme="violet"]{--bg:#2a1f33;--surface:#36283f;--ink:#fff7f6;--muted:#d7c4d9;--line:#5c4766;--primary:#ff90b8;--accent:#ffd075;--sea:#405a9f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--bg);transition:background 1.6s,color 1.6s}.skip{position:fixed;top:-4rem;left:1rem;z-index:80;background:var(--surface);padding:.75rem;color:var(--ink)}.skip:focus{top:1rem}.topbar{height:68px;position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.45rem max(1rem,calc((100vw - 1500px)/2));background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}button,input,select{font:inherit}button{border:0;cursor:pointer;color:inherit;background:var(--surface);min-height:44px;border-radius:12px;padding:.55rem .75rem;box-shadow:0 2px 0 color-mix(in srgb,var(--line) 80%,transparent);transition:transform .2s,background .2s}button:hover,button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:2px;transform:translateY(-1px)}.brand{display:flex;align-items:center;gap:.55rem;text-align:left;background:transparent;box-shadow:none;line-height:1}.brand b,h1,h2,h3{font-family:"LXGW WenKai TC","Noto Sans TC",cursive}.brand small{display:block;font-size:.72rem;color:var(--muted);margin-top:.3rem}.mascot{width:42px;height:42px;background:var(--accent);border-radius:50% 50% 40% 40%;display:grid;place-items:center;font-size:.76rem;font-family:serif;font-weight:900;color:#fff;border:3px solid #fff;box-shadow:0 3px 0 #b4752e}.toolbar{display:flex;gap:.35rem}.toolbar button{font-size:.82rem}.toolbar button[aria-pressed="true"],.theme-panel .active,.time-panel .active{background:var(--primary);color:white}
#world{height:min(780px,calc(100vh - 10px));min-height:600px;position:relative;overflow:hidden;background:linear-gradient(#c5dff4,#b5daf0 55%,var(--sea));isolation:isolate}#scene{position:absolute;inset:0;z-index:-1}canvas{display:block;width:100%;height:100%}.hero-copy{position:absolute;top:100px;left:max(1.2rem,calc((100vw - 1420px)/2));max-width:380px;text-shadow:0 2px 15px #fff9}.eyebrow{font-size:.78rem;font-weight:900;letter-spacing:.08em;color:var(--primary);margin:.2rem 0}.hero-copy h1{font-size:clamp(1.8rem,4vw,3.3rem);margin:.1rem 0;text-wrap:balance}.hero-copy p:last-child{margin:.25rem 0;font-size:1rem}.world-controls{position:absolute;top:95px;right:1rem;display:flex;gap:.45rem}.world-controls button{background:color-mix(in srgb,var(--surface) 90%,transparent)}#backpackBtn{position:relative}#bagCount{display:inline-grid;place-items:center;color:#fff;background:var(--primary);border-radius:100%;font-size:.76rem;width:21px;height:21px}.clock{position:absolute;bottom:1rem;left:1rem;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);padding:.55rem .75rem;border-radius:12px;font-weight:700}.time-panel,.theme-panel{position:absolute;display:flex;gap:.3rem;bottom:1rem;right:1rem;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(8px);border-radius:14px;padding:.3rem}.time-panel button{min-width:44px;padding:.3rem}.theme-panel{bottom:59px}.theme-panel button{min-height:36px;font-size:.73rem;padding:.3rem .45rem}.theme-panel i{width:10px;height:10px;background:var(--primary);display:inline-block;border-radius:50%;margin-right:.15rem}.onboarding{position:absolute;bottom:83px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;max-width:530px;background:color-mix(in srgb,var(--surface) 93%,transparent);border:1px solid var(--line);border-radius:20px;padding:.75rem 1rem;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.onboarding p{margin:0;font-size:.88rem}.onboarding button{margin-left:auto;background:var(--primary);color:white;white-space:nowrap}.mascot-face{width:48px;height:48px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--accent);font-size:1.35rem}.island-label{position:absolute;border:0;border-radius:99px;padding:.38rem .68rem;min-height:0;color:#302633;background:#fffdf9e8;font-family:"LXGW WenKai TC";font-size:.85rem;box-shadow:0 4px 14px #3c294644;white-space:nowrap}.island-label:hover{background:#fff}.island-label .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);margin-right:.3rem}.island-label.center{background:var(--primary);color:#fff}.island-label.hidden{opacity:.2;pointer-events:none}.bubble{position:fixed;z-index:45;max-width:290px;background:var(--surface);border:2px solid var(--accent);padding:.8rem;border-radius:16px;box-shadow:var(--shadow)}.bubble:after{content:"";position:absolute;bottom:-10px;left:24px;border:10px solid transparent;border-top-color:var(--accent);border-bottom:0}.bubble p{margin:.3rem 0}.bubble .bubble-actions{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.5rem}.bubble button{font-size:.8rem;min-height:36px}.bubble .trade{background:var(--primary);color:#fff}.toast{position:fixed;z-index:90;bottom:1rem;left:50%;transform:translate(-50%,100px);padding:.75rem 1rem;border-radius:12px;background:#302633;color:#fff;box-shadow:var(--shadow);transition:transform .3s;max-width:90vw}.toast.show{transform:translate(-50%,0)}
.access-list{padding:4.5rem max(1rem,calc((100vw - 1280px)/2));background:var(--bg)}.access-list>div:first-child{display:flex;justify-content:space-between;align-items:end;gap:1rem}.access-list h2{margin:.2rem 0 1.1rem;font-size:2rem}.list-tools{display:flex;gap:.6rem;align-items:end;justify-content:space-between;margin-bottom:1.2rem}.list-tools label{font-size:.84rem;font-weight:700}.list-tools input,.list-tools select{display:block;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:.55rem .7rem;border-radius:10px;min-height:44px}.island-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.island-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.1rem;box-shadow:0 3px 12px #32213a0d}.island-card h3{margin:.1rem 0}.island-card p{font-size:.88rem;color:var(--muted);min-height:46px}.chip{display:inline-block;padding:.18rem .5rem;border-radius:99px;background:color-mix(in srgb,var(--accent) 22%,var(--surface));font-size:.75rem;font-weight:700}.island-card button{width:100%;background:var(--primary);color:white;margin-top:.7rem}.resident-list{margin-top:2rem;padding:1.1rem;border-radius:18px;border:1px solid var(--line);background:var(--surface)}.resident-list h3{margin:0 0 .6rem}.resident-list p{display:inline-block;vertical-align:top;width:30%;padding-right:1rem;font-size:.85rem}.resident-list b{color:var(--primary)}
.drawer{position:fixed;z-index:50;right:0;top:0;width:min(560px,95vw);height:100dvh;overflow:auto;background:var(--surface);transform:translateX(105%);transition:transform .35s ease;box-shadow:-12px 0 40px #1e13253b;padding:6rem 1.5rem 2rem;color:var(--ink)}.drawer.open{transform:none}.drawer .close{position:absolute;right:1rem;top:1rem;font-size:1.6rem;width:44px}.drawer h2{font-size:2rem;margin:.2rem 0}.drawer .meta{color:var(--muted)}.drawer .notice{padding:.65rem .8rem;background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-radius:10px;font-size:.84rem}.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-top:1rem;position:sticky;top:-1rem;padding:.7rem 0;background:var(--surface);z-index:1}.tabs button{box-shadow:none;border-radius:9px;min-height:38px;font-size:.85rem}.tabs button.active{background:var(--primary);color:#fff}.tab{padding:.8rem 0}.tab li{margin:.75rem 0;line-height:1.7}.worksheet textarea{width:100%;min-height:92px;padding:.65rem;margin:.35rem 0 .8rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}.mini-actions{display:flex;gap:.5rem;flex-wrap:wrap}.primary{background:var(--primary);color:white}.quiz-item{border-bottom:1px solid var(--line);padding:.9rem 0}.quiz-item label{display:block;padding:.45rem;border-radius:8px}.quiz-item label:hover{background:var(--bg)}.result{margin-top:1rem;padding:.8rem;border-radius:12px;background:color-mix(in srgb,var(--accent) 20%,var(--surface));font-weight:700}.scrim{position:fixed;z-index:40;inset:0;background:#150e1866}.center-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.progress-card{padding:.75rem;border-radius:12px;background:var(--bg);font-size:.82rem}.bar{height:8px;border-radius:10px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);width:0}.guide-box,.bag-box{border:1px solid var(--line);border-radius:14px;padding:.9rem;background:var(--bg)}.guide-box input{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:9px;margin:.5rem 0;background:var(--surface);color:var(--ink)}footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem max(1rem,calc((100vw - 1280px)/2));background:var(--surface);color:var(--muted);font-size:.78rem}footer a{color:var(--primary)}
@media(max-width:800px){.topbar{height:62px;padding:.3rem .5rem}.toolbar button span,.world-controls #overviewBtn{display:none}.toolbar button{min-width:44px;padding:.45rem}.brand{padding:.2rem}.mascot{width:36px;height:36px}.hero-copy{top:80px;left:1rem;max-width:260px}.hero-copy h1{font-size:1.75rem}.world-controls{top:76px;right:.7rem}.world-controls #overviewBtn{min-width:44px}.theme-panel{right:.5rem;left:.5rem;bottom:57px;justify-content:space-around}.theme-panel button{font-size:.68rem}.time-panel{right:.5rem;bottom:7px}.clock{bottom:9px;left:.5rem;font-size:.78rem}.onboarding{left:.6rem;right:.6rem;bottom:106px;transform:none;padding:.6rem;gap:.5rem}.onboarding p{font-size:.78rem}.onboarding .mascot-face{width:40px;height:40px}.onboarding button{padding:.45rem}.island-label{font-size:.73rem;padding:.3rem .48rem}.access-list{padding:2.5rem 1rem}.access-list>div:first-child{display:block}.list-tools{display:grid;grid-template-columns:1fr 1fr}.list-tools label{grid-column:1/-1}.list-tools input{width:100%}.island-cards{grid-template-columns:1fr}.resident-list p{width:100%;margin:.4rem 0}.drawer{width:100%;top:auto;bottom:0;height:min(83dvh,760px);border-radius:20px 20px 0 0;transform:translateY(105%);padding:4.6rem 1rem 1.5rem}.drawer.open{transform:none}.drawer .close{top:.7rem}.tabs{top:-.5rem;overflow:auto}.tabs button{white-space:nowrap}.center-progress{grid-template-columns:1fr 1fr}footer{display:block}.bubble{left:.5rem!important;right:.5rem;bottom:1rem!important;top:auto!important;max-width:none}.bubble:after{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Keep the guided entry copy legible against the changing sky. */
.brand{color:var(--ink)}
.hero-copy{color:#35253d;text-shadow:0 2px 8px #fff}
.hero-copy p:last-child{font-weight:700}
.onboarding,.clock{color:var(--ink)}