/*
  tabletop.me, phones only. Loaded last, with media="(max-width: 767px), (max-height: 500px) and (pointer: coarse)".
  Same look as the website (navy, lime, blue, Nunito, DM Mono, the deck cards). Only sizing, spacing, tap targets and
  touch behaviour follow the app's craft. Tablets and up never load this file.
*/

/* ------------------------------------------------------------------
   1. Foundations: scale, safe areas, touch
   ------------------------------------------------------------------ */
:root {
  --m-gut: 20px;
  --m-tap: 44px;
  --m-head: 64px;
  --m-top: env(safe-area-inset-top, 0px);
  --m-bottom: env(safe-area-inset-bottom, 0px);
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--m-head) + var(--m-top) + 8px);
}
body {
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
  /* room for the sticky ticket bar so the footer is never hidden behind it */
  padding-bottom: calc(68px + var(--m-bottom));
}
a,
button,
summary,
[role="tab"],
label {
  touch-action: manipulation;
}
input,
select,
textarea {
  font-size: 16px; /* iOS zooms into smaller fields */
}
button:active,
.button:active,
a.text-link:active,
.card-cover:active {
  transform: scale(0.97);
  transition-duration: 0.12s;
}
.wrap {
  width: calc(100% - var(--m-gut) * 2);
}
.section {
  padding-block: 44px;
}
dialog {
  overscroll-behavior: contain;
}
@media (max-width: 359px) {
  :root {
    --m-gut: 16px;
  }
}

/* Type scale: same faces and weights as the site, sized for a thumb and a small screen */
h1 {
  font-size: clamp(44px, 12.6vw, 52px);
  line-height: 0.98;
}
h2 {
  font-size: clamp(27px, 7.8vw, 31px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}
h3 {
  font-size: 20px;
}
p,
li {
  font-size: 15px;
  line-height: 1.6;
}
.lede,
.section-lede,
.hero-sub {
  font-size: 16px;
  line-height: 1.55;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
}
.section-heading {
  margin-bottom: 22px;
  gap: 14px;
}
small,
.small {
  font-size: 12px;
}
.button {
  min-height: 48px;
  font-size: 15px;
}
.button-small {
  min-height: var(--m-tap);
  font-size: 14px;
}
.text-link {
  min-height: var(--m-tap);
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

/* ------------------------------------------------------------------
   2. Header and menu (the site's own, sized for phones)
   ------------------------------------------------------------------ */
.header {
  height: calc(var(--m-head) + var(--m-top));
  padding-top: var(--m-top);
}
.header.is-scrolled {
  height: calc(var(--m-head) + var(--m-top));
}
.header-inner {
  gap: 10px;
}
.header .brand {
  display: flex;
  min-height: var(--m-tap);
  align-items: center;
}
.header .brand .brand-logo,
.header.is-scrolled .brand .brand-logo {
  height: 36px;
  width: auto;
}
.header .button-small {
  display: inline-flex;
  margin-left: auto;
  min-height: var(--m-tap);
  padding: 0 16px;
  font-size: 14px;
}
.menu-button {
  display: inline-grid;
  place-items: center;
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}
@media (max-width: 359px) {
  .header .button-small {
    padding: 0 12px;
    font-size: 13px;
  }
  .menu-button {
    padding: 0 10px;
  }
}
/* Full-height menu panel under the header */
.header nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  height: calc(100dvh - var(--m-head) - var(--m-top));
  margin: 0;
  padding: 8px var(--m-gut) calc(28px + var(--m-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  gap: 0;
  border-bottom: 0;
  background: #080c24fa;
  backdrop-filter: blur(18px);
}
.header nav.open {
  display: flex;
}
.header nav > a {
  display: flex;
  min-height: 58px;
  align-items: center;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.header nav > a:active {
  background: #ffffff10;
}
.nav-more {
  display: grid;
  gap: 0;
  margin-top: 22px;
}
.nav-more > span {
  margin-bottom: 6px;
  color: var(--muted);
  font: 12px var(--mono);
  letter-spacing: 0.08em;
}
.nav-more a,
.nav-more button {
  display: flex;
  min-height: var(--m-tap);
  align-items: center;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #c6cfdf;
  font: 600 15px Nunito, sans-serif;
  text-align: left;
}
html.menu-open {
  overflow: hidden;
}

/* Sticky ticket bar: slimmer, safe-area aware */
.mobile-ticket {
  padding: 8px var(--m-gut) calc(8px + var(--m-bottom));
}
.mobile-ticket > span {
  font-size: 12px;
}
.mobile-ticket small {
  font-size: 12px;
  margin-top: 3px;
}
.mobile-ticket .button {
  min-height: var(--m-tap);
  padding-inline: 22px;
  font-size: 15px;
}

/* ------------------------------------------------------------------
   3. Motion on phones: lighter and never blank
   ------------------------------------------------------------------ */
.hero-orbit,
.hero-orbit * {
  display: none !important;
}
html.js-motion .reveal,
html.js-motion .kinetic,
html.js-motion [data-reveal] {
  transition-duration: 0.45s !important;
  transition-delay: 0s !important;
}

/* ------------------------------------------------------------------
   4. Hero: one screen of copy, then the video frame and a compact countdown
   ------------------------------------------------------------------ */
.hero-grid {
  min-height: 0;
  gap: 26px;
  padding-block: 26px 22px;
}
.hero .eyebrow {
  max-width: none;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
}
.hero h1 {
  font-size: clamp(46px, 13.4vw, 54px);
  line-height: 0.96;
}
.hero-sub {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
}
.hero-sub br {
  display: none;
}
.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0 18px;
}
.hero-meta > div,
.hero-meta > div + div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}
.hero-meta .svg-icon {
  width: 20px;
  height: 22px;
}
.hero-meta b {
  font-size: 14px;
  line-height: 1.25;
}
.hero-meta small {
  font-size: 12px;
  line-height: 1.35;
}
.hero-meta > div:first-child small {
  display: none; /* the date already says it; keeps the chip short */
}
.hero-actions {
  display: grid;
  gap: 4px;
}
.hero-actions .button {
  width: 100%;
}
.hero-actions .text-link {
  justify-content: center;
}
.hero-note {
  display: none;
}
.hero-video-wrap {
  max-width: none;
  margin: 0;
}
.video-shell {
  aspect-ratio: 5 / 4;
  max-height: 72svh;
  height: auto;
}
.video-shell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-footer {
  margin-top: 12px;
}
.video-caption p {
  font-size: 15px;
}
.hero-bottom {
  padding-block: 6px 26px;
}
.hero-bottom .countdown {
  display: grid;
  gap: 12px;
  width: 100%;
}
.countdown-title {
  padding-right: 52px;
  font-size: 18px;
}
.countdown-title small {
  font-size: 12px;
}
.motion-button {
  min-width: var(--m-tap);
  min-height: var(--m-tap);
}
html.js-motion:not(.motion-paused) .hero h1 .line {
  animation-duration: 0.5s;
  animation-delay: calc(0.07s * var(--i, 0));
}

/* ------------------------------------------------------------------
   5. Shared: swipeable rails with pips (the site's cards, one row you swipe)
   ------------------------------------------------------------------ */
.m-rail {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--m-gut) * -1);
  padding: 4px var(--m-gut) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--m-gut);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-rail::-webkit-scrollbar {
  display: none;
}
.m-rail > * {
  scroll-snap-align: start;
}
.m-pips {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}
.m-pips i {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #ffffff33;
  transition: width 0.25s, background 0.25s;
}
.m-pips i.on {
  width: 20px;
  background: var(--lime);
}

/* ------------------------------------------------------------------
   6. Intro: shorter copy, the five kinds-of-play photos as a swipeable hand
   ------------------------------------------------------------------ */
.intro {
  padding-top: 40px;
  padding-bottom: 36px;
}
.intro-stamp {
  display: none;
}
.intro > .eyebrow {
  margin-bottom: 14px;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  gap: 16px;
  padding-top: 0;
}
.intro-grid > h2,
.intro-grid > div:not(.play-hand),
.play-hand {
  grid-column: 1;
  grid-row: auto;
}
.intro-grid h2 {
  font-size: clamp(28px, 8.2vw, 33px);
}
.intro-grid p {
  font-size: 15px;
  line-height: 1.6;
}
.intro-grid p + p {
  display: none; /* the second paragraph is on the desktop site and in the programme */
}
.play-hand {
  position: static;
  display: flex;
  height: auto;
  gap: 12px;
  margin: 4px calc(var(--m-gut) * -1) 0;
  padding: 4px var(--m-gut) 12px;
  overflow-x: auto;
  translate: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--m-gut);
  scrollbar-width: none;
}
.play-hand::-webkit-scrollbar {
  display: none;
}
html.js-motion:not(.motion-paused) .play-hand:not(.has-entered) .play-card,
html.js-motion:not(.motion-paused) .play-hand.has-entered .play-card {
  opacity: 1;
  animation: none;
}
.play-card,
.play-card:hover {
  position: relative;
  left: auto;
  bottom: auto;
  flex: 0 0 min(56vw, 220px);
  width: auto;
  margin: 0;
  aspect-ratio: 3 / 4;
  transform: none;
  scroll-snap-align: start;
}
.play-card .card-tag {
  gap: 7px;
  font-size: 12px;
}
.play-card .card-tag b {
  max-width: 150px;
}
.intro-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding-top: 18px;
}
.intro-features > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.intro-features span:not(.svg-icon) {
  font-size: 13px;
  line-height: 1.3;
}

/* ------------------------------------------------------------------
   7. What's your kind of play?: one scrolling chip row, compact photo card
   ------------------------------------------------------------------ */
.experience.section {
  padding-block: 36px 40px;
}
.tabs {
  gap: 8px;
  margin: 0 calc(var(--m-gut) * -1) 16px;
  padding: 2px var(--m-gut) 6px;
  border-bottom: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--m-gut);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
/* the site's own icon tiles, made compact and swipeable */
.tabs button {
  flex: 0 0 100px;
  gap: 8px;
  padding: 12px 6px 11px;
  border-radius: 16px;
  font-size: 13px;
  scroll-snap-align: start;
}
.tabs button > span[aria-hidden] {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.tabs button .svg-icon,
#experience-tabs [role="tab"] .svg-icon {
  width: 26px;
  height: 26px;
}
.tabs button[aria-selected="true"] {
  border-radius: 16px;
}
.experience-panel {
  grid-template-columns: 1fr;
  gap: 16px;
  min-height: 0;
}
.experience-media {
  min-height: 0;
  aspect-ratio: 16 / 10;
}
.experience-number {
  top: 16px;
  left: 16px;
  padding: 8px 11px;
  font-size: 12px;
}
.experience-copy {
  padding: 2px 2px 0;
}
.experience-copy h3 {
  margin: 12px 0 10px;
  font-size: clamp(27px, 8vw, 32px);
}
.experience-copy p {
  font-size: 15px;
  line-height: 1.6;
}
.tag-list {
  gap: 7px;
  margin: 16px 0 6px;
}
.tag-list span {
  padding: 6px 10px;
  font-size: 12px;
}
.experience-copy .text-link {
  font-size: 15px;
}
.games-library-note {
  margin-top: 8px;
  font-size: 13px;
}

/* ------------------------------------------------------------------
   8. Make a weekend of it: the three cards become a rail
   ------------------------------------------------------------------ */
#highlights {
  padding-block: 36px 40px;
}
.highlight-grid {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--m-gut) * -1);
  padding: 4px var(--m-gut) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--m-gut);
  scrollbar-width: none;
  align-items: stretch;
}
.highlight-grid::-webkit-scrollbar {
  display: none;
}
.highlight-card {
  flex: 0 0 min(84vw, 330px);
  scroll-snap-align: start;
}
.highlight-art {
  aspect-ratio: 4 / 3;
  height: auto;
}
.highlight-body {
  padding: 14px 16px 18px;
}
.highlight-body h3 {
  font-size: 21px;
}
.highlight-body p {
  font-size: 14px;
}

/* ------------------------------------------------------------------
   9. Guests: compact rows (hex portrait, name, one line)
   ------------------------------------------------------------------ */
.guest-section {
  padding-block: 36px 32px;
}
.guest-grid {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--m-gut) * -1);
  padding: 4px var(--m-gut) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--m-gut);
  scrollbar-width: none;
}
.guest-grid::-webkit-scrollbar {
  display: none;
}
.guest-grid .guest-card {
  flex: 0 0 min(86vw, 330px);
  scroll-snap-align: start;
}
.guest-grid .guest-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.guest-grid .guest-image {
  flex: 0 0 92px;
  width: 92px;
  aspect-ratio: 1;
  align-self: center;
}
.guest-grid .guest-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: 6px;
  object-fit: contain;
}
.guest-grid .guest-card > div:last-child {
  flex: 1;
  min-width: 0;
  padding: 4px 8px 4px 0;
}
.guest-grid .guest-card h3 {
  margin: 0 0 4px;
  font-size: 19px;
}
.guest-grid .guest-card p {
  font-size: 14px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------
   10. Find your kind of play: compact lime card
   ------------------------------------------------------------------ */
.finder {
  flex-wrap: wrap;
  gap: 14px;
  margin-block: 8px 16px;
  padding: 24px 20px 20px;
  box-shadow: 0 6px 0 #335707;
}
.finder-symbol {
  display: none;
}
.finder > div:not(.finder-symbol) {
  flex: 1 1 100%;
}
.finder h2 {
  margin: 8px 0;
  font-size: clamp(27px, 8vw, 31px);
}
.finder p:last-child {
  font-size: 15px;
}
.finder .dark-button {
  width: 100%;
  margin: 0;
  font-size: 15px;
  padding: 0 20px;
}
.roll-button {
  width: 100%;
  min-width: 0;
  min-height: var(--m-tap);
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid #10251935;
  border-left: 0;
  font-size: 14px;
}
.roll-button .svg-icon {
  width: 26px;
  height: 28px;
}

/* ------------------------------------------------------------------
   11. Programme preview: the next sessions and two tournaments
   ------------------------------------------------------------------ */
#programme {
  padding-block: 36px 32px;
}
.programme-day-tabs {
  gap: 8px;
  margin-bottom: 16px;
}
.programme-day-tabs button {
  min-height: var(--m-tap);
}
.programme-preview .tt-list > .tt-slot:nth-child(n + 4) {
  display: none; /* three sessions are enough for a preview */
}
.programme-preview .tt-zone .tt-tourney:nth-of-type(n + 3) {
  display: none; /* the full list is one tap away on the programme page */
}
.programme-preview .tt-slot,
.programme-preview .tt-tourney,
.programme-preview .tt-zone-more {
  min-height: var(--m-tap);
}
.programme-note {
  margin-top: 14px;
  font-size: 13px;
}

/* ------------------------------------------------------------------
   12. Companion app: no phone mock-up on phones, a compact starfield card
   ------------------------------------------------------------------ */
.companion-section {
  padding-block: 56px;
}
.companion-stage {
  display: none;
}
.companion-inner {
  grid-template-columns: 1fr;
  gap: 0;
}
.companion-copy h2 {
  font-size: clamp(30px, 8.6vw, 36px);
}
.companion-copy > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.55;
}
.companion-copy .companion-features {
  gap: 10px;
  margin: 22px 0 26px;
}
.companion-copy .companion-features span {
  min-height: 42px;
  padding-left: 54px;
  font-size: 16px;
}
.companion-copy .companion-features span::before {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.companion-copy .companion-features span::after {
  left: 9px;
  width: 22px;
  height: 22px;
}
.companion-copy .button {
  width: 100%;
}

/* ------------------------------------------------------------------
   13. Exhibitors preview: one scrolling chip row, featured cards as a rail
   ------------------------------------------------------------------ */
#exhibitors {
  padding-block: 36px 32px;
}
.homepage-directory-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 calc(var(--m-gut) * -1) 16px;
  padding: 2px var(--m-gut) 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.homepage-directory-links::-webkit-scrollbar {
  display: none;
}
.homepage-directory-links a {
  display: inline-flex;
  flex: none;
  min-height: var(--m-tap);
  align-items: center;
}
#featured-exhibitors {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--m-gut) * -1);
  padding: 4px var(--m-gut) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--m-gut);
  scrollbar-width: none;
  align-items: flex-start;
}
#featured-exhibitors::-webkit-scrollbar {
  display: none;
}
#featured-exhibitors > .app-card {
  flex: 0 0 min(84vw, 330px);
  scroll-snap-align: start;
}
#featured-exhibitors > .app-card.expanded {
  flex-basis: calc(100vw - var(--m-gut) * 2);
}

/* ------------------------------------------------------------------
   14. Visit: day picker, full-width actions, a taller map
   ------------------------------------------------------------------ */
.visit.section {
  padding-block: 40px;
}
.visit-grid {
  grid-template-columns: 1fr;
  gap: 24px;
}
.visit-grid > div:first-child h2 {
  margin-bottom: 8px;
}
.day-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.day-selector button {
  min-width: 0;
  min-height: 72px;
  padding: 10px 8px;
}
.day-selector b {
  font-size: 28px;
}
.day-info {
  margin: 18px 0 14px;
  font-size: 15px;
}
.visit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.visit-actions .text-link,
.visit-actions button {
  justify-content: center;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff08;
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
}
.visit .small {
  font-size: 13px;
}
.venue-art {
  padding: 12px;
  transform: none;
  margin-inline: 0;
  border-radius: var(--deck-r, 20px);
}
.venue-map-wrap {
  height: 300px;
}
.map-status {
  top: auto;
  right: 12px;
  bottom: 34px;
  left: 12px;
  font-size: 13px;
}
.map-actions {
  top: 10px;
  left: 10px;
}
.map-actions button {
  min-height: var(--m-tap);
  padding: 0 14px;
  font-size: 13px;
}
.venue-card {
  padding-top: 6px;
}
.venue-card h3 {
  font-size: 26px;
}
.venue-card > p {
  font-size: 14px;
}
.venue-travel {
  margin: 18px 0;
  padding-top: 18px;
}
.venue-travel p {
  font-size: 14px;
  line-height: 1.55;
}
.venue-travel b {
  font-size: 15px;
}
.venue-card .button {
  width: 100%;
}

/* ------------------------------------------------------------------
   15. FAQ, closing section, footer
   ------------------------------------------------------------------ */
.faq-section {
  grid-template-columns: 1fr;
  gap: 18px;
  padding-block: 36px;
}
.faq-section .eyebrow {
  margin-bottom: 14px;
}
.faq-section .text-link {
  margin-top: 8px;
}
.faqs summary {
  min-height: 60px;
  padding: 12px 0;
  font-size: 16px;
}
.faqs p {
  padding: 0 4px 18px 0;
  font-size: 15px;
  line-height: 1.6;
}
.final-cta {
  padding: 44px 0 52px;
}
.final-cta h2 {
  font-size: clamp(34px, 10.4vw, 44px);
}
.final-cta .button {
  width: 100%;
  margin-top: 24px;
}
.footer {
  padding-block: 34px 22px;
}
.footer-top {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.footer-top p {
  flex-basis: auto;
  margin: 4px 0 10px;
  font-size: 14px;
}
.footer-top > a:not(.brand),
.footer-bottom a {
  display: inline-flex;
  min-height: var(--m-tap);
  align-items: center;
  font-size: 15px;
}
.footer-bottom {
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  font-size: 12px;
}
.nav-more button::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  margin-right: 12px;
  background: var(--sky, #8edcff);
  -webkit-mask: url("../svg/pause.svg") center / contain no-repeat;
  mask: url("../svg/pause.svg") center / contain no-repeat;
}

/* ------------------------------------------------------------------
   16. Sub-page intro (programme, exhibitors, privacy): short, the wave stays behind
   ------------------------------------------------------------------ */
.directory-intro,
.directory-intro[data-hero] {
  min-height: 0;
  padding: 18px 0 14px;
}
.directory-intro h1 {
  margin: 12px 0 10px;
  font-size: clamp(40px, 11.6vw, 46px);
  line-height: 1;
}
.directory-intro p {
  max-width: none;
  font-size: 15px;
  line-height: 1.55;
}

/* ------------------------------------------------------------------
   17. Programme page: sticky controls, tidy rows with thumbnails
   ------------------------------------------------------------------ */
.programme-directory {
  padding-block: 4px 36px;
}
.programme-controls {
  position: sticky;
  top: calc(var(--m-head) + var(--m-top));
  z-index: 12;
  display: grid;
  gap: 8px;
  margin: 0 calc(var(--m-gut) * -1) 12px;
  padding: 10px var(--m-gut) 8px;
  border-bottom: 1px solid var(--line);
  background: #080c24f2;
  backdrop-filter: blur(14px);
}
.programme-controls .programme-day-tabs {
  margin: 0;
}
.programme-controls .filter-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 calc(var(--m-gut) * -1);
  padding: 0 var(--m-gut) 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.programme-controls .filter-chips::-webkit-scrollbar {
  display: none;
}
.filter-chips button {
  flex: none;
  min-height: var(--m-tap);
  padding-inline: 14px;
  font-size: 14px;
}
.programme-note {
  margin: 10px 0 6px;
  font-size: 13px;
  line-height: 1.5;
}
#programme-results {
  font-size: 13px;
}
.tt-list .tt-block,
.tt-pending .tt-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  column-gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 10px 12px;
}
.tt-block > :not(.tt-thumb) {
  grid-column: 1;
}
.tt-block .tt-thumb {
  display: block;
  grid-column: 2;
  grid-row: 1 / span 3;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}
.tt-tourney {
  min-height: var(--m-tap);
}
.tt-tourney .tt-thumb {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 10px;
  object-fit: cover;
}
.tt-slot {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
}
.tt-slot-time {
  font-size: 13px;
}

/* ------------------------------------------------------------------
   18. Session, tournament and exhibitor sheets: bottom sheets with a grab handle
   ------------------------------------------------------------------ */
dialog.card-sheet {
  width: 100vw;
  max-width: 100vw;
  margin: auto 0 0;
  touch-action: pan-y;
}
dialog.card-sheet::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: 8px;
  left: 50%;
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: #ffffff55;
  transform: translateX(-50%);
  pointer-events: none;
}
.sheet-body {
  max-height: min(92dvh, calc(100dvh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px 24px 0 0;
}
.card-sheet .app-card {
  border-radius: 24px 24px 0 0;
  padding-bottom: var(--m-bottom);
}
/* close button on phones: the app's top-right, a proper 44 px target */
.sheet-close {
  top: 14px;
  right: 14px;
  bottom: auto;
  width: var(--m-tap);
  height: var(--m-tap);
}
.card-sheet .card-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  margin: 12px -2px 0;
  padding: 12px 2px calc(12px + var(--m-bottom));
  background: linear-gradient(180deg, #0a102900, #0a1029 22%);
}
.card-sheet .card-actions .card-action {
  margin-top: 0;
}
.tt-list .tt-block .tt-time,
.tt-pending .tt-block .tt-time {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 12px;
}

/* ------------------------------------------------------------------
   19. Cards on phones: the site's deck card, thumb-sized controls
   ------------------------------------------------------------------ */
.app-card .card-copy {
  padding-right: 58px;
}
.app-card .card-toggle {
  right: 8px;
  width: var(--m-tap);
  height: var(--m-tap);
}
.card-details-inner {
  font-size: 15px;
}
/* Directory (A to Z): compact rows, the same deck card as a thumbnail, name, one line and a toggle */
#directory-grid .app-card:not(.expanded) .card-cover {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 58px 6px 6px;
}
#directory-grid .app-card:not(.expanded) .card-art {
  width: 76px;
  height: 76px;
  aspect-ratio: 1;
  border-radius: 14px;
}
#directory-grid .app-card:not(.expanded) .card-tag {
  top: 5px;
  left: 5px;
  min-width: 24px;
  min-height: 24px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border-radius: 7px;
  font-size: 0;
}
#directory-grid .app-card:not(.expanded) .card-tag .svg-icon {
  width: 14px;
  height: 14px;
}
#directory-grid .app-card:not(.expanded) .card-logo,
#directory-grid .app-card:not(.expanded) .card-flag {
  display: none;
}
#directory-grid .app-card:not(.expanded) .card-copy {
  min-height: 0;
  padding: 0;
}
#directory-grid .app-card:not(.expanded) .card-copy strong {
  font-size: 18px;
}
#directory-grid .app-card:not(.expanded) .card-copy small {
  margin-top: 3px;
  font-size: 13px;
  -webkit-line-clamp: 1;
}
#directory-grid .app-card:not(.expanded) .card-toggle {
  top: 50%;
  bottom: auto;
  right: 8px;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------------
   20. Exhibitors page: sticky search and chips, A to Z with a letter index
   ------------------------------------------------------------------ */
.demo-note {
  margin: 0 0 12px;
  font-size: 13px;
}
.directory-controls {
  position: sticky;
  top: calc(var(--m-head) + var(--m-top));
  z-index: 12;
  display: grid;
  gap: 8px;
  margin: 0 calc(var(--m-gut) * -1) 10px;
  padding: 10px var(--m-gut) 8px;
  border-bottom: 1px solid var(--line);
  background: #080c24f2;
  backdrop-filter: blur(14px);
}
.directory-controls .search-field.halo-field,
.programme-controls .search-field.halo-field,
.search-field.halo-field {
  padding: 4px 14px;
  border-radius: 12px;
}
.search-field input {
  min-height: var(--m-tap);
}
.directory-controls .filter-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0 calc(var(--m-gut) * -1);
  padding: 0 var(--m-gut) 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.directory-controls .filter-chips::-webkit-scrollbar {
  display: none;
}
.directory-controls .filter-chips[hidden] {
  display: none;
}
.directory-results {
  min-height: var(--m-tap);
  align-items: center;
  font-size: 13px;
}
#clear-filters {
  min-height: var(--m-tap);
  padding-inline: 10px;
}
.exhibitor-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.m-letter {
  grid-column: 1 / -1;
  margin: 16px 0 0;
  scroll-margin-top: 210px;
  color: var(--lime);
  font: 800 14px var(--mono);
  letter-spacing: 0.1em;
}
.m-letter:first-child {
  margin-top: 4px;
}
.m-az {
  position: fixed;
  z-index: 15;
  top: 50%;
  right: 0;
  display: flex;
  width: 30px;
  flex-direction: column;
  padding: 6px 0;
  border-radius: 12px 0 0 12px;
  background: #080c24d9;
  transform: translateY(-46%);
  touch-action: none;
}
.m-az[hidden] {
  display: none;
}
.m-az button {
  flex: none;
  height: 17px;
  padding: 0;
  border: 0;
  background: none;
  color: #a9bad3;
  font: 700 12px/17px var(--mono);
  text-align: center;
}
.m-az button.on {
  color: var(--lime);
}
html.sheet-open .m-az,
html.menu-open .m-az {
  display: none;
}
/* Keep the cards clear of the letter strip while it shows. */
html.has-az #directory-grid {
  margin-right: 18px;
}

/* ------------------------------------------------------------------
   21. Reading text never under 14 px (labels and tags stay at 12 px, DM Mono as on the site)
   ------------------------------------------------------------------ */
.intro-features span:not(.svg-icon),
.games-library-note,
.programme-note,
.tt-zone-note,
.visit .small,
.final-cta p:last-child,
.app-card .card-copy small,
.tt-tourney small,
.tt-block small,
.demo-note,
.directory-results,
.map-status {
  font-size: 14px;
}
.tabs button,
.homepage-directory-links a,
.filter-chips button,
.map-actions button {
  font-size: 14px;
}
.footer-bottom,
.footer-bottom span {
  font-size: 12px;
}