/* DEADFALL — story skin.
 * css/game.css is the pristine TIFE Core 2.3.0 stylesheet and is not edited.
 * Everything below overrides it: a winter palette of bone, iron-blue and ember,
 * the cover art, the story-verb buttons and the region chart.
 */

:root{
  --primary:#cfe0ea;      /* bone / old snow */
  --bright:#f4f9fc;       /* fresh snow */
  --dim:#6d8497;          /* iron blue */
  --line:#2b3d4b;         /* rule lines */
  --bg:#05080b;
  --panel:#080d12;
  --panel2:#0b1218;
  --warn:#e8a24a;         /* ember */
  --danger:#d9603f;       /* fire-cherry */
  --ochre:#b4462a;        /* the line's mark */
  --font:Consolas,"Courier New",monospace;
  --glow:.35;
}

html,body{background:var(--bg);color:var(--primary)}
.shell{background:radial-gradient(circle at 50% 18%,#0e1720 0,#070b10 52%,#030507 100%)}
.topbar{background:#070c11;border-color:var(--line)}
.logo{color:var(--bright);text-shadow:0 0 10px rgba(207,224,234,.35)}
.game-title strong{letter-spacing:.34em;color:var(--bright)}
.panel{background:linear-gradient(180deg,rgba(11,18,24,.96),rgba(5,8,11,.96));box-shadow:inset 0 0 22px rgba(207,224,234,.02)}
.terminal{background:linear-gradient(180deg,#06090d,#030507)}

.topbar button,.footerbar button,.command-entry button,.button-row button,dialog button{
  background:#0d151c;border-color:var(--line);color:var(--primary)}
.topbar button:hover,.footerbar button:hover,.button-row button:hover{background:#1a2733;color:var(--bright)}

/* the engine stylesheet leans on the browser default focus ring */
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--warn);outline-offset:2px}

/* ---- output styles ---- */
.output.title{color:var(--warn);text-shadow:0 0 14px rgba(232,162,74,.22)}
.output.command{color:var(--dim)}
.output.warning{color:var(--danger)}
.output.system{color:#9fb8c8}
.output.error{color:var(--danger)}

/* ---- story verbs ---- */
.button-row button.story-verb{
  border-color:var(--ochre);color:#f0c8b8;background:#170d0a;letter-spacing:.06em}
.button-row button.story-verb:hover{background:#2a1610;color:var(--bright)}

/* ---- region chart ---- */
.deadfall-chart{font-size:.92em;line-height:1.5}
.chart-region{margin-bottom:9px;border-left:2px solid var(--line);padding-left:8px}
.chart-region h3{margin:0 0 3px;font-size:.78em;letter-spacing:.16em;color:var(--dim);font-weight:400;text-transform:uppercase}
.chart-region.chart-dark h3{color:#3f5162}
.chart-row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-row.chart-unknown{color:#3f5162}
.chart-row.chart-here{color:var(--warn);font-weight:700}
.chart-foot{margin-top:8px;padding-top:6px;border-top:1px solid var(--line);color:var(--dim);font-size:.82em}

/* ---- cover ---- */
.story-cover{background:#030507}
.cover-art{
  background:
    radial-gradient(circle at 74% 16%,rgba(244,249,252,.30),transparent 12%),
    linear-gradient(180deg,#0f1c27 0%,#0a121a 46%,#05080b 100%);
  border-right:1px solid var(--line)}
.cover-art:before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 4px)}
.cover-moon{
  right:14%;top:9%;width:150px;height:150px;
  background:radial-gradient(circle at 40% 36%,#ffffff,#c3d6e3 52%,#4a6274 70%,transparent 72%);
  box-shadow:0 0 60px rgba(207,224,234,.30)}
.cover-ridge{background:#0b141c}
.cover-ridge.ridge-one{height:46%;background:#101d27;clip-path:polygon(0 62%,11% 38%,22% 55%,33% 22%,45% 52%,58% 28%,70% 50%,82% 18%,92% 48%,100% 34%,100% 100%,0 100%)}
.cover-ridge.ridge-two{height:30%;background:#060c11;clip-path:polygon(0 70%,9% 52%,20% 66%,31% 40%,44% 62%,57% 44%,69% 64%,80% 38%,90% 60%,100% 50%,100% 100%,0 100%)}
/* the leaning bull-log, cocked on its toggle */
.cover-cave{
  left:20%;bottom:14%;width:60%;height:40%;background:none;filter:none}
.cover-cave:before{
  content:"";position:absolute;left:4%;bottom:26%;width:74%;height:9px;
  background:linear-gradient(90deg,#4a3524,#7a5637 40%,#2d2118);
  transform-origin:left bottom;transform:rotate(-27deg);
  box-shadow:0 10px 24px rgba(0,0,0,.7)}
.cover-cave:after{
  content:"";position:absolute;left:6%;bottom:0;width:5px;height:26%;
  background:linear-gradient(180deg,#e9dcc4,#9c8a6d);
  box-shadow:0 0 12px rgba(233,220,196,.30)}
.cover-content{background:linear-gradient(135deg,rgba(12,20,27,.98),#030507)}
.cover-content h1{color:var(--bright);text-shadow:0 0 26px rgba(207,224,234,.22);letter-spacing:.14em}
.cover-content p{color:#a9c1d1}
.cover-kicker{color:var(--ochre);letter-spacing:.3em}
.start-story{border-color:var(--ochre)!important;color:#f0c8b8!important;background:#170d0a!important}
.start-story:hover{background:#2a1610!important;color:var(--bright)!important}

/* ---- high contrast keeps working ---- */
body.high-contrast{--primary:#ffffff;--bright:#ffffff;--dim:#c8d6e0;--line:#8fa6b6;--warn:#ffc266;--danger:#ff8a66}