/* Illustrated presentation: painted dragon/lantern/forest frame around the live 80x25 terminal. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500&family=Cinzel:wght@600;800&display=swap');

:root {
    --ink: #120d10;
    --ember: #c4402a;
    --dragon: #8e1f1d;
    --lantern: #f0b25a;
    --parchment: #efe0bf;
    --moss: #2e4a35;
    --dusk: #262443;
}

/* Narrow screens: keep 80 columns full size, scroll horizontally (both views). */
#game { overflow-x: auto; overflow-y: auto; }
@media (max-width: 760px) {
    #game { justify-content: flex-start; -webkit-overflow-scrolling: touch; }
}
#controls .view-choice select {
    margin-left: 4px; font: inherit; background: #222; color: #ccc; border: 1px solid #555; border-radius: 3px;
}

#illus-backdrop, #illus-location, #illus-title { display: none; }
#illus-stage { display: contents; }

/* ── Illustrated mode ─────────────────────────────────────────── */
.lord-illustrated body { background: var(--ink); }
.lord-illustrated #illus-backdrop {
    display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.illus-layer {
    position: absolute; inset: -3%; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.2s ease;
    animation: illus-drift 40s ease-in-out infinite alternate;
}
.illus-dragon { background-image: url('images/dragon-title.webp'); background-position: 62% 40%; }
.illus-town { background-image: url('images/town-dusk.webp'); background-size: max(100vw, 180vh) auto; background-position: center 55%; }
.lord-illustrated[data-scene="town"] .illus-town { opacity: 1; }
.lord-illustrated:not([data-scene="town"]) .illus-dragon { opacity: .9; }
.lord-illustrated[data-scene="wilds"] .illus-dragon { opacity: .45; }
.illus-vignette {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(18,13,16,.25) 0%, rgba(18,13,16,.78) 62%, rgba(10,7,9,.96) 100%),
        linear-gradient(180deg, rgba(38,36,67,.35), rgba(18,13,16,.6));
}
.illus-embers {
    position: absolute; inset: 0; opacity: .5;
    background-image:
        radial-gradient(2px 2px at 20% 80%, var(--lantern), transparent),
        radial-gradient(1.5px 1.5px at 70% 90%, var(--ember), transparent),
        radial-gradient(2px 2px at 85% 70%, var(--lantern), transparent),
        radial-gradient(1px 1px at 40% 95%, var(--ember), transparent);
    animation: illus-rise 14s linear infinite;
}
@keyframes illus-drift { from { transform: scale(1) translate(0,0); } to { transform: scale(1.05) translate(-1%, -1%); } }
@keyframes illus-rise { from { transform: translateY(0); opacity: .5; } to { transform: translateY(-30vh); opacity: 0; } }

.lord-illustrated #game { position: relative; z-index: 1; }
/* Keep the original terminal alive and keyboard-focused, but do not let
   its block-character title show around the illustrated replacement. */
.lord-illustrated.illus-title-on #terminal-container { opacity: 0; }
.lord-illustrated #terminal-container,
.lord-illustrated #rip-game-wrapper {
    flex: none;
    position: relative;
    padding: 10px;
    background: #000;
    border: 1px solid #6b4a24;
    border-radius: 4px;
    box-shadow:
        0 0 0 3px #1c1210, 0 0 0 4px rgba(240,178,90,.45),
        0 24px 60px rgba(0,0,0,.7), 0 0 80px rgba(142,31,29,.25);
}
.lord-illustrated #rip-game-wrapper #terminal-container { box-shadow: none; border: 0; padding: 0; }

.lord-illustrated #illus-location {
    display: block; position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 2; pointer-events: none;
    font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
    font-size: 12px; color: var(--lantern); text-shadow: 0 1px 6px #000;
}
.lord-illustrated #illus-location:empty { display: none; }

.lord-illustrated #controls {
    background: rgba(18,13,16,.92); border-top: 1px solid rgba(240,178,90,.3); color: #c9b48e;
}

/* ── Painted title card (only while original title is on screen) ── */
.lord-illustrated #illus-title:not([hidden]) {
    display: grid; grid-template-columns: 1.1fr 1fr;
    position: absolute; z-index: 30;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(760px, 100%); max-width: 760px; min-width: 300px;
    max-height: calc(100% - 16px);
    background: var(--ink);
    border: 1px solid #6b4a24; border-radius: 4px;
    box-shadow: 0 0 0 3px #1c1210, 0 0 0 4px rgba(240,178,90,.5), 0 30px 80px rgba(0,0,0,.8);
    overflow: hidden;
    animation: illus-card-in .9s cubic-bezier(.2,.7,.2,1) both;
}
.illus-title-art {
    background: url('images/dragon-title.webp') 70% 35% / cover;
    min-height: 340px;
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
    mask-image: linear-gradient(90deg, #000 70%, transparent);
}
.illus-title-copy {
    padding: 34px 32px 26px 8px; display: flex; flex-direction: column; gap: 14px; justify-content: center;
    color: var(--parchment);
}
.illus-eyebrow {
    font-family: 'Cinzel', Georgia, serif; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--lantern);
}
#illus-title h1 {
    font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: .08em; color: #d9c8a2;
}
#illus-title h1 span {
    display: block; font-weight: 800; font-size: 44px; color: #e2523a; letter-spacing: .02em;
    text-shadow: 0 2px 0 #3a0d0b, 0 0 24px rgba(196,64,42,.35);
}
.illus-lede { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; line-height: 1.35; color: #d8c7a4; }
#illus-continue {
    align-self: flex-start; margin-top: 6px; cursor: pointer;
    font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
    padding: 11px 26px; color: #1c1210;
    background: linear-gradient(180deg, #f6c675, #c98a35);
    border: 1px solid #5a3a14; border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px rgba(0,0,0,.5);
    transition: transform .15s ease, filter .15s ease;
}
#illus-continue:hover { transform: translateY(-1px); filter: brightness(1.07); }
#illus-continue:focus-visible { outline: 2px solid var(--parchment); outline-offset: 3px; }
#illus-continue:disabled { opacity: .6; cursor: default; transform: none; }
.illus-credits {
    margin-top: 6px; font-family: 'Web437-IBM-VGA', 'Courier New', monospace; font-size: 12px; line-height: 1.5; color: #9c8d76;
}
@keyframes illus-card-in { from { opacity: 0; transform: translate(-50%, -47%); } to { opacity: 1; transform: translate(-50%, -50%); } }

@media (max-width: 760px) {
    .lord-illustrated #illus-title:not([hidden]) {
        position: fixed; grid-template-columns: 1fr; width: calc(100vw - 20px); min-width: 0;
        max-height: calc(100dvh - 60px); overflow-y: auto;
    }
    .illus-title-art { min-height: 180px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
    .illus-title-copy { padding: 4px 22px 22px; }
    #illus-title h1 span { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .illus-layer, .illus-embers, .lord-illustrated #illus-title:not([hidden]) { animation: none !important; }
    .illus-layer { transition: none; }
    #illus-continue { transition: none; }
}