/* THE FIRST MEN IN THE MOON — skin.
   css/game.css is the pristine TIFE Core 2.3.0 stylesheet and is not edited.
   Everything below is an override: cold selenite blue, with Cavorite gold. */

:root{
  --primary:#8fd3f5;
  --bright:#e6f6ff;
  --dim:#6d92a8;
  --line:#1c4a66;
  --bg:#000407;
  --panel:#04121b;
  --panel2:#061a25;
  --warn:#ffd98a;
  --danger:#ff9d9d;
  --gold:#e8c46a;
}

.shell{background:radial-gradient(circle at 50% 30%,#06202e 0,#020a10 52%,#000 100%)}
.topbar,.footerbar{background:#020a10}
.panel{background:linear-gradient(180deg,rgba(6,26,37,.96),rgba(1,7,11,.96));box-shadow:inset 0 0 22px rgba(143,211,245,.03)}
.panel h2{border-bottom-color:#14405a}
.panel p{color:#a8c9dc}
.panel .row{border-bottom-color:#0f3448}
.terminal{background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),#000305;
  text-shadow:0 0 calc(6px * var(--glow)) rgba(143,211,245,.42)}
.output.title{color:var(--gold);text-shadow:0 0 calc(9px * var(--glow)) rgba(232,196,106,.4)}
.output.system{color:#6fb2d2}
.output.command{color:#cfeeff}
.topbar button,.footerbar button,.command-entry button,.button-row button,dialog button{background:#06202e}
.topbar button:hover,.footerbar button:hover,.button-row button:hover{background:#0d4056;color:var(--bright)}
.button-row button.selected{background:#12546f;color:var(--bright)}
.command-entry{background:#04121b}
.command-entry input{background:#000305;border-color:#155273}
.palette{background:linear-gradient(180deg,#04121b,#000407)}
.progress i{background:var(--gold)}
.map{color:#b7dcef;letter-spacing:.02em;place-items:start center;padding-top:4px}
.logo{color:var(--gold);text-shadow:0 0 calc(10px * var(--glow)) rgba(232,196,106,.55)}

/* ---- cover -------------------------------------------------------------- */
.cover-art{background:linear-gradient(180deg,#000 0%,#01060c 42%,#02101a 100%)}
.cover-moon{
  width:min(340px,42%);height:auto;aspect-ratio:1;right:8%;top:8%;
  background:
    radial-gradient(circle at 62% 66%,rgba(0,0,0,.30) 0 8%,transparent 9%),
    radial-gradient(circle at 34% 30%,rgba(0,0,0,.22) 0 6%,transparent 7%),
    radial-gradient(circle at 48% 52%,rgba(0,0,0,.18) 0 11%,transparent 12%),
    radial-gradient(circle at 38% 34%,#f2fbff,#bcd9ea 46%,#5f8298 72%,#12222c 88%,transparent 90%);
  box-shadow:0 0 90px rgba(143,211,245,.28)
}
.cover-ridge{clip-path:polygon(0 68%,7% 44%,15% 60%,26% 22%,38% 58%,49% 30%,60% 55%,72% 18%,84% 52%,93% 34%,100% 48%,100% 100%,0 100%)}
.ridge-one{background:#0a2333;opacity:.85}
.ridge-two{background:#01080d}
.cover-cave{
  left:26%;bottom:2%;width:48%;height:44%;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(143,211,245,.16) 0 38%,transparent 62%),
    radial-gradient(circle at 50% 118%,#000 0 42%,#06202e 43% 48%,transparent 49%);
  filter:drop-shadow(0 -10px 22px rgba(143,211,245,.10))
}
.cover-content{background:linear-gradient(135deg,rgba(4,20,30,.98),#000407)}
.cover-content h1{color:var(--bright);text-shadow:0 0 26px rgba(143,211,245,.28)}
.cover-kicker{color:var(--gold)}
.cover-content p{color:#bcd8e8}
.start-story{background:#0d3d52;border-color:var(--gold);color:var(--bright);box-shadow:0 0 18px rgba(232,196,106,.14)}
.start-story:hover,.start-story:focus{background:#155a78;outline-color:var(--gold)}

body.high-contrast{--primary:#fff;--bright:#fff;--dim:#ddd;--line:#fff;--gold:#fff;--glow:0}
body.high-contrast .output.title{color:#fff;text-shadow:none}