:root {
  color-scheme: light;
  --ink: #1d3026;
  --muted: #849087;
  --green: #43775b;
  --green-dark: #274a39;
  --paper: #f5f7f2;
  --line: #e9ece5;
  --font-body: "DM Sans", sans-serif;
  --font-display: "Outfit", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: linear-gradient(135deg, #eef3eb 0%, #dce4dd 100%); background-attachment: fixed; color: var(--ink); font-family: var(--font-body); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
.sidebar { width: 236px; position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; padding: 29px 17px 14px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,0.4); box-shadow: 2px 0 20px rgba(0,0,0,0.02); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 7px; }
.brand-mark { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 13px; background: #eaf2e9; }
.brand-mark svg { width: 23px; fill: #55866a; stroke: #55866a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark svg path+path { fill: none; }
.brand-name { color: #23362a; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.7px; line-height: 1; }
.brand-name>span { color: #568365; }
.brand-name small { display: block; padding-top: 5px; color: #95a098; font: 600 8px var(--font-body); letter-spacing: 1.6px; }
.nav-label { margin: 44px 8px 11px; color: #9da69e; font-size: 9px; font-weight: 700; letter-spacing: 1.45px; }
.main-nav { display: grid; gap: 4px; }
.nav-link { min-height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 11px; border-radius: 8px; color: #707c73; font-size: 12px; font-weight: 600; transition: background .2s,color .2s; }
.nav-link:hover,.nav-link.active { background: #eff4ed; color: #3e7355; }
.nav-icon { width: 16px; text-align: center; color: #8c998e; font-size: 16px; }
.nav-link.active .nav-icon { color: #508262; }
.nav-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #e5a969; }
.nav-count { margin-left: auto; padding: 3px 7px; border-radius: 20px; background: #edf3e9; color: #5d8060; font-size: 10px; }
.nav-label-progress { margin-top: 32px; }
.sidebar-bottom { margin-top: auto; }
.season-card { position: relative; display: grid; grid-template-columns: 34px 1fr 7px; align-items: center; gap: 2px 8px; margin: 0 0 12px; padding: 13px 11px 11px; border: 1px solid #edf0e9; border-radius: 10px; background: #fbfcf9; }
.season-icon { grid-row: span 2; display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; background: #edf4e8; font-size: 17px; }
.season-card strong,.season-card span:not(.season-live) { display: block; }
.season-card>div:nth-child(2) strong { font-size: 11px; }
.season-card>div:nth-child(2) span { padding-top: 3px; color: #89938b; font-size: 10px; }
.season-live { width: 6px; height: 6px; border-radius: 50%; background: #73ad73; }
.season-track { grid-column: 1 / 4; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #e9eee5; }
.season-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #81a879; transition: width .35s ease; }
.season-card>small { grid-column: 1 / 4; padding-top: 3px; color: #929c94; font-size: 9px; }
.season-card>small b { color: #56665a; font-weight: 600; }
.profile-button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 3px 3px; border: 0; border-top: 1px solid #edf0e9; background: transparent; text-align: left; cursor: pointer; }
.avatar,.top-avatar { display: grid; place-items: center; border: 2px solid #e6eee1; border-radius: 50%; background: #d9e8d8; color: #466d50; font-weight: 700; }
.avatar { width: 32px; height: 32px; font-size: 12px; }
.profile-copy { display: grid; gap: 3px; }
.profile-copy strong { font-size: 10px; }
.profile-copy small { color: #929c94; font-size: 9px; }
.profile-menu { margin-left: auto; color: #8a958c; font-size: 18px; }
.main-content { min-height: 100vh; margin-left: 236px; }
.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid rgba(255,255,255,0.4); background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(20px); box-shadow: 0 2px 10px rgba(0,0,0,0.01); }
.breadcrumb { color: #9ba49c; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; }
.breadcrumb span { padding: 0 8px; color: #c7cec5; }
.breadcrumb strong { color: #526459; font-weight: 700; }
.topbar-right { display: flex; align-items: center; gap: 15px; }
.season-pill { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #e8eee4; border-radius: 20px; color: #647668; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.season-pill span { width: 6px; height: 6px; border-radius: 50%; background: #75a86c; }
.icon-button { position: relative; width: 31px; height: 31px; border: 0; border-radius: 50%; background: transparent; color: #68756c; font-size: 18px; cursor: pointer; }
.notification-button i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; background: #e19a69; }
.top-avatar { width: 29px; height: 29px; font-size: 11px; }
.mobile-menu { display: none; }
.page-wrap { max-width: 1330px; margin: 0 auto; padding: 31px 38px 19px; }
.welcome-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #859187; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.eyebrow-line { display: inline-block; width: 17px; height: 1px; background: #7a9b7c; }
.eyebrow-sun { margin-left: 8px; color: #e0a65f; font-size: 14px; }
h1,h2,h3,p { margin-top: 0; }
.welcome-row h1 { margin: 9px 0 6px; font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 32px); font-weight: 600; letter-spacing: -.9px; }
.welcome-row h1>span:first-child { color: #5b8565; }
.wave { display: inline-block; color: #daa565; font-size: 19px; transform: rotate(20deg); }
.welcome-subtitle { margin: 0; color: #89938b; font-size: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 7px; font-size: 10px; font-weight: 700; cursor: pointer; transition: transform .18s,background .18s; }
.button:hover { transform: translateY(-1px); }
.button-dark { min-width: 155px; height: 38px; padding: 0 13px; background: linear-gradient(135deg, #274a39 0%, #1e3a2c 100%); color: white; box-shadow: 0 4px 15px rgba(39, 74, 57, 0.25); border: 1px solid rgba(255,255,255,0.1); }
.button-dark:hover { background: linear-gradient(135deg, #355c47 0%, #274a39 100%); box-shadow: 0 6px 20px rgba(39, 74, 57, 0.35); }
.button-dark>span { color: #b2ceb0; font-size: 9px; }
.button-dark>b { margin-left: 4px; font-size: 15px; font-weight: 400; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(260px, .88fr); align-items: stretch; gap: 17px; }
.world-card,.mission-card,.resources-panel,.next-level-panel { overflow: hidden; border: 1px solid rgba(255,255,255,0.7); border-radius: 14px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(49, 73, 54, 0.05); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; }
.world-card:hover, .mission-card:hover, .resources-panel:hover, .next-level-panel:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(49, 73, 54, 0.08); }
.world-card-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 17px 19px 12px; }
.card-kicker,.mini-label { color: #829087; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; }
.card-kicker { display: flex; align-items: center; gap: 7px; }
.pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #78a776; box-shadow: 0 0 0 3px #edf4e9; }
.world-year { margin-left: 5px; padding: 4px 6px; border-radius: 3px; background: #f4f6f1; color: #839087; font-size: 7px; letter-spacing: .7px; }
.world-card-top h2 { margin: 8px 0 3px; font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
.verified { display: inline-grid; width: 14px; height: 14px; place-items: center; border-radius: 50%; background: #e7f1e5; color: #578660; font: 700 9px var(--font-body); vertical-align: 3px; }
.world-location { margin: 0; color: #929c94; font-size: 9px; }
.location-separator { padding: 0 4px; color: #c3c9c1; }
.more-button { width: 29px; height: 27px; border: 1px solid #edf0e9; border-radius: 6px; background: white; color: #849087; font-size: 18px; line-height: 1; }
.world-art { position: relative; height: 247px; margin: 0 11px; overflow: hidden; border: 1px solid #e7eadb; border-radius: 7px; background: linear-gradient(180deg,#e7efd9 0%,#e5efd9 44%,#d9e8cf 100%); }
.map-legend { position: absolute; z-index: 5; bottom: 10px; left: 12px; display: flex; gap: 12px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.7); border-radius: 5px; background: rgba(255,255,255,.74); color: #778378; font-size: 7px; font-weight: 600; }
.map-legend span { display: flex; align-items: center; gap: 4px; }.map-legend i { width: 6px; height: 6px; border-radius: 2px; }.legend-forest { background: #6f9b73; }.legend-water { background: #72b6bd; }.legend-town { background: #e7b57d; }
.field-companion { display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 9px; margin: 9px 11px 0; padding: 9px 10px; border: 1px solid #e8eee4; border-radius: 7px; background: linear-gradient(110deg,#f7faf4,#fffdf8); }
.companion-portraits { position: relative; width: 40px; height: 39px; }
.companion-portrait { position: absolute; display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #e6efe2; font-size: 18px; transition: transform .2s,box-shadow .2s; }
.companion-portrait.nara { top: 0; left: 0; z-index: 1; }.companion-portrait.rahmat { right: 0; bottom: 0; background: #f5ebdb; }
.companion-portrait.speaking { z-index: 2; transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 2px #a8c497; }
.companion-conversation { min-width: 0; }.companion-speaker { display: flex; align-items: baseline; gap: 4px; }.companion-speaker strong { color: #526653; font-size: 9px; }.companion-speaker span { color: #99a197; font-size: 7px; }
.companion-conversation p { margin: 3px 0 0; color: #768477; font-size: 8px; line-height: 1.45; }
.companion-talk { display: inline-flex; align-items: center; gap: 5px; padding: 7px 8px; border: 1px solid #e4ecdf; border-radius: 5px; background: #fff; color: #5b7a5d; font-size: 7px; font-weight: 700; white-space: nowrap; cursor: pointer; }.companion-talk:hover { background: #eff5eb; }.companion-talk span { font-size: 11px; }
.world-card-footer { min-height: 69px; display: flex; align-items: center; justify-content: space-around; gap: 8px; padding: 8px 12px; }
.world-stat { display: flex; align-items: center; gap: 8px; }
.stat-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; font-size: 14px; }.stat-icon.green { background: #eff5eb; color: #729470; }.stat-icon.blue { background: #edf5f4; color: #70a4a1; }.stat-icon.orange { background: #faf2e9; color: #c69362; }
.world-stat>span:nth-child(2) { display: grid; gap: 3px; }.world-stat small { color: #96a097; font-size: 7px; font-weight: 700; letter-spacing: .7px; }.world-stat strong { color: #394b3f; font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1; }.world-stat strong span { color: #9aa49c; font: 500 10px var(--font-body); }
.trend { align-self: end; padding-bottom: 1px; font-size: 7px; white-space: nowrap; }.positive { color: #76a17b; }.negative { color: #d49a71; }.stat-divider { height: 30px; border-left: 1px solid #edf0ea; }
.right-column { display: flex; flex-direction: column; gap: 11px; }
.mission-card { flex: 1; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 0; }.panel-heading>div { display: flex; align-items: center; gap: 9px; }.mission-index { color: #a2aaa3; font-size: 8px; font-weight: 700; letter-spacing: .8px; }.mission-status { padding: 4px 6px; border: 1px solid #ebefe7; border-radius: 3px; color: #718673; font-size: 7px; font-weight: 700; letter-spacing: .7px; }.mission-status-complete { border-color: #dce9d8; background: #f1f7ef; color: #56815c; }
.mission-illustration { position: relative; height: 86px; margin: 13px 14px 0; overflow: hidden; border-radius: 6px; background: linear-gradient(115deg,#e5eee1 0%,#e9f0e7 47%,#f5ebd9 100%); }.mission-circle { position: absolute; border: 1px solid rgba(101,143,102,.2); border-radius: 50%; }.circle-back { width: 109px; height: 109px; left: calc(50% - 55px); top: -11px; }.circle-mid { width: 73px; height: 73px; left: calc(50% - 37px); top: 7px; }.mission-drop { position: absolute; top: 21px; left: calc(50% - 15px); display: grid; width: 30px; height: 34px; place-items: center; clip-path: polygon(50% 0,100% 58%,87% 87%,50% 100%,13% 87%,0 58%); background: #75aaa0; color: white; font-size: 17px; }.mission-spark { position: absolute; top: 13px; left: calc(50% + 26px); color: #dcaf74; font-size: 13px; }.mission-cross { position: absolute; top: 42px; left: calc(50% - 41px); color: #85a27e; font-size: 12px; }.mission-illustration-label { position: absolute; right: 10px; bottom: 8px; color: #8a9b87; font-size: 6px; font-weight: 700; letter-spacing: 1px; }.mission-illustration-label span { margin-left: 5px; color: #aeaa91; }
.mission-content { padding: 13px 15px 14px; }.mission-tag { color: #719372; font-size: 7px; font-weight: 700; letter-spacing: .8px; }.mission-tag span { padding: 0 3px; color: #b8c0b7; }.mission-content h3 { margin: 6px 0 4px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.2px; }.mission-content>p { max-width: 300px; margin-bottom: 11px; color: #89948b; font-size: 9px; line-height: 1.5; }
.mission-objective { display: flex; align-items: center; gap: 7px; padding: 8px; border-radius: 5px; background: #f7f8f5; }.objective-check { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid #d8e7d4; border-radius: 50%; color: #77a274; font-size: 9px; }.mission-objective>span:nth-child(2) { display: grid; gap: 3px; }.mission-objective strong { color: #526257; font-size: 8px; }.mission-objective small { color: #9aa29b; font-size: 7px; }.objective-count { margin-left: auto; color: #80907f; font-size: 8px; font-weight: 700; }
.mission-progress { height: 3px; margin: 9px 0 11px; overflow: hidden; border-radius: 5px; background: #edf0eb; }.mission-progress span { display: block; width: 33%; height: 100%; border-radius: inherit; background: #8cac7c; transition: width .4s; }
.button-mission { width: 100%; height: 32px; justify-content: space-between; padding: 0 11px; background: #f0f5ed; color: #4e7756; font-size: 9px; }.button-mission:hover { background: #e7f0e3; }.button-mission span { font-size: 14px; }
.streak-card { min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid #f0ece1; border-radius: 8px; background: #fffdf8; }.streak-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #fbf1e5; font-size: 16px; }.streak-card>div:nth-child(2) { display: grid; gap: 3px; }.streak-card strong { color: #716044; font-size: 9px; }.streak-card>div:nth-child(2)>span { color: #a39a87; font-size: 7px; }.streak-days { display: flex; gap: 3px; margin-left: auto; }.streak-days i { width: 5px; height: 5px; border-radius: 50%; background: #e9e5d9; }.streak-days i:nth-child(-n+2) { background: #ddae6b; }.streak-days i.today { width: 7px; height: 7px; margin-top: -1px; background: #88a46e; box-shadow: 0 0 0 2px #ebf0e4; }
.lower-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(260px, .88fr); gap: 17px; margin-top: 17px; }.resources-panel { padding: 15px 16px; }.section-heading { display: flex; justify-content: space-between; align-items: end; }.section-heading h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; }.text-link { color: #7b907e; font-size: 8px; }.text-link span { padding-left: 3px; font-size: 11px; }
.resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 12px; }.resource-card { min-width: 0; min-height: 108px; padding: 10px; border: 1px solid #eef0eb; border-radius: 6px; background: #fff; }.resource-top { display: flex; justify-content: space-between; align-items: center; gap: 5px; }.resource-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; font-size: 13px; }.xp-icon { background: #f3f1fc; color: #9381c2; }.coin-icon { background: #fbf2e3; color: #c89e53; }.badge-icon { background: #eaf3e8; color: #67916b; }.resource-change,.badge-count { color: #829a7e; font-size: 7px; font-weight: 600; }.coin-change { color: #af9668; font-size: 6px; letter-spacing: .5px; }
.resource-card>strong { display: block; margin-top: 7px; color: #374a3e; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1; }.resource-card>strong small { color: #c49a4d; font-size: 12px; }.resource-name { display: block; margin-top: 5px; color: #9aa29b; font-size: 7px; font-weight: 700; letter-spacing: .7px; }.xp-track { height: 3px; margin-top: 9px; overflow: hidden; border-radius: 4px; background: #f0eff6; }.xp-track span { display: block; width: 82%; height: 100%; background: #9b8bc1; }.resource-card>small { display: block; margin-top: 5px; color: #999f99; font-size: 7px; }.resource-action { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 13px; padding: 0; border: 0; background: transparent; color: #7d907b; font-size: 8px; cursor: pointer; }.resource-action span { font-size: 12px; }.badge-resource>strong { font-size: 14px; }
.next-level-panel { display: flex; min-height: 150px; }.next-level-image { position: relative; display: grid; width: 39%; flex: 0 0 39%; place-items: center; overflow: hidden; background: linear-gradient(150deg,#d8e9d3,#9fc39c 58%,#759b7c); }.next-level-image:before,.next-level-image:after { position: absolute; width: 150%; height: 72%; bottom: -33%; left: -20%; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; content: ""; transform: rotate(-27deg); }.next-level-image:after { bottom: -45%; left: -5%; }.next-level-glow { position: absolute; top: 17px; left: 27%; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,224,.39); filter: blur(11px); }.next-level-emoji { position: relative; z-index: 1; font-size: 39px; filter: drop-shadow(0 6px 8px #466b4a60); }.next-level-lock { position: absolute; z-index: 2; right: 7px; top: 7px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(255,255,255,.39); color: #55735a; font-size: 11px; }.next-level-image-label { position: absolute; bottom: 8px; color: rgba(255,255,255,.9); font-size: 5px; font-weight: 700; letter-spacing: .8px; }.next-level-info { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 14px 11px 10px; }.next-level-info .mini-label { font-size: 7px; }.next-level-info h3 { margin: 7px 0 4px; font-family: var(--font-display); font-size: 14px; font-weight: 600; }.next-level-info>p { margin-bottom: 8px; color: #919a92; font-size: 8px; line-height: 1.5; }.unlock-row { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: auto; padding-top: 7px; border-top: 1px solid #eef0eb; color: #849087; font-size: 7px; }.unlock-row>span i { margin-right: 3px; color: #9daa85; font-style: normal; }.unlock-row button { border: 0; background: none; color: #69886b; font-size: 13px; cursor: pointer; }
.page-footer { display: flex; justify-content: space-between; margin-top: 19px; color: #a2aaa3; font-size: 7px; font-weight: 600; letter-spacing: .9px; }.page-footer i { padding: 0 4px; color: #c4cbc1; font-style: normal; }.page-footer b { padding-left: 3px; color: #86a47d; }
.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(24,39,30,.48); opacity: 0; visibility: hidden; transition: opacity .22s,visibility .22s; backdrop-filter: blur(3px); }.modal-backdrop.open { opacity: 1; visibility: visible; }.game-modal { position: relative; width: min(100%,500px); max-height: 92vh; overflow: auto; padding: 29px; border: 1px solid #e8ede5; border-radius: 13px; background: #fff; box-shadow: 0 22px 70px #1a312355; transform: translateY(10px); transition: transform .22s; }.modal-backdrop.open .game-modal { transform: translateY(0); }.modal-close { position: absolute; top: 15px; right: 17px; width: 28px; height: 28px; border: 1px solid #ebeee8; border-radius: 50%; background: #fff; color: #738076; font-size: 19px; line-height: 1; cursor: pointer; }.modal-topline { display: flex; align-items: center; gap: 8px; color: #779071; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }.modal-topline>span:nth-child(2) { color: #bdc6bb; }.game-modal h2 { margin: 11px 0 5px; font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -.5px; }.modal-description { margin-bottom: 17px; color: #849087; font-size: 10px; line-height: 1.6; }.event-card { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #edf0e8; border-radius: 7px; background: #fafbf8; }.event-icon { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #edf4ee; font-size: 17px; }.event-card>div { display: grid; gap: 4px; }.event-card .mini-label { font-size: 7px; }.event-card strong { color: #43584a; font-size: 10px; }.event-card p { margin: 0; color: #929b93; font-size: 8px; }.choice-label { margin: 17px 0 8px; color: #879188; font-size: 8px; font-weight: 700; letter-spacing: 1px; }.choice-list { display: grid; gap: 7px; }.choice-button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid #ebeee8; border-radius: 7px; background: #fff; text-align: left; cursor: pointer; transition: border-color .18s,background .18s,transform .18s; }.choice-button:hover { transform: translateX(2px); border-color: #bed1b9; background: #f8fbf6; }.choice-number { color: #a1ac9e; font: 600 9px var(--font-display); }.choice-button>span:nth-child(2) { display: grid; gap: 4px; }.choice-button strong { color: #415348; font-size: 9px; }.choice-button small { color: #929c94; font-size: 8px; line-height: 1.4; }.choice-arrow { margin-left: auto; color: #8aa287; font-size: 15px; }.modal-footnote { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; color: #a5ada5; font-size: 6px; font-weight: 700; letter-spacing: .8px; }.modal-footnote span { color: #b6c4a3; }
.toast { position: fixed; z-index: 70; right: 23px; bottom: 23px; max-width: calc(100vw - 40px); padding: 12px 16px; border: 1px solid #dce9d9; border-radius: 8px; background: #fff; color: #49684d; font-size: 10px; font-weight: 600; box-shadow: 0 8px 28px #304b321c; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s,transform .2s; }.toast.show { opacity: 1; transform: translateY(0); }
.auth-screen { position: fixed; z-index: 100; inset: 0; display: grid; grid-template-columns: minmax(270px,.95fr) minmax(450px,1.05fr); min-height: 100vh; overflow: auto; background: #f2f5ef; transition: opacity .35s,visibility .35s; }
.auth-screen-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.auth-landscape { position: relative; min-height: 650px; overflow: hidden; background: linear-gradient(180deg,#bddbd2 0%,#e5ecd9 48%,#aec696 100%); }
.auth-landscape:before { position: absolute; top: 11%; left: 14%; width: 80%; height: 66%; border: 1px solid #fff6; border-radius: 50%; content: ""; transform: rotate(-27deg); }
.auth-landscape:after { position: absolute; top: 18%; left: 23%; width: 63%; height: 56%; border: 1px solid #fff7; border-radius: 50%; content: ""; transform: rotate(-27deg); }
.auth-ridge { position: absolute; right: -14%; bottom: 32%; left: -12%; height: 42%; border-radius: 50% 50% 0 0; }
.ridge-back { bottom: 34%; left: -20%; background: linear-gradient(165deg,#91b69a,#6a967d); clip-path: polygon(0 72%,11% 53%,20% 61%,32% 25%,42% 47%,58% 12%,70% 37%,82% 19%,100% 56%,100% 100%,0 100%); }
.ridge-front { height: 36%; bottom: 22%; background: linear-gradient(170deg,#789c79,#47775e); clip-path: polygon(0 60%,13% 27%,26% 52%,39% 11%,51% 40%,64% 19%,79% 50%,90% 25%,100% 39%,100% 100%,0 100%); }
.auth-lake { position: absolute; z-index: 1; right: 9%; bottom: -14%; left: -9%; height: 47%; border-radius: 50% 52% 0 0; background: linear-gradient(165deg,#98caca,#64a9ae 60%,#488f9a); box-shadow: inset 0 15px 30px #e7f6da4a; transform: rotate(-7deg); }
.auth-lake:after { position: absolute; top: 27%; left: 31%; width: 30%; height: 2px; border-radius: 50%; background: #d8f0dc; box-shadow: 0 10px 0 #d8f0dc75,0 21px 0 #d8f0dc69; content: ""; }
.auth-tree { position: absolute; z-index: 3; color: #345f4b; font-size: 39px; text-shadow: 0 6px 12px #264e3840; }.tree-one { bottom: 26%; left: 10%; }.tree-two { bottom: 30%; left: 22%; font-size: 28px; }.tree-three { right: 10%; bottom: 29%; font-size: 45px; }.auth-stars { position: absolute; z-index: 3; top: 22%; right: 21%; color: #fff8d9; font-size: 22px; }.auth-credit { position: absolute; right: 24px; bottom: 19px; left: 24px; display: flex; justify-content: space-between; color: #fff; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 5px #264c4166; }.auth-credit span { text-align: right; }
.auth-panel { align-self: center; width: min(100%,560px); justify-self: center; padding: 54px clamp(30px,7vw,92px); }.auth-brand { margin-bottom: 50px; padding: 0; }.auth-season { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #e0e8dc; border-radius: 30px; background: #f9fbf7; color: #657b67; font-size: 8px; font-weight: 700; letter-spacing: .8px; }.auth-season>span,.scenario-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #80a87a; box-shadow: 0 0 0 3px #e7f0e2; }.auth-eyebrow { margin-top: 24px; color: #78917b; font-size: 8px; font-weight: 700; letter-spacing: 1.25px; }.auth-panel h1 { margin: 12px 0 11px; color: #263d30; font-family: var(--font-display); font-size: clamp(34px,4.5vw,51px); font-weight: 600; letter-spacing: -2px; line-height: 1.06; }.auth-panel h1 span { color: #618768; }.auth-description { max-width: 385px; margin-bottom: 24px; color: #78867b; font-size: 12px; line-height: 1.8; }.auth-location { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e6ebe2; border-radius: 8px; background: #f9faf7; }.auth-location>span:first-child { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; background: #eaf1e6; color: #658765; font-size: 18px; }.auth-location>div { display: grid; gap: 4px; }.auth-location strong { color: #455b49; font-size: 8px; letter-spacing: .8px; }.auth-location small { color: #909b90; font-size: 9px; }.auth-location-live { margin-left: auto; color: #77916d; font-size: 7px; font-weight: 700; white-space: nowrap; }.auth-benefits { display: flex; flex-wrap: wrap; gap: 12px; margin: 19px 0; color: #8c998d; font-size: 7px; }.auth-benefits b { margin-left: 4px; color: #68796b; font-size: 7px; letter-spacing: .5px; }.google-button { width: min(100%,340px); min-height: 42px; }.google-button iframe { max-width: 100%; }.google-setup-note { display: block; padding: 13px 12px; border: 1px solid #e3e9df; border-radius: 7px; background: #f9fbf8; color: #7c897d; font-size: 10px; line-height: 1.5; }.auth-status { min-height: 16px; margin: 7px 0 0; color: #849187; font-size: 9px; line-height: 1.5; }.auth-status.error { color: #ac694b; }.auth-privacy { margin-top: 18px; color: #a0aaa0; font-size: 7px; font-weight: 600; letter-spacing: .6px; }.auth-privacy span { padding: 0 4px; color: #bec7bb; }
.admin-entry-link { display: inline-flex; gap: 6px; margin-top: 8px; color: #5d795f; font-size: 9px; font-weight: 700; }.admin-entry-link span { font-size: 12px; }
.account-button { display: grid; width: 31px; height: 31px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }.account-button .avatar-fallback { width: 29px; height: 29px; }.avatar-fallback { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 2px solid #e6eee1; border-radius: 50%; background: #d9e8d8; color: #466d50; font-size: 11px; font-weight: 700; }.user-avatar[hidden],.avatar-fallback[hidden] { display: none !important; }.profile-button .user-avatar { width: 32px; height: 32px; object-fit: cover; }.account-button .user-avatar { width: 29px; height: 29px; object-fit: cover; }
.evaluation-withdraw { width: 100%; margin-top: 7px; padding: 7px; border: 1px solid #eceee8; border-radius: 5px; background: #fff; color: #798579; font-size: 8px; cursor: pointer; }.evaluation-withdraw:hover { border-color: #d8e5d4; color: #507451; }
.world-art { height: 295px; margin: 0 11px; border: 1px solid #e5eae0; border-radius: 7px; background: #dfe9dd; isolation: isolate; }.world-art .leaflet-container { width: 100%; height: 100%; background: #dbe8dc; font-family: var(--font-body); z-index: 1; }.world-art .leaflet-control-attribution { font-size: 7px; }.world-art .leaflet-control-zoom a { color: #456d52; }.map-loading { position: absolute; z-index: 800; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(145deg,#d9e9da,#edf0dc); color: #59785d; font-size: 8px; font-weight: 700; letter-spacing: 1px; transition: opacity .35s,visibility .35s; }.map-loading>span { font-size: 17px; }.map-loading-hidden { visibility: hidden; opacity: 0; pointer-events: none; }.map-overlay-title { position: absolute; z-index: 700; top: 11px; left: 11px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #fff9; border-radius: 6px; background: #fffffff0; box-shadow: 0 2px 8px #3147321c; pointer-events: none; }.map-overlay-title>span { color: #558867; font-size: 17px; }.map-overlay-title>div { display: grid; gap: 3px; }.map-overlay-title strong { color: #405b48; font-size: 8px; letter-spacing: .6px; }.map-overlay-title small { color: #89968a; font-size: 6px; letter-spacing: .6px; }.map-live-chip { position: absolute; z-index: 700; top: 12px; right: 12px; padding: 7px 8px; border: 1px solid #fff9; border-radius: 20px; background: #fffffff0; color: #69816a; font-size: 7px; font-weight: 700; letter-spacing: .5px; }.map-live-chip>span { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #d8a05e; }.map-layer-toggle { position: absolute; z-index: 700; top: 55px; right: 12px; padding: 7px 9px; border: 1px solid #fff9; border-radius: 5px; background: #fffffff0; color: #71916d; font-size: 10px; cursor: pointer; }.map-layer-toggle span { padding-left: 3px; font-size: 7px; font-weight: 700; }.map-layer-toggle.layer-off { color: #a0a79d; }.world-art .map-legend { z-index: 700; bottom: 9px; left: 10px; gap: 9px; background: #ffffffed; font-size: 6px; pointer-events: none; }.guardian-marker-wrap { border: 0; background: transparent; }.guardian-marker { display: grid; width: 29px; height: 29px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #548364; color: white; font: 700 12px var(--font-body); box-shadow: 0 3px 9px #26483166; }.guardian-marker.water-marker { background: #579eaa; }.guardian-marker.town-marker { background: #d19556; }.guardian-marker.nature-marker { background: #608a60; }.guardian-marker.mission-marker { background: #bc755f; animation: marker-pulse 2s infinite; }.map-popup { min-width: 180px; padding: 2px; font-family: var(--font-body); }.map-popup>span { display: block; margin-bottom: 5px; color: #759172; font-size: 7px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }.map-popup strong { color: #384f41; font-size: 12px; }.map-popup p { margin: 5px 0 8px; color: #829087; font-size: 9px; line-height: 1.5; }.map-popup-action { padding: 6px 8px; border: 0; border-radius: 4px; background: #edf4e9; color: #517755; font-size: 8px; font-weight: 700; cursor: pointer; }.leaflet-popup-content-wrapper { border-radius: 8px !important; }.leaflet-popup-content { margin: 10px 12px !important; }
.scenario-panel { display: grid; grid-template-columns: minmax(0,1fr) 265px; gap: 18px; margin-top: 16px; padding: 16px; border: 1px solid rgba(255,255,255,0.7); border-radius: 14px; background: linear-gradient(115deg,rgba(255,253,250,0.8),rgba(255,255,255,0.8) 80%); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(88, 69, 42, 0.06); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }.scenario-panel:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(88, 69, 42, 0.09); }.scenario-kicker { display: flex; align-items: center; gap: 8px; color: #9d8258; font-size: 7px; font-weight: 700; letter-spacing: 1px; }.scenario-kicker>span:nth-child(2) { margin-left: 4px; color: #a9a291; }.scenario-live-dot { width: 5px; height: 5px; background: #d99c5f; box-shadow: 0 0 0 3px #f7efe3; }.scenario-heading { display: flex; align-items: center; gap: 11px; margin: 13px 0 11px; }.scenario-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid #f2e8d9; border-radius: 10px; background: linear-gradient(145deg,#fbf3e8,#f6e9d7); font-size: 22px; }.scenario-heading h2 { margin: 0 0 4px; color: #405245; font-family: var(--font-display); font-size: 17px; font-weight: 600; }.scenario-heading p { max-width: 490px; margin: 0; color: #89938b; font-size: 9px; line-height: 1.55; }.scenario-footnote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; padding-top: 9px; border-top: 1px solid #f0eee7; color: #9c9c8f; font-size: 6px; font-weight: 600; letter-spacing: .5px; }.scenario-footnote>span:first-child { color: #ad9470; }.scenario-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding-left: 16px; border-left: 1px solid #f0eee7; }.scenario-timer { display: flex; align-items: center; justify-content: space-between; }.scenario-timer span { color: #929c93; font-size: 7px; font-weight: 700; letter-spacing: .7px; }.scenario-timer strong { color: #b57854; font-family: var(--font-display); font-size: 18px; font-variant-numeric: tabular-nums; }.scenario-start { width: 100%; min-height: 34px; justify-content: space-between; padding: 0 11px; background: #334f3e; color: #fff; font-size: 9px; }.scenario-start:hover { background: #41634b; }.scenario-start span { color: #c8dbbc; font-size: 8px; }.scenario-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.scenario-choice { min-height: 53px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px; border: 1px solid #e9ece4; border-radius: 5px; background: #fff; text-align: left; cursor: pointer; transition: border .18s,background .18s,transform .18s; }.scenario-choice:hover { border-color: #91b08e; background: #f5f9f2; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }.scenario-choice>span { color: #a68e67; font: 700 7px var(--font-display); }.scenario-choice strong { color: #526452; font-size: 7px; }.scenario-choice small { color: #899389; font-size: 6px; line-height: 1.35; }.scenario-choices[hidden],.scenario-start[hidden] { display: none; }
@keyframes marker-pulse { 0%,100% { box-shadow: 0 3px 9px #26483166,0 0 0 0 #bc755f44; } 50% { box-shadow: 0 3px 9px #26483166,0 0 0 6px #bc755f00; } }
.map-view-toggle { position: absolute; z-index: 701; top: 88px; right: 12px; display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 9px; border: 1px solid #fff9; border-radius: 6px; background: #fffffff0; color: #4d7659; box-shadow: 0 2px 8px #3147321c; font-size: 8px; font-weight: 700; cursor: pointer; }
.map-view-toggle:hover,.map-view-toggle[aria-pressed="true"] { border-color: #b7ceaa; background: #edf5e8; color: #365c42; }
.map-view-toggle>span:first-child { font-size: 14px; }
.world-art.map-3d-mode .leaflet-control-container,.world-art.map-3d-mode>.map-overlay-title,.world-art.map-3d-mode>.map-live-chip,.world-art.map-3d-mode>.map-guardian-label,.world-art.map-3d-mode>.map-mission-focus,.world-art.map-3d-mode>.map-legend,.world-art.map-3d-mode>.map-layer-toggle { visibility: hidden; }
.map-3d-layer { position: absolute; z-index: 600; inset: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(ellipse at 48% 42%,#d9e6d2 0%,#b7cbb6 52%,#829e91 100%); }
.map-3d-layer[hidden] { display: none; }
.map-3d-layer.webgl-unavailable .impact-webgl,.map-3d-layer.webgl-unavailable .impact-3d-controls { display: none; }
.map-3d-heading { position: absolute; z-index: 5; top: 11px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #ffffffb8; border-radius: 7px; background: #f8fff0dc; box-shadow: 0 3px 12px #274a3920; pointer-events: none; }
.map-3d-heading>span { color: #c58a4c; font-size: 17px; }
.map-3d-heading>div { display: grid; gap: 3px; }
.map-3d-heading strong { color: #405b48; font-size: 8px; letter-spacing: .65px; }
.map-3d-heading small { color: #798b7b; font-size: 6px; letter-spacing: .45px; }
.map-3d-location { position: absolute; z-index: 5; bottom: 52px; left: 12px; display: grid; gap: 4px; width: min(47%,360px); padding: 8px 10px; border: 1px solid #ffffffc4; border-radius: 7px; background: #f9fff0e8; box-shadow: 0 3px 12px #274a3920; pointer-events: none; }
.map-3d-location strong { color: #45604a; font-size: 8px; letter-spacing: .3px; }
.map-3d-location span { color: #718174; font-size: 7px; line-height: 1.45; }
.map-3d-open-mission { position: absolute; z-index: 6; right: 12px; bottom: 52px; min-height: 34px; max-width: 43%; padding: 0 11px; border: 1px solid #35573e; border-radius: 7px; background: #365c42; color: white; box-shadow: 0 4px 12px #284c3766; font-size: 8px; font-weight: 700; cursor: pointer; }
.map-3d-open-mission:hover { background: #47734f; }
.map-3d-open-mission[hidden] { display: none; }
.map-3d-rail { position: absolute; z-index: 6; right: 12px; bottom: 10px; left: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.map-3d-rail button { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid #ffffffc9; border-radius: 50%; background: #f8fff0dc; color: #647764; box-shadow: 0 2px 7px #274a3933; font-size: 7px; font-weight: 800; cursor: pointer; pointer-events: auto; transition: transform .2s,background .2s,border-color .2s; }
.map-3d-rail button:hover { transform: translateY(-3px); }
.map-3d-rail button.active { border-color: #fff; background: #b6744f; color: white; box-shadow: 0 0 0 3px #dfa46866,0 3px 8px #533b2c55; }
.map-3d-rail button.completed { background: #557d5c; color: white; }
.map-3d-hint { position: absolute; z-index: 5; top: 54px; left: 12px; padding: 5px 7px; border-radius: 5px; background: #f8fff0c9; color: #536c59; font-size: 6px; font-weight: 700; letter-spacing: .4px; pointer-events: none; }
@media (max-width: 640px) {
  .map-view-toggle { top: 79px; right: 8px; min-height: 28px; padding: 5px 7px; font-size: 7px; }
  .map-3d-heading { top: 8px; left: 8px; gap: 5px; padding: 6px; }
  .map-3d-heading>span { font-size: 13px; }
  .map-3d-heading strong { font-size: 6px; }
  .map-3d-heading small { font-size: 5px; }
  .map-3d-location { bottom: 50px; left: 8px; width: 52%; padding: 6px 7px; }
  .map-3d-location strong { font-size: 6px; }
  .map-3d-location span { font-size: 6px; }
  .map-3d-open-mission { right: 8px; bottom: 50px; max-width: 40%; min-height: 31px; padding: 0 7px; font-size: 6px; }
  .map-3d-rail { right: 6px; bottom: 9px; left: 6px; gap: clamp(3px,1.7vw,7px); }
  .map-3d-rail button { width: 26px; height: 26px; font-size: 6px; }
  .map-3d-hint { top: 46px; left: 8px; font-size: 5px; }
  .map-3d-layer .impact-3d-controls { top: 7px; right: 7px; gap: 3px; padding: 3px; }
  .map-3d-layer .impact-3d-controls button { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-3d-rail button { transition: none; }
  .map-3d-rail button:hover { transform: none; }
}
@media (max-width: 840px) { .auth-screen { grid-template-columns: minmax(210px,.75fr) minmax(420px,1.25fr); }.auth-landscape { min-height: 600px; }.auth-panel { padding: 40px 36px; }.auth-brand { margin-bottom: 35px; }.world-art { height: 267px; }.scenario-panel { grid-template-columns: minmax(0,1fr) 230px; gap: 12px; padding: 13px; }.scenario-actions { padding-left: 12px; } }
@media (max-width: 640px) { .auth-screen { grid-template-columns: 1fr; align-content: start; }.auth-landscape { position: absolute; inset: 0; min-height: 100%; opacity: .14; }.auth-credit { display: none; }.auth-panel { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 32px 25px 35px; }.auth-brand { margin-bottom: 43px; }.auth-panel h1 { font-size: 42px; }.auth-location-live { font-size: 6px; }.auth-benefits { gap: 9px; }.auth-benefits b { font-size: 6px; }.auth-privacy { font-size: 6px; }.world-art { height: 255px; margin-right: 8px; margin-left: 8px; }.map-overlay-title { top: 8px; left: 8px; padding: 6px; }.map-overlay-title strong { font-size: 7px; }.map-overlay-title small { font-size: 5px; }.map-live-chip { top: 8px; right: 8px; font-size: 6px; }.map-layer-toggle { top: 47px; right: 8px; }.world-art .map-legend { left: 6px; bottom: 8px; gap: 5px; padding: 5px; font-size: 5px; }.world-art .map-legend span { gap: 3px; }.scenario-panel { grid-template-columns: 1fr; gap: 10px; padding: 12px; }.scenario-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 9px 0 0; border-top: 1px solid #f0eee7; border-left: 0; }.scenario-timer { gap: 8px; }.scenario-timer span { font-size: 6px; }.scenario-timer strong { font-size: 16px; }.scenario-start { width: auto; min-width: 145px; padding: 0 9px; font-size: 8px; }.scenario-choices { grid-column: 1 / 3; }.scenario-footnote { font-size: 5px; } }
@media (max-width: 380px) { .auth-panel { padding-right: 19px; padding-left: 19px; }.auth-panel h1 { font-size: 37px; }.auth-description { font-size: 11px; }.auth-location small { font-size: 8px; }.auth-location-live { font-size: 5px; }.scenario-start { min-width: 130px; }.scenario-heading h2 { font-size: 15px; } }
@media (min-width: 1500px) { .page-wrap { padding-top: 38px; }.world-art { height: 275px; }.mission-illustration { height: 98px; }.mission-content { padding-top: 16px; }.resource-card { min-height: 117px; } }
@media (max-width: 1100px) { .sidebar { width: 205px; padding-right: 13px; padding-left: 13px; }.main-content { margin-left: 205px; }.topbar { padding-right: 25px; padding-left: 25px; }.page-wrap { padding-right: 25px; padding-left: 25px; }.hero-grid,.lower-grid { grid-template-columns: minmax(0,1.45fr) minmax(245px,.9fr); gap: 12px; }.world-art { height: 225px; }.world-card-footer { gap: 5px; padding-right: 7px; padding-left: 7px; }.world-stat { gap: 5px; }.trend { font-size: 6px; }.resource-card { padding: 8px; } }
@media (max-width: 840px) { .sidebar { width: 225px; box-shadow: 10px 0 25px #25382b0e; transform: translateX(-105%); transition: transform .22s; }.sidebar.open { transform: translateX(0); }.main-content { margin-left: 0; }.topbar { height: 55px; padding: 0 20px; }.mobile-menu { display: block; width: 30px; height: 30px; border: 0; background: none; color: #506456; font-size: 17px; cursor: pointer; }.breadcrumb { margin-right: auto; margin-left: 10px; }.page-wrap { max-width: 760px; padding: 27px 20px 18px; }.hero-grid,.lower-grid { grid-template-columns: minmax(0,1.35fr) minmax(235px,.9fr); gap: 11px; }.world-art { height: 220px; }.world-card-footer { gap: 5px; }.stat-icon { width: 23px; height: 23px; }.world-stat strong { font-size: 14px; }.trend { display: none; }.resource-grid { gap: 6px; }.resource-card { padding: 8px 7px; }.coin-change { font-size: 5px; } }
@media (max-width: 640px) { .topbar { padding: 0 14px; }.season-pill { padding: 5px 7px; font-size: 7px; }.topbar-right { gap: 8px; }.page-wrap { padding: 22px 14px 15px; }.welcome-row { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 17px; }.welcome-row h1 { font-size: 25px; }.welcome-subtitle { max-width: 330px; line-height: 1.55; }.button-dark { height: 35px; }.hero-grid,.lower-grid { grid-template-columns: 1fr; gap: 12px; }.world-art { height: 235px; }.world-card-footer { min-height: 66px; }.trend { display: inline; }.right-column { display: grid; grid-template-columns: 1fr; }.mission-illustration { height: 95px; }.mission-content>p { max-width: none; }.streak-card { min-height: 57px; }.resources-panel { padding: 14px 11px; }.section-heading h2 { font-size: 14px; }.text-link { font-size: 7px; }.resource-grid { gap: 6px; }.resource-card { min-height: 105px; padding: 8px 7px; }.resource-card>strong { font-size: 17px; }.resource-card>strong small { font-size: 10px; }.resource-change { font-size: 6px; }.coin-change { font-size: 5px; }.badge-resource>strong { font-size: 12px; }.resource-name { font-size: 6px; letter-spacing: .5px; }.next-level-panel { min-height: 143px; }.page-footer { gap: 8px; font-size: 6px; letter-spacing: .5px; }.game-modal { padding: 24px 19px 18px; }.game-modal h2 { font-size: 22px; } }
@media (max-width: 380px) { .top-avatar { display: none; }.world-card-footer { justify-content: space-between; }.world-stat { gap: 4px; }.world-stat small { font-size: 6px; }.stat-divider { height: 25px; }.resource-card { padding-right: 5px; padding-left: 5px; }.resource-top { gap: 2px; }.resource-change { font-size: 5px; } }
.campaign-panel,.extra-panel { padding: 17px; border: 1px solid rgba(255,255,255,0.7); border-radius: 14px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(49,73,54,.05); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.campaign-panel:hover, .extra-panel:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(49, 73, 54, 0.08); }
.learning-guide-panel { margin-top: 16px; padding: 17px; border: 1px solid rgba(255,255,255,0.7); border-radius: 14px; background: linear-gradient(145deg,rgba(255,255,255,0.85),rgba(249,251,247,0.85)); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(49,73,54,.05); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.learning-guide-panel:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(49, 73, 54, 0.08); }
.guide-reading-time { color: #819381; font-size: 7px; font-weight: 700; letter-spacing: .7px; }
.guide-intro { margin: 8px 0 12px; color: #7c897e; font-size: 10px; line-height: 1.6; }
.learning-guide-list { display: grid; gap: 7px; }
.guide-topic { border: 1px solid #e9eee6; border-radius: 7px; background: #fff; }
.guide-topic[open] { border-color: #dce8d7; background: #fcfdfb; }
.guide-topic summary { display: grid; grid-template-columns: 26px minmax(0,1fr) 18px; align-items: center; gap: 8px; padding: 10px 11px; color: #4e6252; list-style: none; cursor: pointer; }
.guide-topic summary::-webkit-details-marker { display: none; }
.guide-topic summary>span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; background: #eff5ec; color: #708a6d; font-size: 8px; font-weight: 700; }
.guide-topic summary strong { font-size: 10px; line-height: 1.4; }
.guide-topic summary i { color: #82947e; font-size: 15px; font-style: normal; text-align: center; }
.guide-topic[open] summary i { transform: rotate(45deg); }
.guide-topic>div { margin: 0 12px 11px 45px; }
.guide-topic>div p { margin: 0; color: #748176; font-size: 10px; line-height: 1.65; }
.guide-topic>div small { display: block; margin-top: 7px; color: #648064; font-size: 9px; font-weight: 600; line-height: 1.5; }
.guide-sources { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 12px; color: #788578; font-size: 8px; }
.guide-sources a { color: #4f7b56; text-decoration: underline; text-underline-offset: 2px; }
.system-pulse { display: grid; grid-template-columns: 185px minmax(0,1fr); align-items: center; gap: 12px; margin-top: 13px; padding: 11px 14px; border: 1px solid #e9ede6; border-radius: 8px; background: #fff; }.pulse-heading { display: flex; align-items: center; gap: 7px; color: #718272; font-size: 7px; font-weight: 700; letter-spacing: .65px; }.pulse-heading .pulse-dot { flex: 0 0 auto; }.pulse-heading small { display: none; color: #9aa49a; font-size: 6px; font-weight: 500; letter-spacing: 0; }.pulse-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.pulse-metric { display: flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid #edf0ea; }.pulse-metric>span { font-size: 12px; }.pulse-metric>small { color: #929c93; font-size: 6px; font-weight: 700; letter-spacing: .5px; }.pulse-metric>strong { margin-left: auto; color: #566b58; font: 700 14px var(--font-display); }.pulse-metric>i { color: #a0a89f; font-size: 6px; font-style: normal; white-space: nowrap; }
.campaign-mini-progress { width: 100%; height: 5px; overflow: hidden; border-radius: 5px; background: #e8eee5; }.campaign-mini-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7d9e6f,#82b19a); transition: width .35s; }
.route-node:disabled { pointer-events: none; }.secret-badge { border-style: dashed; }.secret-badge.earned { border-style: solid; }
.campaign-panel { margin-top: 16px; overflow: hidden; }
.campaign-counter,.journal-count { color: #7d927c; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.campaign-route { display: grid; grid-template-columns: repeat(8,minmax(102px,1fr)); gap: 7px; margin-top: 15px; overflow-x: auto; padding-bottom: 4px; }
.route-node { position: relative; min-width: 102px; min-height: 119px; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 9px; border: 1px solid #e8ede6; border-radius: 7px; background: #fbfcf9; text-align: left; cursor: pointer; transition: transform .18s,border-color .18s,background .18s; }
.route-node:not(:last-child):after { position: absolute; top: 22px; right: -8px; width: 8px; border-top: 1px dashed #d0dbca; content: ""; }
.route-node:not(:disabled):hover { transform: translateY(-2px); border-color: #aac2a4; }
.route-node.current { border-color: #a8c2a1; background: #f5f9f2; box-shadow: 0 0 0 2px #edf4e8; }
.route-node.completed { border-color: #dce9d8; background: #f8fbf5; }
.route-node.locked { background: #f8f9f6; cursor: not-allowed; opacity: .56; }
.route-number { position: absolute; top: 7px; right: 8px; color: #849880; font-size: 8px; font-weight: 700; }
.route-emoji { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; background: #edf3e8; font-size: 17px; }
.route-node strong { margin-top: 8px; color: #46594a; font-size: 8px; line-height: 1.35; }
.route-node small { margin-top: 4px; color: #8b968c; font-size: 7px; line-height: 1.4; }
.game-extra-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 16px; margin-top: 16px; }
.extra-panel { min-width: 0; }.extra-panel .section-heading { align-items: center; }
.badge-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 13px; }
.collection-badge { min-width: 0; min-height: 83px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 3px; border: 1px solid #ebefe8; border-radius: 7px; background: #fbfcf9; text-align: center; }
.collection-badge>span { font-size: 20px; filter: saturate(.25); opacity: .48; }.collection-badge>strong { color: #849087; font-size: 7px; line-height: 1.3; }.collection-badge>small { color: #a0aaa0; font-size: 6px; font-weight: 700; letter-spacing: .6px; }
.collection-badge.earned { border-color: #e0ebd9; background: linear-gradient(155deg,#f9fcf5,#eff6ec); }.collection-badge.earned>span { filter: none; opacity: 1; }.collection-badge.earned>strong { color: #597653; }.collection-badge.earned>small { color: #83a17c; }
.journal-list { display: grid; gap: 0; max-height: 242px; margin-top: 8px; overflow-y: auto; }.journal-entry { display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: start; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f0f2ed; }.journal-entry:last-child { border-bottom: 0; }.journal-marker { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: #f0f5ec; font-size: 13px; }.journal-entry strong { display: block; color: #566758; font-size: 8px; }.journal-entry p { margin: 3px 0; color: #7c897e; font-size: 8px; line-height: 1.4; }.journal-entry small { display: -webkit-box; overflow: hidden; color: #9aa49b; font-size: 7px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.journal-xp { color: #8c9e7c; font-size: 7px; font-weight: 700; white-space: nowrap; }.journal-empty { min-height: 94px; display: grid; place-content: center; justify-items: center; color: #8f9b90; text-align: center; }.journal-empty>span { font-size: 20px; }.journal-empty p { max-width: 220px; margin: 5px 0 0; font-size: 8px; line-height: 1.5; }
.final-report { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 13px; margin-top: 16px; padding: 17px; border: 1px solid #dfead8; border-radius: 10px; background: linear-gradient(110deg,#f2f7ec,#fff); }.final-report[hidden] { display: none; }.final-report-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #e5f0dd; font-size: 24px; }.final-report h2 { margin: 5px 0 3px; color: #3f5943; font-family: var(--font-display); font-size: 17px; }.final-report p { margin: 0; color: #7f8c80; font-size: 9px; line-height: 1.6; }.report-reflection { height: 34px; padding: 0 12px; background: #355741; color: #fff; font-size: 8px; }.report-reflection span { font-size: 13px; }
.xp-level { color: #9285b2; }.resource-change b { font-weight: 800; }
.game-modal { width: min(100%,610px); max-height: min(90vh,880px); padding: 28px; }.modal-scene:empty,.modal-interaction:empty { display: none; }
.learning-card,.impact-report,.welcome-briefing { display: flex; align-items: flex-start; gap: 10px; margin: 13px 0; padding: 11px; border: 1px solid #e7eee2; border-radius: 7px; background: #f8faf5; }.learning-card>span,.impact-report>span,.briefing-emblem { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #edf4e8; font-size: 16px; }.learning-card>div,.impact-report>div,.welcome-briefing>div:last-child { display: grid; gap: 4px; }.learning-card strong,.impact-report strong,.welcome-briefing strong { color: #526653; font-size: 8px; letter-spacing: .5px; }.learning-card p,.impact-report p,.welcome-briefing p { margin: 0; color: #849087; font-size: 8px; line-height: 1.55; }
.learning-check-progress { height: 6px; margin: 8px 0 4px; overflow: hidden; border-radius: 6px; background: #e8eee4; }.learning-check-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7d9e6f,#82b19a); transition: width .3s; }.learning-check-count { color: #8a978a; font-size: 8px; }
.learning-feedback { margin: 11px 0; padding: 12px; border: 1px solid #eedfca; border-radius: 7px; background: #fffaf2; }.learning-feedback.correct { border-color: #dceadd; background: #f5faf1; }.learning-feedback strong { color: #716044; font-size: 9px; }.learning-feedback.correct strong { color: #527354; }.learning-feedback p { margin: 5px 0 0; color: #798578; font-size: 9px; line-height: 1.55; }.learning-answer { min-height: 52px; }
.field-reading,.climate-card { position: relative; display: grid; gap: 8px; margin: 12px 0; padding: 13px; overflow: hidden; border: 1px solid #e6ede4; border-radius: 8px; background: linear-gradient(120deg,#f0f6ed,#f6f4e9); }.field-site,.field-reading>small,.climate-card>small { color: #80937f; font-size: 7px; font-weight: 700; letter-spacing: .6px; }.field-reading>strong { color: #405748; font-family: var(--font-display); font-size: 13px; }.sample-meter,.crisis-clock>div { height: 5px; overflow: hidden; border-radius: 8px; background: #e1e9dc; }.sample-meter i,.crisis-clock>div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#80ad7a,#76b5ac); transition: width .3s; }.budget-banner { display: grid; grid-template-columns: 34px auto minmax(50px,1fr); align-items: center; gap: 8px; margin: 12px 0; padding: 10px; border: 1px solid #f0e8d9; border-radius: 7px; background: #fcf9f3; }.budget-banner>span { font-size: 21px; }.budget-banner>div:nth-child(2) { display: grid; gap: 3px; }.budget-banner small { color: #a2957b; font-size: 6px; font-weight: 700; letter-spacing: .7px; }.budget-banner strong { color: #75633f; font: 700 15px var(--font-display); }.budget-banner strong i { color: #9e937d; font: 600 7px var(--font-body); }.budget-meter { height: 6px; overflow: hidden; border-radius: 6px; background: #efeade; }.budget-meter i { display: block; height: 100%; border-radius: inherit; background: #d6b26b; transition: width .3s; }
.crisis-clock { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; margin: 12px 0; padding: 11px; border: 1px solid #f0dfd6; border-radius: 7px; background: #fff8f3; }.crisis-clock>span { color: #9a765e; font-size: 7px; font-weight: 700; letter-spacing: .8px; }.crisis-clock>strong { color: #bc6f4c; font: 700 18px var(--font-display); font-variant-numeric: tabular-nums; }.crisis-clock>div { grid-column: 1 / 3; background: #f1e3da; }.crisis-clock>div i { background: #d78965; }.climate-card { grid-template-columns: 42px 1fr; align-items: center; }.climate-card>span { grid-row: span 3; font-size: 27px; }.climate-card>strong { color: #55664f; font-size: 8px; letter-spacing: .8px; }.climate-card p { margin: 0; color: #829087; font-size: 8px; line-height: 1.5; }.climate-card>small { grid-column: 2; }
.nexus-meters { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 12px 0; }.nexus-meters>div { display: grid; gap: 5px; padding: 8px 5px; border: 1px solid #e8ede5; border-radius: 6px; background: #f9fbf7; color: #738174; font-size: 7px; text-align: center; }.nexus-meters strong { color: #425846; font: 700 17px var(--font-display); }.allocation-total { display: flex; align-items: baseline; gap: 5px; margin: 13px 0 6px; color: #7d8f7e; }.allocation-total>span { margin-right: auto; font-size: 7px; font-weight: 700; letter-spacing: .8px; }.allocation-total>strong { color: #416447; font: 700 23px var(--font-display); }.allocation-total>small { font-size: 8px; }.allocation-sliders { display: grid; gap: 5px; }.allocation-row { display: grid; grid-template-columns: 25px minmax(110px,1fr) minmax(70px,1.1fr) 27px; align-items: center; gap: 7px; padding: 8px; border: 1px solid #edf0eb; border-radius: 6px; }.allocation-row>span:first-child { font-size: 16px; }.allocation-row>span:nth-child(2) { display: grid; gap: 3px; }.allocation-row strong { color: #4f6153; font-size: 8px; }.allocation-row small { color: #929c94; font-size: 7px; line-height: 1.3; }.allocation-row input { width: 100%; accent-color: #67936a; }.allocation-row output { color: #648168; font: 700 12px var(--font-display); text-align: right; }.allocation-feedback { min-height: 17px; margin: 8px 0; color: #ab7b55; font-size: 8px; }.allocation-feedback.allocation-valid { color: #608466; }.allocation-submit { width: 100%; height: 35px; }.allocation-submit:disabled { cursor: not-allowed; opacity: .48; }
.before-after { display: grid; grid-template-columns: 1fr auto 1fr 1fr 1fr; align-items: center; gap: 8px; margin: 13px 0; padding: 12px; border: 1px solid #e4ecde; border-radius: 7px; background: linear-gradient(120deg,#f5f8f0,#fff); color: #839283; font-size: 8px; text-align: center; }.before-after>span { display: grid; gap: 3px; }.before-after>span>strong { color: #638266; font: 700 20px var(--font-display); }.before-after>span>small { font-size: 6px; }.before-after>span>b { color: #566b57; font: 700 13px var(--font-display); }.before-after>i { color: #b0bea6; font-style: normal; }.welcome-briefing { align-items: center; margin: 15px 0; padding: 14px; }.briefing-emblem { width: 44px; height: 44px; font-size: 23px; }.welcome-briefing .mini-label { font-size: 7px; }.welcome-briefing strong { font-size: 10px; }.guardian-guide { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 10px 6px; border: 1px solid #edf0eb; border-radius: 6px; color: #66806b; font-size: 6px; font-weight: 700; letter-spacing: .2px; }.guardian-guide>span { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #edf4e9; color: #69876b; font-size: 7px; }.guardian-guide>i { color: #bac7b2; font-size: 9px; font-style: normal; }.simulation-note { margin: 9px 0 0; color: #a1a79e; font-size: 7px; line-height: 1.5; }.start-campaign { width: 100%; height: 39px; justify-content: space-between; padding: 0 12px; }
.impact-report { border-color: #dceadd; background: #f5faf1; }.final-learning-summary { margin-top: 5px !important; color: #5d795f !important; font-weight: 600; }.modal-footnote { letter-spacing: .55px; }.choice-button:focus-visible,.button:focus-visible,.route-node:focus-visible,.companion-talk:focus-visible { outline: 2px solid #729778; outline-offset: 2px; }
.consent-backdrop[hidden] { display: none; }.consent-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(22,38,28,.62); }.consent-dialog { width: min(100%,560px); max-height: 92vh; overflow-y: auto; padding: 26px; border: 1px solid #e7eee2; border-radius: 12px; background: #fff; box-shadow: 0 20px 70px #13271c55; }.consent-icon { display: block; margin-bottom: 12px; font-size: 25px; }.consent-dialog h2 { margin: 7px 0 12px; color: #314a38; font: 600 23px var(--font-display); }.consent-dialog>p { color: #748176; font-size: 10px; line-height: 1.65; }.consent-checkbox { display: flex; align-items: flex-start; gap: 9px; margin: 13px 0; padding: 11px; border: 1px solid #e5ece1; border-radius: 7px; background: #f8faf6; color: #5f7061; font-size: 9px; line-height: 1.6; }.consent-checkbox input { margin-top: 2px; accent-color: #568262; }.consent-reminder { padding: 9px; border-left: 3px solid #d4a060; background: #fffaf2; color: #886d49 !important; }.consent-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 15px; }.consent-actions>button:first-child { padding: 9px; border: 0; background: transparent; color: #778278; font-size: 9px; cursor: pointer; }.consent-actions .button { padding: 0 12px; }.consent-actions .button:disabled { cursor: not-allowed; opacity: .5; }.consent-status { min-height: 15px; margin: 8px 0 0 !important; color: #a6644e !important; font-size: 9px !important; }
.admin-page { min-height: 100vh; background: #f4f7f1; }.admin-shell { width: min(1160px,100%); margin: 0 auto; padding: 24px; }.admin-header,.admin-heading,.admin-panel-heading,.admin-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.admin-header { padding: 0 0 20px; border-bottom: 1px solid #e5ebe1; }.admin-header .brand-mark { font-size: 19px; }.admin-back-link { color: #5a795c; font-size: 10px; font-weight: 700; }.admin-login-card { width: min(100%,440px); margin: 55px auto; padding: 25px; border: 1px solid #e6ece2; border-radius: 11px; background: #fff; box-shadow: 0 5px 22px #3149320b; }.admin-login-card h1,.admin-heading h1 { margin: 7px 0; color: #314a38; font: 600 26px var(--font-display); }.admin-login-card>p,.admin-heading p { color: #7a887c; font-size: 10px; line-height: 1.6; }.admin-login-card form { display: grid; gap: 12px; margin-top: 17px; }.admin-login-card label { display: grid; gap: 5px; color: #617364; font-size: 9px; font-weight: 700; }.admin-login-card input { height: 38px; padding: 0 10px; border: 1px solid #e1e9de; border-radius: 6px; background: #fff; font: 10px var(--font-body); }.admin-login-card .button { height: 38px; }.admin-message { min-height: 14px; margin: 10px 0 0; color: #a05f47 !important; }.admin-setup-note { padding: 10px; border-radius: 6px; background: #fff8ed; color: #886c45 !important; }.admin-setup-note a { text-decoration: underline; }.admin-heading { align-items: flex-end; margin: 23px 0 14px; }.admin-heading p { margin: 0; }.admin-actions { flex-wrap: wrap; }.admin-actions .button { min-height: 33px; padding: 0 10px; font-size: 9px; }.admin-secondary { border: 1px solid #e2e9df; background: #fff; color: #5c725e; }.admin-notice,.admin-collection-notice { margin: 12px 0; padding: 12px 14px; border: 1px solid #f0e1c9; border-radius: 7px; background: #fffaf1; color: #7d6c4e; font-size: 9px; line-height: 1.65; }.admin-collection-notice { border-color: #e5e9d6; background: #fbf9ed; }.admin-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 13px 0; }.admin-metric,.admin-panel { padding: 14px; border: 1px solid #e7ece3; border-radius: 8px; background: #fff; }.admin-metric { display: grid; gap: 6px; }.admin-metric>span { color: #829083; font-size: 8px; font-weight: 700; }.admin-metric>strong { color: #3e5c43; font: 600 23px var(--font-display); }.admin-metric>small { color: #9aa49a; font-size: 8px; }.admin-panel { margin: 12px 0; }.admin-panel h2 { margin: 4px 0; color: #3e5442; font: 600 15px var(--font-display); }.admin-help { color: #8a958b; font-size: 9px; line-height: 1.5; }.admin-domains,.admin-missions { display: grid; gap: 10px; }.admin-domain-row,.admin-mission-row { display: grid; grid-template-columns: minmax(170px,1fr) minmax(100px,2fr) 42px; align-items: center; gap: 12px; }.admin-domain-row>div:first-child { display: grid; gap: 3px; }.admin-domain-row strong,.admin-mission-row strong { color: #566859; font-size: 9px; }.admin-domain-row span { color: #9aa49a; font-size: 8px; }.admin-domain-row>b,.admin-mission-row>span { color: #5e7d60; font-size: 9px; text-align: right; }.admin-domain-track { height: 6px; overflow: hidden; border-radius: 5px; background: #eaf0e6; }.admin-domain-track i { display: block; height: 100%; border-radius: inherit; background: #82a77b; }.admin-mission-row { grid-template-columns: minmax(170px,1fr) minmax(100px,3fr) 35px; }.admin-table-wrap { width: 100%; overflow-x: auto; }.admin-panel table { width: 100%; border-collapse: collapse; color: #69786c; font-size: 8px; text-align: left; }.admin-panel th,.admin-panel td { max-width: 380px; padding: 8px; border-bottom: 1px solid #edf0eb; vertical-align: top; }.admin-panel th { color: #7b897d; font-size: 7px; letter-spacing: .3px; }.admin-panel code { white-space: normal; overflow-wrap: anywhere; color: #6d796e; font: 8px/1.5 monospace; }.admin-empty,.admin-footer { color: #8a958a; font-size: 9px; line-height: 1.6; }.admin-footer { padding: 8px 0 24px; }
@media (max-width: 640px) { .field-companion { grid-template-columns: 36px minmax(0,1fr) auto; gap: 6px; margin-right: 8px; margin-left: 8px; padding: 8px 7px; }.companion-portraits { transform: scale(.88); transform-origin: left center; }.companion-talk { padding: 7px 6px; font-size: 6px; }.companion-conversation p { font-size: 7px; } }
@media (max-width: 1100px) { .campaign-route { grid-template-columns: repeat(8,102px); }.game-extra-grid { grid-template-columns: 1fr; }.system-pulse { grid-template-columns: 1fr; gap: 8px; }.pulse-heading small { display: inline; margin-left: auto; } }
@media (max-width: 840px) { .campaign-route { grid-template-columns: repeat(8,102px); }.game-modal { max-width: 590px; }.scenario-panel { grid-template-columns: minmax(0,1fr) 230px; } }
@media (max-width: 640px) { .campaign-panel,.extra-panel { padding: 13px 11px; }.campaign-route { grid-template-columns: repeat(8,100px); margin-right: -4px; }.route-node { min-height: 109px; }.game-extra-grid { gap: 12px; }.badge-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }.collection-badge { min-height: 76px; }.collection-badge>strong { font-size: 6px; }.game-modal { padding: 24px 17px 18px; }.game-modal h2 { font-size: 21px; }.allocation-row { grid-template-columns: 22px minmax(88px,1fr) minmax(58px,.8fr) 23px; gap: 5px; padding: 6px 5px; }.allocation-row small { font-size: 6px; }.nexus-meters { grid-template-columns: repeat(2,1fr); }.before-after { grid-template-columns: 1fr auto 1fr; }.before-after>span:nth-last-child(-n+2) { grid-column: span 1; }.guardian-guide { flex-wrap: wrap; justify-content: center; line-height: 1.5; }.final-report { grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 12px; }.final-report-icon { width: 36px; height: 36px; font-size: 19px; }.final-report h2 { font-size: 14px; }.report-reflection { grid-column: 1 / 3; width: 100%; }.scenario-panel { grid-template-columns: 1fr; }.scenario-actions { display: grid; grid-template-columns: 1fr auto; }.campaign-mini-progress { grid-column: 1 / 3; order: 3; }.scenario-start { min-width: 135px; }.system-pulse { padding: 10px 8px; }.pulse-heading { font-size: 6px; }.pulse-heading small { font-size: 5px; }.pulse-metrics { gap: 3px; }.pulse-metric { flex-wrap: wrap; justify-content: center; gap: 3px; padding-left: 4px; }.pulse-metric>small { font-size: 5px; }.pulse-metric>strong { margin-left: 2px; font-size: 12px; }.pulse-metric>i { font-size: 5px; } }
@media (max-width: 640px) { .learning-guide-panel { padding: 13px 11px; }.guide-topic summary { grid-template-columns: 24px minmax(0,1fr) 16px; gap: 6px; padding: 9px 8px; }.guide-topic summary strong { font-size: 9px; }.guide-topic>div { margin-left: 38px; }.guide-topic>div p { font-size: 9px; }.guide-topic>div small { font-size: 8px; }.guide-reading-time { max-width: 88px; font-size: 6px; text-align: right; }.guide-sources { line-height: 1.5; } }
@media (max-width: 640px) { .admin-shell { padding: 15px; }.admin-header { align-items: flex-start; }.admin-header .brand-name { font-size: 17px; }.admin-header .brand-name small { font-size: 6px; }.admin-heading { align-items: flex-start; flex-direction: column; }.admin-actions { justify-content: flex-start; }.admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }.admin-metric { padding: 10px; }.admin-metric>strong { font-size: 19px; }.admin-domain-row { grid-template-columns: minmax(0,1fr) 35px; gap: 7px; }.admin-domain-row>div:first-child { grid-column: 1 / 3; }.admin-domain-track { grid-column: 1; }.admin-domain-row>b { grid-column: 2; grid-row: 2; }.admin-mission-row { grid-template-columns: minmax(120px,1fr) 28px; gap: 7px; }.admin-mission-row .admin-domain-track { grid-column: 1; }.admin-mission-row>span { grid-column: 2; grid-row: 2; }.consent-dialog { padding: 20px 16px; }.consent-dialog h2 { font-size: 20px; }.consent-actions { align-items: stretch; flex-direction: column-reverse; }.consent-actions .button { width: 100%; height: 38px; } }