/* The Invisible Man — story skin.
   css/game.css is the pristine TIFE Core 2.3.0 stylesheet and is not edited.
   Everything below is an override layer loaded after it. */

:root{
 --primary:#dccdaa;      /* gaslight on linen  */
 --bright:#fff4dd;
 --dim:#8b7d62;
 --line:#4b3d28;
 --bg:#000;
 --panel:#0d0a06;
 --panel2:#120d08;
 --warn:#ffcf6b;
 --danger:#ff9d86;
 --glow:.55;
 --limelight:#8fd6ff; /* the cold second colour: laboratory glass */
}

html,body{background:#050403;color:var(--primary)}
.shell{background:radial-gradient(circle at 50% 30%,#161009 0,#080503 55%,#000 100%)}
.topbar,.footerbar{background:#0a0705;border-color:var(--line)}
.logo{color:var(--bright);text-shadow:0 0 calc(9px * var(--glow)) #e8c98a}
.product span{color:var(--limelight)}
.game-title strong{color:var(--bright);letter-spacing:.06em}

.panel h2{color:var(--limelight);letter-spacing:.1em}
.panel .row.complete{color:#b9e6a5}
.panel .row.locked{color:var(--dim)}

.terminal .output.title{color:var(--bright);text-shadow:0 0 calc(12px * var(--glow)) rgba(255,222,160,.35)}
.terminal .output.command{color:var(--limelight)}
.terminal .output.system{color:#c6b48c}
.terminal .output.warning{color:var(--warn)}
.terminal .output.error{color:var(--danger)}

button{border-color:var(--line)}
button:hover,button:focus{border-color:var(--bright);color:var(--bright)}
.palette .button-row button.selected{background:#3a2a12;color:var(--bright);border-color:var(--bright)}
.command-entry{border-color:var(--line)}
.map{font-size:10.5px;line-height:1.55;text-align:left;place-items:start;color:#c9b891;overflow:auto}

body.high-contrast{--primary:#fff;--bright:#fff;--dim:#d8d8d8;--line:#fff;--limelight:#fff;--glow:0}

/* ---- cover: a gas lamp, a row of roofs, and a shape in the fog ---- */
.cover-art{
 background:
  radial-gradient(circle at 71% 19%,rgba(255,214,140,.32),transparent 15%),
  linear-gradient(180deg,#171008 0%,#0a0705 58%,#000 100%);
 border-right-color:var(--line);
}
.cover-moon{           /* the gas lamp */
 right:14%;top:9%;width:120px;height:120px;
 background:radial-gradient(circle at 50% 42%,#fff3d0,#ffcf7e 26%,rgba(255,190,105,.34) 48%,transparent 66%);
 box-shadow:0 0 90px rgba(255,196,110,.34);
}
.cover-moon:after{
 content:"";position:absolute;left:50%;top:56%;width:3px;height:340px;
 transform:translateX(-50%);
 background:linear-gradient(180deg,rgba(255,214,140,.55),rgba(80,60,32,.2));
}
.ridge-one{                                 /* rooftops */
 background:#241a0e;opacity:.92;
 clip-path:polygon(0 68%,6% 68%,6% 50%,13% 50%,13% 68%,22% 68%,26% 40%,34% 40%,34% 68%,45% 68%,45% 55%,52% 55%,52% 68%,63% 68%,68% 44%,76% 44%,76% 68%,88% 68%,88% 58%,100% 58%,100% 100%,0 100%);
}
.ridge-two{                                 /* the fog bank */
 bottom:-6%;background:linear-gradient(0deg,#0a0705 40%,rgba(190,170,130,.16) 100%);
 clip-path:none;height:38%;transform:none;filter:blur(2px);
}
.cover-cave{                                /* the bandaged head */
 left:34%;bottom:2%;width:34%;height:64%;
 background:
  radial-gradient(ellipse at 50% 22%,rgba(232,214,178,.92) 0 21%,transparent 22%),
  linear-gradient(180deg,transparent 0 20%,rgba(24,18,10,.96) 21% 100%);
 filter:drop-shadow(0 -10px 22px rgba(255,200,120,.12));
}
.cover-cave:before{                         /* the bandage bands */
 content:"";position:absolute;left:33%;top:6%;width:34%;height:20%;
 background:repeating-linear-gradient(-14deg,rgba(20,14,8,.55) 0 2px,transparent 2px 7px);
 border-radius:46%;
}
.cover-cave:after{                          /* blue goggles */
 content:"";position:absolute;left:37%;top:13%;width:26%;height:5%;
 background:linear-gradient(90deg,#2b4d63,#8fd6ff 25%,#2b4d63 48%,#2b4d63 52%,#8fd6ff 75%,#2b4d63);
 border-radius:3px;box-shadow:0 0 14px rgba(143,214,255,.45);
}
.cover-content{background:linear-gradient(135deg,rgba(22,15,8,.98),#050403)}
.cover-content h1{color:var(--bright);text-shadow:0 0 26px rgba(255,206,138,.28)}
.cover-content p{color:#cbb99a}
.start-story{background:#4a3211;border-color:var(--bright);color:var(--bright);box-shadow:0 0 18px rgba(255,200,120,.14)}
.start-story:hover,.start-story:focus{background:#6a4816}
.caption-region{border-color:var(--bright);color:var(--bright)}