/* Mini Mecz: boisko, tablica wyniku i sterowanie. Chrome pochodzi z ./shell.css */
:root {
  --accent: #367a63;
  --on-accent: #fff;
  --bg: #101a23;
  --text: #e9f6f0;
  --surface: #15363a;
  --shell-main: 1050px;
}

body { font-size: 15px }
header strong span { color: #7ad9bf }

main { margin: 27px auto; padding: 0 15px }
h1 { font-size: 36px; margin: 6px }
h1 span { font-size: 28px }
main p { color: var(--text-secondary); line-height: 1.55 }

.board {
  position: relative;
  overflow: hidden;
  border: 4px solid #284e54;
  border-radius: var(--radius-lg);
  background: #275f56;
}

.score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 13px;
  background: var(--surface);
  color: #e7faf5;
  font-size: 16px;
  font-weight: 850;
}

.score b { margin: 0 7px; font-size: 26px; color: #dcfdba }
.score #timer { min-width: 64px; padding: 9px; border-radius: var(--radius-sm); background: #0a2226 }

canvas { display: block; width: 100%; height: auto; image-rendering: pixelated }

.message {
  pointer-events: none;
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  background: #081920d6;
  color: #e9ffe4;
  font-weight: 900;
  font-size: clamp(18px, 3vw, 32px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}

.message.shown { opacity: 1 }

.touch-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  max-width: 850px;
  margin: 15px auto;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(2, 48px);
  gap: 4px;
}

.dpad button { padding: 0; touch-action: none }
.dpad .up { grid-column: 2; grid-row: 1 }
.dpad .left { grid-column: 1; grid-row: 2 }
.dpad .down { grid-column: 2; grid-row: 2 }
.dpad .right { grid-column: 3; grid-row: 2 }

@media (min-width: 900px) {
  .touch-controls { max-width: 500px }
  .hint { margin-bottom: 40px }
}

@media (max-width: 470px) {
  header strong { font-size: 15px }
  header button { padding: 7px; font-size: 11px }
  .score { gap: 10px; font-size: 12px }
  .score b { font-size: 20px }
  .score #timer { min-width: 50px }
}