.sunset-flagship .sunset-game{
  --sunset-ink:#fff8e9;
  --sunset-muted:#ddcfbf;
  --sunset-night:#181721;
  --sunset-asphalt:#2d2e35;
  --sunset-panel:#24212d;
  --sunset-coral:#f45f50;
  --sunset-gold:#f5c663;
  --sunset-coast:#42aeb1;
  position:relative;
  width:100%;
  max-width:76rem;
  margin-inline:auto;
  color:var(--sunset-ink);
  font-size:1rem;
  container-type:inline-size;
}
.sunset-flagship .sunset-game:focus-visible{outline:3px solid var(--sunset-gold);outline-offset:5px;border-radius:18px}
.sunset-flagship .sunset-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  border:1px solid #5d5367;
  border-radius:18px;
  background:var(--sunset-night);
  box-shadow:0 24px 68px rgba(21,16,27,.42),inset 0 0 0 1px rgba(255,248,233,.12);
  isolation:isolate;
}
.sunset-flagship .arcade-mount canvas.sunset-canvas,
.sunset-flagship .sunset-game canvas.sunset-canvas{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  max-height:none;
  aspect-ratio:16/9;
  border:0;
  background:var(--sunset-night);
  touch-action:none;
}
.sunset-flagship .sunset-hud{
  position:absolute;
  z-index:4;
  inset:14px 14px auto;
  display:grid;
  grid-template-columns:minmax(110px,.72fr) minmax(128px,1fr) minmax(160px,1.25fr) minmax(150px,1.1fr) minmax(110px,.8fr) minmax(110px,.75fr);
  gap:7px;
  pointer-events:none;
  filter:drop-shadow(0 5px 10px rgba(11,9,15,.42));
}
.sunset-flagship .sunset-hud>*{
  min-width:0;
  min-height:48px;
  padding:8px 11px;
  border:1px solid rgba(255,248,233,.2);
  background:linear-gradient(150deg,rgba(24,23,33,.93),rgba(45,38,52,.84));
  color:var(--sunset-ink);
  font-size:.875rem;
  font-weight:850;
  line-height:1.15;
  letter-spacing:.01em;
  backdrop-filter:blur(7px);
}
.sunset-flagship .sunset-hud>*:first-child{border-radius:11px 0 0 11px}
.sunset-flagship .sunset-hud>*:last-child{border-radius:0 11px 11px 0}
.sunset-flagship .sunset-position,
.sunset-flagship .sunset-speed{font-size:clamp(1rem,2.1vw,1.45rem);font-variant-numeric:tabular-nums}
.sunset-flagship .sunset-position{color:var(--sunset-gold)}
.sunset-flagship .sunset-speed{color:#fff}
.sunset-flagship .sunset-lap{color:var(--sunset-muted)}
.sunset-flagship .sunset-time{color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.sunset-flagship .sunset-boost,
.sunset-flagship .sunset-draft{position:relative;overflow:hidden}
.sunset-flagship .sunset-boost::after,
.sunset-flagship .sunset-draft::after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:auto;
  bottom:0;
  width:var(--sunset-meter,0%);
  height:4px;
  background:var(--sunset-gold);
  box-shadow:0 0 12px rgba(245,198,99,.7);
}
.sunset-flagship .sunset-draft::after{background:var(--sunset-coast);box-shadow:0 0 12px rgba(66,174,177,.75)}
.sunset-flagship .sunset-overlay{
  position:absolute;
  z-index:6;
  inset:0;
  padding:clamp(22px,5vw,58px);
  background:linear-gradient(90deg,rgba(18,16,24,.9) 0%,rgba(18,16,24,.69) 45%,rgba(18,16,24,.1) 78%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  color:var(--sunset-ink);
}
.sunset-flagship .sunset-overlay[hidden]{display:none!important}
.sunset-flagship .sunset-kicker{margin:0 0 6px;color:var(--sunset-gold);font-size:.875rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.sunset-flagship .sunset-title{max-width:12ch;margin:0;font-size:clamp(2.5rem,7vw,5.8rem);font-style:italic;font-weight:950;line-height:.82;letter-spacing:-.07em;text-transform:uppercase;text-shadow:0 4px 0 rgba(244,95,80,.7),0 14px 28px rgba(0,0,0,.34)}
.sunset-flagship .sunset-overlay>p:not(.sunset-kicker),
.sunset-flagship .sunset-result{max-width:35rem;margin:15px 0 0;color:#f0e5d9;font-size:clamp(.9rem,1.7vw,1.12rem);line-height:1.45}
.sunset-flagship .sunset-countdown{
  margin:auto;
  color:var(--sunset-gold);
  font-size:clamp(7rem,25vw,15rem);
  font-style:italic;
  font-weight:950;
  line-height:.75;
  letter-spacing:-.09em;
  text-shadow:0 8px 0 var(--sunset-coral),0 20px 48px rgba(0,0,0,.45);
}
.sunset-flagship .sunset-result{font-size:clamp(1.4rem,3.5vw,2.55rem);font-weight:900;line-height:1.03;letter-spacing:-.04em}
.sunset-flagship .sunset-result-stats{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 0}
.sunset-flagship .sunset-result-stats>*{padding:8px 11px;border:1px solid rgba(255,248,233,.28);border-radius:7px;background:rgba(24,23,33,.72);font-size:.875rem;font-weight:800}
.sunset-flagship .sunset-message{
  min-height:24px;
  margin:8px 2px 0;
  color:#e9ddd1;
  font-size:.875rem;
  font-weight:700;
  line-height:1.4;
  text-align:center;
}
.sunset-flagship .sunset-controls{
  margin-top:10px;
  padding:10px;
  border:1px solid #51475c;
  border-radius:14px;
  background:linear-gradient(150deg,#24212d,#1b1a22);
  display:grid;
  grid-template-columns:minmax(150px,1.25fr) repeat(4,minmax(96px,.75fr)) minmax(108px,.8fr);
  gap:8px;
  align-items:stretch;
}
.sunset-flagship .sunset-controls button,
.sunset-flagship .sunset-controls label,
.sunset-flagship .sunset-start{
  min-width:0;
  min-height:48px;
  margin:0;
  padding:8px 12px;
  border:1px solid #6c6177;
  border-radius:9px;
  background:#302c38;
  color:var(--sunset-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font:inherit;
  font-size:.875rem;
  font-weight:850;
  line-height:1.1;
  text-align:center;
  touch-action:none;
}
.sunset-flagship .sunset-controls button{cursor:pointer;box-shadow:inset 0 -3px rgba(10,8,14,.28)}
.sunset-flagship .sunset-controls button:hover:not(:disabled){border-color:var(--sunset-gold);background:#3a3442}
.sunset-flagship .sunset-controls button:active,
.sunset-flagship .sunset-controls button[aria-pressed="true"]{border-color:var(--sunset-coral);background:#5c3037;box-shadow:inset 0 2px 7px rgba(0,0,0,.3)}
.sunset-flagship .sunset-controls button[data-action="boost"]{border-color:#a8793d;color:#ffe7a8}
.sunset-flagship .sunset-controls button[data-action="brake"]{border-color:#b46568}
.sunset-flagship .sunset-controls button[data-action="start"],
.sunset-flagship .sunset-start{border-color:#ff826c;background:linear-gradient(180deg,#ff765f,#d84f46);color:#fff;font-weight:900}
.sunset-flagship .sunset-controls button:focus-visible,
.sunset-flagship .sunset-controls input:focus-visible,
.sunset-flagship .sunset-steer-pad:focus-visible{outline:3px solid var(--sunset-gold);outline-offset:2px}
.sunset-flagship .sunset-controls button:disabled{opacity:.45;cursor:default}
.sunset-flagship .sunset-controls input{width:20px;height:20px;margin:0;accent-color:var(--sunset-coral)}
.sunset-flagship .sunset-steer-pad{
  position:relative;
  min-height:56px;
  border:1px solid #6c6177;
  border-radius:10px;
  background:linear-gradient(90deg,#302c38,#47404f 50%,#302c38);
  display:grid;
  place-items:center;
  color:var(--sunset-muted);
  font-size:.875rem;
  font-weight:850;
  user-select:none;
  touch-action:none;
}
.sunset-flagship .sunset-steer-pad::before{content:"←  STEER  →";letter-spacing:.08em}
.sunset-flagship .sunset-game.is-boosting .sunset-stage{box-shadow:0 0 0 2px var(--sunset-gold),0 24px 70px rgba(245,132,72,.32)}
.sunset-flagship .sunset-game.is-colliding .sunset-stage{border-color:var(--sunset-coral)}
.sunset-flagship .sunset-game [hidden]{display:none!important}
.sunset-flagship .sunset-game[data-phase="ready"] .sunset-result{max-width:31rem;font-size:1rem;font-weight:650;line-height:1.4;letter-spacing:0}
@container(max-width:820px){
  .sunset-flagship .sunset-hud{grid-template-columns:repeat(3,minmax(0,1fr));inset:8px 8px auto;gap:4px}
  .sunset-flagship .sunset-hud>*{min-height:40px;padding:6px 8px;border-radius:7px!important;font-size:.875rem}
  .sunset-flagship .sunset-controls{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sunset-flagship .sunset-steer-pad{grid-column:span 2}
}
@media(max-width:560px){
  .sunset-flagship .sunset-stage{border-radius:12px}
  .sunset-flagship .arcade-mount canvas.sunset-canvas,
  .sunset-flagship .sunset-game canvas.sunset-canvas{aspect-ratio:4/5}
  .sunset-flagship .sunset-hud{position:relative;inset:auto;padding:7px;background:#1d1b24;filter:none}
  .sunset-flagship .sunset-hud>*{background:#2b2732;backdrop-filter:none}
  .sunset-flagship .sunset-controls{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:7px}
  .sunset-flagship .sunset-controls button,.sunset-flagship .sunset-controls label,.sunset-flagship .sunset-start{min-height:48px;padding-inline:7px;font-size:.875rem}
  .sunset-flagship .sunset-steer-pad{grid-column:1/-1;min-height:60px}
  .sunset-flagship .sunset-overlay{padding:22px;background:linear-gradient(90deg,rgba(18,16,24,.9),rgba(18,16,24,.46))}
  .sunset-flagship .sunset-title{font-size:clamp(2.25rem,14vw,3.8rem)}
  .sunset-flagship .sunset-countdown{font-size:clamp(6rem,34vw,10rem)}
}
@media(prefers-reduced-motion:reduce){
  .sunset-flagship .sunset-game *,.sunset-flagship .sunset-game *::before,.sunset-flagship .sunset-game *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}