/* THE ISLAND OF DOCTOR MOREAU — story skin.
   css/game.css is the pristine TIFE Core 2.3.0 stylesheet and is not edited by
   this package; every visual change is layered here. Palette: lamp-oil and bone
   on volcanic black, with carbolic green and a blood accent. */

:root {
  --primary: #d9cdb2;
  --bright: #f7f0dc;
  --dim: #8b7f66;
  --line: #4d4130;
  --bg: #050403;
  --panel: #0b0906;
  --panel2: #100c08;
  --warn: #e3ac54;
  --danger: #cf5d49;
  --carbolic: #7fae8b;
  --blood: #8e2f24;
  --font: Consolas, "Courier New", monospace;
}

html, body { background: #050403; }

.shell {
  background:
    radial-gradient(circle at 50% 12%, rgba(142, 47, 36, .16) 0, transparent 46%),
    radial-gradient(circle at 50% 40%, #100c08 0, #070504 55%, #030201 100%);
}

.topbar, .footerbar { background: #0b0906; }
.logo { color: var(--bright); text-shadow: 0 0 calc(9px * var(--glow)) rgba(217, 205, 178, .55); }

.panel {
  background: linear-gradient(180deg, rgba(18, 14, 10, .96), rgba(7, 5, 4, .96));
  box-shadow: inset 0 0 22px rgba(217, 205, 178, .022);
}
.panel h2 { border-bottom: 1px solid #3d3324; color: var(--bright); }
.panel p { color: #b1a68c; }
.panel .row { border-bottom: 1px solid #302819; }
.progress { background: #241d13; }
.progress i { background: var(--carbolic); }
.complete { color: var(--carbolic); }
.locked { color: #6c6252; }

.terminal {
  text-shadow: 0 0 calc(5px * var(--glow)) rgba(217, 205, 178, .28);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .010) 0, rgba(255, 255, 255, .010) 1px, transparent 1px, transparent 4px),
    #050403;
}
.output.title { color: var(--bright); letter-spacing: .04em; }
.output.command { color: var(--carbolic); }
.output.system { color: #a89b7f; }
.output.warning { color: var(--warn); }
.output.error { color: var(--danger); }

.command-entry { background: #0d0a07; }
.command-entry input { background: #060404; border: 1px solid #57492f; color: var(--primary); }
.palette { background: linear-gradient(180deg, #0b0906, #050403); }

.topbar button, .footerbar button, .command-entry button, .button-row button, dialog button {
  background: #14100b; border: 1px solid var(--line); color: var(--primary);
}
.topbar button:hover, .footerbar button:hover, .button-row button:hover { background: #2b2317; color: var(--bright); }
.button-row button.selected { background: #3a2d1c; color: var(--bright); }
.footerbar button { color: #b1a68c; }

.map { font-size: 11px; line-height: 1.35; color: var(--primary); }
.tife-map { color: #c9bda2; }

dialog { background: #060404; border: 1px solid var(--primary); }
.save-row { border-bottom: 1px solid var(--line); }

/* ---- Cover: a low red sun over the island, seen from the boat ---- */
.story-cover { background: #050403; }
.cover-art {
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 62% 26%, rgba(207, 93, 73, .30), transparent 26%),
    linear-gradient(180deg, #1b1109 0%, #0d0806 46%, #050403 74%, #070707 100%);
}
.cover-art:before {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0, rgba(255, 255, 255, .012) 1px, transparent 1px, transparent 4px);
}
.cover-moon {
  width: 150px; height: 150px; right: 22%; top: 16%;
  background: radial-gradient(circle at 46% 44%, #f2c9a0, #cf5d49 52%, #6d241b 72%, transparent 74%);
  box-shadow: 0 0 70px rgba(207, 93, 73, .38);
}
.cover-ridge {
  clip-path: polygon(0 82%, 9% 70%, 17% 74%, 26% 52%, 34% 63%, 43% 41%, 52% 58%, 61% 47%, 72% 66%, 83% 57%, 92% 71%, 100% 66%, 100% 100%, 0 100%);
}
.ridge-one { background: #14100a; opacity: .95; height: 46%; }
.ridge-two { background: #0a0806; bottom: -16%; height: 52%; transform: scaleX(1.15); }
.cover-cave {
  left: 0; width: 100%; height: 34%; bottom: 0;
  background:
    repeating-linear-gradient(0deg, rgba(217, 205, 178, .05) 0, rgba(217, 205, 178, .05) 1px, transparent 1px, transparent 9px),
    linear-gradient(180deg, rgba(15, 20, 22, .2), rgba(4, 6, 8, .96));
  filter: none;
}
.cover-content { background: linear-gradient(135deg, rgba(20, 15, 10, .98), #050403); }
.cover-content h1 { color: var(--bright); text-shadow: 0 0 26px rgba(207, 93, 73, .22); font-size: clamp(2.1rem, 3.9vw, 4.4rem); }
.cover-content p { color: #beb298; }
.cover-kicker { color: var(--warn); }
.start-story {
  background: #3a1a14; border: 1px solid var(--bright); color: var(--bright);
  box-shadow: 0 0 18px rgba(207, 93, 73, .18);
}
.start-story:hover, .start-story:focus { background: #5a2820; outline: 2px solid var(--bright); }

.caption-region { border: 2px solid var(--bright); background: #050403; color: var(--bright); }
.accessibility-grid select, .accessibility-grid input[type="range"] { background: #14100b; border: 1px solid var(--line); color: var(--primary); }

body.high-contrast {
  --primary: #fff; --bright: #fff; --dim: #ddd; --line: #fff;
  --carbolic: #fff; --warn: #fff; --danger: #fff; --glow: 0;
}
body.high-contrast .terminal { text-shadow: none; background: #000; }