:root {
  color-scheme: light;
  --ink: #173c35;
  --muted: #61736c;
  --paper: #fff8df;
  --leaf: #2d7d55;
  --leaf-dark: #17523c;
  --sun: #f2bd4d;
  --orange: #ea7845;
  --mist: #dcece3;
  --error: #b94838;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1100px; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: #102d29; font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif; }
button { font: inherit; }

.expedition { display: grid; grid-template-columns: minmax(720px, 1fr) 390px; width: 100vw; height: 100vh; background: radial-gradient(circle at 40% 50%, #315e4c, #102d29 74%); }
.journal { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.world-art { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.04) contrast(1.02); }
.journal::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset -18px 0 35px rgba(15,35,29,.36); }
.portal-layer { position: absolute; inset: 0; z-index: 3; }
.portal { position: absolute; display: grid; place-items: end center; width: clamp(124px, 14vw, 188px); aspect-ratio: 1; padding: 0 8px 5px; border: 3px solid transparent; border-radius: 50%; color: white; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out, filter 150ms ease-out; }
.portal span { padding: 7px 12px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; background: rgba(17,49,41,.88); box-shadow: 0 4px 12px rgba(0,0,0,.26); font-size: 13px; font-weight: 900; letter-spacing: .03em; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.portal:hover:not([disabled]), .portal.is-over { border-color: #ffe17e; box-shadow: 0 0 0 8px rgba(255,225,126,.24), 0 0 34px 15px rgba(255,219,91,.42); transform: translate(-50%, -50%) scale(1.055); }
.portal:focus-visible { outline: 5px solid #fff; outline-offset: 5px; border-color: var(--sun); }
.portal[disabled] { cursor: default; filter: grayscale(.55) brightness(.66); }
.portal.is-correct { border-color: #eaff9a; box-shadow: 0 0 0 10px rgba(143,222,109,.28), 0 0 44px 17px rgba(175,255,102,.62); animation: portal-pop 520ms cubic-bezier(.2,.9,.25,1); }
.portal.is-wrong { border-color: #ff9f89; animation: shake 260ms ease-out; }
.portal-desert { left: 17%; top: 22%; }
.portal-rainforest { left: 50%; top: 20%; }
.portal-tundra { left: 83%; top: 22%; }
.portal-grassland { left: 18%; top: 69%; }
.portal-ocean { left: 50%; top: 75%; }
.portal-forest { left: 82%; top: 69%; }

.compass { position: absolute; z-index: 2; left: 50%; top: 48%; display: grid; place-items: center; width: 104px; height: 104px; border: 2px solid rgba(93,64,30,.5); border-radius: 50%; color: #765121; transform: translate(-50%, -50%); opacity: .72; }
.compass i { position: absolute; width: 20px; height: 74px; background: linear-gradient(to bottom, #b94d33 0 50%, #e7c26e 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.compass b { position: absolute; top: -20px; font-size: 12px; }

.field-kit { position: relative; z-index: 8; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 28px 30px 22px; background: linear-gradient(145deg, #fffdf1, #f4e6be); box-shadow: -18px 0 45px rgba(8,29,24,.34); }
.mission-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(77,77,48,.18); }
.mission-head > div:first-child span { display: block; color: var(--leaf); font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.mission-head > div:first-child strong { display: block; margin-top: 3px; font-size: 17px; }
.score { display: flex; gap: 8px; }
.score span { min-width: 66px; padding: 7px 9px; border-radius: 12px; color: #fff; background: var(--leaf-dark); font-size: 11px; font-weight: 800; text-align: center; }
.score b { display: block; color: #ffe582; font-size: 20px; }
.difficulty { margin: 16px 0 -2px; padding: 12px 14px; border-radius: 14px; background: rgba(38,102,73,.09); }
.difficulty > div { display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; }
.difficulty > i { display: block; height: 7px; margin-top: 7px; overflow: hidden; border-radius: 9px; background: #d1d8c5; }
.difficulty > i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sun), var(--orange)); transition: width 280ms ease-out; }
.briefing { padding: 27px 0 16px; }
.kicker { display: block; color: var(--orange); font-size: 12px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 7px 0 8px; font-family: "Avenir Next Condensed", "Arial Narrow", ui-rounded, sans-serif; font-size: 35px; line-height: .98; letter-spacing: -.035em; }
.briefing p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.42; }
.climate-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.climate-card > div { padding: 11px 12px; border: 1px solid #d9cba4; border-radius: 14px; background: rgba(255,255,255,.58); }
.climate-card span { display: block; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.climate-card strong { display: block; margin: 3px 0 7px; font-size: 15px; }
.climate-card i { display: block; height: 6px; border-radius: 8px; background: #d9ddce; }
.climate-card i b { display: block; height: 100%; border-radius: inherit; background: var(--orange); }
.climate-card > div:last-child i b { background: #3da4b8; }

.specimen-wrap { min-height: 154px; }
.specimen-card { display: flex; align-items: center; gap: 15px; min-height: 142px; padding: 12px 15px; border: 2px solid #d3bc81; border-radius: 20px; background: #fffdf5; box-shadow: 0 8px 0 #b99b5c, 0 15px 25px rgba(75,52,26,.14); cursor: grab; transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.specimen-card:hover { transform: translateY(-4px) rotate(-.7deg); box-shadow: 0 12px 0 #b99b5c, 0 19px 28px rgba(75,52,26,.18); }
.specimen-card:active { cursor: grabbing; transform: translateY(5px); box-shadow: 0 3px 0 #b99b5c; }
.specimen-card:focus-visible { outline: 5px solid var(--sun); outline-offset: 3px; }
.specimen-card.is-returning { animation: card-return 330ms ease-out; }
.sprite { flex: 0 0 122px; width: 122px; height: 105px; background-repeat: no-repeat; background-size: 400% 300%; filter: drop-shadow(0 6px 3px rgba(31,35,21,.16)); }
.specimen-card span { display: block; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.specimen-card strong { display: block; margin: 4px 0; font-size: 22px; line-height: 1; }
.specimen-card small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }

.chain { display: flex; gap: 9px; margin: 5px 0 12px; }
.chain-slot { position: relative; display: grid; place-items: center; flex: 1; min-height: 64px; border: 2px dashed #b9aa81; border-radius: 13px; color: #7b704f; background: rgba(255,255,255,.4); font-size: 11px; font-weight: 900; text-align: center; }
.chain-slot + .chain-slot::before { content: "→"; position: absolute; left: -16px; color: var(--leaf); font-size: 20px; }
.chain-slot.is-filled { border-style: solid; border-color: #72a56d; color: var(--leaf-dark); background: #e1f1ce; animation: slot-pop 300ms ease-out; }
.observation { min-height: 42px; margin-top: 13px; color: var(--leaf-dark); font-size: 13px; font-weight: 800; line-height: 1.4; }
.action-area { min-height: 52px; margin-top: 8px; }
.continue { width: 100%; min-height: 49px; border: 0; border-radius: 15px; color: white; background: var(--leaf); box-shadow: 0 6px 0 var(--leaf-dark); font-size: 15px; font-weight: 950; cursor: pointer; transition: transform 130ms ease-out, box-shadow 130ms ease-out; }
.continue:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--leaf-dark); }
.continue:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--leaf-dark); }
.continue:focus-visible { outline: 5px solid var(--sun); outline-offset: 3px; }

.scout-corner { position: relative; min-height: 132px; margin-top: auto; }
.scout-corner img { position: absolute; right: -44px; bottom: -48px; width: 190px; filter: drop-shadow(0 9px 8px rgba(41,43,25,.18)); transform-origin: 60% 100%; transition: transform 180ms ease-out, filter 180ms ease-out; }
.scout-speech { position: absolute; z-index: 2; left: 0; top: 21px; width: 205px; min-height: 56px; padding: 11px 14px; border: 2px solid #d7c28e; border-radius: 16px 16px 5px 16px; background: white; box-shadow: 0 7px 18px rgba(68,52,23,.11); font-size: 12px; font-weight: 850; line-height: 1.35; }
.scout-corner.is-happy img { animation: mascot-hop 560ms cubic-bezier(.2,.9,.2,1); }
.scout-corner.is-oops img { animation: mascot-wobble 300ms ease-out; filter: saturate(.65) drop-shadow(0 9px 8px rgba(41,43,25,.18)); }
.success-burst { position: absolute; z-index: 7; left: 50%; top: 49%; width: 20px; height: 20px; pointer-events: none; }
.success-burst i { position: absolute; width: 9px; height: 24px; border-radius: 9px; background: var(--sun); opacity: 0; }
.success-burst.is-live i { animation: ray 650ms ease-out; }
.success-burst i:nth-child(2n) { background: #73c86b; }
.success-burst i:nth-child(3n) { background: #ed7c4a; }
.success-burst i:nth-child(1) { transform: rotate(0deg) translateY(-70px); }
.success-burst i:nth-child(2) { transform: rotate(45deg) translateY(-70px); }
.success-burst i:nth-child(3) { transform: rotate(90deg) translateY(-70px); }
.success-burst i:nth-child(4) { transform: rotate(135deg) translateY(-70px); }
.success-burst i:nth-child(5) { transform: rotate(180deg) translateY(-70px); }
.success-burst i:nth-child(6) { transform: rotate(225deg) translateY(-70px); }
.success-burst i:nth-child(7) { transform: rotate(270deg) translateY(-70px); }
.success-burst i:nth-child(8) { transform: rotate(315deg) translateY(-70px); }
.toast { position: fixed; z-index: 30; left: 42%; bottom: 24px; max-width: 420px; padding: 12px 18px; border-radius: 999px; color: white; background: #173c35; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-size: 13px; font-weight: 850; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: 180ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%, 0); }

@keyframes portal-pop { 40% { transform: translate(-50%, -50%) scale(1.14); } }
@keyframes shake { 25% { transform: translate(-55%, -50%); } 75% { transform: translate(-45%, -50%); } }
@keyframes card-return { 25% { transform: translateX(-10px) rotate(-2deg); } 70% { transform: translateX(8px) rotate(1deg); } }
@keyframes slot-pop { from { transform: scale(.82); } to { transform: none; } }
@keyframes mascot-hop { 45% { transform: translateY(-18px) rotate(4deg) scale(1.05); } }
@keyframes mascot-wobble { 30% { transform: rotate(-5deg); } 70% { transform: rotate(4deg); } }
@keyframes ray { 0% { opacity: 0; margin: 0; } 35% { opacity: 1; } 100% { opacity: 0; margin-top: -45px; } }

@media (max-width: 1200px) { .expedition { grid-template-columns: minmax(700px, 1fr) 360px; } .field-kit { padding-left: 24px; padding-right: 24px; } .portal { width: 132px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }