/* CursorDungeon in the browser (ADR-0056): a terminal on a phone. */
/* A lantern-lit terminal: candle-paper text on slate, brass for the
   prompt and the title (Snik's key), steel blue for what you typed. */
:root {
    --bg: #eceff2;
    --panel: #dfe4e9;
    --text: #1c2229;
    --muted: #5d6874;
    --accent: #85570f;
    --echo: #2c5d78;
    --line: #c3cbd4;
    --danger: #a3372a;
    --font-size: 16px;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14181d;
        --panel: #1c2128;
        --text: #e4dccb;
        --muted: #8b8f93;
        --accent: #d9a441;
        --echo: #8db4cc;
        --line: #2b323b;
        --danger: #ee8b74;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #14181d;
    --panel: #1c2128;
    --text: #e4dccb;
    --muted: #8b8f93;
    --accent: #d9a441;
    --echo: #8db4cc;
    --line: #2b323b;
    --danger: #ee8b74;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: var(--font-size);
    line-height: 1.4;
    overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }

.app { display: flex; flex-direction: column; height: 100%; max-width: 900px; margin: 0 auto; }

/* ----- menu ----- */
.menu { flex: 1; overflow-y: auto; padding: 24px 16px; }
.title { font-size: 1.6em; font-weight: 700; color: var(--accent); min-height: 1.4em; margin: 0; }
.title .cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.version { color: var(--muted); margin: 2px 0 20px; }
.version + .version { margin-top: -16px; }
.menu-body { animation: appear .4s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(4px); } }
.games { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.games button { width: 100%; text-align: left; padding: 12px; }
.games button .note { display: block; color: var(--muted); font-size: .85em; }
.menu p { color: var(--muted); margin: 0 0 12px; }
.file-label { display: inline-block; }
.file-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.error { color: var(--danger); }

/* ----- game ----- */
.bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.statusline { flex: 1; min-width: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.bar button { padding: 2px 8px; font-size: .85em; }
.out {
    flex: 1; overflow-y: auto; padding: 12px 16px;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.out .echo { color: var(--echo); }
.out .note { color: var(--muted); font-style: italic; }
.inputbar {
    display: flex; gap: 8px; align-items: center;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel);
}
.prompt { color: var(--accent); }
.inputbar input {
    flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px;
}
.measure { position: absolute; visibility: hidden; white-space: pre; }
.confirm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.confirm span { flex: 1 1 12em; }
@media (prefers-reduced-motion: reduce) {
    .title .cursor, .menu-body { animation: none; }
}