/* The Flash stage: a Ruffle player and our bar of controls, dressed in the
 * future's tokens (assets/theme.css). Paper chrome, blue edges, square
 * corners; the movie's own screen stays dark.
 */

.flash {
  font-family: var(--futura);
}

.flash-frame {
  position: relative;
  width: 100%;
  height: auto;
  background: var(--ink);
  border: var(--edge);
  box-shadow: var(--lift);
}

.flash-player {
  width: 100%;
  height: 100%;
  display: block;
}

.flash-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  margin: 0;
  color: var(--paper);
  font-weight: 500;
  font-size: 17px;
  text-align: center;
}

.flash-kb-notice {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--warn-surface);
  color: var(--warn-foreground);
  border: var(--edge);
  border-radius: 0;
  font: 500 12px/1.4 var(--futura);
  text-align: center;
}

.flash-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.flash-btn {
  min-height: 40px;
  padding: 0 16px;
  font: 500 12px/1 var(--futura);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--paper);
  border: var(--edge);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.flash-btn:hover {
  background: var(--blue);
  color: var(--paper);
}

.flash-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.flash input.flash-vol {
  width: 120px;
  height: 40px;
  margin: 0;
  min-height: 0;
  padding: 0;
  accent-color: var(--blue);
}

.flash input.flash-vol:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Fullscreen: the stage owns the whole screen, the bar sits under it. */
.flash:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  padding: 24px;
}

.flash:fullscreen .flash-frame {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
  box-shadow: none;
}

.flash:fullscreen .flash-bar {
  flex: none;
  margin-top: 12px;
}

/* A game is the main event. System sidebars are already outside 100dvh/dvw. */
html:has([data-flash]) { height:100%; overflow:hidden; }
body.future-page:has([data-flash]) {
  box-sizing:border-box; height:100dvh; min-height:0; overflow:hidden;
  display:grid; grid-template-rows:52px minmax(0,1fr);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body:has([data-flash]) .f-header { padding:6px 12px; gap:8px; flex-wrap:nowrap; }
body:has([data-flash]) .f-main {
  width:100%; min-height:0; padding:0 12px 10px; margin:0;
  display:grid; grid-template-rows:36px minmax(0,1fr); gap:6px;
}
body:has([data-flash]) .game-head { padding:0; display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; }
body:has([data-flash]) .game-head .eyebrow { display:none; }
body:has([data-flash]) .game-head h1 { font-size:clamp(17px,2.5vw,25px); line-height:1.1; white-space:normal; }
body:has([data-flash]) .stage-wrap { width:100%; min-height:0; margin:0; }
body:has([data-flash]) .flash { height:100%; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; }
body:has([data-flash]) .flash-frame { height:100%; min-height:0; aspect-ratio:auto !important; box-shadow:none; display:grid; place-items:center; overflow:hidden; }
body:has([data-flash]) .flash-bar { justify-content:center; margin:0; gap:6px; }
body:has([data-flash]) .flash-btn { min-height:44px; padding:0 12px; letter-spacing:.08em; }
.flash-about { width:min(700px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:var(--edge); color:var(--fink); background:var(--paper); padding:20px; }
.flash-about::backdrop { background:#000a; }
body:has([data-flash]) .flash-about .notes { margin:16px 0 0; max-width:none; padding:0; border:0; box-shadow:none; }
.flash.expanded { position:fixed; inset:0; z-index:100; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); background:var(--sky); }
@media (max-height:520px) and (orientation:landscape) {
  body.future-page:has([data-flash]) { grid-template-rows:44px minmax(0,1fr); }
  body:has([data-flash]) .f-main { grid-template-rows:minmax(0,1fr); padding:0 6px 6px; }
  body:has([data-flash]) .game-head { display:none; }
  body:has([data-flash]) .flash { gap:4px; }
}
@media (max-width:580px) {
  body:has([data-flash]) .flash-bar { gap:4px; }
  body:has([data-flash]) .flash-btn { font-size:10px; padding:0 7px; }
  body:has([data-flash]) .flash-vol { width:64px; }
}