/* bs.css — BlockSmash shell.
 *
 * Portrait, phone-first (L6). The canvas fills the viewport on a phone and is
 * capped to a portrait column on desktop, so one layout serves both and the
 * later Capacitor wrap needs no changes.
 */

:root {
    --bg: #12161d;
    --panel: #1b2028;
    --edge: #2c3440;
    --ink: #e8eaee;
    --muted: #98a1ae;
    --accent: #e0a33e;
    --win: #5fbf7d;
    --lose: #d2695f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overscroll-behavior: none;
}

body {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

#bs-app {
    position: relative;
    width: 100%;
    max-width: 560px;          /* portrait column on desktop */
    height: 100dvh;
    overflow: hidden;
    background: #1b2434;
}

#bs-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;        /* we handle all gestures ourselves */
    cursor: crosshair;
}

/* ------------------------------------------------------------------- hud */

#bs-top, #bs-bottom {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .85rem;
    pointer-events: none;      /* the canvas underneath must stay aimable */
}

#bs-top {
    top: 0;
    padding-top: max(.6rem, env(safe-area-inset-top));
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

#bs-top b { color: var(--ink); }

#bs-bottom {
    bottom: 0;
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
}

/* Ammo pips. Deliberately large: shots remaining is the single most important
   number on screen, because ammo is the only limiter on rapid fire (L9). */
#bs-ammo {
    display: flex;
    gap: .4rem;
    align-items: center;
}

#bs-ammo i {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--edge);
    background: rgba(0, 0, 0, .35);
    display: block;
}

#bs-ammo i.on {
    background: var(--accent);
    border-color: #f3c579;
    box-shadow: 0 0 9px rgba(224, 163, 62, .55);
}

.bs-buttons {
    display: flex;
    gap: .45rem;
    pointer-events: auto;
}

.bs-buttons button {
    font: inherit;
    font-size: .8rem;
    color: var(--ink);
    background: rgba(27, 32, 40, .88);
    border: 1px solid var(--edge);
    border-radius: 7px;
    padding: .42rem .8rem;
    cursor: pointer;
}

.bs-buttons button:hover { background: #262d38; border-color: #3c4756; }

#bs-endless, #bs-sound { font-size: 1rem; line-height: 1; padding: .3rem .6rem; }
#bs-sound.on { color: #12161d; background: var(--accent); border-color: #f3c579; }
#bs-endless.on { color: #12161d; background: var(--accent); border-color: #f3c579; }

#bs-ammo .inf,
#bs-ammo .big {
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 10px rgba(224, 163, 62, .6);
}

#bs-ammo .big { font-variant-numeric: tabular-nums; }

#bs-ammo small {
    margin-left: .45rem;
    font-size: .68rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.bs-buttons button:active { transform: translateY(1px); }

/* ---------------------------------------------------------------- banner */

.bs-banner {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .85rem 1.6rem;
    border-radius: 11px;
    background: rgba(18, 22, 29, .93);
    border: 1px solid var(--edge);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    pointer-events: none;
    animation: bs-pop .22s ease-out;
}

.bs-banner.win { color: var(--win); border-color: #35543f; }
.bs-banner.lose { color: var(--lose); border-color: #56342f; }

@keyframes bs-pop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ----------------------------------------------------------- debug panel */

.bs-debug {
    position: absolute;
    top: 2.6rem;
    right: .6rem;
    width: min(310px, calc(100% - 1.2rem));
    max-height: calc(100% - 6rem);
    overflow-y: auto;
    z-index: 20;
    padding: .7rem .8rem .8rem;
    background: rgba(18, 22, 29, .96);
    border: 1px solid var(--edge);
    border-radius: 10px;
    font-size: .8rem;
}

.bs-debug-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}

.bs-x {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 .25rem;
}

.bs-select {
    width: 100%;
    font: inherit;
    padding: .35rem;
    margin-bottom: .35rem;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--edge);
    border-radius: 6px;
}

.bs-note {
    margin: 0 0 .55rem;
    color: var(--muted);
    font-size: .74rem;
    line-height: 1.35;
    min-height: 2.1em;
}

.bs-row {
    display: grid;
    grid-template-columns: 8.4em 1fr 2.7em;
    align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
}

.bs-name { color: var(--muted); font-size: .72rem; }
.bs-val { text-align: right; font-variant-numeric: tabular-nums; }
.bs-row input[type=range] { width: 100%; accent-color: var(--accent); }

.bs-debug-bar {
    display: flex;
    gap: .4rem;
    margin-top: .6rem;
}

.bs-debug-bar button {
    flex: 1;
    font: inherit;
    font-size: .76rem;
    padding: .38rem;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 6px;
    cursor: pointer;
}

.bs-debug-bar button:hover { background: #262d38; }

.bs-out {
    width: 100%;
    height: 8.5rem;
    margin-top: .5rem;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .68rem;
    color: var(--ink);
    background: #0d1116;
    border: 1px solid var(--edge);
    border-radius: 6px;
    padding: .4rem;
    resize: vertical;
}

.bs-stats {
    margin-top: .5rem;
    color: var(--muted);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ level picker + legend */

#bs-level, #bs-campaign {
    pointer-events: auto;
    font: inherit;
    font-size: .75rem;
    color: var(--ink);
    background: rgba(27, 32, 40, .9);
    border: 1px solid var(--edge);
    border-radius: 6px;
    padding: .28rem .4rem;
    max-width: 36%;
}

#bs-campaign { text-align: left; }
#bs-cleared-wrap { white-space: nowrap; font-size: .7rem; }

/* In-scene lane labels. Positioned by projecting their world point every
   frame, so each name sits directly above the pile it belongs to. A legend
   strip at the edge of the screen does not work here: the nine materials are
   close in tone, and mapping a colour chip onto a lane is exactly the work the
   label is supposed to remove. */
#bs-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
}

.bs-label {
    position: absolute;
    transform: translate(-50%, -100%);
    white-space: nowrap;
    font-size: .58rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    background: rgba(10, 14, 20, .8);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 4px;
    padding: .12rem .34rem .12rem .28rem;
    text-shadow: 0 1px 2px #000;
}

/* Pinned to a strip below the scene, for the ranges. The horizontal position
   still tracks the lane, so each name sits under the column it belongs to,
   but nothing covers the board while you are watching a shot land. */
.bs-label.pin {
    transform: translate(-50%, 0);
    font-size: .53rem;
    padding: .1rem .26rem .1rem .22rem;
    background: rgba(10, 14, 20, .88);
}

/* Colour swatch drawn as a left border, so it reads even when the label
   overlaps a busy part of the scene. */
.bs-label::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: .28rem;
    border-radius: 2px;
    vertical-align: -1px;
    background: var(--dot, #fff);
}

/* --------------------------------------------------- crosshair + loading */

/* Lives in the DOM rather than the 3D scene so it stays pixel-crisp at any
   device pixel ratio, and costs no draw call. */
#bs-cross {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    pointer-events: none;
    z-index: 5;
}

#bs-cross::before, #bs-cross::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 0 4px rgba(0, 0, 0, .8);
}

#bs-cross::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
#bs-cross::after { top: 50%; left: 0; height: 2px; width: 100%; margin-top: -1px; }

#bs-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #141b26;
    color: var(--muted);
    font-size: .9rem;
    z-index: 30;
}

#bs-loading[hidden] { display: none; }

.bs-noscript {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
}

#bs-records { margin-left: .9rem; color: var(--muted); font-size: .8rem; }
#bs-records b { color: var(--accent); font-variant-numeric: tabular-nums; }
#bs-records small { opacity: .75; margin-left: .35rem; }
#bs-solve.playing { color: #12161d; background: var(--accent); border-color: #f3c579; }