* { box-sizing: border-box; }

body {
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #14161a;
  color: #eaeaea;
  margin: 0;
  padding: 24px;
}

header {
  max-width: 720px;
  margin: 0 auto 16px;
}

h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
}

.subtitle {
  margin: 0 0 10px;
  color: #9aa0a6;
  font-size: 0.95rem;
}

#profile-picker {
  max-width: 420px;
  margin: 15vh auto 0;
  text-align: center;
}

#profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

#profile-grid form {
  margin: 0;
}

.profile-btn {
  width: 100%;
  padding: 24px 12px;
  border-radius: 10px;
  border: 1px solid #3a3d42;
  background: #23262b;
  color: #eaeaea;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-btn:hover {
  border-color: #4a9eff;
  background: #2c2f34;
}

#current-profile {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #9aa0a6;
}

#current-profile a {
  color: #4a9eff;
  text-decoration: none;
}

#current-profile a:hover {
  text-decoration: underline;
}

#video-select {
  width: 100%;
  max-width: 400px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #3a3d42;
  background: #23262b;
  color: #eaeaea;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

#add-video-form {
  display: flex;
  gap: 8px;
  max-width: 400px;
}

#add-video-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #3a3d42;
  background: #23262b;
  color: #eaeaea;
  font-size: 1rem;
}

#add-video-btn {
  padding: 10px 16px;
  border-radius: 6px;
  border: none;
  background: #e04444;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}

#add-video-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#add-video-status {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #9aa0a6;
  min-height: 1.2em;
}

#add-video-hint {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: #6b7076;
  max-width: 400px;
}

main {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

#video-wrapper {
  position: relative;
  background: #000;
}

#player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

#no-video-message {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9aa0a6;
  padding: 24px;
}

#no-video-message.hidden {
  display: none;
}

#no-video-message p {
  margin: 4px 0;
}

#player,
#player-shield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#player-shield {
  z-index: 4;
  background: transparent;
}

#player-shield.hidden {
  display: none;
}

#fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

#fullscreen-btn.hidden {
  display: none;
}

#video-wrapper:fullscreen,
#video-wrapper:-webkit-full-screen,
#video-wrapper.pseudo-fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* iPhone Safari fallback (see toggleFullscreen in app.js) -- the real
   Fullscreen API isn't usable on this element there, so this fills the
   viewport with plain CSS instead. Can't hide the browser's own address
   bar the way real fullscreen can, but the video and subtitles together
   still expand to fill the screen. */
#video-wrapper.pseudo-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
}

#video-wrapper:fullscreen #player-frame,
#video-wrapper:-webkit-full-screen #player-frame,
#video-wrapper.pseudo-fullscreen #player-frame {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
}

#video-wrapper:fullscreen #subtitle-box,
#video-wrapper:-webkit-full-screen #subtitle-box,
#video-wrapper.pseudo-fullscreen #subtitle-box {
  font-size: calc(1.6rem * var(--subtitle-font-scale, 1));
}

/* Overlaid on the video itself (not stacked below it) so it can be
   dragged to wherever is easiest to read while still watching the
   video, instead of forcing a choice between the two. --subtitle-font-scale
   is set inline by app.js (via the A-/A+ buttons) and defaults to 1 so
   both this and the fullscreen size above scale together proportionally. */
#subtitle-box {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  max-width: 92%;
  text-align: center;
  padding: 20px 14px 22px;
  font-size: calc(1.4rem * var(--subtitle-font-scale, 1));
  line-height: 1.6;
  background: rgba(76, 39, 148, var(--subtitle-bg-opacity, 0.5));
  border-radius: 8px;
  z-index: 6;
  cursor: move;
  touch-action: none;
  user-select: none;
}

#subtitle-box.hidden {
  display: none;
}

/* Pinned to the box's top-left corner (the one point that never moves
   as the box resizes with each line of dialogue), so the options toggle
   is always in the same place — and living on the subtitle box, not
   floating over the raw video, keeps it out of the way of YouTube's own
   on-video controls. */
#subtitle-toolbar {
  position: absolute;
  top: 3px;
  left: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#tools-toggle-btn,
#sentence-speak-btn {
  background: transparent;
  border: none;
  padding: 0;
  color: #9aa0a6;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

#tools-toggle-btn:hover,
#tools-toggle-btn.active,
#sentence-speak-btn:hover {
  color: #fff;
}

#sentence-speak-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#subtitle-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

#subtitle-tools.hidden {
  display: none;
}

#subtitle-tools button {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#subtitle-tools button:hover {
  background: rgba(255, 255, 255, 0.3);
}

#subtitle-tools button.active {
  background: #6ee08a;
  color: #14161a;
}

#translate-lang-select {
  height: 26px;
  border-radius: 5px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 4px;
}

#translate-lang-select:hover {
  background: rgba(255, 255, 255, 0.3);
}

#translate-lang-select.active {
  background: #6ee08a;
  color: #14161a;
}

#translate-lang-select option {
  color: #14161a;
}

#playback-speed-select {
  height: 26px;
  border-radius: 5px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0 4px;
}

#playback-speed-select:hover {
  background: rgba(255, 255, 255, 0.3);
}

#playback-speed-select.active {
  background: #6ee08a;
  color: #14161a;
}

#playback-speed-select option {
  color: #14161a;
}

/* Always visible (not tucked in the collapsible panel) in the opposite
   corner from the toolbar, like a typical window resize handle. Drag
   away from the box to grow the subtitles, drag in to shrink them. */
#subtitle-resize-handle {
  position: absolute;
  top: 3px;
  right: 5px;
  color: #9aa0a6;
  font-size: 0.85rem;
  line-height: 1;
  cursor: nesw-resize;
  touch-action: none;
  user-select: none;
  display: inline-block;
  /* A plain left-right arrow (↔), rotated with CSS instead of using a
     diagonal arrow character — the diagonal Unicode glyphs render
     inconsistently across fonts/platforms, which is what made the
     direction look backwards before. Rotating a known-horizontal arrow
     ourselves guarantees it actually points up-right/down-left. */
  transform: rotate(-45deg);
}

#subtitle-resize-handle:hover {
  color: #fff;
}

/* A dedicated, generously-sized grab point for touchscreens. The box
   itself has always been draggable from any empty background pixel, but
   on a phone the subtitle text plus its translation labels can fill
   almost the whole box, leaving barely any empty space to actually grab
   -- this always works regardless of how full a given line is. Sized
   close to a fingertip (not just a fingerprint) so it's easy to hit
   without needing to be precise. Centered exactly on the box's bottom-left
   corner (half in, half out) so it reads as its own separate control
   rather than another piece of the box's body -- also doubles as a quick
   tap to open the toolbar, see the click handler in app.js. */
#subtitle-drag-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(74, 158, 255, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: move;
  touch-action: none;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

#subtitle-drag-handle:hover {
  background: rgba(74, 158, 255, 0.8);
}

#subtitle-drag-handle span {
  font-size: 0.42rem;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  pointer-events: none;
}

#subtitle-line span.word {
  cursor: pointer;
  border-bottom: 1px dotted #666;
}

#subtitle-line span.word:hover {
  border-bottom-color: #fff;
}

#subtitle-line span.learning-word {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#subtitle-line .learning-top {
  color: #e0c040;
  font-weight: 600;
}

#subtitle-line .learning-bottom {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #39ff14;
  font-size: 0.55em;
  font-weight: normal;
  line-height: 1.2;
}

#subtitle-line span.learned-word {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#subtitle-line .learned-top {
  color: #e04444;
  font-weight: 600;
}

#subtitle-line .learned-bottom {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #39ff14;
  font-size: 0.55em;
  font-weight: normal;
  line-height: 1.2;
}

#translate-popup {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  background: #23262b;
  border: 1px solid #3a3d42;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
  min-width: 220px;
  max-width: min(360px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

#translate-popup.hidden {
  display: none;
}

#popup-source {
  font-size: 1.1rem;
  color: #eaeaea;
}

#popup-arrow {
  color: #666;
  margin: 2px 0;
}

#popup-target {
  font-size: 1.3rem;
  font-weight: 600;
  color: #eaeaea;
  margin-bottom: 12px;
}

#popup-target.learned {
  color: #e04444;
}

#popup-target.learning {
  color: #e0c040;
}

#popup-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

#popup-actions button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

#popup-speak-btn {
  background: #3a3d42;
  color: #eaeaea;
  font-size: 1.1rem;
  padding: 8px 12px;
}

#popup-speak-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#popup-learning-btn {
  background: #e0c040;
  color: #23262b;
}

#popup-learning-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#popup-learn-btn {
  background: #e04444;
  color: #fff;
}

#popup-learn-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#popup-close-btn {
  background: #3a3d42;
  color: #eaeaea;
}

#popup-extras {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #3a3d42;
  text-align: left;
}

#popup-extras.hidden {
  display: none;
}

.popup-extra-section + .popup-extra-section {
  margin-top: 12px;
}

.popup-extra-heading {
  font-size: 0.7rem;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.popup-extra-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.popup-extra-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #3a3d42;
  background: #2c2f34;
  color: #d8dade;
  font-size: 0.8rem;
  cursor: pointer;
}

.popup-extra-chip:hover {
  border-color: #666;
}

.popup-extra-chip.learned {
  border-color: #e04444;
  color: #e04444;
  background: rgba(224, 68, 68, 0.12);
}

.popup-extra-chip.learning {
  border-color: #e0c040;
  color: #e0c040;
  background: rgba(224, 192, 64, 0.12);
}

.family-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  font-size: 0.9rem;
  color: #d8dade;
}

.family-form-row + .family-form-row {
  border-top: 1px solid #2c2f34;
}

.family-form-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.family-form-speak-btn {
  flex-shrink: 0;
  background: #2c2f34;
  color: #eaeaea;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  padding: 3px 6px;
  cursor: pointer;
}

.family-form-speak-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.family-form-sentence {
  flex: 1;
}

.family-form-word {
  font-weight: 700;
}

.family-form-row.learned .family-form-word {
  color: #e04444;
}

.family-form-row.learning .family-form-word {
  color: #e0c040;
}

.family-form-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.family-form-status-btn {
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid #444;
  background: transparent;
  color: #9aa0a6;
  cursor: pointer;
}

.family-form-status-btn:hover {
  color: #fff;
  border-color: #fff;
}

.family-form-learning-btn.active {
  background: #e0c040;
  border-color: #e0c040;
  color: #23262b;
}

.family-form-learned-btn.active {
  background: #e04444;
  border-color: #e04444;
  color: #fff;
}

.family-form-forget-btn {
  flex-shrink: 0;
  font-size: 0.7rem;
  padding: 3px 7px;
  border-radius: 10px;
  border: 1px solid #444;
  background: transparent;
  color: #9aa0a6;
  cursor: pointer;
}

.family-form-forget-btn:hover {
  color: #e04444;
  border-color: #e04444;
}

.family-form-forget-btn.hidden {
  display: none;
}

.family-more-toggle {
  font-size: 0.75rem;
  color: #9aa0a6;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.family-more-toggle:hover {
  color: #eaeaea;
}

.family-form-row.family-form-collapsed {
  display: none;
}

#popup-forget-btn {
  background: transparent;
  border: 1px solid #666;
  color: #9aa0a6;
}

#popup-forget-btn:hover {
  color: #fff;
  border-color: #fff;
}

#popup-forget-btn.hidden {
  display: none;
}

#recap-panel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001; /* above .pseudo-fullscreen's 1000 -- the review button can reopen this panel while fullscreen */
}

#recap-panel.hidden {
  display: none;
}

#recap-card {
  background: #23262b;
  border: 1px solid #3a3d42;
  border-radius: 12px;
  padding: 24px;
  width: 380px;
  max-width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#recap-card h2 {
  margin: 0 0 12px;
  font-size: 1.3rem;
}

#recap-card h3 {
  margin: 16px 0 8px;
  font-size: 0.9rem;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#recap-vocab-progress {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: rgba(216, 192, 74, 0.1);
  border: 1px solid rgba(216, 192, 74, 0.3);
  border-radius: 8px;
  font-size: 0.85rem;
  color: #d8c04a;
}

#recap-vocab-progress:empty {
  display: none;
}

.recap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recap-list li {
  padding: 6px 0;
  border-bottom: 1px solid #2c2f34;
  font-size: 0.95rem;
}

.recap-list li.recap-empty {
  color: #666;
  font-style: italic;
  border-bottom: none;
}

.recap-list li.recap-subheading {
  border-bottom: none;
  padding: 12px 0 4px;
  font-size: 0.7rem;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.recap-list li.recap-subheading:first-child {
  padding-top: 0;
}

.recap-list li.recap-toggle {
  cursor: pointer;
  user-select: none;
}

.recap-list li.recap-toggle:hover {
  color: #eaeaea;
}

.recap-list li.recap-row.recap-collapsed {
  display: none;
}

.recap-list li.recap-highlight {
  padding-left: 8px;
}

.recap-list li.recap-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recap-row-text {
  display: flex;
  align-items: center;
}

.recap-sentence-text {
  flex-wrap: wrap;
  align-items: baseline;
  line-height: 1.4;
}

.recap-speak-btn {
  margin-left: 8px;
  border: none;
  background: transparent;
  color: #9aa0a6;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}

.recap-speak-btn:hover {
  color: #fff;
}

.recap-speak-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.recap-row-actions {
  display: flex;
  gap: 6px;
}

.recap-action-btn {
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid #444;
  background: transparent;
  color: #9aa0a6;
  cursor: pointer;
}

.recap-action-btn:hover {
  color: #fff;
  border-color: #fff;
}

.recap-forget-btn:hover {
  color: #e04444;
  border-color: #e04444;
}

.recap-target {
  font-weight: 600;
  margin-left: 6px;
}

#recap-learned-list .recap-target {
  color: #e04444;
}

#recap-learning-list .recap-target {
  color: #e0c040;
}

#recap-learned-list li.recap-highlight {
  border-left: 3px solid #e04444;
}

#recap-learning-list li.recap-highlight {
  border-left: 3px solid #e0c040;
}

#recap-close-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: none;
  background: #3a3d42;
  color: #eaeaea;
  cursor: pointer;
  font-size: 0.95rem;
}