@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* 1. Variables */
:root {
  --arena-black: #0D0F12;
  --tunnel-graphite: #171B20;
  --corner-charcoal: #242A30;
  --concrete-slate: #343C43;
  --corner-red: #C94343;
  --ringside-blue: #3D6F9E;
  --scoreboard-amber: #D99A3D;
  --tape-mint: #7FA694;
  --canvas-bone: #D8D0C0;
  --wrap-beige: #B9AC96;
  
  --text-light: #F3F0E9;
  --text-light-sec: #C4C6C5;
  --text-dark: #15181B;
  --text-muted: #838A90;
  
  --border-dark: #394149;
  --border-light: #9C927F;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-meta: 'Space Mono', monospace;

  --container-max: 1480px;
  --trans-fast: 0.28s ease;
}

/* 2. Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  background-color: var(--arena-black);
  color: var(--text-light);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a {
  text-decoration: none;
  color: inherit;
  transition: color var(--trans-fast);
}
button, input, textarea {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
ul {
  list-style: none;
}

/* 3. Typography */
h1, h2, h3, h4, h5, h6, .display-text {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.1;
  font-weight: 700;
}
.meta-text {
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
}

/* 4. Global Layout */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
}
section {
  position: relative;
}
.text-link {
  font-family: var(--font-meta);
  color: var(--corner-red);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.text-link:hover {
  color: var(--text-light);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--corner-red);
  color: var(--text-light);
  font-family: var(--font-display);
  text-transform: uppercase;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color var(--trans-fast), transform var(--trans-fast);
}
.btn-primary:hover {
  background-color: var(--scoreboard-amber);
  color: var(--arena-black);
  transform: translateY(-2px);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  color: var(--text-light);
  font-family: var(--font-meta);
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color var(--trans-fast);
}
.btn-secondary:hover {
  background-color: var(--corner-charcoal);
}

/* 5. Broadcast Ticker */
.broadcast-ticker {
  background-color: var(--scoreboard-amber);
  color: var(--arena-black);
  height: 36px;
  display: flex;
  align-items: center;
}
.ticker-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-meta);
  font-size: 0.75rem;
  font-weight: 700;
}
.ticker-col {
  flex: 1;
  display: flex;
  align-items: center;
}
.ticker-col.center {
  justify-content: center;
  border-left: 1px solid var(--arena-black);
  border-right: 1px solid var(--arena-black);
}
.ticker-col.right {
  justify-content: flex-end;
}

/* 6. Arena Gate Header */
.arena-gate {
  border-bottom: 1px solid var(--border-dark);
  background-color: var(--arena-black);
  position: relative;
  z-index: 100;
}
.gate-desktop {
  display: flex;
  min-height: 120px;
}
.gate-left {
  width: 30%;
  padding: 1.5rem 0;
  border-right: 1px solid var(--concrete-slate);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.brand-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-light);
  line-height: 1;
}
.brand-sub {
  font-family: var(--font-meta);
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.5rem;
}
.gate-event {
  font-family: var(--font-meta);
  color: var(--scoreboard-amber);
  font-size: 0.875rem;
  margin-top: auto;
}
.gate-center {
  width: 46%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.5rem;
}
.gate-nav {
  display: flex;
  gap: 2rem;
}
.gate-nav a {
  font-family: var(--font-meta);
  color: var(--text-light-sec);
  font-size: 0.875rem;
  text-transform: uppercase;
  position: relative;
}
.gate-nav a:hover, .gate-nav a.active {
  color: var(--text-light);
}
.gate-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--corner-red);
}
.gate-right {
  width: 24%;
  padding: 1.5rem 0 1.5rem 2rem;
  border-left: 1px solid var(--concrete-slate);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.doors-status {
  font-family: var(--font-meta);
  color: var(--tape-mint);
  font-size: 0.75rem;
}
.mobile-header {
  display: none;
}

/* 7. Walkout Sequence */
.walkout-sequence {
  display: flex;
  height: 600px;
  border-bottom: 1px solid var(--border-dark);
}
.lane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-dark);
}
.lane:last-child {
  border-right: none;
}
.lane-1 {
  width: 6%;
  background-color: var(--corner-red);
  color: var(--text-light);
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
}
.vert-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-meta);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.lane-2 {
  width: 28%;
  background-color: var(--arena-black);
  padding: 3rem 2rem;
  display: flex;
  justify-content: center;
}
.hero-label {
  color: var(--scoreboard-amber);
  margin-bottom: 2rem;
}
.hero-hl {
  font-size: 4.5rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  word-wrap: break-word;
}
.hero-sub {
  font-family: var(--font-meta);
  color: var(--text-light-sec);
  font-size: 1rem;
}
.lane-3 {
  width: 38%;
  position: relative;
  overflow: hidden;
}
.lane-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lane-4 {
  width: 22%;
  background-color: var(--canvas-bone);
  color: var(--arena-black);
  padding: 3rem 2rem;
  display: flex;
  justify-content: flex-end;
}
.lane-4-content {
  margin-top: auto;
}
.lane-4 h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.lane-4 p {
  margin-bottom: 2rem;
  color: var(--concrete-slate);
}
.lane-4 .text-link {
  margin-top: 1.5rem;
  display: block;
}
.lane-5 {
  width: 6%;
  background-color: var(--ringside-blue);
  color: var(--text-light);
  justify-content: center;
  align-items: center;
}

/* 8. Round Card */
.round-card-section {
  padding: 6rem 0;
  background-color: var(--tunnel-graphite);
  border-bottom: 1px solid var(--border-dark);
}
.round-composition {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.round-center-num {
  font-family: var(--font-display);
  font-size: 16rem;
  color: var(--concrete-slate);
  line-height: 1;
  position: absolute;
  z-index: 1;
  opacity: 0.3;
}
.round-statements {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.stmt-box {
  position: absolute;
  width: 280px;
  padding: 1.5rem;
  background-color: var(--arena-black);
  border: 1px solid var(--border-dark);
}
.stmt-box::before {
  content: '';
  position: absolute;
  height: 1px;
  background-color: var(--border-dark);
  z-index: -1;
}
.stmt-1 { top: 0; left: 0; }
.stmt-1::before { width: 100px; right: -100px; top: 50%; }
.stmt-2 { top: 60%; left: 15%; }
.stmt-2::before { width: 1px; height: 100px; left: 50%; top: -100px; background-color: var(--border-dark); }
.stmt-3 { top: 10%; right: 10%; }
.stmt-4 { bottom: 0; right: 0; }
.stmt-meta {
  color: var(--tape-mint);
  margin-bottom: 0.5rem;
}
.stmt-title {
  font-size: 1.5rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}
.stmt-desc {
  font-size: 0.875rem;
  color: var(--text-light-sec);
}

/* 9. Box Slot Center Ring */
.center-ring-section {
  padding: 6rem 0;
  background-color: var(--arena-black);
}
.ring-container {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  padding-top: 2rem;
}
.score-block {
  position: absolute;
  top: -20px;
  padding: 1rem 1.5rem;
  font-family: var(--font-meta);
  text-transform: uppercase;
  z-index: 10;
}
.score-left {
  left: 20px;
  background-color: var(--corner-red);
  color: var(--canvas-bone);
}
.score-right {
  right: 20px;
  background-color: var(--ringside-blue);
  color: var(--canvas-bone);
  text-align: right;
}
.game-frame {
  width: 100%;
  aspect-ratio: 16/9;
  border: 2px solid var(--border-dark);
  background-color: var(--corner-charcoal);
  position: relative;
  z-index: 5;
}
.game-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.control-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 2px solid var(--border-dark);
}
.ctrl-text {
  font-family: var(--font-meta);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.ctrl-actions {
  display: flex;
  gap: 1rem;
}
.score-light {
  height: 4px;
  background-color: var(--scoreboard-amber);
  width: 100%;
  margin-top: 2px;
}

/* 10. Between The Ropes */
.between-ropes {
  padding: 4rem 0;
  background-color: var(--tunnel-graphite);
}
.ropes-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 80px);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.rb-a { grid-column: 1 / 5; grid-row: 1 / 5; position: relative; overflow: hidden; }
.rb-b { grid-column: 5 / 8; grid-row: 1 / 3; background-color: var(--canvas-bone); color: var(--arena-black); padding: 2rem; display: flex; align-items: center; }
.rb-c { grid-column: 8 / 11; grid-row: 1 / 3; background-color: var(--scoreboard-amber); color: var(--arena-black); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.rb-d { grid-column: 8 / 11; grid-row: 3 / 7; position: relative; overflow: hidden; }
.rb-e { grid-column: 5 / 8; grid-row: 3 / 5; background-color: var(--ringside-blue); color: var(--canvas-bone); padding: 2rem; }
.rb-f { grid-column: 4 / 8; grid-row: 5 / 7; background-color: var(--corner-charcoal); padding: 2rem; display: flex; flex-direction: column; justify-content: center; }

.ropes-grid img { width: 100%; height: 100%; object-fit: cover; }
.rb-b-quote { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.rb-c-num { font-family: var(--font-display); font-size: 5rem; line-height: 0.8; }
.rb-c-label { font-family: var(--font-meta); font-size: 0.75rem; margin-top: 0.5rem; font-weight: 700; }
.rb-e h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.rb-e p { font-size: 0.875rem; }
.rb-f h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--text-light); }
.rb-f p { font-size: 0.875rem; color: var(--text-light-sec); margin-bottom: 1rem; }

/* 11. Final Bell Code */
.final-bell-section {
  background-color: var(--arena-black);
  padding: 4rem 2rem;
}
.bell-container {
  max-width: 1000px;
  margin: 0 auto;
}
.bell-row {
  display: flex;
  align-items: center;
  padding: 2rem;
  border-bottom: 1px solid var(--border-dark);
}
.bell-row:first-child { border-top: 1px solid var(--border-dark); }
.bell-row.dark { background-color: var(--tunnel-graphite); }
.bell-row.light { background-color: var(--corner-charcoal); }
.bell-num { width: 15%; font-family: var(--font-display); font-size: 3rem; color: var(--scoreboard-amber); }
.bell-head { width: 35%; font-family: var(--font-display); font-size: 1.5rem; color: var(--text-light); }
.bell-desc { width: 50%; color: var(--text-light-sec); }

/* 12. Corner Desk */
.corner-desk-section {
  display: flex;
  border-top: 1px solid var(--border-dark);
  min-height: 600px;
}
.cd-red { width: 22%; background-color: var(--corner-red); padding: 4rem 2rem; color: var(--text-light); display: flex; flex-direction: column; justify-content: space-between; }
.cd-neutral { width: 56%; background-color: var(--canvas-bone); padding: 4rem; color: var(--arena-black); }
.cd-blue { width: 22%; background-color: var(--ringside-blue); padding: 4rem 2rem; color: var(--text-light); }
.cd-title { font-size: 3rem; margin-bottom: 2rem; word-wrap: break-word; }
.cd-email { font-family: var(--font-meta); font-size: 1rem; font-weight: 700; }
.cd-note { font-family: var(--font-meta); font-size: 0.75rem; opacity: 0.8; margin-top: 1rem; }

/* 13. Scoreboard Footer */
.scoreboard-footer {
  background-color: var(--tunnel-graphite);
  border-top: 4px solid var(--scoreboard-amber);
}
.ft-zone-1 { display: flex; border-bottom: 1px solid var(--border-dark); }
.ft-z1-left { width: 38%; padding: 3rem 2rem; border-right: 1px solid var(--border-dark); }
.ft-z1-center { width: 34%; padding: 3rem 2rem; border-right: 1px solid var(--border-dark); }
.ft-z1-right { width: 28%; padding: 3rem 2rem; display: flex; flex-direction: column; justify-content: space-between; }

.ft-nav-list li { margin-bottom: 1rem; }
.ft-nav-list a { font-family: var(--font-meta); font-size: 1rem; color: var(--text-light-sec); }
.ft-nav-list a:hover { color: var(--scoreboard-amber); }

.ft-zone-2 { background-color: var(--canvas-bone); padding: 1.5rem 2rem; color: var(--arena-black); font-family: var(--font-meta); font-weight: 700; text-align: center; }
.ft-zone-2 a { margin: 0 1rem; text-transform: uppercase; }
.ft-zone-2 a:hover { color: var(--corner-red); }

.ft-zone-3 { display: flex; }
.ft-z3-left { width: 62%; background-color: var(--corner-red); padding: 2rem; display: flex; gap: 2rem; flex-wrap: wrap; }
.ft-z3-left a { font-family: var(--font-meta); font-size: 0.875rem; color: var(--text-light); text-transform: uppercase; font-weight: 700; }
.ft-z3-right { width: 38%; background-color: var(--ringside-blue); padding: 2rem; color: var(--text-light); font-family: var(--font-meta); font-size: 0.75rem; text-align: right; line-height: 1.8; }

.ft-base { background-color: var(--arena-black); padding: 1.5rem 2rem; display: flex; justify-content: space-between; font-family: var(--font-meta); font-size: 0.75rem; color: var(--text-muted); }

/* 14. Cookie Credential */
.cookie-credential {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 390px;
  background-color: var(--canvas-bone);
  color: var(--arena-black);
  border-left: 8px solid var(--corner-red);
  padding: 1.5rem;
  z-index: 9999;
  display: none;
}
.cookie-credential.show { display: block; }
.ck-header { display: flex; justify-content: space-between; margin-bottom: 1rem; font-family: var(--font-meta); font-size: 0.75rem; font-weight: 700; }
.ck-serial { color: var(--ringside-blue); }
.ck-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }
.ck-text { font-size: 0.875rem; margin-bottom: 1.5rem; color: var(--concrete-slate); }
.ck-actions { display: flex; gap: 1rem; }
.btn-ck-acc { background-color: var(--arena-black); color: var(--text-light); padding: 0.5rem 1rem; font-family: var(--font-meta); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.btn-ck-rej { background-color: transparent; border: 1px solid var(--border-dark); color: var(--arena-black); padding: 0.5rem 1rem; font-family: var(--font-meta); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
.ck-hole { position: absolute; top: 1rem; right: 1rem; width: 12px; height: 12px; background-color: var(--arena-black); border-radius: 50%; }

/* 15. Forms */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-family: var(--font-meta); font-size: 0.75rem; font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; }
.form-control { width: 100%; border: 1px solid var(--border-dark); background-color: transparent; padding: 1rem; font-family: var(--font-body); font-size: 1rem; color: var(--arena-black); border-radius: 0; }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-control:focus { border-color: var(--corner-red); }

/* 16. Internal Broadcast Pages */
.internal-page { background-color: var(--arena-black); min-height: 100vh; padding-bottom: 4rem; }
.int-masthead { border-bottom: 1px solid var(--border-dark); padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.int-content-wrap { max-width: 800px; margin: 4rem auto 0; padding: 0 2rem; }
.int-round-num { font-family: var(--font-display); font-size: 6rem; color: var(--corner-red); line-height: 1; margin-bottom: 1rem; }
.int-title { font-size: 4rem; color: var(--text-light); margin-bottom: 3rem; }
.int-band { padding: 3rem; margin-bottom: 2rem; }
.int-band.bone { background-color: var(--canvas-bone); color: var(--arena-black); }
.int-band.graphite { background-color: var(--tunnel-graphite); color: var(--text-light); }
.int-band.blue { background-color: var(--ringside-blue); color: var(--text-light); }
.int-band h2 { font-size: 2rem; margin-bottom: 1rem; }
.int-band h3 { font-size: 1.25rem; margin-bottom: 0.5rem; margin-top: 1.5rem; font-family: var(--font-body); font-weight: 600; text-transform: none; }
.int-band p, .int-band ul { margin-bottom: 1rem; }
.int-band ul { list-style: square inside; }
.int-return { margin-top: 4rem; display: flex; justify-content: center; }

/* 17. Responsive Rules */
@media (max-width: 1024px) {
  .gate-desktop { display: none; }
  .mobile-header { display: block; position: relative; z-index: 200; background-color: var(--arena-black); border-bottom: 1px solid var(--border-dark); }
  .mh-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; }
  .mh-brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-light); }
  .mh-trigger { width: 40px; height: 40px; border: 1px solid var(--border-dark); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; }
  .mh-trigger span { width: 20px; height: 2px; background-color: var(--text-light); }
  .mh-status { background-color: var(--corner-charcoal); padding: 0.5rem 2rem; font-family: var(--font-meta); font-size: 0.75rem; color: var(--tape-mint); }
  .mobile-nav-menu { display: none; background-color: var(--tunnel-graphite); position: absolute; width: 100%; top: 100%; left: 0; }
  .mobile-nav-menu.open { display: block; }
  .mobile-nav-menu a { display: block; padding: 1rem 2rem; border-bottom: 1px solid var(--border-dark); font-family: var(--font-meta); text-transform: uppercase; font-size: 0.875rem; }

  .walkout-sequence { flex-direction: column; height: auto; }
  .lane { width: 100%; border-right: none; border-bottom: 1px solid var(--border-dark); }
  .lane-1 { flex-direction: row; padding: 1rem 2rem; }
  .vert-text { writing-mode: horizontal-tb; transform: none; }
  .lane-3 { height: 400px; }
  .lane-5 { padding: 1rem; flex-direction: row; gap: 2rem; }

  .round-composition { flex-direction: column; }
  .round-center-num { position: relative; font-size: 8rem; margin-bottom: 2rem; }
  .round-statements { display: flex; flex-direction: column; gap: 1rem; position: relative; }
  .stmt-box { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; }
  .stmt-box::before { display: none; }

  .ropes-grid { display: flex; flex-direction: column; }
  .rb-a { height: 300px; }
  .rb-d { height: 300px; }

  .bell-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .bell-num, .bell-head, .bell-desc { width: 100%; }

  .corner-desk-section { flex-direction: column; }
  .cd-red, .cd-neutral, .cd-blue { width: 100%; }

  .ft-zone-1 { flex-direction: column; }
  .ft-z1-left, .ft-z1-center, .ft-z1-right { width: 100%; border-right: none; border-bottom: 1px solid var(--border-dark); }
  .ft-zone-3 { flex-direction: column; }
  .ft-z3-left, .ft-z3-right { width: 100%; text-align: left; }
  .ft-base { flex-direction: column; gap: 1rem; text-align: center; }

  .cookie-credential { width: calc(100% - 4rem); bottom: 1rem; left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ENDFILE */

/* FILE: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dotti Scout IQ - The Midnight Fight Circuit</title>
    <meta name="description" content="Experience Box Slot in a premium, free-to-play boxing-inspired social casino environment.">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- Broadcast Ticker -->
    <div class="broadcast-ticker">
        <div class="container ticker-inner">
            <div class="ticker-col left">DSIQ / FIGHT CIRCUIT</div>
            <div class="ticker-col center">BOX SLOT / FREE-TO-PLAY SOCIAL CASINO</div>
            <div class="ticker-col right">18+ / NO REAL MONEY</div>
        </div>
    </div>

    <!-- Arena Gate Header (Desktop) -->
    <header class="arena-gate" id="gate">
        <div class="container gate-desktop">
            <div class="gate-left">
                <div>
                    <div class="brand-title">DOTTI<br>SCOUT IQ</div>
                    <div class="brand-sub">MIDNIGHT FIGHT CIRCUIT</div>
                </div>
                <div class="gate-event">EVENT / BX-01</div>
            </div>
            <div class="gate-center">
                <nav class="gate-nav">
                    <a href="#gate" class="active">Gate</a>
                    <a href="#walkout">Walkout</a>
                    <a href="#game">Box Slot</a>
                    <a href="#ringside">Ringside</a>
                    <a href="#corner-desk">Corner Desk</a>
                </nav>
            </div>
            <div class="gate-right">
                <div class="doors-status">DOORS / OPEN</div>
                <a href="#game" class="btn-primary">Enter The Ring</a>
            </div>
        </div>

        <!-- Mobile Header -->
        <div class="mobile-header">
            <div class="mh-top">
                <div class="mh-brand">DOTTI SCOUT IQ</div>
                <button class="mh-trigger" id="mobile-menu-btn" aria-label="Toggle Menu">
                    <span></span><span></span><span></span>
                </button>
            </div>
            <div class="mh-status">CURRENT / GATE</div>
            <nav class="mobile-nav-menu" id="mobile-nav">
                <a href="#gate">01. Gate</a>
                <a href="#walkout">02. Walkout</a>
                <a href="#game">03. Box Slot</a>
                <a href="#ringside">04. Ringside</a>
                <a href="#corner-desk">05. Corner Desk</a>
            </nav>
        </div>
    </header>

    <main>
        <!-- Walkout Sequence -->
        <section class="walkout-sequence" id="walkout">
            <div class="lane lane-1">
                <div class="meta-text">BOUT 01</div>
                <div class="vert-text">BOX SLOT</div>
                <div class="meta-text">18+</div>
            </div>
            <div class="lane lane-2">
                <div class="lane-2-content">
                    <div class="meta-text hero-label">THE WALKOUT / 00:00</div>
                    <h1 class="hero-hl">LIGHTS DOWN.<br>BELL READY.</h1>
                    <div class="hero-sub">STEP INTO BOX SLOT.</div>
                </div>
            </div>
            <div class="lane lane-3">
                <img src="assets/walkout-tunnel.jpg" alt="A cinematic professional boxing walkout tunnel leading toward an illuminated boxing ring" width="800" height="600">
            </div>
            <div class="lane lane-4">
                <div class="lane-4-content">
                    <h2>THE NIGHT STARTS BEFORE THE FIRST BELL</h2>
                    <p>Enter Box Slot through a premium boxing-inspired world of arena lights, ringside tension, focused preparation, and free-to-play entertainment.</p>
                    <a href="#game" class="btn-primary">Enter Box Slot</a>
                    <a href="fight-circuit.html" class="text-link">View Tonight’s Circuit &rarr;</a>
                </div>
            </div>
            <div class="lane lane-5">
                <div class="vert-text">ROUND 01 ACTIVE</div>
            </div>
        </section>

        <!-- Round Card -->
        <section class="round-card-section">
            <div class="container">
                <div class="round-composition">
                    <div class="round-center-num">04</div>
                    <div class="round-statements">
                        <div class="stmt-box stmt-1">
                            <div class="stmt-meta">ROUND 01</div>
                            <h3 class="stmt-title">FOCUS</h3>
                            <p class="stmt-desc">A visual system built around concentration, timing, and controlled energy.</p>
                        </div>
                        <div class="stmt-box stmt-2">
                            <div class="stmt-meta">ROUND 02</div>
                            <h3 class="stmt-title">MOVEMENT</h3>
                            <p class="stmt-desc">Responsive layouts shift cleanly across supported screen sizes.</p>
                        </div>
                        <div class="stmt-box stmt-3">
                            <div class="stmt-meta">ROUND 03</div>
                            <h3 class="stmt-title">RINGSIDE</h3>
                            <p class="stmt-desc">Editorial imagery creates the atmosphere of a premium fight night.</p>
                        </div>
                        <div class="stmt-box stmt-4">
                            <div class="stmt-meta">ROUND 04</div>
                            <h3 class="stmt-title">CENTER RING</h3>
                            <p class="stmt-desc">Box Slot remains the main interactive experience.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Box Slot Center Ring -->
        <section class="center-ring-section" id="game">
            <div class="container">
                <div class="ring-container">
                    <div class="score-block score-left">RED<br>CORNER<br><br>BOX SLOT</div>
                    <div class="score-block score-right">ROUND<br>ACTIVE<br><br>18+</div>
                    
                    <div class="game-frame" id="game-container">
                        <iframe src="game-box-slot/" allowfullscreen title="Box Slot Game"></iframe>
                    </div>
                    
                    <div class="control-line">
                        <div class="ctrl-text">BOUT / BX-01</div>
                        <div class="ctrl-actions">
                            <button class="btn-secondary" id="fs-btn">Fullscreen</button>
                            <a href="how-to-play.html" class="btn-secondary">How To Play</a>
                        </div>
                        <div class="ctrl-text">FREE-TO-PLAY / NO REAL MONEY</div>
                    </div>
                    <div class="score-light"></div>
                </div>
            </div>
        </section>

        <!-- Between The Ropes -->
        <section class="between-ropes" id="ringside">
            <div class="container">
                <div class="ropes-grid">
                    <div class="rb-a">
                        <img src="assets/wrap-room.jpg" alt="A premium professional boxing preparation room with hand wraps on a wooden bench" width="600" height="600">
                    </div>
                    <div class="rb-b">
                        <div class="rb-b-quote">THE QUIETEST<br>MINUTE IS OFTEN<br>BEFORE THE BELL.</div>
                    </div>
                    <div class="rb-c">
                        <div class="rb-c-num">06</div>
                        <div class="rb-c-label">RINGSIDE RECORDS</div>
                    </div>
                    <div class="rb-d">
                        <img src="assets/empty-ring.jpg" alt="A monumental empty professional boxing ring illuminated by overhead spotlights inside a dark arena" width="400" height="800">
                    </div>
                    <div class="rb-e">
                        <h3>BUILT AROUND THE RING</h3>
                        <p>The interface borrows from arena architecture, broadcast graphics, corner colors, and the visual discipline of professional boxing.</p>
                    </div>
                    <div class="rb-f">
                        <h3>THE CIRCUIT CONTINUES</h3>
                        <p>Explore the visual language behind the arena, the rounds, and the central Box Slot experience.</p>
                        <a href="ringside-notes.html" class="text-link">Enter Ringside Notes &rarr;</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Final Bell Code -->
        <section class="final-bell-section" id="final-bell">
            <div class="bell-container">
                <div class="bell-row dark">
                    <div class="bell-num">01</div>
                    <div class="bell-head">FREE-TO-PLAY</div>
                    <div class="bell-desc">Box Slot is presented as a free-to-play social casino experience.</div>
                </div>
                <div class="bell-row light">
                    <div class="bell-num">02</div>
                    <div class="bell-head">NO REAL-MONEY GAMBLING</div>
                    <div class="bell-desc">No real-money gambling is offered.</div>
                </div>
                <div class="bell-row dark">
                    <div class="bell-num">03</div>
                    <div class="bell-head">NO CASH PRIZES</div>
                    <div class="bell-desc">No cash rewards are available.</div>
                </div>
                <div class="bell-row light">
                    <div class="bell-num">04</div>
                    <div class="bell-head">SUPPORTED SCREENS</div>
                    <div class="bell-desc">Designed for supported desktop, tablet, and mobile devices.</div>
                </div>
                <div class="bell-row dark">
                    <div class="bell-num">05</div>
                    <div class="bell-head">RESPONSIBLE PLAY</div>
                    <div class="bell-desc">Enjoy the experience as entertainment and take regular breaks.</div>
                </div>
                <div class="bell-row light">
                    <div class="bell-num">06</div>
                    <div class="bell-head">18+ ACCESS</div>
                    <div class="bell-desc">The platform is intended for adults aged 18 and older.</div>
                </div>
            </div>
        </section>

        <!-- Corner Desk -->
        <section class="corner-desk-section" id="corner-desk">
            <div class="cd-red">
                <div>
                    <h2 class="cd-title">NEED<br>SUPPORT?</h2>
                    <div class="cd-email">support@dottiscoutiq.com</div>
                    <div class="cd-note">Support messages only.</div>
                </div>
            </div>
            <div class="cd-neutral">
                <h2 class="display-text" style="margin-bottom: 2rem;">SEND A MESSAGE</h2>
                <form action="#" method="POST" id="contactForm">
                    <div class="form-group">
                        <label for="fname">Full Name</label>
                        <input type="text" id="fname" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" class="form-control" required></textarea>
                    </div>
                    <button type="submit" class="btn-primary">Send Message</button>
                </form>
            </div>
            <div class="cd-blue">
                <h2 class="cd-title" style="font-size:2rem; margin-bottom:2rem;">QUICK<br>ANSWERS</h2>
                <ul style="display:flex; flex-direction:column; gap:1.5rem;">
                    <li><a href="faq.html#free-to-play" class="text-link" style="color:var(--text-light); border-bottom:1px solid var(--text-light);">Is Box Slot free?</a></li>
                    <li><a href="faq.html#real-money" class="text-link" style="color:var(--text-light); border-bottom:1px solid var(--text-light);">Can I win real money?</a></li>
                    <li><a href="faq.html#devices" class="text-link" style="color:var(--text-light); border-bottom:1px solid var(--text-light);">Which devices are supported?</a></li>
                    <li><a href="faq.html#responsible-gaming" class="text-link" style="color:var(--text-light); border-bottom:1px solid var(--text-light);">How does responsible gaming work?</a></li>
                </ul>
            </div>
        </section>
    </main>

    <!-- Scoreboard Footer -->
    <footer class="scoreboard-footer">
        <div class="ft-zone-1">
            <div class="ft-z1-left">
                <div class="display-text" style="font-size: 2rem; color:var(--text-light);">DOTTI<br>SCOUT IQ</div>
                <div class="meta-text" style="color:var(--text-muted); margin-bottom: 1rem;">MIDNIGHT FIGHT CIRCUIT</div>
                <p style="color:var(--text-light-sec); font-size: 0.875rem;">A free-to-play social casino platform created for entertainment, responsible play, and a distinctive boxing-inspired Box Slot experience.</p>
            </div>
            <div class="ft-z1-center">
                <ul class="ft-nav-list">
                    <li><a href="index.html#gate">01 / Gate</a></li>
                    <li><a href="index.html#game">02 / Box Slot</a></li>
                    <li><a href="ringside-notes.html">03 / Ringside</a></li>
                    <li><a href="final-bell.html">04 / Final Bell</a></li>
                    <li><a href="contact.html">05 / Corner Desk</a></li>
                </ul>
            </div>
            <div class="ft-z1-right">
                <div class="meta-text" style="color:var(--text-light);">support@dottiscoutiq.com</div>
                <div style="margin-top: 2rem;">
                    <div class="meta-text" style="color:var(--tape-mint); margin-bottom:0.5rem;">CIRCUIT / ACTIVE</div>
                    <div class="meta-text" style="color:var(--scoreboard-amber);">AGE / 18+</div>
                </div>
            </div>
        </div>
        
        <div class="ft-zone-2">
            <a href="free-to-play.html">Free-to-Play</a> /
            <a href="secure-platform.html">Secure Platform</a> /
            <a href="mobile-ready.html">Mobile Ready</a> /
            <a href="age-restriction.html">18+ Information</a> /
            <a href="faq.html">FAQ</a> /
            <a href="help-centre.html">Help Centre</a>
        </div>

        <div class="ft-zone-3">
            <div class="ft-z3-left">
                <a href="privacy-policy.html">Privacy Policy</a>
                <a href="cookie-policy.html">Cookie Policy</a>
                <a href="terms.html">Terms</a>
                <a href="responsible-gaming.html">Responsible Gaming</a>
                <a href="contact.html">Contact</a>
            </div>
            <div class="ft-z3-right">
                FREE-TO-PLAY<br>
                NO REAL-MONEY GAMBLING<br>
                18+ ONLY
            </div>
        </div>

        <div class="ft-base">
            <div>&copy; 2026 Dotti Scout IQ</div>
            <div>BOX SLOT / MIDNIGHT FIGHT CIRCUIT</div>
            <div>BOUT RECORD / DSI-BX-01</div>
        </div>
    </footer>

    <!-- Cookie Credential -->
    <div class="cookie-credential" id="cookie-notice">
        <div class="ck-hole"></div>
        <div class="ck-header">
            <span>CREDENTIAL / CK-01</span>
            <span class="ck-serial">009384</span>
        </div>
        <div class="ck-title">Cookie Notice</div>
        <div class="ck-text">We use cookies to support website performance and improve your browsing experience.</div>
        <div class="ck-actions">
            <button class="btn-ck-acc" id="btn-accept">Accept</button>
            <button class="btn-ck-rej" id="btn-reject">Reject</button>
        </div>
    </div>

    <script>
        // Mobile Menu
        const menuBtn = document.getElementById('mobile-menu-btn');
        const mobileNav = document.getElementById('mobile-nav');
        if(menuBtn && mobileNav) {
            menuBtn.addEventListener('click', () => {
                mobileNav.classList.toggle('open');
            });
            mobileNav.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', () => {
                    mobileNav.classList.remove('open');
                });
            });
        }

        // Fullscreen API
        const fsBtn = document.getElementById('fs-btn');
        const gameContainer = document.getElementById('game-container');
        if(fsBtn && gameContainer) {
            fsBtn.addEventListener('click', () => {
                if (!document.fullscreenElement) {
                    gameContainer.requestFullscreen().catch(err => {
                        console.error(`Error attempting to enable fullscreen: ${err.message}`);
                    });
                } else {
                    document.exitFullscreen();
                }
            });
        }

        // Cookie Consent
        const cookieNotice = document.getElementById('cookie-notice');
        const btnAccept = document.getElementById('btn-accept');
        const btnReject = document.getElementById('btn-reject');
        
        if (!localStorage.getItem('dotti_cookie_consent')) {
            setTimeout(() => {
                cookieNotice.classList.add('show');
            }, 1000);
        }

        if(btnAccept) {
            btnAccept.addEventListener('click', () => {
                localStorage.setItem('dotti_cookie_consent', 'accepted');
                cookieNotice.classList.remove('show');
            });
        }
        if(btnReject) {
            btnReject.addEventListener('click', () => {
                localStorage.setItem('dotti_cookie_consent', 'rejected');
                cookieNotice.classList.remove('show');
            });
        }

        // Form prevent default
        const form = document.getElementById('contactForm');
        if(form) {
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                alert('Message sent to the corner desk.');
                form.reset();
            });
        }
    </script>
</body>
</html>