/* Gameplay film player, shared by the studio homepage (index.html) and the ProjectRush showcase (projectrush/index.html).
   Never wider than its native 1280 × 720: it shrinks with the page (and on short screens, so the bar and subtitle stay in view) but never scales up.
   assets/gameplay.js swaps the native controls for this bar and blocks fullscreen and picture-in-picture.
   Uses the shared palette variables; each page sets the figure's outer margins. */
.gameplay{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,1.8vw,26px);padding:clamp(14px,3vw,52px) clamp(14px,3vw,52px) clamp(22px,2.6vw,40px);border-radius:var(--radius,18px);background:radial-gradient(70% 80% at 50% 0%,rgba(242,194,48,.16),transparent 70%),var(--surface-dark,#15130c);box-shadow:0 30px 70px -30px rgba(44,37,23,.45),0 12px 24px -12px rgba(122,96,0,.2)}
.gameplay .icon{flex:none;width:1em;height:1em;fill:currentColor}
.gameplay-player{width:100%;max-width:min(1280px,max(480px,calc((100svh - 280px) * 16 / 9)))}
.gameplay-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-sm,10px);background:#000}
.gameplay-screen video{display:block;width:100%;height:100%;object-fit:contain}
.gameplay-player.is-enhanced .gameplay-screen{border-radius:var(--radius-sm,10px) var(--radius-sm,10px) 0 0;cursor:pointer}
.gameplay-big{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:clamp(56px,7vw,84px);height:clamp(56px,7vw,84px);margin:0;padding:0;border:0;border-radius:999px;background:linear-gradient(135deg,#ffd84d,#f2c230);color:#2c2517;font-size:clamp(1.3rem,2vw,1.9rem);box-shadow:0 14px 34px -8px rgba(0,0,0,.6);transform:translate(-50%,-50%);cursor:pointer;animation:gameplay-in .4s cubic-bezier(.16,1,.3,1)}
.gameplay-big .icon{margin-left:.12em}
.gameplay-big[hidden]{display:none}
.gameplay-bar{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border:1px solid rgba(255,233,138,.1);border-top:0;border-radius:0 0 var(--radius-sm,10px) var(--radius-sm,10px);background:#0d0c08}
.gameplay-bar[hidden]{display:none}
.gameplay-toggle{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:linear-gradient(135deg,#ffd84d,#f2c230);color:#2c2517;font-size:1rem;cursor:pointer;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.gameplay-toggle:active{transform:scale(.94)}
.gameplay-seek{flex:1;min-width:0;height:28px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.gameplay-seek::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#ffd84d var(--progress,0%),rgba(255,248,220,.2) 0)}
.gameplay-seek::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5px;border:0;border-radius:999px;background:#fff8d6;box-shadow:0 0 0 3px rgba(242,194,48,.4);-webkit-appearance:none;appearance:none}
.gameplay-seek::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,248,220,.2)}
.gameplay-seek::-moz-range-progress{height:6px;border-radius:999px;background:#ffd84d}
.gameplay-seek::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:999px;background:#fff8d6;box-shadow:0 0 0 3px rgba(242,194,48,.4)}
.gameplay-toggle:focus-visible,.gameplay-seek:focus-visible{outline:3px solid #ffe98a;outline-offset:3px}
.gameplay-time{flex:none;color:rgba(255,248,220,.72);font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.gameplay figcaption{width:100%;max-width:1100px;margin:0;color:rgba(255,248,220,.8);font-size:clamp(1.02rem,1.3vw,1.25rem);line-height:1.5;text-align:center;text-wrap:balance}
.gameplay figcaption strong{color:#ffe98a;font-family:var(--display,'Inter',system-ui,sans-serif);font-weight:700;letter-spacing:-.01em}
@keyframes gameplay-in{from{opacity:0}}
@media(max-width:600px){.gameplay-bar{gap:10px;padding-right:12px}.gameplay-time{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.gameplay-big,.gameplay-toggle{animation:none;transition:none}}

/* Title-screen film stacked above the gameplay player on both pages: the same dark panel and player width, native controls (4K source). */
.title-film{display:flex;justify-content:center;margin:0;padding:clamp(14px,3vw,52px);border-radius:var(--radius,18px);background:radial-gradient(70% 80% at 50% 0%,rgba(242,194,48,.16),transparent 70%),var(--surface-dark,#15130c);box-shadow:0 30px 70px -30px rgba(44,37,23,.45),0 12px 24px -12px rgba(122,96,0,.2)}
.title-film video{display:block;width:100%;max-width:min(1280px,max(480px,calc((100svh - 280px) * 16 / 9)));height:auto;aspect-ratio:16/9;border-radius:var(--radius-sm,10px);background:#000;object-fit:contain}
.title-film+.gameplay{margin-top:clamp(20px,2.4vw,32px)}