.robot-game {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: var(--space-xs);
  min-width: 0;
  min-height: 0;
  color: var(--color-white);
  font-size: var(--text-xs);
  container-type: inline-size;
}

.robot-game__invitation { font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; }
.robot-game__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.robot-game [hidden] { display: none; }
.robot-game__title { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-lg); font-weight: 600; white-space: nowrap; }
.robot-game__meta { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; font-family: var(--font-mono); }
.robot-game__timer { font-variant-numeric: tabular-nums; }
.robot-game__icon { display: block; width: 1em; height: 1em; flex-shrink: 0; }
.robot-game__title .robot-game__icon { color: var(--color-dept-marketing); }
.robot-game__progress { flex-shrink: 0; font-family: var(--font-mono); color: var(--color-yellow); }
.robot-game__workspace { display: grid; grid-template-columns: minmax(0, var(--board-portrait-width)) minmax(0, 1fr); gap: var(--space-sm); align-items: center; min-width: 0; min-height: 0; }
.robot-game__arena {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: calc(var(--space-xs) / 2);
  width: min(100%, calc(var(--board-portrait-width) - var(--space-xs)));
  aspect-ratio: 1;
  padding: calc(var(--space-xs) / 2);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-md);
  background: var(--color-blue);
}
.robot-game__cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; background: var(--border-on-dark-soft); border-radius: var(--radius-sm); font-size: var(--text-lg); color: var(--color-yellow); }
.robot-game__cell[data-kind="wall"] { background: repeating-linear-gradient(135deg, var(--border-on-dark) 0 calc(var(--space-xs) / 2), var(--border-on-dark-soft) calc(var(--space-xs) / 2) var(--space-xs)); }
.robot-game__cell[data-kind="chip"] { background: var(--color-yellow-tint); }
.robot-game__cell[data-kind="target"] { border: 1px solid var(--color-dept-marketing); background: var(--color-dept-marketing); color: var(--color-blue); }
.robot-game__marker { display: grid; place-items: center; font-size: var(--text-xl); }
.robot-game__robot { position: absolute; display: grid; place-items: center; inset: calc(var(--space-xs) / 2); border-radius: var(--radius-sm); background: var(--color-yellow); color: var(--color-blue); line-height: 1; box-shadow: var(--shadow-sm); }
.robot-game__robot .robot-game__icon { width: 70%; height: 70%; max-width: var(--text-xl); max-height: var(--text-xl); }
.robot-game__robot[data-direction="east"] .robot-game__icon { transform: rotate(90deg); }
.robot-game__robot[data-direction="south"] .robot-game__icon { transform: rotate(180deg); }
.robot-game__robot[data-direction="west"] .robot-game__icon { transform: rotate(270deg); }
.robot-game__builder { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.robot-game__task { display: flex; align-items: center; gap: calc(var(--space-xs) / 2); color: var(--color-white); font-size: var(--text-xs); line-height: 1.5; }
.robot-game__task .robot-game__icon { font-size: var(--text-base); }
.robot-game__task .robot-game__icon--recycle { color: var(--color-dept-marketing); }
.robot-game__commands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--space-xs) / 2); }
.robot-game__command { display: flex; align-items: center; justify-content: center; gap: calc(var(--space-xs) / 2); border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); padding: calc(var(--space-xs) / 2); background: transparent; color: var(--color-white); font: inherit; cursor: pointer; }
.robot-game__command:hover { background: var(--border-on-dark-soft); }
.robot-game__command > span:first-child { font-family: var(--font-mono); color: var(--color-yellow); font-weight: 600; }
.robot-game__queue { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(var(--space-xs) / 2); padding: 0; margin: 0; list-style: none; }
.robot-game__slot { display: grid; place-items: center; height: var(--space-md); min-width: 0; border: 1px dashed var(--border-on-dark); border-radius: var(--radius-sm); font-family: var(--font-mono); color: var(--text-on-dark); }
.robot-game__slot[data-state="queued"] { border-style: solid; color: var(--color-white); }
.robot-game__slot[data-state="current"] { border-color: var(--color-yellow); background: var(--color-yellow); color: var(--color-blue); }
.robot-game__slot[data-state="done"] { border-style: solid; background: var(--color-yellow-tint); color: var(--color-white); }
.robot-game__status { min-height: calc(var(--text-xs) * 1.5); font-size: var(--text-xs); line-height: 1.5; color: var(--color-white); }
.robot-game__status[data-state="success"] { font-weight: 600; }
.robot-game__status[data-state="error"] { border-left: 3px solid var(--color-yellow); padding-left: var(--space-xs); font-weight: 600; }
.robot-game__arena[data-collision="true"] .robot-game__robot { outline: 2px solid var(--color-white); outline-offset: 1px; }
.robot-game__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--space-xs) / 2); }
.robot-game__actions button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; border: 0; border-radius: var(--radius-pill); padding: var(--space-xs); font: inherit; font-weight: 600; line-height: 1.4; cursor: pointer; }
.robot-game__run { background: var(--color-yellow); color: var(--color-blue); }
.robot-game__next { background: var(--color-white); color: var(--color-blue); }
.robot-game__undo, .robot-game__reset { border: 1px solid var(--border-on-dark); background: transparent; color: var(--color-white); }
.robot-game button:disabled, .robot-game button[aria-disabled="true"] { opacity: 0.5; cursor: default; transform: none; }
.robot-game button:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 2px; }
.robot-game__actions--finished { grid-template-columns: minmax(0, 1fr); }
.robot-game__finish { display: grid; align-content: center; gap: calc(var(--space-xs) / 2); min-width: 0; min-height: 0; }
.robot-game__summary { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 600; line-height: 1.5; }
.robot-game__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--space-xs) / 2); }
.robot-game__name-label { grid-column: 1 / -1; font-size: var(--text-xs); line-height: 1.5; }
.robot-game__name { width: 100%; min-width: 0; padding: calc(var(--space-xs) / 2) var(--space-xs); border: 1px solid var(--border-on-dark); border-radius: var(--radius-sm); background: var(--color-blue); color: var(--color-white); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; }
.robot-game__name::placeholder { color: var(--text-on-dark-muted); }
.robot-game__name[aria-invalid="true"] { border-color: var(--color-yellow); }
.robot-game__save { padding: calc(var(--space-xs) / 2) var(--space-sm); border: 0; border-radius: var(--radius-pill); background: var(--color-yellow); color: var(--color-blue); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.robot-game__score-caption { margin-top: calc(var(--space-xs) / 2); font-size: var(--text-xs); line-height: 1.5; }
.robot-game__scores { list-style: none; margin: 0; padding: 0; }
.robot-game__score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-xs); align-items: center; font-size: var(--text-xs); line-height: 1.5; }
.robot-game__score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.robot-game__score-time { max-width: calc(var(--space-lg) + var(--space-xs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.robot-game__score-stars { color: var(--color-yellow); }

@container (max-width: 28rem) {
  .robot-game__title { gap: calc(var(--space-xs) / 2); font-size: var(--text-base); }
  .robot-game__meta { gap: calc(var(--space-xs) / 2); }
  .robot-game__workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
  .robot-game__arena { width: min(100%, calc(var(--space-lg) * 2)); }
  .robot-game__commands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .robot-game__builder { gap: calc(var(--space-xs) / 2); }
  .robot-game__command { flex-direction: column; gap: 0; padding: calc(var(--space-xs) / 2); line-height: 1.2; }
  .robot-game__command-symbol { font-size: var(--text-base); }
  .robot-game__command-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .robot-game__queue { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .robot-game__slot { height: calc(var(--space-sm) + var(--space-xs) / 2); }
  .robot-game__robot { inset: calc(var(--space-xs) / 4); }
  .robot-game__cell { font-size: var(--text-sm); }
  .robot-game__marker { font-size: var(--text-base); }
}

@media (max-width: 900px) {
  .robot-game__invitation { font-size: var(--text-xl); }
  .robot-game { gap: calc(var(--space-xs) / 2); }
  .robot-game__arena { width: min(100%, calc(var(--space-lg) * 2)); }
}