[data-game=movie]{--game-accent-h: 325;--game-accent-s: 85%;--game-accent-l: 55%}.movie-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:var(--space-4) var(--space-4) var(--space-6);gap:var(--space-4);max-width:640px;margin:0 auto;width:100%}.movie-intro{width:100%;max-width:480px;padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}.movie-intro h1{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;letter-spacing:-.03em}.movie-intro>p{color:var(--color-text-secondary);max-width:32ch;line-height:1.6}.movie-card{width:100%;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative}.movie-col-left,.movie-col-right{display:contents}#image-mask-container{order:1}.movie-progress{order:2;margin-top:var(--space-1)}.movie-guess-wrapper{order:3}.movie-keyboard{order:4}.movie-clues-section{order:5;margin-top:var(--space-2)}.movie-actions{order:6}.movie-progress{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.movie-progress-header{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.movie-score-badge{background:var(--game-accent-subtle);color:var(--game-accent);padding:3px var(--space-3);border-radius:var(--radius-badge);font-size:var(--text-xs);font-weight:800;font-family:var(--font-mono);transition:background var(--duration-fast) ease,color var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.movie-score-badge.score-zero{background:#ef4444!important;color:#fff!important;box-shadow:0 0 10px #ef444499;animation:score-pulse 1.5s infinite alternate}@keyframes score-pulse{0%{transform:scale(1);box-shadow:0 0 5px #ef444480}to{transform:scale(1.06);box-shadow:0 0 15px #ef4444e6}}.movie-score-progress-container{width:100%;height:6px;background:var(--color-surface-overlay);border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--color-border-subtle)}.movie-score-progress-bar{height:100%;width:100%;background:#10b981;border-radius:var(--radius-full);transition:width .35s cubic-bezier(.4,0,.2,1),background-color .3s ease}.movie-score-progress-bar.low-score{background:#ef4444;box-shadow:0 0 4px #ef444480}.movie-reveal-container{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:var(--shadow-lg);border:1px solid var(--color-border-default)}.movie-still-image{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1) translate(0);transform-origin:top left;transition:transform .35s cubic-bezier(.4,0,.2,1)}.movie-grid-overlay{display:grid;grid-template-columns:repeat(var(--grid-size, 5),1fr);grid-template-rows:repeat(var(--grid-size, 5),1fr);gap:0;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:scale(1) translate(0);transform-origin:top left;transition:transform .35s cubic-bezier(.4,0,.2,1)}.movie-reveal-container.zoomed .movie-still-image,.movie-reveal-container.zoomed .movie-grid-overlay{transform:scale(var(--grid-size, 5)) translate(calc(var(--zoom-col, 0) * -100% / var(--grid-size, 5)),calc(var(--zoom-row, 0) * -100% / var(--grid-size, 5)))!important}.movie-mask-cell{background:#090a10;color:#ffffff73;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;cursor:pointer;pointer-events:auto;border:.5px solid rgba(255,255,255,.12);-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) ease,color var(--duration-fast) ease,opacity var(--duration-normal) cubic-bezier(.4,0,.2,1),transform var(--duration-normal) cubic-bezier(.4,0,.2,1)}.movie-mask-cell:hover{background:#121522;color:var(--game-accent)}.movie-mask-cell.revealed{opacity:0;pointer-events:auto!important;transform:scale(.9);cursor:zoom-in}.movie-mask-cell.revealed:hover{background:transparent!important;color:transparent!important}.movie-reveal-container.zoomed .movie-mask-cell.revealed{cursor:zoom-out}.movie-grid-overlay.grid-locked .movie-mask-cell:not(.revealed){cursor:not-allowed!important;background:#040507!important;color:#ffffff1f!important;border-color:#ffffff0d!important}.movie-grid-overlay.grid-locked .movie-mask-cell:not(.revealed):hover{background:#040507!important;color:#ffffff1f!important}[data-theme=casual] .movie-reveal-container{background:var(--color-surface-sunken);border-color:var(--color-border-default)}[data-theme=casual] .movie-mask-cell{background:var(--color-surface-overlay);color:var(--color-text-secondary);border-color:var(--color-border-default)}[data-theme=casual] .movie-mask-cell:hover{background:var(--color-surface-sunken);color:var(--game-accent)}[data-theme=casual] .movie-grid-overlay.grid-locked .movie-mask-cell:not(.revealed){background:var(--color-surface-sunken)!important;color:var(--color-text-tertiary)!important;border-color:var(--color-border-subtle)!important}[data-theme=casual] .movie-grid-overlay.grid-locked .movie-mask-cell:not(.revealed):hover{background:var(--color-surface-sunken)!important;color:var(--color-text-tertiary)!important}.movie-guess-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}.movie-tiles-container{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);justify-content:center;width:100%;padding:var(--space-2) 0}.movie-word-container{display:flex;gap:5px;align-items:center}.movie-tile{width:2.25rem;height:2.75rem;border-radius:var(--radius-lg);border:2px solid var(--color-border-default);background:var(--color-surface-overlay);color:var(--color-text-primary);text-align:center;font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;text-transform:uppercase;caret-color:transparent;transition:border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease,transform var(--duration-normal) ease}.movie-tile:focus{border-color:var(--game-accent);outline:none;box-shadow:0 0 10px var(--game-accent-glow)}.movie-tile.correct{border-color:var(--color-status-success)!important;background:#10b98126!important;color:var(--color-status-success)!important;pointer-events:none}.movie-tile.wrong{border-color:var(--color-status-error)!important;background:#ef444426!important;color:var(--color-status-error)!important}.movie-tile.punctuation{border:none!important;background:transparent!important;width:auto;min-width:.5rem;padding:0 2px;display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:700;color:var(--color-text-secondary);pointer-events:none}.movie-tile.spin{animation:tile-spin .6s cubic-bezier(.34,1.56,.64,1) both}@keyframes tile-spin{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.movie-clues-section{display:flex;flex-direction:column;gap:var(--space-2);width:100%}.movie-clue-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.movie-clue-buttons .btn{padding:6px 12px;font-size:var(--text-xs);border-radius:var(--radius-full)}.movie-clue-display{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-1);width:100%;max-height:65px;overflow-y:auto;padding-right:var(--space-1)}.movie-clue-card{padding:var(--space-3) var(--space-4);background:#ffffff05;border:1px dashed var(--color-border-subtle);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.5;color:var(--color-text-secondary);animation:fade-in-clue var(--duration-normal) ease both}.movie-clue-card strong{color:var(--game-accent);margin-right:var(--space-1)}@keyframes fade-in-clue{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.movie-keyboard{container-type:inline-size;container-name:keyboard-container;display:flex;flex-direction:column;gap:4px;width:100%;margin-top:var(--space-1)}.movie-keyboard__row{display:flex;gap:4px;justify-content:center;width:100%}.movie-key{display:flex;align-items:center;justify-content:center;width:calc((100cqi - 36px)*.1);height:calc((100cqi - 36px) / 10 * 1.15);min-height:38px;max-height:52px;border-radius:var(--radius-md);background:var(--color-surface-raised);border:1px solid var(--color-border-default);font-family:var(--font-display);font-size:clamp(.75rem,3.2cqi,1.1rem);font-weight:700;color:var(--color-text-primary);cursor:pointer;padding:0;box-sizing:border-box;transition:background var(--duration-fast) ease,border-color var(--duration-fast) ease}.movie-key:hover:not(:disabled){background:var(--game-accent-subtle);border-color:var(--game-accent)}.movie-key--back{width:calc(((100cqi - 36px) / 10) * 1.5);color:var(--color-text-secondary)}.movie-actions{display:flex;gap:var(--space-3);width:100%}.movie-actions .btn{flex:1}.movie-feedback{text-align:center;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);font-family:var(--font-display);font-size:var(--text-base);font-weight:700;animation:fade-in-clue var(--duration-normal) ease both}.movie-feedback--success{background:#10b98126;border:1px solid var(--color-status-success);color:var(--color-status-success)}.movie-feedback--fail{background:#ef444426;border:1px solid var(--color-status-error);color:var(--color-status-error)}.movie-feedback--info{background:#a855f71a;border:1px solid var(--game-accent);color:var(--color-text-primary)}.movie-share-btn{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);text-decoration:underline;cursor:pointer;font-size:var(--text-xs);color:var(--game-accent);font-weight:700}@media (max-width: 480px){.movie-main{padding:var(--space-2) var(--space-2) var(--space-4);gap:var(--space-2)}.movie-card{padding:var(--space-3);gap:var(--space-3)}.movie-clue-display{max-height:55px;margin-top:4px}.movie-clue-card{padding:var(--space-2) var(--space-2-5);font-size:var(--text-xs)}.movie-actions{flex-direction:row;gap:var(--space-2)}.movie-actions .btn{padding:var(--space-2) var(--space-2);font-size:var(--text-xs)}.movie-tile{width:1.65rem;height:2.15rem;font-size:var(--text-sm)}}@media (orientation: landscape),(min-width: 768px){.movie-main{max-width:960px;padding:var(--space-3) var(--space-4) var(--space-4);gap:var(--space-4)}.movie-card{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-4);padding:var(--space-4);align-items:start}.movie-col-left,.movie-col-right{display:flex!important;flex-direction:column;gap:var(--space-4);height:auto;align-self:start}.movie-clue-display{max-height:85px}}@media (orientation: landscape) and (max-height: 480px){body{overflow:hidden!important}.zl-nav{height:40px!important;padding:0 var(--space-3)!important}.zl-nav__logo{font-size:var(--text-sm)!important}.zl-nav__link,.zl-nav__actions .btn{padding:var(--space-1) var(--space-2)!important;font-size:var(--text-xs)!important}.movie-main{padding:var(--space-1) var(--space-2) var(--space-2)!important;gap:var(--space-2)!important;height:calc(100dvh - 40px)!important;max-height:calc(100dvh - 40px)!important;box-sizing:border-box!important;overflow-y:auto!important}.movie-card{padding:var(--space-2) var(--space-3)!important;gap:var(--space-2)!important;box-sizing:border-box!important}.movie-feedback{padding:var(--space-1-5) var(--space-2)!important;margin-top:0!important}.movie-feedback p{font-size:var(--text-sm)!important}.movie-clue-display{max-height:60px}.clue-btn-text{display:none}.movie-clue-buttons{gap:4px}.movie-clue-buttons .btn{padding:4px 8px;font-size:var(--text-base);min-height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center}#leaderboard-container{display:none!important}#go-auth{padding:6px 12px!important;font-size:var(--text-xs)!important;margin-top:0!important}.movie-actions{margin-top:var(--space-2)!important;gap:var(--space-2)!important}.movie-actions .btn{padding:var(--space-1-5) var(--space-3)!important;font-size:var(--text-xs)!important}.movie-col-left h2{font-size:var(--text-lg)!important}.movie-col-left p{font-size:var(--text-xs)!important}.movie-reveal-container{margin-top:var(--space-1)!important;max-height:160px!important}.movie-reveal-container img{max-height:160px!important;object-fit:contain!important}}