/* Specific styles for play section */



/* View Toggle Button */
.play-view-toggle {
    position: absolute;
    top: calc(2rem - 22px);
    right: calc(var(--content-inset) - 22px);
    z-index: 100;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    transition: opacity 0.2s ease;
    font-size: calc((1.5rem) * var(--font-scale));
}

.play-view-toggle:focus-visible {
    outline: 2px dashed var(--text-color);
    outline-offset: -2px;
}

/* The toggle shows the icon for the view you'd switch TO: grid_on in canvas
   mode, scatter_plot (the canvas/scatter icon) in grid mode. JS swaps display. */
.play-view-toggle .ms-icon {
    font-size: 22px;
}

/* Canvas icon is hidden by default (canvas mode); JS shows it in list mode */
.play-view-toggle .icon-canvas {
    display: none;
}

/* Default (List) View */
.play-viewport {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    container-type: size;
}

.play-canvas {
    /* Extra bottom room in list view so the last row clears the viewport edge. */
    --grid-bottom-gutter: 80px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* Grow the gutters on wider viewports so the grid breathes; stays at 1rem
       on small screens. */
    gap: clamp(1rem, 1.5vw, 2rem);
    padding: 2rem var(--content-inset) calc(2rem + var(--grid-bottom-gutter));
}

.play-item {
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: grid;
    aspect-ratio: 1;
}

.play-item:hover, .play-item:focus {
    transform: translateY(-2px);
    outline: none;
}

.play-thumb {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 calc(1px / var(--zoom-scale, 1)) var(--text-color);
    /* transition for initial scatter animation and lightbox */
    transition: top 0.3s ease-out, left 0.3s ease-out, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), width 0.3s cubic-bezier(0.2, 0, 0.2, 1), height 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}

.media-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.thumb-layer {
    color: transparent;
}

.play-thumb[data-video], .play-thumb[data-youtube] {
    background: var(--bg-color);
}

.play-thumb[data-video]::before, .play-thumb[data-youtube]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent var(--text-color);
    z-index: 5;
    transition: opacity 0.3s ease;
}

.play-item.lightbox-expanded-responsive .play-thumb[data-video]::before, 
.play-item.lightbox-expanded-responsive .play-thumb[data-youtube]::before {
    opacity: 0 !important;
}

.play-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-color);
    opacity: var(--stack-tint, 0);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.2, 0, 0.2, 1);
    z-index: 10;
}

.play-item.lightbox-expanded-responsive .play-thumb::after {
    opacity: 0 !important;
}

/* Fallback shown when a video/embed fails to load: a solid panel (covering any
   broken-image state) with a short notice and a link to the external source. */
.play-media-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    background: var(--bg-color);
    color: var(--text-color);
    z-index: 12;
    pointer-events: auto;
}

.play-media-fallback p {
    font-family: var(--font-body);
    font-size: calc((clamp(1rem, 2.5vw, 1.3rem)) * var(--font-scale));
}

.play-media-fallback a {
    font-family: var(--font-body);
    font-size: calc((clamp(1.1rem, 3vw, 1.5rem)) * var(--font-scale));
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.play-media-fallback a:hover {
    text-decoration-thickness: 2px;
}

.highres-layer {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.highres-layer.loaded {
    opacity: 1;
}

/* 3D model in the lightbox. Override .media-layer's pointer-events:none so
   model-viewer can receive drag-to-rotate; touch-action:none keeps that drag
   from scrolling the gallery underneath. */
.play-thumb model-viewer.play-model {
    pointer-events: auto;
    touch-action: none;
    background-color: transparent;
    --poster-color: transparent;
}

/* In the lightbox, a 3D model floats frameless on a transparent background
   (like a text box) — drop the thumb's border and hide the poster image so the
   model never overlaps it. */
.play-item.lightbox-expanded-responsive .play-thumb[data-model] {
    box-shadow: none;
    background: transparent;
}

.play-item.lightbox-expanded-responsive .play-thumb[data-model] .thumb-layer {
    opacity: 0;
}

/* Canvas Mode */
.play-canvas.canvas-mode {
    display: block;
    position: absolute;
    padding: 0;
    width: 0;
    height: 0;
    left: 50cqw;
    top: 50cqh;
    zoom: max(0.4, min(100cqw / 1200, 100cqh / 800));
    transform-origin: 0 0;
}

.play-viewport:has(.canvas-mode) {
    overflow: hidden;
    touch-action: none;
}

/* Blueprint grid backdrop for the canvas. It lives inside the transformed
   canvas, so it pans and zooms in lockstep with the scattered items. The
   gaps stay transparent, letting the Play background colour show through;
   only the faint major/minor rules are painted. */
.play-canvas.canvas-mode::before {
    content: '';
    position: absolute;
    left: -10000px;
    top: -10000px;
    width: 20000px;
    height: 20000px;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(var(--play-grid-major) 2px, transparent 2px),
        linear-gradient(90deg, var(--play-grid-major) 2px, transparent 2px),
        linear-gradient(var(--play-grid-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--play-grid-minor) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: center;
}

.canvas-mode .play-item {
    position: absolute;
    width: 250px;
    height: 250px;
    /* remove transition after initial load or handle in JS */
}

.play-aabb {
    position: absolute;
    border: none;
    pointer-events: none;
    z-index: 0;
}

/* Lightbox Overlay */
.play-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg-color) 70%, transparent);
    backdrop-filter: blur(4px);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.play-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* While the lightbox is open the "Play" label stays visible on roomy screens.
   The blend-mode pairing can't be used here: the solid bottom-layer fallback
   sits beneath the frosted overlay and bleeds faintly around its edges. So drop
   the bottom layer and repaint the top layer as a single solid label instead. */
body.lightbox-active #cell-play .category-trigger.bottom-layer {
    opacity: 0 !important;
    pointer-events: none;
}

body.lightbox-active #cell-play a.category-trigger.top-layer {
    mix-blend-mode: normal;
    color: var(--text-color);
}

/* Hide it only where space is sparse — phones, or very short viewports — so it
   can't collide with the lightbox controls clustered along the bottom edge. */
@media (max-width: 768px) {
    body.lightbox-active #cell-play a.category-trigger.top-layer {
        opacity: 0 !important;
    }
}

@container (max-height: 520px) {
    body.lightbox-active #cell-play a.category-trigger.top-layer {
        opacity: 0 !important;
    }
}

.play-item.lightbox-expanded {
    z-index: 1000 !important;
}



.play-overlay-close {
    pointer-events: auto !important;
    position: absolute;
    top: calc(2rem - 22px);
    right: calc(2rem - 22px);
    z-index: 3500;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.play-overlay-close .ms-icon {
    font-size: 26px;
}

.play-overlay-close.active {
    opacity: 1;
    visibility: visible;
}

.play-overlay-close:focus-visible {
    outline: 2px dashed var(--text-color);
    outline-offset: -2px;
}
#cell-play {
    --lightbox-pad-top: 2rem;
    --lightbox-pad-bottom: calc(4rem + clamp(2.4rem, 12vw, 6rem));
    --lightbox-pad-x: 4rem; /* 2rem on left, 2rem on right */
}

#cell-play {
    container-type: size;
}

.play-item.lightbox-expanded-responsive {

    /* Full width to allow edge-to-edge scrolling, but padded */
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 6 !important;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: var(--lightbox-pad-top) 2rem var(--lightbox-pad-bottom) 2rem;
    box-sizing: border-box;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    touch-action: pan-x;
    /* The framed gallery itself closes on click (anything that isn't a thumb):
       a plain arrow, not a misleading pointer/zoom cursor. Each thumb advertises
       its own action below. */
    cursor: default;
}

.play-item.lightbox-expanded-responsive::-webkit-scrollbar {
    display: none;
}

.play-item.lightbox-idle .play-thumb {
    transition: none;
}

main#nav-grid:not(.active-play) #cell-play > .play-item.lightbox-expanded-responsive {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.play-item.lightbox-expanded-responsive .play-thumb {
    grid-area: auto;
    /* Scale mathematically to fit viewport bounding box while strictly preserving aspect ratio */
    --avail-h: calc(100cqh - var(--lightbox-pad-top) - var(--lightbox-pad-bottom));
    --avail-w: calc(100cqw - var(--lightbox-pad-x));
    width: min(var(--avail-w), calc(var(--avail-h) * var(--aspect, 1))) !important;
    height: min(var(--avail-h), calc(var(--avail-w) / var(--aspect, 1))) !important;
    aspect-ratio: var(--aspect, 1) !important; 
    flex-shrink: 0;
    scroll-snap-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Centred media thumb: click zooms it in. */
.play-item.lightbox-expanded-responsive .play-thumb.is-center {
    cursor: zoom-in;
}

/* Centred text panel: it is real, selectable prose — let the pointer and the
   selection behaviour say so (overriding the stack's blanket user-select:none /
   pointer cursor). Off-centre text keeps the pointer cursor, since a click there
   only scrolls it to the centre. */
.play-item.lightbox-expanded-responsive .play-text-thumb.is-center,
.play-item.lightbox-expanded-responsive .play-text-thumb.is-center .text-content {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

.play-item.lightbox-expanded-responsive.zoomed {
    z-index: 20 !important;
}

.play-item.lightbox-expanded-responsive.zoomed .play-thumb {
    cursor: grab;
}

.play-item.lightbox-expanded-responsive.zoomed.dragging .play-thumb {
    cursor: grabbing;
}

.lightbox-prev, .lightbox-next, .lightbox-share {
    position: absolute;
    top: calc(50% - (var(--lightbox-pad-bottom) - var(--lightbox-pad-top)) / 2);
    transform: translateY(-50%);
    z-index: 3500;
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.lightbox-prev, .lightbox-share {
    background: var(--bg-color);
    border: 1px solid var(--text-color);
}

.lightbox-prev .ms-icon, .lightbox-next .ms-icon {
    font-size: calc((2rem) * var(--font-scale));
}

.lightbox-prev:focus-visible, .lightbox-next:focus-visible, .lightbox-share:focus-visible {
    outline: 2px dashed var(--text-color);
    outline-offset: 4px;
}

.lightbox-prev.active, .lightbox-next.active, .lightbox-share.active {
    opacity: 1;
    visibility: visible;
}

#cell-play:has(.zoomed) .lightbox-prev,
#cell-play:has(.zoomed) .lightbox-next,
#cell-play:has(.zoomed) .lightbox-share {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

.lightbox-prev {
    left: calc(2rem - 22px);
}

.lightbox-next {
    right: calc(2rem - 22px);
    background: transparent;
    border: 1px solid transparent;
    z-index: 3502;
}

.lightbox-share {
    right: calc(2rem - 22px);
    z-index: 3501;
}

.lightbox-share {
    width: auto;
    max-width: 3.5rem;
    min-width: 3.5rem;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 2rem;
    font-size: calc((1.25rem) * var(--font-scale));
    line-height: 1;
    color: transparent;
    transition: max-width 0.35s cubic-bezier(0.2, 0, 0.2, 1), padding 0.35s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.25s ease-out, visibility 0.25s ease-out, color 0.35s ease-out;
}

.lightbox-share svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lightbox-share::before {
    content: '✓';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-color);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: Arial, sans-serif;
    width: 18px;
    text-align: center;
}

.lightbox-share span {
    padding-left: 2rem;
}

.lightbox-share.expanded {
    max-width: 15rem;
    padding: 0 1.5rem;
    color: var(--text-color);
}

.lightbox-share.expanded svg {
    left: 1.5rem;
    transform: translateY(-50%);
    opacity: 1;
}

.lightbox-share.expanded::before {
    left: 1.5rem;
    transform: translateY(-50%);
}

.lightbox-share.success {
    color: var(--text-color) !important;
}

.lightbox-share.success svg {
    opacity: 0 !important;
}

.lightbox-share.success::before {
    opacity: 1 !important;
}

@media (min-width: 769px) {
    .play-item.lightbox-expanded-responsive {
        padding-right: 10rem !important;
    }

    /* Larger screens get more breathing room around the media. The thumb sizes
       itself to fit the available box (viewport minus these pads), so growing
       the pads with the viewport shrinks the image and opens up whitespace on
       every side — and keeps the centred media clear of the bottom-left "Play"
       label that is now shown in the lightbox. Clamps scale it smoothly from
       tablet to large desktop. */
    #cell-play {
        --lightbox-pad-top: clamp(2rem, 6vh, 6rem);
        --lightbox-pad-x: clamp(4rem, 14vw, 18rem);
    }
}

@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next, .lightbox-share {
        top: auto;
        bottom: calc(2rem - 22px);
        transform: none;
    }
}

.play-text-thumb {
    background: transparent;
    color: var(--text-color);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    
    border-bottom: 1px solid transparent;
    overflow: visible;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.play-text-thumb.has-overflow {
    border-bottom: 1px solid var(--text-color);
}

.play-item.lightbox-expanded-responsive .play-text-thumb {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.play-text-thumb .text-content {
    padding: 0;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Headings inside a Play text card pick up the heading face like every other
   heading on the site; the running text stays in the body font. */
.play-text-thumb .text-content :is(h1, h2, h3, h4) {
    font-family: var(--font-heading);
    font-weight: 500;
}

.play-text-thumb:not(.has-overflow) .text-content {
    justify-content: center;
}

.play-text-thumb .expand-chevron {
    display: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 1px solid var(--text-color);
    background: var(--bg-color);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    margin: 0;
}

.play-text-thumb.has-overflow .expand-chevron,
.play-item.lightbox-expanded-responsive .play-text-thumb.expanded .expand-chevron {
    display: flex;
}

.play-text-thumb .expand-chevron .ms-icon {
    font-size: calc((1.8rem) * var(--font-scale));
    transition: transform 0.3s;
}

.play-text-thumb .expand-chevron::after {
    content: '';
    position: absolute;
    inset: -1.5rem;
}

.play-item.lightbox-expanded-responsive .play-text-thumb.expanded .expand-chevron .ms-icon {
    transform: rotate(180deg);
}

.play-text-thumb .expand-chevron:focus-visible {
    outline: 2px dashed var(--text-color);
    outline-offset: 4px;
}

.play-item.lightbox-expanded-responsive .play-text-thumb.expanded {
    height: 100cqh !important;
    margin-top: calc(-1 * var(--lightbox-pad-top));
    margin-bottom: calc(-1 * var(--lightbox-pad-bottom));
    aspect-ratio: auto !important;
    overflow-y: auto;
    border-bottom: none;
    padding-bottom: 0;
}

.play-item.lightbox-expanded-responsive .play-text-thumb.expanded::after {
    content: '';
    display: block;
    position: relative;
    flex: none;
    height: calc(var(--lightbox-pad-bottom) + (var(--avail-h) - min(var(--avail-h), calc(var(--avail-w) / var(--aspect, 1)))) / 2 - 1.75rem);
}

.play-item.lightbox-expanded-responsive .play-text-thumb.expanded .text-content {
    padding-top: calc(var(--lightbox-pad-top) + (var(--avail-h) - min(var(--avail-h), calc(var(--avail-w) / var(--aspect, 1)))) / 2);
    padding-bottom: 0;
    flex: none;
    height: auto;
    overflow: visible;
}

.play-item.lightbox-expanded-responsive .play-text-thumb.expanded .expand-chevron {
    position: sticky;
    bottom: calc(2rem - 22px);
    left: auto;
    transform: none;
    margin: 2rem auto 0 auto;
    z-index: 10;
}


/* ===== Play canvas comments (local-only) ================================= */
.play-notes-layer {
    position: absolute;
    inset: 0;
    pointer-events: none; /* pins re-enable their own */
    z-index: 6;
}

/* Pins only exist in canvas view, never the grid/list. */
.play-canvas:not(.canvas-mode) .play-notes-layer {
    display: none;
}

/* The pin sits in canvas coordinates (pans/zooms with content) but counter-
   scales via --zoom-scale so its on-screen size stays constant. */
.play-note-pin {
    position: absolute;
    transform: scale(calc(1 / var(--zoom-scale, 1)));
    transform-origin: center center; /* counter-scale around the note point */
    pointer-events: auto;
    z-index: 1;
}

.play-note-pin:focus-visible {
    outline: none;
}

/* A dot centred exactly on the note's coordinate, so the marker, the read
   bubble and the editor all share the same anchor (no offset). */
.pnp-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Body in the page colour, outline in the text colour: light theme = white
       body / black outline, dark theme = the inverse. */
    background: var(--bg-color);
    border: 2px solid var(--text-color);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.play-note-pin:hover .pnp-marker,
.play-note-pin:focus-visible .pnp-marker {
    transform: translate(-50%, -50%) scale(1.18);
}

/* Unconfirmed (draft) note: dashed, hollow. */
.play-note-pin.is-draft .pnp-marker {
    background: transparent;
    border-style: dashed;
}

/* Stored-note text bubble, revealed on hover / focus / tap. */
.play-note-bubble {
    position: absolute;
    left: 50%;
    bottom: 14px; /* clears the centred dot */
    transform: translateX(-50%);
    display: none;
    min-width: 120px;
    max-width: 220px;
    padding: 0.5rem 1.6rem 0.5rem 0.7rem;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 10px;
    z-index: 2;
}

.play-note-pin:hover .play-note-bubble,
.play-note-pin:focus-within .play-note-bubble,
.play-note-pin.show .play-note-bubble {
    display: block;
}

.pnb-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: calc((1rem) * var(--font-scale));
    line-height: 1.3;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.pnb-del {
    position: absolute;
    top: 2px;
    right: 4px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: calc((1rem) * var(--font-scale));
    line-height: 1;
    cursor: pointer;
    padding: 2px;
}

.pnb-del:hover {
    background: var(--text-color);
    color: var(--bg-color);
    border-radius: 50%;
}

/* Note controls (the info button + "Leave a note" FAB) — Play canvas mode only.
   The row is anchored on the content gutter line (not a fixed 1.5rem from the
   screen edge), so on extra-wide screens it stays at the content column's right
   edge rather than drifting out into the wide gutter. The info button sits to
   the left of the FAB and only appears while a note is being placed. */
.play-note-controls {
    position: absolute;
    /* Sit on the content-inset gutter line like the Grid/Options toggle (a 44px
       round control centred on that line → right edge 22px past it). */
    right: calc(var(--content-inset) - 22px);
    bottom: 1.5rem;
    z-index: 7;
    display: none;
    align-items: center;
    gap: 0.6rem;
}

#play-content:has(.play-canvas.canvas-mode) .play-note-controls {
    display: flex;
}

/* Hidden while a stack is open in the lightbox. */
body.lightbox-active .play-note-controls {
    display: none !important;
}

.play-note-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    height: 44px;
    /* Left padding seats the icon in the pill's left "incircle" (its centre at
       height/2 from the edge), so it lines up like the round info button. */
    padding: 0 1.1rem 0 0.7rem;
    border: 1px solid var(--text-color);
    border-radius: 999px;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: calc((1.05rem) * var(--font-scale));
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, var(--page-color-transition);
}

.play-note-fab[aria-pressed="true"] {
    background: var(--text-color);
    color: var(--bg-color);
}

.pnf-icon {
    font-size: 1.4rem;
    display: inline-flex;
}

/* Circular info button — shown only while placing a note (comment mode), to the
   left of the Cancel FAB. Matches the FAB's height so the row stays level; the
   ring is the button itself, so it uses the bare info_i glyph. */
.play-note-info {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--text-color);
    border-radius: 50%;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, var(--page-color-transition);
}

#play-content.comment-mode .play-note-info {
    display: inline-flex;
}

/* Solid hover (invert) — no translucent wash. */
.play-note-info:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

#play-content.comment-mode .play-canvas {
    cursor: crosshair;
}

/* Brief shake when a pin is rejected (over a stack / occupied spot). */
#play-content.note-denied .play-note-fab {
    animation: note-denied-shake 0.3s ease;
}

@keyframes note-denied-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Speech-bubble editor (screen-space, anchored to the pin's live position by JS,
   which sets left/top; translateX(-50%) centres it on the pin). */
.play-note-editor {
    position: fixed;
    transform: translateX(-50%);
    z-index: 3500;
    width: min(320px, calc(100vw - 2rem));
    padding: 0.85rem;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 14px;
}

/* Tail pointing up to the pin (default: editor below the pin). */
.play-note-editor::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--bg-color);
    border-left: 1px solid var(--text-color);
    border-top: 1px solid var(--text-color);
}

/* Flipped: editor above the pin, tail points down. */
.play-note-editor.above::before {
    top: auto;
    bottom: -8px;
    border-left: none;
    border-top: none;
    border-right: 1px solid var(--text-color);
    border-bottom: 1px solid var(--text-color);
}

.pne-text {
    width: 100%;
    min-height: 64px;
    resize: none;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: calc((1.1rem) * var(--font-scale));
    line-height: 1.35;
    outline: none;
}

.pne-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.pne-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--text-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pne-btn .ms-icon { font-size: 20px; }

.pne-confirm {
    background: var(--text-color);
    color: var(--bg-color);
}

.pne-confirm:hover {
    background: color-mix(in srgb, var(--text-color) 80%, var(--bg-color));
}

.pne-delete:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

@media (prefers-reduced-motion: reduce) {
    #play-content.note-denied .play-note-fab { animation: none; }
}

/* "How notes work" overlay — same frosted lightbox backdrop as the other
   modals, with a centred panel. Opened from the note info button. */
.note-info-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-info-modal[hidden] {
    display: none;
}

.note-info-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg-color) 70%, transparent);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.note-info-modal.active .note-info-backdrop {
    opacity: 1;
}

.note-info-panel {
    position: relative;
    width: min(440px, calc(100vw - 2rem));
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 20px;
    padding: 1.75rem;
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.3s ease;
}

.note-info-modal.active .note-info-panel {
    transform: translateY(0);
    opacity: 1;
}

.note-info-panel h2 {
    margin: 0 0 0.85rem;
    font-family: var(--font-heading);
    font-size: calc((1.7rem) * var(--font-scale));
    font-weight: 400;
}

.note-info-panel p {
    margin: 0;
    font-size: calc((1.05rem) * var(--font-scale));
    line-height: 1.45;
}

.note-info-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .note-info-panel,
    .note-info-backdrop {
        transition: none;
    }
}