:root {
  --accent: #43a958;
  --accent-deep: #216c36;
  --ink: #172b36;
  --muted: #42576a;
  --panel-top: rgba(255,255,255,.88);
  --panel-bottom: rgba(255,255,255,.70);
  --shadow: 0 18px 50px rgba(21,37,45,.22);
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { background: #142026; color: var(--ink); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app { min-height: 100svh; }
.screen {
  min-height: 100svh; position: relative; overflow: hidden; isolation: isolate;
  background: #263238 center / cover no-repeat;
  display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.screen::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(8,18,24,.12) 68%, rgba(7,15,22,.48)); }
.home { background-image: url("assets/home_garden.png"); }
.world-primary { background-image: url("assets/worlds/primary.png"); }
.world-middle { background-image: url("assets/worlds/middle.png"); }
.world-high { background-image: url("assets/worlds/high.png"); }
.world-young { background-image: url("assets/worlds/young.png"); }
.world-adult { background-image: url("assets/worlds/adult.png"); }
.wrap { width: min(1180px, 100%); margin: auto; display:flex; flex-direction:column; gap:16px; }
.glass {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid rgba(255,255,255,.78); border-radius: 26px; padding: clamp(18px, 3vw, 34px);
  box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero { max-width: 100%; }
h1,h2,p { margin: 0; }
h1 { font-size: clamp(30px, 5.4vw, 58px); line-height:1.15; letter-spacing:-.02em; color:#0d4a40; }
h2 { font-size: clamp(25px, 4vw, 42px); line-height:1.2; color:var(--ink); }
.lead { margin-top:10px; font-size:clamp(16px, 2.3vw, 24px); font-weight:650; color:#2f4645; }
.sub { margin-top:8px; color:var(--muted); font-size:clamp(15px, 1.7vw, 19px); font-weight:600; line-height:1.65; }
.world-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.world-card {
  position:relative; min-height:220px; overflow:hidden; border-radius:24px; border:2px solid rgba(255,255,255,.72); padding:0;
  color:white; text-align:left; cursor:pointer; background:#334 center/cover no-repeat; box-shadow:0 10px 28px rgba(18,31,39,.22); transition:.2s ease;
}
.world-card:nth-child(-n+3) { grid-column: span 2; }
.world-card:nth-child(n+4) { grid-column: span 3; min-height:200px; }
.world-card::after { content:""; position:absolute; inset:34% 0 0; background:linear-gradient(transparent,rgba(4,12,18,.88)); }
.world-card:hover { transform:translateY(-3px); }
.world-card.selected { border:5px solid #fff36a; box-shadow:0 0 0 3px rgba(42,113,51,.65), 0 12px 32px rgba(18,31,39,.28); }
.card-copy { position:absolute; z-index:1; left:20px; right:18px; bottom:17px; text-shadow:0 2px 5px #000; }
.card-copy strong { display:block; font-size:clamp(21px,2.1vw,31px); }
.card-copy span { display:block; margin-top:4px; font-size:15px; font-weight:650; }
.toolbar { padding:14px 18px; display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.themes { display:flex; gap:8px; flex-wrap:wrap; }
.chip,.choice { border:1px solid rgba(34,69,84,.22); background:rgba(255,255,255,.78); color:var(--ink); border-radius:999px; padding:10px 16px; font-weight:750; cursor:pointer; }
.chip.active,.choice.selected { background:var(--accent); color:white; border-color:transparent; }
.btn { border:0; border-radius:16px; padding:15px 22px; cursor:pointer; font-weight:800; color:#173044; background:rgba(255,255,255,.9); box-shadow:0 6px 16px rgba(20,35,40,.13); }
.btn.primary { width:100%; color:white; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); font-size:18px; }
.btn.secondary { background:rgba(255,255,255,.82); }
.btn:focus-visible,.choice:focus-visible,.chip:focus-visible,.world-card:focus-visible { outline:4px solid #ffe16d; outline-offset:3px; }
.panel { width:min(760px,100%); margin:auto; }
.choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.choice { border-radius:16px; text-align:left; padding:15px 18px; }
.choice.selected::before { content:"● "; }
.choice:not(.selected)::before { content:"○ "; }
.affirm { width:100%; border:1px solid rgba(25,55,75,.25); color:var(--ink); background:rgba(255,255,255,.88); border-radius:14px; padding:14px 16px; margin:4px 0 18px; }
.wheel-block { display:grid; place-items:center; margin:12px 0 18px; }
.wheel { width:min(430px,100%); display:grid; grid-template-columns:58px 1fr 58px; align-items:center; gap:8px; }
.wheel-btn { width:52px; height:52px; border:0; border-radius:50%; font-size:25px; cursor:pointer; color:white; background:var(--accent); }
.wheel-window { position:relative; height:150px; overflow:hidden; border-radius:24px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.85); touch-action:none; }
.wheel-window::before,.wheel-window::after { content:""; position:absolute; z-index:2; left:0; right:0; height:46px; pointer-events:none; }
.wheel-window::before { top:0; background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,0)); }
.wheel-window::after { bottom:0; background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.95)); }
.wheel-value { height:100%; display:grid; place-items:center; color:var(--accent-deep); font-size:54px; font-weight:900; }
.wheel-value small { font-size:17px; margin-left:7px; }
.time-slider { width:min(430px,100%); margin:2px 0 14px; accent-color:var(--accent); cursor:pointer; }
.time-slider::-webkit-slider-runnable-track { height:9px; border-radius:999px; background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.62)); box-shadow:inset 0 0 0 1px rgba(31,67,83,.18); }
.time-slider::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; margin-top:-9px; border-radius:50%; background:var(--accent); border:4px solid white; box-shadow:0 3px 10px rgba(13,35,45,.3); }
.time-slider::-moz-range-track { height:9px; border-radius:999px; background:rgba(255,255,255,.82); }
.time-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--accent); border:4px solid white; box-shadow:0 3px 10px rgba(13,35,45,.3); }
.slider-labels { width:min(430px,100%); display:flex; justify-content:space-between; margin-top:-10px; color:var(--muted); font-size:12px; font-weight:700; }
.timer-screen .wrap { align-items:center; text-align:center; }
.timer-top { color:white; background:rgba(12,27,37,.72); border:1px solid rgba(255,255,255,.4); border-radius:18px; padding:10px 20px; font-weight:800; }
.planet { width:min(58vw,360px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; color:white; text-shadow:0 3px 10px rgba(0,0,0,.35); background:radial-gradient(circle at 35% 30%,#fff7a7,var(--accent) 38%,var(--accent-deep) 72%); box-shadow:0 0 40px rgba(255,243,151,.6),0 25px 70px rgba(4,17,25,.38); }
.time { font-size:clamp(45px,9vw,78px); font-weight:900; letter-spacing:.02em; }
.timer-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.quote { max-width:760px; color:white; background:rgba(10,24,37,.82); border:1px solid rgba(255,255,255,.5); padding:14px 22px; border-radius:18px; font-weight:700; }
.quest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.review-group { margin:16px 0; }
.review-group > p { margin-bottom:8px; font-weight:800; }
.summary { background:rgba(227,238,247,.86); border-radius:12px; padding:12px; text-align:center; font-weight:750; }
.history-list { display:grid; gap:10px; max-height:55svh; overflow:auto; margin:16px 0; }
.history-item { background:rgba(255,255,255,.75); border-radius:14px; padding:14px; line-height:1.6; }
.modal { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:18px; background:rgba(5,14,20,.65); }
.modal .glass { width:min(720px,100%); max-height:90svh; overflow:auto; }
.toast { position:fixed; z-index:20; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translate(-50%,30px); opacity:0; pointer-events:none; background:rgba(9,24,36,.92); color:white; padding:12px 18px; border-radius:14px; transition:.25s; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.fade-in { animation:fade .55s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(10px); } }
@media (max-width:760px) {
  .screen { padding:14px; }
  .world-grid { grid-template-columns:repeat(2,1fr); }
  .world-card,.world-card:nth-child(-n+3),.world-card:nth-child(n+4) { grid-column:span 1; min-height:172px; }
  .world-card:last-child { grid-column:1/-1; }
  .glass { border-radius:21px; }
  .choices,.quest-grid { grid-template-columns:1fr; }
  .home .wrap { margin-top:0; }
}
@media (min-width:761px) {
  .screen { padding:14px 20px; }
  .wrap { gap:10px; }
  .glass { padding:18px 24px; border-radius:22px; }
  h1 { font-size:clamp(30px,3.6vw,46px); }
  h2 { font-size:clamp(24px,3vw,34px); }
  .lead { margin-top:5px; font-size:clamp(16px,1.7vw,20px); }
  .sub { margin-top:4px; font-size:15px; line-height:1.45; }
  .world-grid { gap:10px; }
  .world-card { min-height:174px; border-radius:20px; }
  .world-card:nth-child(n+4) { min-height:152px; }
  .card-copy { left:16px; bottom:12px; }
  .card-copy strong { font-size:clamp(19px,1.75vw,25px); }
  .card-copy span { margin-top:2px; font-size:13px; }
  .toolbar { padding:10px 16px; }
  .themes { gap:6px; }
  .chip { padding:7px 13px; }
  .btn { padding:11px 18px; }
  .btn.primary { font-size:16px; }
  .toolbar .btn.primary { width:auto; min-width:245px; }
  .choices { gap:8px; margin:12px 0; }
  .choice { padding:11px 15px; }
  .affirm { padding:10px 14px; margin-bottom:12px; }
  .wheel-block { margin:8px 0 12px; }
  .wheel-window { height:120px; }
  .wheel-value { font-size:46px; }
  .planet { width:min(43vh,315px); }
  .time { font-size:clamp(42px,7vw,68px); }
  .review-group { margin:9px 0; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }