/* The STATE PROPERTY series menu: native card swipes on phones, a grid on desktop. */
html, body.hub-page { overflow: auto; height: auto; min-height: 100%; }
/* Only html should scroll the page. A second overflow:auto scroller on body, combined
   with brand.css's overscroll-behavior:none, traps touch gestures before they reach html. */
body.hub-page { overflow: visible; }
.hub { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(var(--safe-t) + 20px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 20px) calc(var(--safe-l) + 16px); }
.hub-head { display: grid; gap: 6px; justify-items: center; text-align: center; }
.hub-title { margin: 0; font: 400 clamp(32px, 9vw, 54px)/1 var(--font); color: #fff; letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(59,50,136,0.55), 0 2px 14px rgba(59,50,136,0.55), 0 0 22px rgba(255,240,255,0.35); }
.hub-by { margin: 0; display: inline-flex; align-items: center; gap: 7px; font: 400 14px/1 var(--font); color: var(--ink); }
.hub-by img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fff; object-fit: cover; }
.hub-choose { margin: 4px 0 0; font: 400 15px/1 var(--font); letter-spacing: 0.06em; color: var(--ink-soft); }

.cards { width: 100%; max-width: 440px; display: grid; gap: 12px; }
.card { display: grid; grid-template-columns: 47% 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 18px;
  border: 1px solid var(--line); color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.26));
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(50,40,120,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s; }
.card.is-new { border-color: #ffe59a;
  box-shadow: 0 0 0 2px #ffe59a, 0 0 20px rgba(255,218,122,0.42), inset 0 1px 0 #fff, 0 10px 30px rgba(50,40,120,0.25); }
.card-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-deep);
  border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 4px 14px rgba(40,30,110,0.3); }
.card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.card-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 38%); }
.card:hover .card-img img { transform: scale(1.03); }
.card-body { display: grid; gap: 4px; align-content: center; min-width: 0; }
.new-badge { justify-self: start; padding: 4px 8px; border-radius: 999px; font: 400 10px/1 var(--font); letter-spacing: 0.09em;
  color: #fff; background: var(--violet-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.card.is-new .new-badge { color: var(--violet-dark); background: linear-gradient(180deg, #fff2c6, #ffe092); }
.card-title { margin: 0; font: 400 18px/1.15 var(--font); color: var(--violet-dark); }
.card-tag { margin: 0; font: 400 13px/1.3 var(--font); color: var(--ink-soft); }
.card .btn-play { margin: 8px 0 0; max-width: none; min-height: 48px; display: grid; place-items: center; text-decoration: none; font-size: 20px; }
.card .btn-play.going { filter: brightness(1.15); transform: scale(0.98); }
.card.off { opacity: 0.62; }
.card.off .card-img img { filter: grayscale(0.6); }
.soon { margin: 8px 0 0; justify-self: start; padding: 8px 12px; border-radius: 999px; font: 400 13px/1 var(--font); color: var(--ink-soft);
  background: rgba(255,255,255,0.45); border: 1px dashed rgba(74,69,146,0.45); }

/* the "??? POV" announcement: darker glass, a soft pulse on the picture, no PLAY */
.card.teaser { background: linear-gradient(180deg, rgba(60,50,130,0.55), rgba(30,24,72,0.55)); border-color: rgba(216,197,243,0.7); color: #fff; }
.card.teaser .card-title { color: #fff; letter-spacing: 0.04em; }
.card.teaser .card-tag { color: rgba(255,255,255,0.82); font-style: italic; }
.card.teaser .card-img { border-color: rgba(216,197,243,0.8); }
.card.teaser .card-img img { animation: tease 3.2s ease-in-out infinite; }
@keyframes tease { 50% { filter: brightness(1.25) saturate(1.2); } }
.soon-badge { margin: 0 0 2px; justify-self: start; padding: 5px 9px; border-radius: 999px; font: 400 11px/1 var(--font); letter-spacing: 0.1em;
  color: var(--violet-dark); background: linear-gradient(180deg, #fff, var(--bg-light)); box-shadow: 0 0 12px rgba(216,197,243,0.7); }
/* The disclosure belongs to the Fisherman card; PLAY stays the primary action. */
.card.skin-open { position: relative; z-index: 2; }
.fisherman-skin { position: relative; width: 100%; min-width: 0; margin-top: 14px; }
.skin-toggle { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  min-height: 44px; padding: 6px; border: 1px solid rgba(255,255,255,0.9); border-radius: 999px;
  font: 400 12px/1.3 var(--font); color: var(--violet-dark); cursor: pointer; touch-action: manipulation;
  background: linear-gradient(180deg, #f1eaff 0%, #d0c4f0 48%, #b3a5df 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(59,50,136,0.16), 0 3px 12px rgba(59,50,136,0.2), 0 0 0 3px rgba(255,255,255,0.18);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.skin-toggle::after { content: ''; position: absolute; inset: 2px 10% 52% 10%; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0)); }
.skin-toggle:hover, .skin-toggle[aria-expanded="true"] { filter: brightness(1.05); }
.skin-toggle:active { transform: translateY(1px) scale(0.99); }
.skin-chevron { flex: none; }
#skin-current { white-space: nowrap; }
.skin-toggle[aria-expanded="true"] .skin-chevron { transform: rotate(180deg); }
.skin-options { position: absolute; z-index: 3; top: calc(100% + 5px); inset-inline: 0; padding: 6px;
  border: 1px solid var(--line); border-radius: 13px; background: #e4ddf6;
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(50,40,120,0.28); }
.skin-buttons { display: grid; gap: 4px; }
.skin-buttons button { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%;
  min-height: 44px; padding: 6px 10px; border-radius: 8px; border: 1px solid transparent;
  font: 400 13px/1.3 var(--font); color: var(--violet-dark); background: transparent; cursor: pointer; touch-action: manipulation; }
.skin-buttons button span { visibility: hidden; }
.skin-buttons button:hover { background: rgba(255,255,255,0.6); }
.skin-buttons button[aria-pressed="true"] { background: var(--violet-dark); color: #fff; }
.skin-buttons button[aria-pressed="true"] span { visibility: visible; }
.fisherman-skin button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.notify { margin: 8px 0 0; display: grid; place-items: center; min-height: 44px; border-radius: 999px; text-decoration: none; color: #fff;
  font: 400 16px/1 var(--font); border: 1px solid rgba(255,255,255,0.75); background: rgba(255,255,255,0.12); transition: transform 0.1s, background 0.15s; }
.notify:hover { background: rgba(255,255,255,0.22); }
.notify:active { transform: scale(0.97); }

/* wide screens: the cards side by side, picture on top */
@media (min-width: 640px) {
  .cards { max-width: 1640px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: 12px; }
  .card-body { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; }
  .card .btn-play { width: 100%; margin-top: auto; }
  .fisherman-skin { margin-bottom: 8px; }
  .soon, .soon-badge, .new-badge { justify-self: center; }
}
@media (min-width: 640px) and (max-width: 1099px) and (min-height: 541px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones held sideways: a compact single row */
@media (max-width: 360px) { .skin-toggle { font-size: 11px; padding-inline: 3px; gap: 3px; } }
@media (orientation: landscape) and (max-height: 540px) {
  .hub { gap: 10px; padding-top: calc(var(--safe-t) + 12px); padding-bottom: calc(var(--safe-b) + 12px); }
  .hub-title { font-size: 30px; }
  .hub-choose { display: none; }
  .cards { max-width: 920px; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 8px; }
  .card { grid-template-columns: 42% 1fr; grid-template-rows: auto; align-items: center; gap: 8px; padding: 7px; }
  .card-body { display: grid; height: auto; text-align: left; justify-items: stretch; }
  .card-title { font-size: 15px; }
  .card-tag { display: none; }
  .card .btn-play { font-size: 18px; margin-top: 4px; }
  .soon-badge { font-size: 9px; padding: 4px 7px; }
  .new-badge { justify-self: start; font-size: 9px; padding: 3px 7px; }
  .skin-toggle { font-size: 11px; padding-inline: 4px; gap: 3px; }
  #skin-current { white-space: normal; }
  .fisherman-skin { margin-bottom: 0; }
  .notify { font-size: 14px; margin-top: 4px; }
}
/* Leave room for both neighbours; touch panning also keeps short pages scrollable. */
@media (max-width: 639px), (orientation: landscape) and (max-height: 540px) and (max-width: 960px) {
  .cards { min-width: 0; max-width: 100%; grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: min(360px, calc(100% - 56px)); overflow-x: auto; padding: 6px 4px 14px;
    touch-action: pan-x pan-y pinch-zoom; overscroll-behavior-x: contain;
    overflow-anchor: none; scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card { min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
    align-items: start; padding: 12px; gap: 12px; }
  .card-body { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; gap: 6px; }
  .card-title { font-size: 20px; }
  .card-tag { display: block; font-size: 14px; }
  .card .btn-play { width: 100%; min-height: 52px; margin-top: auto; font-size: 22px; }
  .fisherman-skin { margin-bottom: 8px; }
  /* An overflow scroller clips popovers: expand this small picker inside its card. */
  .skin-options { position: static; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-img img, .card { transition: none; }
  .card.teaser .card-img img { animation: none; }
}