/* ==========================================================================
   Drawing Wall — Class Tool
   A big shared art canvas for the classroom board. Themed scene backgrounds,
   kid-friendly brushes, emoji stamps, symmetry mode and multi-touch so several
   children can draw at the same time.

   Uses the shared tools design-system variables (--t-*) and supports
   RTL + html[data-theme="dark"].
   ========================================================================== */

.dw {
    --dw-bar-bg: var(--t-white, #ffffff);
    --dw-bar-border: var(--t-gray-200, #e9ecef);
    --dw-chip-bg: var(--t-gray-100, #f1f3f4);
    --dw-ink: var(--t-text-primary, #2d3748);
    --dw-muted: var(--t-text-muted, #718096);

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* No 70vh floor here: the wall takes exactly the height the tool shell
       gives it, so there is never a strip of empty page beneath the scene. */
    min-height: 0;
    flex: 1 1 auto;
    font-family: inherit;
    overflow: hidden;
}

/* ==========================================================================
   1. TOOLBAR
   ========================================================================== */

.dw__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    background: var(--dw-bar-bg);
    border-bottom: 1px solid var(--dw-bar-border);
    box-shadow: var(--t-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.06));
    position: relative;
    z-index: 30;
    flex-shrink: 0;
}

.dw__group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem;
    background: var(--dw-chip-bg);
    border-radius: var(--t-radius-full, 9999px);
}

.dw__group--plain {
    background: transparent;
    padding: 0;
}

.dw__sep {
    flex: 1 1 auto;
}

/* -------- Generic round tool button -------- */
.dw__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 36px;
    height: 36px;
    padding: 0 0.55rem;
    border: none;
    border-radius: var(--t-radius-full, 9999px);
    background: transparent;
    color: var(--dw-ink);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-transition-fast, 0.15s ease),
                transform var(--t-transition-fast, 0.15s ease),
                box-shadow var(--t-transition-fast, 0.15s ease);
}

.dw__btn i {
    font-size: 1rem;
}

.dw__btn:hover:not(:disabled) {
    background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.12);
}

.dw__btn:active:not(:disabled) {
    transform: translateY(1px);
}

.dw__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 21, 174, 191), 0.3);
}

.dw__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dw__btn.is-active {
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: var(--t-white, #fff);
    box-shadow: 0 3px 10px rgba(var(--t-primary-rgb, 21, 174, 191), 0.35);
}

.dw__btn--solid {
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: var(--t-white, #fff);
    box-shadow: 0 3px 10px rgba(var(--t-primary-rgb, 21, 174, 191), 0.3);
}

.dw__btn--solid:hover:not(:disabled) {
    background: var(--t-gradient-dark, linear-gradient(135deg, #0e9bb2 0%, #15aebf 100%));
    transform: translateY(-1px);
}

.dw__btn--danger:hover:not(:disabled) {
    background: rgba(225, 112, 85, 0.15);
    color: var(--t-danger, #e17055);
}

.dw__btn-label {
    white-space: nowrap;
}

/* -------- Brush buttons carry a small emoji glyph -------- */
.dw__brush-glyph {
    font-size: 1.05rem;
    line-height: 1;
}

/* -------- Colour swatches -------- */
.dw__swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--t-white, #fff);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    transition: transform var(--t-transition-fast, 0.15s ease),
                box-shadow var(--t-transition-fast, 0.15s ease);
}

.dw__swatch:hover {
    transform: scale(1.12);
}

.dw__swatch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 21, 174, 191), 0.35);
}

.dw__swatch.is-active {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px var(--t-white, #fff), 0 0 0 4px var(--t-primary, #15aebf);
}

.dw__swatch--rainbow {
    background: conic-gradient(#ff4d4d, #ffd93d, #6bd968, #4ecdc4, #6c5ce7, #ff6bcb, #ff4d4d);
}

.dw__color-input {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--t-white, #fff);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.dw__color-input::-webkit-color-swatch-wrapper { padding: 0; }
.dw__color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.dw__color-input::-moz-color-swatch { border: none; border-radius: 50%; }

/* -------- Size picker -------- */
.dw__size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--t-transition-fast, 0.15s ease);
}

.dw__size:hover { background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.12); }

.dw__size:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 21, 174, 191), 0.3);
}

.dw__size-dot {
    display: block;
    border-radius: 50%;
    background: var(--dw-ink);
    transition: transform var(--t-transition-fast, 0.15s ease);
}

.dw__size.is-active { background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.18); }
.dw__size.is-active .dw__size-dot { background: var(--t-primary, #15aebf); transform: scale(1.1); }

/* ==========================================================================
   2. STAGE (the wall itself)
   ========================================================================== */

.dw__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--t-gray-100, #f1f3f4);
    /* The wall itself is not a drawing surface any more — drawing happens on
       the pad — so the normal cursor is right here. */
    cursor: default;
}

.dw__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.dw__canvas--bg { z-index: 1; }
.dw__canvas--art { z-index: 3; }

/* ==========================================================================
   2.1 LIVING SCENERY
   Emoji creatures and particles drifting over the painted scene. Pure CSS
   animation on absolutely-positioned elements — the canvas underneath stays
   still, so drawing never fights with the movement.
   ========================================================================== */

.dw__deco-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

/* Two layers per decoration: the outer one travels across the wall, the inner
   one does its own character motion (pulsing, swaying, bobbing). Everything on
   the wall therefore moves — a twinkle alone reads as a frozen sticker. */
.dw__deco {
    position: absolute;
    line-height: 1;
    will-change: transform;
    user-select: none;
}

.dw__deco-inner {
    display: block;
    line-height: 1;
    will-change: transform, opacity;
}

/* Plants pivot on their base, not their middle */
.dw__deco-inner--sway { transform-origin: 50% 100%; }

/* Bubbles are drawn rather than emoji so they read as water, not as circles */
.dw__deco--bubble {
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.06) 60%);
}

/* Party confetti: small tumbling rectangles */
.dw__deco--confetti { border-radius: 1px; }

/* Swims in from off-screen and keeps going past the far edge.

   Nearly every creature emoji — 🐟 🐦 🕊️ 🦅 🦜 🦄 — is drawn facing LEFT.
   So travelling left needs no flip, and travelling right needs scaleX(-1),
   otherwise the birds and fish drift along tail-first. The "-plain" variants
   are for glyphs that already point right (🚀). */
@keyframes dw-swim-right {
    from { transform: translateX(-12vw) scaleX(-1); }
    to   { transform: translateX(118vw) scaleX(-1); }
}

@keyframes dw-swim-right-plain {
    from { transform: translateX(-12vw); }
    to   { transform: translateX(118vw); }
}

@keyframes dw-swim-left {
    from { transform: translateX(12vw); }
    to   { transform: translateX(-118vw); }
}

@keyframes dw-swim-left-flip {
    from { transform: translateX(12vw) scaleX(-1); }
    to   { transform: translateX(-118vw) scaleX(-1); }
}

/* Bubbles and balloons rising off the top */
@keyframes dw-rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    12%  { opacity: 0.85; }
    85%  { opacity: 0.7; }
    100% { transform: translateY(-115vh) translateX(24px); opacity: 0; }
}

/* Snow, leaves and confetti drifting down */
@keyframes dw-fall {
    0%   { transform: translateY(-12vh) translateX(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.9; }
    100% { transform: translateY(115vh) translateX(60px) rotate(320deg); opacity: 0; }
}

/* Shooting stars: one straight diagonal run at a fixed angle, no tumbling.
   Same vector for every comet, so they all read as the same meteor shower. */
@keyframes dw-streak {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(-72vw, 120vh); opacity: 0; }
}

/* Plants rooted in place, rocking gently */
@keyframes dw-sway {
    0%, 100% { transform: rotate(-7deg); }
    50%      { transform: rotate(7deg); }
}

/* Stars */
@keyframes dw-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* Fireflies in the jungle */
@keyframes dw-glow {
    0%, 100% { opacity: 0.3; filter: drop-shadow(0 0 2px rgba(255, 240, 120, 0.6)); }
    50%      { opacity: 1;   filter: drop-shadow(0 0 12px rgba(255, 240, 120, 0.95)); }
}

/* Clouds ambling sideways */
@keyframes dw-drift {
    from { transform: translateX(-25vw); }
    to   { transform: translateX(125vw); }
}

/* Bobbing in place — jellyfish, balloons tied down */
@keyframes dw-bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-18px) rotate(3deg); }
}

/* A long, lazy wander for things that belong in one part of the scene —
   stars, fireflies, jellyfish. They stay put in spirit but never look frozen. */
@keyframes dw-wander {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(7vw, -4vh); }
    50%  { transform: translate(2vw, 5vh); }
    75%  { transform: translate(-6vw, 2vh); }
    100% { transform: translate(0, 0); }
}

/* Rooted plants can't wander off, so they get a gentle side-to-side shuffle */
@keyframes dw-shuffle {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(5.5vw); }
}

/* Ghost preview that follows the cursor when placing a stamp.
   Parked off-canvas so it never flashes in the corner before the first move. */
.dw__ghost {
    position: absolute;
    z-index: 5;
    left: -9999px;
    top: -9999px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0.65;
    line-height: 1;
    display: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.dw__stage.is-stamping { cursor: cell; }
.dw__stage.is-stamping .dw__ghost { display: block; }

/* ==========================================================================
   2.2 LIVE DRAWINGS FROM PHONES
   ========================================================================== */

.dw__live {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

/* Three nested layers so a drawing can travel, bob and land all at once:
     .dw__drawing        — drifts across the wall like the scenery
     .dw__drawing-inner  — gentle bob and tilt
     img                 — the one-shot arrival pop                       */
.dw__drawing {
    position: absolute;
    left: 0;
    will-change: transform;
    /* Catchable: tap one to stop it, drag to place it, double-tap to let go */
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    /* The picture must not be draggable in the browser's own sense — that
       gesture cancels the pointer capture the drag below relies on */
    user-select: none;
    -webkit-user-select: none;
}

.dw__drawing img {
    -webkit-user-drag: none;
    user-drag: none;
}

.dw__drawing.is-held {
    cursor: grabbing;
    z-index: 6;
}

.dw__drawing.is-held .dw__drawing-inner {
    animation-play-state: paused;
    transform: scale(1.06);
}

.dw__drawing.is-held img {
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.42));
}

.dw__drawing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    animation: dw-bob 6s ease-in-out infinite;
}

.dw__drawing img {
    display: block;
    width: 100%;
    height: auto;
    /* Drawings arrive as transparent PNGs; the shadow is what lifts them off
       the scene, so never paint a background behind them. */
    background: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
    animation: dw-arrive 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* The slow procession across the wall */
@keyframes dw-drawing-drift {
    from { transform: translateX(-24vw); }
    to   { transform: translateX(124vw); }
}

.dw__drawing-name {
    padding: 0.1rem 0.55rem;
    border-radius: var(--t-radius-full, 9999px);
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Drops in with a bounce so the class notices a new drawing landing */
@keyframes dw-arrive {
    0%   { opacity: 0; transform: scale(0.3) rotate(-16deg); }
    70%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(var(--dw-rot, 0deg)); }
}

/* ==========================================================================
   2.25 THE DRAW PAD
   Nobody draws on the wall itself. Drawing happens here, on a small pad the
   teacher can drag wherever it suits the lesson; pressing Done sends the
   drawing off to join the scene.
   ========================================================================== */

.dw__pad {
    position: absolute;
    z-index: 26;
    top: 1rem;
    inset-inline-start: 1rem;
    width: 340px;
    border-radius: var(--t-radius-2xl, 1rem);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--dw-bar-border);
    box-shadow: var(--t-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.18));
    display: none;
    overflow: hidden;
    user-select: none;
}

.dw__pad.is-open { display: block; }
.dw__pad.is-dragging { transition: none; cursor: grabbing; }

/* -------- Drag handle -------- */

.dw__pad-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: #ffffff;
    cursor: grab;
    touch-action: none;
}

.dw__pad-head:active { cursor: grabbing; }

.dw__pad-title {
    margin: 0;
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 800;
}

.dw__pad-head .dw__btn {
    color: #ffffff;
    min-width: 28px;
    height: 28px;
}

.dw__pad-head .dw__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); }

/* -------- Pad canvas -------- */

.dw__pad-surface {
    position: relative;
    height: 230px;
    margin: 0.5rem;
    border-radius: var(--t-radius-lg, 0.5rem);
    /* A checker so the child can see the background is see-through */
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #eef2f6 25%, transparent 25%, transparent 75%, #eef2f6 75%),
        linear-gradient(45deg, #eef2f6 25%, transparent 25%, transparent 75%, #eef2f6 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: 2px dashed var(--t-gray-300, #dee2e6);
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
}

.dw__pad-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.dw__pad-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--t-gray-500, #adb5bd);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.dw__pad-hint.is-hidden { opacity: 0; }

.dw__pad-mirror-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dashed rgba(var(--t-primary-rgb, 21, 174, 191), 0.5);
    pointer-events: none;
    display: none;
}

.dw__pad.is-mirrored .dw__pad-mirror-line { display: block; }

/* -------- Pad tools -------- */

.dw__pad-tools {
    padding: 0 0.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dw__pad-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.dw__pad-row .dw__swatch { width: 22px; height: 22px; }
.dw__pad-row .dw__color-input { width: 22px; height: 22px; }
.dw__pad-row .dw__btn { min-width: 30px; height: 30px; padding: 0 0.3rem; }
.dw__pad-row .dw__size { width: 26px; height: 26px; }

/* -------- Stickers -------- */

/* Twelve of them wrap onto two tidy lines inside the pad */
.dw__pad-row--stamps {
    gap: 0.25rem;
    padding-top: 0.15rem;
    border-top: 1px solid var(--dw-bar-border);
}

.dw__stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--t-radius-md, 0.375rem);
    background: var(--dw-chip-bg);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--t-transition-fast, 0.15s ease),
                background var(--t-transition-fast, 0.15s ease);
}

.dw__stamp:hover { transform: scale(1.12); }

.dw__stamp:focus-visible {
    outline: none;
    border-color: var(--t-primary, #15aebf);
}

.dw__stamp.is-active {
    border-color: var(--t-primary, #15aebf);
    background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.18);
    transform: scale(1.12);
}

/* -------- Add an image, or hand the drawing over to a phone -------- */

.dw__pad-extra {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}

.dw__pad-image {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 0 0 92px;
    padding: 0.4rem 0.3rem;
    border: 2px dashed var(--t-gray-300, #dee2e6);
    border-radius: var(--t-radius-lg, 0.5rem);
    background: var(--dw-chip-bg);
    color: var(--t-text-secondary, #4a5568);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background var(--t-transition-fast, 0.15s ease),
                border-color var(--t-transition-fast, 0.15s ease);
}

.dw__pad-image i { font-size: 1.1rem; }

.dw__pad-image:hover {
    background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.12);
    border-color: var(--t-primary, #15aebf);
    color: var(--t-primary-dark, #0e9bb2);
}

.dw__pad-qr {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--dw-bar-border);
    border-radius: var(--t-radius-lg, 0.5rem);
    background: var(--dw-chip-bg);
    color: var(--t-text-secondary, #4a5568);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    cursor: pointer;
    transition: background var(--t-transition-fast, 0.15s ease);
}

.dw__pad-qr:hover { background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.12); }

.dw__pad-qr img {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 4px;
    background: #ffffff;
}

.dw__pad-qr i {
    font-size: 1.6rem;
    flex: 0 0 auto;
    color: var(--t-primary, #15aebf);
}

.dw__pad-qr-text { flex: 1; }

.dw__pad-done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 42px;
    border: none;
    border-radius: var(--t-radius-full, 9999px);
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: #ffffff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--t-primary-rgb, 21, 174, 191), 0.35);
    transition: transform var(--t-transition-fast, 0.15s ease);
}

.dw__pad-done:active { transform: translateY(1px); }
.dw__pad-done:disabled { opacity: 0.5; cursor: not-allowed; }

/* On a phone-sized screen the pad fills the width rather than floating */
@media (max-width: 560px) {
    .dw__pad {
        inset-inline: 0.5rem;
        width: auto;
        top: 0.5rem;
    }
}

/* ==========================================================================
   2.26 FLOATING WALL CONTROLS
   The wall is the star, so the controls sit on top of it as light pills
   rather than taking a strip of the screen.
   ========================================================================== */

.dw__pills {
    position: absolute;
    z-index: 22;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dw__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 38px;
    padding: 0 0.75rem;
    border: none;
    border-radius: var(--t-radius-full, 9999px);
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-transition-fast, 0.15s ease),
                transform var(--t-transition-fast, 0.15s ease);
}

.dw__pill i { font-size: 1rem; }

.dw__pill:hover { background: rgba(17, 24, 39, 0.75); transform: translateY(-1px); }
.dw__pill:active { transform: translateY(1px); }

.dw__pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.dw__pill.is-active {
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
}

/* -------- "Add a Drawing" -------- */

.dw__add {
    position: absolute;
    z-index: 22;
    /* Clears the first-use hint pill, which sits at bottom: 1rem — the button
       used to land on top of it and cut the sentence in half */
    bottom: 4.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 54px;
    padding: 0 1.75rem;
    border: none;
    border-radius: var(--t-radius-full, 9999px);
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: #ffffff;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(var(--t-primary-rgb, 21, 174, 191), 0.45);
    transition: transform var(--t-transition-fast, 0.15s ease),
                box-shadow var(--t-transition-fast, 0.15s ease);
}

.dw__add i { font-size: 1.15rem; }

.dw__add:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 12px 32px rgba(var(--t-primary-rgb, 21, 174, 191), 0.55);
}

.dw__add:active { transform: translateX(-50%) translateY(1px); }

/* ==========================================================================
   2.3 QR — a modal for the class, a small reminder for the rest of the lesson
   ========================================================================== */

.dw__qr-scrim {
    position: absolute;
    inset: 0;
    z-index: 29;
    background: rgba(15, 23, 42, 0.6);
    display: none;
}

.dw__qr-scrim.is-open { display: block; }

.dw__qr-modal {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 2rem));
    max-height: calc(100% - 1.5rem);
    overflow-y: auto;
    padding: 1.5rem 1.5rem 1.25rem;
    border-radius: var(--t-radius-2xl, 1rem);
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
    display: none;
}

.dw__qr-modal.is-open { display: block; }

.dw__qr-title {
    margin: 0 0 0.35rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--t-text-primary, #2d3748);
}

.dw__qr-sub {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--t-text-muted, #718096);
}

.dw__qr-modal-img {
    display: block;
    width: min(260px, 70%);
    height: auto;
    margin: 0 auto;
    background: #ffffff;
}

.dw__qr-code {
    margin: 0.75rem 0 0;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1.1;
    color: var(--t-primary-dark, #0e9bb2);
}

.dw__qr-url {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--t-text-muted, #718096);
    word-break: break-all;
}

.dw__qr-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.15rem;
}

.dw__qr-btn {
    min-height: 42px;
    padding: 0 1.35rem;
    border: none;
    border-radius: var(--t-radius-full, 9999px);
    background: var(--t-gray-100, #f1f3f4);
    color: var(--t-text-secondary, #4a5568);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-transition-fast, 0.15s ease);
}

.dw__qr-btn:hover { background: var(--t-gray-200, #e9ecef); }

.dw__qr-btn--primary {
    background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.14);
    color: var(--t-primary-dark, #0e9bb2);
}

.dw__qr-btn--primary:hover { background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.24); }

/* -------- Corner reminder -------- */

.dw__qr-corner {
    position: absolute;
    z-index: 21;
    bottom: 0.75rem;
    inset-inline-end: 0.75rem;
    width: 118px;
    padding: 0.4rem;
    border: none;
    border-radius: var(--t-radius-xl, 0.75rem);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--t-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.18));
    cursor: zoom-in;
    display: none;
    font-family: inherit;
}

.dw__qr-corner.is-open { display: block; }

.dw__qr-corner img {
    display: block;
    width: 100%;
    height: auto;
}

.dw__qr-corner-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--t-text-primary, #2d3748);
}

.dw__qr-corner-count {
    position: absolute;
    top: -0.4rem;
    inset-inline-start: -0.4rem;
    min-width: 24px;
    padding: 0.1rem 0.35rem;
    border-radius: var(--t-radius-full, 9999px);
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* -------- Symmetry guide line -------- */
.dw__mirror-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    z-index: 4;
    border-left: 2px dashed rgba(var(--t-primary-rgb, 21, 174, 191), 0.55);
    pointer-events: none;
    display: none;
}

.dw.is-mirrored .dw__mirror-line { display: block; }

/* -------- First-use hint -------- */
.dw__hint {
    position: absolute;
    z-index: 6;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--t-radius-full, 9999px);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--dw-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--t-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.dw__hint.is-hidden { opacity: 0; }

/* -------- Toast (saved / cleared confirmations) -------- */
.dw__toast {
    position: absolute;
    z-index: 40;
    top: 1rem;
    left: 50%;
    transform: translate(-50%, -1rem);
    padding: 0.5rem 1.1rem;
    border-radius: var(--t-radius-full, 9999px);
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: var(--t-white, #fff);
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: var(--t-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.dw__toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ==========================================================================
   3. POPOVER PANELS (themes / stamps)
   ========================================================================== */

.dw__panel {
    position: absolute;
    z-index: 35;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    width: min(360px, calc(100% - 1rem));
    max-height: calc(100% - 1rem);
    overflow-y: auto;
    padding: 0.85rem;
    border-radius: var(--t-radius-2xl, 1rem);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--dw-bar-border);
    box-shadow: var(--t-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
    display: none;
}

.dw__panel.is-open { display: block; }

.dw__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.dw__panel-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--dw-ink);
}

.dw__panel-close {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
}

/* -------- Theme grid -------- */
.dw__themes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem;
}

.dw__theme {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
    height: 68px;
    padding: 0.35rem;
    border: 2px solid transparent;
    border-radius: var(--t-radius-lg, 0.5rem);
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: transform var(--t-transition-fast, 0.15s ease),
                box-shadow var(--t-transition-fast, 0.15s ease);
}

/* Scrim so the white label stays readable on the pale scenes (Sky, Winter, Blank) */
.dw__theme::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.dw__theme > * {
    position: relative;
    z-index: 1;
}

.dw__theme:hover { transform: translateY(-2px); box-shadow: var(--t-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08)); }

.dw__theme:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 21, 174, 191), 0.4);
}

.dw__theme.is-active {
    border-color: var(--t-primary, #15aebf);
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 21, 174, 191), 0.25);
}

.dw__theme-emoji { font-size: 1.35rem; text-shadow: none; }

/* Upload tile reads as a form control rather than a scene */
.dw__theme--upload {
    background: var(--dw-chip-bg);
    color: var(--dw-muted);
    border: 2px dashed var(--t-gray-300, #dee2e6);
    text-shadow: none;
    justify-content: center;
}

.dw__theme--upload::after { display: none; }

/* -------- Stamp grid -------- */
.dw__stamp-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}

.dw__stamp-tab {
    padding: 0.25rem 0.6rem;
    border: none;
    border-radius: var(--t-radius-full, 9999px);
    background: var(--dw-chip-bg);
    color: var(--dw-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-transition-fast, 0.15s ease), color var(--t-transition-fast, 0.15s ease);
}

.dw__stamp-tab:hover { background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.14); }

.dw__stamp-tab.is-active {
    background: var(--t-gradient, linear-gradient(135deg, #15aebf 0%, #4ecdc4 100%));
    color: var(--t-white, #fff);
}

.dw__stamps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 0.25rem;
}

.dw__stamp {
    height: 44px;
    border: 2px solid transparent;
    border-radius: var(--t-radius-lg, 0.5rem);
    background: var(--dw-chip-bg);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--t-transition-fast, 0.15s ease), background var(--t-transition-fast, 0.15s ease);
}

.dw__stamp:hover { transform: scale(1.08); background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.14); }

.dw__stamp:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--t-primary-rgb, 21, 174, 191), 0.35);
}

.dw__stamp.is-active {
    border-color: var(--t-primary, #15aebf);
    background: rgba(var(--t-primary-rgb, 21, 174, 191), 0.18);
}

.dw__panel-note {
    margin: 0.55rem 0 0;
    font-size: 0.6875rem;
    color: var(--dw-muted);
    line-height: 1.5;
}

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */

/* Drop the button words before the bar is forced onto a second row — on a
   classroom projector a single strip of tools reads much better. The full bar
   needs ~1550px with words and ~1220px without, so 1600px is the switch. */
@media (max-width: 1600px) {
    .dw__btn-label { display: none; }
    .dw__btn { padding: 0 0.4rem; min-width: 34px; }

    /* The room code is the one label worth keeping: the class reads it aloud */
    .dw__btn[data-action="invite"] .dw__btn-label { display: inline; }
}

@media (max-width: 640px) {
    .dw__bar {
        gap: 0.35rem;
        padding: 0.35rem 0.4rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .dw__group { flex-shrink: 0; }
    .dw__sep { display: none; }
    .dw__swatch, .dw__color-input { width: 26px; height: 26px; }
    .dw__hint { font-size: 0.75rem; padding: 0.4rem 0.75rem; }
    /* The hint wraps to two lines on a narrow screen, so the button needs
       more room above it */
    .dw__add { bottom: 5.25rem; }
    .dw__panel { inset-inline: 0.5rem; width: auto; }
}

/* ==========================================================================
   5. DARK THEME
   ========================================================================== */

html[data-theme="dark"] .dw {
    --dw-bar-bg: #1f2937;
    --dw-bar-border: #374151;
    --dw-chip-bg: #111827;
    --dw-ink: #e5e7eb;
    --dw-muted: #9ca3af;
}

html[data-theme="dark"] .dw__panel {
    background: rgba(31, 41, 55, 0.97);
}

html[data-theme="dark"] .dw__hint {
    background: rgba(31, 41, 55, 0.92);
    color: #e5e7eb;
}

html[data-theme="dark"] .dw__theme--upload {
    border-color: #4b5563;
}

/* ==========================================================================
   6. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dw__btn,
    .dw__swatch,
    .dw__theme,
    .dw__stamp,
    .dw__toast,
    .dw__hint {
        transition: none;
    }

    /* Scenery still shows, it just stops moving */
    .dw__deco,
    .dw__drawing {
        animation: none !important;
    }

    .dw__drawing {
        transform: translate(-50%, -50%);
    }

    .dw__btn:hover,
    .dw__theme:hover,
    .dw__stamp:hover,
    .dw__swatch:hover {
        transform: none;
    }
}