/* photos2gif - Never or Forever's FF1 menus: blue windows with the sheet's border at 2x,
   the 8x8 font and the hand pointing at the chosen command at 1.5x. One sheet pixel of the
   window = --px, of the font and hand = --fpx. */
@font-face {
  font-family: 'NoF Menu';
  src: url(/ui/nof-font.woff2?v=3) format('woff2');
  font-display: block;
}
:root {
  --px: 2px;
  --fpx: 1.5px;           /* the main text: 12 px (designer, 2026-10-15: "smaller font in general in terms of the bigger font size") */
  --small: 8px;           /* the small text: the font at 1x (status line, frame numbers, footer) */
  --blue: rgb(36, 24, 142);
  --white: #fcfcfc;
  --grey: rgb(117, 117, 117);
  --light: rgb(188, 188, 188);
  --gold: #f8d878;
  --font: 'NoF Menu', 'Courier New', monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  color: var(--white);
  font: calc(8 * var(--fpx)) / calc(12 * var(--fpx)) var(--font);
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
img, canvas { image-rendering: auto; }

/* ---- the window ---- */
.win {
  position: relative;
  background: var(--blue);
  background-clip: padding-box;   /* scaled by odd amounts, blue under the border showed past its edge */
  border: calc(8 * var(--px)) solid transparent;
  border-image: url(/ui/window.png?v=4) 8 fill / calc(8 * var(--px)) repeat;
  image-rendering: pixelated;
  padding: calc(2 * var(--px)) calc(3 * var(--px));
}

/* ---- one fixed layout, scaled to fit (designer, 2026-10-15: "have it be what we will see no
   matter what the resolution of a phone", "it scale so it's always the same layout").
   #app is always 400 x 720; app.js fit() scales it as a whole into #fit and centres it.
   Every size below is in that 400 x 720 frame. The fallbacks come first for browsers
   without env(). */
#fit {
  position: fixed; overflow: hidden;
  top: 0; right: 0; bottom: 0; left: 0;
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
}
body.with-ad #fit { bottom: 64px; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); }
#app {
  position: absolute; top: 0; left: 0; width: 400px; height: 720px; overflow: hidden;
  transform-origin: 0 0; visibility: hidden;   /* shown once fit() has scaled it */
  display: flex; flex-direction: column; padding: 0 4px; background: #000;
}

/* ---- the GIF preview, always on top (designer, 2026-10-15: "we should always have the gif
   preview present, and below that settings and such change") ---- */
/* The title: its own window at the top of every screen, the camera too. Top left is Make GIF
   on the main screen and Back everywhere else, always in the same spot (designer, 2026-10-15:
   "a universal back button at the top would be good instead of "done"", "top left", "no make
   gif upper left, phots2gif can stay upper right"). The name on the right never moves. */
#title { height: 64px; flex: none; display: grid; grid-template-columns: 1fr auto; align-items: center; padding-top: 0; padding-bottom: 0; }
#title h1 { grid-column: 2; font: inherit; margin: 0; white-space: nowrap; }
#title-btn { grid-column: 1; justify-self: start; width: auto; min-height: 32px; padding-top: 0; padding-bottom: 0; }
#stage { height: 316px; flex: none; display: flex; flex-direction: column; padding-bottom: 0; }
#view-wrap { position: relative; flex: 1; min-height: 0; }
#gif { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
#gif.pix { image-rendering: pixelated; }
#gif:not([src]) { visibility: hidden; }   /* a GIF smaller than its box keeps hard pixels */
#view-empty { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--light); padding: 0 12px; }
/* The status line: frame, size, speed and file size, small, every field a fixed width so
   nothing moves when a number changes (designer, 2026-10-15: "a uniform way of showing
   frame, fps etc. and it should be smaller"). */
/* Centred between the GIF and the frame: 8 px above the letters, 8 below (with the window's
   own blue under it). Text everywhere sits in the middle of its row (designer, 2026-10-15:
   "make sure verything across the app is vertically centered when it comes to text"). */
#status {
  flex: none; height: 17px; padding-top: 6px; display: grid; grid-template-columns: 8em 10em 7em 1fr;
  font-size: var(--small); line-height: 11px; color: var(--light); white-space: nowrap;
}
#st-kb { text-align: right; }

/* ---- what is under the preview: one panel at a time ---- */
#panel { height: 314px; flex: none; position: relative; }
.panel { height: 100%; display: flex; flex-direction: column; }
footer { height: 26px; flex: none; color: var(--grey); text-align: center; font-size: var(--small); line-height: 10px; padding-top: 3px; }
footer a { color: var(--light); }

/* ---- the timeline ---- */
#tl-win { height: 114px; flex: none; }
#tl-wrap { position: relative; }
#timeline {
  display: flex; height: 74px; overflow-x: auto; overflow-y: hidden;
  padding: 5px 2px; scroll-behavior: smooth; touch-action: pan-x;
  scrollbar-width: none;   /* a phone shows none either; the PC must look the same */
}
#timeline::-webkit-scrollbar { display: none; }
.thumb {
  position: relative; flex: 0 0 auto; height: 64px; border: 2px solid transparent;
  background: #000; cursor: pointer; padding: 0;
}
.thumb canvas { display: block; height: 100%; }
.thumb .n { position: absolute; left: 1px; bottom: 0; font-size: var(--small); line-height: 8px; background: rgba(36, 24, 142, .85); padding: 1px 2px; }
.thumb + .thumb { margin-left: 6px; }
.thumb.on { border-color: var(--white); outline: 2px solid #000; }
.thumb.lift { opacity: .35; }
#drag-ghost { position: absolute; z-index: 50; pointer-events: none; border: 2px solid var(--gold); opacity: .9; height: 64px; }
#drop-mark { position: absolute; top: 5px; bottom: 5px; width: 4px; background: var(--gold); pointer-events: none; display: none; }
#tl-empty { color: var(--light); padding: 0 4px; display: flex; align-items: center; }

/* ---- command menus: the hand points at the chosen one ---- */
.cmds { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 4px; gap: 0 4px; align-content: start; }
/* The main commands: Frame across, then Add and GIF side by side. Each window's heading is a
   small box of its own in the same pixel frame (at 1x, with the 1x text), on the window's top
   edge at the upper left, sticking out into a gap above it (designer, 2026-10-15: "design a
   smaller break out box in the upper left of each frame to house the title using the pixelart
   frame style instead of having it in teh frame itself"). */
#menu { flex: 1; display: flex; flex-direction: column; }
.sect { margin-top: 12px; }
#m-frame, .pair > .win { height: 88px; }
.pair { display: flex; }
.pair > .win { flex: 1 1 0; min-width: 0; }
.sect h2 {
  position: absolute; top: -26px; left: -8px; z-index: 1;   /* from the window's inside edge: 10 px above it, 8 px in from its left */
  margin: 0; padding: 0 4px; font: inherit; font-size: var(--small); line-height: 11px; color: var(--white); white-space: nowrap;   /* 11: whole pixels above and below */
  background: var(--blue); background-clip: padding-box;
  border: 8px solid transparent; border-image: url(/ui/window.png?v=4) 8 fill / 8px repeat; image-rendering: pixelated;
}
.cmds.three { grid-template-columns: 1fr 1fr 1fr; }
.cmd {
  position: relative; display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 3px 0 3px calc(20 * var(--fpx)); cursor: pointer; min-height: 24px;   /* rows sized to the 12 px text */
  white-space: nowrap;
}
.cmd:disabled { color: var(--grey); cursor: default; }
.cmd.on::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: calc(17 * var(--fpx)); height: calc(13 * var(--fpx));
  background: url(/ui/hand.png?v=3) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
.cmd:focus-visible::before {   /* its own rule: Safari before iOS 15.4 drops a rule naming :focus-visible */
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: calc(17 * var(--fpx)); height: calc(13 * var(--fpx));
  background: url(/ui/hand.png?v=3) 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
}
.cmd:focus { outline: none; }
.cmds.one { grid-template-columns: 1fr; }

/* ---- settings: label, then a value you step with the arrows (FF config menu style) ---- */
#set-win { height: 100%; display: flex; flex-direction: column; }
#set-swatches { display: block; flex: none; width: 100%; height: 8px; margin-bottom: 4px; image-rendering: pixelated; }
#set-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#set-scroll::-webkit-scrollbar { display: none; }
.row { display: grid; grid-template-columns: calc(64 * var(--fpx)) minmax(0, 1fr); align-items: center; height: 24px; grid-gap: 4px; gap: 4px; }
.row .label { color: var(--white); white-space: nowrap; }
.step { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; }
.step button { background: none; border: 0; cursor: pointer; height: 24px; padding: 0; min-width: 32px; }
.step .val { text-align: center; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#set-scroll .cmds { margin-top: 6px; }

/* ---- crop ---- */
#crop-body { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; }
#crop-canvas { touch-action: none; }
#crop-box { position: absolute; border: 2px solid var(--white); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); touch-action: none; cursor: move; }
#crop-box::after { content: ''; position: absolute; top: 33.3%; bottom: 33.3%; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); pointer-events: none; }
#crop-box::before { content: ''; position: absolute; top: 0; bottom: 0; left: 33.3%; right: 33.3%; border-left: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.handle { position: absolute; width: 24px; height: 24px; background: var(--white); border: 3px solid #000; touch-action: none; }
.handle.nw { left: -12px; top: -12px; cursor: nwse-resize; }
.handle.ne { right: -12px; top: -12px; cursor: nesw-resize; }
.handle.sw { left: -12px; bottom: -12px; cursor: nesw-resize; }
.handle.se { right: -12px; bottom: -12px; cursor: nwse-resize; }

/* ---- camera: everything under the title (designer, 2026-10-15: "camera", to keeping it full; the title is on every screen) ---- */
#camera { position: absolute; top: 64px; right: 0; bottom: 0; left: 0; z-index: 20;   /* under the title */ background: #000; display: flex; flex-direction: column; }
#camera .body { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; }
#cam-frame { position: absolute; overflow: hidden; }
#cam-video { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; }
#cam-onion { position: absolute; opacity: .4; pointer-events: none; }
#cam-zoom {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--blue); border: 2px solid var(--white); color: var(--white); padding: 4px 0; cursor: pointer;
  width: calc(5 * 8 * var(--fpx) + 20px); text-align: center; white-space: nowrap;
}
/* Fixed widths, so a longer number never moves anything ("999 taken", "10.0x"). The count
   sits in the bar where Done was. */
#cam-count { margin-left: 16px; color: var(--light); width: calc(9 * 8 * var(--fpx)); white-space: nowrap; }
#cam-focus { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid var(--gold); pointer-events: none; }
#cam-focus.go { animation: focus-in .3s ease-out; }
@keyframes focus-in { from { transform: scale(1.5); opacity: .4; } to { transform: scale(1); opacity: 1; } }
#cam-flash { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
#cam-mask { position: absolute; border: 2px dashed rgba(252, 252, 252, .7); pointer-events: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); }
/* Commands on the left with room for their words, the shutter off to the right (designer,
   2026-10-15: "put it off to the right so we can have more text to the left"). */
.cam-bar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cam-bar .cmds { display: flex; align-items: center; }
.cam-bar .cmd { width: auto; padding-left: 0; }   /* Ghost has its box instead of the hand */
/* The shutter: the original round button, smaller (designer, 2026-10-15: "the shutter is still too big"). */
#snap {
  width: 46px; height: 46px; margin: 0 6px 0 4px; border-radius: 50%; border: 5px solid var(--white);
  background: var(--blue); cursor: pointer; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--light);
}
#snap:active { background: var(--white); }

/* ---- messages ---- */
#msg { position: absolute; left: 10px; right: 10px; bottom: 30px; z-index: 60; display: flex; align-items: center; justify-content: space-between; }
#msg-undo { margin-left: 8px; }
#busy { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; }
#busy .win { width: calc(20 * 8 * var(--px)); text-align: center; }   /* fixed: the text changes, the box does not */
.bar-meter { height: 8px; background: #000; margin-top: 6px; }
.bar-meter i { display: block; height: 100%; width: 0; background: var(--white); }

/* ---- ad: one slot under the layout, outside it, hidden until an ad unit is set up ---- */
#ad { position: fixed; left: 0; right: 0; bottom: 0; bottom: env(safe-area-inset-bottom, 0px); height: 64px; text-align: center; overflow: hidden; }
#ad .tag { color: var(--grey); font-size: var(--small); line-height: 8px; }