/* Injected by the crowd arbitrator, over the top of the client's own page.
   The game is the page. Everything else defers to it: it sits underneath,
   stays small, and never covers the thing people came for. */

:root {
    --bg: #0d0b08;
    --panel: #1b1610;
    --edge: #3d3524;
    --ink: #d9d0b8;
    --ink-dim: #9a907a;
    --live: #7fb069;
    --wait: #c8a04a;
    --down: #b05555;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    /* the client's page is 789px wide by default, which is what hangs off the
       right edge of a phone */
    overflow-x: hidden;
}

body,
td,
p {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ink);
}

/* The canvas carries its own 789x532 and simply fills the width it is given.
   The client converts pointer positions with canvas.width / rect.width, so
   scaling it costs no accuracy - which is what makes a phone layout possible
   at all. */
#game {
    width: 100%;
    max-width: 789px;
    margin: 0 auto;
    padding: 0;
    /* the ghost layer is positioned against this frame */
    position: relative;
}

/* Other viewers' clicks, drawn in the world over the game canvas. It carries
   the game's intrinsic 789x532 and is laid over the canvas by script, so it
   follows whatever size the page gives the game. Never catches a pointer:
   the game underneath gets every click. */
#cw-ghosts {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    z-index: 1;
}

/* Fullscreen takes the frame, not the canvas alone, so the ghosts come too. */
#game:fullscreen {
    max-width: none;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#game:fullscreen canvas#canvas {
    width: min(100vw, calc(100vh * 789 / 532)) !important;
    height: auto !important;
}

canvas#canvas {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block;
    touch-action: none;
}

/* The client's own controls, moved behind the cog. */
#controls,
#hide-message {
    display: none !important;
}

#cw-root {
    width: 100%;
    max-width: 789px;
    margin: 0 auto;
    padding: 10px 14px 20px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

#cw-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

#cw-title {
    font-weight: 600;
    letter-spacing: 0.01em;
}

#cw-status {
    color: var(--wait);
}

#cw-status[data-state='live'] {
    color: var(--live);
}

#cw-status[data-state='offline'] {
    color: var(--down);
}

#cw-stats {
    color: var(--ink-dim);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* One dot per viewer, in that viewer's colour - the same colour their clicks
   wear in the world and in the tally. Yours has a ring. */
#cw-roster {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 10px;
}

.cw-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c, var(--ink-dim));
    vertical-align: middle;
    flex: none;
}

.cw-dot-me {
    box-shadow:
        0 0 0 1.5px var(--bg),
        0 0 0 3px var(--c, var(--ink));
}

/* Clicks as they arrive, before the tick decides between them. */
#cw-incoming {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-bottom: 4px;
}

#cw-incoming:empty {
    min-height: 0;
    margin-bottom: 0;
}

.cw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 6px;
    border: 1px solid var(--c, var(--edge));
    border-radius: 12px;
    font-size: 12px;
    color: var(--ink);
    background: var(--panel);
    transition: opacity 0.25s ease;
}

.cw-chip[data-state='won'] {
    background: color-mix(in srgb, var(--c) 22%, var(--panel));
}

.cw-chip[data-state='lost'] {
    opacity: 0.35;
}

/* The vote mode, tucked in the cog until it earns a place of its own. */
#cw-mode-row {
    margin-bottom: 8px;
    color: var(--ink-dim);
}

#cw-mode {
    margin-left: 6px;
    padding: 2px 10px;
    background: #2a2317;
    color: var(--ink);
    border: 1px solid var(--edge);
    border-radius: 4px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

#cw-mode:hover {
    background: #332b1c;
}

#cw-mode:focus-visible,
#cw-cog:focus-visible {
    outline: 2px solid var(--wait);
    outline-offset: 2px;
}

/* Settings: the client's size, scaling, keyboard, fullscreen and screenshot
   controls. Useful occasionally, so they get a cog rather than a permanent
   row of links under the game. */
#cw-cog {
    background: none;
    border: 0;
    color: var(--ink-dim);
    font: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

#cw-cog:hover,
#cw-cog[aria-expanded='true'] {
    color: var(--ink);
}

#cw-settings {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: 5px;
}

#cw-settings[data-open='true'] {
    display: block;
}

#cw-settings #controls {
    display: block !important;
    margin: 0;
    text-align: left;
    line-height: 2.2;
}

#cw-settings a,
#cw-settings select {
    color: var(--ink);
    font-size: 13px;
}

#cw-settings select {
    background: #2a2317;
    border: 1px solid var(--edge);
    border-radius: 4px;
    padding: 3px 4px;
}

@media (max-width: 520px) {
    #cw-root {
        padding: 8px 12px 18px;
    }

    #cw-stats {
        width: 100%;
        margin-left: 0;
    }

    #cw-head {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}