/* ===============================
   Clean, responsive UI (CSS-only)
   =============================== */
:root {
    --bg: #0b0e1a;
    --text: #e6e6e6;
    --shadow: rgba(0, 0, 0, 0.40);
    --btn-bg: rgba(20, 20, 24, 0.55);
    --btn-bg-hover: rgba(42, 46, 60, 0.80);
    --outline: rgba(255, 255, 255, 0.25);
    --outline-strong: rgba(255, 255, 255, 0.60);
    --vol-bg: rgba(0, 0, 0, 0.45);
    --vol-fill-top: #ff79c6;
    --vol-fill-bot: #40e0d0;

    /* Viewport anchor for scaling (fallback to vw/vh below) */
    --u: min(100vw, 100vh);

    /* Fullscreen toolbar tokens (CSS-only responsiveness) */
    --fs-top: clamp(8px, 1.8svh, 18px);
    --fs-pad: clamp(4px, 0.7svh, 8px);
    --fs-gap: clamp(4px, 0.7svh, 8px);
    --fs-radius: clamp(10px, 1.2svh, 14px);
    --fs-btn: clamp(48px, calc(var(--u) * 0.07), 72px);
    --fs-border: 1px;
    --fs-icon: clamp(16px, calc(var(--fs-btn) * 0.32), 24px);
    --fs-auto-font: clamp(10px, calc(var(--fs-btn) * 0.16), 13px);

    --fs-slider-w: clamp(60px, calc(var(--fs-btn) * 1.1), 96px);
    --fs-slider-h: clamp(54px, calc(var(--fs-btn) * 1.0), 90px);
    --fs-bar-w: clamp(20px, calc(var(--fs-btn) * 0.12), 10px);
    --fs-tri-w: clamp(5px, calc(var(--fs-btn) * 0.10), 8px);
    --fs-tri-h: clamp(7px, calc(var(--fs-btn) * 0.12), 10px);
}

/* Prefer new small-viewport units when supported */
@supports (height: 1svh) {
    :root {
        --u: min(100svw, 100svh);
    }
}

html,
body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

.wrap {
    display: grid;
    place-items: center;
    min-height: 100%;
    gap: 14px;
    padding: 18px
}

/* ===== Game frame ===== */
.game-frame {
    position: relative;
    width: 100%;
    max-width: 1280px;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 10px 30px var(--shadow);
}
.game-frame_i {
    position: relative;
    width: 100%;
    max-width: 1280px;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.0);
    box-shadow: 0 10px 30px var(--shadow);
}
.wrap,
.game-frame {
    position: relative;
}

/* ensure positioning context */



body.is-fullscreen .game-frame {
    max-width: none;
    box-shadow: none;
}

canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    touch-action: none;
    z-index: 1;
}

/* Base (open) state */
.fs-cluster {
    position: absolute;
    left: 50%;
    top: calc(var(--fs-top) + env(safe-area-inset-top));
    transform: translate(-50%, 0);

    display: flex;
    align-items: center;
    gap: var(--fs-gap);
    padding: var(--fs-pad);
    background: rgba(8, 10, 18, 0.28);
    border-radius: var(--fs-radius);
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transition: transform .22s cubic-bezier(.2, .9, .2, 1), opacity .25s ease;
    will-change: transform;
    /* smoother */
    z-index: 10000;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

/* Closed (slides fully above) */
.fs-cluster.is-collapsed {
    transform: translate(-50%, calc(-100% - 12px));
    /* same transform() signature */
    pointer-events: none;
}

.fs-cluster.is-hidden {
    opacity: 0;
}

/* Buttons */
.fs-btn {
    position: relative;
    border: var(--fs-border) solid transparent;
    border-radius: 999px;
    background: var(--btn-bg);
    color: #fff;
    width: max(48px, var(--fs-btn));
    height: max(48px, var(--fs-btn));
    min-width: max(48px, var(--fs-btn));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 calc(var(--fs-gap)/2);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform .14s ease, opacity .25s ease, background .18s ease, outline-color .15s ease;
    outline: 0;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    font-size: 0;
    /* prevent layout from text in icon buttons */
}

.fs-btn:hover {
    transform: translateY(-1px);
    background: var(--btn-bg-hover);
    outline: 2px solid var(--outline);
}

.fs-btn:active {
    transform: translateY(0) scale(.985);
}

.fs-btn[aria-pressed="true"],
.fs-btn.is-on {
    outline: 2px solid var(--outline-strong);
}

/* Icons in buttons */
.fs-btn svg,
.fs-btn .fs-icon {
    width: var(--fs-icon);
    height: var(--fs-icon);
    display: block;
    flex: 0 0 auto;
}

.fs-btn svg path,
.fs-btn svg line,
.fs-btn svg ellipse {
    stroke: currentColor;
}

/* Autorun label */
.fs-autorun-label {
    color: #fff;
    line-height: 1;
    text-transform: lowercase;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
    pointer-events: none;
    font-size: var(--fs-auto-font);
}

/* Muted dim */
.fs-btn--music.is-muted,
.fs-btn--sfx.is-muted {
    opacity: .6;
}

/* Autorun ON */
.fs-btn--autorun.is-on {
    background: rgba(70, 120, 255, .65);
    outline: 2px solid rgba(160, 190, 255, .8);
}

/* ===== Volume popover (anchored to each button) ===== */
.fs-vol {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    width: var(--fs-slider-w);
    height: var(--fs-slider-h);
    display: none;
    z-index: 10001;
    touch-action: none;
}

.fs-vol.is-open {
    display: block;
}

/* Desktop hover opens without JS */
@media (hover:hover) {

    .fs-btn--music:hover .fs-vol,
    .fs-btn--sfx:hover .fs-vol {
        display: block;
    }
}

.fs-vol-bar {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: var(--fs-bar-w);
    height: 100%;
    background: var(--vol-bg);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 4px 10px rgba(0, 0, 0, .35);
}

.fs-vol-fill {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    /* JS updates % */
    background: linear-gradient(180deg, var(--vol-fill-top), var(--vol-fill-bot));
    border-radius: 6px;
}

.fs-vol-arrow {
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--fs-tri-h));
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: var(--fs-tri-w) solid transparent;
    border-right: var(--fs-tri-w) solid transparent;
    border-bottom: var(--fs-tri-h) solid rgba(0, 0, 0, .35);
}

/* Larger touch targets */
@media (hover:none) and (pointer:coarse) {
    .fs-btn {
        width: clamp(52px, calc(var(--fs-btn) * 1.05), 80px);
        height: clamp(52px, calc(var(--fs-btn) * 1.05), 80px);
        min-width: clamp(52px, calc(var(--fs-btn) * 1.05), 80px);
    }
}

/* === PWA / iOS fullscreen helpers === */
html,
body {
    margin: 0;
    padding: 0;
    background: #000;
    height: 100%;
    overscroll-behavior: none;
}

.is-standalone canvas,
.is-standalone #game-root,
.is-standalone .game-root {
    width: 100vw;
    height: 100dvh;
    display: block;
}

.safe-area,
#hud,
.touch-zones {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}




/* ===== Touch Controls CSS (appended) ===== */
html,
body,
canvas,
#frame,
#ui-layer {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

:root {
    --tc-btn: 72px;
    --tc-gap: 16px;
    --tc-pad: 0px;
    --tc-radius: 16px;
    --tc-bg: rgba(10, 10, 14, 0.00);
    --tc-btn-bg: rgba(25, 25, 32, 0.38);
    --tc-btn-bg-active: rgba(60, 60, 80, 0.45);
    --tc-border: rgba(255, 255, 255, 0.00);
    --tc-shadow: 0 8px 24px rgba(0, 0, 0, 0.00);
    --tc-z: 10;
}

.touch-controls {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--tc-z);
}

.touch-controls .tc-group {
    position: fixed;
    display: none;
    gap: var(--tc-gap);
    padding: var(--tc-pad);
    border-radius: var(--tc-radius);
    background: var(--tc-bg);
    
    box-shadow: var(--tc-shadow);
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    user-select: none;
}

.touch-controls .tc-btn {
    width: var(--tc-btn);
    height: var(--tc-btn);
    border-radius: 9999px;
    border: 1px solid var(--tc-border);
    background: var(--tc-btn-bg);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: calc(var(--tc-btn)*.36);
    line-height: 1;
    box-shadow: var(--tc-shadow);
}

.touch-controls .tc-btn.tc-jump {
    width: calc(var(--tc-btn));
    height: calc(var(--tc-btn));
    font-size: calc(var(--tc-btn)*.36);
}

.touch-controls .tc-btn:active,
.touch-controls .tc-btn.is-pressed {
    background: var(--tc-btn-bg-active);
    transform: translateY(-1px);
}

/* Bottom mode (buttons below the game) */
.touch-controls.mode-bottom .tc-left-group,
.touch-controls.mode-bottom .tc-right-group {
    display: grid;
}

.touch-controls.mode-bottom .tc-left-group {
    right: calc(var(--frame-right));
    top: calc(var(--frame-top) + var(--frame-h) + 12px);
}

.touch-controls.mode-bottom .tc-right-group {
    left: calc(var(--frame-left));
    top: calc(var(--frame-top) + var(--frame-h) + 12px);
    grid-auto-flow: column;
}


/* Overlay (inside game near bottom) */
.touch-controls.mode-overlay .tc-left-group,
.touch-controls.mode-overlay .tc-right-group {
    display: grid;
}

.touch-controls.mode-overlay .tc-left-group {
    right: calc(var(--frame-right) - 55px);
    bottom: calc(var(--frame-bottom) + 6px);
}

.touch-controls.mode-overlay .tc-right-group {
    left: calc(var(--frame-left) - 55px);
    bottom: calc(var(--frame-bottom) + 6px);
    grid-auto-flow: column;
}

/* Safe area (iOS) */
@supports (padding: max(0px)) {
    .touch-controls .tc-group {
        margin-bottom: max(0px, env(safe-area-inset-bottom));
        margin-left: max(0px, env(safe-area-inset-left));
        margin-right: max(0px, env(safe-area-inset-right));
    }
}

@media (max-width:480px) {
    :root {
        --tc-btn: 64px;
    }
}

/* --- Slide behavior for the existing toolbar --- */
.fs-cluster {
    /* already positioned at the top center in your CSS */
    transition: transform .22s cubic-bezier(.2, .9, .2, 1);
}

/* Off-screen (closed) */
.fs-cluster.is-collapsed {
    transform: translate(-50%, calc(-100% - 12px));
    /* slide fully above + small offset */
    pointer-events: none;
    /* prevent stray clicks when closed */
}

/* Open state uses your existing top/translateX. Nothing else needed. */

/* --- Handle (small arrow at the very top center) --- */
.fs-handle {
    position: absolute;
    left: 50%;
    top: max(6px, calc(env(safe-area-inset-top) + 4px));
    transform: translateX(-50%);
    width: clamp(26px, 3.4svh, 36px);
    height: clamp(26px, 3.4svh, 36px);
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--outline, rgba(255, 255, 255, .25));
    background: var(--btn-bg, rgba(20, 20, 24, .55));
    color: var(--text, #fff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 10050;
    /* above the toolbar */
    -webkit-tap-highlight-color: transparent;
}

.fs-handle svg {
    width: 60%;
    height: 60%;
}

/* Optional: rotate arrow when open */
#fs-cluster:not(.is-collapsed)+.fs-handle svg path {
    transform: rotate(180deg);
    transform-origin: 12px 12px;
    transition: transform .18s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fs-cluster {
        transition: none;
    }

    .fs-handle svg path {
        transition: none;
    }
}