.aggro {
  display: grid;
  gap: 16px;
}

.window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.title-window {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.title-window h1 {
  margin: 0;
}

.hud-window {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Inline row to place HUD and Start windows side-by-side */
.window-row {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.window-row > .window {
  flex: 1 1 0;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--fg);
  cursor: pointer;
  touch-action: manipulation;
}

.play-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.play-btn .icon {
  font-size: 1.1rem;
}

.hud-metrics {
  display: flex;
  gap: 16px;
  flex: 1;
  align-items: center;
}

.metric {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.metric .label {
  font-size: 0.75rem;
  color: var(--muted);
}

.metric .value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Lives: horizontal row */
#aggro-lives {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  line-height: 0;
}
#aggro-lives > * {
  display: block;
}

/* Make life balloons 3x larger */
#aggro-lives .life-icon img {
  width: 54px;
  height: 54px;
}

.playfield {
  min-height: 140px;
  background-image: url('../img/aggro/steam.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 120px auto;
}

.start-window {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#aggro-start:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.starting {
  animation: start-flash 240ms ease-in-out;
}

@keyframes start-flash {
  0% { transform: scale(1); opacity: 1 }
  50% { transform: scale(1.02); opacity: 0.9 }
  100% { transform: scale(1); opacity: 1 }
}

.status {
  text-align: center;
  margin: 0;
  color: var(--muted);
}

.balloon-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-top: 20px;
}

.balloon {
  width: 72px;
  height: 68px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  box-shadow: inset 0 3px 0 #0005;
}

.balloon::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='36' viewBox='0 0 16 36'%3E%3Cpath d='M8 0 Q14 6 8 12 Q2 18 8 24 Q14 30 8 36' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.balloon.correct {
  background: var(--key-correct);
}

.balloon.present {
  background: var(--key-wrong-spot);
  color: #111;
}

.balloon.absent {
  background: var(--key-absent);
}

.keyboard {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.key {
  padding: 12px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--key-default);
  color: #111;
  font-weight: 600;
  cursor: pointer;
}

.key[disabled] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.key[data-state="present"] {
  background: var(--key-wrong-spot);
}

.key[data-state="correct"] {
  background: var(--key-correct);
}

.key[data-state="absent"] {
  background: var(--key-absent);
  color: #f8fafc;
}

.key.wide {
  grid-column: span 2;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[hidden] {
  display: none;
}

.modal-content {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 24px;
  display: grid;
  gap: 16px;
  width: min(360px, 100%);
}

.modal input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--fg);
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-actions button,
.modal-actions .btn {
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

@media (max-width: 600px) {
  .window-row {
    flex-direction: column;
  }
  .balloon {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }
  .hud-window {
    flex-direction: column;
    align-items: stretch;
  }
  .hud-metrics {
    justify-content: space-between;
  }
}

.life-icon img {
  display: block;
}

.aggro{display:grid;gap:16px}
.window{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;display:grid;gap:12px}
.title-window{text-align:center;padding-top:10px;padding-bottom:10px}.title-window h1{margin:0}
.hud-window{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.play-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface-alt);color:var(--fg);cursor:pointer;touch-action:manipulation}
.play-btn[disabled]{opacity:.5;cursor:not-allowed}
.play-btn .icon{font-size:1.1rem}
.hud-metrics{display:flex;gap:16px;flex:1;align-items:center}
.metric{display:inline-flex;gap:6px;align-items:center}
.metric .label{font-size:.75rem;color:var(--muted)}
.metric .value{font-weight:700;font-variant-numeric:tabular-nums}

/* horizontal lives */
#aggro-lives{display:flex;flex-direction:row;align-items:center;gap:6px;line-height:0}
#aggro-lives .life-icon{display:block}
#aggro-lives .life-icon img{display:block}

.playfield{min-height:140px;background-image:url('../img/aggro/steam.svg');background-repeat:no-repeat;background-position:center bottom;background-size:120px auto}
.status{text-align:center;margin:0;color:var(--muted)}
.balloon-row{display:flex;gap:14px;justify-content:center;margin-top:20px}
.balloon{width:72px;height:72px;border-radius:50%;background:#c0392b;color:#fff;font-weight:700;font-size:1.6rem;display:flex;align-items:center;justify-content:center;position:relative;user-select:none;box-shadow:inset 0 3px 0 #0005}
.balloon::after{content:"";position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:16px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='36' viewBox='0 0 16 36'%3E%3Cpath d='M8 0 Q14 6 8 12 Q2 18 8 24 Q14 30 8 36' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}.balloon.correct{background:var(--key-correct)}
.balloon.present{background:var(--key-wrong-spot);color:#111}
.balloon.absent{background:var(--key-absent)}
.keyboard{display:grid;gap:8px;grid-template-columns:repeat(10,minmax(0,1fr))}
.key{padding:12px 0;border-radius:10px;border:1px solid var(--border);background:var(--key-default);color:#111;font-weight:600;cursor:pointer}
.key[disabled]{opacity:.5;cursor:default;pointer-events:none}
.key[data-state="present"]{background:var(--key-wrong-spot)}
.key[data-state="correct"]{background:var(--key-correct)}
.key[data-state="absent"]{background:var(--key-absent);color:#f8fafc}
.key.wide{grid-column:span 2}
.modal{position:fixed;inset:0;background:rgba(15,17,21,.8);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-content{background:var(--surface);border-radius:16px;border:1px solid var(--border);padding:24px;display:grid;gap:16px;width:min(360px,100%)}
.modal input{padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface-alt);color:var(--fg)}
.modal-actions{display:flex;gap:12px;justify-content:flex-end}
.modal-actions button,.modal-actions .btn{padding:8px 16px;border-radius:12px;border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
@media (max-width:600px){
  .balloon{width:60px;height:50px;font-size:1.2rem}
  .hud-window{flex-direction:column;align-items:stretch}
  .hud-metrics{justify-content:space-between}
}