:root{font-family:'PingFang TC','Noto Sans TC',system-ui,sans-serif;color:#245446;background:#e9f1dd;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,filter .15s}button:active:not(:disabled){transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #eba846;outline-offset:3px}.hud{height:82px;background:#fffcef;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 28px;box-shadow:0 3px 20px #244b4220;position:relative;z-index:3;border-bottom:3px solid #d5dfbd}.brand{display:flex;gap:10px;align-items:center}.brand svg{width:48px;height:48px;background:#e7edd2;border:1px solid #d3deb9;border-radius:17px;padding:4px}.brand strong{font-size:20px;letter-spacing:1px}.brand small{display:block;font-size:10px;letter-spacing:2px;color:#9ba888;margin-top:4px}.version{font-size:9px;color:#98a582;background:#eaf0db;border-radius:12px;padding:4px 7px}.hud-stats{display:flex;align-items:center;gap:15px}.level-icon{width:40px;height:44px;background:#e4af45;border:3px solid #ffdc78;clip-path:polygon(50% 0,100% 23%,100% 75%,50% 100%,0 75%,0 23%);display:grid;place-items:center;color:#795622;font-size:21px;font-weight:900}.xp-block{min-width:115px}.xp-block b{font-size:11px}.xp-block small{font-size:9px;color:#99a486}.xp-track{height:5px;background:#e6e9d3;margin:4px 0 2px;border-radius:5px;overflow:hidden}.xp-track i{display:block;height:100%;background:#e9b14c;transition:width .4s}.cash{border-left:1px solid #e0e4ce;padding-left:18px;min-width:125px}.cash small{font-size:10px;color:#9aab8a;display:block}.cash strong{font-size:24px;letter-spacing:1px}.calendar{padding-left:18px;border-left:1px solid #e0e4ce;min-width:90px}.calendar b{font-size:13px}.calendar small{display:block;color:#92a47f;font-size:10px;margin-top:3px}.world-shell{height:calc(100dvh - 176px);position:relative;overflow:hidden;background:#bce0d6}#scene{position:absolute;inset:0}.world-heading{position:absolute;top:23px;left:30px;pointer-events:none;text-shadow:0 1px 3px #ffffff99}.eyebrow{font-size:10px;letter-spacing:2px;color:#5c8873}.world-heading h1{font-size:25px;letter-spacing:1px;margin:5px 0;color:#286655}.world-heading p{font-size:11px;color:#688e7c;margin:0}.chapter{position:absolute;right:24px;top:22px;width:205px;padding:12px 14px;background:#fffceeec;border:2px solid #dce2bc;border-radius:16px;box-shadow:0 5px 0 #52755215}.chapter>span{font-size:9px;letter-spacing:2px;color:#9d9b6b}.chapter button{display:block;background:none;border:0;padding:5px 0 0;text-align:left;width:100%;color:#4c7051}.chapter b{font-size:12px;display:block}.chapter small{font-size:9px;color:#96a580;display:block;margin-top:4px}.selection{position:absolute;bottom:39px;left:22px;border:1px solid #ffffda;background:#fffcebe8;padding:8px 14px;border-radius:20px;font-size:11px;pointer-events:none;box-shadow:0 3px 9px #304f4420}.hint{position:absolute;bottom:13px;left:24px;color:#4d7a6a;font-size:10px;pointer-events:none;text-shadow:0 1px 1px white}.toolbar{height:94px;background:#fffcee;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 24px;border-top:3px solid #d5dfbd;position:relative;z-index:4;box-shadow:0 -3px 20px #355d4310}.toolbar>button{border:1px solid #e0e5cb;background:#f3f4e4;border-radius:13px;color:#547255;min-width:86px;padding:7px 14px;box-shadow:0 3px 0 #e3e6ce}.toolbar b{font-size:11px;display:block}.tool-symbol{display:block;font-size:24px;line-height:27px;color:#92a768}.toolbar .next-day{background:#237b5e;color:#fffce3;margin-left:15px;padding:17px 24px;border-color:#247256;box-shadow:0 4px 0 #16553f;min-width:180px}.next-day b{font-size:14px}.next-day small{font-size:9px;color:#b8d7b4;display:block;margin-top:3px}.toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%,10px);max-width:calc(100% - 35px);width:max-content;background:#234f40f2;color:#fff9dc;border:1px solid #7daa79;padding:13px 22px;border-radius:14px;font-size:12px;z-index:50;box-shadow:0 6px 20px #203b4230;opacity:0;pointer-events:none;transition:.2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.toast.error{background:#a76443}#welcome{border:3px solid #d8dfb2;border-radius:26px;padding:35px 42px;text-align:center;background:#fffbeb;color:#32694f;max-width:460px;width:calc(100% - 32px);box-shadow:0 20px 100px #244e5144}#welcome::backdrop{background:#244c4470;backdrop-filter:blur(5px)}.welcome-badge{font-size:10px;letter-spacing:3px;color:#ad9b5a}#welcome h2{font-size:32px;line-height:1.5;letter-spacing:2px;margin:18px 0}#welcome p{font-size:12px;line-height:1.9;color:#86977c}.welcome-route{background:#edf0d9;padding:14px 5px;border-radius:12px;font-size:11px;color:#839261;margin:22px 0}#start{border:0;border-radius:13px;background:#2f835f;color:#fffae6;padding:16px;width:100%;font-weight:bold;box-shadow:0 4px 0 #1c5b43}#welcome small{display:block;margin-top:18px;font-size:9px;line-height:1.8;color:#a2ac8c}@media(max-width:950px){.hud{padding:0 16px}.brand strong{font-size:16px}.xp-block{min-width:80px}.hud-stats{gap:10px}.toolbar{gap:7px;padding:10px}.toolbar>button{min-width:65px;padding:8px}.toolbar .next-day{min-width:155px;margin-left:2px;padding:17px 12px}.world-heading h1{font-size:21px}.chapter{width:175px}.cash{min-width:110px}}
@media(max-width:620px){.hud{height:71px;padding:0 10px;gap:6px}.brand svg{height:35px;width:35px;border-radius:12px}.brand strong{font-size:12px;letter-spacing:0}.brand small{font-size:8px;letter-spacing:0}.version,.xp-block,.calendar{display:none}.hud-stats{gap:7px}.level-icon{width:29px;height:33px;font-size:16px}.cash{min-width:80px;padding-left:8px}.cash strong{font-size:19px}.cash small{font-size:8px}.world-shell{height:calc(100dvh - 175px)}.world-heading{top:14px;left:15px}.world-heading h1{font-size:18px}.world-heading p{font-size:9px;max-width:175px}.eyebrow{font-size:8px;letter-spacing:1px}.chapter{top:100px;right:10px;width:145px;padding:8px 11px;pointer-events:auto}.chapter b{font-size:10px}.chapter small{font-size:8px}.chapter>span{font-size:8px}.toolbar{height:104px;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:6px 8px}.toolbar>button{min-width:0;padding:3px;border-radius:8px}.toolbar b{font-size:9px}.tool-symbol{font-size:19px;line-height:23px}.toolbar .next-day{grid-column:1/-1;padding:6px;min-width:0;margin:0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:12px}.next-day b{font-size:12px}.next-day small{font-size:8px;margin-top:0}.selection{bottom:35px;left:10px;font-size:9px;padding:7px 11px}.hint{left:13px;bottom:13px;font-size:8px}.toast{bottom:116px;font-size:11px}#welcome{padding:28px 24px}#welcome h2{font-size:27px}}

.celebration{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}.celebration i{position:absolute;left:50%;top:24%;height:10px;width:7px;background:var(--color);border-radius:2px;opacity:0;animation:confetti 1.4s ease-out var(--delay) forwards}@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(320deg)}}

.toolbar>button[hidden]{display:none}

/* Responsive shell: the map owns every pixel between the header and controls. */
html, body { min-height: 0; }
body {
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  overscroll-behavior: none;
}
.hud { flex: 0 0 auto; }
.world-shell { height: auto; min-height: 0; flex: 1 1 auto; }
.toolbar { flex: 0 0 auto; }
.toolbar-actions { display: contents; }
.toolbar-actions > button {
  min-width: 66px;
  padding: 5px 11px;
  border: 1px solid #e0e5cb;
  border-radius: 13px;
  background: #f3f4e4;
  box-shadow: 0 3px 0 #e3e6ce;
  color: #547255;
}
.toolbar-toggle { display: none; }

@media (min-width: 621px) and (max-width: 950px) {
  .toolbar { gap: 7px; padding: 10px; }
  .toolbar-actions > button { min-width: 60px; padding: 8px 6px; }
}

@media (max-width: 620px) {
  body { --mobile-toolbar-base: 96px; }
  .hud {
    height: 56px;
    flex: 0 0 56px;
    padding: 0 9px;
    gap: 4px;
  }
  .brand { gap: 6px; min-width: 0; }
  .brand svg { width: 30px; height: 30px; flex: 0 0 auto; }
  .brand strong { overflow: hidden; font-size: 12px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
  .brand small, .version, .level-icon, .xp-block { display: none; }
  .hud-stats { gap: 7px; flex: 0 0 auto; }
  .cash { min-width: 68px; padding-left: 7px; }
  .cash small { display: none; }
  .cash strong { font-size: 16px; }
  .calendar { display: block; min-width: 50px; padding-left: 7px; }
  .calendar b { font-size: 10px; white-space: nowrap; }
  .calendar small { margin-top: 1px; font-size: 9px; white-space: nowrap; }
  .world-shell { height: auto; min-height: 0; flex: 1 1 auto; }
  .chapter { top: 8px; right: 8px; width: auto; max-width: min(58vw, 205px); padding: 7px 9px; border-radius: 12px; }
  .chapter > span, .chapter small { display: none; }
  .chapter button { padding: 0; }
  .chapter b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar {
    display: grid;
    height: auto;
    min-height: calc(var(--mobile-toolbar-base) + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: 48px 38px;
    align-content: start;
    gap: 3px;
    padding: 4px 6px max(4px, env(safe-area-inset-bottom, 0px));
    border-top-width: 2px;
  }
  .toolbar-actions { display: contents; }
  .toolbar-toggle { display: none; }
  .toolbar-actions > button[data-open] {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2px 1px;
    border-radius: 9px;
    box-shadow: 0 2px 0 #e3e6ce;
    touch-action: manipulation;
  }
  .toolbar-actions > button[data-open][hidden] { display: none; }
  .toolbar b { font-size: 9px; line-height: 1.15; white-space: nowrap; }
  .tool-symbol { height: 25px; font-size: 18px; line-height: 24px; }
  .tool-symbol svg { width: 23px; height: 23px; }
  .toolbar .next-day {
    display: flex;
    min-width: 0;
    min-height: 36px;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 3px 8px;
    border-radius: 9px;
    box-shadow: 0 2px 0 #16553f;
    touch-action: manipulation;
  }
  .toolbar .next-day b { font-size: 11px; }
  .toolbar .next-day small { display: none; }
  .selection { bottom: 8px; left: 8px; max-width: calc(100% - 75px); padding: 5px 8px; font-size: 9px; }
  .hint { display: none; }
  .toast { bottom: calc(var(--mobile-toolbar-base) + env(safe-area-inset-bottom, 0px) + 7px); max-width: calc(100vw - 24px); padding: 9px 13px; font-size: 11px; }
  #welcome { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow: auto; padding: 25px 20px; }
  #welcome h2 { margin: 12px 0; font-size: 25px; }
}

/* Compact landscape controls can collapse so the pond remains the focus. */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  body { --landscape-toolbar-base: 48px; }
  .hud { height: 48px; flex: 0 0 48px; padding: 0 10px; gap: 8px; }
  .brand { gap: 6px; }
  .brand svg { width: 30px; height: 30px; }
  .brand strong { font-size: 13px; }
  .brand small, .version, .level-icon, .xp-block { display: none; }
  .hud-stats { gap: 9px; }
  .cash { min-width: 70px; padding-left: 9px; }
  .cash small { display: none; }
  .cash strong { font-size: 16px; }
  .calendar { min-width: 57px; padding-left: 8px; }
  .calendar b { font-size: 11px; }
  .calendar small { margin-top: 1px; font-size: 9px; }
  .world-shell { height: auto; min-height: 0; flex: 1 1 auto; }
  .chapter { top: 7px; right: 8px; width: auto; max-width: 175px; padding: 6px 9px; border-radius: 11px; }
  .chapter > span, .chapter small { display: none; }
  .chapter button { padding: 0; }
  .chapter b { font-size: 10px; }
  .toolbar {
    position: relative;
    z-index: 20;
    display: flex;
    height: auto;
    min-height: calc(var(--landscape-toolbar-base) + env(safe-area-inset-bottom, 0px));
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 8px max(3px, env(safe-area-inset-bottom, 0px));
    border-top-width: 2px;
  }
  .toolbar-toggle {
    display: block;
    min-width: 58px;
    min-height: 40px;
    padding: 5px 8px;
    border: 1px solid #e0e5cb;
    border-radius: 10px;
    background: #f3f4e4;
    box-shadow: 0 2px 0 #e3e6ce;
    color: #547255;
    font-size: 11px;
    font-weight: 800;
    touch-action: manipulation;
  }
  .toolbar.is-expanded .toolbar-toggle { background: #e5eed9; }
  .toolbar-actions {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 6px);
    left: 8px;
    display: none;
    align-items: stretch;
    gap: 5px;
    padding: 6px;
    border: 1px solid #d9e0c8;
    border-radius: 13px;
    background: #fffceef5;
    box-shadow: 0 5px 18px #34564130;
  }
  .toolbar.is-expanded .toolbar-actions { display: flex; }
  .toolbar > .toolbar-actions > button[data-open] {
    display: flex;
    min-width: 0;
    min-height: 42px;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 2px 1px;
    border-radius: 8px;
    box-shadow: 0 2px 0 #e3e6ce;
    touch-action: manipulation;
  }
  .toolbar > .toolbar-actions > button[data-open][hidden] { display: none; }
  .toolbar b { font-size: 9px; line-height: 1.1; white-space: nowrap; }
  .tool-symbol { height: 22px; font-size: 17px; line-height: 21px; }
  .tool-symbol svg { width: 21px; height: 21px; }
  .toolbar .next-day { min-width: 124px; min-height: 40px; margin: 0; padding: 4px 8px; border-radius: 9px; box-shadow: 0 2px 0 #16553f; }
  .toolbar .next-day b { font-size: 10px; }
  .toolbar .next-day small { display: none; }
  .selection { bottom: 5px; left: 8px; padding: 4px 7px; font-size: 8px; }
  .toast { bottom: calc(var(--landscape-toolbar-base) + env(safe-area-inset-bottom, 0px) + 5px); max-width: calc(100vw - 24px); padding: 7px 11px; font-size: 10px; }
}
.game-icon{width:36px;height:36px;display:inline-block;vertical-align:middle}.hud{height:72px}.brand small{letter-spacing:1px}.brand strong{font-size:18px}.world-shell{height:calc(100dvh - 158px)}.toolbar{height:86px;gap:8px}.toolbar>button{min-width:66px;padding:5px 11px}.tool-symbol{height:36px;line-height:36px}.tool-symbol svg{width:34px;height:34px}.toolbar .next-day{padding:13px 20px}.xp-block{display:none}.level-icon{width:30px;height:34px;font-size:16px}.calendar b{font-size:14px}.calendar small{font-size:12px;color:#70956e}.chapter{top:16px;right:20px;width:220px;padding:10px 14px}.chapter>span{font-size:9px}.chapter b{font-size:13px}.chapter small{display:none}.selection{bottom:18px;left:20px;padding:7px 12px;font-size:10px}.hint{display:none}.toast{bottom:100px;padding:10px 18px;font-size:11px}.toolbar b{font-size:10px}.version{display:none}@media(max-width:620px){.hud{height:64px;padding:0 9px}.brand{gap:5px}.brand strong{font-size:12px}.brand small{display:none}.brand svg{width:30px;height:30px}.calendar{display:block;min-width:52px;padding-left:7px}.calendar b{font-size:11px}.calendar small{font-size:10px;margin-top:1px}.cash{min-width:68px}.cash strong{font-size:17px}.cash small{display:none}.level-icon{display:none}.world-shell{height:calc(100dvh - 168px)}.chapter{top:10px;right:10px;width:auto;max-width:210px;padding:8px 12px}.chapter>span{display:none}.chapter button{padding:0}.chapter b{font-size:12px}.toolbar{height:104px;grid-template-columns:repeat(9,1fr);gap:4px;padding:6px}.toolbar>button{padding:4px 2px;min-width:0}.tool-symbol{height:28px;line-height:28px}.tool-symbol svg{width:27px;height:27px}.toolbar .next-day{padding:6px;grid-column:1/-1}.toolbar b{font-size:9px}.selection{bottom:12px;left:10px;max-width:calc(100% - 80px);font-size:9px}.toast{bottom:112px}.toolbar .next-day small{display:none}}

/* The education prompt shares the existing game toast and never creates a modal backdrop. */
.toast.education-open { pointer-events: auto; width: min(520px, calc(100vw - 24px)); text-align: left; }
.toast__message { display: block; }
.toast__education { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #ffffff55; }
.toast__education[hidden] { display: none; }
.toast__education p { grid-column: 1; grid-row: 1; margin: 0; font-size: 13px; line-height: 1.5; }
.toast__education small { grid-column: 1; grid-row: 2; color: #e4efcf; font-size: 10px; line-height: 1.4; }
.toast__education button { grid-column: 2; grid-row: 1 / span 2; min-height: 38px; padding: 7px 12px; border: 1px solid #f5df9f; border-radius: 10px; background: #fff9dd; color: #345a43; font-size: 11px; font-weight: 800; }
.toast__education button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.toast.weather-open { pointer-events: auto; width: min(520px, calc(100vw - 24px)); text-align: left; }
.toast__weather { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #ffffff55; }
.toast__weather[hidden] { display: none; }
.toast__weather p { margin: 0; font-size: 13px; line-height: 1.5; }
.toast__weather button { min-height: 38px; padding: 7px 12px; border: 1px solid #f5df9f; border-radius: 10px; background: #fff9dd; color: #345a43; font-size: 11px; font-weight: 800; }
.toast__weather button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 620px) {
  .toast.education-open { max-width: calc(100vw - 24px); padding: 9px 12px; }
  .toast__education { gap: 4px 8px; margin-top: 6px; padding-top: 6px; }
  .toast__education p { font-size: 11px; }
  .toast__education small { font-size: 9px; }
  .toast__education button { min-height: 34px; padding: 5px 9px; font-size: 10px; }
  .toast.weather-open { max-width: calc(100vw - 24px); padding: 9px 12px; }
  .toast__weather { gap: 4px 8px; margin-top: 6px; padding-top: 6px; }
  .toast__weather p { font-size: 11px; }
  .toast__weather button { min-height: 34px; padding: 5px 9px; font-size: 10px; }
}
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .toast.education-open, .toast.weather-open { bottom: calc(var(--landscape-toolbar-base) + env(safe-area-inset-bottom, 0px) + 120px); }
}

.calendar__weather { display: flex; align-items: center; gap: 4px; min-height: 28px; }
.calendar__weather small { display: block; margin-top: 0; white-space: nowrap; }
.weather-thermometer__svg { display: block; width: 24px; height: 27px; overflow: visible; }
@media (max-width: 620px) {
  .calendar { min-width: 77px; }
  .calendar__weather { gap: 1px; min-height: 25px; }
  .calendar__weather small { font-size: 9px; }
  .weather-thermometer__svg { width: 20px; height: 23px; }
}
