.expedition-hud {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 13px;
  margin: -7px 0 19px;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid #dfe9d9;
  border-radius: 13px;
  background: radial-gradient(ellipse at 7% 120%, #c5dfc5 0, transparent 34%), linear-gradient(105deg, #eaf4e7, #f8f6e9 55%, #fffdf5);
  box-shadow: 0 8px 20px #31543d0b;
}
.expedition-hud::after { position: absolute; right: 21%; bottom: -36px; width: 138px; height: 66px; border-radius: 50%; background: #c9dfc9; content: ""; opacity: .45; pointer-events: none; }
.guardian-avatar { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #d8e6ce; border-radius: 17px; background: linear-gradient(145deg, #fff, #e8f1e1); }
.guardian-avatar svg { position: relative; z-index: 1; width: 50px; height: 56px; animation: guardian-idle 2.8s ease-in-out infinite; }
.guardian-avatar-glow { position: absolute; bottom: 7px; width: 36px; height: 8px; border-radius: 50%; background: #547c4c22; filter: blur(3px); }
@keyframes guardian-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.expedition-copy { z-index: 1; display: grid; min-width: 0; gap: 4px; }
.expedition-kicker { display: flex; align-items: center; gap: 6px; color: #74866c; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.expedition-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #edaa58; box-shadow: 0 0 0 4px #f5e7cd; }
.expedition-copy > strong { overflow: hidden; color: #304b37; font: 600 16px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.expedition-copy > span:last-child { overflow: hidden; color: #7e8e7a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.expedition-xp { z-index: 1; display: grid; gap: 4px; padding-left: 14px; border-left: 1px solid #d9e4d4; }
.expedition-xp > span { color: #8b9985; font-size: 7px; font-weight: 800; letter-spacing: .8px; }
.expedition-xp > strong { color: #456647; font: 700 15px var(--font-display); }
.expedition-xp > strong b { font-size: 20px; }
.expedition-xp > div { height: 5px; overflow: hidden; border-radius: 5px; background: #dbe7d5; }
.expedition-xp > div i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #75a66a, #d7b359); transition: width .4s ease; }
.expedition-map-button { z-index: 1; display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #d7e4d1; border-radius: 8px; background: #ffffffc9; color: #547a55; font-size: 9px; font-weight: 800; cursor: pointer; transition: transform .2s, background .2s; }
.expedition-map-button:hover { transform: translateY(-2px); background: #fff; }
.expedition-map-button > span { color: #d49350; font-size: 16px; }
.expedition-map-button > b { font-size: 13px; }
.map-guardian-label { position: absolute; z-index: 700; bottom: 51px; left: 13px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #fff; border-radius: 7px; background: #fffffff2; box-shadow: 0 3px 12px #30432c1c; color: #668064; font-size: 7px; font-weight: 800; letter-spacing: .5px; pointer-events: none; }
.map-guardian-label > span { font-size: 12px; }
.map-guardian-label b { color: #bf8250; }
.map-mission-focus { position: absolute; z-index: 700; right: 13px; bottom: 110px; display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #fff; border-radius: 7px; background: #315844ed; box-shadow: 0 3px 12px #30432c22; color: #fff; font-size: 8px; font-weight: 700; cursor: pointer; }
.map-mission-focus:hover { background: #416e52; }
.map-mission-focus > span:first-child { color: #f0c16d; font-size: 12px; }
.map-mission-focus > b { color: #d9e6cd; font-size: 12px; }
.expedition-stop-wrap, .guardian-avatar-map-wrap { border: 0; background: transparent; }
.expedition-stop { display: grid; width: 26px; height: 26px; place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 4px; background: #d89a58; box-shadow: 0 2px 8px #2e513b55; color: #fff; font: 800 8px var(--font-display); transform: rotate(-45deg); transition: transform .25s, background .25s; }
.expedition-stop.active { background: #315e43; box-shadow: 0 0 0 5px #77a86550, 0 2px 8px #2e513b55; transform: rotate(-45deg) scale(1.22); }
.expedition-stop.completed { background: #78a975; }
.expedition-stop > span { transform: rotate(45deg); }
.guardian-avatar-map { position: relative; display: block; width: 40px; height: 49px; filter: drop-shadow(0 3px 3px #203c3666); animation: guardian-map-bob 1.8s ease-in-out infinite; }
.guardian-map-face { position: absolute; top: 8px; left: 12px; width: 19px; height: 20px; border: 1px solid #a66f52; border-radius: 45% 45% 48% 48%; background: #e0a276; }
.guardian-map-face i { position: absolute; top: 8px; width: 2px; height: 3px; border-radius: 50%; background: #314537; }
.guardian-map-face i:first-child { left: 5px; }
.guardian-map-face i:nth-child(2) { right: 5px; }
.guardian-map-face b { position: absolute; bottom: 3px; left: 6px; width: 5px; height: 2px; border-bottom: 1px solid #9e5b49; border-radius: 50%; }
.guardian-map-hat { position: absolute; z-index: 1; top: 4px; left: 9px; width: 25px; height: 8px; border: 1px solid #31563d; border-radius: 9px 9px 3px 3px; background: #5c9561; }
.guardian-map-hat::after { position: absolute; right: -4px; bottom: -2px; width: 28px; height: 3px; border-radius: 5px; background: #47784e; content: ""; }
.guardian-map-body { position: absolute; top: 27px; left: 8px; width: 27px; height: 19px; border: 1px solid #31543c; border-radius: 8px 8px 5px 5px; background: #52825a; }
.guardian-map-body i { position: absolute; top: 5px; left: 11px; width: 5px; height: 6px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #edd27c; }
.guardian-map-pack { position: absolute; top: 29px; right: 2px; width: 7px; height: 12px; border: 1px solid #976b43; border-radius: 3px; background: #d3a05d; }
@keyframes guardian-map-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.world-art .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 32px; font-size: 18px; }
@media (max-width: 840px) {
  .expedition-hud { grid-template-columns: 56px minmax(0, 1fr) 125px; }
  .guardian-avatar { width: 52px; height: 52px; }
  .guardian-avatar svg { width: 45px; height: 51px; }
  .expedition-map-button { grid-column: 2 / 4; justify-content: center; min-height: 34px; }
}
@media (max-width: 640px) {
  .page-wrap { padding-top: 18px; }
  .welcome-row { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 15px; }
  .welcome-row .button { width: 100%; min-height: 42px; }
  .expedition-hud { grid-template-columns: 48px minmax(0, 1fr) 88px; gap: 9px; margin: 0 0 14px; padding: 10px; border-radius: 11px; }
  .guardian-avatar { width: 46px; height: 48px; border-radius: 13px; }
  .guardian-avatar svg { width: 41px; height: 47px; }
  .expedition-copy > strong { font-size: 12px; }
  .expedition-copy > span:last-child { font-size: 8px; }
  .expedition-kicker { font-size: 6px; letter-spacing: .7px; }
  .expedition-xp { padding-left: 8px; }
  .expedition-xp > span { font-size: 5px; letter-spacing: .4px; }
  .expedition-xp > strong { font-size: 12px; }
  .expedition-xp > strong b { font-size: 16px; }
  .expedition-map-button { grid-column: 1 / 4; min-height: 38px; }
  .world-card-top { padding: 13px 12px 9px; }
  .world-card-top h2 { font-size: 18px; }
  .world-location { font-size: 8px; }
  .world-art { height: clamp(255px, 72vw, 330px); margin-right: 7px; margin-left: 7px; border-radius: 10px; touch-action: pan-x pan-y; }
  .map-mission-focus { right: 8px; bottom: 110px; min-height: 40px; padding: 0 10px; font-size: 9px; }
  .map-guardian-label { bottom: 49px; left: 8px; min-height: 31px; }
  .world-art .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 38px; }
  .world-art .leaflet-control-zoom { margin-right: 8px !important; margin-bottom: 8px !important; }
  .world-art .map-legend { max-width: calc(100% - 95px); flex-wrap: wrap; line-height: 1.5; }
  .field-companion { grid-template-columns: 39px minmax(0, 1fr); gap: 7px; padding: 9px; }
  .companion-talk { grid-column: 1 / 3; justify-content: center; min-height: 36px; font-size: 9px; }
  .companion-conversation p { font-size: 9px; line-height: 1.5; }
  .companion-speaker strong { font-size: 10px; }
  .world-card-footer { min-height: 66px; gap: 4px; padding: 8px 5px; }
  .world-stat { gap: 4px; }
  .world-stat small { font-size: 6px; letter-spacing: .2px; }
  .world-stat strong { font-size: 14px; }
  .world-stat .trend { display: none; }
  .stat-icon { width: 23px; height: 23px; font-size: 12px; }
  .stat-divider { height: 24px; }
}
@media (max-width: 380px) {
  .expedition-hud { grid-template-columns: 42px minmax(0, 1fr) 72px; gap: 7px; padding: 8px; }
  .guardian-avatar { width: 40px; height: 44px; }
  .guardian-avatar svg { width: 36px; height: 42px; }
  .expedition-copy > strong { font-size: 11px; }
  .expedition-xp { padding-left: 6px; }
  .expedition-kicker { font-size: 5px; }
  .world-art .map-overlay-title small { font-size: 5px; }
  .world-art .map-live-chip { top: 47px; }
  .world-art .map-layer-toggle { top: 81px; }
  .world-stat { flex-direction: column; align-items: flex-start; gap: 3px; }
  .world-card-footer { align-items: flex-start; }
  .world-stat > span:nth-child(2) { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .guardian-avatar svg, .guardian-avatar-map { animation: none; }
  .expedition-hud *, .expedition-map-button { scroll-behavior: auto; transition-duration: .01ms !important; }
}

.impact-world { --impact-water: #65b9ca; --impact-land: #8caf71; position: relative; min-height: 310px; margin: 14px 0 12px; overflow: hidden; border: 1px solid #dce8db; border-radius: 13px; background: linear-gradient(180deg,#9bd2d6 0%,#d4ece0 56%,#e9edcf 100%); isolation: isolate; }
.impact-sky { position: absolute; inset: 0 0 45% 0; overflow: hidden; background: linear-gradient(180deg,#8fc9d8,#d5eadd); }
.impact-sun { position: absolute; top: 24px; right: 17%; width: 39px; height: 39px; border-radius: 50%; background: #ffdd89; box-shadow: 0 0 0 9px #ffdf8a36,0 0 38px #ffe49b88; animation: impact-sun-glow 3s ease-in-out infinite; }
.impact-cloud { position: absolute; top: 62px; left: 15%; width: 65px; height: 19px; border-radius: 50px; background: #ffffffa8; filter: drop-shadow(0 5px 5px #4d829122); animation: impact-cloud-drift 11s linear infinite alternate; }
.impact-cloud::before,.impact-cloud::after { position: absolute; bottom: 4px; border-radius: 50%; background: inherit; content: ""; }
.impact-cloud::before { left: 12px; width: 25px; height: 25px; }.impact-cloud::after { right: 12px; width: 31px; height: 31px; }
.cloud-two { top: 97px; left: auto; right: 32%; width: 46px; transform: scale(.7); opacity: .65; animation-duration: 15s; animation-direction: alternate-reverse; }
.impact-rain { position: absolute; z-index: 2; top: 83px; left: 22%; width: 3px; height: 12px; border-radius: 4px; background: #69afca; opacity: 0; transform: rotate(18deg); }
.rain-two { left: 25%; top: 92px; animation-delay: .15s; }.rain-three { left: 28%; top: 82px; animation-delay: .3s; }
.impact-sky-caption { position: absolute; top: 14px; left: 15px; color: #fff; font-size: 7px; font-weight: 800; letter-spacing: 1.2px; text-shadow: 0 1px 4px #416d6280; }
.impact-sector-allocation { position: absolute; z-index: 5; top: 32px; left: 11px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; width: min(230px,calc(100% - 22px)); }
.impact-sector-allocation > div { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 1px 3px; padding: 4px; border: 1px solid #ffffff9c; border-radius: 5px; background: #ffffffc9; box-shadow: 0 2px 5px #4a6e5830; }
.impact-sector-allocation > div > span { grid-row: span 2; font-size: 10px; }.impact-sector-allocation small { color: #70806f; font-size: 5px; font-weight: 800; }.impact-sector-allocation strong { color: #4e6e52; font: 700 9px var(--font-display); }.impact-sector-allocation > div > i { grid-column: 1 / 3; height: 3px; overflow: hidden; border-radius: 3px; background: #dfe9db; }.impact-sector-allocation > div > i b { display: block; height: 100%; border-radius: inherit; background: #76a77b; }
.impact-horizon { position: absolute; z-index: 1; top: 36%; left: -6%; width: 112%; height: 40%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg,#b4d8ae,#8eb77d); transform: rotate(-4deg); }
.impact-horizon::before,.impact-horizon::after { position: absolute; bottom: 11%; width: 55%; height: 75%; border-radius: 50% 50% 0 0; background: #95bd89; content: ""; }.impact-horizon::before { left: -4%; }.impact-horizon::after { right: -6%; background: #a7c995; }
.impact-terrain { position: absolute; z-index: 2; top: 30%; left: 50%; width: 300px; height: 208px; perspective: 750px; transform: translateX(-50%); }
.impact-terrain-top { position: absolute; inset: 10px 12px 34px; overflow: hidden; border: 2px solid #799e68; border-radius: 15px; background-color: #9fc57d; background-image: linear-gradient(30deg,#ffffff18 12%,transparent 12.5%,transparent 87%,#ffffff18 87.5%),linear-gradient(150deg,#ffffff18 12%,transparent 12.5%,transparent 87%,#ffffff18 87.5%),linear-gradient(30deg,#ffffff12 12%,transparent 12.5%,transparent 87%,#ffffff12 87.5%),linear-gradient(150deg,#ffffff12 12%,transparent 12.5%,transparent 87%,#ffffff12 87.5%); background-position: 0 0,0 0,18px 31px,18px 31px; background-size: 36px 62px; box-shadow: inset 0 0 25px #345c3330,0 15px 0 #789c65,0 22px 0 #5e8057; transform: rotateX(55deg) rotateZ(-35deg) scale(.94); transform-style: preserve-3d; animation: impact-terrain-arrive .75s cubic-bezier(.2,.75,.3,1) both; }
.impact-terrain-side { position: absolute; right: 32px; bottom: 5px; left: 37px; height: 37px; border: 1px solid #648558; border-radius: 0 0 12px 12px; background: repeating-linear-gradient(0deg,#8e7450 0 7px,#a48a5e 8px 13px); box-shadow: 0 10px 16px #39563b33; clip-path: polygon(0 0,100% 0,91% 100%,9% 100%); }
.impact-river { position: absolute; z-index: 2; top: -16%; left: 38%; width: 31%; height: 136%; border: 5px solid #a2d0bb; border-radius: 50%; background: repeating-linear-gradient(0deg,#66b9ca 0 11px,#83ccd0 12px 15px); box-shadow: 0 0 0 2px #ffffff77,inset 0 0 9px #36869a77; transform: rotate(34deg) translateZ(5px); transition: height .6s; }
.impact-lake { position: absolute; z-index: 1; right: 3%; bottom: 3%; width: 41%; height: 35%; border: 4px solid #b9d9ac; border-radius: 50%; background: linear-gradient(145deg,#72c4cd,#3a9dad); box-shadow: inset 0 4px 8px #e3fbeb66,0 4px 0 #5f987a; transform: translateZ(8px); }
.impact-road { position: absolute; z-index: 3; top: 52%; left: -15%; width: 130%; height: 14px; border: 2px solid #d5c7a3; border-radius: 20px; background: repeating-linear-gradient(90deg,#dbcfad 0 17px,#c5b792 18px 22px); box-shadow: 0 3px 0 #94866b; transform: rotate(-20deg) translateZ(12px); }
.impact-hill { position: absolute; z-index: 4; bottom: 4%; width: 36%; height: 48%; border: 2px solid #789961; border-radius: 50% 50% 8px 8px; background: linear-gradient(145deg,#91b975,#679258); box-shadow: inset -10px -5px #557f4d55,0 5px 0 #61844f; transform: translateZ(15px); }
.hill-back { top: -5%; left: 6%; width: 42%; height: 42%; opacity: .86; }.hill-front { right: 6%; bottom: 2%; }
.impact-feature { position: absolute; z-index: 6; display: block; left: 42%; bottom: 30%; width: 45px; height: 26px; border: 2px solid #64804f; border-radius: 7px 7px 15px 15px; background: linear-gradient(140deg,#94ca71,#5d9c71); box-shadow: 0 8px 0 #668651,0 13px 0 #506f4d; transform: translateZ(25px) rotate(-12deg); opacity: 0; }
.impact-feature::before { position: absolute; top: -9px; left: 5px; width: 29px; height: 10px; border: 2px solid #64804f; border-radius: 50%; background: #78bfce; content: ""; }
.feature-two { left: 17%; bottom: 41%; transform: translateZ(28px) rotate(8deg) scale(.78); }
.impact-tree { position: absolute; z-index: 8; bottom: 37%; left: 20%; width: 10px; height: 25px; border-radius: 3px; background: linear-gradient(90deg,#785b3d,#ac8053); transform: translateZ(34px); }
.impact-tree::before { position: absolute; bottom: 12px; left: -10px; width: 30px; height: 30px; border-radius: 50% 50% 38% 50%; background: linear-gradient(145deg,#91c47d,#4c895e); box-shadow: inset -4px -4px #3f795955,0 4px 0 #537e4d; content: ""; }
.tree-b { left: 32%; bottom: 51%; transform: translateZ(43px) scale(.83); }.tree-c { right: 12%; bottom: 34%; left: auto; transform: translateZ(38px) scale(1.12); }
.impact-extra-tree { position: absolute; z-index: 7; bottom: 48%; left: 53%; width: 7px; height: 20px; border-radius: 3px; background: #896542; opacity: 0; transform: translateZ(35px) scale(.1); }
.impact-extra-tree::before { position: absolute; top: -12px; left: -8px; width: 23px; height: 23px; border-radius: 50%; background: linear-gradient(140deg,#a6d780,#4a8858); box-shadow: inset -4px -4px #386c4a66,0 3px #557e4d; content: ""; }
.extra-tree-two { bottom: 28%; left: 27%; transform: translateZ(38px) scale(.1); }.extra-tree-three { right: 30%; bottom: 62%; left: auto; transform: translateZ(43px) scale(.1); }
.impact-house { position: absolute; z-index: 9; bottom: 19%; left: 47%; width: 31px; height: 24px; border: 2px solid #8b6b4d; border-radius: 3px; background: linear-gradient(90deg,#efcc8b 50%,#d9ae70 50%); box-shadow: 0 7px 0 #a98658; transform: translateZ(38px); transition: transform .4s,filter .4s; }
.impact-house::before { position: absolute; top: -13px; left: -4px; width: 35px; height: 17px; border: 2px solid #885e4a; border-radius: 4px 4px 0 0; background: linear-gradient(90deg,#c97c5c 50%,#ab674f 50%); clip-path: polygon(50% 0,100% 65%,100% 100%,0 100%,0 65%); content: ""; }
.impact-house::after { position: absolute; bottom: 0; left: 11px; width: 7px; height: 12px; background: #805c48; content: ""; }
.house-b { bottom: 33%; left: 70%; transform: translateZ(43px) scale(.77); }
.impact-villager { position: absolute; z-index: 10; bottom: 26%; left: 66%; width: 7px; height: 14px; border-radius: 4px 4px 2px 2px; background: #547a8a; opacity: 0; transform: translateZ(48px) translateY(8px); }
.impact-villager::before { position: absolute; top: -7px; left: 1px; width: 6px; height: 7px; border-radius: 50%; background: #dca174; content: ""; }
.villager-b { bottom: 34%; left: 75%; background: #b36f58; transform: translateZ(50px) translateY(8px) scale(.82); }
.impact-sample-vial { position: absolute; z-index: 10; top: 26%; left: 53%; display: grid; width: 12px; height: 22px; place-items: center; border: 2px solid #eef8f4; border-top: 4px solid #f8f6e7; border-radius: 3px 3px 5px 5px; background: linear-gradient(0deg,#4babc3 55%,#ffffff88 55%); box-shadow: 0 2px 5px #34523d66; color: #eaffff; font-size: 5px; opacity: 0; transform: translateZ(52px) rotate(8deg) scale(.1); }
.impact-field-board { position: absolute; z-index: 10; top: 30%; left: 40%; padding: 3px 4px; border: 1px solid #785e40; border-radius: 2px; background: #f2d58c; box-shadow: 0 2px #785e40; color: #75603c; font: 700 5px var(--font-body); opacity: 0; transform: translateZ(50px) rotate(-12deg) scale(.1); }
.impact-crop { position: absolute; z-index: 6; bottom: 19%; left: 10%; width: 29px; height: 19px; border: 2px solid #79965c; border-radius: 40%; background: repeating-linear-gradient(90deg,#a7c56f 0 4px,#6a9a5f 5px 7px); transform: translateZ(23px) rotate(22deg); }
.crop-b { right: 22%; bottom: 56%; left: auto; transform: translateZ(26px) rotate(-17deg) scale(.85); }
.impact-water-drop { position: absolute; z-index: 11; top: 10%; left: 47%; color: #ddfaff; font-size: 15px; text-shadow: 0 0 10px #fff; opacity: 0; animation: impact-sparkle 1.2s ease-out .5s both; }
.drop-b { top: 59%; left: 65%; animation-delay: .85s; }
.impact-character { position: absolute; z-index: 12; bottom: 29%; left: 38%; width: 11px; height: 23px; border: 1px solid #355d42; border-radius: 6px 6px 3px 3px; background: #54885d; box-shadow: 0 2px 0 #d39d5f; transform: translateZ(48px); animation: impact-character-arrive .65s ease-out .25s both; }
.impact-character::before { position: absolute; top: -10px; left: 1px; width: 9px; height: 10px; border-radius: 50%; background: #e0a276; content: ""; }
.impact-character > i { position: absolute; top: -12px; left: -1px; width: 13px; height: 5px; border-radius: 7px 7px 2px 2px; background: #4f8a58; }.impact-character > b { position: absolute; top: 5px; left: 4px; width: 3px; height: 4px; background: #edd27c; }
.impact-scene-caption { position: absolute; z-index: 15; right: 11px; bottom: 10px; left: 11px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #ffffffa8; border-radius: 9px; background: #ffffffdf; box-shadow: 0 4px 15px #34523d18; backdrop-filter: blur(8px); }
.impact-scene-caption > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: #edf4e8; font-size: 16px; }
.impact-scene-caption > div { display: grid; gap: 3px; }.impact-scene-caption strong { color: #3c5742; font-size: 9px; }.impact-scene-caption small { color: #728072; font-size: 7px; line-height: 1.4; }
.impact-scene-live { display: flex; align-items: center; gap: 5px; color: #618264; font-size: 6px; font-weight: 800; letter-spacing: .45px; white-space: nowrap; }.impact-scene-live i { width: 6px; height: 6px; border-radius: 50%; background: #79ad6e; box-shadow: 0 0 0 3px #dfedda; }
.impact-results { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 10px 0; }
.impact-metric { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 2px 5px; padding: 8px 7px; border: 1px solid #e6ece2; border-radius: 8px; background: linear-gradient(145deg,#fff,#f8faf6); }
.impact-metric > span { grid-row: span 2; font-size: 14px; }.impact-metric > small { color: #829082; font-size: 7px; }.impact-metric > strong { display: flex; align-items: baseline; gap: 5px; color: #4f6d52; font: 700 15px var(--font-display); }.impact-metric > strong i { font-style: normal; }.impact-metric > strong b { font: 700 8px var(--font-body); }.impact-metric > em { grid-column: 1 / 3; padding-top: 3px; color: #91a08f; font-size: 6px; font-style: normal; }
.impact-good > strong b { color: #639365; }.impact-caution > strong b { color: #c27b5e; }
.impact-choice-note { display: grid; gap: 4px; margin: 10px 0 11px; padding: 10px 12px; border-left: 3px solid #d6a45b; border-radius: 0 8px 8px 0; background: #faf8f0; }.impact-choice-note > span { color: #9a835b; font-size: 6px; font-weight: 800; letter-spacing: 1px; }.impact-choice-note > strong { color: #4e634f; font-size: 9px; }.impact-choice-note > p { margin: 0; color: #778477; font-size: 8px; line-height: 1.5; }.impact-continue { min-height: 40px; }
.impact-world-pond .feature-one,.impact-world-retention .feature-one,.impact-world-spillway .feature-one { opacity: 1; }
.impact-world-forest .tree-a,.impact-world-forest .tree-b,.impact-world-forest .tree-c,.impact-world-green .tree-a,.impact-world-green .tree-b,.impact-world-green .tree-c,.impact-world-future .tree-a,.impact-world-future .tree-b,.impact-world-agro .tree-a,.impact-world-agro .tree-b,.impact-world-community .tree-a,.impact-world-community .tree-c,.impact-world-wetland .tree-c { animation: impact-tree-grow .7s cubic-bezier(.15,.8,.3,1) both; transform-origin: bottom; }
.impact-world-forest .impact-extra-tree,.impact-world-green .impact-extra-tree,.impact-world-agro .extra-tree-one,.impact-world-agro .extra-tree-two,.impact-world-future .extra-tree-one,.impact-world-community .extra-tree-one,.impact-world-wetland .extra-tree-one,.impact-world-wetland .extra-tree-three { opacity: 1; animation: impact-extra-grow .7s cubic-bezier(.15,.8,.3,1) both; }
.impact-world-sample .impact-sample-vial,.impact-world-community .impact-villager,.impact-world-evacuation .impact-villager,.impact-world-flood-damage .impact-villager { opacity: 1; animation: impact-character-arrive .65s ease-out .25s both; }
.impact-world-land .impact-field-board { opacity: 1; animation: impact-extra-grow .5s ease-out both; }
.impact-world-terrace .hill-back::after,.impact-world-terrace .hill-front::after { position: absolute; inset: 25% 0 auto; height: 5px; border-radius: 50%; background: #dbbd81; box-shadow: 0 10px #dbbd81,0 20px #dbbd81; content: ""; }
.impact-world-drain .feature-two,.impact-world-dam .feature-one,.impact-world-microhydro .feature-one,.impact-world-wetland .feature-one,.impact-world-wetland .feature-two,.impact-world-agro .feature-one { opacity: 1; }
.impact-world-dam .impact-lake { width: 56%; height: 45%; background: linear-gradient(145deg,#72c4cd,#308ba0); }.impact-world-dam .impact-feature.feature-one { top: 42%; left: 38%; width: 70px; height: 14px; border: 2px solid #7c817c; border-radius: 3px; background: repeating-linear-gradient(90deg,#b8c0b3 0 9px,#7b8979 10px 13px); box-shadow: 0 8px #777d70,0 12px #505c50; transform: translateZ(38px) rotate(-20deg); }.impact-world-dam .impact-feature.feature-one::before { top: -5px; left: 26px; width: 12px; height: 8px; border-color: #59685e; background: #6fc0c7; }
.impact-world-microhydro .impact-feature.feature-one { left: 39%; width: 20px; height: 25px; border-color: #526e66; border-radius: 5px; background: linear-gradient(90deg,#829d90,#d8d9a0); }.impact-world-microhydro .impact-feature.feature-one::after { position: absolute; top: 7px; left: 6px; width: 9px; height: 9px; border: 2px solid #e4d785; border-radius: 50%; content: ""; }
.impact-world-wetland .impact-feature { width: 34px; height: 11px; border: 0; border-radius: 50%; background: #58a8a1; box-shadow: 0 4px #528a75; }.impact-world-wetland .impact-feature::before { top: -8px; left: 12px; width: 4px; height: 12px; border: 0; border-radius: 50%; background: #538c5f; box-shadow: 7px 3px #689c62,-7px 4px #82aa63; }
.impact-world-flood-damage .impact-lake { width: 70%; height: 55%; background: linear-gradient(145deg,#78b4c7,#438da5); }.impact-world-flood-damage .house-a { filter: drop-shadow(0 4px 0 #63b3c2); transform: translateZ(38px) translateY(5px); }.impact-world-flood-damage .impact-cloud { background: #879ba1; }
.impact-world-retention .impact-feature,.impact-world-pond .impact-feature { width: 52px; height: 29px; border-radius: 48% 48% 13px 13px; background: linear-gradient(145deg,#7ac6cc,#4397a4); box-shadow: 0 7px #768f66,0 11px #566f50; }.impact-world-retention .impact-cloud,.impact-world-flood-damage .impact-cloud { background: #879ba1; }.impact-world-retention .impact-rain,.impact-world-flood-damage .impact-rain { animation: impact-rain-fall .8s linear infinite; }.impact-world-retention .rain-two,.impact-world-flood-damage .rain-two { animation-delay: .27s; }.impact-world-retention .rain-three,.impact-world-flood-damage .rain-three { animation-delay: .48s; }
.impact-world-evacuation .impact-character { left: 61%; }.impact-world-evacuation .impact-villager { opacity: 1; animation: impact-evacuate .8s ease-in-out both; }.impact-world-retention .impact-lake,.impact-world-pond .impact-lake { width: 49%; height: 41%; }
.impact-world-evacuation .impact-character { left: 61%; }.impact-world-retention .impact-lake,.impact-world-pond .impact-lake { width: 49%; height: 41%; }
.impact-world-allocation .impact-lake { width: 33%; height: 29%; }.impact-world-allocation .impact-river { width: 21%; }.impact-world-irrigation .crop-a,.impact-world-irrigation .crop-b,.impact-world-agro .crop-a,.impact-world-agro .crop-b { box-shadow: 0 -3px 0 #d8bd70,0 3px 0 #688e52,8px -1px 0 #d8bd70; }
.impact-world-shelter .house-b { background: linear-gradient(90deg,#a9d4d5 50%,#85b4b8 50%); }.impact-world-future .impact-sun { background: #ffe8a9; }
@keyframes impact-terrain-arrive { from { opacity: 0; transform: rotateX(55deg) rotateZ(-35deg) scale(.62) translateY(25px); } to { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) scale(.94); } }
@keyframes impact-tree-grow { from { transform: translateZ(25px) scale(.1); } to { transform: translateZ(35px) scale(1); } }
@keyframes impact-sparkle { 0% { opacity: 0; transform: translateY(12px) scale(.4); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) scale(1.2); } }
@keyframes impact-character-arrive { from { opacity: 0; transform: translateZ(48px) translateY(-24px); } to { opacity: 1; transform: translateZ(48px) translateY(0); } }
@keyframes impact-sun-glow { 0%,100% { box-shadow: 0 0 0 9px #ffdf8a36,0 0 38px #ffe49b88; } 50% { box-shadow: 0 0 0 14px #ffdf8a24,0 0 50px #ffe49baa; } }
@keyframes impact-cloud-drift { from { margin-left: -12px; } to { margin-left: 18px; } }
@keyframes impact-extra-grow { from { opacity: 0; transform: translateZ(28px) scale(.1); } to { opacity: 1; transform: translateZ(38px) scale(1); } }
@keyframes impact-rain-fall { 0% { opacity: 0; transform: translate(0,-8px) rotate(18deg); } 35% { opacity: .8; } 100% { opacity: 0; transform: translate(20px,38px) rotate(18deg); } }
@keyframes impact-evacuate { 0% { opacity: 0; transform: translateZ(48px) translate(-12px,8px); } 100% { opacity: 1; transform: translateZ(48px) translate(0,-10px); } }
@media (max-width: 640px) {
  .impact-world { min-height: 275px; margin: 10px 0; border-radius: 11px; }
  .impact-sector-allocation { top: 31px; left: 8px; width: min(210px,calc(100% - 16px)); gap: 3px; }.impact-sector-allocation > div { grid-template-columns: 11px 1fr; padding: 3px 2px; gap: 1px 2px; }.impact-sector-allocation > div > span { font-size: 8px; }.impact-sector-allocation small { font-size: 4px; }.impact-sector-allocation strong { font-size: 8px; }
  .impact-terrain { top: 31%; transform: translateX(-50%) scale(.85); transform-origin: top center; }
  .impact-scene-caption { grid-template-columns: 27px minmax(0,1fr); gap: 6px; padding: 7px; }
  .impact-scene-caption > span { width: 26px; height: 26px; }.impact-scene-caption strong { font-size: 8px; }.impact-scene-caption small { font-size: 6px; }
  .impact-scene-live { grid-column: 2; font-size: 5px; }
  .impact-results { gap: 4px; }.impact-metric { grid-template-columns: 15px 1fr; gap: 2px 3px; padding: 7px 4px; }.impact-metric > span { font-size: 12px; }.impact-metric > small { font-size: 6px; }.impact-metric > strong { gap: 3px; font-size: 13px; }.impact-metric > strong b { font-size: 7px; }.impact-metric > em { font-size: 5px; }
}
@media (max-width: 380px) { .impact-terrain { transform: translateX(-50%) scale(.72); }.impact-world { min-height: 260px; }.impact-results { grid-template-columns: repeat(2,minmax(0,1fr)); }.impact-scene-caption small { font-size: 5px; } }
@media (prefers-reduced-motion: reduce) { .impact-world *, .impact-world *::before, .impact-world *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.impact-world {
  min-height: 340px;
  background:
    radial-gradient(ellipse at 74% 18%,#fff4c755 0 8%,transparent 24%),
    linear-gradient(180deg,#8bc5d3 0%,#d4e8d7 51%,#dce7c7 100%);
  box-shadow: inset 0 1px #ffffffa8,0 12px 28px #54734b18;
}
.impact-sky { inset: 0 0 42%; background: linear-gradient(180deg,#82bdd0 0%,#bddedc 72%,#d4e8d7 100%); }
.impact-cloud { background: linear-gradient(180deg,#fff 0%,#e4f1eb 78%); box-shadow: 0 9px 14px #467c7726; }
.impact-sun { width: 48px; height: 48px; background: radial-gradient(circle at 35% 30%,#fff7cf,#ffd77c 72%); box-shadow: 0 0 0 12px #ffdf8a2b,0 0 44px #ffe49b99; }
.impact-horizon { top: 33%; height: 48%; background: linear-gradient(180deg,#b5d6a5,#79a96f 84%); filter: drop-shadow(0 9px 7px #426f5633); }
.impact-horizon::before,.impact-horizon::after { box-shadow: inset 0 12px 24px #ffffff24; }
.impact-terrain {
  top: 22%;
  width: min(420px,calc(100% - 34px));
  height: 264px;
  perspective: 1000px;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateX(var(--impact-camera-x,0deg)) rotateY(var(--impact-camera-y,0deg));
  transform-origin: 50% 58%;
  transition: transform .2s ease-out;
  filter: drop-shadow(0 24px 18px #284f4d44);
}
.impact-terrain-top {
  inset: 5px 12px 34px;
  border: 2px solid #79976a;
  border-radius: 18px;
  background-color: #91b96f;
  background-image:
    radial-gradient(ellipse at 22% 28%,#c7d8917a 0 6%,transparent 30%),
    radial-gradient(ellipse at 76% 68%,#4b825b52 0 5%,transparent 34%),
    repeating-linear-gradient(31deg,transparent 0 24px,#ffffff17 25px 26px,transparent 27px 48px),
    repeating-linear-gradient(149deg,transparent 0 27px,#345f4521 28px 29px,transparent 30px 54px),
    linear-gradient(145deg,#b5d387 0%,#91b86c 54%,#6d9a64 100%);
  box-shadow: inset 0 3px 9px #f2ffd282,inset -18px -14px 25px #345b3544,0 15px 0 #789c65,0 23px 0 #55774f;
  transform: rotateX(55deg) rotateZ(-35deg) scale(1.08);
}
.impact-terrain-side {
  right: 20px;
  bottom: 4px;
  left: 25px;
  height: 44px;
  border-color: #5e7953;
  background:
    linear-gradient(90deg,#6f8050,#927952 38%,#a38b62 60%,#62784e),
    repeating-linear-gradient(0deg,#8e7450 0 7px,#a48a5e 8px 13px);
  box-shadow: inset 0 4px 8px #fff2,0 12px 19px #28483145;
}
.impact-river {
  border: 6px solid #c5dfc1;
  background:
    linear-gradient(90deg,#ffffff33,transparent 24% 68%,#286b8540),
    repeating-linear-gradient(0deg,#48a9c0 0 12px,#75c8d0 13px 17px,#5db6c5 18px 27px);
  box-shadow: 0 0 0 2px #f6fff3b8,inset 5px 0 9px #e9ffff75,inset -7px 0 13px #286b8577,0 7px 0 #528b7b;
  background-size: 100% 100%,100% 170%;
  animation: impact-river-flow 3s linear infinite;
}
.impact-lake {
  border: 5px solid #c4dcae;
  background:
    radial-gradient(ellipse at 30% 28%,#ddffff8c 0 2%,transparent 25%),
    repeating-linear-gradient(165deg,transparent 0 9px,#e7ffff4a 10px 11px,transparent 12px 22px),
    linear-gradient(145deg,#7bcbd0,#3693a2 74%,#28788e);
  box-shadow: inset 0 5px 12px #edffff77,inset -7px -7px 13px #245f6c55,0 5px 0 #568d72,0 9px 12px #34533d44;
  animation: impact-water-glint 4s ease-in-out infinite;
}
.impact-road {
  height: 17px;
  border: 3px solid #b5a583;
  background: repeating-linear-gradient(90deg,#e3d3a8 0 20px,#c9b990 21px 24px);
  box-shadow: inset 0 2px #fff8,0 5px 0 #82795f,0 8px 9px #36493344;
}
.impact-hill {
  border-color: #718d59;
  background:
    repeating-linear-gradient(160deg,transparent 0 16px,#ffffff17 17px 19px,transparent 20px 33px),
    linear-gradient(145deg,#9dc67b 0%,#719f5e 67%,#4f7c51 100%);
  box-shadow: inset -12px -9px 16px #355b4355,inset 5px 4px 9px #f2ffd252,0 7px 0 #597e50;
}
.impact-tree { background: linear-gradient(90deg,#604832,#a67a4b 47%,#634831); box-shadow: inset 2px 0 #d3a16a; }
.impact-tree::before {
  width: 33px;
  height: 34px;
  border-radius: 48% 55% 44% 48%;
  background:
    radial-gradient(ellipse at 32% 25%,#d2e9a1 0 8%,transparent 34%),
    radial-gradient(ellipse at 38% 42%,#9bc773 0 18%,transparent 48%),
    radial-gradient(ellipse at 70% 72%,#3e754e 0 18%,transparent 48%),
    linear-gradient(140deg,#8bb76d,#477e56);
  box-shadow: inset -7px -7px 8px #315f4b77,0 5px 0 #4d7950,0 9px 12px #31493455;
}
.impact-extra-tree::before {
  background:
    radial-gradient(ellipse at 32% 25%,#d5eaa5 0 9%,transparent 34%),
    radial-gradient(ellipse at 70% 70%,#3d734b 0 20%,transparent 49%),
    linear-gradient(140deg,#a1cc79,#4a8057);
  box-shadow: inset -5px -5px 7px #315f4b77,0 4px #4b7650,0 7px 9px #31493455;
}
.impact-house {
  border-color: #806044;
  background:
    linear-gradient(90deg,transparent 0 24%,#f1dfa7 25% 31%,transparent 32% 68%,#f1dfa7 69% 75%,transparent 76%),
    linear-gradient(90deg,#e7bd78 0 49%,#c9985d 50% 100%);
  box-shadow: inset 0 3px #fff5,0 8px 0 #8d6d49,0 12px 13px #3447314d;
}
.impact-house::before {
  height: 19px;
  background: linear-gradient(155deg,#d9936b 0 48%,#9b5d4b 49% 100%);
  box-shadow: inset 0 3px #efb38a,0 3px 0 #764a42;
}
.impact-villager {
  background: linear-gradient(90deg,#355f70,#75a3a0 48%,#365b6c);
  box-shadow: inset 2px 0 #c8ded1,0 3px 6px #263e3d77;
}
.impact-character {
  background: linear-gradient(90deg,#3f6b4d,#80a76e 48%,#3d6749);
  box-shadow: inset 2px 0 #c1d68a,0 4px 9px #2c453d70;
}
.impact-scene-caption {
  right: 13px;
  bottom: 12px;
  left: 13px;
  padding: 11px 13px;
  border-color: #ffffffd9;
  background: linear-gradient(110deg,#ffffffef,#f7faf2ed);
  box-shadow: 0 8px 25px #3655422b,inset 0 1px #fff;
}
.impact-scene-caption > span { box-shadow: inset 0 -2px 4px #6685671c; }
.impact-scene-caption strong { font-size: 10px; }
.impact-scene-caption small { font-size: 8px; }
@keyframes impact-terrain-arrive {
  from { opacity: 0; transform: rotateX(55deg) rotateZ(-35deg) scale(.7) translateY(28px); }
  to { opacity: 1; transform: rotateX(55deg) rotateZ(-35deg) scale(1.08); }
}
@keyframes impact-river-flow { to { background-position: 0 0,0 170%; } }
@keyframes impact-water-glint { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }
.journal-tools { display: flex; align-items: center; gap: 12px; }
.journal-toggle { padding: 5px 0; border: 0; background: transparent; cursor: pointer; }
.journal-toggle[hidden] { display: none; }
@media (max-width: 640px) {
  .impact-world { min-height: 300px; }
  .impact-terrain { top: 22%; width: min(390px,calc(100% - 22px)); height: 220px; }
  .impact-terrain-top { transform: rotateX(55deg) rotateZ(-35deg) scale(1.02); }
  .impact-scene-caption { grid-template-columns: 30px minmax(0,1fr) auto; padding: 8px; }
  .impact-scene-caption small { font-size: 7px; }
}
@media (max-width: 380px) {
  .impact-terrain { width: calc(100% - 14px); height: 205px; }
}
.impact-webgl {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.impact-webgl.is-dragging { cursor: grabbing; }
.impact-world.webgl-ready .impact-sky,
.impact-world.webgl-ready .impact-horizon,
.impact-world.webgl-ready .impact-terrain { display: none; }
.impact-world.webgl-ready .impact-sky-caption { display: block; }
.impact-world.webgl-ready .impact-sky {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
.impact-world.webgl-ready .impact-sky-caption {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 13px;
}
.impact-3d-controls {
  position: absolute;
  z-index: 6;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #ffffffa8;
  border-radius: 9px;
  background: #fafff0d9;
  box-shadow: 0 3px 12px #274a3930;
  backdrop-filter: blur(7px);
}
.impact-3d-controls button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  padding: 0;
  border: 1px solid #dce8d7;
  border-radius: 7px;
  background: #fff;
  color: #416849;
  font: 700 17px var(--font-body);
  cursor: pointer;
}
.impact-3d-controls button:hover { border-color: #95b68e; background: #eff7e9; }
.impact-3d-controls span {
  padding: 0 5px;
  color: #647a65;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.impact-webgl-status {
  position: absolute;
  z-index: 7;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 8px;
  border: 1px solid #f0dfb5;
  border-radius: 7px;
  background: #fff9e9ed;
  color: #795e32;
  font-size: 8px;
}
.impact-webgl-status[hidden] { display: none; }
.impact-world.webgl-unavailable .impact-webgl,
.impact-world.webgl-unavailable .impact-3d-controls { display: none; }
@media (max-width: 640px) {
  .impact-3d-controls { top: 7px; right: 7px; gap: 3px; padding: 3px; }
  .impact-3d-controls button { width: 27px; height: 27px; }
  .impact-3d-controls span { padding: 0 3px; font-size: 7px; }
  .impact-world.webgl-ready .impact-sky-caption { top: auto; right: auto; bottom: 70px; left: 10px; font-size: 6px; }
}

.world-art .leaflet-tile { filter: saturate(1.08) contrast(1.025); }
.world-art .leaflet-overlay-pane path.expedition-route-line {
  animation: map-route-flow 3s linear infinite;
  filter: drop-shadow(0 1px 2px #8b643c44);
}
.world-art .leaflet-overlay-pane path.watercourse-bank { filter: drop-shadow(0 1px 2px #2b747944); }
.world-art .leaflet-overlay-pane path.watercourse-current {
  animation: map-water-flow 1.8s linear infinite;
  filter: drop-shadow(0 0 3px #d9f2e999);
}
.world-art .leaflet-overlay-pane path.active-mission-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: map-mission-pulse 2.2s ease-out infinite;
}
.world-art.map-risk-active::after {
  position: absolute;
  z-index: 401;
  inset: 0;
  background: radial-gradient(ellipse at 53% 56%, #edac6830 0, #edac6812 26%, transparent 62%);
  content: "";
  opacity: .55;
  pointer-events: none;
  animation: map-risk-breathe 3.8s ease-in-out infinite;
}
.world-art .map-live-chip > span {
  box-shadow: 0 0 0 0 #67a86d80;
  animation: map-live-ping 2s ease-out infinite;
}
.world-art .guardian-avatar-map { animation-duration: 2.6s; }
@keyframes map-water-flow { to { stroke-dashoffset: -30; } }
@keyframes map-route-flow { to { stroke-dashoffset: -26; } }
@keyframes map-mission-pulse {
  0% { opacity: .82; transform: scale(.72); }
  75%, 100% { opacity: 0; transform: scale(1.55); }
}
@keyframes map-risk-breathe { 0%, 100% { opacity: .28; } 50% { opacity: .72; } }
@keyframes map-live-ping {
  0% { box-shadow: 0 0 0 0 #67a86d80; }
  70%, 100% { box-shadow: 0 0 0 6px #67a86d00; }
}
@media (prefers-reduced-motion: reduce) {
  .world-art .leaflet-overlay-pane path.expedition-route-line,
  .world-art .leaflet-overlay-pane path.watercourse-current,
  .world-art .leaflet-overlay-pane path.active-mission-pulse,
  .world-art.map-risk-active::after,
  .world-art .map-live-chip > span,
  .world-art .guardian-avatar-map { animation: none; }
}

.modal-backdrop.learning-check-mode .game-modal { width: min(100%, 820px); padding: 30px 34px 24px; }
.modal-backdrop.learning-check-mode .game-modal { max-height: min(94vh, 880px); }
.learning-field { margin: 15px 0 10px; overflow: hidden; border: 1px solid #dce8dc; border-radius: 17px; background: #f5f7eb; box-shadow: 0 14px 36px #294a3912; animation: learning-field-arrive .55s cubic-bezier(.2,.75,.25,1) both; }
.learning-field-head { position: relative; z-index: 1; display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-bottom: 1px solid #e7ebdc; background: linear-gradient(90deg,#fffdf3,#edf4e8); }
.learning-field-location { display: flex; align-items: center; gap: 6px; overflow: hidden; color: #526e57; font-size: 8px; font-weight: 800; letter-spacing: .65px; text-overflow: ellipsis; white-space: nowrap; }
.learning-field-location i { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #dfeadb; color: #538260; font-size: 12px; font-style: normal; }
.learning-field-phase { display: grid; justify-items: end; gap: 2px; flex: 0 0 auto; }
.learning-field-phase b { color: #bc8752; font-size: 8px; letter-spacing: 1.4px; }
.learning-field-phase span { color: #98a194; font-size: 6px; font-weight: 700; letter-spacing: .8px; }
.learning-field-art { position: relative; height: clamp(154px, 24vw, 214px); overflow: hidden; background: linear-gradient(#a9d5d0,#e3e6ca); }
.watershed-illustration { display: block; width: 100%; height: 100%; }
.field-cloud { transform-origin: 210px 63px; animation: field-cloud-drift 11s ease-in-out infinite alternate; }
.field-rain { animation: field-rain-fall .75s linear infinite; }
.field-current { animation: field-current-flow 2.7s linear infinite; }
.field-infiltration { animation: field-infiltration-flow 1.4s ease-in-out infinite; }
.learning-field.result-correct .field-current { stroke: #f5f3d1; stroke-width: 4; }
.learning-field.result-correct .field-infiltration { stroke: #fff0b8; stroke-width: 4; }
.learning-field.result-correct .learning-field-stamp i { background: #4a9a60; box-shadow: 0 0 0 4px #b9dfb5,0 0 14px #62aa6f; }
.learning-field.result-review .field-current { stroke: #e6e7d1; opacity: .55; }
.learning-field.result-review .learning-field-stamp i { background: #d39a58; box-shadow: 0 0 0 4px #f0dfc5,0 0 12px #d39a5866; }
.field-label { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .7px; fill: #486452; }
.learning-field-stamp,.learning-field-note { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #ffffffaa; border-radius: 7px; background: #fffdf0d9; box-shadow: 0 4px 12px #2847321c; color: #55725a; font-size: 6px; font-weight: 800; letter-spacing: .7px; backdrop-filter: blur(5px); }
.learning-field-stamp { top: 10px; left: 11px; }
.learning-field-stamp i { width: 6px; height: 6px; border-radius: 50%; background: #76a96f; box-shadow: 0 0 0 3px #dcebd5; font-size: 0; }
.learning-field-stamp b { padding-left: 6px; border-left: 1px solid #dce4d7; color: #bc8752; font-size: 5px; }
.learning-field-note { right: 10px; bottom: 9px; color: #5d7d6e; }
.learning-field-note i { color: #c28d56; font-size: 9px; font-style: normal; }
.learning-field-caption { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 56px; padding: 8px 12px; border-top: 1px solid #ffffffa6; background: linear-gradient(100deg,#f9faf1,#eef4e9); }
.learning-concept-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #dce8d7; border-radius: 10px; background: #e7f0e2; color: #4e7858; font-size: 17px; }
.learning-field-caption > span:nth-child(2) { display: grid; gap: 3px; }
.learning-field-caption b { color: #48634c; font-size: 7px; letter-spacing: .9px; }
.learning-field-caption small { color: #77867a; font-size: 8px; line-height: 1.4; }
.learning-round { display: flex; align-items: baseline; gap: 3px; color: #496d4e; font: 700 17px var(--font-display); }
.learning-round i { color: #9aa498; font: 600 8px var(--font-body); font-style: normal; }
.learning-check-mode .learning-check-progress { height: 7px; margin: 9px 0 5px; background: #e9eee2; }
.learning-check-mode .learning-check-progress span { background: linear-gradient(90deg,#4e8461,#8eb77a 58%,#e1b46a); box-shadow: 0 0 10px #79a96d55; }
.learning-check-mode .learning-check-count { color: #647a67; font-size: 8px; font-weight: 700; }
.learning-check-count span { color: #99a397; font-weight: 500; }
.learning-choice-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 7px; color: #667e68; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.learning-choice-heading small { color: #a1aa9d; font-size: 6px; letter-spacing: .75px; }
.learning-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.learning-answer { position: relative; display: grid; min-height: 94px; align-content: start; gap: 7px; padding: 10px 11px 8px; overflow: hidden; border: 1px solid #e1e9df; border-radius: 12px; background: linear-gradient(145deg,#fff 25%,#f8faf4); box-shadow: 0 3px 9px #31543d08; text-align: left; cursor: pointer; transition: transform .18s,border-color .18s,box-shadow .18s,background .18s; animation: learning-option-arrive .38s both; }
.learning-answer:nth-child(2) { animation-delay: 45ms; }
.learning-answer:nth-child(3) { animation-delay: 90ms; }
.learning-answer:nth-child(4) { animation-delay: 135ms; }
.learning-answer::after { position: absolute; right: -17px; bottom: -23px; width: 68px; height: 68px; border: 1px solid #71987113; border-radius: 50%; content: ""; transition: transform .25s; }
.learning-answer:hover:not(:disabled),.learning-answer:focus-visible { transform: translateY(-2px); border-color: #8eae87; box-shadow: 0 9px 20px #355d3e17; outline: none; }
.learning-answer:hover:not(:disabled)::after { transform: scale(1.35); }
.learning-answer-top { display: flex; align-items: center; gap: 6px; }
.learning-answer-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #e0e9dc; border-radius: 8px; background: linear-gradient(145deg,#f0f5eb,#e5eee0); color: #527a5c; font: 700 15px var(--font-display); }
.learning-answer-tag { color: #92a08f; font-size: 6px; font-weight: 800; letter-spacing: .85px; }
.learning-answer-letter { display: grid; width: 20px; height: 20px; margin-left: auto; place-items: center; border: 1px solid #e5ebe2; border-radius: 7px; color: #82917f; font-size: 7px; font-weight: 800; }
.learning-answer > strong { position: relative; z-index: 1; color: #344b3a; font-size: 9px; font-weight: 700; line-height: 1.4; }
.learning-answer-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; color: #93a18f; font-size: 6px; font-weight: 800; letter-spacing: .65px; }
.learning-answer-action i { color: #6e9871; font-size: 12px; font-style: normal; }
.learning-answer:disabled { cursor: default; opacity: .72; }
.learning-answer.is-correct { border-color: #77a77c; background: linear-gradient(140deg,#f4faef,#e7f4e4); box-shadow: 0 0 0 2px #dcebd9,0 8px 24px #47774418; opacity: 1; }
.learning-answer.is-correct .learning-answer-icon { background: #dcebd8; color: #3e784e; }
.learning-answer.is-review { border-color: #d4a069; background: linear-gradient(140deg,#fffaf1,#f7eddd); box-shadow: 0 0 0 2px #f5ead8; opacity: 1; }
.learning-answer.is-review .learning-answer-icon { background: #f4e6d3; color: #a8723d; }
.learning-feedback { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: start; gap: 9px; margin: 10px 0 5px; padding: 11px 12px; border-radius: 11px; animation: learning-feedback-in .28s ease-out both; }
.learning-feedback-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #f1e3cf; color: #a47142; font-size: 15px; font-weight: 800; }
.learning-feedback.correct .learning-feedback-icon { background: #dfeedd; color: #4d8256; }
.learning-feedback > div { display: grid; gap: 3px; }
.learning-feedback strong { font-size: 8px; }
.learning-feedback small { color: #8e988d; font-size: 7px; }
.learning-feedback p { margin: 2px 0 0; font-size: 8px; line-height: 1.5; }
.learning-next-action { width: 100%; min-height: 42px; justify-content: space-between; margin-top: 9px; padding: 0 15px; border-radius: 10px; }
@keyframes learning-field-arrive { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes learning-option-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes learning-feedback-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes field-cloud-drift { to { transform: translateX(26px); } }
@keyframes field-rain-fall { to { transform: translateY(14px); opacity: .35; } }
@keyframes field-current-flow { to { stroke-dashoffset: -50; } }
@keyframes field-infiltration-flow { 50% { opacity: .3; stroke-dashoffset: -12; } }
@media (max-width: 640px) {
  .modal-backdrop.learning-check-mode .game-modal { max-height: min(94vh, 880px); padding: 23px 17px 16px; }
  .learning-field { margin: 12px 0 8px; border-radius: 13px; }
  .learning-field-head { min-height: 34px; padding: 0 9px; }
  .learning-field-location { font-size: 7px; }
  .learning-field-phase span { font-size: 5px; }
  .learning-field-art { height: clamp(136px, 42vw, 172px); }
  .learning-field-stamp { top: 7px; left: 7px; padding: 5px 6px; font-size: 5px; }
  .learning-field-note { right: 6px; bottom: 6px; gap: 3px; padding: 5px 6px; font-size: 5px; }
  .learning-field-caption { grid-template-columns: 26px minmax(0,1fr) auto; min-height: 49px; gap: 6px; padding: 6px 8px; }
  .learning-concept-icon { width: 25px; height: 25px; border-radius: 8px; font-size: 14px; }
  .learning-field-caption b { font-size: 6px; }
  .learning-field-caption small { font-size: 7px; }
  .learning-round { font-size: 14px; }
  .learning-choice-grid { gap: 6px; }
  .learning-answer { min-height: 88px; gap: 6px; padding: 8px; border-radius: 10px; }
  .learning-answer-icon { width: 23px; height: 23px; font-size: 13px; }
  .learning-answer > strong { font-size: 8px; }
  .learning-answer-tag { font-size: 5px; }
  .learning-answer-action { font-size: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .learning-field,.learning-answer,.learning-feedback,.field-cloud,.field-rain,.field-current,.field-infiltration { animation: none; }
}