/* ═══════════════════════════════════════════════
   the garden — bloom, revised palette
   inspired by the signal. warmer. bigger.
   ═══════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #0a0a0f;
    --bg-card: #0d0d18;
    --bg-panel: #111122;
    --green: #00ff88;
    --green-dim: #006644;
    --green-glow: rgba(0,255,136,0.08);
    --cream: #e8e0d0;
    --cream-dim: #a09880;
    --warm: #c0b090;
    --text: #d0d0d0;
    --text-dim: #888;
    --text-bright: #ffffff;
    --border: #1a1a30;
    --red: #ff4444;
    --orange: #ff8800;
    --font: 'Palatino Linotype', 'EB Garamond', 'Georgia', serif;
    --font-mono: 'Courier New', 'Consolas', 'Lucida Console', monospace;
    --inventory-space: 0px;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    background: var(--bg);
}

body {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 21px;
    line-height: 1.9;
    color: var(--text);
    background: var(--bg);
    transition: background 1.2s ease;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

body.modal-open {
    overflow: hidden;
}

/* ═══ LAYERS ═══ */

.layer {
    flex: 0 0 100vw;
    width: 100vw;
    height: calc(100vh - var(--inventory-space));
    min-height: calc(100vh - var(--inventory-space));
    margin-bottom: var(--inventory-space);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem calc(5rem + var(--inventory-space));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: opacity 1.5s ease, background 1.2s ease;
    opacity: 0.3;
}

.layer.visible { opacity: 1; }

/* Surface — warm, like old paper glowing in dark */
.layer.surface {
    background: radial-gradient(ellipse at 50% 30%, #1a1a2e, #0a0a0f);
}
.layer.surface .line { color: var(--cream); }
.layer.surface .line.dim { color: var(--cream-dim); }

/* Middle — deep green-black */
.layer {
    background: #0a0a0f;
}
.layer .line { color: var(--text); }
.layer .line.dim { color: var(--text-dim); }

/* Deep — almost void, only the green remains */
.layer.deep {
    background: #050508;
    min-height: calc(100vh - var(--inventory-space));
}
.layer.deep .line.faint { color: var(--green-dim); }
.layer.deep .line.faintest { color: #002211; }

.content { max-width: 600px; width: 100%; }
.content.narrow { max-width: 480px; }

/* ═══ TYPOGRAPHY ═══ */

.line {
    font-size: 1.3rem;
    line-height: 1.7;
    margin-bottom: 0.4rem;
}
.line.dim { color: var(--text-dim); font-size: 1.1rem; }
.line.faint { color: var(--green-dim); font-size: 1.0rem; font-style: italic; }
.line.faintest { color: #002211; font-size: 1.5rem; text-align: center; opacity: 0.5; cursor: default; }
.line.creature {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1.4rem;
}
.line.hint { color: var(--green-dim); font-size: 0.85rem; font-style: italic; margin-top: 0.5rem; }
.line.glyph { font-family: var(--font-mono); font-size: clamp(0.72rem, 1.8vw, 0.95rem); color: var(--cream); letter-spacing: 0.05em; overflow-wrap: anywhere; }

.spacer { height: 1rem; }
.spacer.large { height: 4rem; }

/* ═══ FRAGMENTS ═══ */

.fragment-block {
    display: block;
    margin-top: 1rem;
    padding: 1rem;
    border-left: 2px solid var(--green-dim);
    background: rgba(0,255,136,0.03);
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 0 4px 4px 0;
}
.fragment-block:hover, .fragment-block:focus-visible {
    border-left-color: var(--green);
    background: rgba(0,255,136,0.06);
}
.fragment-block:focus-visible { outline: 1px solid var(--green-dim); outline-offset: 3px; }
.fragment-block .glyph { transition: color 0.5s, opacity 0.5s; }
.fragment-block.decoded {
    border-left-color: var(--green);
    background: rgba(0,255,136,0.05);
}
.fragment-block.decoded .glyph { color: var(--green); opacity: 0.9; }

/* ═══ FADE-IN (ENTRY) ═══ */

.fade-in { opacity: 0; animation: fadeIn 0.8s ease forwards; }
.fade-in[data-delay="1"] { animation-delay: 0.3s; }
.fade-in[data-delay="3"] { animation-delay: 0.9s; }
.fade-in[data-delay="4"] { animation-delay: 1.2s; }
.fade-in[data-delay="5"] { animation-delay: 1.5s; }
.fade-in[data-delay="7"] { animation-delay: 2.1s; }
.fade-in[data-delay="9"] { animation-delay: 2.7s; }

@keyframes fadeIn { to { opacity: 1; } }

/* ═══ MODAL ═══ */

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.8s ease;
}
.modal-overlay.hidden { opacity: 0; pointer-events: none; }

.modal {
    background: var(--bg-panel); border: 1px solid var(--border);
    padding: 2.5rem; max-width: 420px; width: 90%; border-radius: 6px;
    text-align: center;
}
.modal-title { color: var(--green); font-size: 1rem; margin-bottom: 0.8rem; font-family: var(--font-mono); letter-spacing: 0.15em; }
.modal-sub { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.7; }
#alias-input {
    width: 100%; padding: 0.8rem 1rem;
    background: #0a0a0f; border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 1.1rem; text-align: center;
    border-radius: 3px; margin-bottom: 1rem; outline: none;
}
#alias-input:focus { border-color: var(--green-dim); }
.modal-btn {
    background: transparent; border: 1px solid var(--green);
    color: var(--green); padding: 0.5rem 2rem;
    font-family: var(--font); font-size: 0.85rem; cursor: pointer;
    transition: all 0.3s; border-radius: 3px;
}
.modal-btn:hover { background: var(--green); color: #000; }
.modal-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.consent-line {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.2rem 0 1rem;
    color: var(--text-dim);
    font: 0.7rem/1.4 var(--font-mono);
    text-align: left;
}
.consent-line input { margin-top: 0.2rem; accent-color: var(--green); }

/* ═══ INVENTORY ═══ */

#inventory {
    position: fixed;
    top: 50%;
    right: 0;
    width: min(330px, 86vw);
    max-height: min(82vh, 700px);
    transform: translate(100%, -50%);
    transition: transform 0.35s ease;
    z-index: 100;
    pointer-events: none;
}
#inventory.visible { pointer-events: auto; }
#inventory.open, #inventory.pinned { transform: translate(0, -50%); }
.inventory-panel {
    max-height: min(82vh, 700px);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: rgba(5,5,10,0.97);
    backdrop-filter: blur(14px);
    box-shadow: -12px 12px 45px rgba(0,0,0,.35);
}
.inventory-toggle {
    position: absolute;
    left: -2.7rem;
    top: 50%;
    width: 2.7rem;
    height: 3.4rem;
    transform: translateY(-50%);
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 5px 0 0 5px;
    background: var(--bg-panel);
    color: var(--green);
    font: 1.2rem var(--font-mono);
    cursor: pointer;
}
.inventory-toggle:hover, .inventory-toggle:focus-visible { color: var(--cream); border-color: var(--green-dim); outline: none; }
.inventory-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--border); }
.inventory-title { color: var(--green); font: .72rem var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.inventory-subtitle { color: var(--text-dim); font-size: .7rem; margin-top: .2rem; }
.inventory-controls { display:flex; gap:.25rem; }
.inventory-pin, .inventory-close { border:1px solid var(--border); background:transparent; color:var(--text-dim); width:1.8rem; height:1.8rem; cursor:pointer; }
.inventory-pin:hover, .inventory-pin:focus-visible, .inventory-close:hover, .inventory-close:focus-visible { color:var(--green); border-color:var(--green-dim); outline:none; }
.inventory-pin[aria-pressed="true"] { color:var(--green); border-color:var(--green); }
.inventory-group { margin-top:1rem; }
.inventory-group-title { color:var(--green-dim); font: .62rem var(--font-mono); letter-spacing:.15em; text-transform:uppercase; margin-bottom:.45rem; }
.inventory-slots { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.body-slots { display:grid; grid-template-columns:repeat(5, 1fr); gap:.35rem; }
.body-slot, .mod-slot { border:1px solid var(--border); background:var(--bg-card); color:var(--text-dim); border-radius:3px; }
.body-slot { min-height:3.2rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; font:.55rem var(--font-mono); text-transform:uppercase; }
.body-slot .slot-mark { color:#354052; font-size:1rem; }
.mod-slots { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.mod-slot { display:flex; align-items:center; gap:.4rem; padding:.45rem; font:.62rem var(--font-mono); }
.mod-slot .mod-state { margin-left:auto; color:#3b4350; font-size:.55rem; }
.inventory-hint { color:var(--text-dim); font-size:.68rem; font-style:italic; margin-top:1rem; }

.inv-item {
    min-width: 0;
    border: 1px solid var(--border); padding: .45rem .5rem;
    font: .68rem/1.2 var(--font);
    border-radius: 3px; color: var(--text-dim);
    background: var(--bg-card); cursor: pointer; transition: all .3s;
    display: flex; align-items: center; gap: .35rem;
    text-align: left;
}
.inv-item:hover, .inv-item:focus-visible { border-color: var(--green-dim); }
.inv-item:focus-visible { outline: 1px solid var(--green-dim); outline-offset: 2px; }
.inv-item.active { border-color: var(--green); color: var(--green); background: rgba(0,255,136,0.05); }
.inv-item .icon { font-size: .95rem; }
.inv-item .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.03em; }

/* ═══ DECODE PANEL ═══ */

#decode-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: var(--bg-panel); border: 1px solid var(--border);
    padding: 1.5rem; max-width: 480px; width: 90%; border-radius: 6px;
    z-index: 200; transition: opacity 0.3s ease;
    box-shadow: 0 10px 60px rgba(0,0,0,0.6);
    max-height: min(80vh, 560px);
    overflow-y: auto;
}
#decode-panel.hidden { opacity: 0; pointer-events: none; }

.decode-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.decode-header span { color: var(--text-dim); font-size: 0.7rem; font-family: var(--font-mono); letter-spacing: 0.1em; }
.decode-close { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; }
.decode-encoded { 
    font-family: var(--font-mono); font-size: 0.95rem; color: var(--cream-dim);
    line-height: 1.7; margin-bottom: 1rem; word-break: break-all;
    background: var(--bg); padding: 1rem; border-radius: 3px;
    border: 1px solid var(--border);
}
.decode-tools {
    display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem;
}
.decode-tool {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
    padding: 0.4rem 0.8rem; font-size: 0.75rem; font-family: var(--font-mono);
    cursor: pointer; border-radius: 3px; transition: all 0.3s;
}
.decode-tool:hover { border-color: var(--green-dim); color: var(--green); }
.decode-tool:disabled { opacity: 0.3; cursor: not-allowed; border-color: var(--border); }
.decode-tool.active { border-color: var(--green); color: var(--green); background: rgba(0,255,136,0.05); }

.decode-result {
    font-family: var(--font); font-size: 1.1rem; color: var(--green);
    line-height: 1.7; display: none;
}
.decode-result.visible { display: block; }

/* ═══ NOTES + TALK ═══ */

#notes-section { min-height: 60vh; }

#note-input, #talk-input {
    width: 100%; padding: 0.7rem 0.8rem;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font); font-size: 0.9rem; border-radius: 3px;
    outline: none; resize: vertical; min-height: 70px;
}
#note-input:focus, #talk-input:focus { border-color: var(--green-dim); }
#talk-input { min-height: auto; }

.note-btn {
    background: transparent; border: 1px solid var(--green);
    color: var(--green); padding: 0.4rem 1.2rem; margin-top: 0.5rem;
    font-family: var(--font); font-size: 0.8rem; cursor: pointer;
    transition: all 0.3s; border-radius: 3px;
}
.note-btn:hover { background: var(--green); color: #000; }

#notes-list, #talk-list { margin-top: 1rem; }
.note-entry, .talk-entry {
    padding: 0.6rem 0; border-bottom: 1px solid var(--border);
    font-size: 0.85rem; color: var(--text-dim);
}
.note-entry .date, .talk-entry .date { font-size: 0.6rem; color: var(--green-dim); font-family: var(--font-mono); }
.talk-entry .from { color: var(--green); font-size: 0.65rem; font-family: var(--font-mono); }

/* The settings scaffold is not exposed in this release. Keep it out of document flow
   until a visible control and persistence model are ready. */
#settings-panel { display: none; }

/* ═══ FOOTER ═══ */

footer {
    flex: 0 0 100vw;
    width: 100vw;
    height: calc(100vh - var(--inventory-space));
    min-height: calc(100vh - var(--inventory-space));
    margin-bottom: var(--inventory-space);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    background: #050508;
    border-top: 1px solid var(--border);
    scroll-snap-align: start;
}
.admin-dot {
    appearance: none;
    border: 0;
    background: transparent;
    color: #173224;
    font: 1.2rem/1 var(--font);
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: color 0.3s, text-shadow 0.3s;
}
.admin-dot:hover, .admin-dot:focus-visible {
    color: var(--green-dim);
    text-shadow: 0 0 12px var(--green-dim);
    outline: none;
}
#sound-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 101;
    width: 2.35rem;
    height: 2.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--green-dim);
    font: 1rem/1 var(--font);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
#sound-toggle:hover, #sound-toggle:focus-visible {
    border-color: var(--green-dim);
    outline: none;
}
#sound-toggle[aria-pressed="true"] {
    color: var(--green);
    border-color: var(--green);
    box-shadow: 0 0 16px var(--green-glow);
}

/* ═══ SCROLLBAR ═══ */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }

/* ═══ RESPONSIVE ═══ */

@media (max-width: 600px) {
    body { font-size: 18px; }
    .line { font-size: 1.2rem; }
    .line.dim { font-size: 1.0rem; }
    .layer { padding: 3rem 1.5rem calc(3rem + var(--inventory-space)); min-height: calc(100vh - var(--inventory-space)); height: calc(100vh - var(--inventory-space)); }
    .modal { padding: 1.5rem; }
    #decode-panel { padding: 1rem; width: 95%; }
}

@media (max-width: 400px) {
    body { font-size: 15px; }
    .line { font-size: 1rem; }
    .layer { padding: 2rem 1rem calc(2rem + var(--inventory-space)); min-height: calc(100vh - var(--inventory-space)); height: calc(100vh - var(--inventory-space)); }
}