/* Phobos EX — the KIM hacking simulator's skin (devdocs/custom-shells.md).
   The fiction's featureless black slab: a bottom strip inside #screen's flex
   column, so the transcript contracts to make room and expands back when the
   KIM retracts (max-height transition). Buttons glow red/blue; Siriusian
   glyphs get a luminous face. Touch targets stay >= 44px on small screens. */

#kim-panel {
    flex: 0 0 auto;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
    background: linear-gradient(180deg, #16161c 0%, #0b0b10 100%);
    border: 1px solid #2c2c38;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 18px rgba(0, 0, 0, 0.5);
    text-align: center;
}
#kim-panel.kim-open {
    max-height: 40vh;
    opacity: 1;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem 0.65rem;
}

.kim-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: #6f7285;
    margin-bottom: 0.45rem;
}
.kim-name { color: #9aa0b8; }
.kim-target { letter-spacing: 0.15em; }

.kim-grid {
    display: grid;
    gap: 0.4rem;
    justify-content: center;
    margin: 0 auto 0.5rem;
}
.kim-grid-9, .kim-grid-blue { grid-template-columns: repeat(9, minmax(44px, 56px)); }
.kim-grid-4 { grid-template-columns: repeat(4, minmax(44px, 64px)); }
.kim-grid-16 { grid-template-columns: repeat(8, minmax(44px, 52px)); }

/* Small screens: square-ish grids beat long rows (the bottom strip stays shallow). */
@media (max-width: 640px) {
    .kim-grid-9, .kim-grid-blue { grid-template-columns: repeat(3, minmax(44px, 1fr)); }
    .kim-grid-16 { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
    #kim-panel.kim-open { max-height: 60vh; }
}

.kim-btn {
    appearance: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    min-height: 44px;
    padding: 0.25rem 0.2rem;
    border-radius: 8px;
    border: 1px solid #33333f;
    background: #101016;
    color: #d8dbe8;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 0.95rem;
    cursor: pointer;
    transition: box-shadow 0.25s ease, background 0.25s ease, transform 0.08s ease;
}
.kim-btn:active, .kim-btn.kim-pressed { transform: scale(0.93); }

.kim-dark {
    box-shadow: inset 0 0 6px rgba(255, 60, 60, 0.35), 0 0 6px rgba(255, 60, 60, 0.35);
    border-color: #5a2530;
}
.kim-lit {
    background: #101a2a;
    box-shadow: inset 0 0 8px rgba(80, 160, 255, 0.55), 0 0 12px rgba(80, 160, 255, 0.6);
    border-color: #2b5f9e;
    color: #dcecff;
}

.kim-glyph {
    font-size: 1.15rem;
    color: #b9c8ff;
    text-shadow: 0 0 6px rgba(140, 170, 255, 0.8);
}
.kim-pos, .kim-num { font-size: 0.65rem; color: #7b7f95; }

.kim-reset {
    min-height: 34px;
    padding: 0.15rem 1.1rem;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: #c9a44a;
    border-color: #4a3b1e;
    box-shadow: inset 0 0 6px rgba(200, 160, 60, 0.25);
}

/* Solve: one bright pulse before the slab retracts (custom.js hides after it). */
#kim-panel.kim-solved {
    animation: kim-solve 0.8s ease;
}
@keyframes kim-solve {
    0% { box-shadow: 0 0 0 rgba(80, 160, 255, 0); }
    35% { box-shadow: 0 0 30px rgba(80, 160, 255, 0.9), inset 0 0 24px rgba(80, 160, 255, 0.35); }
    100% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
}

/* The purple door's wrong-five beep: a quick shake. */
#kim-panel.kim-shake {
    animation: kim-shake 0.4s ease;
}
@keyframes kim-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* --- DECK PLAN: the fog-of-war map strip -------------------------------------
   A bottom strip above the KIM in #screen's flex column. Cells sit in a fixed
   5x6 CSS grid; corridors are thin connector divs spanning the cells they join.
   While the KIM is open the map collapses to its header bar (.map-collapsed);
   tapping the header peeks it (.map-peek). */

#map-panel {
    flex: 0 0 auto;
    overflow: hidden;
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem 0.55rem;
    background: linear-gradient(180deg, #101318 0%, #0a0c10 100%);
    border: 1px solid #232a36;
    border-radius: 10px;
    max-height: 34vh;
    transition: max-height 0.35s ease, padding 0.35s ease;
}
#map-panel[hidden] { display: none; }

.map-header {
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: #6f8296;
    margin-bottom: 0.4rem;
    cursor: default;
}
#map-panel.map-collapsed {
    max-height: 1.6rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
#map-panel.map-collapsed .map-header { cursor: pointer; }
#map-panel.map-collapsed .map-header::after { content: "  \25B8"; }
#map-panel.map-collapsed.map-peek { max-height: 34vh; }

.map-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 76px));
    /* Rows, gaps, and labels scale with viewport height so the whole plan
       compresses smoothly into the panel's 34vh instead of clipping as soon as
       the window shortens (fits without cutoff down to ~430px tall; the floors
       keep cells tappable below that, where clipping becomes inevitable). */
    grid-template-rows: repeat(6, clamp(13px, 3.6vh, 34px));
    gap: clamp(2px, 0.7vh, 6px);
    justify-content: center;
    position: relative;
}

.map-cell {
    appearance: none;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #2b3547;
    background: #131824;
    color: #aebedc;
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: clamp(0.5rem, 1.7vh, 0.68rem);
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
}
button.map-cell { cursor: pointer; }
button.map-cell:active { transform: scale(0.95); }

.map-seen {
    background: #16233a;
    box-shadow: inset 0 0 6px rgba(80, 140, 255, 0.25);
}
.map-here {
    background: #1c2f4e;
    border-color: #3f6db3;
    box-shadow: inset 0 0 8px rgba(90, 160, 255, 0.5), 0 0 10px rgba(90, 160, 255, 0.35);
    color: #e2edff;
}
.map-frontier {
    /* Opaque, matching the panel: cells paint over the corridor bars, so a
       corridor visually stops at the frontier's border instead of running
       through the unseen room (a transparent fill let it show through). */
    background: #0d0f14;
    border-style: dashed;
    border-color: #37415a;
    color: #5d6880;
}

.map-you {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd54a;
    box-shadow: 0 0 6px rgba(255, 213, 74, 0.9);
    animation: map-you-pulse 1.6s ease infinite;
}
@keyframes map-you-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Corridors: centered thin bars spanning the joined cells (under the cells). */
.map-edge {
    z-index: 0;
    align-self: center;
    justify-self: center;
    background: #2a3348;
    border-radius: 2px;
}
.map-edge-h { height: 3px; width: 100%; }
.map-edge-v { width: 3px; height: 100%; }

@media (max-width: 640px) {
    .map-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: repeat(6, clamp(13px, 3.6vh, 30px));
    }
    #map-panel { max-height: 42vh; }
    #map-panel.map-collapsed.map-peek { max-height: 42vh; }
}