/* SKOGARK — terminal styling, mirroring the native dark/monospace look. */

:root { color-scheme: dark; }

* { box-sizing: border-box; }

/* The hidden attribute must win over the #menu/#game display rules below
   (author ID selectors otherwise override the UA [hidden] { display:none }). */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    background: #000;
}

body {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    color: #e6e6e6;
}

#app {
    position: relative;
    display: flex;
    flex-direction: column;
    /* dvh keeps the layout correct as the mobile keyboard resizes the viewport. */
    height: 100vh;
    height: 100dvh;
    max-width: 900px;
    margin: 0 auto;
}

/* ---- Scene pane (location artwork above the transcript) ----
   A fixed-height pane between the title bar and the transcript, so the
   commentary scrolls below the image rather than over it. */

#scene {
    position: relative;   /* anchors the layers, cat sprite, and arrival card */
    flex: 0 0 60%;
    min-height: 0;
    overflow: hidden;
    border-bottom: 1px solid #222;
    background: #000;   /* fallback when a room has no art */
    pointer-events: none;
}

.scene-layer {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.scene-layer.visible { opacity: 1; }

/* ---- Menu ---- */

#menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
}

#menu h1 {
    margin: 0;
    font-size: clamp(36px, 9vw, 52px);
    font-weight: 800;
    color: #4ade80;
    letter-spacing: 2px;
}

#menu .tagline {
    margin: 0 0 18px;
    color: #8a8a8a;
    font-size: 15px;
}

#scenarioList {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 480px;
}

.scenario {
    display: block;
    width: 100%;
    text-align: left;
    background: #191919;
    border: 1px solid #3a3a3a;
    border-radius: 12px;
    padding: 16px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scenario:hover,
.scenario:focus-visible {
    background: #202020;
    border-color: #4ade80;
    outline: none;
}

.scenario-title {
    font-size: 20px;
    font-weight: 600;
    color: #4ade80;
    margin-bottom: 6px;
}

.scenario-blurb {
    font-size: 13px;
    line-height: 1.4;
    color: #b0b0b0;
}

/* Destination cards on the opening screen: name over a slice of that
   destination's artwork. */
.scenario.destination {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
}

.scenario.destination .scenario-blurb {
    color: #d8d8d8;
}

.menu-back {
    background: none;
    border: none;
    color: #4ade80;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    padding: 8px;
    align-self: flex-start;
}

.menu-back:hover,
.menu-back:focus-visible {
    text-decoration: underline;
    outline: none;
}

/* ---- Game ---- */

#game {
    position: relative;   /* anchors the location flash and cat sprite */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#titlebar {
    display: flex;
    flex-wrap: wrap;   /* let controls wrap to a second row instead of vanishing */
    align-items: center;
    gap: 8px 12px;
    padding: 8px 16px;
    border-bottom: 1px solid #222;
    background: rgba(0, 0, 0, 0.55);   /* translucent so artwork shows behind */
}

#menuButton {
    background: transparent;
    border: none;
    color: #4ade80;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 0;
}

#gameTitle {
    margin-left: auto;
    color: #9a9a9a;
    font-size: 14px;
    font-weight: 600;
}

#hintButton,
#voiceButton {
    background: transparent;
    border: 1px solid #333;
    border-radius: 6px;
    color: #4ade80;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 3px 8px;
}

#voiceButton[aria-pressed="false"] {
    color: #6b6b6b;
    border-color: #2a2a2a;
}

#transcript {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 8px;
}

.entry {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.45;
    white-space: pre-wrap;   /* preserve the engine's newlines and spacing */
    word-break: break-word;
}

.entry.cmd { color: #4ade80; }   /* commands the player typed */
.entry.out { color: #e6e6e6; }   /* game output */

#inputBar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #222;
    background: rgba(0, 0, 0, 0.55);   /* translucent so artwork shows behind */
}

.prompt {
    color: #4ade80;
    font-size: 16px;
}

#command {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #4ade80;
    font: inherit;
    font-size: 16px;   /* >=16px avoids iOS auto-zoom on focus */
    caret-color: #4ade80;
}

#command::placeholder { color: #2f7a4a; }

button[type="submit"] {
    flex: 0 0 auto;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

button[type="submit"]:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---- Arrival location card ---- */

#locationFlash {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    padding: 12px 22px;
    border: 1px solid rgba(74, 222, 128, 0.5);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #4ade80;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#locationFlash.show { opacity: 1; }

/* ---- Fishmonger's stray cat ---- */

#catSprite {
    position: absolute;
    right: 16px;
    bottom: 8px;
    width: 130px;
    height: 150px;
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#catSprite.visible { opacity: 1; }

/* ---- Tap-action chips (a hybrid layer over the parser) ----
   A horizontally scrollable row of one-tap commands, built from the current
   room state each turn. Typing still works exactly as before. */

#actionBar {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 8px 12px;
    border-top: 1px solid #222;
    background: rgba(0, 0, 0, 0.45);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

#actionBar:empty { display: none; }

/* Hide the scrollbar on WebKit for a cleaner chip row. */
#actionBar::-webkit-scrollbar { height: 0; }

.chip {
    flex: 0 0 auto;
    min-height: 40px;
    background: #1b1b1b;
    border: 1px solid #3a3a3a;
    border-radius: 999px;
    color: #e6e6e6;
    font: inherit;
    font-size: 14px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.chip:hover,
.chip:focus-visible {
    background: #262626;
    border-color: #4ade80;
    outline: none;
}

.chip:active { background: #303030; }

/* Movement chips lead with the destination and read in the game's accent. */
.chip.move { color: #4ade80; border-color: #2f7a4a; }

/* Give chips get a warm tint so they read as a deliberate hand-off. */
.chip.give { color: #f6c177; border-color: #6b5326; }

/* Utility chips (Look / Items / Play again) sit quieter at the end. */
.chip.util { color: #9a9a9a; border-color: #2a2a2a; font-size: 13px; }