/* Kiosk Mode Styles - Tablet Optimized */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary-blue: #0066FF;
    --primary-blue-dark: #0047AB;
    --secondary-pink: #FF1493;
    --accent-yellow: #FFD700;
    --comic-red: #FF3131;
    --text-black: #000000;
    --on-primary: #FFFFFF;
    --on-secondary: #FFFFFF;
    --on-tertiary: #000000;
    --font-display: 'Bangers', 'Bebas Neue', Impact, sans-serif;
    --font-heading: 'Bebas Neue', 'Oswald', Impact, sans-serif;
    --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

body {
    font-family: var(--font-body);
    background: var(--accent-yellow);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Screen Management */
.screen {
    display: none;
    width: 100vw;
    height: 100vh;
    overflow: auto;
}

.screen.active {
    display: flex;
    flex-direction: column;
}

/* Loading Overlay */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.overlay.active {
    display: flex;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.overlay p {
    font-size: 20px;
    font-weight: 500;
}

/* Upload Status Bar */
.upload-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 12px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.upload-status-bar:not(.hidden) {
    transform: translateY(0);
}

.upload-status-bar.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.upload-status-bar.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.status-content {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
}

.status-icon {
    font-size: 24px;
}

.queue-counter {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

/* ===== ATTRACT SCREEN ===== */
#attract-screen {
    position: relative;
    overflow: hidden;
}

#aquarium-preview {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Overlay to darken aquarium background */
#attract-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        rgba(0, 0, 0, 0.3);
    background-size: 12px 12px, 100% 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-in;
}

#attract-screen.ready::before {
    opacity: 1;
}

.start-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
    width: 400px;
    height: 400px;
    border-radius: 12px;
    border: 6px solid var(--text-black);
    background: var(--accent-yellow);
    color: var(--secondary-pink);
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 10px 10px 0px var(--text-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    animation: pulse-button 2s ease-in-out infinite;
    z-index: 3;
    pointer-events: auto;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

/* Dashed border inside start button */
.start-button::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 4px dashed var(--text-black);
    border-radius: 6px;
    pointer-events: none;
}

.start-button.visible {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-2deg) scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.start-button:hover,
.start-button:active {
    transform: translate(-50%, -50%) rotate(-2deg) translate(-3px, -3px);
    box-shadow: 13px 13px 0px var(--text-black);
}

.start-icon {
    display: none;
}

.start-text {
    font-size: 76px;
    text-shadow: none;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 90%;
    line-height: 1.1;
}

@keyframes pulse-button {
    0%, 100% {
        box-shadow: 10px 10px 0px var(--text-black);
        transform: translate(-50%, -50%) rotate(-2deg) scale(1);
    }
    50% {
        box-shadow: 18px 18px 0px var(--text-black);
        transform: translate(-50%, -50%) rotate(-2deg) scale(1.1);
    }
}

@keyframes bounce-icon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ===== TEMPLATE SELECTION SCREEN ===== */
#template-screen {
    padding: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Halftone dot pattern overlay */
#template-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 1;
}

/* Dashed border frame */
#template-screen::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 8px dashed var(--text-black);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* Ensure content appears above overlays */
#template-screen > * {
    position: relative;
    z-index: 2;
}

.header {
    text-align: center;
    color: var(--text-black);
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.title-container {
    background: var(--secondary-pink);
    padding: 0.8rem 2rem;
    border: 4px solid var(--text-black);
    box-shadow: 6px 6px 0px var(--text-black);
    display: inline-block;
    transform: rotate(-1deg);
}

.subtitle-container {
    background: var(--primary-blue);
    color: var(--on-primary);
    padding: 0.5rem 1.5rem;
    border: 4px solid var(--text-black);
    box-shadow: 4px 4px 0px var(--text-black);
    display: inline-block;
    transform: rotate(1.5deg);
}

.header h1 {
    font-family: var(--font-display);
    font-size: 64px;
    margin: 0;
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
    letter-spacing: 2px;
    color: white;
}

.header p {
    font-family: var(--font-heading);
    font-size: 32px;
    letter-spacing: 1px;
    margin: 0;
    color: white;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 900px;
    width: 100%;
}

.template-card {
    background: white;
    border: 6px solid var(--text-black);
    border-radius: 12px;
    padding: 40px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 8px 8px 0px var(--text-black);
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.template-card:nth-child(1) {
    border-color: var(--primary-blue);
}

.template-card:nth-child(2) {
    border-color: #FFD700; /* ImagineX yellow, whatever the venue's brand: three cards, three colours */
}

.template-card:nth-child(3) {
    border-color: var(--comic-red);
}

.template-card:hover,
.template-card:active {
    transform: translate(-3px, -3px) rotate(-2deg);
    box-shadow: 11px 11px 0px var(--text-black);
}

.template-icon {
    font-size: 100px;
    margin-bottom: 20px;
}

.template-name {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-black);
}

/* Template number badges */
.template-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--accent-yellow);
    color: var(--on-tertiary);
    border: 3px solid var(--text-black);
    border-radius: 50%;
    box-shadow: 3px 3px 0px var(--text-black);
    z-index: 10;
}

/* ===== DRAWING SCREEN ===== */
#drawing-screen {
    background: white;
}

.drawing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: var(--accent-yellow);
    color: var(--on-tertiary);
    border-bottom: 6px solid var(--text-black);
    box-shadow: 0 8px 0px var(--text-black);
    position: relative;
    z-index: 100;
}

.drawing-header h2 {
    font-size: 48px;
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    letter-spacing: 2px;
}

.icon-btn {
    background: white;
    border: 4px solid var(--text-black);
    color: var(--text-black);
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    transition: all 0.2s;
    min-width: 120px;
    box-shadow: 4px 4px 0px var(--text-black);
    position: relative;
    z-index: 2;
}

.icon-btn:hover,
.icon-btn:active {
    background: var(--primary-blue);
    color: var(--on-primary);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--text-black);
}

.drawing-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Transparent background */
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 400px;
    min-width: 400px;
}

#drawing-canvas {
    background: white;
    cursor: crosshair;
    touch-action: none;
    /* sized and placed by CanvasController.fitDisplay so the drawing area
       below fills the wrapper; the margins and corner markers hang outside */
    position: absolute;
    max-width: none;
    max-height: none;
    /* Clip to the crop rectangle the upload uses: 10/15/12/10% inside the corner markers */
    clip-path: inset(17.1% 11.44% 14.28% 11.44%); /* top, right, bottom, left */
}

/* Remove border mask - no longer needed with clip-path */
.border-mask {
    display: none;
}

/* Controls Panel */
.controls-panel {
    width: 350px;
    background: white;
    border-left: 2px solid #e0e0e0;
    padding: 15px 30px 30px;
    overflow-y: hidden; /* Prevent scrolling */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Reduced gap */
    height: 100%; /* Force full height */
}

.control-section {
    flex-shrink: 0; /* Prevent sections from shrinking */
}

.control-section h3 {
    font-size: 20px;
    margin: 0 0 10px 0;
    color: var(--text-black);
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 1px;
}

/* Color Grid */
.color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.color-btn {
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 50px;
    min-height: 50px;
}

.color-btn:hover {
    transform: scale(1.1);
}

/* Big Send Button */
.send-btn.big-send-btn {
    height: 70px;
    font-size: 28px;
}

/* Color Palette */
.color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 5px;
}

.color-btn {
    width: 100%;
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 60px;
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.active {
    border: 6px solid var(--secondary-pink);
    box-shadow: none;
}

.custom-color-picker {
    background: linear-gradient(135deg, 
        #FF0000 0%, 
        #FF7F00 16.67%, 
        #FFFF00 33.33%, 
        #00FF00 50%, 
        #0000FF 66.67%, 
        #4B0082 83.33%, 
        #9400D3 100%);
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 12px;
    min-height: 63px;
}

.custom-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    opacity: 0;
}

.custom-color-picker::-webkit-color-swatch {
    border: none;
    opacity: 0;
}

/* Pen Thickness */
.pen-thickness-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 5px;
}

.pen-btn {
    flex: 1;
    background: white;
    border: 3px solid var(--text-black);
    border-radius: 12px;
    padding: 15px 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 75px;
    box-shadow: 3px 3px 0px var(--text-black);
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.pen-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px var(--text-black);
}

.pen-btn.active {
    background: var(--secondary-pink);
    border-color: var(--text-black);
    color: var(--on-secondary);
}

.pen-preview {
    background: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.pen-btn span {
    font-size: 14px;
    font-weight: 500;
}

/* Fill Pattern Buttons */
.pattern-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 5px;
}

.pattern-btn {
    flex: 1;
    background: white;
    border: 3px solid var(--text-black);
    border-radius: 12px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 3px 3px 0px var(--text-black);
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}

.pattern-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px var(--text-black);
}

.pattern-btn.active {
    background: var(--primary-blue);
    border-color: var(--text-black);
    color: var(--on-primary);
}

.pattern-preview {
    width: 25px;
    height: 25px;
    border-radius: 4px;
    margin: 3px auto;
}

.pattern-spots {
    background: radial-gradient(circle at 25% 25%, currentColor 20%, transparent 20%),
                radial-gradient(circle at 75% 75%, currentColor 20%, transparent 20%),
                radial-gradient(circle at 75% 25%, currentColor 15%, transparent 15%),
                radial-gradient(circle at 25% 75%, currentColor 15%, transparent 15%);
}

.pattern-stripes {
    background: repeating-linear-gradient(
        45deg,
        currentColor,
        currentColor 3px,
        transparent 3px,
        transparent 8px
    );
}

.pattern-btn span {
    font-size: 14px;
    font-weight: 500;
}

/* Action Buttons */
.action-btn {
    width: 100%;
    padding: 12px;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    border: 4px solid var(--text-black);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--accent-yellow);
    color: var(--on-tertiary);
    box-shadow: 4px 4px 0px var(--text-black);
}

.action-btn:hover,
.action-btn:active {
    background: var(--accent-yellow);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--text-black);
}

/* Input Fields */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.input-group label {
    font-size: 16px;
    font-weight: 500;
    color: #555;
}

.input-group input {
    padding: 14px;
    font-size: 18px;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: #667eea;
}

/* Send Button */
.send-btn {
    width: 100%;
    padding: clamp(10px, 2vh, 16px);
    font-size: clamp(18px, 3vh, 24px);
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 2px;
    border: 4px solid var(--text-black);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--secondary-pink);
    color: var(--on-secondary);
    box-shadow: 6px 6px 0px var(--text-black);
    margin-top: auto;
    flex-shrink: 0;
    min-height: 30px;
}

.send-btn:hover,
.send-btn:active {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px var(--text-black);
}

/* ===== SUCCESS SCREEN ===== */
#success-screen {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    position: relative;
}

/* Halftone dot pattern overlay */
#success-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 1;
}

/* Dashed border frame */
#success-screen::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 8px dashed var(--text-black);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

.success-content {
    max-width: 800px;
    padding: 40px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.success-preview {
    width: 350px;
    height: 350px;
    object-fit: contain;
    background: white;
    border: 6px solid var(--text-black);
    border-radius: 12px;
    box-shadow: 10px 10px 0 var(--text-black);
    padding: 20px;
}

.success-icon {
    font-size: 120px;
    margin-bottom: 30px;
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.success-content h1 {
    font-family: var(--font-display);
    font-size: clamp(48px, 8vh, 72px);
    color: var(--on-secondary);
    margin: 0;
    padding: 20px 60px;
    background: var(--secondary-pink);
    border: 6px solid var(--text-black);
    box-shadow: 8px 8px 0 var(--text-black);
    transform: rotate(-1deg);
    letter-spacing: 3px;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.success-content p {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vh, 36px);
    color: var(--text-black);
    margin: 0;
    padding: 15px 40px;
    background: white;
    border: 4px solid var(--text-black);
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--text-black);
    letter-spacing: 2px;
}

/* ===== EMAIL ENTRY SCREEN ===== */
#email-screen {
    padding: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Halftone dot pattern overlay */
#email-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 1;
}

/* Dashed border frame */
#email-screen::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 8px dashed var(--text-black);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

#email-input {
    flex: 1;
    padding: clamp(14px, 2.5vh, 22px) 30px;
    font-size: clamp(24px, 4vh, 40px);
    border: 4px solid var(--primary-blue);
    border-radius: 12px;
    text-align: center;
    background: white;
    color: var(--text-black);
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 4px;
    box-shadow: 6px 6px 0 var(--text-black);
}

#email-backspace-btn {
    width: clamp(65px, 9vw, 100px);
    font-size: clamp(22px, 4vh, 40px);
    padding: clamp(14px, 2.5vh, 22px);
    background: white !important;
    color: var(--text-black) !important;
    border: 4px solid var(--text-black);
    border-radius: 12px;
    box-shadow: 6px 6px 0 var(--text-black);
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#email-backspace-btn:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0 var(--text-black);
}

#email-backspace-btn:active {
    transform: translateY(0);
    box-shadow: 2px 2px 0 var(--text-black);
}

.countdown-container {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 10;
}

.countdown-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: white;
    border: 6px solid var(--text-black);
    box-shadow: 6px 6px 0 var(--text-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--text-black);
    animation: pop-disappear 1s ease-in-out forwards;
}

@keyframes pop-disappear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    20% {
        transform: scale(1.2);
        opacity: 1;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
    80% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.button-group {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

.or-text {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vh, 36px);
    color: var(--text-black);
    font-weight: bold;
    letter-spacing: 2px;
}

.success-btn {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.5vh, 40px);
    padding: 18px 50px;
    border: 6px solid var(--text-black);
    border-radius: 12px;
    box-shadow: 8px 8px 0 var(--text-black);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    color: white;
    white-space: nowrap;
}

.email-btn {
    background: var(--secondary-pink);
    color: white !important;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.create-another-btn {
    background: var(--primary-blue);
}

.success-btn:hover {
    transform: translateY(-3px);
    box-shadow: 11px 11px 0 var(--text-black);
}

.success-btn:active {
    transform: translateY(0);
    box-shadow: 4px 4px 0 var(--text-black);
}

/* Tablet-specific adjustments */
@media (max-width: 1024px) {
    .controls-panel {
        width: 300px;
        padding: 20px;
    }
    
    .drawing-header h2 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    /* Stack layout for smaller tablets/portrait */
    .drawing-container {
        flex-direction: column;
    }
    
    .canvas-wrapper {
        height: 60vh;
    }
    
    .controls-panel {
        width: 100%;
        height: 40vh;
        border-left: none;
        border-top: 2px solid #e0e0e0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        padding: 20px;
    }
    
    .control-section {
        flex: 1 1 200px;
    }
}

/* Landscape phone - prevent use */
@media (max-width: 480px) {
    body::before {
        content: "📱 Please use a tablet or larger screen";
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #667eea;
        color: white;
        font-size: 24px;
        text-align: center;
        padding: 40px;
        z-index: 99999;
    }
}
/* ===== NAME ENTRY SCREEN ===== */
#name-screen, #statement-screen {
    padding: 40px;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Halftone dot pattern overlay */
#name-screen::before, #statement-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 1;
}

/* Dashed border frame */
#name-screen::after, #statement-screen::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 8px dashed var(--text-black);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

.name-entry-container {
    background: transparent;
    padding: clamp(20px, 4vh, 50px);
    width: 95%;
    max-width: 1200px;
    max-height: 98vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.name-title-container {
    background: var(--secondary-pink);
    padding: 20px 40px;
    margin: 0 auto clamp(20px, 3vh, 40px);
    border: 6px solid var(--text-black);
    box-shadow: 8px 8px 0 var(--text-black);
    transform: rotate(-1deg);
    max-width: 90%;
    flex-shrink: 0;
}

.name-title-container h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 7vh, 56px);
    color: white;
    text-align: center;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.name-display {
    display: flex;
    gap: 15px;
    margin-bottom: clamp(15px, 2.5vh, 30px);
    flex-shrink: 0;
}

#name-input {
    flex: 1;
    padding: clamp(14px, 2.5vh, 22px) 30px;
    font-size: clamp(24px, 4vh, 40px);
    border: 4px solid var(--primary-blue);
    border-radius: 12px;
    text-align: center;
    background: white;
    color: var(--text-black);
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 4px;
    box-shadow: 6px 6px 0 var(--text-black);
}

#backspace-btn {
    width: clamp(65px, 9vw, 100px);
    font-size: clamp(22px, 4vh, 40px);
    padding: clamp(14px, 2.5vh, 22px);
    background: white !important;
    color: var(--text-black) !important;
    border: 4px solid var(--text-black);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--text-black);
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#backspace-btn:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 0 var(--text-black);
}

#backspace-btn:active {
    transform: translateY(0);
    box-shadow: 2px 2px 0 var(--text-black);
}

.keyboard {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 20px); /* Better spacing */
    margin-bottom: clamp(15px, 2.5vh, 30px);
    flex: 1; /* Take available space */
    justify-content: center;
}

.keyboard-row {
    display: flex;
    gap: clamp(6px, 1.2vw, 14px);
    justify-content: center;
}

.keyboard-btn {
    width: clamp(60px, 8.5vw, 100px);
    height: clamp(60px, 9vh, 100px);
    font-size: clamp(22px, 4vh, 38px);
    font-family: var(--font-heading);
    font-weight: 400;
    border: 4px solid var(--text-black);
    border-radius: 10px;
    background: white;
    color: var(--text-black);
    cursor: pointer;
    transition: transform 0.06s, box-shadow 0.06s, background 0.06s;
    box-shadow: 4px 4px 0 var(--text-black);
    touch-action: none;
}

@media (hover: hover) {
    .keyboard-btn:hover {
        transform: translateY(-2px);
        box-shadow: 6px 6px 0 var(--text-black);
    }
}

/* pressed: set by the app the instant a finger lands (see keysOnPointerDown) */
.keyboard-btn:active,
.keyboard-btn.is-pressed {
    background: var(--secondary-pink) !important;
    color: var(--on-secondary) !important;
    transform: translateY(2px);
    box-shadow: 1px 1px 0 var(--text-black) !important;
    transition: none;
}

.keyboard-btn.special-btn {
    background: var(--comic-red);
    color: white;
}

.space-btn {
    width: clamp(250px, 50vw, 600px) !important;
    font-size: clamp(18px, 3vh, 24px) !important;
    background: var(--primary-blue) !important;
    color: white !important;
    border: 6px solid var(--text-black) !important;
    box-shadow: 6px 6px 0 var(--text-black) !important;
    font-family: var(--font-heading);
    letter-spacing: 2px;
}

.space-btn:hover {
    box-shadow: 8px 8px 0 var(--text-black) !important;
}

.space-btn:active {
    background: var(--primary-blue) !important;
    color: white !important;
}

.enter-btn {
    width: 100%;
    margin-top: clamp(22px, 4.5vh, 48px); /* clear of the space bar: a thumb aiming at SPACE must not land here */
    padding: clamp(12px, 2.5vh, 24px);
    font-size: clamp(24px, 4vh, 36px);
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 2px;
    border: 6px solid var(--text-black);
    border-radius: 12px;
    background: var(--secondary-pink);
    color: var(--on-secondary);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 8px 8px 0 var(--text-black);
    flex-shrink: 0;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.enter-btn:hover {
    transform: translateY(-3px);
    box-shadow: 11px 11px 0 var(--text-black);
}

.enter-btn:active {
    transform: translateY(0);
    box-shadow: 4px 4px 0 var(--text-black);
}
/* ===== CUSTOM MODAL ===== */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.custom-modal.active {
    display: flex;
}

.modal-content {
    background: var(--accent-yellow);
    border-radius: 12px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    border: 6px solid var(--text-black);
    box-shadow: 10px 10px 0 var(--text-black);
    animation: modalSlideIn 0.3s ease;
    position: relative;
}

/* Dashed border inside modal */
.modal-content::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 4px dashed var(--text-black);
    border-radius: 6px;
    pointer-events: none;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-icon {
    font-size: 64px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.modal-content p {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--secondary-pink);
    margin-bottom: 30px;
    line-height: 1.4;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.modal-btn {
    padding: 18px 40px;
    font-size: 24px;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    border: 4px solid var(--text-black);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
    box-shadow: 4px 4px 0 var(--text-black);
}

.modal-btn-primary {
    background: var(--primary-blue);
    color: var(--on-primary);
}

.modal-btn-secondary {
    background: white;
    color: var(--text-black);
}

.modal-btn:hover,
.modal-btn:active {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--text-black);
}

/* ===== Short-screen fit (e.g. 1280x800 tablets) =====
   Keeps the success / name / email content inside the dashed frame —
   previously the bottom buttons crossed the border on 800px-tall screens. */
@media (max-height: 900px) {
    /* Success screen */
    .success-content { gap: 14px; padding: 12px; }
    .success-content h1 { font-size: clamp(34px, 6vh, 48px); padding: 10px 44px; box-shadow: 6px 6px 0 var(--text-black); }
    .success-content p { font-size: clamp(18px, 3vh, 26px); padding: 10px 26px; }
    .success-preview { width: min(250px, 31vh); height: min(250px, 31vh); padding: 12px; box-shadow: 6px 6px 0 var(--text-black); }
    .success-icon { font-size: 70px; margin-bottom: 10px; }
    .success-btn { font-size: clamp(18px, 3vh, 26px); padding: 12px 34px; box-shadow: 6px 6px 0 var(--text-black); }

    /* Name & email screens */
    .name-entry-container { padding: 10px 24px; max-height: calc(100vh - 72px); }
    .name-title-container { padding: 10px 30px; margin-bottom: 12px; }
    .name-title-container h1 { font-size: clamp(30px, 5vh, 42px); }
    .name-display { margin-bottom: 12px; }
    .keyboard { gap: 8px; margin-bottom: 12px; }
    .keyboard-btn { height: clamp(48px, 7.5vh, 64px); font-size: clamp(18px, 3vh, 28px); }
    .enter-btn { padding: 10px; font-size: clamp(20px, 3vh, 28px); box-shadow: 6px 6px 0 var(--text-black); }
}


/* ==========================================================================
   Cloud tablet: attract art, pairing, connectivity pill, staff diagnostics
   ========================================================================== */
:root {
    --ix-yellow: var(--accent-yellow);
    --ix-red: #FF3131;
    --ix-black: #000000;
    --ix-cream: #FFFEF2;
    --ix-blue-dark: var(--primary-blue-dark);
    --ix-green: #1B7A4A;
}

.attract-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 12vh;
    background: var(--ix-yellow);
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2px);
    background-size: 12px 12px;
}
.attract-venue {
    margin-top: 18px;
    font-family: var(--font-heading);
    font-size: clamp(22px, 4vw, 40px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ix-black);
    background: #FFFFFF;
    border: 4px solid var(--ix-black);
    box-shadow: 6px 6px 0 var(--ix-black);
    padding: 8px 22px;
    transform: rotate(-1.5deg);
}
.attract-venue:empty { display: none; }

#pairing-screen {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--ix-yellow);
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 2px, transparent 2px);
    background-size: 12px 12px;
}
#pairing-screen.active { display: flex; }
.pairing-card {
    background: var(--ix-cream);
    border: 6px solid var(--ix-black);
    box-shadow: 12px 12px 0 var(--ix-black);
    border-radius: 12px;
    padding: 36px 44px;
    text-align: center;
    width: min(92vw, 760px);
}
.pairing-logo { height: 56px; width: auto; max-width: 70%; object-fit: contain; margin-bottom: 14px; }
.pairing-eyebrow { font-family: var(--font-heading); font-size: 26px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 8px; }
.pairing-code {
    font-family: var(--font-display);
    font-size: clamp(72px, 14vw, 150px);
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--primary-blue);
    text-shadow: 5px 5px 0 var(--ix-black);
    margin: 8px 0 16px;
    white-space: nowrap;
}
.pairing-help { font-family: var(--font-body); font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.pairing-status { font-family: var(--font-body); font-weight: 800; font-size: 18px; color: var(--ix-blue-dark); min-height: 1.4em; margin: 0; }
.pairing-error { font-family: var(--font-body); font-weight: 800; font-size: 15px; color: var(--ix-red); min-height: 1.4em; margin: 6px 0 0; }

/* One stack, so two faults show as two chips rather than one on top of the
   other, and the connectivity badge keeps the corner it has always had
   whether or not the battery chip is above it. */
.pill-stack {
    position: fixed;
    /* Inside the 8px dashed frame, which is inset 20px, so it never sits on it. */
    bottom: 38px;
    left: 38px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 13px;
    padding: 6px 12px;
    border: 3px solid var(--ix-black);
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 3px 3px 0 var(--ix-black);
    transition: opacity 0.3s ease;
}
.pill[hidden] { display: none; }
.pill-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ix-black); background: var(--ix-green); }
.pill-online { opacity: 0.55; }
.pill-online .pill-dot { background: var(--ix-green); }
.pill-queued .pill-dot { background: var(--ix-yellow); }
.pill-nointernet { background: var(--ix-red); color: #FFFFFF; }
.pill-nointernet .pill-dot { background: #FFFFFF; }
.pill-offline { background: var(--ix-black); color: #FFFFFF; }
/* Red, not grey: offline is the state worth noticing. */
.pill-offline .pill-dot { background: var(--comic-red, #FF3131); }
#pairing-screen.active ~ .pill-stack .pill { opacity: 1; }
/* Low battery follows the family: the white chip with a coloured dot is a
   notice, a filled chip is severe. Not yellow -- the attract screen it will
   usually be seen against is yellow, and the chip disappeared into it. */
.pill-battery { background: #FFFFFF; }
.pill-battery .pill-dot { background: var(--ix-red); }
.pill-battery.pill-battery-critical { background: var(--ix-red); color: #FFFFFF; }
.pill-battery.pill-battery-critical .pill-dot { background: #FFFFFF; }

/* `align-items:center` clipped the card off the TOP of the screen once the
   content grew past the viewport, and centred overflow cannot be scrolled
   back to. `margin:auto` on the child centres it when it fits and scrolls
   honestly when it does not. */
#diagnostics-screen { display: none; overflow: auto; background: var(--ix-cream); }
#diagnostics-screen.active { display: flex; }
.diag-card {
    margin: auto; width: min(96vw, 1180px);
    background: #FFFFFF; border: 5px solid var(--ix-black);
    box-shadow: 10px 10px 0 var(--ix-black); border-radius: 12px;
    padding: 22px 30px;
}
.diag-title { font-family: var(--font-heading); font-size: 36px; letter-spacing: 2px; margin: 0 0 12px; }
/* Two label/value pairs per row: eleven stacked rows made the card taller
   than the tablet, and there is plenty of width going spare. */
.diag-list {
    display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 6px 20px; margin: 0 0 16px; font-family: var(--font-body); font-size: 15px;
}
.diag-list dt { font-weight: 800; color: #333; }
.diag-list dd { margin: 0; font-weight: 600; word-break: break-all; }
/* Two by two: five full-width buttons plus the readout overflowed the card,
   cropping the title and the last button. */
.diag-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diag-actions .action-btn { width: 100%; }
/* Restore factory settings sits in the grid like everything else — the red
   is what marks it as destructive, and a full-width bar only made it the
   most inviting thing on the screen. */
.diag-danger { background: var(--ix-red) !important; color: #FFFFFF !important; }
/* Exit: blue where every other button is yellow, and always the bottom-right
   cell. It is last in the grid and pinned to the right-hand column, so it
   stays there whichever native-only buttons above it are hidden. */
.diag-actions .diag-exit {
    grid-column: 2;
    background: var(--primary-blue) !important;
    color: var(--on-primary) !important;
}

/* The engineer menu: the diagnostics card again, one world picker and the
   readings a venue has no use for. */
#engineer-screen { display: none; overflow: auto; background: var(--ix-cream); }
#engineer-screen.active { display: flex; }
.eng-tools { margin: 0 0 16px; }
.eng-row { display: flex; gap: 12px; align-items: stretch; margin-top: 8px; }
.eng-row .action-btn { width: auto; white-space: nowrap; }
.eng-select {
    flex: 1; min-width: 0; padding: 10px 14px;
    font-family: var(--font-body); font-weight: 800; font-size: 18px;
    border: 4px solid var(--ix-black); border-radius: 12px; background: #FFFFFF;
    box-shadow: 4px 4px 0 var(--ix-black);
}
.eng-note { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin: 10px 0 0; min-height: 1.3em; }

/* Error report: the diagnostics card again, with a note typed on a
   lower-case keyboard (Nunito, because Bebas has no lower case) and a voice
   note beside it. Sized to sit inside a 1280x800 tablet without scrolling. */
#report-screen { display: none; overflow: auto; background: var(--ix-cream); }
#report-screen.active { display: flex; }
.report-card {
    margin: auto; width: min(96vw, 1180px);
    background: #FFFFFF; border: 5px solid var(--ix-black);
    box-shadow: 10px 10px 0 var(--ix-black); border-radius: 12px;
    padding: 18px 30px 22px;
}
.report-lead { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: #333; margin: 0 0 12px; }
.report-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.report-chip {
    font-family: var(--font-body); font-weight: 800; font-size: 15px;
    padding: 8px 14px; border: 3px solid var(--ix-black); border-radius: 999px;
    background: #FFFFFF; color: var(--ix-black); box-shadow: 3px 3px 0 var(--ix-black);
    cursor: pointer;
}
.report-chip.selected { background: var(--primary-blue); color: var(--on-primary); }
.report-field { display: flex; gap: 10px; align-items: stretch; margin: 0 0 10px; }
.report-text {
    flex: 1; min-height: 52px; padding: 8px 16px;
    display: flex; align-items: center;
    font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 1.3;
    border: 4px solid var(--primary-blue); border-radius: 12px; background: #FFFFFF;
    box-shadow: 4px 4px 0 var(--ix-black); white-space: pre-wrap; word-break: break-word;
}
.report-text:empty::before { content: attr(data-placeholder); color: #999; }
.report-backspace { width: 84px; height: auto; font-size: 26px; border-radius: 12px; }
.report-keyboard { gap: 6px; margin: 0 0 12px; flex: none; }
.report-keyboard .keyboard-row { gap: 6px; }
.report-key {
    width: clamp(48px, 6.8vw, 84px); height: clamp(40px, 6.2vh, 54px);
    font-family: var(--font-body); font-weight: 800; font-size: clamp(16px, 2.6vh, 22px);
}
.report-key-wide { width: clamp(80px, 10vw, 130px); background: var(--accent-yellow); }
.report-key-space { width: clamp(220px, 34vw, 460px); }
/* Centred under the keyboard, with "or" beside it: type, or say it. */
.report-voice { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px; }
.report-or { font-size: 26px; }
.report-voice .action-btn { width: auto; font-size: 20px; padding: 10px 18px; }
.report-voice .action-btn.recording { background: var(--ix-red) !important; color: #FFFFFF !important; }
.report-voice-status { font-family: var(--font-body); font-weight: 800; font-size: 15px; color: #333; }
/* An empty status still took a flex gap and nudged the row off-centre. */
.report-voice-status:empty { display: none; }
.report-voice-delete[hidden] { display: none; }
.report-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-actions .action-btn { width: 100%; }
.report-actions .report-send { background: var(--primary-blue) !important; color: var(--on-primary) !important; }

.pin-display { font-family: var(--font-display); font-size: 56px; letter-spacing: 0.3em; text-align: center; margin: 6px 0 14px; color: var(--primary-blue); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; margin-bottom: 14px; }
.pin-keys .keyboard-btn { width: 76px; height: 64px; font-size: 26px; }

/* Boot splash progress bar: the tablet dwells on the ImagineX card for a
   moment at start-up, so switching one on looks deliberate rather than like
   a page still loading. */
.boot-bar {
    width: min(460px, 60vw);
    height: 28px;
    margin: 22px auto 6px;
    background: var(--bg-cream, #FFFEF2);
    border: 4px solid var(--text-black);
    border-radius: 999px;
    box-shadow: 4px 4px 0 var(--text-black);
    overflow: hidden;
}
.boot-bar[hidden] { display: none; }
.boot-bar-fill {
    width: 0;
    height: 100%;
    background: var(--primary-blue);
    border-radius: 999px;
}
/* The fill's width and timing are driven from kiosk-app.js (runBootBar), so
   the surges and stalls differ on every boot. */

/* Staff diagnostics: screen brightness for this stand and this room. */
.diag-brightness { margin: 0 0 18px; }
.diag-brightness[hidden] { display: none; }
.diag-brightness-label {
    display: block; font-family: var(--font-body); font-weight: 800;
    font-size: 15px; color: #333; margin-bottom: 8px;
}
.diag-brightness-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.diag-brightness-buttons .action-btn { flex: 1 1 0; min-width: 82px; }
.diag-brightness-buttons .action-btn.selected {
    background: var(--primary-blue); color: #FFFFFF;
}

/* Identity card: flashed from the admin area so someone on the phone can say
   which tablet is in front of them. */
.identity-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0, 0, 0, 0.72);
    display: flex; align-items: center; justify-content: center;
}
.identity-overlay[hidden] { display: none; }
.identity-card {
    background: #FFFFFF; border: 6px solid var(--text-black); border-radius: 20px;
    box-shadow: 12px 12px 0 var(--text-black);
    padding: 40px 56px; text-align: center; max-width: 86vw;
}
.identity-logo { height: 58px; margin-bottom: 14px; }
.identity-eyebrow {
    font-family: var(--font-heading); font-size: 26px; letter-spacing: 3px;
    text-transform: uppercase; margin: 0 0 6px; color: #333;
}
.identity-name {
    font-family: var(--font-display); font-size: clamp(56px, 11vw, 132px);
    line-height: 1.05; color: var(--primary-blue);
}
.identity-venue {
    font-family: var(--font-body); font-weight: 800; font-size: 24px;
    margin: 10px 0 0; color: var(--text-black);
}
.identity-hint {
    font-family: var(--font-body); font-size: 15px; color: #666; margin: 18px 0 0;
}

/* Staff-triggered app update: progress, bottom-centre, out of the way. */
.update-toast {
    position: fixed; bottom: 38px; left: 50%; transform: translateX(-50%);
    z-index: 10002; max-width: 70vw;
    background: var(--primary-blue); color: #FFFFFF;
    font-family: var(--font-body); font-weight: 800; font-size: 16px;
    padding: 12px 22px; border: 4px solid var(--text-black); border-radius: 999px;
    box-shadow: 4px 4px 0 var(--text-black);
}
.update-toast[hidden] { display: none; }

/* The ImagineX mark on the attract screen: shown only when a venue's own logo
   is in use, centred at the foot and deliberately small. */
.imaginex-mark {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  height: 22px;
  width: auto;
  opacity: 0.45;
  pointer-events: none;
  /* Above the world preview (1) and its darkening overlay (2). */
  z-index: 3;
}
:root:not(.venue-logo) .imaginex-mark { display: none; }

/* The logo on the attract screen: top and centre, ours until the venue has
   one of its own, theirs from then on, about four times the height of our
   mark at the foot. Kept clear of the start button on an 800px-tall tablet
   and of the top-left corner where the staff gesture lives. */
.attract-logo {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  height: 88px;
  width: auto;
  max-width: 60vw;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

/* A venue's own logo sits on a white card: their artwork is in their
   colours, not ours, and on a tinted, dotted background with the dark
   overlay over it a mid-blue wordmark on blue reads as faded. The card is
   the same comic plate as the rest of the tablet, set a little down from
   the top edge. */
.attract-logo.is-custom-logo {
  top: 44px;
  height: 124px;
  max-width: 70vw;
  padding: 14px 26px;
  box-sizing: border-box;
  background: #fff;
  border: 4px solid var(--text-black);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--text-black);
  z-index: 10;
}

/* Statement screen: the question after the name (settings.prompts). Laid
   out like the name screen: title plate, then the question, then the lead
   on its own line, the answer field, the keyboard, the button. */
.statement-question {
    text-align: center;
    font-family: var(--font-heading);
    font-size: clamp(22px, 3.4vh, 36px);
    line-height: 1.25;
    margin: clamp(10px, 2vh, 24px) auto clamp(14px, 2.4vh, 26px);
    max-width: 92%;
    color: var(--text-black);
    flex-shrink: 0;
}
.statement-lead {
    display: block;
    width: fit-content;
    margin: 0 auto clamp(12px, 2vh, 20px);
    padding: 8px 26px;
    font-family: var(--font-heading);
    font-size: clamp(22px, 3.4vh, 34px);
    color: var(--on-primary);
    background: var(--primary-blue);
    border: 4px solid var(--text-black);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--text-black);
    flex-shrink: 0;
}
#statement-input {
    flex: 1;
    min-width: 0;
    padding: clamp(14px, 2.5vh, 22px) 30px;
    font-size: clamp(22px, 3.6vh, 36px);
    border: 4px solid var(--primary-blue);
    border-radius: 12px;
    text-align: center;
    background: white;
    color: var(--text-black);
    font-family: var(--font-heading);
    font-weight: 400;
    box-shadow: 6px 6px 0 var(--text-black);
}
#statement-backspace-btn {
    width: clamp(65px, 9vw, 100px);
    font-size: clamp(22px, 4vh, 40px);
    padding: clamp(14px, 2.5vh, 22px);
    background: white !important;
    color: var(--text-black) !important;
    border: 4px solid var(--text-black);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--text-black);
}
/* the lower-case keyboard at the name keyboard's size */
.statement-keyboard .report-key {
    width: clamp(60px, 8.5vw, 100px);
    height: clamp(60px, 9vh, 100px);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(22px, 4vh, 38px);
}
.statement-keyboard .report-key-wide { width: clamp(110px, 14vw, 180px); font-size: clamp(18px, 3vh, 28px); }
.statement-keyboard .report-key-space { width: clamp(300px, 42vw, 620px); font-size: clamp(18px, 3vh, 28px); }

/* The question screen has two more lines than the name screen (the question
   and the lead), so it is packed a little tighter to keep SEND IT! on screen
   at a tablet's height. */
#name-screen .name-entry-container, #statement-screen .name-entry-container { height: 100%; max-height: none; justify-content: flex-start; }
#statement-screen .name-entry-container { padding: clamp(12px, 2.4vh, 36px) clamp(20px, 4vh, 50px); }
#statement-screen .name-title-container { margin-bottom: clamp(8px, 1.6vh, 22px); padding: clamp(10px, 1.8vh, 20px) 40px; }
#statement-screen .name-title-container h1 { font-size: clamp(32px, 6vh, 52px); }
#statement-screen .statement-question { font-size: clamp(20px, 3vh, 32px); margin: clamp(4px, 1vh, 12px) auto clamp(8px, 1.6vh, 16px); }
#statement-screen .statement-lead { margin-bottom: clamp(8px, 1.4vh, 14px); padding: 6px 22px; font-size: clamp(20px, 3vh, 30px); }
#statement-screen .name-display { margin-bottom: clamp(8px, 1.6vh, 18px); }
#statement-screen #statement-input { padding: clamp(10px, 1.8vh, 18px) 24px; font-size: clamp(20px, 3.2vh, 32px); }
#statement-screen #statement-backspace-btn { padding: clamp(10px, 1.8vh, 18px); }
.statement-keyboard { flex: 1; min-height: 0; gap: clamp(6px, 1.3vh, 16px); margin-bottom: clamp(8px, 1.6vh, 18px); }
.statement-keyboard .keyboard-row { gap: clamp(6px, 1.1vw, 14px); }
.statement-keyboard .report-key { height: clamp(42px, 7.6vh, 92px); }
#statement-screen .enter-btn { margin-top: clamp(10px, 2vh, 26px); padding: clamp(10px, 2vh, 20px); }

/* Entry screens (name, question): the field sits with the same space above
   and below it, the backspace is as tall as the field, the keys start right
   under, and the slack in the height goes between the keys and the button. */
#name-screen .name-title-container, #statement-screen .name-title-container { margin-bottom: clamp(15px, 2.5vh, 30px); }
#name-screen .name-display, #statement-screen .name-display { align-items: stretch; margin-bottom: clamp(15px, 2.5vh, 30px); }
#backspace-btn, #statement-backspace-btn { height: auto; }
#name-screen .keyboard, #statement-screen .keyboard { flex: 1; justify-content: flex-start; }
/* the name screen's button in the third brand colour: it is a step, not the send */
/* (the name screen's button keeps the brand colour; the white space bar below sets it apart) */
/* the question on a plate like the title, so it reads against the dots */
#statement-screen .statement-question {
    background: var(--secondary-pink);
    color: white;
    padding: clamp(8px, 1.4vh, 14px) clamp(18px, 3vw, 34px);
    border: 5px solid var(--text-black);
    box-shadow: 6px 6px 0 var(--text-black);
    transform: rotate(0.6deg);
    font-weight: 700;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    max-width: 88%;
    margin: clamp(2px, 0.6vh, 8px) auto clamp(14px, 2.4vh, 24px);
}

/* The question screen carries two more rows than the name screen, so each
   block is a little shorter, and the keyboard never shrinks under the button. */
#statement-screen .name-entry-container { padding: clamp(10px, 1.8vh, 28px) clamp(20px, 4vh, 50px); }
#statement-screen .name-title-container { padding: clamp(8px, 1.4vh, 16px) 36px; margin-bottom: clamp(8px, 1.4vh, 18px); }
#statement-screen .name-title-container h1 { font-size: clamp(28px, 5vh, 44px); }
#statement-screen .statement-question { font-size: clamp(18px, 2.6vh, 28px); padding: clamp(6px, 1.1vh, 12px) 26px; margin: 0 auto clamp(10px, 1.8vh, 18px); }
#statement-screen .statement-lead { font-size: clamp(18px, 2.6vh, 26px); padding: 4px 18px; margin-bottom: clamp(8px, 1.4vh, 14px); }
#statement-screen .name-display { margin-bottom: clamp(8px, 1.4vh, 16px); }
#statement-screen #statement-input { padding: clamp(8px, 1.5vh, 14px) 20px; font-size: clamp(18px, 2.8vh, 28px); }
.statement-keyboard { flex: 1 1 auto; min-height: max-content; gap: clamp(5px, 1vh, 12px); margin-bottom: clamp(6px, 1.2vh, 14px); }
.statement-keyboard .report-key { height: clamp(46px, 7.4vh, 84px); font-size: clamp(20px, 3.4vh, 34px); }
.statement-keyboard .report-key-wide, .statement-keyboard .report-key-space { font-size: clamp(16px, 2.6vh, 24px); }
#statement-screen .enter-btn { margin-top: clamp(6px, 1.2vh, 16px); padding: clamp(8px, 1.6vh, 16px); font-size: clamp(20px, 3.2vh, 30px); }

/* The space bar white, like the letter keys, so the button below it stands alone */
.space-btn, .space-btn:active { background: white !important; color: var(--text-black) !important; }
/* The email screen laid out like the name screen */
#email-screen .name-entry-container { height: 100%; max-height: none; justify-content: flex-start; }
#email-screen .name-title-container { margin-bottom: clamp(15px, 2.5vh, 30px); }
#email-screen .name-display { align-items: stretch; margin-bottom: clamp(15px, 2.5vh, 30px); }
#email-backspace-btn { height: auto; }
#email-screen .keyboard { flex: 1; justify-content: flex-start; }
/* the venue's domain key: wide, in the third brand colour like a shortcut */
.email-shortcut-btn { width: auto !important; padding: 0 clamp(16px, 2vw, 28px); font-size: clamp(18px, 3vh, 28px) !important; background: var(--accent-yellow) !important; color: var(--on-tertiary) !important; letter-spacing: 0; }

/* The template screen's heading a little higher than centred */
#template-screen .header { margin-top: clamp(-70px, -7vh, -30px); }

/* Back and Skip beside the send button on the question screen */
.statement-actions { display: flex; gap: clamp(10px, 1.5vw, 20px); align-items: stretch; margin-top: clamp(6px, 1.2vh, 16px); flex-shrink: 0; }
.statement-actions .enter-btn { flex: 1; margin-top: 0; }
.statement-side-btn {
    flex: 0 0 auto;
    min-width: clamp(120px, 14vw, 200px);
    padding: clamp(8px, 1.6vh, 16px) clamp(14px, 2vw, 26px);
    font-size: clamp(18px, 2.8vh, 26px);
    font-family: var(--font-display);
    letter-spacing: 2px;
    border: 6px solid var(--text-black);
    border-radius: 12px;
    background: white;
    color: var(--text-black);
    cursor: pointer;
    box-shadow: 8px 8px 0 var(--text-black);
}
.statement-side-btn:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--text-black); }
.statement-side-btn[hidden] { display: none; }

/* Back and Skip: the same size and shape as Send between them */
.statement-actions .enter-btn, .statement-side-btn { flex: 1 1 0; min-width: 0; }
.statement-side-btn {
    padding: clamp(8px, 1.6vh, 16px);
    font-size: clamp(20px, 3.2vh, 30px);
    box-shadow: 8px 8px 0 var(--text-black);
}

/* Back and Skip: as tall as Send, but narrower; Send keeps its words on one line */
.statement-actions .enter-btn { flex: 1 1 auto; white-space: nowrap; }
.statement-side-btn { flex: 0 0 auto; width: clamp(150px, 17vw, 240px); }

/* The facilitator's panel for the summary on the screen */
.summary-panel { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); }
.summary-panel[hidden] { display: none; }
.summary-card { background: var(--accent-yellow); color: var(--on-tertiary); border: 6px solid var(--text-black); box-shadow: 10px 10px 0 var(--text-black); border-radius: 12px; padding: 28px 32px; width: min(92vw, 760px); text-align: center; }
.summary-title { font-family: var(--font-display); font-size: clamp(28px, 4.5vh, 40px); letter-spacing: 2px; margin: 0 0 6px; }
.summary-status { font-family: var(--font-heading); font-size: clamp(18px, 2.8vh, 24px); letter-spacing: 1px; margin: 0 0 18px; }
.summary-row { display: flex; gap: 14px; justify-content: center; margin-top: 12px; }
.summary-row .modal-btn { flex: 1 1 0; min-width: 0; }
.summary-row .modal-btn:disabled { opacity: .4; }
.summary-down { background: var(--comic-red) !important; color: #fff !important; }

/* Demo on a laptop or desktop (kiosk-app.js setupPhysicalKeyboard): the real
   keyboard types, so the on-screen keys and their backspace are not shown. */
.physical-keyboard #name-screen .keyboard,
.physical-keyboard #backspace-btn,
.physical-keyboard #statement-keyboard,
.physical-keyboard #statement-backspace-btn { display: none; }
.physical-keyboard #name-input,
.physical-keyboard #statement-input { cursor: text; caret-color: currentColor; }