/* ── The city is the page ─────────────────────────────────────────────────
   Loaded after menu.css, which still styles the panels and modals. What is
   overridden here is only the old page frame: the city takes the window and
   everything else floats on top of it. */

html, body {
    margin: 0;
    height: 100%;
    background: #0a0a14;
    overflow: hidden;              /* the stage does the scrolling, not the page */
}

/* The city covers the window and is panned rather than shrunk, so a dense
   map keeps its detail on a phone instead of becoming a thumbnail. The
   stage scrolls; map.js centres it on the way in. */
#city-stage {
    position: fixed;
    inset: 0;
    overflow: auto;
    background: #0a0a14;
    -webkit-overflow-scrolling: touch;
}
#map {
    --city-w: max(100vw, calc(100vh * 1.44), 1240px);
    width: var(--city-w);
    height: calc(var(--city-w) / 1.44);
    line-height: 0;
}
#map-svg { display: block; width: 100%; height: 100%; }

/* ── Floating UI ──────────────────────────────────────────────────────────
   One fixed layer that ignores the pointer, so the city underneath stays
   reachable everywhere the panels are not. */
#hud {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}
#hud > * { pointer-events: auto; }

#hud-title {
    position: absolute;
    top: 18px; left: 22px;
    font-family: 'Courier New', monospace;
    text-shadow: 0 2px 18px #000, 0 0 40px #000;
}
.ht-sub {
    font-size: 10px;
    letter-spacing: .42em;
    color: #4488cc;
    margin-bottom: 4px;
}
.ht-name {
    font-size: 40px;
    line-height: .92;
    font-weight: bold;
    letter-spacing: .04em;
    color: #ccaa44;
    text-shadow: 0 0 26px rgba(204,170,68,.5), 0 3px 0 #2a2010, 0 2px 20px #000;
}
.ht-hint {
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: .1em;
    color: #8a8aa0;
    text-shadow: 0 1px 6px #000;
}

#skubu-badge {
    position: absolute;
    top: 18px; right: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    background: rgba(8,10,20,.82);
    backdrop-filter: blur(3px);
}

#global-lb {
    position: absolute;
    right: 20px; bottom: 18px;
    width: 268px;
    max-height: 42vh;
    overflow: hidden;
    margin: 0;
    background: rgba(8,10,20,.86);
    backdrop-filter: blur(3px);
}
#global-lb-list { max-height: 30vh; overflow-y: auto; }

#footer {
    position: absolute;
    left: 22px; bottom: 16px;
    margin: 0;
    text-shadow: 0 1px 6px #000;
}

/* On a phone the leaderboard would cover the city, so it folds away to its
   header and opens on a tap. */
@media (max-width: 760px) {
    #hud-title { top: 12px; left: 14px; }
    .ht-name { font-size: 30px; }
    .ht-hint { display: none; }
    #skubu-badge { top: 12px; right: 12px; padding: 6px 9px; font-size: 11px; }
    #global-lb {
        right: 12px; bottom: 12px; left: 12px;
        width: auto; max-height: 34px;
        transition: max-height .22s ease;
    }
    #global-lb.open { max-height: 46vh; }
    #global-lb-list { max-height: 32vh; }
    #footer { display: none; }
}

/* ── Venues ───────────────────────────────────────────────────────────── */

.venue { cursor: pointer; outline: none; }
.venue .v-disc,
.venue .v-icon,
.venue .v-halo { transition: transform .16s ease, opacity .16s ease; }
.venue .v-hit { cursor: pointer; }

.v-name {
    font-family: monospace;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: .04em;
    fill: #e8edf6;
    paint-order: stroke;
    stroke: #06060c;
    stroke-width: 5px;
    stroke-linejoin: round;
}
.v-tag {
    font-family: monospace;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .2em;
    fill: #ffc83d;
    paint-order: stroke;
    stroke: #06060c;
    stroke-width: 5px;
}

/* A place you can play pulses gently, so the city says where the game is
   without needing a legend. */
.venue-play .v-halo { animation: venuePulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes venuePulse {
    0%, 100% { opacity: .30; }
    50%      { opacity: .66; }
}

.venue:hover .v-disc,
.venue:focus-visible .v-disc { stroke-width: 4; }
.venue:hover .v-name,
.venue:focus-visible .v-name { fill: #ffffff; }
.venue:focus-visible .v-halo { opacity: .9; }

.venue { transition: transform .16s ease; transform-box: fill-box; transform-origin: center; }
.venue:hover, .venue:focus-visible { transform: translateY(-3px); }

/* ── A city that moves ────────────────────────────────────────────────────
   Along the grid, not across the screen. One tile is (31, 15.5) going one
   way and (-31, 15.5) going the other, so each direction gets its own
   keyframes — animate them all the same way and the cars leave the road.
   Decoration only, so it is dropped for anyone who asked for less motion. */
.rolls-x, .rolls-xr, .rolls-y, .walks-x, .walks-xr, .walks-y { will-change: transform; }

.rolls-x  { animation: rollX  30s linear infinite; }
.rolls-xr { animation: rollXR 34s linear infinite; }
.rolls-y  { animation: rollY  38s linear infinite; }
.walks-x  { animation: walkX  64s linear infinite; }
.walks-xr { animation: walkXR 72s linear infinite; }
.walks-y  { animation: walkY  68s linear infinite; }

@keyframes rollX  { from { transform: translate(-62px, -31px); }  to { transform: translate(558px, 279px); } }
@keyframes rollXR { from { transform: translate(558px, 279px); }  to { transform: translate(-62px, -31px); } }
@keyframes rollY  { from { transform: translate(62px, -31px); }   to { transform: translate(-558px, 279px); } }
@keyframes walkX  { from { transform: translate(-31px, -15.5px); } to { transform: translate(434px, 217px); } }
@keyframes walkXR { from { transform: translate(434px, 217px); }   to { transform: translate(-31px, -15.5px); } }
@keyframes walkY  { from { transform: translate(31px, -15.5px); }  to { transform: translate(-434px, 217px); } }

@media (prefers-reduced-motion: reduce) {
    .rolls-x, .rolls-xr, .rolls-y, .walks-x, .walks-xr, .walks-y { animation: none; }
    .venue-play .v-halo { animation: none; opacity: .5; }
}

/* Arrival notice after travelling between cities. */
#arrive {
    position: absolute;
    top: 42%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 26px;
    border: 1px solid #3a4a2a;
    border-radius: 12px;
    background: rgba(8,12,8,.88);
    font-family: monospace;
    font-size: 15px;
    letter-spacing: .18em;
    color: #9ad86a;
    text-shadow: 0 0 18px rgba(154,216,106,.5);
    pointer-events: none;
    transition: opacity .6s ease;
}
#arrive.gone { opacity: 0; }

.ht-where {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #9ad86a;
    text-shadow: 0 1px 8px #000;
}

/* ── Living in the city ───────────────────────────────────────────────── */

#life-strip {
    position: absolute;
    top: 64px; right: 20px;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 8px;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    background: rgba(8,10,20,.84);
    font-family: monospace;
}
#life-avatar { width: 44px; height: 60px; flex: 0 0 44px; }
.ls-col { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
#life-skubu-wrap { color: #ffcc22; font-size: 13px; }
#life-day  { color: #7f8aa0; }
#life-home { color: #5f6a80; }

/* Make a person */
#create-grid { display: flex; gap: 20px; align-items: flex-start; }
#create-preview {
    flex: 0 0 148px; height: 228px;
    border: 1px solid #22222e; border-radius: 10px;
    background: linear-gradient(#1b1b27, #111119);
}
#create-opts { flex: 1 1 auto; min-width: 0; }
#create-opts label, .citylabel {
    display: block; margin: 10px 0 5px;
    font-family: monospace; font-size: 9px; letter-spacing: .18em;
    color: #5f6a80; text-transform: uppercase;
}
#create-opts label:first-child { margin-top: 0; }
#create-name {
    width: 100%; box-sizing: border-box; padding: 7px 9px;
    border: 1px solid #2a2a3a; border-radius: 7px;
    background: #10101a; color: #e8edf6;
    font-family: monospace; font-size: 13px; letter-spacing: .1em;
}
.optrow { display: flex; flex-wrap: wrap; gap: 6px; }
.sw {
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid #2a2a3a; cursor: pointer; padding: 0;
}
.sw.on { border-color: #ccaa44; box-shadow: 0 0 0 1px #ccaa44; }
.chip {
    padding: 5px 10px; border-radius: 7px;
    border: 1px solid #2a2a3a; background: #16161f;
    color: #9aa3b4; font-family: monospace; font-size: 11px; cursor: pointer;
}
.chip.on { border-color: #ccaa44; color: #ffd766; background: #211d14; }

#opt-city { display: flex; gap: 10px; flex-wrap: wrap; }
.citycard {
    flex: 1 1 200px; text-align: left; cursor: pointer;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid #2a2a3a; background: #16161f;
    display: flex; flex-direction: column; gap: 3px;
    font-family: monospace;
}
.citycard.on { border-color: #ccaa44; background: #211d14; }
.cc-name { font-size: 14px; color: #e8edf6; letter-spacing: .06em; }
.cc-note { font-size: 10px; color: #7f8aa0; }
.cc-nums { font-size: 10px; color: #ccaa44; }

#create-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
#create-actions button {
    padding: 9px 16px; border-radius: 8px; cursor: pointer;
    font-family: monospace; font-size: 12px; letter-spacing: .08em;
}
#create-actions .ghost { border: 1px solid #2a2a3a; background: transparent; color: #9aa3b4; }
#create-actions .primary { border: 1px solid #ccaa44; background: #2a2212; color: #ffd766; }

/* Estate agent and travel share a row */
.est-head {
    display: flex; justify-content: space-between;
    font-family: monospace; font-size: 10px; letter-spacing: .14em;
    color: #5f6a80; text-transform: uppercase; margin: 14px 0 8px;
}
.est-bal { color: #ffcc22; }
.est-now { font-family: monospace; font-size: 12px; color: #9aa3b4; margin-bottom: 10px; }
.est-now b { color: #e8edf6; }
.est-row {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
    align-items: center; padding: 9px 0; border-top: 1px solid #1c1c26;
}
.est-row.on { background: rgba(204,170,68,.06); }
.est-name { font-family: monospace; font-size: 13px; color: #e8edf6; }
.est-sub  { font-family: monospace; font-size: 10px; color: #5f6a80; grid-column: 1; }
.est-btn {
    grid-row: 1 / span 2; padding: 7px 12px; border-radius: 7px; cursor: pointer;
    border: 1px solid #ccaa44; background: #211d14; color: #ffd766;
    font-family: monospace; font-size: 11px; letter-spacing: .06em;
}
.est-btn[disabled] { border-color: #2a2a3a; background: #14141c; color: #4a5468; cursor: default; }
.trv-to { font-family: monospace; font-size: 14px; color: #e8edf6; margin-bottom: 6px; }
.est-none { font-family: monospace; font-size: 12px; color: #7f8aa0; }

/* Taking it is not the same button as buying it, and should not look it. */
.est-btn.take {
    border-color: #a8452f;
    background: #2a1410;
    color: #ff9a7a;
}
.shop-note {
    margin-top: 14px; padding-top: 10px; border-top: 1px solid #1c1c26;
    font-family: monospace; font-size: 10px; line-height: 1.5; color: #5f6a80;
}
.est-name small { color: #5f6a80; font-size: 10px; }

/* ── The journey ──────────────────────────────────────────────────────── */

#journey {
    position: fixed; inset: 0; z-index: 400;
    display: none;
    flex-direction: column;
    background: #06060c;
    opacity: 0; transition: opacity .3s ease;
}
#journey.on { display: flex; opacity: 1; }

.jr-art { position: relative; flex: 1 1 auto; overflow: hidden; min-height: 44vh; }
.jr-art svg { width: 100%; height: 100%; display: block; }

.jr-panel {
    flex: 0 0 auto; padding: 22px 26px 26px;
    font-family: monospace; background: #06060c;
    border-top: 1px solid #1c1c26;
}
.jr-route { font-size: 16px; color: #e8edf6; letter-spacing: .06em; }
.jr-route span { color: #ccaa44; margin: 0 8px; }
.jr-clock {
    font-size: 40px; font-weight: bold; color: #ffd766;
    letter-spacing: .06em; margin: 6px 0 14px;
    text-shadow: 0 0 24px rgba(255,215,102,.35);
}
.jr-track {
    height: 8px; border-radius: 4px; background: #16161f; overflow: hidden;
    box-shadow: inset 0 0 0 1px #23232f;
}
.jr-fill {
    width: 0%; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #8a6a14, #ffd766);
    box-shadow: 0 0 12px rgba(204,170,68,.5);
}
.jr-meta {
    display: flex; justify-content: space-between; gap: 10px;
    margin-top: 10px; font-size: 10px; letter-spacing: .1em; color: #5f6a80;
}
.jr-skip {
    position: absolute; top: 18px; right: 20px;
    padding: 7px 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid #2a2a3a; background: rgba(6,6,12,.7); color: #9aa3b4;
    font-family: monospace; font-size: 11px; letter-spacing: .1em;
}

/* Everything that moves does so by sliding the same way the vehicle faces. */
.jr-scroll { animation: jrScroll 2.4s linear infinite; }
@keyframes jrScroll { from { transform: translateX(0); } to { transform: translateX(-676px); } }

.jr-plane { animation: jrCross 4.2s ease-in-out infinite; }
.jr-train, .jr-bus { animation: jrCross 3.4s ease-in-out infinite; }
@keyframes jrCross {
    0%   { transform: translate(-180px, 56px); }
    50%  { transform: translate(300px, 40px); }
    100% { transform: translate(760px, 56px); }
}
.jr-plane { transform-origin: center; }

.jr-cloud { animation: jrDrift 9s linear infinite; }
@keyframes jrDrift { from { transform: translateX(700px); } to { transform: translateX(-120px); } }

.jr-walker {
    position: absolute; left: 50%; bottom: 14%;
    width: 70px; height: 110px; margin-left: -35px;
    animation: jrBob .55s ease-in-out infinite alternate;
}
@keyframes jrBob { from { transform: translateY(0); } to { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
    .jr-scroll, .jr-plane, .jr-train, .jr-bus, .jr-cloud, .jr-walker { animation: none; }
}

/* Court and prison */
.court-charge {
    font-family: monospace; font-size: 12px; line-height: 1.6;
    color: #cfd6e4; margin-bottom: 4px;
}
.court-charge b { color: #ff8866; }
.court-verdict {
    font-family: monospace; font-size: 30px; font-weight: bold;
    letter-spacing: .14em; margin: 6px 0 12px;
}
.court-verdict.won  { color: #66dd66; text-shadow: 0 0 22px rgba(102,221,102,.4); }
.court-verdict.lost { color: #ff4444; text-shadow: 0 0 22px rgba(255,68,68,.4); }

/* ── Small screens ────────────────────────────────────────────────────────
   The map already pans rather than shrinking. What has to give here is the
   furniture around it: panels that were sized for a desktop column, a
   create screen laid out side by side, and two badges in the same corner. */

@media (max-width: 680px) {
    /* Panels fill the width and scroll, rather than overflowing it. */
    .modal, .modal.wide {
        width: auto;
        max-width: none;
        margin: 10px;
        padding: 20px 16px 18px;
        border-radius: 14px;
    }
    .modal-backdrop { align-items: flex-start; overflow-y: auto; padding: 8px 0; }
    .modal-title { font-size: 12px; letter-spacing: 3px; margin-bottom: 14px; }

    /* Preview over options, not beside them. */
    #create-grid { flex-direction: column; align-items: center; gap: 12px; }
    #create-preview { flex: 0 0 auto; width: 128px; height: 196px; }
    #create-opts { width: 100%; }
    #opt-city { flex-direction: column; }
    #create-actions { flex-direction: column-reverse; }
    #create-actions button { width: 100%; padding: 12px; font-size: 13px; }

    /* Thumb-sized targets. */
    .sw { width: 30px; height: 30px; }
    .chip { padding: 8px 13px; font-size: 12px; }
    .est-btn { padding: 11px 14px; font-size: 12px; }
    .est-row { padding: 11px 0; }

    /* The two corner badges stack instead of fighting for the same corner. */
    #skubu-badge {
        top: auto; bottom: 58px; right: 12px;
        padding: 6px 9px; font-size: 11px;
    }
    #life-strip { top: 54px; right: 12px; padding: 6px 9px 6px 6px; }
    #life-avatar { width: 34px; height: 46px; flex-basis: 34px; }
    .ls-col { font-size: 10px; }
    #life-skubu-wrap { font-size: 12px; }

    /* The journey reads top to bottom on a tall screen. */
    .jr-art { min-height: 38vh; }
    .jr-panel { padding: 16px 16px 20px; }
    .jr-clock { font-size: 30px; margin: 4px 0 10px; }
    .jr-route { font-size: 13px; }
    .jr-meta { flex-direction: column; gap: 3px; }
    .jr-skip { top: 10px; right: 12px; }
}

/* Very narrow: the leaderboard and the title give way to the city. */
@media (max-width: 420px) {
    .ht-name { font-size: 24px; }
    .ht-sub { font-size: 9px; letter-spacing: .3em; }
    #hud-where { font-size: 10px; }
    .modal { padding: 16px 12px 14px; }
    .est-name { font-size: 12px; }
    .est-sub { font-size: 9px; }
}

/* Short and wide — a phone on its side. Panels must not run off the bottom. */
@media (max-height: 520px) and (orientation: landscape) {
    .modal, .modal.wide { max-height: calc(100vh - 16px); margin: 8px; }
    #create-grid { flex-direction: row; }
    #create-preview { width: 108px; height: 164px; }
    .jr-art { min-height: 46vh; }
}

/* Health, in the strip and as a warning at the stall */
.lh-track {
    display: block; width: 92px; height: 5px; border-radius: 3px;
    background: #1a1a24; overflow: hidden; margin-top: 3px;
}
.lh-fill {
    display: block; height: 100%; width: 100%; border-radius: 3px;
    background: #4ccc5a; transition: width .3s ease, background .3s ease;
}
.lh-fill.low { background: #ddaa22; }
.lh-fill.ill { background: #dd3322; }
.lh-ill { color: #ff8866; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.warn {
    font-family: monospace; font-size: 11px; line-height: 1.5;
    padding: 9px 11px; border-radius: 8px; margin-bottom: 10px;
    border: 1px solid #5a2420; background: #2a1410; color: #ff9a7a;
}
.warn.soft { border-color: #4a3f1e; background: #211d14; color: #ddbb66; }

/* ── What to do next ──────────────────────────────────────────────────────
   Bottom centre, in the thumb zone, because it is the one thing a player
   should always be able to reach. It is also the answer to the question the
   research says kills first sessions: what am I supposed to be doing. */

.goal {
    position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    display: none; align-items: center; gap: 10px;
    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid #2f4a2c;
    border-radius: 999px;
    background: rgba(10,16,10,.92);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 26px rgba(0,0,0,.55);
    font-family: monospace;
    cursor: pointer;
    transition: border-color .15s, transform .12s, background .15s;
}
.goal:hover  { border-color: #5a8a4a; transform: translateX(-50%) translateY(-2px); }
.goal:active { transform: translateX(-50%) translateY(0) scale(.98); }
.goal.urgent { border-color: #7a2a24; background: rgba(26,10,10,.94); }

.goal-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
    background: #7ad85a; box-shadow: 0 0 10px rgba(122,216,90,.8);
    animation: goalPulse 2s ease-in-out infinite;
}
.goal.urgent .goal-dot { background: #ff5a4a; box-shadow: 0 0 10px rgba(255,90,74,.8); }
@keyframes goalPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.goal-text {
    font-size: 12.5px; color: #dfe9d8; letter-spacing: .02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.goal.urgent .goal-text { color: #ffd4cc; }
.goal-go { color: #7ad85a; font-size: 17px; line-height: 1; }
.goal.urgent .goal-go { color: #ff8a7a; }

/* Tapping a place should look like it registered, not just sound like it. */
.venue:active .v-disc { stroke-width: 6; }
.venue:active { transform: translateY(1px); }

@media (max-width: 680px) {
    /* The goal takes the bottom; the footer was already hidden down here. */
    .goal {
        left: 12px; right: 12px; bottom: 12px;
        transform: none; max-width: none;
        border-radius: 14px; padding: 13px 14px;
    }
    .goal:hover, .goal:active { transform: none; }
    .goal-text { font-size: 13px; white-space: normal; }

    /* Status moves out of the top corners and down beside the goal, which is
       where a thumb actually is. */
    #life-strip {
        top: auto; bottom: 72px; right: 12px; left: 12px;
        justify-content: flex-start;
    }
    #skubu-badge { bottom: 134px; }
    #global-lb { bottom: 190px; }
    #global-lb.open { max-height: 40vh; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .goal { bottom: 10px; padding: 9px 13px; }
    .goal-text { font-size: 11.5px; }
}

/* A building site */
.site {
    border: 1px solid #2a2a38; border-radius: 10px;
    padding: 11px 12px; margin-bottom: 10px;
    background: #15151e; font-family: monospace;
}
.site-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.site-top b { font-size: 13px; color: #e8edf6; font-weight: normal; }
.site-top span { font-size: 10px; color: #ccaa44; letter-spacing: .08em; }
.site-bar { height: 6px; border-radius: 3px; background: #10101a; margin: 8px 0 7px; overflow: hidden; }
.site-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg,#8a6a14,#ffd766); }
.site-note { font-size: 10px; color: #7f8aa0; line-height: 1.5; }
.site-note.warnish { color: #ddbb66; }
.site-crew { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.site-crew > span { font-size: 9px; letter-spacing: .16em; color: #5f6a80; text-transform: uppercase; }
.site .est-btn { margin-top: 8px; }

/* A clinic report */
.vital { display: grid; grid-template-columns: 76px 1fr 32px; align-items: center; gap: 9px; margin: 7px 0; }
.vital > span:first-child { font-family: monospace; font-size: 10px; letter-spacing: .1em; color: #7f8aa0; text-transform: uppercase; }
.vital-track { height: 7px; border-radius: 4px; background: #16161f; overflow: hidden; }
.vital-fill { display: block; height: 100%; border-radius: 4px; background: #4ccc5a; }
.vital-fill.low { background: #dd3322; }
.vital b { font-family: monospace; font-size: 12px; color: #e8edf6; text-align: right; }
.rep {
    font-family: monospace; font-size: 11.5px; line-height: 1.6;
    padding: 7px 10px; margin-bottom: 6px; border-radius: 7px;
    border-left: 2px solid #5a4a24; background: #17150f; color: #ddcfa8;
}
.rep.good { border-left-color: #2f5f33; background: #0f1710; color: #b6d8b0; }
.lh-fill.rest { background: #4a9fd8; }
.lh-fill.mind { background: #a06cd8; }
.lh-fill.rest.low, .lh-fill.mind.low { background: #ddaa22; }
.lh-track + .lh-track { margin-top: 2px; }

/* Daylight over a city drawn for night. */
.tod { mix-blend-mode: screen; pointer-events: none; }

/* A place that is shut */
.venue.shut .v-disc { opacity: .4; }
.venue.shut .v-icon { opacity: .4; }
.venue.shut .v-name { fill: #6e7684; }
.shut-when {
    font-family: monospace; font-size: 12px; line-height: 1.6;
    color: #cfd6e4; margin-bottom: 10px;
}
.shut-when b { color: #ffc83d; }
.goal-text em { font-style: normal; color: #ffc83d; opacity: .9; }

/* ── Navigation ────────────────────────────────────────────────────────────
   Three tabs. The bar is fixed to the bottom and carries a safe-area inset,
   so it clears the home indicator on a phone. Everything that belongs to the
   map is hidden on the other two tabs rather than left floating over them. */

#nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    display: flex; align-items: stretch;
    background: rgba(10, 10, 18, .95);
    border-top: 1px solid #23232e;
    backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 9px 4px 8px;
    background: none; border: 0; cursor: pointer;
    font-family: monospace; font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: #6a7183;
    transition: color .15s;
}
.nav-btn svg { width: 21px; height: 21px; }
.nav-btn svg path { fill: #6a7183; transition: fill .15s; }
.nav-btn.on { color: #ffc83d; }
.nav-btn.on svg path { fill: #ffc83d; }
.nav-btn:active { background: #16161f; }

/* The panels */
.view {
    position: fixed; inset: 0 0 auto 0; z-index: 300;
    display: none; overflow-y: auto;
    max-height: 100%;
    padding: 16px 16px calc(78px + env(safe-area-inset-bottom, 0));
    background: #0b0b12;
    -webkit-overflow-scrolling: touch;
}
body[data-view="home"]    #view-home,
body[data-view="profile"] #view-profile { display: block; height: 100%; }

/* Map furniture belongs to the map */
body[data-view="home"]  #hud, body[data-view="profile"] #hud,
body[data-view="home"]  #life-strip, body[data-view="profile"] #life-strip,
body[data-view="home"]  #skubu-badge, body[data-view="profile"] #skubu-badge,
body[data-view="home"]  #goal, body[data-view="profile"] #goal,
body[data-view="home"]  #footer, body[data-view="profile"] #footer { display: none !important; }

/* The map tab needs room for the bar */
body[data-view="map"] #goal   { bottom: calc(70px + env(safe-area-inset-bottom, 0)); }
body[data-view="map"] #footer { bottom: calc(66px + env(safe-area-inset-bottom, 0)); }

/* ── Panel contents ─────────────────────────────────────────────────────── */

.nv-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.nv-av {
    flex: 0 0 auto; width: 66px; height: 98px;
    display: flex; align-items: flex-end; justify-content: center;
    background: #13131c; border: 1px solid #23232e; border-radius: 11px;
    overflow: hidden;
}
.nv-av.big { width: 92px; height: 134px; }
.nv-av svg { width: 100%; height: 100%; }
.nv-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nv-who b {
    font-family: monospace; font-size: 17px; letter-spacing: .06em;
    color: #ffffff; font-weight: normal;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nv-who span { font-family: monospace; font-size: 11px; color: #8b93a6; }
.nv-who .nv-clock { color: #6a7183; font-size: 10px; letter-spacing: .07em; }
.nv-purse {
    flex: 0 0 auto; font-family: monospace; font-size: 15px;
    color: #ffc83d; letter-spacing: .04em;
}

.nv-vitals {
    border: 1px solid #23232e; border-radius: 11px;
    padding: 11px 13px; margin-bottom: 15px; background: #11111a;
}
.nv-vital { display: grid; grid-template-columns: 76px 1fr 30px; align-items: center; gap: 9px; margin: 6px 0; }
.nv-vital > span:first-child {
    font-family: monospace; font-size: 9.5px; letter-spacing: .1em;
    color: #7f8aa0; text-transform: uppercase;
}
.nv-vital b { font-family: monospace; font-size: 11.5px; color: #e8edf6; text-align: right; }
.nv-ill {
    margin-top: 9px; padding-top: 9px; border-top: 1px solid #23232e;
    font-family: monospace; font-size: 10.5px; color: #ff6a5a;
}

/* The one thing to do next */
.nv-next {
    display: flex; align-items: center; gap: 11px; cursor: pointer;
    border: 1px solid #5a4a24; border-radius: 11px;
    padding: 13px 14px; margin-bottom: 18px; background: #191509;
    transition: transform .1s, background .15s;
}
.nv-next:active { transform: scale(.985); background: #221c0c; }
.nv-next.urgent { border-color: #7a2a20; background: #1d0f0c; }
.nv-next-tag {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.nv-next-text {
    flex: 1 1 auto; font-family: monospace; font-size: 12.5px;
    line-height: 1.5; color: #ffd98a;
}
.nv-next.urgent .nv-next-text { color: #ffb0a4; }
.nv-next-go { flex: 0 0 auto; font-size: 20px; color: #8a7230; line-height: 1; }

.nv-sub {
    font-family: monospace; font-size: 9.5px; letter-spacing: .18em;
    text-transform: uppercase; color: #5f6a80;
    margin: 18px 0 9px; padding-bottom: 6px; border-bottom: 1px solid #1d1d27;
}

/* Where to go */
.nv-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.nv-tile {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    padding: 11px 12px; cursor: pointer;
    border: 1px solid #23232e; border-radius: 11px; background: #13131c;
    transition: transform .1s, border-color .15s;
}
.nv-tile:active { transform: scale(.97); border-color: #ffc83d; }
.nv-tile b {
    font-family: monospace; font-size: 12.5px; color: #e8edf6; font-weight: normal;
    letter-spacing: .05em;
}
.nv-tile span {
    font-family: monospace; font-size: 10px; color: #8b93a6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nv-tile em { font-family: monospace; font-size: 9px; font-style: normal; color: #4ccc5a; letter-spacing: .06em; }
.nv-tile.shut { opacity: .62; }
.nv-tile.shut em { color: #ddaa22; }

/* Rows, for property, sites and the ledger */
.nv-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-family: monospace; font-size: 11.5px; padding: 7px 2px;
    border-bottom: 1px solid #16161f; color: #cfd6e4;
}
.nv-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-row em { font-style: normal; color: #ffc83d; font-size: 9.5px; letter-spacing: .08em; }
.nv-row b { flex: 0 0 auto; color: #8b93a6; font-weight: normal; }
.nv-row b.up { color: #4ccc5a; }
.nv-row b.dn { color: #ff6a5a; }
.nv-row.led span { color: #8b93a6; }
.nv-none { font-family: monospace; font-size: 11px; color: #5f6a80; padding: 7px 2px; }
.nv-row + .site-bar { margin: 2px 0 8px; }

.nv-empty {
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    padding: 56px 20px; text-align: center;
    font-family: monospace; font-size: 12.5px; color: #8b93a6;
}
.nv-empty .est-btn { max-width: 230px; }

.nv-danger { margin-top: 26px; padding-top: 16px; border-top: 1px solid #1d1d27; }
.nv-danger .ghost { width: 100%; }

/* Phones: one column of tiles reads better than two cramped ones */
@media (max-width: 420px) {
    .nv-quick { grid-template-columns: 1fr; }
    .nv-av.big { width: 78px; height: 112px; }
}

/* A short landscape window has no room for a tall bar */
@media (max-height: 460px) and (orientation: landscape) {
    .nav-btn { flex-direction: row; gap: 7px; padding: 6px 4px; }
    .nav-btn svg { width: 15px; height: 15px; }
    .view { padding-top: 11px; }
}

/* ── Your room ─────────────────────────────────────────────────────────────
   The Home tab leads with where you sleep, because that is the thing the
   whole game is about getting away from. */

.rm-scene {
    position: relative; margin-bottom: 15px;
    border: 1px solid #23232e; border-radius: 13px; overflow: hidden;
    background: #0d1018; aspect-ratio: 320 / 190;
}
.rm-scene.rough { border-color: #4a2a22; }
.room-svg { display: block; width: 100%; height: 100%; }
.rm-label {
    position: absolute; left: 11px; bottom: 10px;
    display: flex; flex-direction: column; gap: 1px;
    text-shadow: 0 1px 4px #000;
}
.rm-label b {
    font-family: monospace; font-size: 13.5px; font-weight: normal;
    letter-spacing: .05em; color: #ffffff;
}
.rm-label span { font-family: monospace; font-size: 9.5px; color: #b9c2d2; }
.rm-time {
    position: absolute; right: 11px; top: 10px;
    font-family: monospace; font-size: 9.5px; letter-spacing: .1em;
    color: #cfd6e4; background: rgba(8, 8, 14, .6);
    padding: 3px 7px; border-radius: 5px;
}

@keyframes mozzie-drift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(7px, -5px); }
    50%      { transform: translate(-4px, 4px); }
    75%      { transform: translate(5px, 3px); }
}
.mozzie { animation: mozzie-drift 3.4s ease-in-out infinite; }

@keyframes room-drizzle {
    from { transform: translate(0, 0); opacity: .18; }
    to   { transform: translate(-5px, 20px); opacity: 0; }
}
.room-rain line { animation: room-drizzle 1.5s linear infinite; }

/* The hand you were dealt */
.rm-class {
    border: 1px solid #23232e; border-left-width: 3px; border-radius: 11px;
    padding: 11px 13px; margin-bottom: 13px; background: #13131c;
}
.rm-class.lapo   { border-left-color: #a8452f; }
.rm-class.pako   { border-left-color: #b8832a; }
.rm-class.nepo   { border-left-color: #3f7fc0; }
.rm-class.butter { border-left-color: #c9a23a; }
.rm-class-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rm-class-top b {
    font-family: monospace; font-size: 14px; font-weight: normal;
    letter-spacing: .05em; color: #ffffff;
}
.rm-class-top span {
    font-family: monospace; font-size: 9px; letter-spacing: .1em;
    text-transform: uppercase; color: #8b93a6; text-align: right;
}
.rm-class p {
    margin: 7px 0 0; font-family: monospace; font-size: 11px;
    line-height: 1.6; color: #a7b0c2;
}

/* The loan that came with the name */
.rm-loan {
    border: 1px solid #5a3024; border-radius: 11px;
    padding: 11px 13px; margin-bottom: 13px; background: #1a100c;
    font-family: monospace; font-size: 11px; line-height: 1.6; color: #e8b9a8;
}
.rm-loan b { color: #ff8a70; }
.rm-loan .est-btn { margin-top: 9px; }

/* ── You are here ──────────────────────────────────────────────────────────
   Green against a city of amber and blue, so it is never mistaken for a
   venue. The ring pulses on the ground; the tag stays upright above. */

.you { pointer-events: none; }
.you-tag text {
    font-family: monospace; font-size: 13px; font-weight: bold;
    letter-spacing: .17em; fill: #4cd964;
}
@keyframes you-pulse {
    0%   { transform: scale(0.7); opacity: .95; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
.you-ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: you-pulse 2.1s ease-out infinite;
}
@keyframes you-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
.you-tag { animation: you-bob 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .you-ring, .you-tag { animation: none; }
    .you-ring { opacity: .55; }
}

/* Jump back to yourself */
#find-me {
    position: fixed; right: 14px; z-index: 320;
    bottom: calc(118px + env(safe-area-inset-bottom, 0));
    display: none; align-items: center; gap: 7px;
    padding: 9px 13px; cursor: pointer;
    font-family: monospace; font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: #4cd964;
    background: rgba(10, 18, 12, .92); border: 1px solid #2f6b3a;
    border-radius: 22px; backdrop-filter: blur(8px);
}
body[data-view="map"] #find-me { display: flex; }
#find-me:active { background: #14301b; }
#find-me b { font-size: 13px; font-weight: normal; line-height: 1; }

/* ── Work ──────────────────────────────────────────────────────────────────
   A gig pays today and varies; a job pays weekly if you turned up. The panel
   has to make that difference obvious at a glance. */

.wk-exp {
    font-family: monospace; font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: #7f8aa0; margin-bottom: 12px;
}
.wk-post {
    border: 1px solid #2f5f33; border-left-width: 3px; border-radius: 11px;
    padding: 12px 13px; margin-bottom: 15px; background: #0f1710;
}
.wk-post-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wk-post-top b {
    font-family: monospace; font-size: 14px; font-weight: normal;
    letter-spacing: .04em; color: #ffffff;
}
.wk-post-top span { font-family: monospace; font-size: 11.5px; color: #4ccc5a; }
.wk-shifts { display: flex; align-items: center; gap: 5px; margin: 10px 0 7px; }
.wk-pip {
    width: 15px; height: 7px; border-radius: 4px;
    background: #1d2a1f; border: 1px solid #2f4a33;
}
.wk-pip.on { background: #4ccc5a; border-color: #4ccc5a; }
.wk-shifts em {
    font-style: normal; font-family: monospace; font-size: 9.5px;
    color: #7f8aa0; margin-left: 5px; letter-spacing: .07em;
}
.wk-note { font-family: monospace; font-size: 10.5px; line-height: 1.5; color: #9fb0a2; }
.wk-post .est-btn { margin-top: 10px; }
.wk-post .ghost.small {
    width: 100%; margin-top: 7px; padding: 7px;
    font-size: 10px; letter-spacing: .1em;
}
.wk-meta {
    display: block; font-family: monospace; font-size: 10px;
    color: #ccaa44; letter-spacing: .05em; margin-top: 4px;
}
.wk-meta i { font-style: normal; color: #e07a5a; }
.wk-why {
    display: block; font-family: monospace; font-size: 10px;
    color: #7f8aa0; margin-top: 8px; padding: 6px 9px;
    border-radius: 7px; background: #15151e; border-left: 2px solid #3a3a48;
}
.est-row.off { opacity: .68; }
.est-row.off .est-name { color: #9aa3b4; }

/* Going in from the Home scene */
.rm-go {
    position: absolute; right: 11px; bottom: 11px;
    padding: 8px 14px; cursor: pointer;
    font-family: monospace; font-size: 10.5px; letter-spacing: .12em;
    color: #0c0c12; background: #ffc83d; border: 0; border-radius: 20px;
}
.rm-go:active { background: #e0ac2a; }

/* The room, demoted to a card */
.rm-card {
    display: flex; align-items: stretch; gap: 0; cursor: pointer;
    border: 1px solid #23232e; border-radius: 11px; overflow: hidden;
    margin-bottom: 13px; background: #13131c;
}
.rm-card.rough { border-color: #4a2a22; }
.rm-card:active { border-color: #ffc83d; }
.rm-card-art { flex: 0 0 104px; height: 66px; overflow: hidden; }
.rm-card-art svg { width: 100%; height: 100%; display: block; }
.rm-card-text {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 2px; padding: 0 12px;
}
.rm-card-text b {
    font-family: monospace; font-size: 12.5px; font-weight: normal;
    color: #e8edf6; letter-spacing: .04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-card-text span { font-family: monospace; font-size: 10px; color: #7f8aa0; }

/* Getting across town */
.rd-dist {
    font-family: monospace; font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: #7f8aa0; margin-bottom: 12px;
}

/* ── Inside a place ────────────────────────────────────────────────────────
   A full-screen walkable room. It sits over everything including the nav,
   because while you are in it that is where you are. */

#place {
    position: fixed; inset: 0; z-index: 600;
    display: none; flex-direction: column;
    background: #0b0b12;
}
#place.on { display: flex; }
body.in-place { overflow: hidden; }

.pl-top {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 14px calc(12px + env(safe-area-inset-top, 0));
    border-bottom: 1px solid #1d1d27;
}
.pl-name {
    font-family: monospace; font-size: 13.5px; letter-spacing: .06em; color: #ffffff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-out {
    flex: 0 0 auto; padding: 7px 13px; cursor: pointer;
    font-family: monospace; font-size: 10.5px; letter-spacing: .1em;
    color: #cfd6e4; background: #1a1a24; border: 1px solid #2d2d3a; border-radius: 18px;
}
.pl-out:active { background: #24242f; }

.pl-stage {
    flex: 1 1 auto; min-height: 0; display: flex;
    align-items: center; justify-content: center;
    padding: 8px; cursor: pointer; touch-action: manipulation;
}
.pl-stage svg { width: 100%; height: 100%; max-height: 100%; display: block; }
.pl-lab {
    font-family: monospace; font-size: 11px; letter-spacing: .1em;
    fill: #8b93a6; paint-order: stroke; stroke: #0b0b12; stroke-width: 3px;
}
#pl-me { transition: none; }

.pl-act {
    flex: 0 0 auto; min-height: 58px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px;
}
.pl-act button {
    padding: 12px 26px; cursor: pointer;
    font-family: monospace; font-size: 12px; letter-spacing: .12em;
    text-transform: uppercase; color: #0c0c12;
    background: #ffc83d; border: 0; border-radius: 24px;
    animation: pl-pop .18s ease-out;
}
.pl-act button:active { background: #e0ac2a; }
@keyframes pl-pop { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.pl-hint {
    flex: 0 0 auto; text-align: center;
    padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0));
    font-family: monospace; font-size: 9.5px; letter-spacing: .08em; color: #5f6a80;
}

/* The Home picture is now a door */
.rm-scene.can-enter { cursor: pointer; }
.rm-scene.can-enter:active { transform: scale(.99); }
.rm-scene.can-enter::after {
    content: 'TAP TO GO IN';
    position: absolute; left: 11px; top: 10px;
    font-family: monospace; font-size: 8.5px; letter-spacing: .16em;
    color: #ffc83d; background: rgba(8, 8, 14, .6);
    padding: 3px 7px; border-radius: 5px; pointer-events: none;
}

@media (max-height: 520px) {
    .pl-hint { display: none; }
    .pl-act { min-height: 48px; }
}

/* The doorway list */
.pl-where {
    width: 100%; max-width: 440px; max-height: 100%;
    overflow-y: auto; padding: 4px;
}
.pl-where-top {
    font-family: monospace; font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: #5f6a80;
    margin: 4px 0 11px; padding-bottom: 7px; border-bottom: 1px solid #1d1d27;
}
.pl-dest {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    text-align: left; cursor: pointer; margin-bottom: 7px;
    padding: 11px 13px; border: 1px solid #23232e; border-radius: 10px;
    background: #13131c;
}
.pl-dest:active { border-color: #ffc83d; }
.pl-dest b {
    font-family: monospace; font-size: 12.5px; font-weight: normal;
    color: #e8edf6; letter-spacing: .04em;
}
.pl-dest span { font-family: monospace; font-size: 10px; color: #8b93a6; }
.pl-dest.back { border-style: dashed; background: none; }
.pl-dest.back b { color: #8b93a6; }

/* ── The opening ───────────────────────────────────────────────────────────
   Three cards, then it points at a button. It sits above everything because
   until it is read, nothing else on the screen means anything. */

#intro {
    position: fixed; inset: 0; z-index: 700;
    display: none; align-items: center; justify-content: center;
    padding: 20px; background: rgba(6, 6, 11, .94); backdrop-filter: blur(6px);
}
#intro.on { display: flex; }

.in-card {
    position: relative; width: 100%; max-width: 400px;
    max-height: 100%; overflow-y: auto;
    padding: 24px 22px 20px;
    border: 1px solid #2a2a38; border-radius: 16px; background: #12121b;
}
.in-art {
    width: 84px; height: 124px; margin: 0 auto 14px;
    display: flex; align-items: flex-end; justify-content: center;
    background: #191922; border: 1px solid #262633; border-radius: 12px; overflow: hidden;
}
.in-art svg { width: 100%; height: 100%; }
.in-tag {
    font-family: monospace; font-size: 9px; letter-spacing: .2em;
    text-transform: uppercase; color: #ffc83d; margin-bottom: 8px;
}
.in-card h2 {
    margin: 0 0 11px; font-family: monospace; font-weight: normal;
    font-size: 19px; line-height: 1.3; letter-spacing: .02em; color: #ffffff;
}
.in-card p {
    margin: 0; font-family: monospace; font-size: 12.5px;
    line-height: 1.75; color: #b8c0d0;
}
.in-card p b { color: #ffd98a; font-weight: normal; }

.in-dots { display: flex; gap: 6px; justify-content: center; margin: 20px 0 16px; }
.in-dots span { width: 7px; height: 7px; border-radius: 50%; background: #2d2d3a; }
.in-dots span.on { background: #ffc83d; }

.in-btns { display: flex; gap: 9px; }
.in-btns button {
    flex: 1 1 auto; padding: 13px; cursor: pointer;
    font-family: monospace; font-size: 11.5px; letter-spacing: .12em;
    text-transform: uppercase; border-radius: 10px; border: 0;
}
.in-btns .primary { background: #ffc83d; color: #0c0c12; }
.in-btns .primary:active { background: #e0ac2a; }
.in-btns .ghost {
    flex: 0 0 auto; padding-left: 20px; padding-right: 20px;
    background: none; border: 1px solid #2d2d3a; color: #8b93a6;
}
.in-skip {
    position: absolute; top: 14px; right: 14px; padding: 5px 9px; cursor: pointer;
    font-family: monospace; font-size: 9.5px; letter-spacing: .1em;
    color: #5f6a80; background: none; border: 0;
}
.in-skip:active { color: #8b93a6; }

@media (max-height: 560px) {
    .in-art { width: 60px; height: 88px; margin-bottom: 10px; }
    .in-card { padding: 18px 18px 16px; }
    .in-card h2 { font-size: 16px; }
}

/* ── Naijabeats ────────────────────────────────────────────────────────────
   The studio: Vibe, inside the game. Full screen like a place, because while
   you are making a beat that is what you are doing. */

#studio {
    position: fixed; inset: 0; z-index: 620;
    display: none; flex-direction: column;
    background: #0e0e14;
}
#studio.on { display: flex; }

.st-top {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 14px calc(12px + env(safe-area-inset-top, 0));
    border-bottom: 1px solid #23232e;
}
.st-name {
    font-family: monospace; font-size: 13.5px; letter-spacing: .18em; color: #c9a6ff;
}

.st-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
    padding: 9px 12px; border-bottom: 1px solid #1b1b24; flex-wrap: wrap;
}
.st-bar select, .st-bar button {
    font-family: monospace; font-size: 11.5px; color: #e8edf6;
    background: #16161f; border: 1px solid #23232e; border-radius: 8px;
    padding: 7px 10px; cursor: pointer; max-width: 42vw;
}
.st-bar select:disabled { opacity: .45; }
.st-bar button:active { background: #23232e; }
.st-go { background: #ffc83d !important; color: #11111a !important; border-color: #ffc83d !important; }
.st-go.on { background: #ff7a45 !important; border-color: #ff7a45 !important; }

#st-grid {
    flex: 1 1 auto; min-height: 0; width: 100%; display: block;
    touch-action: none;
}

.st-act {
    flex: 0 0 auto; padding: 11px 14px calc(14px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid #23232e; background: #11111a;
}
.st-note {
    font-family: monospace; font-size: 11px; line-height: 1.6;
    color: #8b93a6; margin-bottom: 9px;
}
.st-act .est-btn { width: 100%; }

@media (max-height: 520px) {
    .st-note { display: none; }
    .st-act { padding-top: 8px; padding-bottom: 8px; }
}

/* The studio toolbar wraps on a phone, and highlights the one button that
   moves you between the two screens. */
.st-hot { background: #2a2338 !important; border-color: #6a4d93 !important; color: #c9a6ff !important; }
.st-bar { overflow-x: auto; }
.st-say {
    font-family: monospace; font-size: 10.5px; color: #c9a6ff;
    min-height: 14px; margin-top: 7px;
}

/* The saved-beats list */
.st-list { max-height: 46vh; overflow-y: auto; }
.st-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; margin-bottom: 7px;
    border: 1px solid #23232e; border-radius: 9px; background: #15151e;
}
.st-row-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-row-t b {
    font-family: monospace; font-size: 12.5px; font-weight: normal; color: #e8edf6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-row-t span { font-family: monospace; font-size: 9.5px; color: #7f8aa0; }
.st-row button {
    flex: 0 0 auto; font-family: monospace; font-size: 11px; color: #e8edf6;
    background: #1d1d27; border: 1px solid #2d2d3a; border-radius: 7px;
    padding: 7px 11px; cursor: pointer;
}
.st-row button:active { background: #272734; }

/* Tempo, in the studio toolbar */
.st-bpm {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 8px;
    border: 1px solid #23232e; border-radius: 8px; background: #16161f;
}
.st-bpm input[type=range] {
    width: 96px; accent-color: #ffc83d; background: none; padding: 0; margin: 0;
}
.st-bpm b {
    font-family: monospace; font-size: 11.5px; font-weight: normal;
    color: #ffc83d; min-width: 26px; text-align: right;
}
@media (max-width: 420px) { .st-bpm input[type=range] { width: 74px; } }

/* Recording: the pads take over the bottom panel while a take runs, because
   while you are playing a part that is the only control you want under your
   thumb. Lowest sound on the left — so it reads as a keyboard going up, and
   as a kit starting from the kick. */
.st-rec {
    background: #e8384f !important; border-color: #e8384f !important; color: #fff !important;
}
.st-rec.on { animation: st-blink 1s steps(2, start) infinite; }
@keyframes st-blink { 50% { opacity: .42; } }

.st-pads { display: flex; gap: 5px; }
.st-pads .st-pad {
    flex: 1 1 0; min-width: 0; padding: 15px 2px 9px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-family: monospace; font-size: 9.5px; white-space: nowrap; color: #e8edf6;
    background: #1d1d27; border: 1px solid #2d2d3a; border-radius: 8px;
    overflow: hidden; touch-action: manipulation; user-select: none;
    -webkit-user-select: none;
}
.st-pads .st-pad:active {
    background: #ffc83d; color: #11111a; border-color: #ffc83d;
}
.st-pads .st-pad i { font-style: normal; font-size: 8.5px; color: #6a7183; }
.st-pads .st-pad:active i { color: #11111a; }

@media (max-height: 520px) {
    /* .st-note is hidden here, so the pads get the room instead */
    .st-pads .st-pad { padding: 11px 2px 7px; }
}

/* ── The audio panel ───────────────────────────────────────────────────────
   The microphone and the samples share one panel, because they fill the same
   thing: a clip on a bar. Input and meter on top, then what you can do, then
   the two dials that actually matter — how loud, and how far off the beat. */
.mic-row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.mic-row:last-of-type { margin-bottom: 0; }

.mic-dev {
    flex: 1 1 auto; min-width: 0;
    font-family: monospace; font-size: 11px; color: #e8edf6;
    background: #16161f; border: 1px solid #23232e; border-radius: 8px;
    padding: 7px 9px; cursor: pointer;
}

.mic-meter {
    flex: 0 0 96px; height: 9px; border-radius: 5px; overflow: hidden;
    background: #1a1a24; border: 1px solid #23232e;
}
.mic-meter i {
    display: block; width: 0; height: 100%;
    /* Green through to red, so a hot input looks hot without a number */
    background: linear-gradient(90deg, #4cd964 0%, #4cd964 55%, #ffc83d 78%, #e8384f 100%);
    transition: width .05s linear;
}
.mic-pk {
    flex: 0 0 9px; height: 9px; border-radius: 50%;
    background: #23232e; border: 1px solid #2d2d3a;
}
.mic-pk.on { background: #e8384f; border-color: #e8384f; }

.mic-btns { flex-wrap: wrap; }
.mic-btns button {
    flex: 0 1 auto;
    font-family: monospace; font-size: 11px; color: #e8edf6;
    background: #1d1d27; border: 1px solid #2d2d3a; border-radius: 7px;
    padding: 7px 11px; cursor: pointer;
}
.mic-btns button:active { background: #272734; }

.clip-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px; padding-top: 2px;
    border-top: 1px solid #1b1b24;
}
.clip-head b {
    font-family: monospace; font-size: 12px; font-weight: normal; color: #4cc9d9;
}
.clip-head span { font-family: monospace; font-size: 9.5px; color: #7f8aa0; }

.mic-dials { flex-wrap: wrap; gap: 12px; }
.mic-dials label {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: monospace; font-size: 10px; color: #8b93a6;
}
.mic-dials input[type=range] {
    width: 86px; accent-color: #4cc9d9; background: none; padding: 0; margin: 0;
}
.mic-dials b {
    font-family: monospace; font-size: 10.5px; font-weight: normal;
    color: #4cc9d9; min-width: 38px;
}

/* The mixer: a strip per track, then the buses. */
.mx-looks i { font-style: normal; font-size: 10px; color: #7f8aa0; margin-right: 2px; }
.mx-strips, .mx-buses { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.mx-strip, .mx-bus { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    padding: 5px 6px; background: #15151d; border: 1px solid #1f1f2a; border-radius: 7px; }
.mx-strip.mx-off { opacity: .5; }
.mx-name { flex: 0 0 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: monospace; font-size: 10.5px; color: #e8edf6;
    border-left: 3px solid #3a3a4a; padding-left: 6px; }
.mx-ms { flex: 0 0 auto; font-family: monospace; font-size: 10px; color: #8b93a6;
    background: #1d1d27; border: 1px solid #2d2d3a; border-radius: 5px; padding: 3px 6px; cursor: pointer; }
.mx-ms.on { background: #e8384f; border-color: #e8384f; color: #fff; }
.mx-ms.mx-solo.on { background: #ffc83d; border-color: #ffc83d; color: #15151d; }
.mx-meter { position: relative; flex: 0 0 90px; height: 8px; border-radius: 4px; overflow: hidden;
    background: #0e0e14; border: 1px solid #23232e; }
.mx-meter i { display: block; width: 0; height: 100%; background: #4cd964; }
.mx-meter i.warm { background: #ffc83d; }
.mx-meter i.hot { background: #e8384f; }
.mx-meter u { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #e8edf6; opacity: .7; }
.mx-k { display: inline-flex; align-items: center; gap: 5px; font-family: monospace; font-size: 10px; color: #8b93a6; }
.mx-k i { font-style: normal; }
.mx-k input[type=range] { width: 64px; accent-color: #4cc9d9; background: none; padding: 0; margin: 0; }
.mx-k b { font-weight: normal; font-size: 10px; color: #4cc9d9; min-width: 40px; }
.mx-bus label { display: inline-flex; align-items: center; gap: 6px; font-family: monospace; font-size: 10px; color: #8b93a6; }
.mx-bus input[type=range] { width: 110px; accent-color: #4cc9d9; background: none; padding: 0; margin: 0; }
.mx-bus b { font-weight: normal; font-family: monospace; font-size: 10px; color: #4cc9d9; min-width: 38px; }
.mx-master { border-color: #3a3050; }
.mx-master em { font-style: normal; font-family: monospace; font-size: 9px; padding: 2px 5px; border-radius: 4px;
    color: #5a6172; border: 1px solid #2d2d3a; }
.mx-master em.on { color: #fff; background: #e8384f; border-color: #e8384f; }
.mic-dials select { font-family: monospace; font-size: 10px; color: #e8edf6; background: #1d1d27;
    border: 1px solid #2d2d3a; border-radius: 5px; padding: 2px 4px; }
@media (max-width: 420px) {
    .mx-name { flex-basis: 100%; }
    .mx-meter { flex-basis: 70px; }
    .mx-k input[type=range] { width: 54px; }
}

@media (max-width: 420px) {
    .mic-meter { flex-basis: 64px; }
    .mic-dials input[type=range] { width: 70px; }
}

/* A history button with nothing behind it: still there, so the toolbar does
   not reflow every time you undo, but visibly not worth pressing. */
.st-dim { opacity: .34; }

/* The studio has grown a lot of controls. On a phone the toolbar wraps to
   several rows and the audio panel can run to four rows of buttons, which
   between them could squeeze the arrangement off the screen entirely. Each
   gets a ceiling and scrolls past it, and the grid keeps a floor — so what
   you are editing is always visible, whatever is open. */
.st-bar { max-height: 27vh; overflow-y: auto; }
.st-act { max-height: 44vh; overflow-y: auto; }
/* Enough for two rows and a scrollbar: below that the arrangement stops
   being an arrangement. Anything further down is reached by scrolling. */
#st-grid { min-height: 150px; }

/* A drum track picks a kit, not a General MIDI program, and shows it in
   the kit's colour. */
.st-bar select.st-kit { color: #ffc83d; }
.st-bar select.st-add { color: #4cd964; font-weight: bold; }

/* The header menu: on a phone, New beat, Save, the saved beats and the
   files move behind this button and out of the toolbar. */
.st-top { position: relative; }
.st-top-r { display: flex; align-items: center; gap: 8px; }
.st-menu-btn { display: none; font-size: 17px; line-height: 1; color: #e8edf6; background: #16161f;
    border: 1px solid #23232e; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.st-menu-btn[aria-expanded="true"] { background: #2a2338; border-color: #6a4d93; color: #c9a6ff; }
.st-menu { position: absolute; right: 12px; top: calc(100% - 6px); z-index: 60;
    display: flex; flex-direction: column; min-width: 200px; padding: 6px;
    background: #16161f; border: 1px solid #2d2d3a; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
.st-menu[hidden] { display: none; }
.st-menu button { font: inherit; font-size: 13px; text-align: left; color: #e8edf6; background: none;
    border: 0; border-radius: 7px; padding: 12px 12px; cursor: pointer; }
.st-menu button:hover, .st-menu button:active { background: #23232e; }
@media (max-width: 760px), (max-height: 520px) {
    .st-menu-btn { display: inline-flex; }
    .st-bar .st-filed { display: none; }
    .st-files { display: none !important; }
}


/* Something is happening. Shown in place of the panel, because while it
   runs it is the only thing worth looking at. */
.st-work { padding: 2px 0 4px; }
.st-work-top {
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: monospace; font-size: 11px; margin-bottom: 7px;
}
.st-work-top b { font-weight: normal; color: #c9a6ff; }
.st-work-top span { font-size: 9.5px; color: #5f6a80; }
.st-work-track {
    height: 6px; border-radius: 3px; overflow: hidden;
    background: #1a1a24; border: 1px solid #23232e;
}
.st-work-track i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #6a4d93, #c9a6ff);
    transition: width .08s linear;
}

/* How long a riff is. In the riff editor, because that is what you are
   looking at when the question arises. */
.st-len {
    font-family: monospace; font-size: 11.5px; color: #e8edf6;
    background: #16161f; border: 1px solid #23232e; border-radius: 8px;
    padding: 7px 9px; cursor: pointer;
}

/* ── The preset browser ──────────────────────────────────────────────── */
/* A list you scan rather than read: what it is, where it is from, and one
   line about why you would want it. */
.pre-tabs { display: flex; gap: 4px; margin-bottom: 7px; flex-wrap: wrap; }
.pre-tab {
    flex: 1 1 auto; font-family: monospace; font-size: 11.5px; padding: 7px 4px;
    color: #8b93a6; background: #16161f; border: 1px solid #23232e;
    border-radius: 8px; cursor: pointer;
}
.pre-tab.on { color: #0e0e14; background: #66cc99; border-color: #66cc99; font-weight: bold; }
.pre-styles { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.pre-chip {
    font-family: monospace; font-size: 10.5px; padding: 4px 8px;
    color: #8b93a6; background: #12121a; border: 1px solid #23232e;
    border-radius: 20px; cursor: pointer;
}
.pre-chip.on { color: #ffc83d; border-color: #ffc83d; }
.pre-list { max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pre-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid #1b1b24;
}
.pre-what { flex: 1; min-width: 0; }
.pre-what b { display: block; font-family: monospace; font-size: 12px; color: #e8edf6; }
.pre-what i {
    display: block; font-family: monospace; font-size: 10px;
    color: #66cc99; font-style: normal; margin-top: 1px;
}
.pre-what span { display: block; font-size: 10.5px; color: #6a7183; margin-top: 2px; }
.pre-do { display: flex; gap: 4px; flex: 0 0 auto; }
.pre-do button {
    font-family: monospace; font-size: 11px; padding: 6px 11px;
    color: #e8edf6; background: #1d2a24; border: 1px solid #2f5a44;
    border-radius: 7px; cursor: pointer;
}
.pre-do .pre-bpm { color: #ffc83d; background: #241f12; border-color: #5a4a1a; }

/* ── Panel headers ───────────────────────────────────────────────────── */
/* Every panel shares one strip under the canvas, so every panel can be
   folded out of the way — on a phone the mixer alone is half the screen,
   and that is half the screen not showing what you are mixing. */
.st-head {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding-bottom: 8px; margin-bottom: 2px; user-select: none;
}
.st-head b {
    font-family: monospace; font-size: 11.5px; color: #e8edf6;
    letter-spacing: .4px;
}
.st-head i {
    flex: 1; font-family: monospace; font-size: 10px; color: #5f6a80;
    font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-head .st-caret { margin-left: auto; color: #6a7183; font-size: 11px; }
.st-act.st-min { max-height: none; }
.st-act.st-min .st-head { padding-bottom: 0; }
.st-act.st-min .st-body { display: none; }

/* Riff or song: what Play means while the roll is open. A pair rather
   than a toggle, because which one is active has to be readable at a
   glance — a toggle only tells you what it would do next. */
.st-scope { display: inline-flex; border: 1px solid #23232e; border-radius: 8px; overflow: hidden; }
.st-scope button {
    font-family: monospace; font-size: 11px; padding: 7px 10px; border: 0;
    color: #8b93a6; background: #16161f; cursor: pointer;
}
.st-scope button.on { color: #0e0e14; background: #4cd964; font-weight: bold; }

/* ── Showing the finger ──────────────────────────────────────────────── */
/* A screen recording loses it, so a clip of the studio shows things
   happening with nothing causing them. The layer sits over everything and
   is deaf to the pointer: it is a record of what happened, not a thing
   you can press. */
.st-touch {
    position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden;
}
.st-ring {
    position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%; border: 2px solid rgba(255, 200, 61, .95);
    background: rgba(255, 200, 61, .18);
    animation: st-tap .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
/* A press that landed on a control gets its own colour, so a video shows
   the difference between touching the grid and pressing a button. */
.st-ring.hit {
    border-color: rgba(102, 204, 153, .95);
    background: rgba(102, 204, 153, .2);
}
@keyframes st-tap {
    0%   { transform: scale(.35); opacity: 1; }
    60%  { opacity: .85; }
    100% { transform: scale(1.5); opacity: 0; }
}
/* And the control itself answers, which the ring alone does not show. */
.st-bar button:active, .pre-do button:active, .st-head:active { filter: brightness(1.5); }

/* ── Quibbles ─────────────────────────────────────────────────────────── */
/* Opens over the room you are standing in, which sits at 600. */

#qb-modal { z-index: 700; }
.qb-list { display: flex; flex-direction: column; gap: 8px; }
.qb-comm {
    display: flex; gap: 10px; align-items: flex-start; text-align: left;
    padding: 10px 12px; border-radius: 9px; cursor: pointer;
    border: 1px solid #1c2440; background: #0d1222; color: inherit;
}
.qb-comm:hover { border-color: #2f4a80; }
.qb-comm-txt { display: flex; flex-direction: column; gap: 3px; font-family: monospace; }
.qb-comm-txt b { font-size: 13px; color: #e8edf6; font-weight: normal; }
.qb-comm-txt span { font-size: 11px; color: #9aa3b4; line-height: 1.4; }
.qb-comm-txt small { font-size: 10px; color: #5f6a80; letter-spacing: .04em; }
.qb-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; display: inline-block; }

.qb-bar { margin-bottom: 10px; }
.qb-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: monospace; font-size: 11px; color: #4cc9ff; text-decoration: underline;
}
.qb-about { display: flex; gap: 8px; font-family: monospace; font-size: 12px; color: #9aa3b4; line-height: 1.45; }
.qb-actions { display: flex; gap: 8px; margin: 12px 0 6px; }
.est-btn.qb-on { border-color: #1f7a4d; background: #10241a; color: #6fe0a0; }

.qb-feed { display: flex; flex-direction: column; }
.qb-post { padding: 10px 0; border-top: 1px solid #1c1c26; font-family: monospace; }
.qb-post-top { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: #5f6a80; }
.qb-post-top b { color: #e8edf6; font-weight: normal; font-size: 12px; }
.qb-post-txt { margin-top: 4px; font-size: 12.5px; color: #c9d1e0; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.qb-del {
    margin-left: auto; background: none; border: none; cursor: pointer;
    font-family: monospace; font-size: 10px; color: #a8452f;
}

.qb-me { display: flex; gap: 14px; align-items: center; }
.qb-av { flex: 0 0 auto; width: 64px; height: 100px; }
.qb-me-txt { display: flex; flex-direction: column; gap: 4px; font-family: monospace; font-size: 11px; color: #9aa3b4; }
.qb-me-txt b { font-size: 15px; color: #e8edf6; font-weight: normal; }
.qb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-chip {
    display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 99px;
    border: 1px solid #1c2440; background: #0d1222; color: #e8edf6; cursor: pointer;
    font-family: monospace; font-size: 11px;
}
.qb-chip .qb-dot { margin-top: 0; width: 8px; height: 8px; }

.qb-lab { display: block; font-family: monospace; font-size: 10px; letter-spacing: .14em; color: #5f6a80; text-transform: uppercase; margin: 12px 0 6px; }
.qb-input {
    width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px;
    border: 1px solid #1c2440; background: #0d1222; color: #e8edf6;
    font-family: monospace; font-size: 13px;
}
.qb-text { min-height: 110px; resize: vertical; line-height: 1.45; }
.qb-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-family: monospace; font-size: 10px; color: #5f6a80; }
.qb-note { margin-top: 8px; font-family: monospace; font-size: 11px; color: #ff9a7a; min-height: 1em; }