<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pardo's Choice — A Locarno Film Festival Game</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --locarno-yellow: #FFD700;
            --locarno-black: #1a1a1a;
            --locarno-dark: #0d0d0d;
            --accent: #ff6b35;
            --text-light: #f5f5f5;
            --text-muted: #888;
        }
        
        body {
            font-family: 'Space Grotesk', sans-serif;
            background: var(--locarno-dark);
            color: var(--text-light);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* Leopard spot pattern */
        .leopard-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.03;
            background-image: radial-gradient(ellipse 30px 40px at 20% 30%, var(--locarno-yellow) 30%, transparent 50%),
                              radial-gradient(ellipse 25px 35px at 60% 20%, var(--locarno-yellow) 30%, transparent 50%),
                              radial-gradient(ellipse 35px 25px at 80% 60%, var(--locarno-yellow) 30%, transparent 50%),
                              radial-gradient(ellipse 28px 38px at 40% 70%, var(--locarno-yellow) 30%, transparent 50%),
                              radial-gradient(ellipse 32px 28px at 10% 80%, var(--locarno-yellow) 30%, transparent 50%),
                              radial-gradient(ellipse 22px 32px at 90% 40%, var(--locarno-yellow) 30%, transparent 50%);
            z-index: 0;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 2rem;
            position: relative;
            z-index: 1;
        }
        
        header {
            text-align: center;
            margin-bottom: 2rem;
            padding: 2rem 0;
        }
        
        .pardo-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
        }
        
        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--locarno-yellow), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
        }
        
        .subtitle {
            color: var(--text-muted);
            font-size: 1.1rem;
            font-weight: 300;
        }
        
        /* Stats Bar */
        .stats-bar {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            border: 1px solid rgba(255, 215, 0, 0.1);
        }
        
        .stat {
            text-align: center;
        }
        
        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--locarno-yellow);
        }
        
        .stat-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        /* Progress indicators */
        .progress-container {
            margin-bottom: 2rem;
        }
        
        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        
        .progress-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--locarno-yellow), var(--accent));
            transition: width 0.5s ease;
            border-radius: 3px;
        }
        
        .films-remaining {
            text-align: right;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 0.5rem;
        }
        
        .films-remaining.warning {
            color: var(--accent);
        }
        
        .films-remaining.critical {
            color: #ff6b6b;
        }
        
        /* Game screens */
        .screen {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .screen.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Film cards */
        .film-card {
            background: linear-gradient(145deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.9));
            border: 1px solid rgba(255, 215, 0, 0.15);
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }
        
        .film-card:hover {
            border-color: rgba(255, 215, 0, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        
        .film-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }
        
        .film-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .film-meta {
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        
        .film-badge {
            background: var(--locarno-yellow);
            color: var(--locarno-black);
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .film-description {
            color: var(--text-light);
            line-height: 1.7;
            margin-bottom: 1.5rem;
            font-size: 0.95rem;
        }
        
        .film-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }
        
        .tag {
            background: rgba(255, 215, 0, 0.1);
            color: var(--locarno-yellow);
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
        }
        
        .film-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            margin-bottom: 1.5rem;
        }
        
        .film-stat {
            text-align: center;
        }
        
        .film-stat-value {
            font-weight: 600;
            color: var(--locarno-yellow);
        }
        
        .film-stat-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }
        
        .film-stats-hidden {
            background: rgba(255, 107, 53, 0.1);
            border: 1px dashed rgba(255, 107, 53, 0.3);
        }
        
        .film-stats-hidden .film-stat-value {
            color: var(--text-muted);
            font-size: 1.5rem;
        }
        
        /* Buttons */
        .btn-group {
            display: flex;
            gap: 1rem;
        }
        
        .btn {
            flex: 1;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-accept {
            background: linear-gradient(135deg, var(--locarno-yellow), #e6c200);
            color: var(--locarno-black);
        }
        
        .btn-accept:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
        }
        
        .btn-reject {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-light);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .btn-reject:hover {
            background: rgba(255, 107, 53, 0.2);
            border-color: var(--accent);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--locarno-yellow), #e6c200);
            color: var(--locarno-black);
            width: 100%;
            padding: 1.25rem;
            font-size: 1.1rem;
        }
        
        .btn-primary:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 30px rgba(255, 215, 0, 0.3);
        }
        
        /* Mode selection */
        .mode-selection {
            margin-top: 2rem;
        }
        
        .mode-selection h3 {
            text-align: center;
            font-size: 1rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
        }
        
        .mode-buttons {
            display: flex;
            gap: 1rem;
        }
        
        .btn-mode {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.03);
            border: 2px solid rgba(255, 215, 0, 0.2);
            border-radius: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-mode:hover {
            background: rgba(255, 215, 0, 0.1);
            border-color: var(--locarno-yellow);
            transform: translateY(-2px);
        }
        
        .btn-mode-pro {
            border-color: rgba(255, 107, 53, 0.3);
        }
        
        .btn-mode-pro:hover {
            background: rgba(255, 107, 53, 0.1);
            border-color: var(--accent);
        }
        
        .mode-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--locarno-yellow);
            margin-bottom: 0.5rem;
        }
        
        .btn-mode-pro .mode-title {
            color: var(--accent);
        }
        
        .mode-desc {
            font-size: 0.85rem;
            color: var(--text-muted);
            text-align: center;
            line-height: 1.4;
        }
        
        .mode-indicator {
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
            padding: 0.5rem;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.03);
        }
        
        .mode-indicator.professional {
            background: rgba(255, 107, 53, 0.1);
            color: var(--accent);
        }
        
        /* Intro screen */
        .intro-text {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--text-light);
            margin-bottom: 2rem;
        }
        
        .intro-text p {
            margin-bottom: 1rem;
        }
        
        .intro-highlight {
            background: rgba(255, 215, 0, 0.1);
            padding: 1.5rem;
            border-radius: 12px;
            border-left: 3px solid var(--locarno-yellow);
            margin: 1.5rem 0;
        }
        
        /* Results screen */
        .result-card {
            background: linear-gradient(145deg, rgba(40, 40, 40, 0.9), rgba(25, 25, 25, 0.9));
            border: 2px solid var(--locarno-yellow);
            border-radius: 24px;
            padding: 2.5rem 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .result-header {
            margin-bottom: 2rem;
        }
        
        .result-grade {
            font-size: 5rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--locarno-yellow), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }
        
        .result-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .result-summary {
            color: var(--text-light);
            line-height: 1.7;
            text-align: left;
        }
        
        .detailed-feedback {
            margin-bottom: 2rem;
        }
        
        .detailed-feedback h3 {
            font-size: 1rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .feedback-section {
            background: rgba(255, 255, 255, 0.03);
            padding: 1.25rem 1.5rem;
            border-radius: 12px;
            margin-bottom: 0.75rem;
            border-left: 3px solid var(--locarno-yellow);
            color: var(--text-light);
            line-height: 1.7;
        }
        
        .feedback-section strong {
            color: var(--locarno-yellow);
            display: block;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        
        .feedback-warning {
            border-left-color: #ff4444;
            background: rgba(255, 68, 68, 0.05);
        }
        
        .feedback-warning strong {
            color: #ff6b6b;
        }
        
        .feedback-caution {
            border-left-color: var(--accent);
            background: rgba(255, 107, 53, 0.05);
        }
        
        .feedback-caution strong {
            color: var(--accent);
        }
        
        .final-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }
        
        .final-stat {
            background: rgba(0, 0, 0, 0.3);
            padding: 1.25rem;
            border-radius: 12px;
        }
        
        .final-stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--locarno-yellow);
        }
        
        .final-stat-label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        
        /* Selected films list */
        .selected-films {
            margin-top: 2rem;
        }
        
        .selected-films h3 {
            font-size: 1rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        .selected-film-item {
            display: flex;
            justify-content: space-between;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }
        
        .selected-film-item span:first-child {
            font-weight: 500;
        }
        
        .selected-film-item span:last-child {
            color: var(--text-muted);
        }
        
        /* Piazza Grande visualization */
        .piazza-visual {
            margin: 2rem 0;
            padding: 2rem;
            background: linear-gradient(180deg, #1a1a3a 0%, #0d0d1a 100%);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 60%;
            background-image: 
                radial-gradient(1px 1px at 10% 20%, white, transparent),
                radial-gradient(1px 1px at 30% 40%, white, transparent),
                radial-gradient(1.5px 1.5px at 50% 15%, white, transparent),
                radial-gradient(1px 1px at 70% 35%, white, transparent),
                radial-gradient(1px 1px at 85% 25%, white, transparent),
                radial-gradient(1px 1px at 20% 50%, white, transparent),
                radial-gradient(1.5px 1.5px at 60% 45%, white, transparent);
        }
        
        .screen-projection {
            width: 80%;
            height: 120px;
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, #2a2a4a, #1a1a3a);
            border: 3px solid var(--locarno-yellow);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: var(--locarno-yellow);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            position: relative;
        }
        
        .audience {
            display: flex;
            justify-content: center;
            gap: 4px;
            flex-wrap: wrap;
            max-width: 300px;
            margin: 0 auto;
        }
        
        .audience-member {
            width: 12px;
            height: 16px;
            background: var(--locarno-yellow);
            border-radius: 50% 50% 0 0;
            opacity: 0.6;
            transition: opacity 0.3s;
        }
        
        .audience-member.filled {
            opacity: 1;
        }
        
        /* Notifications */
        .notification {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--locarno-black);
            border: 1px solid var(--locarno-yellow);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            animation: slideIn 0.3s ease, slideOut 0.3s ease 2.7s;
            z-index: 100;
        }
        
        .notification-extended {
            animation: slideIn 0.3s ease, slideOut 0.3s ease 3.7s;
            max-width: 400px;
            line-height: 1.5;
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }

/* Mobile responsive */
        @media (max-width: 600px) {
            .stats-bar {
                grid-template-columns: repeat(2, 1fr);
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .film-stats {
                grid-template-columns: 1fr;
            }
            
            .btn-group {
                flex-direction: column;
            }
            
            .final-stats {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .feedback-section {
                padding: 1rem;
            }
            
            .mode-buttons {
                flex-direction: column;
            }
            
            .notification-extended {
                left: 1rem;
                right: 1rem;
                max-width: none;
            }
        }
    </style>
</head>
<body>
    <div class="leopard-bg"></div>
    
    <div class="container">
        <header>
            <div class="pardo-icon">🐆</div>
            <h1>Pardo's Choice</h1>
            <p class="subtitle">A Locarno Film Festival Programming Game</p>
        </header>
        
        
        <div id="intro-screen" class="screen active">
            <div class="intro-text">
                <p>Welcome to <strong>Piazza Grande</strong>, the legendary open-air cinema at the heart of the Locarno Film Festival. For one week each August, 8,000 people gather under the stars to discover cinema that challenges, provokes, and transforms.</p>
                
                <div class="intro-highlight">
                    <strong>Your Mission:</strong> You've been appointed as this year's guest programmer. Curate 5 films for Piazza Grande from a selection of submissions. Balance artistic vision, audience appeal, and the business realities of running a major festival.
                </div>
                
                <p>Each choice affects three scores: <strong>Critics</strong> (reviews, awards buzz, and artistic credibility), <strong>Audience</strong> (attendance, word-of-mouth, and popular appeal), and <strong>Industry</strong> (distributors, sales agents, sponsors, and market interest). The Pardo d'Oro awaits the programmer who can satisfy all three.</p>
            </div>
            
            <div class="mode-selection">
                <h3>Select Difficulty</h3>
                <div class="mode-buttons">
                    <button class="btn btn-mode" onclick="startGame('learning')">
                        <span class="mode-title">🎓 Learning Mode</span>
                        <span class="mode-desc">See point values before selecting each film. Recommended for first-time players.</span>
                    </button>
                    <button class="btn btn-mode btn-mode-pro" onclick="startGame('professional')">
                        <span class="mode-title">🎬 Professional Mode</span>
                        <span class="mode-desc">Point values hidden until after selection. Trust your curatorial instincts.</span>
                    </button>
                </div>
            </div>
        </div>
        
        
        <div id="game-screen" class="screen">
            <div class="stats-bar">
                <div class="stat">
                    <div class="stat-value" id="critics">45</div>
                    <div class="stat-label">Critics</div>
                </div>
                <div class="stat">
                    <div class="stat-value" id="audience">45</div>
                    <div class="stat-label">Audience</div>
                </div>
                <div class="stat">
                    <div class="stat-value" id="industry">45</div>
                    <div class="stat-label">Industry</div>
                </div>
                <div class="stat">
                    <div class="stat-value" id="slots">5</div>
                    <div class="stat-label">Slots Left</div>
                </div>
            </div>
            
            <div class="mode-indicator" id="mode-indicator"></div>
            
            <div class="progress-container">
                <div class="progress-label">
                    <span>Programming Progress</span>
                    <span id="progress-text">0 / 5 films selected</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
                </div>
                <div class="films-remaining" id="films-remaining">20 films remaining to review</div>
            </div>
            
            <div id="film-container"></div>
        </div>
        
        
        <div id="results-screen" class="screen">
            <div class="result-card">
                <div class="result-header">
                    <div class="result-grade" id="final-grade">A</div>
                    <h2 class="result-title" id="result-title">Festival Title</h2>
                </div>
                
                <div class="final-stats">
                    <div class="final-stat">
                        <div class="final-stat-value" id="final-critics">0</div>
                        <div class="final-stat-label">Critical Acclaim</div>
                    </div>
                    <div class="final-stat">
                        <div class="final-stat-value" id="final-audience">0</div>
                        <div class="final-stat-label">Audience Love</div>
                    </div>
                    <div class="final-stat">
                        <div class="final-stat-value" id="final-industry">0</div>
                        <div class="final-stat-label">Industry Interest</div>
                    </div>
                    <div class="final-stat">
                        <div class="final-stat-value" id="final-total">0</div>
                        <div class="final-stat-label">Overall Score</div>
                    </div>
                </div>
            </div>
            
            <div class="detailed-feedback">
                <h3>Festival Debrief</h3>
                <div id="result-summary"></div>
            </div>
            
            <div class="piazza-visual">
                <div class="stars"></div>
                <div class="screen-projection">Piazza Grande</div>
                <div class="audience" id="audience-visual"></div>
            </div>
            
            <div class="selected-films">
                <h3>Your Piazza Grande Selection</h3>
                <div id="selected-films-list"></div>
            </div>
            
            <button class="btn btn-primary" onclick="restartGame()" style="margin-top: 2rem;">Program Another Festival</button>
        </div>
    </div>

// Game state
        let gameState = {
            critics: 50,
            audience: 50,
            discovery: 50,
            slotsRemaining: 5,
            selectedFilms: [],
            availableFilms: [],
            currentFilmIndex: 0
        };

function shuffleArray(array) {
            const newArray = [...array];
            for (let i = newArray.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
            }
            return newArray;
        }

function rejectFilm() {
            const film = gameState.availableFilms[gameState.currentFilmIndex];
            showNotification(`Passed on "${film.title}"`);
            
            gameState.currentFilmIndex++;
            showCurrentFilm();
        }

function showNotification(message, extended = false) {
            const notification = document.createElement('div');
            notification.className = 'notification' + (extended ? ' notification-extended' : '');
            notification.textContent = message;
            document.body.appendChild(notification);
            
            const duration = extended ? 4000 : 3000;
            setTimeout(() => {
                notification.remove();
            }, duration);
        }

function restartGame() {
            document.getElementById('results-screen').classList.remove('active');
            document.getElementById('intro-screen').classList.add('active');
        }
    </script>
</body>
</html>

79TH EDITION · AGOSTO 2026

Locarno

Festival of Light & Shadow

An interactive narrative across 10 days of the world's most adventurous film festival. Choose your role. Shape your festival.

Choose Your Path

Who are you at Locarno?

Six characters, six different festivals. Your choices shape encounters and outcomes unique to your role.

PARDO'S CHOICE · PROGRAMMER PATH

🏆