/* The picker (templates/my-pictures/fragments.html :: picker) on holypuzzle.com's /jigsaw-puzzle and
   /my-jigsaw-puzzle and puzzlefun.net's /puzzle and /my-puzzle: the picture box and link box on the
   left, the preview on the right - all always shown until a game starts (the player hides #picker
   then); stacked on narrow screens. Loaded after the site's puzzle.css, whose color tokens and
   button styles it uses. Selectors start with .picker so they win over that file's generic rules
   (e.g. button padding). */
.picker {
  width: min(1100px, 100%);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px;
  align-items: stretch;
}
.picker[hidden] { display: none; }
.picker-inputs { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.picker .field-label {
  display: block; margin: 0 0 6px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
@media (max-width: 760px) {
  .picker { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Picture box (click, drop or paste): icon beside the text */
.picker #drop {
  width: 100%; margin: 0; padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  border: 2px dashed var(--line);
  border-radius: 16px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  overflow-wrap: anywhere;
}
.picker #drop:hover, .picker #drop.over { border-color: var(--accent); background: var(--accent-soft); }
.picker #drop svg { width: 32px; height: 32px; flex: none; color: var(--accent); }
.picker #drop .drop-text { display: block; min-width: 0; color: var(--text); font-size: inherit; }
.picker #drop strong { display: block; font-size: 15px; margin: 0 0 2px; }
.picker #drop strong + span { color: var(--muted); font-size: 13px; }
.picker #file { display: none; }

/* Link box with its label (no Load button: a pasted link loads at once, a typed one on Enter) */
.picker #urlForm { display: block; width: 100%; margin: 0; }
.picker #urlInput {
  width: 100%;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px;
}
.picker #urlInput:focus { outline: none; border-color: var(--accent); }
.picker #urlMsg { width: 100%; min-height: 1.5em; margin: -10px 0 0; font-size: 13px; color: var(--muted); }
.picker #urlMsg.error { color: var(--accent); }

/* Preview: fills the right column; an empty placeholder until there's a picture */
.preview-field { display: flex; flex-direction: column; min-width: 0; }
.picker #stage {
  flex: 1; width: 100%; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px;
}
.picker #stage.empty { border-style: dashed; border-width: 2px; }
.picker #stage.empty > :not(.stage-empty) { display: none; }
.picker #stage:not(.empty) .stage-empty { display: none; }
.picker .stage-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: 14px; text-align: center;
}
.picker .stage-empty svg { width: 40px; height: 40px; opacity: .5; }
.picker #stageImg { display: block; max-width: 100%; max-height: 340px; border-radius: 10px; }
.picker #stageInfo { margin: 0; color: var(--muted); font-size: 13px; }
.picker #stage .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.picker #stage label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.picker #play { padding: 8px 24px; font-size: 15px; font-weight: 400; border-radius: 8px; }