/* === 2048 Timer + PB split row (external CSS) === */

/* Top-row Time box */
.timer-container{
  min-width:72px;
  padding:8px;
  border-radius:3px;
  text-align:center;
  font-weight:700;
  line-height:1;
  background:#bbada0;
  color:white;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.timer-label{
  font-size:11px;
  letter-spacing:.8px;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom:2px;
}
.timer-value{ font-size:18px; }

/* keep spacing on the score row */
.scores-container{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* PB row host (below the board) */
#pb-host{ display:flex; justify-content:center; margin:14px 0 0 0; }

/* Split PB row */
.pb-row{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
}

/* Left badge like a game tile */
.pb-badge{
  width:64px;
  height:64px;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:26px; color:#f9f6f2;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  background:#ccc; /* default color, replaced by pb-XX classes */
}

/* Right time box */
.pb-time-box{
  flex:1;
  background:#bbada0; color:#f9f6f2;
  border-radius:6px;
  padding:18px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.pb-time-label{ font-size:12px; letter-spacing:.8px; opacity:.95; }
.pb-time{ font-size:24px; font-weight:800; letter-spacing:1px; }

/* Tile-like colors to match 2048 theme */
.pb-32  { background:#f67c5f; }
.pb-64  { background:#f65e3b; }
.pb-128 { background:#edcf72; color:#f9f6f2; }
.pb-256 { background:#edcc61; }
.pb-512 { background:#edc850; }
.pb-1024{ background:#edc53f; }
.pb-2048{ background:#edc22e; }

@media (max-width: 479px) {
	#pb-host{ margin:30px 15px 0 15px; }
}