/* The historic scroll opens into a contemporary, speculative discovery lab. */
#game-modal,#activity-modal,#activity-hub,#city-game-chooser { background: #030b1cc9; backdrop-filter: blur(12px); }
#city-game-chooser { z-index: 130; }
#game-modal .game-box,#activity-modal .game-box,#activity-hub .game-box,.city-game-box { --ink: #e1f0f5; --ink-2: #a2bbd0; --paper: #152b41; --paper-2: #213b50; --paper-3: #d7f0f4; --line: #3e6680; --teal: #57ded0; --gold: #f4c88a; color: #e1f0f5; border: 1px solid #4c8b9b88; border-radius: 20px; background: radial-gradient(ellipse at 100% 0,#24526977,transparent 45%),radial-gradient(ellipse at 0 100%,#34315966,transparent 50%),#0d1c30; box-shadow: 0 30px 100px #0009,inset 0 1px #a0dae828; padding: 32px 36px; }
.city-game-box { width: min(940px,94vw); max-width: 940px; }
.game-lab-label { font-size: 10px; letter-spacing: 4px; color: #70dbd5; margin: 0 0 13px; }
#city-game-title { font-family: var(--sans); font-size: 29px; letter-spacing: 1px; margin: 0 0 13px; color: #ebf6fa; }
.game-choice-intro,.game-choice-note { color: #9ab5ca; font-size: 13px; line-height: 1.8; }
.game-choice-note { margin: 20px 0 0; font-size: 11px; }
.city-game-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 24px; }
.city-game-card { position: relative; padding: 160px 24px 25px; overflow: hidden; min-height: 360px; border: 1px solid #4d819377; border-radius: 15px; background: radial-gradient(ellipse at 50% 5%,#447b7466,transparent 65%),linear-gradient(140deg,#1c3a4c,#152338); color: #e7f5fa; cursor: pointer; text-align: left; transition: transform .25s,border-color .25s,box-shadow .25s; }
.city-game-card:nth-child(2) { background: radial-gradient(ellipse at 50% 5%,#64558d77,transparent 65%),linear-gradient(140deg,#24334e,#14263b); }
.city-game-card:hover { transform: translateY(-5px); border-color: #75e6d4; box-shadow: 0 15px 35px #0005,0 0 30px #68ccbe16; }
.city-game-card img { position: absolute; width: 220px; height: 165px; object-fit: contain; top: 2px; right: 15px; filter: drop-shadow(0 18px 18px #0005); }
.game-number { position: absolute; top: 22px; left: 22px; color: #7bdbd3; font-size: 11px; letter-spacing: 2px; }
.city-game-card h3 { font-size: 23px; margin: 0 0 13px; letter-spacing: 1px; }
.city-game-card p { font-size: 13px; line-height: 1.9; color: #b2c9d9; margin: 0 0 17px; min-height: 74px; }
.city-game-card small { display: block; font-size: 11px; color: #87b5c9; }
.city-game-card > b { display: block; margin-top: 20px; font-size: 13px; color: #7ce4d4; }
#game-modal .modal-close,#activity-modal .modal-close,#activity-hub .modal-close,.city-game-box .modal-close { color: #c7f4ed; background: #243d50; border: 1px solid #558796; border-radius: 50%; }
#activity-title,#activity-hub-title,#game-title { font-family: var(--sans); color: #e4f5fb; font-size: 28px; font-weight: 650; }
.activity-kicker,.game-kicker { color: #6bddcf !important; }
#activity-intro,.game-desc,.hub-note { color: #acc2d1 !important; }
.activity-levels { border-color: #3b586d; }
.activity-levels button,.activity-secondary { background: #20344b; border-color: #49647e; color: #abc8dc; border-radius: 8px; }
.activity-levels .selected { color: #bdf9eb; background: #1c4c53; border-color: #53b7b2; box-shadow: 0 0 20px #58d2be13; }
.activity-mission { background: #27394c; border-color: #f4c483; color: #eedcb8; border-radius: 5px; }
.activity-equation { color: #9bb3c8; }
.activity-choice,.activity-board button { background: linear-gradient(130deg,#20364d,#1b2b40); color: #d9ecf3; border-color: #46667b; border-radius: 10px; box-shadow: 0 7px 15px #0002; }
.activity-choice:hover,.activity-board button:hover { background: #2c465a; border-color: #6addcc; }
.activity-choice small,.activity-board small { color: #9ab5c9; }
.activity-choice.chosen,.activity-choice.correct { background: #1b4b4e; border-color: #65d5c2; box-shadow: inset 3px 0 #65d5c2,0 0 20px #67ddbd18; }
.activity-choice.incorrect { border-color: #e39e87; }
.activity-submit,#activity-done,.gm-actions button,.bal-boat~.gm-actions button,#balGo,.lock-btns button { background: linear-gradient(135deg,#287f82,#275071); color: #e5fffa; border: 1px solid #6ccfc488; border-radius: 8px; box-shadow: 0 6px 15px #0003,inset 0 1px #ffffff20; }
#activity-again { color: #a4e9e1; border-color: #4f9299; }
.lab-readings { background: #183c48; color: #9fe7d9; border: 1px solid #356772; }
.activity-slider output,.activity-slider,.design-options label { color: #c4e4ef; }
.activity-slider input,.design-options input { accent-color: #6cdbcb; }
.design-options select { background: #233c51; color: #d9f3f5; border-color: #50728b; }
.eco-meters,.water-dashboard { background: linear-gradient(140deg,#1a3b4b,#1e2f47); border: 1px solid #365f71; }
.eco-meters > div > div { background: #344b5f; }
.eco-meters i { background: linear-gradient(90deg,#3e9eab,#7ae8c6); box-shadow: 0 0 15px #65dbb777; }
.reservoir { background: #223b52; border-color: #5e9ba7; box-shadow: 10px 8px #040e1b55; transform: perspective(600px) rotateY(-12deg); }
.reservoir b { color: #d4fff5; text-shadow: 0 1px #123; }
.reservoir i { background: linear-gradient(#5dbeb9,#276b83); }
.evidence-sheet { background: repeating-linear-gradient(#20354a 0 30px,#294156 31px 32px); border-color: #e2b87b; border-radius: 7px; box-shadow: 8px 8px #040e1b44; }
.evidence-sheet span,.evidence-sheet small { color: #a7c2d4; }
.timeline-slot { background: #243b51; border-color: #63879a; color: #ccdfeb; border-top-color: #6bd5c3; border-radius: 6px; box-shadow: 3px 5px #060d1a55; }
#activity-feedback.good { color: #80e6bc; } #activity-feedback.retry { color: #f2b89b; }
#activity-learn { background: #183e47; border-color: #73d7bd; border-radius: 6px; }
#activity-learn h3 { color: #b9f4df; } #activity-learn p { color: #b0cfd2; }
.lab-stage,.bridge-design,#game-modal .bridge-scene,#game-modal .lock-scene,#game-modal .flow-bars,#game-modal .bal-boat { background: radial-gradient(ellipse at 70% 15%,#3a687c80,transparent 65%),linear-gradient(#142b43,#193a4b); border: 1px solid #4c8292; border-radius: 13px; box-shadow: inset 0 1px #91e0d12a,0 15px 30px #0004; }
.lab-water,#game-modal .lock-water { background: linear-gradient(#6bc3becc,#1c6885); box-shadow: 0 -5px 20px #6dd6d22b; }
.lab-depth { color: #bcebe3; }
.return-city-games { display: block; margin-top: 20px; padding: 8px 12px; font-size: 12px; border: 1px solid #51788e; background: #22384c; color: #b9d6e4; border-radius: 6px; cursor: pointer; }
#game-modal .bridge-scene { height: 285px; overflow: hidden; }
#game-modal .bridge-scene::before { content: ''; position: absolute; inset: 48% -10% -20%; background: repeating-linear-gradient(174deg,transparent 0 16px,#8eede42b 17px 18px,transparent 19px 35px),linear-gradient(#2a7b87,#153d63); transform: perspective(500px) rotateX(23deg); box-shadow: 0 -7px 30px #6cddd938; }
#game-modal .bridge-scene::after { content: ''; position: absolute; width: 130px; height: 130px; top: -80px; left: 10%; border: 1px solid #86d9e642; border-radius: 50%; box-shadow: 0 0 60px #6be4dc20,inset 0 0 40px #6be4dc15; pointer-events: none; }
#game-modal .bridge-arch { opacity: 0; pointer-events: none; }
.game-bridge-model { position: absolute; width: 325px; height: 245px; top: -14px; left: 31%; filter: drop-shadow(0 20px 10px #0007); pointer-events: none; }
.game-bridge-model canvas,.design-3d canvas { width: 100%; height: 100%; object-fit: contain; }
.gm-boat2.has-model-ship { width: 160px; bottom: 5px; z-index: 6; height: 165px; }
.has-model-ship > svg { display: none !important; }
.real-model-ship { display: block; position: absolute; bottom: -5px; left: 0; width: 165px; height: 150px; object-fit: fill; filter: drop-shadow(0 10px 5px #0006); transition: height .2s; }
.lock-boat.has-model-ship { width: 130px; height: 100px; }
.lock-boat .real-model-ship { width: 140px; height: 110px; }
.bridge-limit { color: #bcebe6; background: #15354be8; border: 1px solid #4f95a2; border-radius: 6px; z-index: 9; }
.bridge-progress,.sail-control,.lock-moves,.lock-hint { color: #acd9de; }
.load-ship-art { width: 180px; height: 145px; object-fit: contain; align-self: center; }
.bal-hold { background: #1d3a4b; color: #cbebf2; border-color: #567c8e; }
.bal-hold span,.bal-hold b,.bal-read { color: #c1e4eb; }
.bal-sack { border-radius: 8px; background: #2c3d52; color: #d9edf6; }
.bal-sack b,.bal-sack small { color: #c9e2ef; }
.bal-sack.left { background: #22514e; } .bal-sack.right { background: #55452e; }
.design-3d { width: 260px; height: 155px; position: absolute; top: 0; right: 10px; pointer-events: none; filter: drop-shadow(0 12px 8px #0007); }
.bridge-design { position: relative; }
.bridge-design > svg { opacity: .65; }
.game-result { background: #163d49; border: 1px solid #56aa9f; border-radius: 14px; }
.game-result h3,.game-result p { color: #d0eee7; }
.lock-wall { background: repeating-linear-gradient(0deg,#718894 0 17px,#415c6a 18px 20px); box-shadow: 10px 0 0 #213b4c,inset 3px 0 #b6d5d344; border-color: #718d98; }
.lock-gate { background: repeating-linear-gradient(90deg,#9b7955 0 4px,#574736 5px 7px); box-shadow: 6px 0 0 #2d3339,0 0 15px #4cc0be22; border-color: #c5a36a; }
.flow-bar { background: #17283b; border: 1px solid #557c91; box-shadow: 10px -5px #2b4c5b,12px 0 18px #0005; border-radius: 5px 5px 0 0; }
.flow-bar i { background: linear-gradient(90deg,#27768c,#6ad3ca,#317d98); box-shadow: inset 0 6px #b9fbeb66; }
.flow-read,.flow-time,.flow-bar span { color: #b4e5e8; }
.bin { background: linear-gradient(135deg,#284259,#172e43); border: 1px solid #53788b; box-shadow: 6px 7px #040e1b66; border-radius: 10px; }
.bin:hover { background: #2c5262; }
.bin > span,.bin > b,.bin-read { color: #c8e4ec; }
.bin-bar { background: #10293c; border-radius: 5px; }
.bin-bar i { background: linear-gradient(90deg,#357e94,#72d3b7); }
.bin-chip,.bin-sack { background: linear-gradient(135deg,#b78e4d,#6c542e); border-color: #d0b078; color: #fff0c8; border-radius: 6px; box-shadow: 3px 4px #0004; }
.compass-dial { background: repeating-radial-gradient(circle,#18374c 0 23px,#3e728088 24px 25px),#163249; border: 2px solid #75b2c0; box-shadow: 0 0 0 10px #1d3c52,0 0 0 11px #4b7b91,0 0 50px #62d1d733,inset 0 0 25px #030d1b; }
.compass-dial .dir,.compass-angle,.compass-progress { color: #ade6eb; }
.compass-clue { color: #c1dbe6; background: #24394f; border-color: #e0b879; }
.compass-dial .tick { background: #70afbd; }
.bonus-activity[hidden] { display: none; }
@media(prefers-reduced-motion:reduce) { .city-game-card { transition: none; } }