* { margin: 0; padding: 0; box-sizing: border-box; }

/* The app shows/hides everything via the `hidden` attribute. It must always
 * win, even over elements styled with display:flex/block below. */
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: white; /* filler color; app.js overrides from settings */
  font-family: "Segoe UI", Roboto, sans-serif;
}

body.no-cursor, body.no-cursor * { cursor: none !important; }

/* ---- stage: the area the picture/video fills ---- */

#stage {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
}

/* Physically rotated monitor: rotate the stage and swap its dimensions. */
#stage.portrait, #stage.portrait-flipped {
  top: 50%; left: 50%;
  width: 100vh;
  height: 100vw;
}
#stage.portrait          { transform: translate(-50%, -50%) rotate(-90deg); }
#stage.portrait-flipped  { transform: translate(-50%, -50%) rotate(90deg); }

#photo, #video {
  position: relative;  /* paints above the blurred background layer */
  width: 100%;
  height: 100%;
  object-fit: contain; /* "fit" mode; app.js switches to cover for "fill" */
  display: block;
}

/* Blurred copy of the current picture, filling the screen behind it
 * ("blur" filler mode). Oversized so the blur has no faded edges. */
#bg-blur {
  position: absolute;
  inset: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  object-fit: cover;
  filter: blur(36px) brightness(0.92);
}

#message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.4rem;
  padding: 2rem;
  white-space: pre-line;
}

/* ---- touch control bar ---- */

#controls {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: calc(100vw - 24px);
  background: rgba(20, 20, 20, 0.88);
  border: 1px solid #555;
  border-radius: 18px;
  padding: 10px 14px;
  z-index: 25;
}

#controls button {
  width: 56px;
  height: 56px;
  font-size: 26px;
  line-height: 1;
  background: #2d2d2d;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation; /* no double-tap zoom delay */
}
#controls button:active { background: #3a6df0; }

.ctl-sep { width: 1px; height: 40px; background: #555; flex: none; }

@media (max-width: 720px) {
  #controls { gap: 6px; padding: 8px 10px; }
  #controls button { width: 46px; height: 46px; font-size: 21px; }
}

/* ---- controls tooltip ---- */

#tooltip {
  position: fixed;
  left: 50%;
  bottom: 104px; /* sits above the touch control bar */
  transform: translateX(-50%);
  max-width: calc(100vw - 40px);
  background: rgba(20, 20, 20, 0.85);
  color: #fff;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.95rem;
  text-align: center;
  z-index: 20;
}

/* ---- start overlay ---- */

#start-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #16181d;
  color: #eee;
  z-index: 30;
  text-align: center;
  padding: 24px;
}
#start-overlay h1 { font-weight: 300; font-size: 2.4rem; letter-spacing: 2px; }
#start-overlay button {
  font-size: 1.15rem;
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  background: #3a6df0;
  color: white;
  cursor: pointer;
}
#start-overlay button:hover { background: #2f5cd8; }
#start-overlay #resume-btn { background: #2e9e5b; }
#start-overlay #resume-btn:hover { background: #268a4e; }
#start-overlay .small { color: #999; font-size: 0.9rem; }
#start-overlay .error { color: #ff7b6b; max-width: 420px; }

/* ---- settings dialog ---- */

dialog#settings {
  border: none;
  border-radius: 12px;
  padding: 22px 26px;
  min-width: 420px;
  max-width: 92vw;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
dialog#settings::backdrop { background: rgba(0,0,0,0.45); }
dialog#settings h2 { font-weight: 400; margin-bottom: 14px; }
dialog#settings .grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
}
dialog#settings .grid label { text-align: right; color: #444; }
dialog#settings input[type="number"] { width: 90px; }
dialog#settings input[type="text"] { width: 100%; }
dialog#settings .buttons {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
dialog#settings .buttons button {
  padding: 8px 26px;
  border-radius: 8px;
  border: 1px solid #bbb;
  background: #f4f4f4;
  cursor: pointer;
}
dialog#settings .buttons #save-btn { background: #3a6df0; color: white; border: none; }
#folder-name { margin-right: 10px; font-style: italic; color: #333; }