/* Brick Breaker. The board's pixel size is set by the script from .bk-fit's measured box, so
   nothing here gives .bk-stage a size. */
.game-root[data-game="brick-breaker"] {
  padding: clamp(10px, 2.2vw, 18px);
  background: radial-gradient(120% 100% at 50% 0%, #2a3563 0%, #1d2547 55%, #151b36 100%);
  border-color: #141a33;
}
.bk { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }

.bk-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; max-width: 480px; color: #e8ecff;
}
.bk-level { font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bk-count {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.bk-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .16); }

.bk-bar {
  width: 100%; max-width: 480px; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(232, 236, 255, .14);
}
.bk-bar i {
  display: block; width: 0; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #ffd166, #ff9f1c); transition: width .2s linear;
}

.bk-fit { display: grid; place-items: center; width: 100%; height: calc(100svh - 190px); min-height: 300px; }
.bk-stage {
  position: relative; overflow: hidden; border-radius: 10px;
  box-shadow: 0 10px 26px rgba(6, 10, 30, .45);
  /* A vertical swipe on the board still scrolls the page; the paddle only reads sideways moves. */
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bk-canvas { display: block; width: 100%; height: 100%; }

/* Emptied when the balls launch: the min-height must equal one line, or the board below it
   in the page-filling panel resizes on the first click. */
.bk-cap {
  min-height: 1.6em; line-height: 1.6; margin: 0; text-align: center; font-size: .86rem; font-weight: 600;
  color: rgba(232, 236, 255, .86);
}

.bk-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.bk-pick, .bk-ctl {
  border: 1px solid rgba(232, 236, 255, .25); border-radius: 9px; padding: 6px 12px;
  background: rgba(232, 236, 255, .1); color: #e8ecff; font: inherit; font-size: .84rem;
  font-weight: 650; cursor: pointer;
}
.bk-pick option { color: #223; }
.bk-ctl:hover, .bk-pick:hover { background: rgba(232, 236, 255, .2); }
.bk-fs { display: inline-flex; align-items: center; gap: 7px; }
/* Two nested corners read as "expand" at any size; U+26F6 tofus on Windows and Android. */
.bk-fsicon {
  position: relative; display: inline-block; width: .85em; height: .72em;
  border: 2px solid currentColor; border-radius: 2px;
}
.bk-fsicon::before {
  content: ''; position: absolute; inset: 2px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .45;
}

.bk-end { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 12px; background: rgba(12, 16, 40, .45); }
.bk-end:empty { display: none; }
.bk-end .result-card {
  width: min(100%, 320px); padding: 18px 20px 20px; border-radius: 18px; background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); animation: bk-pop .32s cubic-bezier(.3, 1.4, .5, 1);
}
.bk-end .result-card .result-done { font-size: 1.6rem; margin: 0 0 6px; }
.bk-end .result-card .btn { margin-top: 12px; }
@keyframes bk-pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Mode 3 — phone. The panel sheds its card and reaches the gutter. */
@media (max-width: 640px) {
  .game-root[data-game="brick-breaker"] { border-radius: 0; margin-inline: -8px; padding: 8px 8px 12px; }
  .bk { gap: 6px; }
  /* The board is bound by the width on every phone, so the box takes the board's shape; a
     height budget alone leaves dead panel above and below it and pushes the controls down. */
  .bk-fit { height: auto; aspect-ratio: 400 / 640; max-height: calc(100svh - 212px); min-height: 0; }
  .bk-controls { gap: 6px; flex-wrap: nowrap; }
  .bk-fslabel { display: none; }
  /* One row or the controls fall below the fold; the select is as wide as its longest name. */
  .bk-pick, .bk-ctl { padding: 6px 8px; font-size: .8rem; white-space: nowrap; }
  .bk-pick { max-width: min(118px, 30vw); }
}

/* Mode 1 — page-embedded above the phone: the whole card fits under the header. */
@media (min-width: 641px) {
  .bk-fit { height: min(760px, calc(100svh - 230px)); }
}

/* A phone on its side. */
@media (max-width: 900px) and (max-height: 480px) {
  .bk-cap { display: none; }
  .bk-fslabel { display: none; }
  .bk-fit { height: max(160px, calc(100svh - 120px)); min-height: 0; }
}

/* Mode 2 — page-filling. The panel's size is game-layout.css's; all that is left here is how
   the box inside it divides, so nothing below may name a window measurement. */
html.fills-window .game-root[data-game="brick-breaker"] .bk { height: 100%; }
html.fills-window .game-root[data-game="brick-breaker"] .bk > :not(.bk-fit) { flex: none; }
html.fills-window .game-root[data-game="brick-breaker"] .bk-fit { flex: 1 1 0; height: auto; min-height: 0; }

/* Mode 4 — true full screen, over the page. */
body.bk-locked { overflow: hidden; }
.game-root .bk-full {
  position: fixed; inset: 0; z-index: 200; margin: 0; padding: 10px;
  background: radial-gradient(120% 100% at 50% 0%, #2a3563 0%, #1d2547 55%, #10152b 100%);
}
.game-root .bk-full .bk-fit { flex: 1 1 0; height: auto; max-height: none; min-height: 0; aspect-ratio: auto; }
.game-root .bk-full > :not(.bk-fit) { flex: none; }
.game-root .bk-full .bk-stage { touch-action: none; }