/* Visual direction v2 — cinematic Aegean, gold light, illustrated characters. */
body{background:#101f2c;background-image:radial-gradient(ellipse at 10% 20%,#243f49 0,transparent 55%),radial-gradient(ellipse at 90% 0,#263c47 0,transparent 40%);color:#f2eedf}
.masthead{background:#101e2bd9;border-bottom:1px solid #ffffff13;height:83px}
.brand{font-size:30px}.brand-mark{color:#f5cc8a;text-shadow:0 0 20px #e4b65c50}.brand small{color:#a9bdc2}
.header-btn,.help-btn{border-color:#677c875e;background:#ffffff05}.header-btn:hover,.help-btn:hover{background:#ffffff12}
main{max-width:1740px;padding:28px 3% 0}.intro-line{margin-bottom:25px}.eyebrow{color:#d9bd83;letter-spacing:2.8px;font-size:9px}.live-dot{background:#e8c580;box-shadow:0 0 12px #e8c58066}
h1{font-size:clamp(30px,3.2vw,48px);letter-spacing:-1px;margin:11px 0 8px}.intro-line p{color:#acc0c5}.mission-meta span{color:#b5c6c7}.mission-meta strong{color:#f3e8d4}.mission-meta small{color:#92abb5}
.workspace{grid-template-columns:minmax(0,1.9fr) minmax(350px,1fr);gap:20px}
.world-panel{height:635px;border-radius:18px;border:1px solid #dce5db33;background:#133a4b;box-shadow:0 18px 65px #0005;isolation:isolate}
.world-art{overflow:hidden}.cinematic-scene{position:relative;width:100%;height:100%;overflow:hidden;background:#164959}.island-painting{width:100%;height:100%;display:block;object-fit:cover;object-position:49% 50%;user-select:none}
.cinematic-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#061e3545 0,transparent 23%,transparent 64%,#051c33b8 100%);pointer-events:none}
.scene-light{position:absolute;inset:0;background:radial-gradient(ellipse at 95% 4%,#ffe4a944,transparent 49%);mix-blend-mode:screen;pointer-events:none}
.scene-mist{position:absolute;inset:0;background:linear-gradient(120deg,transparent 10%,#fff6d313 30%,transparent 49%);animation:mist-travel 24s ease-in-out infinite alternate;pointer-events:none}
.scene-water-glint{position:absolute;inset:70% 0 0;background:radial-gradient(ellipse at 75% 80%,#b3ffff40,transparent 60%);mix-blend-mode:screen;animation:sea-light 6s ease-in-out infinite;pointer-events:none}
.scene-sparks i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffefb4;box-shadow:0 0 10px 2px #ffdc8666;animation:drifting-mote 9s var(--delay) ease-in-out infinite;pointer-events:none}
.world-water-gauge{position:absolute;right:20px;top:72px;z-index:2;width:105px;padding:10px 12px;border:1px solid #dfecdc3b;background:#0b2d3ccc;border-radius:9px;backdrop-filter:blur(10px);color:#f3f5e6}.world-water-gauge>span{font-size:7px;letter-spacing:1.4px;color:#b5d5d6}.world-water-gauge>div{height:4px;margin:8px 0;background:#ffffff22;border-radius:3px;overflow:hidden}.world-water-gauge i{display:block;height:100%;background:#7ee1d4}.world-water-gauge b{font-size:13px;font-weight:500}
.map-top{top:20px;left:20px;right:20px;color:#fff6dd;font-size:10px;text-shadow:0 2px 8px #052738}
.island-chip{background:#153947b8;border-color:#f0d9a455;color:#ffe4ac;padding:10px 14px;backdrop-filter:blur(10px);box-shadow:0 3px 15px #0002}
.map-location button{background:#122d40df;color:#fff2d6;border:1px solid #d8b77888;border-radius:11px;box-shadow:0 8px 22px #07233555;padding:10px 13px;backdrop-filter:blur(12px);gap:10px;position:relative;min-height:47px}
.map-location button::after{content:'';position:absolute;left:50%;bottom:-13px;height:12px;width:1px;background:#f2d39b;box-shadow:0 0 7px #ffdf9f}.map-location button:hover{background:#21475af5;border-color:#ffe7a8;box-shadow:0 8px 35px #ffc86530;transform:translateY(-4px)}
.map-location small{color:#c1d2d2}.map-location .pin{color:#f4d593}.map-location.visited button{border-color:#80cbb5}.map-location.visited .pin{color:#99e3c3}
.reservoir{left:25%;top:31%}.farm{left:10%;top:59%}.village{right:8%;top:47%}
.map-caption{bottom:43px;left:20px;right:20px;background:#102c3cdb;border:1px solid #d9e5ce33;color:#fff1d6;padding:17px 18px;border-radius:12px;box-shadow:0 7px 30px #061e2e33}.caption-mark{color:#f0cc8f}.map-caption strong{font-size:13px;font-weight:500}.map-caption div>span{color:#bdd1d0;font-size:10px}.map-legend{color:#c4d9d9;left:24px;right:24px;bottom:17px;font-size:9px}.compass{color:#f1dab0;bottom:135px;left:24px;text-shadow:0 2px 12px #0e3449}
.mission-panel{color:#243d3c;border-radius:18px;background:linear-gradient(145deg,#fffdf6,#f2f1e7);border:1px solid #fff4cf55;box-shadow:0 18px 50px #0002;padding:25px}.mission-panel h2{font-size:30px}.chapter-label{color:#997340;letter-spacing:1.8px}.story{color:#607368;font-size:12px}.stepper{margin-bottom:23px}
.role-tabs{gap:8px;margin:19px 0}.role-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:9px 4px 10px;border:1px solid #ccd7c1;border-radius:10px;background:#fbfaf2;min-height:91px;font-size:11px;color:#426553;overflow:hidden}.role-tab:hover{background:#f0eddd;transform:translateY(-2px)}.role-tab.seen{background:#e7efe1;border-color:#9bb795}.role-tab .role-dot{position:absolute;right:8px;top:8px;z-index:2;width:8px;height:8px;border:1px solid #ffffff;background:#e6cd93;box-shadow:0 1px 4px #0003}
.character-portrait{display:block;background-image:url('assets/characters-v2.png');background-repeat:no-repeat;background-size:300% auto;background-position-y:35%;flex-shrink:0}.portrait-engineer{background-position-x:0%}.portrait-farmer{background-position-x:50%}.portrait-mayor{background-position-x:100%}.role-tab .character-portrait{width:51px;height:51px;border-radius:50%;box-shadow:0 2px 8px #283c3626;border:2px solid #fff2ce}.role-name{font-weight:600}.role-job{font-size:8px;color:#778773;margin-top:-3px}
.clue-prompt{font-size:11px;background:#e9eddd;border:1px solid #d5dec5;padding:12px}.question-box{border-top-color:#d5decb}.question-box label{font-size:13px}.primary-btn{background:linear-gradient(135deg,#296d5d,#174d45);box-shadow:0 3px 9px #204f4520}.choice{background:#fffdf5}.choice.selected{background:#e9eddb}.result-emblem{background:#e9e7cc;color:#a47835}
.bottom-row{gap:14px}.resource-card{background:#192f3e;border:1px solid #5c788050;color:#f5eddc;box-shadow:0 8px 20px #0001}.resource-card div>span{color:#b1c5c5}.resource-card strong small,.resource-note{color:#9fb6b8}.resource-icon.water{background:#254957;color:#9adee0}.resource-icon.money{background:#4a4436;color:#ebce96}.resource-icon.nature{background:#354e44;color:#b9d390}.meter{background:#364e57}.meter i{background:#86d1be}.journal-card{background:linear-gradient(130deg,#344a44,#253e3d);border-color:#9eac7c55;color:#f2e1b4}.journal-card>span{color:#b8c9a4}.journal-card small{color:#b3c6b1}.journal-card:hover{background:#36534a}footer{color:#8aa3ad}footer button{color:#d7c797}
dialog{border-radius:20px;background:#faf6e9;border:1px solid #edd9ab;box-shadow:0 30px 120px #0009;padding:34px}dialog::backdrop{background:#041522b8;backdrop-filter:blur(9px)}.modal-close{z-index:5;background:#fffaf0c9;border-radius:50%;width:35px;height:35px;padding:0;top:13px;right:13px;line-height:30px}.character-intro{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:23px;margin:-34px -34px 25px;padding:28px 34px;background:linear-gradient(115deg,#18394b,#2c514e);border-bottom:1px solid #ddc17f66;color:#fff0d3}.character-intro .character-portrait{width:160px;height:185px;border-radius:14px;background-position-y:30%;border:1px solid #dcbf8066;box-shadow:0 8px 22px #031b3266}.character-intro .modal-eyebrow{color:#ddc492;font-size:9px}.character-intro .modal-title{font-size:30px}.character-intro .modal-copy{color:#c1d3d0;font-size:11px;margin-bottom:0}.evidence{background:#e8ecd9;border:1px solid #d6dfc2}
.mini-world{height:145px;margin:-5px -5px 15px;border:1px solid #c0d7c3}.mini-world .world-water-gauge{display:none}.mini-world .island-painting{object-position:center}.mini-world .cinematic-scene::after{background:none}.mini-world .scene-sparks{display:none}.mini-world .low-water{filter:saturate(.78)}.weather-rain{position:absolute;inset:0;background-image:repeating-linear-gradient(105deg,transparent 0,transparent 58px,#c2eaf136 59px,transparent 60px);background-size:95px 95px;animation:rainfall 1.2s linear infinite;pointer-events:none}.rainy .scene-light{background:#60899b25;mix-blend-mode:multiply}.low-water .world-water-gauge i{background:#edbc78}
@keyframes sea-light{50%{opacity:.3}}@keyframes mist-travel{to{transform:translateX(10%);opacity:.4}}@keyframes drifting-mote{0%,100%{opacity:0;transform:translate(0,12px)}40%{opacity:.8}80%{opacity:0;transform:translate(12px,-30px)}}@keyframes rainfall{to{background-position:-40px 95px}}
@media(min-width:1450px){.world-panel{height:680px}.workspace{grid-template-columns:minmax(0,2fr) minmax(390px,1fr)}.mission-panel{padding:28px}.story{font-size:13px}.role-tab .character-portrait{width:59px;height:59px}}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr);gap:16px}.world-panel{height:635px}.mission-panel{padding:21px}.island-painting{object-position:48% center}.map-location button{padding:8px 10px}.reservoir{left:21%;top:32%}.farm{left:5%;top:57%}.village{right:5%;top:46%}.map-caption strong{font-size:12px}.map-caption{padding:14px}.role-tab{min-height:90px}.role-tab .character-portrait{width:48px;height:48px}.world-water-gauge{right:16px;width:96px}.map-top{left:16px;right:16px}.mission-panel h2{font-size:27px}}
@media(max-width:780px){.masthead{height:72px}.brand{font-size:25px}main{padding:24px 3% 0}.workspace{grid-template-columns:1fr}.world-panel{height:530px;position:relative;top:0}.island-painting{object-position:center}.mission-panel{padding:23px}.intro-line h1{font-size:32px}.reservoir{left:24%;top:31%}.farm{left:8%;top:58%}.village{right:7%;top:47%}.map-location small{display:none}.role-tabs{gap:12px}.role-tab .character-portrait{width:64px;height:64px}.role-tab{padding:12px;min-height:115px}.bottom-row{gap:10px}.resource-card{padding:15px}.character-intro{grid-template-columns:120px 1fr;gap:18px}.character-intro .character-portrait{width:120px;height:155px}.character-intro .modal-title{font-size:25px}}
@media(max-width:420px){.world-panel{height:470px}.world-water-gauge{top:65px;width:85px;padding:8px}.map-caption{left:12px;right:12px;padding:11px;gap:8px}.map-caption strong{font-size:11px}.map-caption div>span{font-size:9px}.map-location button{min-height:40px;padding:7px;font-size:10px}.compass{bottom:134px}.intro-line h1{font-size:28px}.role-tab .character-portrait{width:54px;height:54px}.role-tab{min-height:103px}.character-intro{margin:-28px -20px 20px;padding:27px 20px;grid-template-columns:100px 1fr;gap:14px}.character-intro .character-portrait{width:100px;height:140px}.character-intro .modal-title{font-size:22px}.character-intro .modal-eyebrow{font-size:8px}.mini-world{height:105px}.resource-card{padding:13px 9px}}