.bb-intro{max-width:850px;margin:0 auto 30px;text-align:center}.bb-intro h1{font-size:clamp(42px,7vw,68px);margin:4px 0 10px;color:var(--orange)}.bb-intro>p:last-of-type{color:#ddd;line-height:1.4}.bb-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}.bb-actions .pp-button,.bb-actions .pp-button-secondary{min-width:150px;text-decoration:none}
.bb-history{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.45fr);gap:24px;align-items:start;border:2px solid var(--orange);box-shadow:6px 6px 0 #111}.bb-history h2{font-size:2.2rem;margin:3px 0 8px}.bb-history p{color:#d0d0d0}.bb-hash{text-align:right}.bb-hash span,.bb-hash small{display:block;color:var(--muted);font-size:.8rem}.bb-hash strong{display:block;color:var(--orange);font-size:2rem}.bb-hash code{display:block;margin-top:5px;font-size:.65rem;color:#aaa;overflow-wrap:anywhere}
.bb-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}.bb-board-card{margin:0;border:2px solid var(--orange);box-shadow:6px 6px 0 #111}.bb-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.bb-toolbar label{display:flex;align-items:center;gap:8px}.bb-toolbar select{font:inherit;background:#fff;color:#222;border:1px solid #aaa;padding:4px 8px}.bb-status{padding:3px 10px;border:1px solid var(--orange);color:var(--orange)}
.bb-board{display:grid;grid-template-columns:34px repeat(10,minmax(28px,1fr));aspect-ratio:1/1;gap:0;border:4px solid #111;background:#fff;max-width:720px;margin:auto;image-rendering:pixelated}.bb-board .cell{min-width:0;min-height:0;border:1px solid rgba(0,0,0,.45);position:relative;background-position:center;background-size:cover;image-rendering:pixelated}.bb-board .cell.label{display:flex;align-items:center;justify-content:center;background:#ddd;color:#333;border-color:#fff}.bb-board .cell.hit:after,.bb-board .cell.miss:after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated}.bb-board .cell.hit:after{background-image:url('/assets/battleboats/hit.png')}.bb-board .cell.miss:after{background-image:url('/assets/battleboats/splash.png')}
.bb-side{display:flex;flex-direction:column;gap:20px}.bb-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;padding:1px;background:#555;border:1px solid #555;box-shadow:5px 5px 0 #111}.bb-stats div{background:#303030;padding:12px}.bb-stats span{display:block;color:var(--muted);font-size:.78rem}.bb-stats strong{font-size:1.7rem;color:var(--orange)}.bb-fire,.bb-fleet{margin:0}.bb-fire h2,.bb-fleet h2{margin:3px 0 10px}.bb-fire ol{padding-left:25px}.bb-full{display:block;width:100%;margin-top:15px}.ship-line{display:flex;justify-content:space-between;border-bottom:1px dashed #555;padding:6px 0}.ship-line.sunk{color:var(--orange);text-decoration:line-through}
.bb-log{margin-top:24px}.bb-log h2{margin:3px 0 12px}.shot-row{display:grid;grid-template-columns:105px 1fr 90px 140px;gap:10px;padding:8px 0;border-bottom:1px dashed #555;align-items:center}.shot-row .hit{color:#ff794d}.shot-row .miss{color:#a9d8ff}.shot-row .duplicate,.shot-row .invalid{color:#aaa}.shot-row code{font-size:.65rem;overflow:hidden;text-overflow:ellipsis}.empty{color:#aaa}.bb-join{display:flex;align-items:center;justify-content:space-between;gap:20px;border-left:4px solid var(--orange)}.bb-join h2{margin:3px 0 8px}.bb-join p{margin-bottom:0;max-width:700px}.bb-join .bb-actions{margin-top:0;min-width:max-content}
@media(max-width:900px){.bb-layout{grid-template-columns:1fr}.bb-history{grid-template-columns:1fr}.bb-hash{text-align:left}.bb-side{display:grid;grid-template-columns:1fr 1fr}.bb-stats{grid-column:1/-1}.bb-join{align-items:flex-start;flex-direction:column}.bb-join .bb-actions{justify-content:flex-start;min-width:0}}
@media(max-width:650px){.bb-board-card{padding:9px}.bb-board{grid-template-columns:26px repeat(10,minmax(20px,1fr))}.bb-side{display:flex}.shot-row{grid-template-columns:65px 1fr 65px}.shot-row code{display:none}.bb-actions .pp-button,.bb-actions .pp-button-secondary{flex:1 1 100%}}

/* 0.5.3.5 responsive containment ----------------------------------------- */
.bb-intro,
.bb-history,
.bb-layout,
.bb-board-card,
.bb-board,
.bb-side,
.bb-side > *,
.bb-log,
.bb-join {
  min-width: 0;
  max-width: 100%;
}

.bb-layout > *,
.bb-history > *,
.bb-toolbar > *,
.bb-join > * {
  min-width: 0;
}

.bb-board {
  box-sizing: border-box;
  width: 100%;
}

.bb-toolbar {
  flex-wrap: wrap;
}

.bb-toolbar label {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.bb-toolbar select {
  max-width: 100%;
}

.bb-status {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.bb-actions > * {
  min-width: 0;
  max-width: 100%;
}

.shot-row > * {
  min-width: 0;
}

.shot-row span,
.ship-line span,
.bb-fire,
.bb-fleet,
.bb-history p {
  overflow-wrap: anywhere;
}

@media(max-width:650px){
  .bb-history,
  .bb-board-card,
  .bb-stats {
    box-shadow: 3px 3px 0 #111;
  }

  .bb-board-card {
    width: 100%;
    padding: 9px;
    overflow: hidden;
  }

  .bb-board {
    width: 100%;
    max-width: 100%;
    grid-template-columns: clamp(22px,7.5vw,26px) repeat(10,minmax(0,1fr));
  }

  .bb-toolbar {
    align-items: stretch;
  }

  .bb-toolbar label {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .bb-toolbar select {
    min-width: 0;
    flex: 1 1 150px;
  }

  .bb-status {
    flex: 0 1 auto;
  }

  .bb-side {
    width: 100%;
  }

  .bb-stats {
    width: 100%;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .bb-stats div {
    min-width: 0;
    padding: 10px;
  }

  .shot-row {
    grid-template-columns: minmax(52px,auto) minmax(0,1fr) minmax(58px,auto);
    gap: 7px;
  }

  .shot-row code {
    display: none;
  }

  .bb-actions .pp-button,
  .bb-actions .pp-button-secondary {
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 100%;
    white-space: normal;
  }
}

@media(max-width:380px){
  .bb-stats {
    grid-template-columns: 1fr;
  }

  .bb-toolbar label {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
  }
}