/* ==========================================================================
   Play Page
   Paint over a textured background to play a drone
   Loaded only by /play in addition to vela.css
   ========================================================================== */

/* vela.css gives the body width: 100% and the browser adds an 8px margin, so
   the page is 8px wider than the screen. On iPhone the fixed panel then sits
   off center. Let the body fit the screen. */
html:has(.play-page) { overflow: hidden; }

.play-page {
    width: auto;
    background: #7E8AED; /* Seen only without WebGL */
    overscroll-behavior: none;
}

.play-page.no-gl {
    background: radial-gradient(circle at 30% 30%, #E5F96A, 6%, #7E8AED, 70%, #4955B5);
}

#field,
#paint {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.no-gl #field { display: none; }

#paint {
    z-index: 1;
    touch-action: none;
    cursor: crosshair;
    transition: opacity 0.7s;
}

#paint.fading { opacity: 0; }

/* Header and footer stay on top, but let the paint through between links */
.play-page header,
.play-page footer {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

/* The same for the footer: fit it to the screen, padding included */
.play-page footer {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    margin-left: 0;
}

.play-page header a,
.play-page footer a {
    pointer-events: auto;
}

/* ==========================================================================
   Playhead, brush and messages
   ========================================================================== */

#playhead {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 1px;
    background: linear-gradient(transparent, rgba(236, 236, 226, 0.35) 20%, rgba(236, 236, 226, 0.35) 80%, transparent);
    opacity: 0;
    transition: opacity 2s;
    pointer-events: none;
}

#playhead.on { opacity: 1; }

#brush {
    --size: 6px;
    --ink: #E5F96A;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--size);
    height: var(--size);
    margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
    border: 1px solid var(--ink);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

#brush.on { opacity: 0.9; }

#cue,
#flash {
    position: fixed;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 2;
    margin: 0;
    text-align: center;
    pointer-events: none;
}

#cue {
    font-size: 1.5em;
    color: #ECECE2;
    transition: opacity 3s;
}

#cue.gone { opacity: 0; }

#flash {
    top: calc(50% + 2.5em);
    font-size: 0.8em;
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 0.8s;
}

#flash.on { opacity: 0.85; }

/* ==========================================================================
   Tools: colors, width, key, layers and the list of keys
   ========================================================================== */

#tools {
    --ink: #E5F96A;
    --size: 3px;
    position: fixed;
    right: 16px;
    bottom: 64px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    font-size: 0.8em;
    transition: opacity 0.6s;
}

.bare #tools {
    opacity: 0;
    pointer-events: none;
}

#tools button {
    padding: 0;
    border: 0;
    background: none;
    color: #ECECE2;
    font: inherit;
    cursor: crosshair;
}

#tools button { touch-action: manipulation; }

@media (hover: hover) {
    #tools button:hover { color: #E5F96A; }
}

#swatches {
    display: flex;
    gap: 6px;
}

#swatches button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 1px rgba(236, 236, 226, 0.25);
}

#swatches button[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #7E8AED, 0 0 0 3px #ECECE2;
}

#size {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#size::before {
    content: "";
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--ink);
}

#key,
#layers { opacity: 0.85; }

#meter {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

#meter i {
    width: 3px;
    height: 4px;
    background: rgba(236, 236, 226, 0.3);
    transition: background 1s, height 1s;
}

#meter i:nth-child(2) { height: 6px; }
#meter i:nth-child(3) { height: 8px; }
#meter i:nth-child(4) { height: 9px; }
#meter i:nth-child(5) { height: 11px; }
#meter i:nth-child(6) { height: 12px; }
#meter i.lit { background: #E5F96A; }

.recording #key::before {
    content: "● ";
    color: #E5F96A;
    animation: blink 1.2s infinite;
}

@keyframes blink {
    50% { opacity: 0.2; }
}

/* Each row is a key and what it does. A tap on a row does the same as the key. */
#keys {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 10px;
    margin: 4px 0 0;
}

#keys[hidden] { display: none; }

#keys .row {
    display: grid;
    grid-template-columns: 2.4em auto;
    gap: 10px;
    text-align: left;
}

#keys kbd {
    font: inherit;
    color: #E5F96A;
    text-align: right;
}

#keys #fade { text-decoration: underline dotted; text-underline-offset: 3px; }

/* A small dot that hides or shows the panel, for phones */
#bare-toggle {
    position: fixed;
    right: 16px;
    bottom: 40px;
    z-index: 3;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #ECECE2;
    border-radius: 50%;
    background: transparent;
    opacity: 0.5;
    cursor: crosshair;
}

.bare #bare-toggle { background: #ECECE2; }

/* A larger area to tap than the dot you see */
#bare-toggle::before {
    content: "";
    position: absolute;
    inset: -14px;
}

/* Touch screens: the same panel, with larger targets for fingers */
@media (pointer: coarse) {
    #tools {
        gap: 12px;
        padding: 10px 14px;
    }

    #swatches { gap: 10px; }

    #swatches button {
        width: 24px;
        height: 24px;
    }

    #thinner,
    #thicker,
    #help {
        min-width: 32px;
        min-height: 32px;
        font-size: 1.2em;
    }

    #keys { gap: 0 12px; }
    #keys .row { padding: 7px 0; }

    /* Color and width have their own buttons above */
    #keys span.row { display: none; }
}

@media (max-width: 767px) {
    /* The panel fills the width, with the same margin on both sides */
    #tools {
        left: 16px;
        bottom: 52px;
        justify-content: center;
    }

    #bare-toggle { bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    #cue, #flash, #playhead { transition: none; }
}