.brick-game {
  display: grid;
  gap: 14px;
  width: min(620px, 100%);
  min-width: 0;
  text-align: center;
}

.brick-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 5px;
  color: #254866;
  text-align: left;
}

.brick-hud > span:last-child { text-align: right; }
.brick-hud-label { display: block; margin-bottom: 3px; color: #52677c; font-size: .73rem; font-weight: 650; }
.brick-hud strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.brick-hud strong small { color: #63788c; font-size: .8rem; font-weight: 550; }
.brick-hud-center { color: #6a8294; font-size: .58rem; font-weight: 750; letter-spacing: .1em; }

.brick-arena {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d5e5ed;
  border-radius: 18px;
  background: #e8f4f7;
  box-shadow: 0 8px 22px rgba(42, 86, 108, .06);
}

.brick-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 600 / 510;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: ew-resize;
}

.brick-canvas:focus-visible { outline: 3px solid #2472a6; outline-offset: -4px; border-radius: 17px; }
.brick-overlay {
  position: absolute;
  left: 50%;
  top: 62%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(330px, 80%);
  padding: 16px 14px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(214, 230, 235, .9);
  border-radius: 14px;
  color: #26465f;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(45, 83, 104, .07);
  pointer-events: none;
}
.brick-overlay[hidden] { display: none; }
.brick-overlay-symbol { color: #b38a40; font-size: 1.55rem; line-height: 1; }
.brick-overlay strong { font-size: 1.1rem; }
.brick-overlay > span:last-child { max-width: 250px; color: #5c7283; font-size: .8rem; line-height: 1.4; }
.brick-arena-note { position: absolute; top: 20px; left: 0; right: 0; color: #647d8e; font-size: .6rem; font-weight: 700; letter-spacing: .19em; pointer-events: none; }

.brick-controls { display: grid; gap: 12px; }
.brick-steering { display: flex; align-items: center; gap: 15px; width: 100%; }
.brick-steering .brick-direction {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #c8d9e5;
  border-radius: 12px;
  color: #2d536f;
  background: #f4f8fb;
  font-size: 1.4rem;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.brick-steering .brick-direction:hover { background: #e9f2f8; }
.brick-steering .brick-direction:active { background: #d7e9f3; }
.brick-slider-label { display: grid; flex: 1; gap: 0; min-width: 0; color: #586f82; font-size: .73rem; font-weight: 600; }
.brick-slider-label input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  accent-color: #315e86;
  touch-action: pan-y;
  cursor: ew-resize;
}
.brick-actions { display: flex; justify-content: center; }
.brick-actions button { width: auto; min-width: 165px; min-height: 44px; touch-action: manipulation; }
.brick-instructions { margin: 0; color: #627587; font-size: .75rem; line-height: 1.55; }
.brick-status { min-height: 1.4em; margin: 0; color: #365d76; font-size: .82rem; line-height: 1.45; }
.brick-card-icon { position: relative; display: block; width: 48px; height: 48px; transform: rotate(-7deg); }
.brick-card-icon i { position: absolute; width: 19px; height: 13px; border-radius: 2px; background: #dceef9; box-shadow: 3px 4px 0 #95bddb; }
.brick-card-icon i:nth-child(1) { left: 2px; top: 6px; background: #ffe0a1; box-shadow: 3px 4px 0 #dda45b; }
.brick-card-icon i:nth-child(2) { right: 2px; top: 6px; background: #bcece1; box-shadow: 3px 4px 0 #7fc5bc; }
.brick-card-icon i:nth-child(3) { left: 13px; top: 25px; background: #d5cfff; box-shadow: 3px 4px 0 #a69bd5; }
.brick-card-icon b { position: absolute; width: 7px; height: 7px; right: -5px; bottom: 0; border-radius: 50%; background: #fff4c7; box-shadow: 1px 2px 0 #c99b4e; }

@media (max-width: 460px) {
  .brick-game { gap: 11px; }
  .brick-hud-center { display: none; }
  .brick-arena { border-radius: 12px; }
  .brick-overlay { padding: 11px 9px; gap: 4px; border-radius: 11px; }
  .brick-overlay-symbol { display: none; }
  .brick-overlay strong { font-size: .95rem; }
  .brick-overlay > span:last-child { font-size: .71rem; }
  .brick-arena-note { top: 10px; font-size: .5rem; }
  .brick-steering { gap: 10px; }
  .brick-steering .brick-direction { flex-basis: 44px; width: 44px; height: 44px; }
  .brick-instructions { font-size: .71rem; }
}