/* ============================================================
   Urlicht — a Mahler life.  Dark pastoral chrome around a 320×180
   pixel canvas. Fonts and grain follow the /mahler/ page.
   ============================================================ */

@font-face {
    font-family: 'Newsreader';
    src: url('../assets/fonts/newsreader-latin.woff2') format('woff2');
    font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

:root {
    --ink: #d8d2c4;
    --ink-dim: #8f8878;
    --paper: #0b0a09;
    --accent: #b08d57;
    --blood: #7e2f2a;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --serif: 'Newsreader', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--mono);
    overflow: hidden;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* No double-tap-to-zoom on iOS; the stricter per-element touch-action
   values below still apply inside the stage and cards. */
html { touch-action: manipulation; }

/* ---------- stage & canvas ---------- */
#stage {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #050504;
    touch-action: none;
}
#stage.portrait { align-items: flex-start; }
#stage.portrait #game { margin-top: 52px; }
#stage.portrait #hint { bottom: 170px; }
#card, .jr-inner, #title { touch-action: pan-y; }
#game {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #000;
}

/* ---------- film effects ---------- */
.fx-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 4;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.34) 84%, rgba(0,0,0,0.62) 100%);
}
.fx-grain {
    position: absolute; inset: -60px; pointer-events: none; z-index: 5;
    opacity: 0.16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    animation: grain 0.9s steps(3) infinite;
    transition: opacity 2.5s ease;
}
@keyframes grain {
    0% { transform: translate(0,0); }
    33% { transform: translate(-24px,14px); }
    66% { transform: translate(18px,-22px); }
    100% { transform: translate(0,0); }
}
.fx-flash {
    position: absolute; inset: 0; pointer-events: none; z-index: 6;
    background: #e8e4d8; opacity: 0; transition: opacity 90ms linear;
}
.fx-fade {
    position: absolute; inset: 0; pointer-events: none; z-index: 7;
    background: #000; opacity: 0; transition: opacity 700ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .fx-grain { animation: none; }
}

/* ---------- HUD ---------- */
#hud {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 10px 14px; pointer-events: none;
    font-size: 12px; letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
#hudDate { color: var(--ink); }
#hudPlace { color: var(--ink-dim); font-size: 11px; margin-top: 2px; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.meter { display: flex; align-items: center; gap: 5px; }
.meter-ic { font-size: 10px; color: var(--ink-dim); }
.meter-tr {
    width: 64px; height: 7px; background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
}
.meter-fill { height: 100%; width: 100%; background: #a8905c; transition: width 0.35s ease, background 0.35s ease; }
.meter-fill.health { background: #7e2f2a; }
.meter-fill.low { background: #8a3b30; }
#hudMoney { color: var(--ink-dim); min-width: 56px; text-align: right; }

/* ---------- context hint ---------- */
#hint {
    position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%);
    z-index: 10; pointer-events: none;
    font-size: 11px; letter-spacing: 0.06em; color: var(--ink);
    background: rgba(8,7,6,0.78); border: 1px solid rgba(216,210,196,0.18);
    padding: 4px 10px;
    white-space: nowrap;
}

/* ---------- dialogue ---------- */
#dialog {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 18px; z-index: 20;
    width: min(620px, calc(100% - 32px));
    background: rgba(10,9,8,0.93);
    border: 1px solid rgba(216,210,196,0.22);
    padding: 12px 16px 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}
#dlgName {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 5px;
}
#dlgName:empty { display: none; }
#dlgText {
    font-family: var(--serif); font-size: 17px; line-height: 1.45;
    color: var(--ink); min-height: 44px;
}
#dlgText em { color: #c8bfa8; font-style: italic; }
#dlgMore {
    position: absolute; right: 12px; bottom: 6px; font-size: 11px;
    color: var(--ink-dim); animation: bob 1.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(3px);} }

/* ---------- choices ---------- */
#choices {
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 130px; z-index: 21;
    display: flex; flex-direction: column; gap: 6px;
    width: min(460px, calc(100% - 48px));
}
.choice-btn {
    font-family: var(--mono); font-size: 13px; text-align: left;
    color: var(--ink); background: rgba(10,9,8,0.94);
    border: 1px solid rgba(216,210,196,0.25);
    padding: 9px 12px; cursor: pointer;
}
.choice-btn:hover, .choice-btn.sel { border-color: var(--accent); color: #efe9da; }
.choice-btn.locked { color: #575145; cursor: not-allowed; }
.choice-btn.locked:hover { border-color: rgba(216,210,196,0.25); }
.choice-note { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 3px; }

/* ---------- literary card ---------- */
#card {
    position: absolute; inset: 0; z-index: 30;
    background: rgba(5,4,4,0.96);
    display: flex; align-items: center; justify-content: center;
    overflow-y: auto;
}
.card-inner {
    width: min(560px, calc(100% - 48px));
    padding: 40px 0;
    text-align: center;
}
#cardKicker {
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 14px;
}
#cardTitle {
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(24px, 4.5vw, 34px); line-height: 1.15;
    color: #efe9da; margin-bottom: 18px;
}
#cardBody {
    font-family: var(--serif); font-size: 16.5px; line-height: 1.55;
    color: var(--ink); text-align: left;
}
#cardBody p { margin: 0 0 12px; }
#cardBody p:last-child { margin-bottom: 0; }
#cardBody .q { color: #c9c2b1; font-style: italic; }
#cardBody .dark { color: #9a5a50; }
#cardTheme { margin-top: 22px; }
#cardPlay {
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em;
    color: #0b0a09; background: var(--accent);
    border: none; padding: 10px 18px; cursor: pointer;
}
#cardPlay.playing { background: #6f6046; color: #dcd5c5; }
#cardGo {
    margin-top: 26px; font-size: 12px; letter-spacing: 0.12em;
    color: var(--ink-dim); cursor: pointer;
    animation: bob 1.4s ease-in-out infinite;
}
#cardGo:hover { color: var(--ink); }
#card.holding #cardGo { visibility: hidden; }

/* ---------- journal ---------- */
#journal {
    position: absolute; inset: 0; z-index: 25;
    background: rgba(5,4,4,0.9);
    display: flex; align-items: center; justify-content: center;
}
.jr-inner {
    width: min(520px, calc(100% - 40px));
    max-height: 82vh; overflow-y: auto;
    background: rgba(12,11,9,0.98);
    border: 1px solid rgba(216,210,196,0.2);
    padding: 20px 24px;
}
.jr-head {
    font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px;
}
.jr-close { float: right; color: var(--ink-dim); text-transform: none; letter-spacing: 0.03em; font-size: 11px; }
#jrGoals { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink); }
#jrGoals .goal { margin-bottom: 6px; }
#jrGoals .goal.done { color: #6d675a; text-decoration: line-through; }
.jr-sub {
    margin: 16px 0 8px; font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-dim);
}
#jrWorks .wk { margin-bottom: 9px; font-size: 12.5px; }
#jrWorks .wk-name { color: var(--ink); }
#jrWorks .wk-done .wk-name { color: var(--accent); }
#jrWorks .wk-bar {
    height: 5px; margin-top: 3px; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}
#jrWorks .wk-fill { height: 100%; background: #6f6046; }
#jrWorks .wk-done .wk-fill { background: var(--accent); }

/* ---------- menus / title ---------- */
#menu {
    position: absolute; inset: 0; z-index: 40;
    background: rgba(5,4,4,0.88);
    display: flex; align-items: center; justify-content: center;
}
.menu-inner { text-align: center; }
.menu-title {
    font-family: var(--serif); font-size: 24px; color: #efe9da; margin-bottom: 18px;
}
.menu-btn {
    display: block; width: 240px; margin: 0 auto 8px;
    font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
    color: var(--ink); background: rgba(20,18,15,0.9);
    border: 1px solid rgba(216,210,196,0.28);
    padding: 11px 16px; cursor: pointer;
}
.menu-btn:hover { border-color: var(--accent); color: #efe9da; }

#title {
    position: absolute; inset: 0; z-index: 50;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(64,42,32,0.5), transparent 60%),
        radial-gradient(ellipse at 50% -20%, rgba(24,28,38,0.65), transparent 55%),
        #070605;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    overflow-y: auto;
}
.ttl-inner { padding: 40px 24px; max-width: 620px; }
.ttl-kicker {
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 20px;
}
.ttl-name {
    font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 14vw, 110px);
    letter-spacing: 0.14em; color: #efe9da; line-height: 1;
    margin: 0 0 18px; text-indent: 0.14em;
}
.ttl-sub {
    font-family: var(--serif); font-size: 17px; line-height: 1.5;
    color: var(--ink); margin-bottom: 30px;
}
.ttl-menu { margin-bottom: 30px; }
.ttl-note {
    font-size: 11px; line-height: 1.6; color: #6d675a; max-width: 480px; margin: 0 auto;
}
.ttl-keys { display: inline-block; margin-top: 10px; color: #57524a; }

/* ---------- touch controls ---------- */
#touch { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
#tPad {
    position: absolute; left: 14px; bottom: 14px;
    width: 132px; height: 132px; pointer-events: auto;
}
#tPad button, #tBtns button {
    position: absolute; width: 44px; height: 44px;
    background: rgba(20,18,15,0.7); color: var(--ink-dim);
    border: 1px solid rgba(216,210,196,0.25);
    font-family: var(--mono); font-size: 15px;
    touch-action: none;
}
#tPad button:active, #tBtns button:active { background: rgba(80,66,44,0.8); color: #efe9da; }
#tPad [data-d="up"]    { left: 44px; top: 0; }
#tPad [data-d="left"]  { left: 0; top: 44px; }
#tPad [data-d="right"] { left: 88px; top: 44px; }
#tPad [data-d="down"]  { left: 44px; top: 88px; }
#tBtns { position: absolute; right: 14px; bottom: 22px; width: 108px; height: 108px; pointer-events: auto; }
#tBtns #tAct { right: 0; top: 26px; left: auto; width: 56px; height: 56px; position: absolute; }
#tBtns #tJr  { right: 66px; top: 40px; left: auto; position: absolute; }
#tMenu {
    position: absolute; right: 14px; top: 40px; pointer-events: auto;
    width: 40px; height: 36px;
    background: rgba(20,18,15,0.7); color: var(--ink-dim);
    border: 1px solid rgba(216,210,196,0.25);
    font-family: var(--mono); font-size: 16px;
    touch-action: none;
}
#tMenu:active { background: rgba(80,66,44,0.8); color: #efe9da; }
/* while text is on screen the pad only gets in the way — taps advance */
body.modal-open #tPad, body.modal-open #tBtns { visibility: hidden; }

@media (max-width: 700px) {
    #dlgText { font-size: 15px; }
    #hint { bottom: 160px; }
    #choices { bottom: 190px; }
    #hud { font-size: 10px; padding: 8px 10px; }
    #hudDate { max-width: 46vw; }
    #hudPlace { max-width: 46vw; }
    .meter-tr { width: 46px; }
    #hudMoney { min-width: 38px; }
    #tMenu { top: 34px; }
}
@media (max-height: 440px) {   /* phones in landscape */
    #dialog { bottom: 8px; padding: 8px 12px 10px; }
    #dlgText { font-size: 14px; min-height: 34px; }
    #choices { bottom: 96px; }
    #hint { bottom: 64px; }
    .card-inner { padding: 16px 0; }
    #cardTitle { font-size: 22px; }
    #cardBody { font-size: 14px; }
    #hud { padding: 6px 10px; }
    #tPad { transform: scale(0.85); transform-origin: bottom left; bottom: 8px; left: 8px; }
    #tBtns { bottom: 12px; }
    .ttl-name { font-size: 44px; }
    .ttl-sub { font-size: 14px; margin-bottom: 14px; }
    .ttl-kicker { margin-bottom: 8px; }
    .ttl-inner { padding: 16px 24px; }
}