:root {
  --sm-seat-size: 16px;
  --sm-seat-gap: 12px;
  --sm-seat-bg: #28283a;
  --sm-panel-bg: #131410;
  --sm-panel-border: #28283a;
  --sm-stage-border: #763ee688;
  --sm-stage-text: #63cee9;
  --sm-stage-muted: #5a5a78;
  --sm-radius: 20px;
  --sm-transition: all 0.2s ease;
}


.matrix-stage {
  width: 500px;
  height: 40px;
  background: var(--sm-panel-bg);
  border: 1px solid var(--sm-panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sm-stage-muted);
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-bottom: 48px;
  border-radius: 8px;
}
.matrix-container {
  display: flex;
  gap: 40px;
  background: var(--sm-panel-bg);
  padding: 44px 52px;
  border-radius: var(--sm-radius);
  border: 1px solid var(--sm-panel-border);
}
.matrix-zone {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sm-seat-gap);
}


.arena-360 {
  position: relative;
  width: 600px;
  aspect-ratio: 1/1;
  background: var(--sm-panel-bg);
  border: 1px solid var(--sm-panel-border);
  border-radius: 50%;
}
.stage-360 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: var(--sm-panel-bg);
  border: 2px solid var(--sm-stage-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sm-stage-text);
  font-weight: 700;
  z-index: 10;
}


.room-rhombus {
  position: relative;
  width: 550px;
  aspect-ratio: 1/1;
  background: var(--sm-panel-bg);
  border: 1px solid var(--sm-panel-border);
  border-radius: 12px;
  overflow: hidden;
}
.stage-rhombus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: var(--sm-panel-bg);
  border: 2px solid var(--sm-stage-border);
  transform: translate(-50%, -50%) rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.stage-rhombus-text {
  transform: rotate(-45deg);
  color: var(--sm-stage-text);
  font-weight: 700;
  letter-spacing: 0.25em;
}
.rhombus-zone {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--sm-seat-gap);
  padding: 28px;
  z-index: 20;
}
.rhombus-row {
  display: flex;
  gap: var(--sm-seat-gap);
}
.rhombus-zone.top-left {
  top: 0;
  left: 0;
  align-items: flex-start;
}
.rhombus-zone.top-right {
  top: 0;
  right: 0;
  align-items: flex-end;
}
.rhombus-zone.bottom-left {
  bottom: 0;
  left: 0;
  align-items: flex-start;
}
.rhombus-zone.bottom-right {
  bottom: 0;
  right: 0;
  align-items: flex-end;
}


.seat {
  width: var(--sm-seat-size);
  height: var(--sm-seat-size);
  border-radius: 50%;
  background: var(--sm-seat-bg);
  transition: var(--sm-transition);
}


.seat-360 {
  position: absolute;
  transform: translate(-50%, -50%);
}