@import url('photo-sources.css');
/* Legpuzzel. The page: the chosen photo large, one button, the other photos.
   The table: fixed over the whole screen, a slim bar, the frame on a calm
   sand surface with the pieces around it. */
.lp-cover { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: center; }
.lp-cover__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; object-fit: cover; background: #eef4f0; }
.lp-cover__name { margin: 0 0 8px; font: 700 28px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.lp-cover__line { margin: 0 0 18px; font-size: 18px; line-height: 1.5; color: #374151; }
.lp-start { min-height: 60px; padding: 0 30px; font-size: 20px; }

.lp-choose__title { margin: 28px 0 6px; font: 700 21px/1.25 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.lp-choose__note { margin: 0 0 10px; font-size: 16px; color: #6b6255; }
.lp-choose__note[hidden] { display: none; }
.lp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.lp-thumb { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid #e1ded6; border-radius: 12px; background: #fff; font: 600 15px/1.3 Inter, system-ui, sans-serif; color: #1f2937; text-align: left; cursor: pointer; }
.lp-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; }
.lp-thumb span { padding: 0 4px 2px; }
.lp-thumb:hover { border-color: #8fc1a4; }
.lp-thumb[aria-current="true"] { border-color: #2f5d45; box-shadow: 0 0 0 2px #2f5d45; }
.lp-thumb:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

.lp-table { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #f3eee3; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1f2937; touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; }
.lp-table--inline { position: relative; inset: auto; z-index: auto; height: min(50dvh, 520px); border-radius: 12px; overflow: hidden; }
.lp-page[hidden] { display: none; }
.lp-bar { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 10px; background: #fff; border-bottom: 1.5px solid #e1ded6; }
.lp-bar__text { flex: 1; min-width: 0; }
.lp-bar__count { margin: 0; font: 700 19px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.lp-bar__note { margin: 2px 0 0; font-size: 14px; line-height: 1.25; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-bar__button { white-space: nowrap; min-height: 44px; padding: 0 16px; border: 1.5px solid #2f5d45; border-radius: 999px; background: #fff; color: #2f5d45; font: 700 16px/1 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.lp-bar__button[aria-pressed="true"] { background: #eef4f0; }
.lp-bar__button--stop { background: #2f5d45; color: #fff; }
.lp-bar__button:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

.lp-bar { position: relative; z-index: 2; }
.lp-play { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; }

/* The table's own Hulp: a menu under the bar, like the frame's. */
.lp-menu { position: absolute; top: calc(100% + 6px); right: 8px; width: min(340px, calc(100vw - 24px)); padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 12px 36px rgba(0, 0, 0, .25); border: 1.5px solid #e7e4dd; }
.lp-menu[hidden] { display: none; }
.lp-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: #1f2937; touch-action: manipulation; }
.lp-menu button:hover, .lp-menu button:focus-visible { background: #fff8dc; outline: none; }
.lp-menu button[aria-pressed="true"] { background: #eef4f0; }
.lp-menu strong { font: 700 17px/1.2 Inter, system-ui, sans-serif; }
.lp-menu span { font-size: 15px; line-height: 1.35; color: #4b5563; }
.lp-menu__note { margin: 6px 14px 4px; font-size: 14px; line-height: 1.4; color: #6b7280; }

/* The whole photo, large, over the table until a tap. */
.lp-photo { position: absolute; inset: 0; z-index: 2000000000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; background: rgba(243, 238, 227, .97); cursor: pointer; }
.lp-photo[hidden] { display: none; }
.lp-photo img { max-width: 100%; max-height: calc(100% - 44px); border-radius: 6px; box-shadow: 0 6px 24px rgba(31, 41, 55, .3); }
.lp-photo p { margin: 0; font-size: 17px; font-weight: 600; color: #1f2937; }

/* The colour of the table. */
.lp-table--dark .lp-play { background: #34423a; }
.lp-table--dark .lp-frame { background: #26312b; box-shadow: inset 0 0 0 2px #5f7a69, 0 0 0 4px #1b231f; }
.lp-table--dark .lp-loading { color: #e5e7eb; }
.lp-table--white .lp-play { background: #fff; }
.lp-table--white .lp-frame { background: #f1f4f2; box-shadow: inset 0 0 0 2px #9bb8a6, 0 0 0 4px #e5e7eb; }

.lp-piece.is-away { visibility: hidden; pointer-events: none; }
.lp-piece.is-gliding { transition: translate .55s ease-in-out; }
.lp-frame { position: absolute; display: none; border-radius: 3px; background: #e2ebe4; box-shadow: inset 0 0 0 2px #bcd5c5, 0 0 0 4px #fff; }
.lp-play.is-ready .lp-frame { display: block; }
.lp-preview { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.lp-frame.has-preview .lp-preview { opacity: .32; }
.lp-loading { margin: 0; padding: 40px 16px; text-align: center; font-size: 18px; color: #4b5563; }
.lp-play.is-ready .lp-loading { display: none; }

.lp-piece { position: absolute; top: 0; left: 0; cursor: grab; filter: drop-shadow(0 2px 3px rgba(31, 41, 55, .3)); }
.lp-piece.is-dragging { cursor: grabbing; filter: drop-shadow(0 8px 12px rgba(31, 41, 55, .35)); }
.lp-piece.is-placed { pointer-events: none; cursor: default; filter: none; }

@media (max-width: 760px) {
  .lp-cover { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-cover__name { font-size: 24px; }
  .lp-start { width: 100%; }
  .lp-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lp-thumb { font-size: 14px; }
  .lp-bar__button { padding: 0 12px; font-size: 15px; }
}
@media (max-width: 520px) {
  .lp-long { display: none; }
  /* On a phone the words go on a line of their own above the three buttons. */
  .lp-bar { flex-wrap: wrap; gap: 6px 8px; }
  .lp-bar__text { flex-basis: 100%; display: flex; align-items: baseline; gap: 10px; }
  .lp-bar__count { flex: none; font-size: 17px; }
  .lp-bar__note { flex: 1; min-width: 0; margin: 0; }
  .lp-bar__button { flex: 1; padding: 0 8px; }
}
@media (max-height: 500px) {
  .lp-bar { min-height: 0; padding: 4px 10px; }
  .lp-bar__note { display: none; }
}
/* Larger: a taller bar with bigger words and buttons. More contrast: firm edges and black text. */
.sp--large .lp-cover__line { font-size: 20px; }
.sp--large .lp-thumb { font-size: 17px; }
.sp--contrast .lp-thumb { border-color: #6b6255; }
.sp--contrast .lp-cover__line, .sp--contrast .lp-choose__note { color: #000; }

.lp-table.sp--large .lp-bar__count { font-size: 22px; }
.lp-table.sp--large .lp-bar__note { font-size: 16px; }
.lp-table.sp--large .lp-bar__button { min-height: 50px; font-size: 18px; }
.lp-table.sp--large .lp-menu strong { font-size: 19px; }
.lp-table.sp--large .lp-menu span { font-size: 17px; }
.lp-table.sp--contrast .lp-bar { border-bottom-color: #1f2937; }
.lp-table.sp--contrast .lp-bar__button { border-width: 2px; border-color: #173427; }
.lp-table.sp--contrast .lp-bar__note, .lp-table.sp--contrast .lp-menu span { color: #111; }
.lp-table.sp--contrast .lp-frame { box-shadow: inset 0 0 0 3px #2f5d45, 0 0 0 4px #fff; }

@media (prefers-reduced-motion: reduce) { .lp-preview, .lp-piece.is-gliding { transition: none; } }
@media (max-width: 520px) {
  .lp-table.sp--large .lp-bar__count { font-size: 19px; }
  .lp-table.sp--large .lp-bar__button { font-size: 17px; padding: 0 6px; }
}