/* Responsive sizing tokens */
:root{
  --seat: clamp(12px, 1.8vw, 22px);   /* dot size (desktop default) */
  --letter-size: 14px;                /* letter size */
  --gap-seat: clamp(4px, 0.6vw, 8px);
  --gap-section: clamp(20px, 4vw, 60px);
  --text: #fff;
  --dot: #e0e0e0;   /* light grey dot */
}

* { box-sizing: border-box; }

body{
  font-family: "Segoe UI", Arial, sans-serif;
  background:#1f1f1f;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px;
  color:var(--text);
}

h2{
  font-size:clamp(16px, 3vw, 32px);
  letter-spacing:1.6px;
  margin: 0 0 20px;
}

/* --- Mobile Tabs --- */
.tabs {
  display: none; /* hidden on desktop */
  margin-bottom: 15px;
  width: 100%;
  max-width: 400px;
  justify-content: space-around;
  gap: 6px;
}
.tab {
  flex: 1;
  padding: 10px 14px;
  border: none;
  background: #ddd;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}
.tab.is-active {
  background: #e62228;
  color: #fff;
}

/* Chart layout */
.chart{
  display:grid;
  grid-template-columns:auto auto auto;
  gap:var(--gap-section);
  justify-content:center;
  align-items:end;
}

/* Each section stacks rows bottom->top (row 1 at bottom) */
.section{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
}

/* Section title */
.section-label{
  margin-top:10px;
  font-weight:600;
  color:#fff;
  font-size:clamp(12px, 1.2vw, 16px);
}

/* A single row of seats */
.row{
  display:inline-flex;
  gap:var(--gap-seat);
  margin:2px 0;
  white-space:nowrap;
}

/* Base seat = light grey dot */
.seat {
  width: var(--seat);
  height: var(--seat);
  border-radius: 999px;
  background: var(--dot);
  display: grid;
  place-items: center;
  position: relative;
  user-select: none;
  font: 700 0/1 "Segoe UI", Arial, sans-serif;
  color: var(--text);
}

/* Text layer always centered */
.seat::after {
  content: attr(data-label);
  font-size: var(--letter-size);
  line-height: 1;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  width: 100%;
}

/* Seats with letters or special icons: keep only the label, no grey dot */
.seat[data-label="U"],
.seat[data-label="H"],
.seat[data-label="♿"] {
  background: #1f1f1f; /* same as body bg */
}

/* Invisible spacer seat that still occupies space */
.seat.spacer {
  background: transparent;
  pointer-events: none;
}
.seat.spacer::after { content: ""; }

/* Optional interactive affordance */
.seat[data-action]{
  cursor:pointer;
}
.seat[data-action]:hover{
  outline:2px solid #4a90e2;
  outline-offset:2px;
}

/* Stage pill */
.stage{
  margin-top:clamp(16px, 3vw, 32px);
  background:#8c181b;
  color:#fff;
  font-weight:800;
  font-size:clamp(16px, 2.2vw, 28px);
  padding:12px 40px;
  border-radius:8px;
  text-align:center;
  transition: all 0.3s ease;
  align-self: center; /* default (centered) */
}

/* Stage pill alignment based on body class */
body.stage-left  .stage { align-self: flex-start; }
body.stage-center .stage { align-self: center; }
body.stage-right .stage { align-self: flex-end; }

/* --- Back to Home Button (desktop: in-flow; mobile: floating) --- */
.back-home{
  /* shared look */
  background: #e62228;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 999px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: background .2s ease, transform .2s ease;
  outline: none;

  /* desktop defaults (in normal flow, under stage) */
  position: static;          /* not fixed on desktop */
  display: inline-block;
  margin-top: 16px;          /* space under .stage */
  align-self: center;        /* centered under stage by default */
}

.back-home:hover,
.back-home:focus-visible{
  background:#4a90e2;
  transform: translateY(-2px);
}

/* Match stage alignment on desktop */
body.stage-left  .back-home { align-self: flex-start; }
body.stage-center .back-home { align-self: center; }
body.stage-right .back-home { align-self: flex-end; }

/* Position utilities (used when fixed on mobile) */
.back-home.pos-br{ right: var(--bh-offset-x, 12px); bottom: var(--bh-offset-y, 20px); }
.back-home.pos-bl{ left:  var(--bh-offset-x, 12px); bottom: var(--bh-offset-y, 20px); }
.back-home.pos-tr{ right: var(--bh-offset-x, 12px); top:    var(--bh-offset-y, 20px); }
.back-home.pos-tl{ left:  var(--bh-offset-x, 12px); top:    var(--bh-offset-y, 20px); }
.back-home.pos-bc{ left:50%; bottom: var(--bh-offset-y, 20px); transform: translateX(-50%); }
.back-home.pos-tc{ left:50%; top:    var(--bh-offset-y, 20px); transform: translateX(-50%); }

/* --- Mobile behavior --- */
@media (max-width: 768px){
  .tabs { display: flex; }              /* tabs visible */
  .chart { grid-template-columns: 1fr; }/* stack vertically */
  .section { display: none; }           /* all hidden by default */
  .section.is-active { display: flex; } /* only active section shows */

  /* make seats bigger for touch */
  :root{
    --seat: 18px;
    --letter-size: 13px;
    --gap-seat: 6px;
  }

  /* Back to Home: floating pill on mobile */
  .back-home{
    position: fixed;
    margin-top: 0;       /* not needed when floating */
    z-index: 1000;
  }
  /* default mobile position if no pos-* class is set */
  .back-home:not(.pos-br):not(.pos-bl):not(.pos-tr):not(.pos-tl):not(.pos-bc):not(.pos-tc){
    right: 12px;
    bottom: 20px;
  }
}