:root {
  color-scheme: light;
  --ink: #29352f;
  --muted: #6d776d;
  --paper: rgba(255, 252, 242, 0.94);
  --sage: #6f9a79;
  --sage-dark: #3f684b;
  --terracotta: #d36f54;
  --yellow: #f3c85b;
  --shadow: 0 18px 48px rgba(73, 75, 49, 0.16);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #f3ecd8; color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; }
#gameShell { width: 100%; height: 100%; position: relative; overflow: hidden; isolation: isolate; }
#scene { width: 100%; height: 100%; display: block; outline: none; }

.screen-card { position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 36px)); padding: 34px 36px 28px; border: 1px solid rgba(104, 123, 92, .24); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); text-align: center; backdrop-filter: blur(18px); }
.start-card { animation: card-in 560ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.eyebrow, .small-label { color: var(--sage-dark); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { margin-top: 12px; font-size: clamp(36px, 7vw, 52px); line-height: .98; letter-spacing: -.065em; color: #2f4735; }
h2 { margin-top: 12px; font-size: 30px; letter-spacing: -.04em; }
.lead { margin: 16px auto 0; max-width: 300px; line-height: 1.7; color: var(--muted); font-size: 14px; }
.cat-stamp { display: grid; place-items: center; width: 64px; height: 64px; margin: 24px auto 22px; border-radius: 22px 22px 22px 6px; background: #eff5dd; color: var(--sage-dark); font-size: 30px; transform: rotate(-8deg); box-shadow: inset 0 -5px 0 rgba(103, 142, 106, .14); }
.start-controls, .pause-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.button { border: 0; border-radius: 15px; min-height: 48px; padding: 0 23px; cursor: pointer; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-button:focus-visible, .icon-button:focus-visible, .round-button:focus-visible, .hint-button:focus-visible, .help-toggle:focus-visible, .touch-button:focus-visible { outline: 3px solid rgba(61, 118, 83, .45); outline-offset: 3px; }
.primary-button { color: white; background: var(--sage-dark); box-shadow: 0 8px 18px rgba(63, 104, 75, .2); }
.secondary-button { color: var(--sage-dark); background: #e9f0df; }
.text-button { border: 0; background: transparent; color: var(--sage-dark); padding: 12px; cursor: pointer; font-size: 13px; font-weight: 800; }
.start-note { margin-top: 24px; font-size: 11px; color: #899184; }
.how-to { display: grid; gap: 7px; margin: 18px auto 0; padding: 14px 16px; border-radius: 15px; background: #f0f4e7; color: #627062; text-align: left; font-size: 12px; line-height: 1.4; }
.how-to b { color: var(--sage-dark); }
.hidden { display: none !important; }

.task-book { position: absolute; z-index: 5; top: 22px; left: 22px; width: min(305px, calc(100vw - 44px)); padding: 16px 17px 14px; border: 1px solid rgba(104, 123, 92, .22); border-radius: 20px; background: rgba(255, 252, 242, .91); box-shadow: 0 12px 32px rgba(71, 87, 57, .13); backdrop-filter: blur(13px); animation: slide-in-left .45s ease both; }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
.task-book-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px dashed rgba(90, 108, 75, .22); }
.task-book-head > div { display: flex; align-items: baseline; gap: 10px; }
.task-book-head strong { color: var(--terracotta); font-size: 12px; }
.icon-button, .round-button { display: grid; place-items: center; border: 0; cursor: pointer; color: var(--sage-dark); background: #edf2e5; }
.icon-button { width: 25px; height: 25px; border-radius: 8px; font-size: 16px; line-height: 1; }
.task-list { display: grid; gap: 8px; padding-top: 12px; }
.task-item { position: relative; display: grid; grid-template-columns: 21px 1fr; gap: 9px; align-items: start; padding: 3px 2px; color: #586256; font-size: 13px; line-height: 1.35; transition: color .25s ease, opacity .25s ease; }
.task-item.complete { color: #9aa297; }
.task-item.complete .task-copy { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.task-check { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #b8c5ad; border-radius: 7px 7px 7px 2px; color: transparent; font-size: 12px; font-weight: 900; }
.task-item.complete .task-check { border-color: #7da184; background: #d9ead3; color: #477052; animation: check-pop .38s ease both; }
@keyframes check-pop { 0% { transform: scale(.7) rotate(-10deg); } 70% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1); } }
.task-item.locked { opacity: .4; }
.task-item.locked .task-copy::after { content: "  ·  完成前面的计划后解锁"; color: #a6afa2; font-size: 10px; }
.hint-button { width: 100%; margin-top: 12px; border: 1px solid rgba(212, 145, 77, .34); border-radius: 11px; padding: 8px 10px; cursor: pointer; color: #9b6235; background: #fff4db; font-size: 12px; font-weight: 800; }
.collapsed-tasks { position: absolute; z-index: 5; top: 22px; left: 22px; padding: 8px; border-radius: 13px; background: rgba(255, 252, 242, .92); box-shadow: 0 9px 24px rgba(71, 87, 57, .12); }
.collapsed-tasks .icon-button { width: 31px; height: 31px; }

.top-bar { position: absolute; z-index: 5; top: 22px; right: 22px; display: flex; align-items: center; gap: 9px; }
.location-chip { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 13px; background: rgba(255, 252, 242, .85); color: #687468; font-size: 12px; font-weight: 800; box-shadow: 0 9px 24px rgba(71, 87, 57, .1); backdrop-filter: blur(12px); }
.sun-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(243, 200, 91, .2); }
.top-actions { display: flex; gap: 6px; }
.round-button { width: 37px; height: 37px; border-radius: 12px; font-size: 15px; box-shadow: 0 9px 24px rgba(71, 87, 57, .1); }

.interaction-prompt { position: absolute; z-index: 5; left: 50%; bottom: 77px; transform: translateX(-50%); padding: 10px 15px; border-radius: 13px; color: #47584d; background: rgba(255, 252, 242, .93); box-shadow: 0 8px 24px rgba(71, 87, 57, .14); font-size: 13px; font-weight: 800; pointer-events: none; animation: prompt-in .2s ease both; }
@keyframes prompt-in { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast, .hint-toast { position: absolute; z-index: 7; left: 50%; top: 20%; transform: translateX(-50%); max-width: min(390px, calc(100vw - 40px)); padding: 11px 16px; border-radius: 15px; color: #4e5d4d; background: rgba(255, 252, 242, .96); box-shadow: var(--shadow); font-size: 13px; font-weight: 800; text-align: center; pointer-events: none; animation: toast-in .3s ease both; }
.hint-toast { top: auto; bottom: 134px; color: #8a633a; background: #fff4db; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.thought-bubble { position: absolute; z-index: 6; padding: 7px 10px; border-radius: 12px 12px 12px 3px; color: #536152; background: #fffdf5; box-shadow: 0 6px 15px rgba(71, 87, 57, .15); font-size: 17px; font-weight: 900; pointer-events: none; transform: translate(-50%, -100%); }

.help-bar { position: absolute; z-index: 5; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 13px; padding: 8px 12px; border-radius: 12px; color: #718071; background: rgba(255, 252, 242, .74); font-size: 11px; box-shadow: 0 7px 20px rgba(71, 87, 57, .08); backdrop-filter: blur(8px); white-space: nowrap; }
kbd { display: inline-block; min-width: 20px; padding: 2px 5px; border: 1px solid #c9d3c4; border-bottom-width: 2px; border-radius: 5px; color: #536b59; background: #f9fbf2; font-size: 10px; font-weight: 900; text-align: center; }
.help-toggle { border: 0; border-left: 1px solid rgba(87, 108, 86, .2); padding-left: 12px; cursor: pointer; color: var(--sage-dark); background: transparent; font-size: 11px; font-weight: 800; }

.pause-card, .win-card { width: min(420px, calc(100vw - 36px)); }
.pause-card p, .win-card p { margin: 12px auto 22px; max-width: 300px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.win-card { border-color: rgba(240, 195, 84, .46); background: rgba(255, 253, 244, .96); }
.win-sparkles { color: #dca94f; letter-spacing: .3em; font-size: 20px; }
.win-stats { display: flex; justify-content: center; gap: 13px; margin: 17px 0 23px; color: #778077; font-size: 12px; }
.win-stats span:first-child { color: var(--terracotta); font-weight: 900; }

.touch-controls { display: none; position: absolute; z-index: 6; inset: auto 0 19px; align-items: end; justify-content: space-between; padding: 0 18px; pointer-events: none; }
.joystick { position: relative; width: 94px; height: 94px; border: 1px solid rgba(78, 107, 84, .18); border-radius: 50%; background: rgba(255, 252, 242, .52); pointer-events: auto; touch-action: none; }
.joystick-knob { position: absolute; left: 50%; top: 50%; width: 37px; height: 37px; margin: -18.5px; border-radius: 50%; background: rgba(78, 107, 84, .68); box-shadow: 0 5px 12px rgba(63, 104, 75, .2); }
.touch-actions { display: flex; align-items: end; gap: 9px; pointer-events: auto; }
.touch-button { width: 52px; height: 52px; border: 1px solid rgba(78, 107, 84, .2); border-radius: 17px; color: #536c58; background: rgba(255, 252, 242, .78); box-shadow: 0 7px 16px rgba(71, 87, 57, .12); font-size: 13px; font-weight: 900; touch-action: manipulation; }
.touch-button.meow-button { width: 61px; height: 61px; color: white; background: var(--terracotta); }
.touch-button.interact-button { color: white; background: var(--sage-dark); }
.fallback { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; padding: 24px; background: #f4eddb; text-align: center; }
.fallback h2 { margin: 0; }
.fallback p { margin-top: 10px; color: var(--muted); }

@media (max-width: 700px) {
  .screen-card { padding: 27px 23px 23px; border-radius: 23px; }
  .task-book { top: 12px; left: 12px; width: min(270px, calc(100vw - 24px)); }
  .top-bar { top: 12px; right: 12px; }
  .location-chip { display: none; }
  .help-bar { bottom: 9px; gap: 7px; padding: 7px 9px; font-size: 10px; }
  .help-bar span:nth-child(3), .help-bar span:nth-child(4) { display: none; }
  .interaction-prompt { bottom: 103px; max-width: calc(100vw - 40px); text-align: center; }
  .toast { top: 17%; }
}
@media (pointer: coarse) {
  .help-bar { display: none !important; }
  .touch-controls { display: flex; }
  .interaction-prompt { bottom: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}