/* Illustrated field edition. Reuses the existing small-screen shell. */
:root{--canvas:#f4f3e9;--cream:#fffdf4;--green:#557a55;--green-dark:#3c5c3d;--ink:#324b39;--muted:#73806a;--line:#e2e4d3}
body{background:#e5ecdf}
.phone{background:#f4f3e9}
header{background:#faf9ee}
.topline{margin-bottom:9px}
.demo{font-size:9px;letter-spacing:.8px}
.resource{background:#f2f4e5}
.page-title h1{font-size:24px;letter-spacing:-.8px}
.map-wrap{margin:2px 12px 0;border:1px solid #ccdcca;border-radius:26px;min-height:0;background:#e3eddd;box-shadow:0 3px 0 #d9dfcd}
.map-world{aspect-ratio:1}
.world-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.illustrated-world .map-pin{min-width:44px;max-width:125px}
.illustrated-world .pin-top{font-size:10px;padding:5px 7px;border-width:1px;border-radius:10px;box-shadow:0 2px 4px #4e6b4930}
.illustrated-world .pin-dot{width:7px;height:7px;margin:3px}
.scene-wrap{border-radius:25px;scrollbar-width:thin}
.scene.illustrated-scene{min-width:0;aspect-ratio:8/9;position:relative;transition:none}
.field-art{position:absolute;inset:0;background-image:url('assets/fields.png');background-size:400% 200%;background-position:var(--field-x) var(--field-y);background-repeat:no-repeat}
.building-sprite{display:block;width:100%;aspect-ratio:292/293.333;background-image:url('assets/buildings.png');background-size:400% 300%;background-position:var(--sprite-x) var(--sprite-y);background-repeat:no-repeat;mix-blend-mode:multiply;pointer-events:none}
.plot-building{position:absolute;width:27%;transform:translate(-50%,-88%);pointer-events:none}
.building-pin{max-width:37%;z-index:2;min-width:44px}
.building-pin span{display:block;max-width:100%;white-space:normal;font-size:10px;line-height:1.3;padding:5px 7px;box-shadow:0 2px 4px #46623c25}
.building-pin small{display:block;font-size:8px;color:#6d7b60;margin-top:2px}
.build-slot{z-index:1;width:46px;height:46px;min-height:46px;font-size:23px;background:#fffdf4c4;border-color:#74925c;border-radius:14px;line-height:1}
.build-slot small{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:8px;line-height:1.3;white-space:nowrap;background:#fffdf4db;padding:2px 4px;border-radius:5px;margin-top:3px;color:#59694c}
.map-caption{top:10px;left:10px;padding:5px 8px;font-size:9px;background:#fffdf4df;z-index:3}
.map-controls{right:9px;top:9px;z-index:3}
.map-controls button{border-radius:13px;background:#fffdf3e8;min-height:44px}
.route-preview{position:absolute;left:24%;top:40%;width:54%;height:32%;border:9px solid #df9b4666;border-radius:35%;transform:rotate(-20deg);pointer-events:none}
.route-label{position:absolute;bottom:12px;left:12px;font-size:9px;border-radius:8px;background:#fff8e8e8;color:#855d2f;padding:5px 8px;pointer-events:none}
.map-footer{background:none;padding:14px 15px 25px;display:grid;gap:13px}
.map-footer>.note{margin:0}
.task-card{background:#fffdf4;border-radius:23px;padding:16px}
.task-card h3{font-size:16px}
.task-card .sub{font-size:12px}
.card{border-color:#e0e4d2;box-shadow:0 2px 0 #e0e3d1}
.field-metrics .section-head,.event-inbox .section-head{margin:0 0 13px}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.metric span{display:block;font-size:10px;color:#718168}
.metric b{display:block;font-size:21px;line-height:1.5;font-variant-numeric:tabular-nums}
.metric b small{font-size:9px;color:#96a088;margin-left:2px;font-weight:500}
.metric-bar{height:5px;background:#e7ebdd;border-radius:6px;overflow:hidden;margin-top:4px}
.metric-bar i{display:block;height:100%;background:#8cab74;border-radius:6px}
.metric.risk .metric-bar i{background:#cead7e}
.event-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;min-height:60px;text-align:left;border-top:1px solid #e9eada}
.event-row strong{font-size:13px;display:block;line-height:1.5}
.event-row small{font-size:10px;display:block;color:#7e856e;margin-top:3px}
.event-mark{display:grid;place-items:center;flex:0 0 38px;height:38px;background:#f4e8c8;border-radius:13px;color:#a58950;font-size:20px}
.quality-number{font-size:30px;color:#617e4d;text-align:right;line-height:1.2}
.quality-number small{display:block;font-size:10px;font-weight:400;color:#849175}
.quality-card .sub{margin-top:13px;font-size:12px}
.personal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.personal-grid small{display:block;color:#7b8771;font-size:11px}
.personal-grid b{display:block;font-size:21px;line-height:1.4}
.personal-card{background:#f7f0e1;border-color:#e7decb}
.personal-card .eyebrow{font-size:9px;color:#9b896a}
.event-body{font-size:15px;line-height:1.8;color:#48593e}
.event-choice{padding:17px;background:#fafbef}
.choice-cost{display:block;font-size:11px;font-weight:700;color:#687e58;margin-top:10px}
.choice-later{display:block;margin-top:12px;padding:10px;border-radius:12px;font-size:11px;line-height:1.7;color:#8d7049;background:#f5ebd6}
.choice-later strong{display:block;font-size:10px}
.choice-later small{font-size:10px;color:#8a7558}
.consequence{padding:13px 0;border-top:1px solid #e6e8d9}
.consequence p{font-size:13px;line-height:1.7;margin:8px 0 5px}
.consequence small{font-size:10px;color:#859070}
.event-history{border-top:1px solid #e7e9d9;padding:13px 0}
.event-history h3{font-size:14px;margin:5px 0}
.event-history p{font-size:12px;line-height:1.7;margin-bottom:5px}
.event-history small{font-size:10px;color:#879175}
.facility-art{background:#edf1e0;overflow:hidden;isolation:isolate}
.facility-art .building-sprite{width:100px}
.facility-hero{display:flex;align-items:center;gap:18px;background:#eff1e2;border-radius:22px;padding:10px 15px;isolation:isolate}
.facility-hero .building-sprite{width:115px;flex-shrink:0}
.facility-hero .sub{margin-top:8px;font-size:12px}
.grade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grade-option{min-height:72px;border:1px solid #dce3cd;border-radius:16px;background:#f7f8ed;text-align:left;padding:12px}
.grade-option b{display:block;font-size:12px}
.grade-option small{font-size:10px;display:block;color:#8a927b;margin-top:4px}
.grade-option.active{border:2px solid #7d9863;padding:11px;background:#e7efd9}
.grade-option.active small{color:#6d8059}
.grade-tradeoff{background:#f1ebd8;color:#837042;border-radius:13px;padding:12px;font-size:12px;line-height:1.7}
.budget-preview{padding:5px 13px 13px;border-radius:17px;background:#f5f7eb}
.negative{color:#b76c4c}
.sheet-content .stat-grid{margin-top:0;row-gap:8px}
.sheet-content .stat-grid b{font-size:15px;overflow-wrap:anywhere}
.sheet-content .stat-grid small{display:block;margin-top:4px;font-size:9px}
@media(max-width:360px){.map-pin .pin-top{font-size:9px}.page-title h1{font-size:22px}.metric-grid{column-gap:7px}.facility-hero{gap:10px;padding:8px 10px}.facility-hero .building-sprite{width:95px}.resource b{font-size:17px}.demo{display:none}.sheet-content .stat-grid b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.scene{transition:none}}

/* Bounded operation controls and sampled living field. */
.operation-panel{display:grid;gap:12px;background:#fffdf0}
.operation-panel>.section-head{margin:0}
.operation-panel>.ledger-line{padding:9px 0}
.operation-weather{font-size:12px;color:#7b8a68;background:#eff3e2;padding:10px 12px;border-radius:12px}
.op-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.op-stats>div{background:#eff3e4;border-radius:14px;padding:12px 10px}
.op-stats small{display:block;font-size:10px;color:#80916f}
.op-stats b{display:block;font-size:20px;margin-top:4px;font-variant-numeric:tabular-nums}
.ending-card{border-radius:19px;background:#e4ecd5;padding:18px;color:#547147}
.ending-card small{display:block;font-size:10px;margin-bottom:7px;color:#83986c}
.ending-card p{font-size:13px;line-height:1.7;margin-top:10px}
.hf-life{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hf-building{z-index:2}
.building-pin{z-index:3}
.hf-life-label{position:absolute;bottom:9px;left:9px;max-width:63%;font-size:9px;padding:4px 7px;border-radius:8px;background:#fffdf1dc;color:#697b59;z-index:4;pointer-events:none}
.hf-motion-toggle{position:absolute;right:8px;bottom:8px;z-index:4;min-height:44px;padding:6px 8px;font-size:10px;font-weight:700;border:1px solid #d6e0c9;border-radius:12px;background:#fffdf3e8;color:#647858}