/* THE WAR OF THE WORLDS — story theme.
   Loaded after the pristine core stylesheet (css/game.css is byte-identical to the TIFE Core
   reference package). Everything here is presentation only: palette, cover art, map chart. */

:root{
 --primary:#ff7b45;
 --bright:#ffd7b0;
 --dim:#a9613f;
 --line:#7c2f16;
 --bg:#050203;
 --panel:#160705;
 --panel2:#1c0906;
 --warn:#ffc85c;
 --danger:#ff6b6b;
}

html,body{background:#050203}
.shell{background:radial-gradient(circle at 50% 30%,#2a0b06 0,#120403 48%,#050203 100%)}
.topbar,.footerbar{background:#100403}
.topbar button,.footerbar button,.command-entry button,.button-row button,dialog button{background:#260905}
.topbar button:hover,.footerbar button:hover,.button-row button:hover{background:#5a1a0c;color:var(--bright)}
.logo{color:#ff9d6a;text-shadow:0 0 calc(12px * var(--glow)) #ff4b1a}
.panel{background:linear-gradient(180deg,rgba(28,9,6,.96),rgba(8,3,2,.96));box-shadow:inset 0 0 22px rgba(255,123,69,.03)}
.panel h2{border-bottom:1px solid #6d2a13}
.panel p{color:#e2b79c}
.panel .row{border-bottom:1px solid #4a1c0d}
.progress{background:#2b0f08}
.terminal{text-shadow:0 0 calc(6px * var(--glow)) rgba(255,123,69,.42);background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),#050203}
.output.system{color:#e0925f}
.command-entry{background:#160604}
.command-entry input{background:#0b0302;border-color:#7c3418}
.palette{background:linear-gradient(180deg,#160705,#080302)}
.button-row button.selected{background:#6d2410;color:var(--bright)}
.map.chart{font-size:11px;line-height:1.45;letter-spacing:.02em;color:#f0a877;place-items:start;text-align:left}
.locked{color:#8a6152}
body.high-contrast{--primary:#fff;--bright:#fff;--dim:#ddd;--line:#fff;--glow:0}

/* ---- story cover ---- */
.story-cover{background:#080303}
.cover-art{background:linear-gradient(180deg,#3d0f06 0%,#7a2408 34%,#c1451a 58%,#2a0c05 82%,#080303 100%);border-right:1px solid var(--line)}
.cover-mars{position:absolute;width:190px;height:190px;border-radius:50%;right:11%;top:9%;
 background:radial-gradient(circle at 38% 34%,#ffd2ae,#ff7a3c 42%,#c03d12 68%,#5a1a07 82%,transparent 84%);
 box-shadow:0 0 90px rgba(255,110,50,.55)}
.cover-smoke{position:absolute;left:-10%;bottom:26%;width:120%;height:34%;
 background:radial-gradient(ellipse at 30% 90%,rgba(10,4,3,.92) 0 40%,transparent 72%),
            radial-gradient(ellipse at 72% 95%,rgba(10,4,3,.85) 0 38%,transparent 70%);
 filter:blur(6px)}
.cover-town{position:absolute;left:0;bottom:0;width:100%;height:16%;background:#080302;
 clip-path:polygon(0 62%,6% 55%,9% 62%,14% 40%,18% 62%,26% 58%,31% 30%,34% 58%,42% 52%,48% 62%,56% 46%,61% 62%,69% 55%,74% 34%,78% 60%,86% 52%,92% 62%,100% 56%,100% 100%,0 100%)}
.cover-tripod{position:absolute;bottom:12%}
.cover-tripod i{position:absolute;bottom:0;width:3px;background:#0c0403;transform-origin:bottom center}
.cover-tripod b{position:absolute;border-radius:52% 52% 40% 40%;background:#0c0403;box-shadow:0 0 18px rgba(255,150,90,.25)}
.t1{left:16%;height:0}
.t1 i{height:190px}
.t1 i:nth-child(1){left:-26px;transform:rotate(15deg)}
.t1 i:nth-child(2){left:0;transform:rotate(-4deg)}
.t1 i:nth-child(3){left:26px;transform:rotate(-19deg)}
.t1 b{bottom:184px;left:-19px;width:44px;height:26px}
.t2{left:46%}
.t2 i{height:260px;width:4px}
.t2 i:nth-child(1){left:-34px;transform:rotate(13deg)}
.t2 i:nth-child(2){left:0;transform:rotate(3deg)}
.t2 i:nth-child(3){left:34px;transform:rotate(-16deg)}
.t2 b{bottom:252px;left:-25px;width:58px;height:32px}
.t3{left:76%}
.t3 i{height:150px;width:2px}
.t3 i:nth-child(1){left:-19px;transform:rotate(16deg)}
.t3 i:nth-child(2){left:0;transform:rotate(-2deg)}
.t3 i:nth-child(3){left:19px;transform:rotate(-17deg)}
.t3 b{bottom:145px;left:-14px;width:33px;height:20px}
.cover-content{background:linear-gradient(135deg,rgba(38,12,7,.98),#080303)}
.cover-content h1{color:#ffd7b0;text-shadow:0 0 26px rgba(255,90,40,.35)}
.cover-content p{color:#f0c1a4}
.start-story{background:#7a2a12;border-color:#ffd7b0;color:#ffe6d0;box-shadow:0 0 20px rgba(255,110,50,.18)}
.start-story:hover,.start-story:focus{background:#a63a17}
.caption-region{border-color:#ffd7b0;color:#ffd7b0}