/* QCG Singapore 3D space - page styles */

html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden; /* canvas fills the window, no scrollbars */
    background: #ffffff;
}

canvas {
    display: block;     /* removes the inline gap under the canvas */
    touch-action: none; /* finger drags look around instead of scrolling/zooming */
    cursor: grab;       /* drag to look around */
}

canvas.dragging {
    cursor: grabbing;
}

/* Info panel along the bottom (site UI style: white, 1px #1f2937 border, black text, 6px radius) */
.info {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    box-sizing: border-box;
    padding: 8px 48px 8px 14px; /* right padding leaves room for the x */
    background: #ffffff;
    border: 1px solid #1f2937;
    border-radius: 6px;
    color: #000000;
    font: 14px/1.45 Arial, Helvetica, sans-serif;
    pointer-events: none; /* clicks on the text go through to the view; only the x is clickable */
}

.info[hidden] {
    display: none;
}

.info-line {
    margin: 0;
}

.info-line + .info-line {
    margin-top: 2px;
}

.info-close {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #1f2937;
    border-radius: 6px;
    color: #000000;
    font: 18px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    pointer-events: auto;
}

.info-close:hover {
    background: #f3f4f6;
}

.info-close:focus-visible {
    outline: 2px solid #1f2937;
    outline-offset: 2px;
}

/* Show only the controls for this device */
.controls-touch {
    display: none;
}

@media (pointer: coarse) {
    .controls-desktop {
        display: none;
    }

    .controls-touch {
        display: inline;
    }
}

/* Touch joystick, bottom left (site UI style: white, dark border).
   Sits above the info panel while it's open (--joystick-bottom, set in ui/infoPanel.js). */
.joystick {
    position: fixed;
    left: 24px;
    bottom: var(--joystick-bottom, 24px);
    width: 120px;
    height: 120px;
    border: 1px solid #1f2937;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.joystick[hidden] {
    display: none;
}

.joystick-knob {
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #1f2937;
    border-radius: 50%;
    background: #ffffff;
    pointer-events: none; /* the whole joystick handles the touch */
}