/* Sudoku Cube — the Looks page (Story 56.3). On top of site.css. */

.looks-hero { padding-block: 56px 28px; position: relative; overflow: hidden; }
.looks-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgba(32, 217, 168, .12), transparent);
  pointer-events: none;
}
.looks-hero .wrap { position: relative; }
.looks-hero h1 { margin: 14px 0 16px; }
.looks-hero h1 span { color: var(--cyan); }
.looks-hero .lede { font-size: 19px; color: var(--muted); max-width: 56ch; }

/* Tabs — hidden until the script reveals them. */
.looks-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 28px; }
.looks-tabs [role="tab"] {
  font: inherit; font-weight: 700; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
}
.looks-tabs [role="tab"][aria-selected="true"] { color: var(--ground); background: var(--cyan); border-color: var(--cyan); }
.looks-tabs [role="tab"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.looks-count { font-weight: 500; font-size: 13px; opacity: .8; }

/* Without the script both panels show, one under the other, each titled. */
.looks-panel { margin-bottom: 40px; }
.looks-panel-title { font-size: clamp(26px, 3vw, 34px); margin: 12px 0 8px; }
.looks-tabbed .looks-panel-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* site.css pads and rules every <section>; a collection is a sub-section. */
.looks-collection { padding-block: 0; border-top: 0; }
.looks-collection h3 {
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange);
  margin: 24px 0 14px;
}
.looks-grid {
  list-style: none; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.look { margin: 0; }
.look-open { display: block; border-radius: 14px; }
.look-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.look img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  transition: transform .2s ease, border-color .2s ease;
}
.look-open:hover img { transform: translateY(-3px); border-color: var(--cyan); }
.look figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.looks-note { font-size: 13px; color: var(--dim); margin: 8px 0 48px; }

/* The dialog: the close-up beside the game, stacked on a phone. */
.look-dialog {
  width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  margin: auto; padding: 0; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
}
.look-dialog::backdrop { background: rgba(4, 8, 14, .78); }
.look-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.look-dialog-head h2 { font-size: 22px; }
.look-close {
  font: inherit; font-size: 26px; line-height: 1; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; width: 44px; height: 44px; cursor: pointer;
}
.look-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.look-dialog-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; padding: 20px; overflow: auto; }
.look-dialog-body figure { margin: 0; }
.look-dialog-body img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--ground); }
.look-dialog-body figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
/* The game screen and a theme's pages: a strip that scrolls sideways. */
.look-screens { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.look-screens figure { flex: 0 0 min(220px, 60%); scroll-snap-align: start; }

@media (max-width: 720px) {
  .look-dialog-body { grid-template-columns: 1fr; }
  .looks-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .look img { transition: none; }
  .look-open:hover img { transform: none; }
}