html,
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

body {
    background: #24272d;
    color: #e8eaed;
}

#canvas_container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #2d3138;
}

/* Its pixel size is set by render.ts to match the container's. */
#game_canvas_foreground {
    display: block;
    width: 100%;
    height: 100%;
}

/* display: block above overrides the hidden attribute. */
#game_canvas_foreground[hidden] {
    display: none;
}

/* HUD overlay on the canvas. Passes mouse input through, except on widgets. */
#game_hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#game_hud [hidden] {
    display: none;
}

/* Sized to its content but never beyond the container: wraps / scrolls instead of leaving the screen. */
#game_hud_selected_panel {
    position: absolute;
    right: 12px;
    bottom: 12px;
    box-sizing: border-box;
    width: max-content;
    max-width: min(24rem, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow: auto;
    overflow-wrap: anywhere;
    padding: 8px;
    background: rgba(36, 39, 45, 0.9);
    color: #e8eaed;
    border: 1px solid #c7cbd1;
    font-family: monospace;
    pointer-events: auto;
}

#game_hud_selected_text {
    margin: 0 0 8px;
    white-space: pre-wrap;
}

/* Placement phase overlay, near the top of the canvas. Passes mouse input through. */
#placement_ui {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: monospace;
    pointer-events: none;
}

#placement_ui[hidden] {
    display: none;
}

#placement_ui_message {
    font-size: 2rem;
}

#placement_ui_bar {
    width: min(30rem, 80%);
    height: 12px;
    border: 1px solid #c7cbd1;
    background: rgba(36, 39, 45, 0.9);
}

#placement_ui_bar_fill {
    width: 100%;
    height: 100%;
    background: #c7cbd1;
}

/* Lobby screen, centered in the container. Shown instead of the canvas while waiting for a match. */
#lobby_ui {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: monospace;
}

#lobby_ui[hidden],
#lobby_ui [hidden] {
    display: none;
}

#lobby_ui_countdown {
    font-size: 4rem;
}

/* Floats over the bottom-left corner of the canvas. */
#debug_panel {
    position: fixed;
    left: 8px;
    bottom: 8px;
    box-sizing: border-box;
    max-width: 45vw;
    max-height: 40vh;
    overflow: auto;
    padding: 8px;
    border: 1px solid #c7cbd1;
    background: #fff;
    color: #1d2128;
    font-family: monospace;
    white-space: pre-wrap;
}