/* How to set up (/setup/): the options, then the table building itself scene by scene with the
   words under it and the controls. The table itself is table.css (#field: the felt). */

.su-options { display: grid; gap: 12px; max-width: 40em; margin: 18px 0 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.su-options[hidden], .su-stage[hidden] { display: none; }
.su-options h2 { font-size: 1.05rem; margin: 0; }
.su-options select { font: inherit; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 100%; min-width: 0; }
.su-options .so-field > label { display: grid; gap: 4px; min-width: 0; }
.su-options .btn { justify-self: start; }

.su-stage { display: grid; gap: 10px; margin: 18px 0 28px; scroll-margin-top: 12px; }
.su-head { display: flex; gap: 10px; align-items: baseline; min-height: 1.4em; font: 600 .85rem var(--f-mono); color: var(--muted); }
.su-term { font-family: inherit; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); border-radius: 99px; padding: 0 10px; color: var(--ink); }
.su-term[hidden] { display: none; }

#field.su-table { position: relative; display: grid; gap: 12px; padding: 12px; min-height: 200px; overflow: hidden; border-radius: var(--r, 12px); }
#field.su-table .card-wrap { cursor: default; }
#field.su-table .card-wrap:hover .card-face { box-shadow: 0 1px 1px rgb(0 0 0 / .12), 0 3px 6px rgb(0 0 0 / .14), inset 0 0 0 1px rgb(255 255 255 / .6); }
.su-none { margin: auto; color: var(--muted); }
.su-ghost { z-index: 5; }

.su-words { min-height: 4.4em; }
.su-caption { margin: 0; font-size: 1.15rem; line-height: 1.45; font-weight: 600; max-width: 44em; }
.su-sub { margin: 4px 0 0; color: var(--muted); }
.su-sub[hidden] { display: none; }

.su-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1.5px solid var(--signal); border-radius: 12px; background: color-mix(in srgb, var(--signal) 10%, var(--surface)); }
.su-end[hidden] { display: none; }
.su-end p { margin: 0; flex: 1 1 16em; font-weight: 600; }

.su-dots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.su-dots button { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid var(--track); background: transparent; cursor: pointer; }
.su-dots button.seen { background: var(--track); }
.su-dots button[aria-current="step"] { background: var(--signal); border-color: var(--signal); transform: scale(1.3); }
.su-dots button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

.su-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.su-controls > button { min-width: 48px; height: 48px; border-radius: 99px; border: 1.5px solid var(--track); background: var(--surface); color: var(--track); font: 800 1.05rem var(--f-sans, inherit); cursor: pointer; padding: 0 12px; }
.su-controls > button.su-main { min-width: 64px; background: var(--track); color: #fff; font-size: 1.2rem; }
.su-controls > button:disabled { opacity: .4; cursor: default; }
.su-controls > button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.su-controls > button.su-voice[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.su-controls > button[hidden] { display: none; }
.su-speed { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }
.su-speed select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.su-keys { margin: 0; color: var(--muted); font-size: .82rem; }
@media (hover: none) { .su-keys { display: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .su-controls > button.su-main { color: #0e1413; } }
:root[data-theme="dark"] .su-controls > button.su-main { color: #0e1413; }

/* a phone: the table fits the width, the controls stay under the thumb */
@media (max-width: 600px) {
  #field.su-table { padding: 8px; gap: 8px; min-height: 160px; }
  #field.su-table .card-wrap, #field.su-table .attachment { zoom: .72; }
  #field.su-table .open-row { gap: 6px 8px; }
  .su-caption { font-size: 1.05rem; }
  /* the words above the table, so they show with it on a small screen */
  .su-head { order: -2; }
  .su-words { order: -1; min-height: 3.2em; }
  .su-controls { position: sticky; bottom: 0; z-index: 6; justify-content: space-between; background: var(--bg, var(--surface)); padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .su-voice-l { display: none; }
  .su-speed { font-size: 0; gap: 0; }
  .su-speed select { font-size: .92rem; }
}

/* a commercial game: the real thing beside the rebuilt table (the publisher's images, served by the
   site): "What's in the box" first, then a photo per scene in a frame of fixed shape, so changing
   the photo never moves the table; a board or mat under its zone, veiled so the cards stay readable */
.su-box { margin: 18px 0 8px; }
.su-box[hidden], .su-photo[hidden] { display: none; }
.su-box h2 { font-size: 1.05rem; margin: 0 0 2px; }
.su-box > p { margin: 0 0 10px; }
.su-box-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; max-width: 60em; }
.su-view { display: grid; gap: 12px; min-width: 0; }
.su-view.with-photo { grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); align-items: start; }
.su-photo { position: sticky; top: 12px; }
#field .art-backdrop { background-image: linear-gradient(color-mix(in srgb, var(--surface) 70%, transparent), color-mix(in srgb, var(--surface) 70%, transparent)), var(--art); background-size: cover; background-position: center; }
/* a laid-out table (a view with a layout): the tabletop is the whole view; the real photo is a small
   picture in its corner (tap it: larger) and, at the end, the last frame over the table */
#field.su-table.tl-host { padding: 0; border: 0; background: none; box-shadow: none; display: block; min-height: 0; overflow: visible; border-radius: 10px; }
.su-view.pip { position: relative; grid-template-columns: minmax(0, 1fr); }
.su-view.pip .su-photo { position: absolute; right: 10px; bottom: 10px; top: auto; width: min(24%, 260px); z-index: 7; margin: 0; padding: 5px 5px 4px; background: rgb(255 252 245 / .96); border-radius: 8px; box-shadow: 0 6px 18px rgb(0 0 0 / .45); transition: width .45s ease, right .45s ease, bottom .45s ease; }
.su-view.pip .su-photo .art-frame { aspect-ratio: 3 / 2; border-radius: 5px; }
.su-view.pip .su-photo figcaption { font-size: .72rem; line-height: 1.25; margin-top: 3px; }
.su-view.pip .su-photo .art-credit { display: block; }
.su-swap { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: zoom-in; border: 0; background: none; }
.su-swap:focus-visible { opacity: 1; outline: 3px solid var(--signal); outline-offset: 2px; background: none; color: transparent; }
.su-swap[hidden] { display: none; }
.su-view.pip.big-photo .su-photo { width: calc(100% - 20px); right: 10px; bottom: 10px; cursor: zoom-out; }
.su-view.pip.big-photo .su-swap { cursor: zoom-out; }
.su-view.pip.big-photo .su-photo .art-frame { aspect-ratio: auto; max-height: min(64vh, 620px); }
.su-view.pip.big-photo .su-photo .art-frame img { object-fit: contain; max-height: min(64vh, 620px); }
.su-view.pip.big-photo .su-photo figcaption { font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .su-view.pip .su-photo { transition: none; } }
@media (max-width: 600px) {
  .su-view.pip .su-photo { width: 38%; right: 6px; bottom: 6px; padding: 3px; }
  .su-view.pip .su-photo figcaption { display: none; }
  .su-view.pip.big-photo .su-photo { width: calc(100% - 12px); }
  .su-view.pip.big-photo .su-photo figcaption { display: block; }
}

@media (max-width: 760px) {
  .su-view.with-photo { grid-template-columns: minmax(0, 1fr); }
  .su-photo { position: static; }
  .su-photo .art-frame { aspect-ratio: 16 / 9; }
  .su-box-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}